release-21.2: New SQL Activity page

pkg/ui/workspaces/cluster-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cockroachlabs/cluster-ui",
-  "version": "21.2.0-prerelease-7",
+  "version": "21.2.0-prerelease-9",
   "description": "Cluster UI is a library of large features shared between CockroachDB and CockroachCloud",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "@cockroachlabs/crdb-protobuf-client": "link:../db-console/src/js",
     "@cockroachlabs/eslint-config": "^0.1.3",
     "@cockroachlabs/icons": "0.3.0",
-    "@cockroachlabs/ui-components": "0.2.19-alpha.11",
+    "@cockroachlabs/ui-components": "0.2.20",
     "@popperjs/core": "^2.4.0",
     "@reduxjs/toolkit": "^1.5.0",
     "@storybook/addon-actions": "^6.1.21",

pkg/ui/workspaces/cluster-ui/src/common/index.tsx

@@ -0,0 +1,14 @@
+// Copyright 2021 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import classNames from "classnames/bind";
+import styles from "./styles.module.scss";
+
+export const commonStyles = classNames.bind(styles);

pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss

@@ -0,0 +1,60 @@
+@import "src/core/index.module";
+
+.cockroach--tabs {
+  overflow: visible !important;
+  :global(.ant-tabs-bar) {
+    border-bottom: 1px solid $grey2;
+  }
+
+  :global(.ant-tabs-tab) {
+    font-family: $font-family--base;
+    font-size: 16px;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: $colors--neutral-7;
+  }
+
+  :global(.ant-tabs-nav .ant-tabs-tab-active) {
+    color: $colors--link;
+  }
+
+  :global(.ant-tabs-nav .ant-tabs-tab:hover) {
+    color: $colors--link;
+  }
+
+  :global(.ant-tabs-ink-bar) {
+    height: 3px;
+    border-radius: 40px;
+    background-color: $blue;
+  }
+}
+
+h1.base-heading {
+  font-size: 24px;
+  font-family: $font-family--base;
+}
+
+h2.base-heading {
+  padding: 12px 0;
+  font-size: 24px;
+  font-family: $font-family--base
+}
+
+h3.base-heading {
+  color: $colors--neutral-7;
+  font-family: $font-family--sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 20px;
+  padding-bottom: 12px;
+}
+
+.no-margin-bottom {
+  margin-bottom: 0px;
+}
+
+.separator {
+  border-left: 1px solid #C0C6D9;
+  padding-left: 25px;
+}

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss

@@ -18,32 +18,6 @@
   }
 }
 
-.cockroach--tabs {
-  :global(.ant-tabs-bar) {
-    border-bottom: 1px solid $grey2;
-  }
-
-  :global(.ant-tabs-tab) {
-    @include text--heading-5;
-    font-weight: $font-weight--medium;
-    color: $colors--neutral-7;
-  }
-
-  :global(.ant-tabs-tab-active) {
-    color: $colors--neutral-8;
-  }
-
-  :global(.ant-tabs-tab:hover) {
-    color: $colors--link;
-  }
-
-  :global(.ant-tabs-ink-bar) {
-    height: 3px;
-    border-radius: 40px;
-    background-color: $colors--link;
-  }
-}
-
 .summary-card {
   h4 {
     @include text--body-strong;
@@ -79,4 +53,4 @@
   &--primary {
     fill: $colors--primary-text;
   }
-}
+}

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx

@@ -23,6 +23,7 @@ import { SummaryCard, SummaryCardItem } from "src/summaryCard";
 import * as format from "src/util/format";
 
 import styles from "./databaseTablePage.module.scss";
+import { commonStyles } from "src/common";
 import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses";
 const cx = classNames.bind(styles);
 
@@ -200,7 +201,7 @@ export class DatabaseTablePage extends React.Component<
         </section>
 
         <section className={baseHeadingClasses.wrapper}>
-          <Tabs className={cx("cockroach--tabs")}>
+          <Tabs className={commonStyles("cockroach--tabs")}>
             <TabPane tab="Overview" key="overview">
               <Row>
                 <Col>

pkg/ui/workspaces/cluster-ui/src/index.ts

@@ -15,6 +15,7 @@ export * from "./anchor";
 export * from "./badge";
 export * from "./barCharts";
 export * from "./button";
+export * from "./common";
 export * from "./databaseDetailsPage";
 export * from "./databaseTablePage";
 export * from "./databasesPage";

pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx

