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:{" "}