Merge #45638

45638: ui: Network latency tooltip r=dhartunian a=elkmaster Updated tooltip styles. Resolves: #45228 Release note (ui): none Co-authored-by: Vlad Los <[email protected]> Co-authored-by: Vlad <[email protected]>
cockroachdb · May 26, 2020 · e6c15ca · e6c15ca
2 parents 0857bf6 + e317cea
commit e6c15ca
Show file tree

Hide file tree

Showing 9 changed files with 416 additions and 75 deletions.
diff --git a/pkg/ui/src/components/core/colors.styl b/pkg/ui/src/components/core/colors.styl
@@ -40,6 +40,7 @@ $colors--primary-blue-3 = #0788ff
 $colors--primary-blue-4 = #005fb3
 $colors--primary-blue-5 = #00294d
 
+$colors--primary-green-0 = #daf8d4
 $colors--primary-green-1 = #b4f1aa
 $colors--primary-green-2 = #76de49
 $colors--primary-green-3 = #37a806

diff --git a/pkg/ui/src/util/decorators.tsx b/pkg/ui/src/util/decorators.tsx
@@ -0,0 +1,35 @@
+// Copyright 2020 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 React from "react";
+import { RenderFunction } from "storybook__react";
+import { Provider } from "react-redux";
+import { combineReducers, createStore } from "redux";
+import { ConnectedRouter, connectRouter } from "connected-react-router";
+import { createMemoryHistory } from "history";
+
+const history = createMemoryHistory();
+const routerReducer = connectRouter(history);
+
+const store = createStore(
+  combineReducers({
+    router: routerReducer,
+  }),
+);
+
+export const styledWrapper = (styles: React.CSSProperties) => (
+  storyFn: RenderFunction,
+) => <div style={styles}>{storyFn()}</div>;
+
+export const withRouterDecorator = (storyFn: RenderFunction) => (
+  <Provider store={store}>
+    <ConnectedRouter history={history}>{storyFn()}</ConnectedRouter>
+  </Provider>
+);
diff --git a/pkg/ui/src/views/reports/containers/network/index.tsx b/pkg/ui/src/views/reports/containers/network/index.tsx
@@ -41,7 +41,7 @@ interface NetworkOwnProps {
 export interface Identity {
   nodeID: number;
   address: string;
-  locality: string;
+  locality?: string;
   updatedAt: moment.Moment;
 }
 
@@ -76,6 +76,9 @@ function contentAvailable(nodesSummary: NodesSummary) {
 }
 
 export function getValueFromString(key: string, params: string, fullString?: boolean) {
+  if (!params) {
+    return;
+  }
   const result = params.match(new RegExp(key + "=([^,#]*)"));
   if (!result) {
     return;

diff --git a/pkg/ui/src/views/reports/containers/network/latency/index.tsx b/pkg/ui/src/views/reports/containers/network/latency/index.tsx
@@ -28,7 +28,7 @@ interface StdDev {
   stddevPlus2: number;
 }
 
-interface ILegendProps {
+export interface ILatencyProps {
   displayIdentities: Identity[];
   staleIDs: Set<number>;
   multipleHeader: boolean;
@@ -159,20 +159,6 @@ const getLatencyCell = ({ latency, identityB, identityA }: { latency: number; id
       />
     );
   }
-  if (latency === -2) {
-    return (
-      <td
-        className={generateClassName(["latency-table__cell", "latency-table__cell--no-connection"])}
-      >
-        <Tooltip placement="bottom" title="Disconnected">
-          <Chip
-            title="--"
-            type="yellow"
-          />
-        </Tooltip>
-      </td>
-    );
-  }
   if (latency === -1) {
     return (
       <td
@@ -201,17 +187,29 @@ const getLatencyCell = ({ latency, identityB, identityA }: { latency: number; id
       std.stddev > 0 && latency > std.stddevPlus2,
   });
   const type: any = classNames({
+    "yellow":
+      latency === -2,
     "green":
-      std.stddev > 0 && latency < std.stddevMinus2,
+      latency > 0 && std.stddev > 0 && latency < std.stddevMinus2,
     "lightgreen":
-      std.stddev > 0 && latency < std.stddevMinus1 && latency >= std.stddevMinus2,
+      latency > 0 && std.stddev > 0 && latency < std.stddevMinus1 && latency >= std.stddevMinus2,
     "grey":
-      std.stddev > 0 && latency >= std.stddevMinus1 && latency <= std.stddevPlus1,
+      latency > 0 && std.stddev > 0 && latency >= std.stddevMinus1 && latency <= std.stddevPlus1,
     "lightblue":
-      std.stddev > 0 && latency > std.stddevPlus1 && latency <= std.stddevPlus2,
+      latency > 0 && std.stddev > 0 && latency > std.stddevPlus1 && latency <= std.stddevPlus2,
     "blue":
-      std.stddev > 0 && latency > std.stddevPlus2,
+      latency > 0 && std.stddev > 0 && latency > std.stddevPlus2,
   });
+  const renderDescription = (data: string) => {
+    if (!data) {
+      return;
+    }
+    return _.map(data.split(","), (identity, index) => (
+      <p key={index} className="Chip--tooltip__nodes--item-description">
+        {`${identity},`}
+      </p>
+    ));
+  };
   return (
     <td className={className}>
       {collapsed ? (
@@ -225,20 +223,20 @@ const getLatencyCell = ({ latency, identityB, identityA }: { latency: number; id
             <div className="Chip--tooltip__nodes">
               <div className="Chip--tooltip__nodes--item">
                 <p className="Chip--tooltip__nodes--item-title">{`Node ${identityB.nodeID}`}</p>
-                <p className="Chip--tooltip__nodes--item-description">{identityB.locality}</p>
+                {renderDescription(identityB.locality)}
               </div>
               <Divider type="vertical" />
               <div className="Chip--tooltip__nodes--item">
                 <p className="Chip--tooltip__nodes--item-title">{`Node ${identityA.nodeID}`}</p>
-                <p className="Chip--tooltip__nodes--item-description">{identityA.locality}</p>
+                {renderDescription(identityA.locality)}
               </div>
             </div>
-            <p className={`color--${type}`}>{`${latency.toFixed(2)}ms roundtrip`}</p>
+            {latency > 0 && <p className={`color--${type} Chip--tooltip__latency`}>{`${latency.toFixed(2)}ms roundtrip`}</p>}
           </div>
         )}>
           <div>
             <Chip
-              title={`${latency.toFixed(2)}ms`}
+              title={latency > 0 ? latency.toFixed(2) + "ms" : "--"}
               type={type}
             />
           </div>
@@ -249,7 +247,7 @@ const getLatencyCell = ({ latency, identityB, identityA }: { latency: number; id
 };
 
 // tslint:disable-next-line: variable-name
-export const Latency: React.SFC <ILegendProps> = ({
+export const Latency: React.SFC <ILatencyProps> = ({
   displayIdentities,
   staleIDs,
   multipleHeader,