ui: Latency page UI improvements

- use connectivity endpoint as a source of connection statuses and latency; - remove popup with disconnected peers, instead it will be shown on latency matrix; Release note: None
cockroachdb · Jun 20, 2023 · c4960a8 · c4960a8
1 parent 977a2cd
commit c4960a8
Show file tree

Hide file tree

Showing 14 changed files with 677 additions and 583 deletions.
diff --git a/pkg/ui/workspaces/db-console/src/app.tsx b/pkg/ui/workspaces/db-console/src/app.tsx
@@ -406,7 +406,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

diff --git a/pkg/ui/workspaces/db-console/src/redux/apiReducers.ts b/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 };

diff --git a/pkg/ui/workspaces/db-console/src/redux/connectivity.ts b/pkg/ui/workspaces/db-console/src/redux/connectivity.ts
@@ -0,0 +1,4 @@
+import { AdminUIState } from "src/redux/state";
+
+export const connectivitySelector = (state: AdminUIState) =>
+  state.cachedData.connectivity;
diff --git a/pkg/ui/workspaces/db-console/src/util/api.ts b/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("/")) {

diff --git a/pkg/ui/workspaces/db-console/src/views/app/components/chip/index.tsx b/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 }) => (

diff --git a/pkg/ui/workspaces/db-console/src/views/app/components/chip/styles.styl b/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 #c0c6d9
+    border-style solid
+    border-width 1px