Merge #70955

70955: cluster-ui: hide terminate session / query buttons r=matthewtodd a=matthewtodd Temporarily mitigates #70832 Currently, these buttons do not work for tenant clusters, both because of a redux oversight and because the we still need to build out the endpoints they would hit in the tenant status server. Until we can get to that work, let's just turn them off. Release justification: Category 2: Bug fixes and low-risk updates to new functionality. Release note (ui): The terminate session and terminate query buttons have been temporarily disabled in the cluster ui. Co-authored-by: Matthew Todd <[email protected]>
cockroachdb · Oct 1, 2021 · 6961f28 · 6961f28
2 parents a3ba197 + c7bfb49
commit 6961f28
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 62 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
@@ -64,6 +64,7 @@ export interface OwnProps {
   cancelQuery: (payload: ICancelQueryRequest) => void;
   uiConfig?: UIConfigState["pages"]["sessionDetails"];
   isTenant?: UIConfigState["isTenant"];
+  isCloud?: boolean;
   onBackButtonClick?: () => void;
   onTerminateSessionClick?: () => void;
   onTerminateStatementClick?: () => void;
@@ -136,11 +137,12 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
       sessionError,
       cancelSession,
       cancelQuery,
+      isCloud,
       onTerminateSessionClick,
       onTerminateStatementClick,
     } = this.props;
     const session = this.props.session?.session;
-    const showActionButtons = !!session && !sessionError;
+    const showActionButtons = !!session && !sessionError && !isCloud;
     return (
       <div className={cx("sessions-details")}>
         <Helmet title={`Details | ${sessionID} | Sessions`} />

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetailsConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetailsConnected.tsx
@@ -32,6 +32,7 @@ export const SessionDetailsPageConnected = withRouter(
       sessionError: state.adminUI.sessions.lastError,
       uiConfig: selectSessionDetailsUiConfig(state),
       isTenant: selectIsTenant(state),
+      isCloud: true,
     }),
     {
       refreshSessions: sessionsActions.refresh,

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -57,6 +57,7 @@ export interface OwnProps {
   refreshSessions: () => void;
   cancelSession: (payload: ICancelSessionRequest) => void;
   cancelQuery: (payload: ICancelQueryRequest) => void;
+  isCloud?: boolean;
   onPageChanged?: (newPage: number) => void;
   onSortingChange?: (columnName: string) => void;
   onSessionClick?: () => void;
@@ -191,6 +192,7 @@ export class SessionsPage extends React.Component<
             columns={makeSessionsColumns(
               this.terminateSessionRef,
               this.terminateQueryRef,
+              this.props.isCloud,
               this.props.onSessionClick,
               this.props.onTerminateStatementClick,
               this.props.onTerminateSessionClick,

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx
@@ -41,6 +41,7 @@ export const SessionsPageConnected = withRouter(
     (state: AppState, props: RouteComponentProps) => ({
       sessions: selectSessions(state),
       sessionsError: state.adminUI.sessions.lastError,
+      isCloud: true,
     }),
     (dispatch: Dispatch) => ({
       refreshSessions: () => dispatch(sessionsActions.refresh()),

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx
@@ -97,11 +97,12 @@ const AgeLabel = (props: { start: Moment; thingName: string }) => {
 export function makeSessionsColumns(
   terminateSessionRef?: React.RefObject<TerminateSessionModalRef>,
   terminateQueryRef?: React.RefObject<TerminateQueryModalRef>,
+  isCloud?: boolean,
   onSessionClick?: () => void,
   onTerminateSessionClick?: () => void,
   onTerminateStatementClick?: () => void,
 ): ColumnDescriptor<SessionInfo>[] {
-  return [
+  const columns: ColumnDescriptor<SessionInfo>[] = [
     {
       name: "sessionAge",
       title: SessionTableTitle.sessionAge,
@@ -168,67 +169,70 @@ export function makeSessionsColumns(
         return shortStatement(summary, stmt);
       },
     },
-    {
-      name: "actions",
-      title: SessionTableTitle.actions,
-      className: cx("cl-table__col-session-actions"),
-      titleAlign: "right",
-      cell: ({ session }) => {
-        const menuItems: DropdownItem[] = [
-          {
-            value: "terminateStatement",
-            name: "Terminate Statement",
-            disabled: session.active_queries?.length === 0,
-          },
-          {
-            value: "terminateSession",
-            name: "Terminate Session",
-          },
-        ];
-
-        const onMenuItemChange = (
-          value: "terminateStatement" | "terminateSession",
-        ) => {
-          switch (value) {
-            case "terminateSession":
-              onTerminateSessionClick && onTerminateSessionClick();
-              terminateSessionRef?.current?.showModalFor({
-                session_id: session.id,
+  ];
+
+  const actions: ColumnDescriptor<SessionInfo> = {
+    name: "actions",
+    title: SessionTableTitle.actions,
+    className: cx("cl-table__col-session-actions"),
+    titleAlign: "right",
+    cell: ({ session }) => {
+      const menuItems: DropdownItem[] = [
+        {
+          value: "terminateStatement",
+          name: "Terminate Statement",
+          disabled: session.active_queries?.length === 0,
+        },
+        {
+          value: "terminateSession",
+          name: "Terminate Session",
+        },
+      ];
+
+      const onMenuItemChange = (
+        value: "terminateStatement" | "terminateSession",
+      ) => {
+        switch (value) {
+          case "terminateSession":
+            onTerminateSessionClick && onTerminateSessionClick();
+            terminateSessionRef?.current?.showModalFor({
+              session_id: session.id,
+              node_id: session.node_id.toString(),
+            });
+            break;
+          case "terminateStatement":
+            if (session.active_queries?.length > 0) {
+              onTerminateStatementClick && onTerminateStatementClick();
+              terminateQueryRef?.current?.showModalFor({
+                query_id: session.active_queries[0].id,
                 node_id: session.node_id.toString(),
               });
-              break;
-            case "terminateStatement":
-              if (session.active_queries?.length > 0) {
-                onTerminateStatementClick && onTerminateStatementClick();
-                terminateQueryRef?.current?.showModalFor({
-                  query_id: session.active_queries[0].id,
-                  node_id: session.node_id.toString(),
-                });
-              }
-              break;
-            default:
-              break;
-          }
-        };
-
-        const renderDropdownToggleButton: JSX.Element = (
-          <>
-            <Button type="secondary" size="small">
-              <Icon type="ellipsis" />
-            </Button>
-          </>
-        );
-
-        return (
-          <Dropdown
-            items={menuItems}
-            customToggleButton={renderDropdownToggleButton}
-            onChange={onMenuItemChange}
-            className={cx("session-action--dropdown")}
-            menuPosition="right"
-          />
-        );
-      },
+            }
+            break;
+          default:
+            break;
+        }
+      };
+
+      const renderDropdownToggleButton: JSX.Element = (
+        <>
+          <Button type="secondary" size="small">
+            <Icon type="ellipsis" />
+          </Button>
+        </>
+      );
+
+      return (
+        <Dropdown
+          items={menuItems}
+          customToggleButton={renderDropdownToggleButton}
+          onChange={onMenuItemChange}
+          className={cx("session-action--dropdown")}
+          menuPosition="right"
+        />
+      );
     },
-  ];
+  };
+
+  return isCloud ? columns : columns.concat([actions]);
 }