ui: add warning to network page when unavailable

The network page doesn't work inside a virtual cluster yet. Rather than just presenting a spinner, here we add a warning to the page. Informs cockroachdb#115022 Release note: None
stevendanna · Dec 6, 2023 · 8217469 · 8217469
1 parent 6032f68
commit 8217469
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/debug/index.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/debug/index.tsx
@@ -264,13 +264,8 @@ export default function Debug() {
       {disable_kv_level_advanced_debug && (
         <section className="section">
           <InlineAlert
-            title="Some advanced debug options are not available on virtual clusters."
+            title="Some advanced debug options are only available via the system interface."
             intent="warning"
-            message={
-              <span>
-                Contact your system operator to gain access to this interface.
-              </span>
-            }
           />
         </section>
       )}

diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/network/index.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/network/index.tsx
@@ -48,6 +48,8 @@ import { getMatchParamByName } from "src/util/query";
 import "./network.styl";
 import { connectivitySelector } from "src/redux/connectivity";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import { getDataFromServer } from "src/util/dataFromServer";
+import { InlineAlert } from "src/components";
 
 interface NetworkOwnProps {
   nodesSummary: NodesSummary;
@@ -451,32 +453,45 @@ export class Network extends React.Component<NetworkProps, INetworkState> {
   render() {
     const { nodesSummary, location, connectivity } = this.props;
     const filters = getFilters(location);
+    const canShowPage =
+      !getDataFromServer().FeatureFlags.disable_kv_level_advanced_debug;
 
     return (
       <Fragment>
         <Helmet title="Network" />
         <h3 className="base-heading">Network</h3>
-        <Loading
-          loading={
-            !contentAvailable(nodesSummary) || !connectivity?.data?.connections
-          }
-          page={"network"}
-          error={this.props.nodeSummaryErrors}
-          className="loading-image loading-image__spinner-left loading-image__spinner-left__padded"
-          render={() => (
-            <div>
-              <NodeFilterList
-                nodeIDs={filters.nodeIDs}
-                localityRegex={filters.localityRegex}
-              />
-              {this.renderContent(
-                nodesSummary,
-                filters,
-                connectivity?.data?.connections,
-              )}
-            </div>
-          )}
-        />
+        {!canShowPage && (
+          <section className="section">
+            <InlineAlert
+              title="The network page is only available via the system interface."
+              intent="warning"
+            />
+          </section>
+        )}
+        {canShowPage && (
+          <Loading
+            loading={
+              !contentAvailable(nodesSummary) ||
+              !connectivity?.data?.connections
+            }
+            page={"network"}
+            error={this.props.nodeSummaryErrors}
+            className="loading-image loading-image__spinner-left loading-image__spinner-left__padded"
+            render={() => (
+              <div>
+                <NodeFilterList
+                  nodeIDs={filters.nodeIDs}
+                  localityRegex={filters.localityRegex}
+                />
+                {this.renderContent(
+                  nodesSummary,
+                  filters,
+                  connectivity?.data?.connections,
+                )}
+              </div>
+            )}
+          />
+        )}
       </Fragment>
     );
   }