Merge #79133

79133: ui: update Hot ranges page styles r=koorosh a=koorosh Current change introduces several minor UI changes on Hot Ranges page: - changed page description, not it isn't rendered as inline alert; - Data formatting is changed to use UTC; - Changed heading style to H3 to follow the same style as other pages; - QPS values are rounded to 2 decimals; Release note (ui change): minor styling changes on Hot Ranges page to follow the same style as other pages. Resolves: #78517 Screens: <img width="1604" alt="Screen Shot 2022-03-31 at 17 35 08" src="https://user-images.githubusercontent.com/3106437/161081042-f453196e-4ea7-4073-84e3-b6cdb7b6a705.png"> Co-authored-by: Andrii Vorobiov <[email protected]>
cockroachdb · Apr 5, 2022 · 3d6f41b · 3d6f41b
2 parents b89a636 + 488d64b
commit 3d6f41b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 48 deletions.
diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeOverview/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeOverview/index.tsx
@@ -24,7 +24,7 @@ import {
 } from "src/redux/nodes";
 import { AdminUIState } from "src/redux/state";
 import { nodeIDAttr } from "src/util/constants";
-import { Bytes, DATE_FORMAT, Percentage } from "src/util/format";
+import { Bytes, DATE_FORMAT_24_UTC, Percentage } from "src/util/format";
 import { INodeStatus, MetricConstants, StatusMetrics } from "src/util/proto";
 import { getMatchParamByName } from "src/util/query";
 import {
@@ -286,7 +286,9 @@ export class NodeOverview extends React.Component<NodeOverviewProps, {}> {
               />
               <SummaryValue
                 title="Last Update"
-                value={util.LongToMoment(node.updated_at).format(DATE_FORMAT)}
+                value={util
+                  .LongToMoment(node.updated_at)
+                  .format(DATE_FORMAT_24_UTC)}
               />
               <SummaryValue title="Build" value={node.build_info.tag} />
               <SummaryValue

diff --git a/pkg/ui/workspaces/db-console/src/views/hotRanges/hotRangesTable.tsx b/pkg/ui/workspaces/db-console/src/views/hotRanges/hotRangesTable.tsx
@@ -11,7 +11,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { Tooltip } from "antd";
-import moment from "moment";
 import {
   ColumnDescriptor,
   SortedTable,
@@ -21,6 +20,7 @@ import {
   Anchor,
 } from "@cockroachlabs/cluster-ui";
 import classNames from "classnames/bind";
+import { round } from "lodash";
 import styles from "./hotRanges.module.styl";
 import { cockroach } from "src/js/protos";
 import { readsAndWritesOverviewPage, uiDebugPages } from "src/util/docs";
@@ -37,24 +37,16 @@ interface HotRangesTableProps {
 const HotRangesTable = ({
   hotRangesList,
   nodeIdToLocalityMap,
+  lastUpdate,
 }: HotRangesTableProps) => {
   const [pagination, setPagination] = useState({
     pageSize: PAGE_SIZE,
     current: 1,
   });
-  const [sortSetting, setSortSetting] = useState({
-    ascending: true,
-    columnTitle: null,
+  const [sortSetting, setSortSetting] = useState<SortSetting>({
+    ascending: false,
+    columnTitle: "qps",
   });
-  const getCurrentDateTime = () => {
-    const nowUtc = moment.utc();
-    return (
-      nowUtc.format("MMM DD, YYYY") +
-      " at " +
-      nowUtc.format("h:mm A") +
-      " (UTC)"
-    );
-  };
 
   if (hotRangesList.length === 0) {
     return <div>No hot ranges</div>;
@@ -96,7 +88,7 @@ const HotRangesTable = ({
           QPS
         </Tooltip>
       ),
-      cell: val => <>{val.qps}</>,
+      cell: val => <>{round(val.qps, 2)}</>,
       sort: val => val.qps,
     },
     {
@@ -218,7 +210,7 @@ const HotRangesTable = ({
   ];
 
   return (
-    <div>
+    <div className="section">
       <div className={cx("hotranges-heading-container")}>
         <h4 className="cl-count-title">
           <ResultsPerPageLabel
@@ -229,7 +221,9 @@ const HotRangesTable = ({
             pageName="hot ranges"
           />
         </h4>
-        <h4 className="cl-count-title">Last update: {getCurrentDateTime()}</h4>
+        <h4 className="cl-count-title">
+          {lastUpdate && `Last update: ${lastUpdate}`}
+        </h4>
       </div>
       <SortedTable
         data={hotRangesList}

diff --git a/pkg/ui/workspaces/db-console/src/views/hotRanges/index.tsx b/pkg/ui/workspaces/db-console/src/views/hotRanges/index.tsx
@@ -8,7 +8,6 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import moment from "moment";
 import { cockroach } from "src/js/protos";
 import { useDispatch, useSelector } from "react-redux";
 import React, { useEffect } from "react";
@@ -26,9 +25,9 @@ import {
   lastErrorSelector,
   lastSetAtSelector,
 } from "src/redux/hotRanges";
-import { InlineAlert } from "src/components";
-import { performanceBestPracticesHotSpots } from "src/util/docs";
 import { selectNodeLocalities } from "src/redux/localities";
+import { DATE_FORMAT_24_UTC } from "src/util/format";
+import { performanceBestPracticesHotSpots } from "src/util/docs";
 
 const cx = classNames.bind(styles);
 const HotRangesRequest = cockroach.server.serverpb.HotRangesRequest;
@@ -58,48 +57,37 @@ const HotRangesPage = () => {
     );
   }, [dispatch]);
 
-  const formatCurrentDateTime = (datetime: moment.Moment) => {
-    return (
-      datetime.format("MMM DD, YYYY") +
-      " at " +
-      datetime.format("h:mm A") +
-      " (UTC)"
-    );
-  };
-  // TODO(santamaura): add url to anchor once it's available
   return (
-    <div className="section">
+    <React.Fragment>
       <Helmet title="Hot Ranges" />
-      <h1 className="base-heading">Hot Ranges</h1>
-      <InlineAlert
-        title=""
-        message={
-          <Text className={cx("hotranges-description")}>
-            The Hot Ranges table shows ranges receiving a high number of reads
-            or writes. By default, the table is sorted by ranges with the
-            highest QPS (queries per second). <br /> Use this information to{" "}
-            <Anchor href={performanceBestPracticesHotSpots}>
-              find and reduce hot spots.
-            </Anchor>
-          </Text>
-        }
-        fullWidth
-      />
+      <h3 className="base-heading">Hot Ranges</h3>
+      <Text className={cx("hotranges-description")}>
+        The Hot Ranges table shows ranges receiving a high number of reads or
+        writes. By default, the table is sorted by ranges with the highest QPS
+        (queries per second). <br />
+        Use this information to
+        <Anchor href={performanceBestPracticesHotSpots} target="_blank">
+          {" "}
+          find and reduce hot spots.
+        </Anchor>
+      </Text>
       <ErrorBoundary>
         <Loading
           loading={isLoading}
           error={lastError}
           render={() => (
             <HotRangesTable
               hotRangesList={hotRanges}
-              lastUpdate={lastSetAt && formatCurrentDateTime(lastSetAt?.utc())}
+              lastUpdate={
+                lastSetAt && lastSetAt?.utc().format(DATE_FORMAT_24_UTC)
+              }
               nodeIdToLocalityMap={nodeIdToLocalityMap}
             />
           )}
           page={undefined}
         />
       </ErrorBoundary>
-    </div>
+    </React.Fragment>
   );
 };