ui: Add column selector and filter including session details to the s…

…ession overview page

Previously, the sessions page was missing the column selector and filter
components that the stmts and txns page have. This change adds both
components in addition to new columns in the sessions overview page and
edits to the sessions details page.

Release note (ui change): added column selector, filters, new columns to
the sessions page and sessions details.

pkg/ui/workspaces/cluster-ui/src/icon/circleFilled.tsx

@@ -11,11 +11,15 @@
 import * as React from "react";
 
 interface IconProps {
+  fill?: string;
   className: string;
 }
 
-export const CircleFilled = ({ className, ...props }: IconProps) => (
-  <svg viewBox="0 0 12 12" className={className} {...props}>
-    <circle cx="6" cy="6" r="6" fillRule="evenodd" />
-  </svg>
-);
+export function CircleFilled(props: IconProps) {
+  const { fill, className } = props;
+  return (
+    <svg height={10} width={20} className={className} {...props}>
+      <circle cx="5" cy="5" r="5" fill={fill} />
+    </svg>
+  );
+}

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

@@ -69,6 +69,7 @@ export interface Filters {
 const timeUnit = [
   { label: "seconds", value: "seconds" },
   { label: "milliseconds", value: "milliseconds" },
+  { label: "minutes", value: "minutes" },
 ];
 
 export const defaultFilters: Filters = {
@@ -239,9 +240,15 @@ export const calculateActiveFilters = (filters: Filters): number => {
 
 export const getTimeValueInSeconds = (filters: Filters): number | "empty" => {
   if (filters.timeNumber === "0") return "empty";
-  return filters.timeUnit === "seconds"
-    ? Number(filters.timeNumber)
-    : Number(filters.timeNumber) / 1000;
+  switch (filters.timeUnit) {
+    case "seconds":
+      return Number(filters.timeNumber);
+    case "minutes":
+      return Number(filters.timeNumber) * 60;
+    default:
+      // Milliseconds
+      return Number(filters.timeNumber) / 1000;
+  }
 };
 
 export class Filter extends React.Component<QueryFilter, FilterState> {

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

@@ -50,10 +50,14 @@ import statementsPageStyles from "src/statementsPage/statementsPage.module.scss"
 import styles from "./sessionDetails.module.scss";
 import classNames from "classnames/bind";
 import { commonStyles } from "src/common";
+import { CircleFilled } from "../icon";
 
 const cx = classNames.bind(styles);
 const statementsPageCx = classNames.bind(statementsPageStyles);
 
+const success = "#37A806";
+const warning = "#FFA53B";
+
 export interface OwnProps {
   id?: string;
   nodeNames: { [nodeId: string]: string };
@@ -279,12 +283,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
           <Col className="gutter-row" span={4} />
           <Col className="gutter-row" span={10}>
             <SummaryCardItem
-              label={"Priority"}
-              value={txn.priority}
-              className={cx("details-item")}
-            />
-            <SummaryCardItem
-              label={"Read Only?"}
+              label={"Read Only"}
               value={yesOrNo(txn.read_only)}
               className={cx("details-item")}
             />
@@ -293,6 +292,11 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
               value={yesOrNo(txn.is_historical)}
               className={cx("details-item")}
             />
+            <SummaryCardItem
+              label={"Priority"}
+              value={txn.priority}
+              className={cx("details-item")}
+            />
             <MemoryUsageItem
               alloc_bytes={txn.alloc_bytes}
               max_alloc_bytes={txn.max_alloc_bytes}
@@ -374,18 +378,45 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
                   className={cx("details-item")}
                 />
               )}
+              <SummaryCardItem
+                label={"Application name"}
+                value={session.application_name}
+                className={cx("details-item")}
+              />
+              <SummaryCardItem
+                label={"Status"}
+                value={
+                  <div>
+                    <CircleFilled
+                      className={cx("status-icon")}
+                      fill={
+                        session.active_queries.length > 0 ? success : warning
+                      }
+                    />
+                    <span>
+                      {session.active_queries.length > 0 ? "Active" : "Idle"}
+                    </span>
+                  </div>
+                }
+                className={cx("details-item")}
+              />
             </Col>
             <Col className="gutter-row" span={4} />
             <Col className="gutter-row" span={10}>
               <SummaryCardItem
-                label={"Client Address"}
+                label={"Client IP Address"}
                 value={session.client_address}
                 className={cx("details-item")}
               />
               <MemoryUsageItem
                 alloc_bytes={session.alloc_bytes}
                 max_alloc_bytes={session.max_alloc_bytes}
               />
+              <SummaryCardItem
+                label={"User name"}
+                value={session.username}
+                className={cx("details-item")}
+              />
             </Col>
           </Row>
         </SummaryCard>

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.fixture.ts

@@ -15,6 +15,7 @@ import Long from "long";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 const Phase = cockroach.server.serverpb.ActiveQuery.Phase;
 import { util } from "protobufjs";
+import { defaultFilters, Filters } from "../queryFilter";
 import {
   CancelQueryRequestMessage,
   CancelSessionRequestMessage,
@@ -142,7 +143,25 @@ const sessionsList: SessionInfo[] = [
   activeSession,
 ];
 
+export const nodeRegions: { [nodeId: string]: string } = {
+  "1": "gcp-us-east1",
+  "2": "gcp-us-east1",
+  "3": "gcp-us-west1",
+  "4": "gcp-europe-west1",
+};
+
+export const filters: Filters = {
+  app: "",
+  timeNumber: "0",
+  timeUnit: "seconds",
+  regions: "",
+  nodes: "",
+};
+
 export const sessionsPagePropsFixture: SessionsPageProps = {
+  filters: defaultFilters,
+  isTenant: false,
+  nodeRegions: nodeRegions,
   history,
   location: {
     pathname: "/sessions",
@@ -162,13 +181,17 @@ export const sessionsPagePropsFixture: SessionsPageProps = {
     ascending: false,
     columnTitle: "statementAge",
   },
+  columns: null,
   refreshSessions: () => {},
   cancelSession: (req: CancelSessionRequestMessage) => {},
   cancelQuery: (req: CancelQueryRequestMessage) => {},
   onSortingChange: () => {},
 };
 
 export const sessionsPagePropsEmptyFixture: SessionsPageProps = {
+  filters: defaultFilters,
+  isTenant: false,
+  nodeRegions: nodeRegions,
   history,
   location: {
     pathname: "/sessions",
@@ -188,6 +211,7 @@ export const sessionsPagePropsEmptyFixture: SessionsPageProps = {
     ascending: false,
     columnTitle: "statementAge",
   },
+  columns: null,
   refreshSessions: () => {},
   cancelSession: (req: CancelSessionRequestMessage) => {},
   cancelQuery: (req: CancelQueryRequestMessage) => {},