Stats collection details added to Database pages

Closes: cockroachdb#67510 Release justification: low-risk, high benefit changes to existing functionality Release note (ui change): - Added status of automatic statistics collection to the Database and Database table pages on the DB Console. - Added timestamp of last statistics collection to the Database details and Database table pages on the DB Console.
ericharmeling · Feb 8, 2022 · 364fd1f · 364fd1f
1 parent 7b48b61
commit 364fd1f
Show file tree

Hide file tree

Showing 23 changed files with 378 additions and 5 deletions.
diff --git a/docs/generated/http/full.md b/docs/generated/http/full.md
@@ -4487,6 +4487,7 @@ a table.
 | zone_config_level | [ZoneConfigurationLevel](#cockroach.server.serverpb.TableDetailsResponse-cockroach.server.serverpb.ZoneConfigurationLevel) |  | The level at which this object's zone configuration is set. | [reserved](#support-status) |
 | descriptor_id | [int64](#cockroach.server.serverpb.TableDetailsResponse-int64) |  | descriptor_id is an identifier used to uniquely identify this table. It can be used to find events pertaining to this table by filtering on the 'target_id' field of events. | [reserved](#support-status) |
 | configure_zone_statement | [string](#cockroach.server.serverpb.TableDetailsResponse-string) |  | configure_zone_statement is the output of "SHOW ZONE CONFIGURATION FOR TABLE" for this table. It is a SQL statement that would re-configure the table's current zone if executed. | [reserved](#support-status) |
+| stats_last_created_at | [google.protobuf.Timestamp](#cockroach.server.serverpb.TableDetailsResponse-google.protobuf.Timestamp) |  | stats_last_created_at is the time at which statistics were last created. | [reserved](#support-status) |
 
 
 

diff --git a/docs/generated/swagger/spec.json b/docs/generated/swagger/spec.json
@@ -1274,6 +1274,12 @@
           "format": "int64",
           "x-go-name": "RangeCount"
         },
+        "stats_last_created_at": {
+          "description": "stats_last_created_at is the time at which statistics were last created.",
+          "type": "string",
+          "format": "date-time",
+          "x-go-name": "StatsLastCreatedAt"
+        },
         "zone_config": {
           "$ref": "#/definitions/ZoneConfig"
         },

diff --git a/pkg/server/admin.go b/pkg/server/admin.go
@@ -873,6 +873,31 @@ func (s *adminServer) tableDetailsHelper(
 		resp.CreateTableStatement = createStmt
 	}
 
+	// Marshal SHOW STATISTICS result.
+	row, cols, err = s.server.sqlServer.internalExecutor.QueryRowExWithCols(
+		ctx, "admin-show-statistics", nil, /* txn */
+		sessiondata.InternalExecutorOverride{User: userName},
+		fmt.Sprintf("SELECT max(created) AS created FROM [SHOW STATISTICS FOR TABLE %s]", escQualTable),
+	)
+	if row == nil {
+		return nil, s.serverErrorf("table statistics response not available.")
+	}
+	if err = s.maybeHandleNotFoundError(err); err != nil {
+		return nil, err
+	}
+	{
+		scanner := makeResultScanner(cols)
+		const createdCol = "created"
+		noTableStats, _ := scanner.IsNull(row, createdCol)
+		if !noTableStats {
+			var createdTs time.Time
+			if err := scanner.Scan(row, createdCol, &createdTs); err != nil {
+				return nil, err
+			}
+			resp.StatsLastCreatedAt = createdTs
+		}
+	}
+
 	// Marshal SHOW ZONE CONFIGURATION result.
 	row, cols, err = s.server.sqlServer.internalExecutor.QueryRowExWithCols(
 		ctx, "admin-show-zone-config", nil, /* txn */
@@ -2888,7 +2913,7 @@ func (rs resultScanner) ScanIndex(row tree.Datums, index int, dst interface{}) e
 	case *time.Time:
 		s, ok := src.(*tree.DTimestamp)
 		if !ok {
-			return errors.Errorf("source type assertion failed")
+			return errors.Errorf("source type assertion failed on *time.Time")
 		}
 		*d = s.Time
 

diff --git a/pkg/server/admin_test.go b/pkg/server/admin_test.go
@@ -673,6 +673,7 @@ func TestAdminAPITableDetails(t *testing.T) {
 				"CREATE USER app",
 				fmt.Sprintf("GRANT SELECT ON %s.%s TO readonly", escDBName, tblName),
 				fmt.Sprintf("GRANT SELECT,UPDATE,DELETE ON %s.%s TO app", escDBName, tblName),
+				fmt.Sprintf("CREATE STATISTICS test_stats FROM %s.%s", escDBName, tblName),
 			}
 			pgURL, cleanupGoDB := sqlutils.PGUrl(
 				t, s.ServingSQLAddr(), "StartServer" /* prefix */, url.User(security.RootUser))
@@ -779,6 +780,22 @@ func TestAdminAPITableDetails(t *testing.T) {
 				}
 			}
 
+			// Verify statistics last updated.
+			{
+
+				showStatisticsForTableQuery := fmt.Sprintf("SELECT max(created) AS created FROM [SHOW STATISTICS FOR TABLE %s.%s]", escDBName, tblName)
+
+				row := db.QueryRow(showStatisticsForTableQuery)
+				var createdTs time.Time
+				if err := row.Scan(&createdTs); err != nil {
+					t.Fatal(err)
+				}
+
+				if a, e := resp.StatsLastCreatedAt, createdTs; reflect.DeepEqual(a, e) {
+					t.Fatalf("mismatched statistics creation timestamp; expected %s, got %s", e, a)
+				}
+			}
+
 			// Verify Descriptor ID.
 			tableID, err := ts.admin.queryTableID(ctx, security.RootUserName(), tc.dbName, tc.tblName)
 			if err != nil {

diff --git a/pkg/server/serverpb/admin.proto b/pkg/server/serverpb/admin.proto
@@ -210,6 +210,8 @@ message TableDetailsResponse {
   // for this table. It is a SQL statement that would re-configure the table's current
   // zone if executed.
   string configure_zone_statement = 9;
+  // stats_last_created_at is the time at which statistics were last created.
+  google.protobuf.Timestamp stats_last_created_at = 10 [(gogoproto.nullable) = false, (gogoproto.stdtime) = true];
 }
 
 // TableStatsRequest is a request for detailed, computationally expensive

diff --git a/pkg/ui/workspaces/cluster-ui/src/core/colors.module.scss b/pkg/ui/workspaces/cluster-ui/src/core/colors.module.scss
@@ -59,6 +59,7 @@ $colors--functional-orange-5: #764205;
 $colors--title: $colors--neutral-8;
 $colors--primary-text: $colors--neutral-7;
 $colors--secondary-text: $colors--neutral-6;
+$colors--success: $colors--primary-green-3;
 $colors--disabled: $colors--neutral-5;
 $colors--link: $colors--primary-blue-3;
 $colors--white: $colors--neutral-0;

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.stories.tsx
@@ -25,6 +25,7 @@ import {
 } from "./databaseDetailsPage";
 
 import * as H from "history";
+import moment from "moment";
 const history = H.createHashHistory();
 
 const withLoadingIndicator: DatabaseDetailsPageProps = {
@@ -107,6 +108,7 @@ const withData: DatabaseDetailsPageProps = {
         userCount: roles.length,
         roles: roles,
         grants: grants,
+        statsLastUpdated: moment("0001-01-01T00:00:00Z"),
       },
       showNodeRegionsColumn: true,
       stats: {

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
@@ -36,6 +36,8 @@ import {
   baseHeadingClasses,
   statisticsClasses,
 } from "src/transactionsPage/transactionsPageClasses";
+import moment, { Moment } from "moment";
+import { formatDate } from "antd/es/date-picker/utils";
 
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
@@ -101,6 +103,7 @@ export interface DatabaseDetailsPageDataTableDetails {
   userCount: number;
   roles: string[];
   grants: string[];
+  statsLastUpdated?: Moment;
 }
 
 export interface DatabaseDetailsPageDataTableStats {
@@ -351,6 +354,26 @@ export class DatabaseDetailsPage extends React.Component<
         showByDefault: this.props.showNodeRegionsColumn,
         hideIfTenant: true,
       },
+      {
+        title: (
+          <Tooltip
+            placement="bottom"
+            title="The last time table statistics were created or updated."
+          >
+            Table Stats Last Updated (UTC)
+          </Tooltip>
+        ),
+        cell: table =>
+          table.details.statsLastUpdated.isSame(moment.utc("0001-01-01"))
+            ? "No table statistics found"
+            : formatDate(
+                table.details.statsLastUpdated,
+                "MMM DD, YYYY [at] h:mm A",
+              ),
+        sort: table => table.details.statsLastUpdated,
+        className: cx("database-table__col--table-stats"),
+        name: "tableStatsUpdated",
+      },
     ];
   }
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.stories.tsx
@@ -26,13 +26,15 @@ const history = H.createHashHistory();
 const withLoadingIndicator: DatabaseTablePageProps = {
   databaseName: randomName(),
   name: randomName(),
+  automaticStatsCollectionEnabled: true,
   details: {
     loading: true,
     loaded: false,
     createStatement: "",
     replicaCount: 0,
     indexNames: [],
     grants: [],
+    statsLastUpdated: moment("0001-01-01T00:00:00Z"),
   },
   stats: {
     loading: true,
@@ -58,13 +60,15 @@ const withLoadingIndicator: DatabaseTablePageProps = {
   refreshTableStats: () => {},
   refreshIndexStats: () => {},
   resetIndexUsageStats: () => {},
+  refreshSettings: () => {},
 };
 
 const name = randomName();
 
 const withData: DatabaseTablePageProps = {
   databaseName: randomName(),
   name: name,
+  automaticStatsCollectionEnabled: true,
   details: {
     loading: false,
     loaded: true,
@@ -89,6 +93,7 @@ const withData: DatabaseTablePageProps = {
         };
       }),
     ),
+    statsLastUpdated: moment("0001-01-01T00:00:00Z"),
   },
   showNodeRegionsSection: true,
   stats: {
@@ -136,6 +141,7 @@ const withData: DatabaseTablePageProps = {
   refreshTableStats: () => {},
   refreshIndexStats: () => {},
   resetIndexUsageStats: () => {},
+  refreshSettings: () => {},
 };
 
 storiesOf("Database Table Page", module)

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -21,7 +21,11 @@ import { CaretRight } from "src/icon/caretRight";
 import { StackIcon } from "src/icon/stackIcon";
 import { SqlBox } from "src/sql";
 import { ColumnDescriptor, SortSetting, SortedTable } from "src/sortedtable";
-import { SummaryCard, SummaryCardItem } from "src/summaryCard";
+import {
+  SummaryCard,
+  SummaryCardItem,
+  SummaryCardItemBoolSetting,
+} from "src/summaryCard";
 import * as format from "src/util/format";
 import { syncHistory } from "src/util";
 
@@ -32,7 +36,10 @@ import moment, { Moment } from "moment";
 import { Search as IndexIcon } from "@cockroachlabs/icons";
 import { formatDate } from "antd/es/date-picker/utils";
 import { Link } from "react-router-dom";
+import classnames from "classnames/bind";
+import booleanSettingStyles from "../settings/booleanSetting.module.scss";
 const cx = classNames.bind(styles);
+const booleanSettingCx = classnames.bind(booleanSettingStyles);
 
 const { TabPane } = Tabs;
 
@@ -84,6 +91,7 @@ export interface DatabaseTablePageData {
   stats: DatabaseTablePageDataStats;
   indexStats: DatabaseTablePageIndexStats;
   showNodeRegionsSection?: boolean;
+  automaticStatsCollectionEnabled: boolean;
 }
 
 export interface DatabaseTablePageDataDetails {
@@ -93,6 +101,7 @@ export interface DatabaseTablePageDataDetails {
   replicaCount: number;
   indexNames: string[];
   grants: Grant[];
+  statsLastUpdated: Moment;
 }
 
 export interface DatabaseTablePageIndexStats {
@@ -125,6 +134,7 @@ export interface DatabaseTablePageDataStats {
 export interface DatabaseTablePageActions {
   refreshTableDetails: (database: string, table: string) => void;
   refreshTableStats: (database: string, table: string) => void;
+  refreshSettings: () => void;
   refreshIndexStats?: (database: string, table: string) => void;
   resetIndexUsageStats?: (database: string, table: string) => void;
   refreshNodes?: () => void;
@@ -203,6 +213,10 @@ export class DatabaseTablePage extends React.Component<
         this.props.name,
       );
     }
+
+    if (this.props.refreshSettings != null) {
+      this.props.refreshSettings();
+    }
   }
 
   minDate = moment.utc("0001-01-01"); // minimum value as per UTC
@@ -359,6 +373,37 @@ export class DatabaseTablePage extends React.Component<
                       label="Ranges"
                       value={this.props.stats.rangeCount}
                     />
+                    {!this.props.details.statsLastUpdated.isSame(
+                      this.minDate,
+                    ) && (
+                      <SummaryCardItem
+                        label="Table Stats Last Updated"
+                        value={formatDate(
+                          this.props.details.statsLastUpdated,
+                          "MMM DD, YYYY [at] h:mm A [(UTC)]",
+                        )}
+                      />
+                    )}
+                    <SummaryCardItemBoolSetting
+                      label="Auto Stats Collection"
+                      value={this.props.automaticStatsCollectionEnabled}
+                      toolTipText={
+                        <span>
+                          {" "}
+                          Automatic statistics can help improve query
+                          performance. Learn how to{" "}
+                          <a
+                            className={booleanSettingCx(
+                              "crl-hover-text__link-text",
+                            )}
+                            href="https://www.cockroachlabs.com/docs/stable/cost-based-optimizer#control-automatic-statistics"
+                          >
+                            manage statistics collection
+                          </a>
+                          .
+                        </span>
+                      }
+                    />
                   </SummaryCard>
                 </Col>
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.stories.tsx
@@ -22,13 +22,15 @@ const history = H.createHashHistory();
 const withLoadingIndicator: DatabasesPageProps = {
   loading: true,
   loaded: false,
+  automaticStatsCollectionEnabled: true,
   databases: [],
   sortSetting: {
     ascending: false,
     columnTitle: "name",
   },
   onSortingChange: () => {},
   refreshDatabases: () => {},
+  refreshSettings: () => {},
   refreshDatabaseDetails: () => {},
   refreshTableStats: () => {},
   location: history.location,
@@ -44,13 +46,15 @@ const withLoadingIndicator: DatabasesPageProps = {
 const withoutData: DatabasesPageProps = {
   loading: false,
   loaded: true,
+  automaticStatsCollectionEnabled: true,
   databases: [],
   sortSetting: {
     ascending: false,
     columnTitle: "name",
   },
   onSortingChange: () => {},
   refreshDatabases: () => {},
+  refreshSettings: () => {},
   refreshDatabaseDetails: () => {},
   refreshTableStats: () => {},
   location: history.location,
@@ -67,6 +71,7 @@ const withData: DatabasesPageProps = {
   loading: false,
   loaded: true,
   showNodeRegionsColumn: true,
+  automaticStatsCollectionEnabled: true,
   sortSetting: {
     ascending: false,
     columnTitle: "name",
@@ -86,6 +91,7 @@ const withData: DatabasesPageProps = {
   }),
   onSortingChange: () => {},
   refreshDatabases: () => {},
+  refreshSettings: () => {},
   refreshDatabaseDetails: () => {},
   refreshTableStats: () => {},
   location: history.location,