Merge #86990 #87008

86990: ui: ui fixes on database page r=maryliag a=maryliag This commit uses the count format function for index total reads, fix the style of the `reset all index stats` button and updates the `User` column to `User name` column. Partially addresses #85237 Release justification: low risk changes Release note (ui change): Change column name from `User` to `User Name` on Table Details, Grant tab. 87008: ui: update sub-optimal label r=maryliag a=maryliag Update label from `Suboptimal Plan` to `Sub-Optimal Plan`. Release justification: low risk change Release note: None Co-authored-by: Marylia Gutierrez <[email protected]>
cockroachdb · Aug 29, 2022 · cb57def · cb57def
3 parents 3b16435 + da261b1 + 1c42a9f
commit cb57def
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -328,7 +328,7 @@ export class DatabaseTablePage extends React.Component<
       name: "total reads",
       title: "Total Reads",
       hideTitleUnderline: true,
-      cell: indexStat => indexStat.totalReads,
+      cell: indexStat => format.Count(indexStat.totalReads),
       sort: indexStat => indexStat.totalReads,
     },
     {
@@ -356,10 +356,10 @@ export class DatabaseTablePage extends React.Component<
 
   private grantsColumns: ColumnDescriptor<Grant>[] = [
     {
-      name: "user",
+      name: "username",
       title: (
         <Tooltip placement="bottom" title="The user name.">
-          User
+          User Name
         </Tooltip>
       ),
       cell: grant => grant.user,

diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.module.scss b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.module.scss
@@ -125,3 +125,14 @@
     }
   }
 }
+
+.index-stats__reset-btn {
+  color: $colors--primary-blue-3;
+  font-size: $font-size--medium;
+  line-height: $line-height--small;
+
+  &:hover {
+    color: $colors--primary-blue-3;
+    text-decoration: underline;
+  }
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx
@@ -26,7 +26,7 @@ import { SummaryCard } from "../summaryCard";
 import moment, { Moment } from "moment";
 import { Heading } from "@cockroachlabs/ui-components";
 import { Anchor } from "../anchor";
-import { DATE_FORMAT_24_UTC, performanceTuningRecipes } from "../util";
+import { Count, DATE_FORMAT_24_UTC, performanceTuningRecipes } from "../util";
 
 const cx = classNames.bind(styles);
 
@@ -241,7 +241,11 @@ export class IndexDetailsPage extends React.Component<
               </Tooltip>
               <div>
                 <a
-                  className={cx("action", "separator")}
+                  className={cx(
+                    "action",
+                    "separator",
+                    "index-stats__reset-btn",
+                  )}
                   onClick={() =>
                     this.props.resetIndexUsageStats(
                       this.props.databaseName,
@@ -278,7 +282,7 @@ export class IndexDetailsPage extends React.Component<
                         </td>
                         <td className="table__cell">
                           <p className={cx("summary-card--value")}>
-                            {this.props.details.totalReads}
+                            {Count(this.props.details.totalReads)}
                           </p>
                         </td>
                       </tr>

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/types.ts b/pkg/ui/workspaces/cluster-ui/src/insights/types.ts
@@ -144,7 +144,7 @@ const suboptimalPlanInsight = (execType: InsightExecEnum): Insight => {
     `due to outdated statistics or missing indexes.`;
   return {
     name: InsightNameEnum.suboptimalPlan,
-    label: "Suboptimal Plan",
+    label: "Sub-Optimal Plan",
     description: description,
     tooltipDescription:
       description + ` Click the ${execType} execution ID to see more details.`,