Query UI: Only show tenant box with enforcement on (thanos-io#7186)

With this commit we only show the tenant-ui box when enforcement of
tenancy is on, as it is not needed otherwise.

Signed-off-by: Jacob Baungard Hansen <[email protected]>

cmd/thanos/query.go

@@ -687,7 +687,7 @@ func runQuery(
 
 		ins := extpromhttp.NewTenantInstrumentationMiddleware(tenantHeader, defaultTenant, reg, nil)
 		// TODO(bplotka in PR #513 review): pass all flags, not only the flags needed by prefix rewriting.
-		ui.NewQueryUI(logger, endpoints, webExternalPrefix, webPrefixHeaderName, alertQueryURL, tenantHeader, defaultTenant).Register(router, ins)
+		ui.NewQueryUI(logger, endpoints, webExternalPrefix, webPrefixHeaderName, alertQueryURL, tenantHeader, defaultTenant, enforceTenancy).Register(router, ins)
 
 		api := apiv1.NewQueryAPI(
 			logger,

pkg/ui/query.go

@@ -30,12 +30,17 @@ type Query struct {
 	now     func() model.Time
 }
 
-func NewQueryUI(logger log.Logger, endpointSet *query.EndpointSet, externalPrefix, prefixHeader, alertQueryURL string, tenantHeader string, defaultTenant string) *Query {
+func NewQueryUI(logger log.Logger, endpointSet *query.EndpointSet, externalPrefix, prefixHeader, alertQueryURL string, tenantHeader string, defaultTenant string, enforceTenancy bool) *Query {
+	displayTenantBox := "none"
+	if enforceTenancy {
+		displayTenantBox = "inline-block"
+	}
 	tmplVariables := map[string]string{
-		"Component":     component.Query.String(),
-		"queryURL":      alertQueryURL,
-		"tenantHeader":  tenantHeader,
-		"defaultTenant": defaultTenant,
+		"Component":        component.Query.String(),
+		"queryURL":         alertQueryURL,
+		"tenantHeader":     tenantHeader,
+		"defaultTenant":    defaultTenant,
+		"displayTenantBox": displayTenantBox,
 	}
 	runtimeInfo := api.GetRuntimeInfoFunc(logger)
 

pkg/ui/react-app/globals.d.ts

@@ -7,5 +7,6 @@ declare global {
     THANOS_QUERY_URL: string;
     THANOS_DEFAULT_TENANT: string;
     THANOS_TENANT_HEADER: string;
+    THANOS_DISPLAY_TENANT_BOX: string;
   }
 }

pkg/ui/react-app/public/index.html

@@ -20,6 +20,7 @@
       const THANOS_QUERY_URL="{{ .queryURL }}";
       const THANOS_TENANT_HEADER="{{ .tenantHeader }}";
       const THANOS_DEFAULT_TENANT="{{ .defaultTenant }}";
+      const THANOS_DISPLAY_TENANT_BOX="{{ .displayTenantBox }}";
     </script>
 
     <!--

pkg/ui/react-app/src/globals.ts

@@ -5,3 +5,4 @@ window.moment = require('moment');
 window.THANOS_QUERY_URL = '';
 window.THANOS_TENANT_HEADER = '';
 window.THANOS_DEFAULT_TENANT = '';
+window.THANOS_DISPLAY_TENANT_BOX = '';

pkg/ui/react-app/src/pages/graph/Panel.tsx

@@ -30,7 +30,7 @@ import { Store } from '../../thanos/pages/stores/store';
 import PathPrefixProps from '../../types/PathPrefixProps';
 import { QueryParams } from '../../types/types';
 import { parseDuration } from '../../utils';
-import { defaultTenant, tenantHeader } from '../../thanos/config';
+import { defaultTenant, tenantHeader, displayTenantBox } from '../../thanos/config';
 
 export interface PanelProps {
   id: string;
@@ -587,14 +587,14 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
                 <option value="prometheus">Prometheus</option>
                 <option value="thanos">Thanos</option>
               </Input>
-              <Label style={{ marginLeft: '10px', display: 'inline-block' }} className="control-label">
+              <Label style={{ marginLeft: '10px', display: displayTenantBox }} className="control-label">
                 Tenant
               </Label>
               <Input
                 style={{
                   width: 'auto',
                   marginLeft: '10px',
-                  display: 'inline-block',
+                  display: displayTenantBox,
                 }}
                 id={`tenant=${id}`}
                 type="text"

pkg/ui/react-app/src/thanos/config.ts

@@ -1,6 +1,7 @@
 declare const THANOS_QUERY_URL: string;
 declare const THANOS_TENANT_HEADER: string;
 declare const THANOS_DEFAULT_TENANT: string;
+declare const THANOS_DISPLAY_TENANT_BOX: string;
 
 export let queryURL = THANOS_QUERY_URL;
 if (queryURL === '' || queryURL === '{{ .queryURL }}') {
@@ -16,3 +17,8 @@ export let tenantHeader = THANOS_TENANT_HEADER;
 if (tenantHeader === '' || tenantHeader === '{{ .tenantHeader }}') {
   tenantHeader = 'thanos-tenant';
 }
+
+export let displayTenantBox = THANOS_DISPLAY_TENANT_BOX;
+if (displayTenantBox === '' || displayTenantBox === '{{ .displayTenantBox }}') {
+  displayTenantBox = 'none';
+}

pkg/ui/static/react/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "./static/css/main.5a4981c4.css",
-    "main.js": "./static/js/main.5808e5d4.js",
+    "main.js": "./static/js/main.00501579.js",
     "static/media/codicon.ttf": "./static/media/codicon.b3726f0165bf67ac6849.ttf",
     "index.html": "./index.html",
     "static/media/index.cjs": "./static/media/index.cd351d7c31d0d3fccf96.cjs",
     "main.5a4981c4.css.map": "./static/css/main.5a4981c4.css.map",
-    "main.5808e5d4.js.map": "./static/js/main.5808e5d4.js.map"
+    "main.00501579.js.map": "./static/js/main.00501579.js.map"
   },
   "entrypoints": [
     "static/css/main.5a4981c4.css",
-    "static/js/main.5808e5d4.js"
+    "static/js/main.00501579.js"
   ]
 }

pkg/ui/static/react/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}"</script><script>const THANOS_COMPONENT="{{ .Component }}",THANOS_QUERY_URL="{{ .queryURL }}",THANOS_TENANT_HEADER="{{ .tenantHeader }}",THANOS_DEFAULT_TENANT="{{ .defaultTenant }}"</script><link rel="manifest" href="./manifest.json"/><title>Thanos | Highly available Prometheus setup</title><script defer="defer" src="./static/js/main.5808e5d4.js"></script><link href="./static/css/main.5a4981c4.css" rel="stylesheet"></head><body class="bootstrap"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}"</script><script>const THANOS_COMPONENT="{{ .Component }}",THANOS_QUERY_URL="{{ .queryURL }}",THANOS_TENANT_HEADER="{{ .tenantHeader }}",THANOS_DEFAULT_TENANT="{{ .defaultTenant }}",THANOS_DISPLAY_TENANT_BOX="{{ .displayTenantBox }}"</script><link rel="manifest" href="./manifest.json"/><title>Thanos | Highly available Prometheus setup</title><script defer="defer" src="./static/js/main.00501579.js"></script><link href="./static/css/main.5a4981c4.css" rel="stylesheet"></head><body class="bootstrap"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>