ui: ui updates to Sessions page

This commit introduces ui fixes on Session and Session Details page: - Show all columns by default - Update actions dropdown from Terminate to Cancel - Update Cancel Statement and Cancel Sessions Modal to update from Terminate to Cancel and remove `?` - Update Cancel Statement success message to `Statement` - Update Cancel Query to Cancel Statement - Right align nodes with larger names - Update color and hover on Node link Partially addresses #77982 Release note: None
cockroachdb · Mar 18, 2022 · 297ab8a · 297ab8a
1 parent e0e6166
commit 297ab8a
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 33 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
@@ -179,7 +179,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
                   type="secondary"
                   size="small"
                 >
-                  Cancel query
+                  Cancel statement
                 </Button>
                 <Button
                   onClick={() => {

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetailsConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetailsConnected.tsx
@@ -43,13 +43,13 @@ export const SessionDetailsPageConnected = withRouter(
         analyticsActions.track({
           name: "Session Actions Clicked",
           page: "Sessions Details",
-          action: "Terminate Session",
+          action: "Cancel Session",
         }),
       onTerminateStatementClick: () =>
         analyticsActions.track({
           name: "Session Actions Clicked",
           page: "Sessions Details",
-          action: "Terminate Statement",
+          action: "Cancel Statement",
         }),
       onBackButtonClick: () =>
         analyticsActions.track({

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -328,7 +328,7 @@ export class SessionsPage extends React.Component<
 
     const isColumnSelected = (c: ColumnDescriptor<SessionInfo>) => {
       return (
-        (!userSelectedColumnsToShow && c.showByDefault) ||
+        (userSelectedColumnsToShow === null && c.showByDefault !== false) ||
         (userSelectedColumnsToShow &&
           userSelectedColumnsToShow.includes(c.name)) ||
         c.alwaysShow

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx
@@ -130,13 +130,13 @@ export const SessionsPageConnected = withRouter(
         analyticsActions.track({
           name: "Session Actions Clicked",
           page: "Sessions",
-          action: "Terminate Session",
+          action: "Cancel Session",
         }),
       onTerminateStatementClick: () =>
         analyticsActions.track({
           name: "Session Actions Clicked",
           page: "Sessions",
-          action: "Terminate Statement",
+          action: "Cancel Statement",
         }),
       onFilterChange: (value: Filters) => {
         dispatch(

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx
@@ -218,28 +218,28 @@ export function makeSessionsColumns(
       cell: ({ session }) => {
         const menuItems: DropdownItem[] = [
           {
-            value: "terminateStatement",
-            name: "Terminate Statement",
+            value: "cancelStatement",
+            name: "Cancel Statement",
             disabled: session.active_queries?.length === 0,
           },
           {
-            value: "terminateSession",
-            name: "Terminate Session",
+            value: "cancelSession",
+            name: "Cancel Session",
           },
         ];
 
         const onMenuItemChange = (
-          value: "terminateStatement" | "terminateSession",
+          value: "cancelStatement" | "cancelSession",
         ) => {
           switch (value) {
-            case "terminateSession":
+            case "cancelSession":
               onTerminateSessionClick && onTerminateSessionClick();
               terminateSessionRef?.current?.showModalFor({
                 session_id: session.id,
                 node_id: session.node_id.toString(),
               });
               break;
-            case "terminateStatement":
+            case "cancelStatement":
               if (session.active_queries?.length > 0) {
                 onTerminateStatementClick && onTerminateStatementClick();
                 terminateQueryRef?.current?.showModalFor({

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/terminateQueryModal.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/terminateQueryModal.tsx
@@ -56,10 +56,10 @@ const TerminateQueryModal = (
       onCancel={onCancelHandler}
       okText="Yes"
       cancelText="No"
-      title="Terminate the Statement?"
+      title="Cancel the Statement"
     >
       <Text>
-        Terminating a statement ends the statement, returning an error to the
+        Cancelling a statement ends the statement, returning an error to the
         session.
       </Text>
     </Modal>

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/terminateSessionModal.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/terminateSessionModal.tsx
@@ -57,10 +57,10 @@ const TerminateSessionModal = (
       onCancel={onCancelHandler}
       okText="Yes"
       cancelText="No"
-      title="Terminate the Session?"
+      title="Cancel the Session"
     >
       <Text>
-        Terminating a session ends the session, terminating its associated
+        Cancelling a session ends the session, cancelling its associated
         connection. The client that holds this session will receive a
         &quot;connection terminated&quot; event.
       </Text>

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.module.scss b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.module.scss
@@ -66,8 +66,10 @@
 }
 
 .node-link {
-  display: flex;
-  font-weight: $font-weight--bold;
-  line-height: $line-height--medium;
-  white-space: nowrap;
+  text-align: right;
+  color: $colors--primary-blue-3;
+  &:hover {
+    color: $colors--primary-blue-3;
+    text-decoration: underline;
+  }
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx
@@ -247,7 +247,7 @@ export const NodeLink = (props: {
   nodeNames?: NodeNames;
 }): React.ReactElement => (
   <Link to={`/node/${props.nodeId}`}>
-    <div className={cx("node-name-tooltip__info-icon")}>
+    <div className={cx("node-link")}>
       {props.nodeNames ? props.nodeNames[props.nodeId] : "N" + props.nodeId}
     </div>
   </Link>

diff --git a/pkg/ui/workspaces/cluster-ui/src/store/analytics/analytics.reducer.ts b/pkg/ui/workspaces/cluster-ui/src/store/analytics/analytics.reducer.ts
@@ -61,7 +61,7 @@ type SessionClicked = {
 type SessionActionsClicked = {
   name: "Session Actions Clicked";
   page: Page;
-  action: "Terminate Statement" | "Terminate Session";
+  action: "Cancel Statement" | "Cancel Session";
 };
 
 type FilterEvent = {

diff --git a/pkg/ui/workspaces/cluster-ui/src/store/notifications/notifications.sagas.ts b/pkg/ui/workspaces/cluster-ui/src/store/notifications/notifications.sagas.ts
@@ -40,30 +40,30 @@ export function* notifificationsSaga() {
   yield all([
     takeEvery(terminateQueryActions.terminateSessionCompleted, function*() {
       yield put(
-        notificationAction(NotificationType.Success, "Session terminated."),
+        notificationAction(NotificationType.Success, "Session cancelled."),
       );
     }),
 
     takeEvery(terminateQueryActions.terminateSessionFailed, function*() {
       yield put(
         notificationAction(
           NotificationType.Error,
-          "There was an error terminating the session",
+          "There was an error cancelling the session",
         ),
       );
     }),
 
     takeEvery(terminateQueryActions.terminateQueryCompleted, function*() {
       yield put(
-        notificationAction(NotificationType.Success, "Query terminated."),
+        notificationAction(NotificationType.Success, "Statement cancelled."),
       );
     }),
 
     takeEvery(terminateQueryActions.terminateQueryFailed, function*() {
       yield put(
         notificationAction(
           NotificationType.Error,
-          "There was an error terminating the query.",
+          "There was an error cancelling the statement.",
         ),
       );
     }),

diff --git a/pkg/ui/workspaces/db-console/src/redux/alerts.ts b/pkg/ui/workspaces/db-console/src/redux/alerts.ts
@@ -445,9 +445,9 @@ export const terminateSessionAlertSelector = createSelector(
     if (status === "FAILED") {
       return {
         level: AlertLevel.CRITICAL,
-        title: "There was an error terminating the session.",
+        title: "There was an error cancelling the session.",
         text:
-          "Please try activating again. If the problem continues please reach out to customer support.",
+          "Please try cancelling again. If the problem continues please reach out to customer support.",
         showAsAlert: true,
         dismiss: (dispatch: Dispatch<Action>) => {
           dispatch(terminateSessionAlertLocalSetting.set({ show: false }));
@@ -457,7 +457,7 @@ export const terminateSessionAlertSelector = createSelector(
     }
     return {
       level: AlertLevel.SUCCESS,
-      title: "Session terminated.",
+      title: "Session cancelled.",
       showAsAlert: true,
       autoClose: true,
       closable: false,
@@ -490,9 +490,9 @@ export const terminateQueryAlertSelector = createSelector(
     if (status === "FAILED") {
       return {
         level: AlertLevel.CRITICAL,
-        title: "There was an error terminating the query.",
+        title: "There was an error cancelling the statement.",
         text:
-          "Please try terminating again. If the problem continues please reach out to customer support.",
+          "Please try cancelling again. If the problem continues please reach out to customer support.",
         showAsAlert: true,
         dismiss: (dispatch: Dispatch<Action>) => {
           dispatch(terminateQueryAlertLocalSetting.set({ show: false }));
@@ -502,7 +502,7 @@ export const terminateQueryAlertSelector = createSelector(
     }
     return {
       level: AlertLevel.SUCCESS,
-      title: "Query terminated.",
+      title: "Statement cancelled.",
       showAsAlert: true,
       autoClose: true,
       closable: false,