ui: add mvcc info to Database page

This commit adds the mvcc info to: - Column on the tables list inside Database page - Table Details page Fixes #82617 Release note (ui change): Adds mvcc info to tables list inside the Database page and on the Tables details page.
cockroachdb · Jul 8, 2022 · 73a6bf2 · 73a6bf2
1 parent e25957f
commit 73a6bf2
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 19 deletions.
diff --git a/docs/generated/swagger/spec.json b/docs/generated/swagger/spec.json
@@ -1547,18 +1547,6 @@
           "format": "int64",
           "x-go-name": "DescriptorID"
         },
-        "garbage_bytes": {
-          "description": "garbage_bytes is the size in byes of existing MVCC garbage on the table.",
-          "type": "integer",
-          "format": "uint64",
-          "x-go-name": "GarbageBytes"
-        },
-        "garbage_percentage": {
-          "description": "garbage_percentage is the percentage of existing MVCC garbage on the table.",
-          "type": "number",
-          "format": "float",
-          "x-go-name": "GarbagePercentage"
-        },
         "grants": {
           "type": "array",
           "items": {
@@ -2519,4 +2507,4 @@
       "in": "header"
     }
   }
-}
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.module.scss b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.module.scss
@@ -68,3 +68,12 @@
     fill: $colors--functional-orange-3;
   }
 }