@@ -19,7 +19,7 @@ export interface PageConfigProps {
 
 const cx = classnames.bind(styles);
 
-export function PageConfig(props: PageConfigProps) {
+export function PageConfig(props: PageConfigProps): React.ReactElement {
   const classes = cx({
     "page-config__list": props.layout !== "spread",
     "page-config__spread": props.layout === "spread",
@@ -34,8 +34,13 @@ export function PageConfig(props: PageConfigProps) {
 
 export interface PageConfigItemProps {
   children?: React.ReactNode;
+  className?: string;
 }
 
-export function PageConfigItem(props: PageConfigItemProps) {
-  return <li className={cx("page-config__item")}>{props.children}</li>;
+export function PageConfigItem(props: PageConfigItemProps): React.ReactElement {
+  return (
+    <li className={`${cx("page-config__item")} ${props.className}`}>
+      {props.children}
+    </li>
+  );
 }

pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx

@@ -89,15 +89,17 @@ export const defaultFilters: Filters = {
  * @return Filters: the default filters with updated keys existing on
  * queryString
  */
-export const getFiltersFromQueryString = (queryString: string) => {
+export const getFiltersFromQueryString = (
+  queryString: string,
+): Record<string, string> => {
   const searchParams = new URLSearchParams(queryString);
 
   return Object.keys(defaultFilters).reduce(
     (filters, filter: keyof Filters): Filters => {
       const defaultValue = defaultFilters[filter];
       const queryStringFilter = searchParams.get(filter);
       const filterValue =
-        queryStringFilter === null
+        queryStringFilter == null
           ? defaultValue
           : defaultValue.constructor(searchParams.get(filter));
       return { [filter]: filterValue, ...filters };
@@ -123,7 +125,7 @@ export const inactiveFiltersState: Filters = {
   nodes: "",
 };
 
-export const calculateActiveFilters = (filters: Filters) => {
+export const calculateActiveFilters = (filters: Filters): number => {
   return Object.keys(inactiveFiltersState).reduce(
     (active, filter: keyof Filters) => {
       return inactiveFiltersState[filter] !== filters[filter]
@@ -185,7 +187,19 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
     this.setState({ hide: true });
   };
 
-  handleChange = (event: any, field: string) => {
+  handleSelectChange = (
+    event: { label: string; value: string },
+    field: string,
+  ): void => {
+    this.setState({
+      filters: {
+        ...this.state.filters,
+        [field]: event.value,
+      },
+    });
+  };
+
+  handleChange = (event: any, field: string): void => {
     this.setState({
       filters: {
         ...this.state.filters,
@@ -222,7 +236,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
     });
   };
 
-  isOptionSelected = (option: string, field: string) => {
+  isOptionSelected = (option: string, field: string): boolean => {
     const selection = field.split(",");
     if (selection.length > 0 && selection.includes(option)) return true;
     return false;
@@ -419,7 +433,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
             <div className={filterLabel.top}>App</div>
             <Select
               options={apps}
-              onChange={e => this.handleChange(e, "app")}
+              onChange={e => this.handleSelectChange(e, "app")}
               value={apps.filter(app => app.value === filters.app)}
               placeholder="All"
               styles={customStyles}
@@ -441,7 +455,7 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
               <Select
                 options={timeUnit}
                 value={timeUnit.filter(unit => unit.label == filters.timeUnit)}
-                onChange={e => this.handleChange(e, "timeUnit")}
+                onChange={e => this.handleSelectChange(e, "timeUnit")}
                 className={timePair.timeUnit}
                 styles={customStylesSmall}
               />

pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx

@@ -48,6 +48,7 @@ import { UIConfigState } from "src/store";
 import statementsPageStyles from "src/statementsPage/statementsPage.module.scss";
 import styles from "./sessionDetails.module.scss";
 import classNames from "classnames/bind";
+import { commonStyles } from "src/common";
 
 const cx = classNames.bind(styles);
 const statementsPageCx = classNames.bind(statementsPageStyles);
@@ -98,15 +99,15 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
     isTenant: false,
   };
 
-  componentDidMount() {
+  componentDidMount(): void {
     if (!this.props.isTenant) {
       this.props.refreshNodes();
       this.props.refreshNodesLiveness();
     }
     this.props.refreshSessions();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(): void {
     // Normally, we would refresh the sessions here, but we don't want to
     // have the per-session page update whenever our data source updates
     // because in real workloads, sessions change what they're doing very
@@ -122,16 +123,13 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
     this.terminateQueryRef = React.createRef();
   }
 
-  backToSessionsPage = () => {
-    const { history, location, onBackButtonClick } = this.props;
+  backToSessionsPage = (): void => {
+    const { history, onBackButtonClick } = this.props;
     onBackButtonClick && onBackButtonClick();
-    history.push({
-      ...location,
-      pathname: "/sessions",
-    });
+    history.push("/sql-activity?tab=sessions");
   };
 
-  render() {
+  render(): React.ReactElement {
     const sessionID = getMatchParamByName(this.props.match, sessionAttr);
     const {
       sessionError,
@@ -159,7 +157,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
           </Button>
           <div className={cx("heading-with-controls")}>
             <h3
-              className={`${statementsPageCx("base-heading")} ${cx(
+              className={`${commonStyles("base-heading")} ${cx(
                 "page--header__title",
               )}`}
             >
@@ -223,7 +221,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
     );
   }
 
-  renderContent = () => {
+  renderContent = (): React.ReactElement => {
     if (!this.props.session) {
       return null;
     }
@@ -273,7 +271,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
               className={cx("details-item")}
             />
           </Col>
-          <Col className="gutter-row" span={4}></Col>
+          <Col className="gutter-row" span={4} />
           <Col className="gutter-row" span={10}>
             <SummaryCardItem
               label={"Priority"}
@@ -308,7 +306,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
       const stmt = session.active_queries[0];
       curStmtInfo = (
         <React.Fragment>
-          <SqlBox value={stmt.sql}></SqlBox>
+          <SqlBox value={stmt.sql} />
           <SummaryCard className={cx("details-section")}>
             <Row>
               <Col className="gutter-row" span={10}>
@@ -331,7 +329,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
                   View Statement Details
                 </Link>
               </Col>
-              <Col className="gutter-row" span={4}></Col>
+              <Col className="gutter-row" span={4} />
               <Col className="gutter-row" span={10}>
                 <SummaryCardItem
                   label={"Distributed Execution?"}
@@ -372,7 +370,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
                 />
               )}
             </Col>
-            <Col className="gutter-row" span={4}></Col>
+            <Col className="gutter-row" span={4} />
             <Col className="gutter-row" span={10}>
               <SummaryCardItem
                 label={"Client Address"}