ui: stying fixes for Hot Ranges page

Current change contains list of small visual improvements for Hot Ranges page: - Capitalize "Hot Ranges" in navigation panel and page header; - Update page description and put it inside inline info panel; - Proper margins between header and text description; Release note: None Release justification: bug fixes and low-risk updates to new functionality
cockroachdb · Mar 17, 2022 · d9b4f0e · d9b4f0e
1 parent a3aaa81
commit d9b4f0e
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 28 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/sortedtable/sortedtable.tsx b/pkg/ui/workspaces/cluster-ui/src/sortedtable/sortedtable.tsx
@@ -79,6 +79,8 @@ interface SortedTableProps<T> {
   onChangeSortSetting?: { (ss: SortSetting): void };
   // className to be applied to the table element.
   className?: string;
+  // tableWrapperClassName is a class name applied to table wrapper.
+  tableWrapperClassName?: string;
   // A function that returns the class to apply to a given row.
   rowClass?: (obj: T) => string;
 
@@ -332,6 +334,7 @@ export class SortedTable<T> extends React.Component<
       empty,
       emptyProps,
       className,
+      tableWrapperClassName,
     } = this.props;
     let expandableConfig: ExpandableConfig = null;
     if (this.props.expandableConfig) {
@@ -345,7 +348,7 @@ export class SortedTable<T> extends React.Component<
     const count = data ? this.paginatedData().length : 0;
     const columns = this.columns(this.props);
     const rowClass = this.rowClass(this.props);
-    const tableWrapperClass = cx("cl-table-wrapper");
+    const tableWrapperClass = cx("cl-table-wrapper", tableWrapperClassName);
     const tableStyleClass = cx("sort-table", className);
     const noResultsClass = cx("table__no-results");
 

diff --git a/pkg/ui/workspaces/db-console/src/components/inlineAlert/inlineAlert.module.styl b/pkg/ui/workspaces/db-console/src/components/inlineAlert/inlineAlert.module.styl
@@ -17,6 +17,8 @@
   border-left solid 4px
   border-radius 5px
   padding $spacing-smaller $spacing-medium $spacing-smaller 0
+  &.full-width
+    width 100%
 
 .main-container
   display flex

diff --git a/pkg/ui/workspaces/db-console/src/components/inlineAlert/inlineAlert.tsx b/pkg/ui/workspaces/db-console/src/components/inlineAlert/inlineAlert.tsx
@@ -25,13 +25,15 @@ export interface InlineAlertProps {
   message?: React.ReactNode;
   intent?: InlineAlertIntent;
   className?: string;
+  fullWidth?: boolean;
 }
 
 export const InlineAlert: React.FC<InlineAlertProps> = ({
   title,
   message,
   intent = "info",
   className,
+  fullWidth,
 }) => {
   const Icon = useMemo(() => {
     switch (intent) {
@@ -46,7 +48,14 @@ export const InlineAlert: React.FC<InlineAlertProps> = ({
   }, [intent]);
 
   return (
-    <div className={cn("root", `intent-${intent}`, className)}>
+    <div
+      className={cn(
+        "root",
+        `intent-${intent}`,
+        { "full-width": fullWidth },
+        className,
+      )}
+    >
       <div className={cn("icon-container")}>
         <img src={Icon} className={cn("icon")} />
       </div>

diff --git a/pkg/ui/workspaces/db-console/src/util/docs.ts b/pkg/ui/workspaces/db-console/src/util/docs.ts
@@ -103,3 +103,13 @@ export const startTrial = "https://www.cockroachlabs.com/pricing/start-trial/";
 export const reduceStorageOfTimeSeriesDataOperationalFlags = docsURL(
   "operational-faqs.html#can-i-reduce-or-disable-the-storage-of-time-series-data",
 );
+
+export const performanceBestPracticesHotSpots = docsURL(
+  "performance-best-practices-overview.html#hot-spots",
+);
+
+export const uiDebugPages = docsURL("ui-debug-pages.html");
+
+export const readsAndWritesOverviewPage = docsURLNoVersion(
+  "architecture/reads-and-writes-overview.html#important-concepts",
+);
diff --git a/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx b/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx
@@ -53,7 +53,7 @@ export class Sidebar extends React.Component<SidebarProps> {
     },
     {
       path: "/hotranges",
-      text: "Hot ranges",
+      text: "Hot Ranges",
       activeFor: ["/hotranges"],
     },
     { path: "/jobs", text: "Jobs", activeFor: [] },

diff --git a/pkg/ui/workspaces/db-console/src/views/hotRanges/hotRanges.module.styl b/pkg/ui/workspaces/db-console/src/views/hotRanges/hotRanges.module.styl
@@ -8,6 +8,17 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
+@require "~src/components/core/index"
+
 .hotranges-heading-container
   display flex
-  justify-content space-between
+  justify-content space-between
+  margin-top 16px
+
+.hotranges-table
+  width 100%
+
+.light-anchor
+  color $colors--primary-blue-2
+  &:hover
+    color $colors--primary-blue-2
diff --git a/pkg/ui/workspaces/db-console/src/views/hotRanges/hotRangesTable.tsx b/pkg/ui/workspaces/db-console/src/views/hotRanges/hotRangesTable.tsx
@@ -18,10 +18,12 @@ import {
   Pagination,
   ResultsPerPageLabel,
   SortSetting,
+  Anchor,
 } from "@cockroachlabs/cluster-ui";
 import classNames from "classnames/bind";
 import styles from "./hotRanges.module.styl";
 import { cockroach } from "src/js/protos";
+import { readsAndWritesOverviewPage, uiDebugPages } from "src/util/docs";
 
 const PAGE_SIZE = 50;
 const cx = classNames.bind(styles);
@@ -63,7 +65,18 @@ const HotRangesTable = ({
     {
       name: "rangeId",
       title: (
-        <Tooltip placement="bottom" title="Range ID">
+        <Tooltip
+          placement="bottom"
+          title={
+            <span>
+              The internal ID of the hot range. Click the range ID to view the{" "}
+              <Anchor href={uiDebugPages} className={cx("light-anchor")}>
+                range report
+              </Anchor>{" "}
+              for this range.
+            </span>
+          }
+        >
           Range ID
         </Tooltip>
       ),
@@ -75,7 +88,11 @@ const HotRangesTable = ({
     {
       name: "qps",
       title: (
-        <Tooltip placement="bottom" title="QPS">
+        <Tooltip
+          placement="bottom"
+          title="The total number of `SELECT`, `UPDATE`, `INSERT`, and `DELETE` queries
+          executed per second on this range."
+        >
           QPS
         </Tooltip>
       ),
@@ -85,7 +102,10 @@ const HotRangesTable = ({
     {
       name: "nodes",
       title: (
-        <Tooltip placement="bottom" title="Nodes">
+        <Tooltip
+          placement="bottom"
+          title="The internal ID of the node where the range data is found."
+        >
           Nodes
         </Tooltip>
       ),
@@ -100,7 +120,10 @@ const HotRangesTable = ({
     {
       name: "storeId",
       title: (
-        <Tooltip placement="bottom" title="Store ID">
+        <Tooltip
+          placement="bottom"
+          title="The internal ID of the store where the range data is found."
+        >
           Store ID
         </Tooltip>
       ),
@@ -110,7 +133,21 @@ const HotRangesTable = ({
     {
       name: "leasholder",
       title: (
-        <Tooltip placement="bottom" title="Leaseholder">
+        <Tooltip
+          placement="bottom"
+          title={
+            <span>
+              The internal ID of the node that has the{" "}
+              <Anchor
+                href={readsAndWritesOverviewPage}
+                className={cx("light-anchor")}
+              >
+                range lease
+              </Anchor>
+              .
+            </span>
+          }
+        >
           Leaseholder
         </Tooltip>
       ),
@@ -120,7 +157,10 @@ const HotRangesTable = ({
     {
       name: "database",
       title: (
-        <Tooltip placement="bottom" title="Database">
+        <Tooltip
+          placement="bottom"
+          title="Name of the database where the range data is found."
+        >
           Database
         </Tooltip>
       ),
@@ -130,7 +170,10 @@ const HotRangesTable = ({
     {
       name: "table",
       title: (
-        <Tooltip placement="bottom" title="Table">
+        <Tooltip
+          placement="bottom"
+          title="Name of the table where the range data is found."
+        >
           Table
         </Tooltip>
       ),
@@ -144,7 +187,10 @@ const HotRangesTable = ({
     {
       name: "index",
       title: (
-        <Tooltip placement="bottom" title="Index">
+        <Tooltip
+          placement="bottom"
+          title="Name of the index where the range data is indexed, if applicable."
+        >
           Index
         </Tooltip>
       ),
@@ -154,7 +200,10 @@ const HotRangesTable = ({
     {
       name: "locality",
       title: (
-        <Tooltip placement="bottom" title="Locality">
+        <Tooltip
+          placement="bottom"
+          title="The locality of the node where the range data is found."
+        >
           Locality
         </Tooltip>
       ),
@@ -166,7 +215,7 @@ const HotRangesTable = ({
   return (
     <div>
       <div className={cx("hotranges-heading-container")}>
-        <h4>
+        <h4 className="cl-count-title">
           <ResultsPerPageLabel
             pagination={{
               ...pagination,
@@ -175,12 +224,12 @@ const HotRangesTable = ({
             pageName="hot ranges"
           />
         </h4>
-        <div>Last update: {getCurrentDateTime()}</div>
+        <h4 className="cl-count-title">Last update: {getCurrentDateTime()}</h4>
       </div>
       <SortedTable
         data={hotRangesList}
         columns={columns}
-        className={cx("hotranges-table")}
+        tableWrapperClassName={cx("hotranges-table")}
         sortSetting={sortSetting}
         onChangeSortSetting={(ss: SortSetting) =>
           setSortSetting({

diff --git a/pkg/ui/workspaces/db-console/src/views/hotRanges/index.tsx b/pkg/ui/workspaces/db-console/src/views/hotRanges/index.tsx
@@ -26,6 +26,8 @@ import {
   lastErrorSelector,
   lastSetAtSelector,
 } from "src/redux/hotRanges";
+import { InlineAlert } from "src/components";
+import { performanceBestPracticesHotSpots } from "src/util/docs";
 import { selectNodeLocalities } from "src/redux/localities";
 
 const cx = classNames.bind(styles);
@@ -68,18 +70,21 @@ const HotRangesPage = () => {
   return (
     <div className="section">
       <Helmet title="Hot Ranges" />
-      <h1 className="base-heading">Hot ranges</h1>
-      <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
-        <br />
-        ranges with the highest QPS (Queries Per Second). Use this information
-        to...
-        <Anchor href="" target="_blank">
-          {" "}
-          Learn more
-        </Anchor>
-      </Text>
+      <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
+      />
       <ErrorBoundary>
         <Loading
           loading={isLoading}