Merge pull request #133351 from cockroachdb/blathers/backport-release…

…-24.3-133188

release-24.3: cluster-ui: misc v2 db pages styling adjustments

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;
   }

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>
+  );
+};

pkg/ui/workspaces/cluster-ui/src/components/regionNodesLabel/components/regionLabel.module.scss

@@ -8,6 +8,10 @@
 .container {
   margin: 0.5rem;
   width: fit-content;
+  min-width: 100px;
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 

pkg/ui/workspaces/cluster-ui/src/components/regionNodesLabel/components/regionLabel.tsx

@@ -31,9 +31,7 @@ export const RegionLabel: React.FC<Props> = ({
         <div className={styles["label-body"]}>
           <Text strong>{region.label || "Unknown Region"}</Text>
           {showCode && <Text>({region.code})</Text>}
-          <div>
-            <Badge count={nodes.length} className={styles.badge} />
-          </div>
+          <Badge count={nodes.length} className={styles.badge} />
         </div>
       </Tooltip>
     </div>

pkg/ui/workspaces/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();
   });
 

pkg/ui/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>
   );

pkg/ui/workspaces/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;
+}

pkg/ui/workspaces/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>
+  );
+};

pkg/ui/workspaces/cluster-ui/src/components/tooltip/tooltip.module.scss

@@ -17,7 +17,7 @@
 
 .title {
  a {
-   font-size: inherit;
+   font: inherit;
    color: inherit;
  }
 }

pkg/ui/workspaces/cluster-ui/src/constants/tooltipMessages.tsx → pkg/ui/workspaces/cluster-ui/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";

pkg/ui/workspaces/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;
+}

pkg/ui/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>
+  );
+};

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>
   );

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")}