release-23.2: ui: omit tenant selector in Metrics when only one exists

pkg/ui/workspaces/db-console/src/redux/tenants.spec.ts

@@ -0,0 +1,69 @@
+// Copyright 2024 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import { containsApplicationTenants } from "src/redux/tenants";
+
+describe("containsApplicationTenants", () => {
+  it("returns false on empty list", () => {
+    expect(containsApplicationTenants([])).toEqual(false);
+  });
+  it("returns false with just a system tenant", () => {
+    expect(
+      containsApplicationTenants([
+        {
+          label: "system",
+          value: "0",
+        },
+      ]),
+    ).toEqual(false);
+  });
+  it("returns false with a system tenant and All", () => {
+    expect(
+      containsApplicationTenants([
+        {
+          label: "system",
+          value: "0",
+        },
+        {
+          label: "All",
+          value: "",
+        },
+      ]),
+    ).toEqual(false);
+  });
+  it("returns true with an app tenant", () => {
+    expect(
+      containsApplicationTenants([
+        {
+          label: "demo",
+          value: "1",
+        },
+      ]),
+    ).toEqual(true);
+  });
+  it("returns true with an app tenant and system and All", () => {
+    expect(
+      containsApplicationTenants([
+        {
+          label: "system",
+          value: "0",
+        },
+        {
+          label: "All",
+          value: "",
+        },
+        {
+          label: "demo",
+          value: "1",
+        },
+      ]),
+    ).toEqual(true);
+  });
+});

pkg/ui/workspaces/db-console/src/redux/tenants.ts

@@ -15,13 +15,18 @@ import { AdminUIState } from "./state";
 export const tenantsSelector = (state: AdminUIState) =>
   state.cachedData.tenants?.data?.tenants;
 
-// tenantDropdownOptions makes an array of dropdown options from
-// the tenants found in the redux state. It also adds a synthetic
-// all option which aggregates all metrics.
+const ALL_TENANTS_OPTION: DropdownOption = {
+  label: "All",
+  value: "",
+};
+
+// tenantDropdownOptions makes an array of dropdown options from the
+// tenants found in the redux state. It also adds a synthetic "All""
+// option prior to the tenant list which aggregates all metrics.
 export const tenantDropdownOptions = createSelector(
   tenantsSelector,
   tenantsList => {
-    const tenantOptions: DropdownOption[] = [{ label: "All", value: "" }];
+    const tenantOptions: DropdownOption[] = [ALL_TENANTS_OPTION];
     tenantsList?.map(tenant =>
       tenantOptions.push({
         label: tenant.tenant_name,
@@ -38,6 +43,13 @@ export const isSystemTenant = (tenantName: string): boolean => {
   return tenantName === SYSTEM_TENANT_NAME;
 };
 
+export const containsApplicationTenants = (
+  tenantOptions: DropdownOption[],
+): boolean =>
+  tenantOptions.some(
+    t => t.label !== SYSTEM_TENANT_NAME && t.label !== ALL_TENANTS_OPTION.label,
+  );
+
 // isSecondaryTenant checkes whether the provided tenant is secondary or not.
 // null or empty values are considered false since (for the current main use case)
 // we do not want to display the empty tenant graph state if a graph doesn't

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/index.tsx

@@ -92,7 +92,11 @@ import {
 } from "src/redux/clusterSettings";
 import { getDataFromServer } from "src/util/dataFromServer";
 import { getCookieValue } from "src/redux/cookies";
-import { isSystemTenant, tenantDropdownOptions } from "src/redux/tenants";
+import {
+  containsApplicationTenants,
+  isSystemTenant,
+  tenantDropdownOptions,
+} from "src/redux/tenants";
 
 interface GraphDashboard {
   label: string;
@@ -410,16 +414,22 @@ export class NodeGraphs extends React.Component<
         <Helmet title={"Metrics"} />
         <h3 className="base-heading">Metrics</h3>
         <PageConfig>
-          {isSystemTenant(currentTenant) && tenantOptions.length > 1 && (
-            <PageConfigItem>
-              <Dropdown
-                title="Virtual Cluster"
-                options={tenantOptions}
-                selected={selectedTenant}
-                onChange={selection => this.setClusterPath("tenant", selection)}
-              />
-            </PageConfigItem>
-          )}
+          {/* By default, `tenantOptions` will have a length of 2 for
+          "All" and "system" tenant. We should omit showing the
+          dropdown in those cases */}
+          {isSystemTenant(currentTenant) &&
+            containsApplicationTenants(tenantOptions) && (
+              <PageConfigItem>
+                <Dropdown
+                  title="Virtual Cluster"
+                  options={tenantOptions}
+                  selected={selectedTenant}
+                  onChange={selection =>
+                    this.setClusterPath("tenant", selection)
+                  }
+                />
+              </PageConfigItem>
+            )}
           <PageConfigItem>
             <Dropdown
               title="Graph"