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 7, 2022 · f42c356 · f42c356
1 parent e741c4e
commit f42c356
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 14 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,
+      garbagePercentage: _.random(0, 100),
+      garbageBytes: _.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;
+  garbageBytes: number;
+  garbagePercentage: number;
 }
 
 export interface DatabaseDetailsPageDataTableStats {
@@ -260,6 +264,26 @@ export class DatabaseDetailsPage extends React.Component<
     }
   }
 
+  formatMVCCInfo = (
+    details: DatabaseDetailsPageDataTableDetails,
+  ): React.ReactElement => {
+    return (
+      <>
+        <p className={cx("multiple-lines-info")}>
+          {format.Percentage(details.garbagePercentage, 1, 1)}
+        </p>
+        <p className={cx("multiple-lines-info")}>
+          <span className={cx("bold")}>
+            {format.Bytes(details.garbageBytes)}
+          </span>{" "}
+          non-live data /{" "}
+          <span className={cx("bold")}>{format.Bytes(details.totalBytes)}</span>
+          {" total"}
+        </p>
+      </>
+    );
+  };
+
   private columnsForTablesViewMode(): ColumnDescriptor<DatabaseDetailsPageDataTable>[] {
     return [
       {
@@ -368,6 +392,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 data ("}
+                <Anchor href={mvccGarbage} target="_blank">
+                  MVCC values
+                </Anchor>
+                {") modified (updated or deleted) but not garbage collected. A high percentage can cause " +
+                  "statements to scan more data than required, which can reduce performance."}
+              </div>
+            }
+          >
+            % of Non-live Data
+          </Tooltip>
+        ),
+        cell: table => this.formatMVCCInfo(table.details),
+        sort: table => table.details.garbagePercentage,
+        className: cx("database-table__col-column-count"),
+        name: "garbagePercentage",
+      },
       {
         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"),
+    garbagePercentage: 2.7,
+    garbageBytes: 12345,
+    totalBytes: 456789,
   },
   stats: {
     loading: true,
@@ -91,6 +94,9 @@ const withData: DatabaseTablePageProps = {
       },
     ],
     statsLastUpdated: moment("0001-01-01T00:00:00Z"),
+    garbagePercentage: 2.7,
+    garbageBytes: 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
@@ -108,6 +108,9 @@ export interface DatabaseTablePageDataDetails {
   indexNames: string[];
   grants: Grant[];
   statsLastUpdated?: Moment;
+  totalBytes: number;
+  garbageBytes: number;
+  garbagePercentage: number;
 }
 
 export interface DatabaseTablePageIndexStats {
@@ -374,6 +377,23 @@ export class DatabaseTablePage extends React.Component<
     },
   ];
 
+  formatMVCCInfo = (
+    details: DatabaseTablePageDataDetails,
+  ): React.ReactElement => {
+    return (
+      <>
+        {format.Percentage(details.garbagePercentage, 1, 1)}
+        {" ("}
+        <span className={cx("bold")}>
+          {format.Bytes(details.garbageBytes)}
+        </span>{" "}
+        non-live data /{" "}
+        <span className={cx("bold")}>{format.Bytes(details.totalBytes)}</span>
+        {" total)"}
+      </>
+    );
+  };
+
   render(): React.ReactElement {
     return (
       <div className="root table-area">
@@ -430,6 +450,10 @@ export class DatabaseTablePage extends React.Component<
                       label="Ranges"
                       value={this.props.stats.rangeCount}
                     />
+                    <SummaryCardItem
+                      label="% of Non-live Data"
+                      value={this.formatMVCCInfo(this.props.details)}
+                    />
                     {this.props.details.statsLastUpdated && (
                       <SummaryCardItem
                         label="Table Stats Last Updated"

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,
+            garbagePercentage: 0,
+            garbageBytes: 0,
+            totalBytes: 0,
           },
           stats: {
             loading: false,
@@ -184,6 +187,9 @@ describe("Database Details Page", function () {
             grants: [],
             statsLastUpdated: null,
             hasIndexRecommendations: false,
+            garbagePercentage: 0,
+            totalBytes: 0,
+            garbageBytes: 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_non_live_bytes: new Long(12345),
+      data_non_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_non_live_bytes: new Long(12345),
+      data_non_live_percentage: 2.0,
     });
 
     await driver.refreshDatabaseDetails();
@@ -324,6 +336,9 @@ describe("Database Details Page", function () {
         makeTimestamp("0001-01-01T00:00:00Z"),
       ),
       hasIndexRecommendations: false,
+      garbageBytes: 12345,
+      totalBytes: 456789,
+      garbagePercentage: 2.0,
     });
 
     driver.assertTableDetails("bar", {
@@ -338,6 +353,9 @@ describe("Database Details Page", function () {
         makeTimestamp("0001-01-01T00:00:00Z"),
       ),
       hasIndexRecommendations: false,
+      garbageBytes: 12345,
+      totalBytes: 456789,
+      garbagePercentage: 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,13 @@ export const mapStateToProps = createSelector(
               : null,
             hasIndexRecommendations:
               details?.data?.has_index_recommendations || false,
+            totalBytes: FixLong(
+              details?.data?.data_total_bytes || 0,
+            ).toNumber(),
+            garbageBytes: FixLong(
+              details?.data?.data_non_live_bytes || 0,
+            ).toNumber(),
+            garbagePercentage: details?.data?.data_non_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,
+          garbagePercentage: 0,
+          garbageBytes: 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_non_live_bytes: new Long(12345),
+      data_non_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"),
       ),
+      garbagePercentage: 2.0,
+      garbageBytes: 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,11 @@ 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(),
+        garbageBytes: FixLong(
+          details?.data?.data_non_live_bytes || 0,
+        ).toNumber(),
+        garbagePercentage: details?.data?.data_non_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;
+    }