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 27, 2021 · 6522b40 · 6522b40
1 parent 6125fb4
commit 6522b40
Show file tree

Hide file tree

Showing 26 changed files with 336 additions and 245 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
@@ -236,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;

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"}

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -113,7 +113,7 @@ export class SessionsPage extends React.Component<
     };
   };
 
-  syncHistory = (params: Record<string, string | undefined>) => {
+  syncHistory = (params: Record<string, string | undefined>): void => {
     const { history } = this.props;
     const currentSearchParams = new URLSearchParams(history.location.search);
     forIn(params, (value, key) => {
@@ -128,7 +128,7 @@ export class SessionsPage extends React.Component<
     history.replace(history.location);
   };
 
-  changeSortSetting = (ss: SortSetting) => {
+  changeSortSetting = (ss: SortSetting): void => {
     const { onSortingChange } = this.props;
     onSortingChange && onSortingChange(ss.columnTitle);
 
@@ -142,7 +142,7 @@ export class SessionsPage extends React.Component<
     });
   };
 
-  resetPagination = () => {
+  resetPagination = (): void => {
     this.setState(prevState => {
       return {
         pagination: {
@@ -153,27 +153,27 @@ export class SessionsPage extends React.Component<
     });
   };
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.props.refreshSessions();
   }
 
-  componentDidUpdate = (__: SessionsPageProps, _: SessionsPageState) => {
+  componentDidUpdate = (__: SessionsPageProps, _: SessionsPageState): void => {
     this.props.refreshSessions();
   };
 
-  onChangePage = (current: number) => {
+  onChangePage = (current: number): void => {
     const { pagination } = this.state;
     this.setState({ pagination: { ...pagination, current } });
     this.props.onPageChanged(current);
   };
 
-  renderSessions = () => {
+  renderSessions = (): React.ReactElement => {
     const sessionsData = this.props.sessions;
     const { pagination } = this.state;
 
     return (
       <>
-        <section className={sortableTableCx("cl-table-container")}>
+        <section>
           <div className={statementsPageCx("cl-table-statistic")}>
             <h4 className={statementsPageCx("cl-count-title")}>
               <ResultsPerPageLabel
@@ -224,13 +224,12 @@ export class SessionsPage extends React.Component<
     );
   };
 
-  render() {
+  render(): React.ReactElement {
     const { match, cancelSession, cancelQuery } = this.props;
     const app = getMatchParamByName(match, appAttr);
     return (
       <div className={sessionsPageCx("sessions-page")}>
         <Helmet title={app ? `${app} App | Sessions` : "Sessions"} />
-        <h3 className={statementsPageCx("base-heading")}>Sessions</h3>
         <Loading
           loading={isNil(this.props.sessions)}
           error={this.props.sessionsError}