Updates the Hub tooltip content using a web component and adds an option to disable Hub button

This commit is contained in:
Massimiliano D 2023-07-19 16:56:05 +02:00 committed by GitHub
parent 48de3b0230
commit e29da5ad65
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 67 additions and 92 deletions

View file

@ -205,6 +205,10 @@ func setupServer(staticConfiguration *static.Configuration) (*server.Server, err
log.WithoutContext().Warn("Traefik Pilot has been removed.")
}
if staticConfiguration.API != nil {
version.DisableDashboardAd = staticConfiguration.API.DisableDashboardAd
}
// Plugins
pluginBuilder, err := createPluginBuilder(staticConfiguration)

View file

@ -45,6 +45,9 @@ Activate dashboard. (Default: ```true```)
`--api.debug`:
Enable additional endpoints for debugging and profiling. (Default: ```false```)
`--api.disabledashboardad`:
Disable ad in the dashboard. (Default: ```false```)
`--api.insecure`:
Activate API directly on the entryPoint named traefik. (Default: ```false```)

View file

@ -45,6 +45,9 @@ Activate dashboard. (Default: ```true```)
`TRAEFIK_API_DEBUG`:
Enable additional endpoints for debugging and profiling. (Default: ```false```)
`TRAEFIK_API_DISABLEDASHBOARDAD`:
Disable ad in the dashboard. (Default: ```false```)
`TRAEFIK_API_INSECURE`:
Activate API directly on the entryPoint named traefik. (Default: ```false```)

View file

@ -265,6 +265,7 @@
insecure = true
dashboard = true
debug = true
disabledashboardad = false
[metrics]
[metrics.prometheus]

View file

@ -292,6 +292,7 @@ api:
insecure: true
dashboard: true
debug: true
disabledashboardad: false
metrics:
prometheus:
buckets:

View file

@ -107,6 +107,7 @@ type API struct {
Insecure bool `description:"Activate API directly on the entryPoint named traefik." json:"insecure,omitempty" toml:"insecure,omitempty" yaml:"insecure,omitempty" export:"true"`
Dashboard bool `description:"Activate dashboard." json:"dashboard,omitempty" toml:"dashboard,omitempty" yaml:"dashboard,omitempty" export:"true"`
Debug bool `description:"Enable additional endpoints for debugging and profiling." json:"debug,omitempty" toml:"debug,omitempty" yaml:"debug,omitempty" export:"true"`
DisableDashboardAd bool `description:"Disable ad in the dashboard." json:"disableDashboardAd,omitempty" toml:"disableDashboardAd,omitempty" yaml:"disableDashboardAd,omitempty" export:"true"`
// TODO: Re-enable statistics
// Statistics *types.Statistics `description:"Enable more detailed statistics." json:"statistics,omitempty" toml:"statistics,omitempty" yaml:"statistics,omitempty" label:"allowEmpty" file:"allowEmpty" export:"true"`
}

View file