+
+.multiple-lines-info {
+  margin-bottom: 0px
+}
+
+.bold {
+  font-weight: $font-weight--extra-bold;
+  color: $colors--neutral-8;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.stories.tsx
@@ -105,6 +105,9 @@ function createTable(): DatabaseDetailsPageDataTable {
       grants: grants,
       statsLastUpdated: moment("0001-01-01T00:00:00Z"),
       hasIndexRecommendations: false,
+      livePercentage: _.random(0, 100),
+      liveBytes: _.random(0, 10000),
+      totalBytes: _.random(0, 10000),
     },
     stats: {
       loading: false,

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
@@ -27,7 +27,7 @@ import {
   SortedTable,
 } from "src/sortedtable";
 import * as format from "src/util/format";
-import { syncHistory } from "../util";
+import { mvccGarbage, syncHistory } from "../util";
 
 import styles from "./databaseDetailsPage.module.scss";
 import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
@@ -38,6 +38,7 @@ import {
 import { Moment } from "moment";
 import { Caution } from "@cockroachlabs/icons";
 import { DATE_FORMAT } from "src/util/format";
+import { Anchor } from "../anchor";
 
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
@@ -105,6 +106,9 @@ export interface DatabaseDetailsPageDataTableDetails {
   grants: string[];
   statsLastUpdated?: Moment;
   hasIndexRecommendations: boolean;
+  totalBytes: number;
+  liveBytes: number;
+  livePercentage: number;
 }
 
 export interface DatabaseDetailsPageDataTableStats {
@@ -260,6 +264,24 @@ export class DatabaseDetailsPage extends React.Component<
     }
   }
 
+  formatMVCCInfo = (
+    details: DatabaseDetailsPageDataTableDetails,
+  ): React.ReactElement => {
+    return (
+      <>
+        <p className={cx("multiple-lines-info")}>
+          {format.Percentage(details.livePercentage, 1, 1)}
+        </p>
+        <p className={cx("multiple-lines-info")}>
+          <span className={cx("bold")}>{format.Bytes(details.liveBytes)}</span>{" "}
+          live data /{" "}
+          <span className={cx("bold")}>{format.Bytes(details.totalBytes)}</span>
+          {" total"}
+        </p>
+      </>
+    );
+  };
+
   private columnsForTablesViewMode(): ColumnDescriptor<DatabaseDetailsPageDataTable>[] {
     return [
       {
@@ -368,6 +390,29 @@ export class DatabaseDetailsPage extends React.Component<
         showByDefault: this.props.showNodeRegionsColumn,
         hideIfTenant: true,
       },
+      {
+        title: (
+          <Tooltip
+            placement="bottom"
+            title={
+              <div className={cx("tooltip__table--title")}>
+                {"% of total logical data that has not been modified (updated or deleted). " +
+                  "A low percentage can cause statements to scan more data ("}
+                <Anchor href={mvccGarbage} target="_blank">
+                  MVCC values
+                </Anchor>
+                {") than required, which can reduce performance."}
+              </div>
+            }
+          >
+            % of Live Data
+          </Tooltip>
+        ),
+        cell: table => this.formatMVCCInfo(table.details),
+        sort: table => table.details.livePercentage,
+        className: cx("database-table__col-column-count"),
+        name: "livePercentage",
+      },
       {
         title: (
           <Tooltip

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss
@@ -148,3 +148,8 @@
     }
   }
 }
+
+.bold {
+  font-weight: $font-weight--extra-bold;
+  color: $colors--neutral-8;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.stories.tsx
@@ -34,6 +34,9 @@ const withLoadingIndicator: DatabaseTablePageProps = {
     indexNames: [],
     grants: [],
     statsLastUpdated: moment("0001-01-01T00:00:00Z"),
+    livePercentage: 2.7,
+    liveBytes: 12345,
+    totalBytes: 456789,
   },
   stats: {
     loading: true,
@@ -91,6 +94,9 @@ const withData: DatabaseTablePageProps = {
       },
     ],
     statsLastUpdated: moment("0001-01-01T00:00:00Z"),
+    livePercentage: 2.7,
+    liveBytes: 12345,
+    totalBytes: 456789,
   },
   showNodeRegionsSection: true,
   stats: {

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -43,7 +43,7 @@ import classnames from "classnames/bind";
 import booleanSettingStyles from "../settings/booleanSetting.module.scss";
 import { CircleFilled } from "../icon";
 import { performanceTuningRecipes } from "src/util/docs";
-import { DATE_FORMAT_24_UTC } from "src/util/format";
+import { DATE_FORMAT_24_UTC, DATE_FORMAT } from "src/util/format";
 const cx = classNames.bind(styles);
 const booleanSettingCx = classnames.bind(booleanSettingStyles);
 
@@ -108,6 +108,9 @@ export interface DatabaseTablePageDataDetails {
   indexNames: string[];
   grants: Grant[];
   statsLastUpdated?: Moment;
+  totalBytes: number;
+  liveBytes: number;
+  livePercentage: number;
 }
 
 export interface DatabaseTablePageIndexStats {
@@ -252,9 +255,9 @@ export class DatabaseTablePage extends React.Component<
     if (indexStat.lastUsed.isSame(this.minDate)) {
       return "Never";
     }
-    return indexStat.lastUsed.format(
-      `[Last ${indexStat.lastUsedType}:] MMM DD, YYYY [at] H:mm`,
-    );
+    return `Last ${indexStat.lastUsedType}: ${indexStat.lastUsed.format(
+      DATE_FORMAT,
+    )}`;
   }
 
   private renderIndexRecommendations = (
@@ -374,6 +377,23 @@ export class DatabaseTablePage extends React.Component<
     },
   ];
 
+  formatMVCCInfo = (
+    details: DatabaseTablePageDataDetails,
+  ): React.ReactElement => {
+    return (
+      <>
+        {format.Percentage(details.livePercentage, 1, 1)}
+        {" ("}
+        <span className={cx("bold")}>
+          {format.Bytes(details.liveBytes)}
+        </span>{" "}
+        live data /{" "}
+        <span className={cx("bold")}>{format.Bytes(details.totalBytes)}</span>
+        {" total)"}
+      </>
+    );
+  };
+
   render(): React.ReactElement {
     return (
       <div className="root table-area">
@@ -430,11 +450,15 @@ export class DatabaseTablePage extends React.Component<
                       label="Ranges"
                       value={this.props.stats.rangeCount}
                     />
+                    <SummaryCardItem
+                      label="% of Live Data"
+                      value={this.formatMVCCInfo(this.props.details)}
+                    />
                     {this.props.details.statsLastUpdated && (
                       <SummaryCardItem
                         label="Table Stats Last Updated"
                         value={this.props.details.statsLastUpdated.format(
-                          "MMM DD, YYYY [at] H:mm [(UTC)]",
+                          DATE_FORMAT_24_UTC,
                         )}
                       />
                     )}

diff --git a/pkg/ui/workspaces/cluster-ui/src/util/docs.ts b/pkg/ui/workspaces/cluster-ui/src/util/docs.ts
@@ -113,6 +113,9 @@ export const lockingStrength = docsURL(
 export const transactionLayerOverview = docsURL(
   "architecture/transaction-layer.html#overview",
 );
+export const mvccGarbage = docsURLNoVersion(
+  "architecture/storage-layer.html#mvcc",
+);
 
 // Not actually a docs URL.
 export const startTrial = "https://www.cockroachlabs.com/pricing/start-trial/";

diff --git a/pkg/ui/workspaces/db-console/src/views/databases/databaseDetailsPage/redux.spec.ts b/pkg/ui/workspaces/db-console/src/views/databases/databaseDetailsPage/redux.spec.ts
@@ -163,6 +163,9 @@ describe("Database Details Page", function () {
             grants: [],
             statsLastUpdated: null,
             hasIndexRecommendations: false,
+            livePercentage: 0,
+            liveBytes: 0,
+            totalBytes: 0,
           },
           stats: {
             loading: false,
@@ -184,6 +187,9 @@ describe("Database Details Page", function () {
             grants: [],
             statsLastUpdated: null,
             hasIndexRecommendations: false,
+            livePercentage: 0,
+            totalBytes: 0,
+            liveBytes: 0,
           },
           stats: {
             loading: false,
@@ -257,6 +263,9 @@ describe("Database Details Page", function () {
         },
       ],
       stats_last_created_at: makeTimestamp("0001-01-01T00:00:00Z"),
+      data_total_bytes: new Long(456789),
+      data_live_bytes: new Long(12345),
+      data_live_percentage: 2.0,
     });
 
     fakeApi.stubTableDetails("things", "bar", {
@@ -306,6 +315,9 @@ describe("Database Details Page", function () {
         },
       ],
       stats_last_created_at: makeTimestamp("0001-01-01T00:00:00Z"),
+      data_total_bytes: new Long(456789),
+      data_live_bytes: new Long(12345),
+      data_live_percentage: 2.0,
     });
 
     await driver.refreshDatabaseDetails();
@@ -324,6 +336,9 @@ describe("Database Details Page", function () {
         makeTimestamp("0001-01-01T00:00:00Z"),
       ),
       hasIndexRecommendations: false,
+      liveBytes: 12345,
+      totalBytes: 456789,
+      livePercentage: 2.0,
     });
 
     driver.assertTableDetails("bar", {
@@ -338,6 +353,9 @@ describe("Database Details Page", function () {
         makeTimestamp("0001-01-01T00:00:00Z"),
       ),
       hasIndexRecommendations: false,
+      liveBytes: 12345,
+      totalBytes: 456789,
+      livePercentage: 2.0,
     });
   });
 

diff --git a/pkg/ui/workspaces/db-console/src/views/databases/databaseDetailsPage/redux.ts b/pkg/ui/workspaces/db-console/src/views/databases/databaseDetailsPage/redux.ts
@@ -149,6 +149,11 @@ export const mapStateToProps = createSelector(
               : null,
             hasIndexRecommendations:
               details?.data?.has_index_recommendations || false,
+            totalBytes: FixLong(
+              details?.data?.data_total_bytes || 0,
+            ).toNumber(),
+            liveBytes: FixLong(details?.data?.data_live_bytes || 0).toNumber(),
+            livePercentage: details?.data?.data_live_percentage || 0,
           },
           stats: {
             loading: !!stats?.inFlight,

diff --git a/pkg/ui/workspaces/db-console/src/views/databases/databaseTablePage/redux.spec.ts b/pkg/ui/workspaces/db-console/src/views/databases/databaseTablePage/redux.spec.ts
@@ -180,6 +180,9 @@ describe("Database Table Page", function () {
           indexNames: [],
           grants: [],
           statsLastUpdated: null,
+          livePercentage: 0,
+          liveBytes: 0,
+          totalBytes: 0,
         },
         automaticStatsCollectionEnabled: true,
         stats: {
@@ -216,6 +219,9 @@ describe("Database Table Page", function () {
         num_replicas: 5,
       },
       stats_last_created_at: makeTimestamp("0001-01-01T00:00:00Z"),
+      data_total_bytes: new Long(456789),
+      data_live_bytes: new Long(12345),
+      data_live_percentage: 2.0,
     });
 
     await driver.refreshTableDetails();
@@ -234,6 +240,9 @@ describe("Database Table Page", function () {
       statsLastUpdated: util.TimestampToMoment(
         makeTimestamp("0001-01-01T00:00:00Z"),
       ),
+      livePercentage: 2.0,
+      liveBytes: 12345,
+      totalBytes: 456789,
     });
   });
 

diff --git a/pkg/ui/workspaces/db-console/src/views/databases/databaseTablePage/redux.ts b/pkg/ui/workspaces/db-console/src/views/databases/databaseTablePage/redux.ts
@@ -131,6 +131,9 @@ export const mapStateToProps = createSelector(
         statsLastUpdated: details?.data?.stats_last_created_at
           ? util.TimestampToMoment(details?.data?.stats_last_created_at)
           : null,
+        totalBytes: FixLong(details?.data?.data_total_bytes || 0).toNumber(),
+        liveBytes: FixLong(details?.data?.data_live_bytes || 0).toNumber(),
+        livePercentage: details?.data?.data_live_percentage || 0,
       },
       showNodeRegionsSection,
       automaticStatsCollectionEnabled,
-Original file line number
+Diff line change
@@ Expand Up / @@ -148,3 +148,8 @@ @@
         }
       }
     }
+    .bold {
+      font-weight: $font-weight--extra-bold;
+      color: $colors--neutral-8;
+    }