cluster-ui: misc v2 db pages styling adjustments

Misc formatting - Fix page heading font styling - Fix search bar on focus border being cut off - Add `database` suffix to breadcrumb for db details page - Format live data percentage by adding `live data` and `total` as suffixes to numerator / denom respectively - Don't show db and table breadcrumb as not found when data is still being loaded - Put reset index action in row outside / on top of table - Add spinner state to refresh button when cached data is refreshing - Disable drop index action on cloud Table last updated/refreshed message & tooltip: - Align data last refreshed time with page count - Move full timestamp in table metadata tooltip - Better error message formatting - Show job progress when running Grants - Remove "Grants" header Epic: CRDB-37558 Closes: #132595 Release note (ui change): In the v2 database and db details pages, the refresh button tooltip will now include the cache refresh progress when the job is running as well as when the update started.
cockroachdb · Oct 16, 2024 · af4cd32 · af4cd32
1 parent 4314b2d
commit af4cd32
Show file tree

Hide file tree

Showing 21 changed files with 426 additions and 239 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss b/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss
@@ -13,8 +13,6 @@
 
   :global(.crl-ant-tabs-tab) {
     font-family: $font-family--base;
-    font-size: 16px;
-    line-height: 1.5;
     letter-spacing: normal;
     color: $colors--neutral-7;
   }

diff --git a/pkg/ui/workspaces/cluster-ui/src/components/liveDataPercent/liveDataPercent.tsx b/pkg/ui/workspaces/cluster-ui/src/components/liveDataPercent/liveDataPercent.tsx
@@ -0,0 +1,28 @@
+// Copyright 2024 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+
+import { Row } from "antd";
+import React from "react";
+
+import { Bytes, Percentage } from "src/util";
+
+type Props = {
+  // Float between 0-1.
+  liveBytes: number;
+  totalBytes: number;
+};
+
+export const LiveDataPercent: React.FC<Props> = ({ liveBytes, totalBytes }) => {
+  return (
+    <div>
+      <Row justify={"end"}>
+        {totalBytes ? Percentage(liveBytes, totalBytes, 1) : "0.0%"}
+      </Row>
+      <Row justify={"end"}>
+        {Bytes(liveBytes)} live data / {Bytes(totalBytes)} total
+      </Row>
+    </div>
+  );
+};
diff --git a/...paces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.spec.tsx b/...paces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.spec.tsx
@@ -48,16 +48,17 @@ describe("TableMetadataJobControl", () => {
     jest.clearAllMocks();
   });
 