@ -22,7 +22,8 @@ var (
BuildDate = "I don't remember exactly"
// StartDate holds the start date of traefik.
StartDate = time.Now()
// UUID instance uuid.
// DisableDashboardAd disables ad in the dashboard.
DisableDashboardAd = false
)
// Handler expose version routes.
@ -41,10 +42,12 @@ func (v Handler) Append(router *mux.Router) {
Codename string
StartDate time.Time `json:"startDate"`
UUID string `json:"uuid,omitempty"`
DisableDashboardAd bool `json:"disableDashboardAd,omitempty"`
}{
Version: Version,
Codename: Codename,
StartDate: StartDate,
DisableDashboardAd: DisableDashboardAd,
}
if err := templatesRenderer.JSON(response, http.StatusOK, v); err != nil {

View file

@ -30,12 +30,9 @@
</q-tabs>
<div class="right-menu">
<q-tabs>
<div class="tooltip" :class="{ 'is-dark-mode': $q.dark.isActive }">
<q-btn type="a" href="https://traefik.io/try-hub-now" target="_blank" flat no-caps label="Try Traefik Hub →" class="btn-menu btn-hub" />
<div class="content">
<p>Extend your capabilities to API Management</p>
<img alt="" v-bind:src="getHubLogoSrc($q.dark.isActive)" width="100px" />
</div>
<div v-if="!coreVersion.disableDashboardAd && hasHubButtonComponent" style="margin-right: 5px;">
<hub-button-app theme="dark" v-if="$q.dark.isActive"></hub-button-app>
<hub-button-app v-if="!$q.dark.isActive"></hub-button-app>
</div>
<q-btn @click="$q.dark.toggle()" stretch flat no-caps icon="invert_colors" :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`" class="btn-menu" />
<q-btn stretch flat icon="eva-question-mark-circle-outline">
@ -89,14 +86,41 @@ export default {
},
name () {
return config.productName
},
disableDashboardAd () {
return this.coreVersion.disableDashboardAd
}
},
data () {
return {
hasHubButtonComponent: false
}
},
methods: {
...mapActions('core', { getVersion: 'getVersion' }),
getHubLogoSrc (isDarkMode) {
return isDarkMode
? 'statics/hub-logo-horizontal-dark.png'
: 'statics/hub-logo-horizontal-clear.png'
...mapActions('core', { getVersion: 'getVersion' })
},
watch: {
disableDashboardAd (newValue) {
if (!newValue && customElements.get('hub-button-app') === undefined) {
const hubButtonScript = document.createElement('script')
hubButtonScript.async = true
hubButtonScript.onerror = () => {
const hubButtonScriptLocal = document.createElement('script')
hubButtonScriptLocal.async = true
hubButtonScriptLocal.onload = () => {
this.hasHubButtonComponent = customElements.get('hub-button-app') !== undefined
}
// Sources: https://github.com/traefik/traefiklabs-hub-button-app
hubButtonScriptLocal.src = 'statics/traefiklabs-hub-button-app/main-v1.js'
document.head.appendChild(hubButtonScriptLocal)
}
hubButtonScript.onload = () => {
this.hasHubButtonComponent = customElements.get('hub-button-app') !== undefined
}
// Sources: https://github.com/traefik/traefiklabs-hub-button-app
hubButtonScript.src = 'https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js'
document.head.appendChild(hubButtonScript)
}
}
},
created () {
@ -164,11 +188,6 @@ export default {
font-weight: 600;
}
.btn-hub {
color: #dedede;
background: #5f6572;
}
.q-item {
padding: 0;
}
@ -178,69 +197,4 @@ export default {
align-items: flex-start;
}
.tooltip {
display: inline-block;
.content {
display: flex;
align-items: center;
visibility: hidden;
font-size: 16px;
padding: 20px;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 0 6px rgba(0,0,0,0.16), 0 0 6px rgba(0,0,0,0.23);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 90%;
left: -5%;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
&::after {
content: "";
position: absolute;
top: -10px;
left: 22%;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid #fff;
}
p {
align-self: baseline;
color: var(--q-color-primary);
font-weight: bold;
margin: 0 20px 0 0;
max-width: 180px;
}
img {
margin: 0 20px;
}
}
&.is-dark-mode .content {
background-color: #262626;
box-shadow: 0 0 6px rgba(10,18,36,0.16), 0 0 6px rgba(10,18,36,0.23);
&::after {
border-bottom: 10px solid #262626;
}
p {
color: #fff;
}
}
&:hover .content {
visibility: visible;
opacity: 1;
}
}
</style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -22,4 +22,5 @@ export function getOverviewClear (state) {
// ----------------------------
export function getVersionSuccess (state, body) {
state.version = body
state.version.disableDashboardAd = !!body.disableDashboardAd // Ensures state.version.disableDashboardAd is defined
}