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.") log.WithoutContext().Warn("Traefik Pilot has been removed.")
} }
if staticConfiguration.API != nil {
version.DisableDashboardAd = staticConfiguration.API.DisableDashboardAd
}
// Plugins // Plugins
pluginBuilder, err := createPluginBuilder(staticConfiguration) pluginBuilder, err := createPluginBuilder(staticConfiguration)

View file

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

View file

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

View file

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

View file

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

View file

@ -104,9 +104,10 @@ type ServersTransport struct {
// API holds the API configuration. // API holds the API configuration.
type API struct { 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"` 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"` 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"` 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 // 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"` // 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" BuildDate = "I don't remember exactly"
// StartDate holds the start date of traefik. // StartDate holds the start date of traefik.
StartDate = time.Now() StartDate = time.Now()
// UUID instance uuid. // DisableDashboardAd disables ad in the dashboard.
DisableDashboardAd = false
) )
// Handler expose version routes. // Handler expose version routes.
@ -37,14 +38,16 @@ func (v Handler) Append(router *mux.Router) {
router.Methods(http.MethodGet).Path("/api/version"). router.Methods(http.MethodGet).Path("/api/version").
HandlerFunc(func(response http.ResponseWriter, request *http.Request) { HandlerFunc(func(response http.ResponseWriter, request *http.Request) {
v := struct { v := struct {
Version string Version string
Codename string Codename string
StartDate time.Time `json:"startDate"` StartDate time.Time `json:"startDate"`
UUID string `json:"uuid,omitempty"` UUID string `json:"uuid,omitempty"`
DisableDashboardAd bool `json:"disableDashboardAd,omitempty"`
}{ }{
Version: Version, Version: Version,
Codename: Codename, Codename: Codename,
StartDate: StartDate, StartDate: StartDate,
DisableDashboardAd: DisableDashboardAd,
} }
if err := templatesRenderer.JSON(response, http.StatusOK, v); err != nil { if err := templatesRenderer.JSON(response, http.StatusOK, v); err != nil {

View file

@ -30,12 +30,9 @@
</q-tabs> </q-tabs>
<div class="right-menu"> <div class="right-menu">
<q-tabs> <q-tabs>
<div class="tooltip" :class="{ 'is-dark-mode': $q.dark.isActive }"> <div v-if="!coreVersion.disableDashboardAd && hasHubButtonComponent" style="margin-right: 5px;">
<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" /> <hub-button-app theme="dark" v-if="$q.dark.isActive"></hub-button-app>
<div class="content"> <hub-button-app v-if="!$q.dark.isActive"></hub-button-app>
<p>Extend your capabilities to API Management</p>
<img alt="" v-bind:src="getHubLogoSrc($q.dark.isActive)" width="100px" />
</div>
</div> </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 @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"> <q-btn stretch flat icon="eva-question-mark-circle-outline">
@ -89,14 +86,41 @@ export default {
}, },
name () { name () {
return config.productName return config.productName
},
disableDashboardAd () {
return this.coreVersion.disableDashboardAd
}
},
data () {
return {
hasHubButtonComponent: false
} }
}, },
methods: { methods: {
...mapActions('core', { getVersion: 'getVersion' }), ...mapActions('core', { getVersion: 'getVersion' })
getHubLogoSrc (isDarkMode) { },
return isDarkMode watch: {
? 'statics/hub-logo-horizontal-dark.png' disableDashboardAd (newValue) {
: 'statics/hub-logo-horizontal-clear.png' 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 () { created () {
@ -164,11 +188,6 @@ export default {
font-weight: 600; font-weight: 600;
} }
.btn-hub {
color: #dedede;
background: #5f6572;
}
.q-item { .q-item {
padding: 0; padding: 0;
} }
@ -178,69 +197,4 @@ export default {
align-items: flex-start; 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> </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) { export function getVersionSuccess (state, body) {
state.version = body state.version = body
state.version.disableDashboardAd = !!body.disableDashboardAd // Ensures state.version.disableDashboardAd is defined
} }