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

cmd/traefik/traefik.go

@@ -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)

docs/content/reference/static-configuration/cli-ref.md

@@ -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```)
 

docs/content/reference/static-configuration/env-ref.md

@@ -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```)
 

docs/content/reference/static-configuration/file.toml

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

docs/content/reference/static-configuration/file.yaml

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

pkg/config/static/static_config.go

@@ -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"`
 }

pkg/version/version.go

@@ -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 {

webui/src/components/_commons/NavBar.vue

@@ -30,12 +30,9 @@
           </q-tabs>
           <div class="right-menu">
             <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>
               <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' }),
+    ...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 () {
@@ -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>

webui/src/store/core/mutations.js

@@ -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
 }