ui: new sql activity page

New SQL Activity page that includes Sessions, Statement and Transaction pages. Partially addresses cockroachdb#66052 Release note (ui change): Session, Statement and Transaction pages are now grouped inside the new SQL Activity page.
maryliag · Oct 14, 2021 · ec57135 · ec57135
1 parent a158794
commit ec57135
Show file tree

Hide file tree

Showing 25 changed files with 313 additions and 250 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/common/index.tsx b/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);
diff --git a/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss b/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;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss b/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;
   }
-}
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/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>

diff --git a/pkg/ui/workspaces/cluster-ui/src/index.ts b/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";

diff --git a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx b/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>
+  );
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
@@ -153,13 +153,13 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
 
   dropdownRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-  componentDidMount() {
+  componentDidMount(): void {
     window.addEventListener("click", this.outsideClick, false);
   }
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     window.removeEventListener("click", this.outsideClick, false);
   }
-  componentDidUpdate(prevProps: QueryFilter) {
+  componentDidUpdate(prevProps: QueryFilter): void {
     if (prevProps.filters !== this.props.filters) {
       this.setState({
         filters: {
@@ -168,21 +168,21 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
       });
     }
   }
-  outsideClick = (event: any) => {
+  outsideClick = (event: any): void => {
     this.setState({ hide: true });
   };
 
-  insideClick = (event: any) => {
+  insideClick = (event: any): void => {
     event.stopPropagation();
   };
 
-  toggleFilters = () => {
+  toggleFilters = (): void => {
     this.setState({
       hide: !this.state.hide,
     });
   };
 
-  handleSubmit = () => {
+  handleSubmit = (): void => {
     this.props.onSubmitFilters(this.state.filters);
     this.setState({ hide: true });
   };
@@ -220,14 +220,14 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
     });
   };
 
-  validateInput = (value: string) => {
+  validateInput = (value: string): string => {
     const isInteger = /^[0-9]+$/;
     return (value === "" || isInteger.test(value)) && value.length <= 3
       ? value
       : this.state.filters.timeNumber;
   };
 
-  clearInput = () => {
+  clearInput = (): void => {
     this.setState({
       filters: {
         ...this.state.filters,
@@ -236,13 +236,12 @@ 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;
+    return selection.length > 0 && selection.includes(option);
   };
 
-  render() {
+  render(): React.ReactElement {
     const { hide, filters } = this.state;
     const {
       appNames,

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx b/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,16 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
     this.terminateQueryRef = React.createRef();
   }
 
-  backToSessionsPage = () => {
+  backToSessionsPage = (): void => {
     const { history, location, onBackButtonClick } = this.props;
     onBackButtonClick && onBackButtonClick();
     history.push({
       ...location,
-      pathname: "/sessions",
+      pathname: "/sql-activity/sessions",
     });
   };
 
-  render() {
+  render(): React.ReactElement {
     const sessionID = getMatchParamByName(this.props.match, sessionAttr);
     const {
       sessionError,
@@ -159,7 +160,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 +224,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
     );
   }
 
-  renderContent = () => {
+  renderContent = (): React.ReactElement => {
     if (!this.props.session) {
       return null;
     }
@@ -273,7 +274,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 +309,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 +332,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 +373,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"}