diff --git a/pkg/ui/workspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.tsx b/pkg/ui/workspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.tsx
index 05adf9111fe3..b99272bae8f9 100644
--- a/pkg/ui/workspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.tsx
@@ -4,7 +4,7 @@
// included in the /LICENSE file.
import { RedoOutlined } from "@ant-design/icons";
-import { Skeleton, Tooltip } from "antd";
+import { Skeleton } from "antd";
import React, { useCallback, useEffect } from "react";
import {
@@ -12,11 +12,14 @@ import {
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 styles from "./tableMetadataJobControl.module.scss";
type TableMetadataJobControlProps = {
@@ -86,11 +89,7 @@ export const TableMetadataJobControl: React.FC<
return (
-
+
Last refreshed:{" "}
= props => {
- const style = props.noUnderline ? "" : styles.underline;
+ const underlineStyle = props.noUnderline ? "" : styles.underline;
return (
-
+ {props.title} }
+ >
{props.children}
);
diff --git a/pkg/ui/workspaces/cluster-ui/src/components/tooltip/tooltip.module.scss b/pkg/ui/workspaces/cluster-ui/src/components/tooltip/tooltip.module.scss
index 2b9d42dc1867..459f1a6f3cb2 100644
--- a/pkg/ui/workspaces/cluster-ui/src/components/tooltip/tooltip.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/components/tooltip/tooltip.module.scss
@@ -8,3 +8,16 @@
.underline {
border-bottom: 1px dashed $colors--neutral-5;
}
+
+.container {
+ &:hover{
+ cursor: pointer;
+ }
+}
+
+.title {
+ a {
+ font-size: inherit;
+ color: inherit;
+ }
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/constants/tooltipMessages.tsx b/pkg/ui/workspaces/cluster-ui/src/constants/tooltipMessages.tsx
index 7ad7ca83daa1..7a2c6e7c1dd5 100644
--- a/pkg/ui/workspaces/cluster-ui/src/constants/tooltipMessages.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/constants/tooltipMessages.tsx
@@ -10,9 +10,12 @@ import { tableStatsClusterSetting } from "src/util";
export const AUTO_STATS_COLLECTION_HELP = (
Automatic statistics can help improve query performance. Learn how to{" "}
-
+
manage statistics collection
{" "}
.
);
+
+export const TABLE_METADATA_LAST_UPDATED_HELP =
+ "Data is last refreshed automatically (per cluster setting) or manually.";
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/tablesView.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/tablesView.tsx
index cd8d2ad6c4ab..a59da50e4d1b 100644
--- a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/tablesView.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/tablesView.tsx
@@ -3,7 +3,6 @@
// Use of this software is governed by the CockroachDB Software License
// included in the /LICENSE file.
-import { Tag } from "antd";
import React, { useContext, useMemo } from "react";
import { Link } from "react-router-dom";
@@ -13,6 +12,7 @@ import {
TableSortOption,
useTableMetadata,
} from "src/api/databases/getTableMetadataApi";
+import { Badge } from "src/badge";
import { NodeRegionsSelector } from "src/components/nodeRegionsSelector/nodeRegionsSelector";
import { RegionNodesLabel } from "src/components/regionNodesLabel";
import { TableMetadataJobControl } from "src/components/tableMetadataLastUpdated/tableMetadataJobControl";
@@ -150,9 +150,9 @@ const COLUMNS: (TableColumnProps & {
),
sorter: false,
render: (t: TableRow) => {
- const type = t.autoStatsEnabled ? "success" : "error";
+ const type = t.autoStatsEnabled ? "success" : "default";
const text = t.autoStatsEnabled ? "ENABLED" : "DISABLED";
- return {text};
+ return ;
},
},
{
diff --git a/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx b/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx
index 2952957732a6..c52097452f0b 100644
--- a/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx
@@ -3,10 +3,10 @@
// Use of this software is governed by the CockroachDB Software License
// included in the /LICENSE file.
-import { Tooltip } from "antd";
import classNames from "classnames/bind";
import * as React from "react";
+import { Tooltip } from "src/components/tooltip";
import { CircleFilled } from "src/icon";
import styles from "./booleanSetting.module.scss";
@@ -28,11 +28,7 @@ export function BooleanSetting(props: BooleanSettingProps): React.ReactElement {
return (
-
+
{text} - {label}
diff --git a/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx b/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx
index 113fbb318365..b98978fe741f 100644
--- a/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx
@@ -11,14 +11,14 @@ import React, { useContext } from "react";
import { useNodeStatuses } from "src/api";
import { TableDetails } from "src/api/databases/getTableMetadataApi";
import { Tooltip } from "src/components/tooltip";
+import { TABLE_METADATA_LAST_UPDATED_HELP } from "src/constants/tooltipMessages";
import { ClusterDetailsContext } from "src/contexts";
import { PageSection } from "src/layouts";
import { SqlBox, SqlBoxSize } from "src/sql";
import { SummaryCard, SummaryCardItem } from "src/summaryCard";
import { Timestamp } from "src/timestamp";
import { Bytes, DATE_WITH_SECONDS_FORMAT_24_TZ } from "src/util";
-
-import { mapStoreIDsToNodeRegions } from "../util/nodeUtils";
+import { mapStoreIDsToNodeRegions } from "src/util/nodeUtils";
type TableOverviewProps = {
tableDetails: TableDetails;
@@ -61,7 +61,7 @@ export const TableOverview: React.FC = ({
const formattedErrorText = metadata.lastUpdateError
? "Update error: " + metadata.lastUpdateError
- : "";
+ : null;
return (
<>
@@ -71,12 +71,17 @@ export const TableOverview: React.FC = ({
-
+
- {metadata.lastUpdateError && (
-
+ {metadata.lastUpdateError ? (
+
+ ) : (
+
)}
+ {" "}
Last updated:{" "}