ui: Network latency page improvements

pkg/ui/workspaces/db-console/src/app.spec.tsx

@@ -585,6 +585,7 @@ describe("Routing to", () => {
       screen.getByText(NETWORK_DIAGNOSTICS_REPORT_HEADER, {
         selector: "h3",
       });
+      expect(history.location.pathname).toBe("/reports/network/region");
     });
   });
 

pkg/ui/workspaces/db-console/src/app.tsx

@@ -408,7 +408,10 @@ export const App: React.FC<AppProps> = (props: AppProps) => {
                       path={`/reports/network/:${nodeIDAttr}`}
                       component={Network}
                     />
-                    <Route exact path="/reports/network" component={Network} />
+                    <Redirect
+                      from={`/reports/network`}
+                      to={`/reports/network/region`}
+                    />
                     <Route exact path="/reports/nodes" component={Nodes} />
                     <Route
                       exact

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

@@ -528,6 +528,15 @@ const tenantsListObj = new CachedDataReducer(
 
 export const refreshTenantsList = tenantsListObj.refresh;
 
+const connectivityObj = new CachedDataReducer(
+  api.getNetworkConnectivity,
+  "connectivity",
+  moment.duration(30, "s"),
+  moment.duration(1, "minute"),
+);
+
+export const refreshConnectivity = connectivityObj.refresh;
+
 export interface APIReducersState {
   cluster: CachedDataReducerState<api.ClusterResponseMessage>;
   events: CachedDataReducerState<
@@ -592,6 +601,7 @@ export interface APIReducersState {
   snapshot: KeyedCachedDataReducerState<clusterUiApi.GetTracingSnapshotResponse>;
   rawTrace: KeyedCachedDataReducerState<clusterUiApi.GetTraceResponse>;
   tenants: CachedDataReducerState<api.ListTenantsResponseMessage>;
+  connectivity: CachedDataReducerState<api.NetworkConnectivityResponse>;
 }
 
 export const apiReducersReducer = combineReducers<APIReducersState>({
@@ -647,6 +657,7 @@ export const apiReducersReducer = combineReducers<APIReducersState>({
   [statementFingerprintInsightsReducerObj.actionNamespace]:
     statementFingerprintInsightsReducerObj.reducer,
   [tenantsListObj.actionNamespace]: tenantsListObj.reducer,
+  [connectivityObj.actionNamespace]: connectivityObj.reducer,
 });
 
 export { CachedDataReducerState, KeyedCachedDataReducerState };

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

@@ -0,0 +1,14 @@
+// Copyright 2023 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 { AdminUIState } from "src/redux/state";
+
+export const connectivitySelector = (state: AdminUIState) =>
+  state.cachedData.connectivity;

pkg/ui/workspaces/db-console/src/util/api.ts

@@ -208,6 +208,11 @@ export type ListTenantsRequestMessage =
 export type ListTenantsResponseMessage =
   protos.cockroach.server.serverpb.ListTenantsResponse;
 
+export type NetworkConnectivityRequest =
+  protos.cockroach.server.serverpb.NetworkConnectivityRequest;
+export type NetworkConnectivityResponse =
+  protos.cockroach.server.serverpb.NetworkConnectivityResponse;
+
 // API constants
 
 export const API_PREFIX = "_admin/v1";
@@ -851,6 +856,18 @@ export function getTenants(
   );
 }
 
+export function getNetworkConnectivity(
+  req: NetworkConnectivityRequest,
+  timeout?: moment.Duration,
+): Promise<NetworkConnectivityResponse> {
+  return timeoutFetch(
+    serverpb.NetworkConnectivityResponse,
+    `${STATUS_PREFIX}/connectivity`,
+    req as any,
+    timeout,
+  );
+}
+
 export function IsValidateUriName(...args: string[]): Promise<any> {
   for (const name of args) {
     if (name.includes("/")) {

pkg/ui/workspaces/db-console/src/views/app/components/chip/index.tsx

@@ -12,8 +12,16 @@ import React from "react";
 import "./styles.styl";
 
 interface IChipProps {
-  title: string;
-  type?: "green" | "lightgreen" | "grey" | "blue" | "lightblue" | "yellow";
+  title: React.ReactChild;
+  type?:
+    | "green"
+    | "lightgreen"
+    | "grey"
+    | "blue"
+    | "lightblue"
+    | "yellow"
+    | "red"
+    | "white";
 }
 
 export const Chip: React.SFC<IChipProps> = ({ title, type }) => (

pkg/ui/workspaces/db-console/src/views/app/components/chip/styles.styl

@@ -35,3 +35,10 @@
     background $chip-blue
   &--yellow
     background $chip-yellow
+  &--red
+    background $chip-red
+  &--white
+    background $colors--neutral-0
+    border-color $colors--neutral-4
+    border-style solid
+    border-width 1px