-  it("renders the last refreshed time", () => {
+  it("renders the relative last refreshed time", () => {
     render(
       <TimezoneContext.Provider value="UTC">
         <TableMetadataJobControl onJobComplete={mockOnJobComplete} />
       </TimezoneContext.Provider>,
     );
 
     expect(screen.getByText(/Last refreshed:/)).toBeInTheDocument();
+    const lastCompletedRelativeTime = mockLastCompletedTime.fromNow();
     expect(
-      screen.getByText(/Jan 01, 2024 at 12:00:00 UTC/),
+      screen.getByText(new RegExp(lastCompletedRelativeTime)),
     ).toBeInTheDocument();
   });
 

diff --git a/...workspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.tsx b/...workspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.tsx
@@ -3,24 +3,23 @@
 // Use of this software is governed by the CockroachDB Software License
 // included in the /LICENSE file.
 
-import { RedoOutlined } from "@ant-design/icons";
-import { Skeleton } from "antd";
+import { LoadingOutlined, RedoOutlined } from "@ant-design/icons";
+import { Skeleton, Spin } from "antd";
 import React, { useCallback, useEffect } from "react";
 
 import {
   TableMetadataJobStatus,
   triggerUpdateTableMetaJobApi,
   useTableMetaUpdateJob,
 } from "src/api/databases/tableMetaUpdateJobApi";
-import { TABLE_METADATA_LAST_UPDATED_HELP } from "src/constants/tooltipMessages";
 import Button from "src/sharedFromCloud/button";
-import { Timestamp } from "src/timestamp";
-import { DATE_WITH_SECONDS_FORMAT_24_TZ } from "src/util";
 import { usePrevious } from "src/util/hooks";
 
 import { Tooltip } from "../tooltip";
+import { TableMetadataLastUpdatedTooltip } from "../tooltipMessages";
 
 import styles from "./tableMetadataJobControl.module.scss";
+import { TableMetadataJobProgress } from "./tableMetadataJobProgress";
 
 type TableMetadataJobControlProps = {
   // Callback for when the job has updated the metadata, i.e. the
@@ -80,34 +79,40 @@ export const TableMetadataJobControl: React.FC<
     triggerUpdateTableMetaJob(false);
   };
 
-  const durationText = jobStatus?.lastCompletedTime?.fromNow();
   const isRunning = jobStatus?.currentStatus === TableMetadataJobStatus.RUNNING;
-  const refreshButtonTooltip = isRunning
-    ? "Data is currently refreshing"
-    : "Refresh data";
+  const refreshButtonTooltip = isRunning ? (
+    <TableMetadataJobProgress
+      jobStartedTime={jobStatus?.lastStartTime}
+      jobProgressFraction={jobStatus?.progress}
+    />
+  ) : (
+    "Refresh data"
+  );
 
   return (
     <div className={styles["controls-container"]}>
       <Skeleton loading={isLoading}>
-        <Tooltip title={TABLE_METADATA_LAST_UPDATED_HELP}>
-          Last refreshed:{" "}
-          <Timestamp
-            format={DATE_WITH_SECONDS_FORMAT_24_TZ}
-            time={jobStatus?.lastCompletedTime}
-            fallback={"Never"}
-          />{" "}
-          {durationText && `(${durationText})`}
-        </Tooltip>
+        <TableMetadataLastUpdatedTooltip
+          timestamp={jobStatus?.lastCompletedTime}
+        >
+          {durationText => <div>Last refreshed: {durationText}</div>}
+        </TableMetadataLastUpdatedTooltip>
       </Skeleton>
-      <Tooltip placement="top" title={refreshButtonTooltip}>
-        <div>
+      <Tooltip noUnderline placement="top" title={refreshButtonTooltip}>
+        <>
           <Button
             disabled={isRunning}
             category={"icon-container"}
-            icon={<RedoOutlined />}
+            icon={
+              isRunning ? (
+                <Spin indicator={<LoadingOutlined spin />} size={"small"} />
+              ) : (
+                <RedoOutlined />
+              )
+            }
             onClick={onRefreshClick}
           />
-        </div>
+        </>
       </Tooltip>
     </div>
   );

diff --git a/...s/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobProgress.module.scss b/...s/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobProgress.module.scss
@@ -0,0 +1,8 @@
+// Copyright 2024 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+
+.progress-list {
+  list-style-position: inside;
+}
diff --git a/...orkspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobProgress.tsx b/...orkspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobProgress.tsx
@@ -0,0 +1,40 @@
+// Copyright 2024 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+
+import moment from "moment-timezone";
+import React from "react";
+
+import { Timestamp } from "src/timestamp";
+import { DATE_WITH_SECONDS_FORMAT_24_TZ } from "src/util";
+
+import styles from "./tableMetadataJobProgress.module.scss";
+
+type Props = {
+  jobStartedTime: moment.Moment;
+  jobProgressFraction: number; // Between 0 and 1.
+};
+
+// This message is meant to be displayed when the job is running.
+export const TableMetadataJobProgress: React.FC<Props> = ({
+  jobStartedTime,
+  jobProgressFraction,
+}) => {
+  const percentDone = Math.round(jobProgressFraction * 100);
+  return (
+    <div>
+      Refreshing data
+      <ul className={styles["progress-list"]}>
+        <li>{percentDone}% done</li>
+        <li>
+          Started at{" "}
+          <Timestamp
+            time={jobStartedTime}
+            format={DATE_WITH_SECONDS_FORMAT_24_TZ}
+          />
+        </li>
+      </ul>
+    </div>
+  );
+};
diff --git a/...ster-ui/src/constants/tooltipMessages.tsx → .../src/components/tooltipMessages/index.tsx b/...ster-ui/src/constants/tooltipMessages.tsx → .../src/components/tooltipMessages/index.tsx
@@ -2,10 +2,11 @@
 //
 // Use of this software is governed by the CockroachDB Software License
 // included in the /LICENSE file.
+
 import Link from "antd/es/typography/Link";
 import React from "react";
 
-import { tableStatsClusterSetting } from "src/util";
+import { tableStatsClusterSetting } from "../../util";
 
 export const AUTO_STATS_COLLECTION_HELP = (
   <span>
@@ -17,5 +18,4 @@ export const AUTO_STATS_COLLECTION_HELP = (
   </span>
 );
 
-export const TABLE_METADATA_LAST_UPDATED_HELP =
-  "Data is last refreshed automatically (per cluster setting) or manually.";
+export * from "./tableMetadataLastUpdatedTooltip";
diff --git a/...ces/cluster-ui/src/components/tooltipMessages/tableMetadataLastUpdatedTooltip.module.scss b/...ces/cluster-ui/src/components/tooltipMessages/tableMetadataLastUpdatedTooltip.module.scss
@@ -0,0 +1,8 @@
+// Copyright 2024 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+
+.table-metadata-tooltip-content {
+  column-gap: 8px;
+}
diff --git a/.../workspaces/cluster-ui/src/components/tooltipMessages/tableMetadataLastUpdatedTooltip.tsx b/.../workspaces/cluster-ui/src/components/tooltipMessages/tableMetadataLastUpdatedTooltip.tsx
@@ -0,0 +1,90 @@
+// Copyright 2024 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+import { Icon } from "@cockroachlabs/ui-components";
+import { Row } from "antd";
+import moment from "moment-timezone";
+import React from "react";
+
+import { Timestamp } from "../../timestamp";
+import { DATE_WITH_SECONDS_FORMAT_24_TZ } from "../../util";
+import { Tooltip } from "../tooltip";
+
+import styles from "./tableMetadataLastUpdatedTooltip.module.scss";
+
+const TABLE_METADATA_LAST_UPDATED_HELP =
+  "Data was last refreshed automatically (per cluster setting) or manually.";
+
+type Props = {
+  timestamp?: moment.Moment | null;
+  children: (
+    formattedRelativeTime: string,
+    icon?: JSX.Element,
+  ) => React.ReactNode;
+  errorMessage?: string;
+};
+
+const formatErrorMessage = (
+  errorMessage: string | null,
+  lastUpdatedTime: moment.Moment | null,
+) => {
+  if (!errorMessage) {
+    return null;
+  }
+
+  return (
+    <>
+      Last refresh failed to retrieve data about this table. The data shown is
+      as of{" "}
+      <Timestamp
+        format={DATE_WITH_SECONDS_FORMAT_24_TZ}
+        time={lastUpdatedTime}
+        fallback={"Never"}
+      />
+      .
+      <br />
+      Last refresh error: {errorMessage}
+    </>
+  );
+};
+
+export const TableMetadataLastUpdatedTooltip = ({
+  timestamp,
+  errorMessage,
+  children,
+}: Props) => {
+  const durationText = timestamp?.fromNow() ?? "Never";
+  const icon = errorMessage ? (
+    <Icon fill={"warning"} iconName={"Caution"} />
+  ) : (
+    <Icon fill="info" iconName={"InfoCircle"} />
+  );
+
+  const formattedErr = formatErrorMessage(errorMessage, timestamp);
+  return (
+    <Tooltip
+      title={
+        <div>
+          {formattedErr ?? (
+            <>
+              {timestamp && (
+                <Timestamp
+                  format={DATE_WITH_SECONDS_FORMAT_24_TZ}
+                  time={timestamp}
+                  fallback={"Never"}
+                />
+              )}
+              <br />
+              {TABLE_METADATA_LAST_UPDATED_HELP}
+            </>
+          )}
+        </div>
+      }
+    >
+      <Row className={styles["table-metadata-tooltip-content"]} align="middle">
+        {children(durationText, icon)}
+      </Row>
+    </Tooltip>
+  );
+};
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/dbGrantsView.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/dbGrantsView.tsx
@@ -27,7 +27,7 @@ export const DbGrantsView: React.FC = () => {
   }, [databaseGrants]);
 
   return (
-    <PageSection heading={"Grants"}>
+    <PageSection>
       <GrantsTable data={dataWithKey ?? []} loading={isLoading} error={error} />
     </PageSection>
   );

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/index.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/index.tsx
@@ -26,7 +26,7 @@ enum TabKeys {
 export const DatabaseDetailsPageV2 = () => {
   const { dbID: dbIdRouteParam } = useRouteParams();
   const dbId = parseInt(dbIdRouteParam, 10);
-  const { data, isLoading, error } = useDatabaseMetadataByID(dbId);
+  const { data, isLoading } = useDatabaseMetadataByID(dbId);
   const history = useHistory();
   const location = useLocation();
   const tab = queryByName(location, tabAttr) ?? TabKeys.TABLES;
@@ -57,25 +57,23 @@ export const DatabaseDetailsPageV2 = () => {
     },
   ];
 
-  const dbName =
-    error?.status === 404 || !data
-      ? "Database Not Found"
-      : data.metadata.dbName;
+  const dbName = isLoading ? (
+    <Skeleton paragraph={false} title={{ width: 100 }} />
+  ) : (
+    data?.metadata.dbName ?? "Database Not Found"
+  );
 
   const breadCrumbItems = [
     { name: "Databases", link: DB_PAGE_PATH },
     {
-      name: dbName,
-      link: null,
+      name: <>Database: {dbName}</>,
+      link: "",
     },
   ];
 
   return (
     <PageLayout>
-      <PageHeader
-        breadcrumbItems={breadCrumbItems}
-        title={<Skeleton loading={isLoading}>{dbName}</Skeleton>}
-      />
+      <PageHeader breadcrumbItems={breadCrumbItems} title={dbName} />
       <Tabs
         defaultActiveKey={TabKeys.TABLES}
         className={commonStyles("cockroach--tabs")}