ui: hide reset options for non-admins

Previously, we were showing reset sql stats and reset index stats options for all users. If a non-admin user tried to reset, it wasn't doing the reset as expected, but no message was being displayed. This commit now hides these options for non-admin so it's no longer confusing to see the options but not being able to use it. Fixes cockroachdb#95213 Release note (ui change): Remove `reset sql stats` and `reset index stats` from the Console when the user is a non-admin.
maryliag · Jan 17, 2023 · 422176b · 422176b
1 parent 0efbdb0
commit 422176b
Show file tree

Hide file tree

Showing 20 changed files with 120 additions and 79 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.stories.tsx
@@ -66,6 +66,7 @@ const withLoadingIndicator: DatabaseTablePageProps = {
   refreshIndexStats: () => {},
   resetIndexUsageStats: () => {},
   refreshSettings: () => {},
+  refreshUserSQLRoles: () => {},
 };
 
 const name = randomName();
@@ -167,6 +168,7 @@ const withData: DatabaseTablePageProps = {
   refreshIndexStats: () => {},
   resetIndexUsageStats: () => {},
   refreshSettings: () => {},
+  refreshUserSQLRoles: () => {},
 };
 
 storiesOf("Database Table Page", module)

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -53,6 +53,7 @@ import { Loading } from "../loading";
 import { CockroachCloudContext } from "../contexts";
 import IdxRecAction from "../insights/indexActionBtn";
 import { RecommendationType } from "../indexDetailsPage";
+import { UIConfigState } from "../store";
 
 const cx = classNames.bind(styles);
 const booleanSettingCx = classnames.bind(booleanSettingStyles);
@@ -108,6 +109,7 @@ export interface DatabaseTablePageData {
   indexStats: DatabaseTablePageIndexStats;
   showNodeRegionsSection?: boolean;
   automaticStatsCollectionEnabled?: boolean;
+  hasAdminRole?: UIConfigState["hasAdminRole"];
 }
 
 export interface DatabaseTablePageDataDetails {
@@ -166,6 +168,7 @@ export interface DatabaseTablePageActions {
   refreshIndexStats?: (database: string, table: string) => void;
   resetIndexUsageStats?: (database: string, table: string) => void;
   refreshNodes?: () => void;
+  refreshUserSQLRoles: () => void;
 }
 
 export type DatabaseTablePageProps = DatabaseTablePageData &
@@ -247,6 +250,7 @@ export class DatabaseTablePage extends React.Component<
   }
 
   private refresh() {
+    this.props.refreshUserSQLRoles();
     if (this.props.refreshNodes != null) {
       this.props.refreshNodes();
     }
@@ -493,6 +497,7 @@ export class DatabaseTablePage extends React.Component<
   };
 
   render(): React.ReactElement {
+    const { hasAdminRole } = this.props;
     return (
       <div className="root table-area">
         <section className={baseHeadingClasses.wrapper}>
@@ -644,23 +649,25 @@ export class DatabaseTablePage extends React.Component<
                                 {this.getLastResetString()}
                               </div>
                             </Tooltip>
-                            <div>
-                              <a
-                                className={cx(
-                                  "action",
-                                  "separator",
-                                  "index-stats__reset-btn",
-                                )}
-                                onClick={() =>
-                                  this.props.resetIndexUsageStats(
-                                    this.props.databaseName,
-                                    this.props.name,
-                                  )
-                                }
-                              >
-                                Reset all index stats
-                              </a>
-                            </div>
+                            {hasAdminRole && (
+                              <div>
+                                <a
+                                  className={cx(
+                                    "action",
+                                    "separator",
+                                    "index-stats__reset-btn",
+                                  )}
+                                  onClick={() =>
+                                    this.props.resetIndexUsageStats(
+                                      this.props.databaseName,
+                                      this.props.name,
+                                    )
+                                  }
+                                >
+                                  Reset all index stats
+                                </a>
+                              </div>
+                            )}
                           </div>
                         </div>
                         <IndexUsageStatsTable

diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetails.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetails.selectors.ts
@@ -23,7 +23,7 @@ import {
 } from "../util";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { IndexDetailsPageData } from "./indexDetailsPage";
-import { selectIsTenant } from "../store/uiConfig";
+import { selectHasAdminRole, selectIsTenant } from "../store/uiConfig";
 import { BreadcrumbItem } from "../breadcrumbs";
 import { RecommendationType as RecType } from "./indexDetailsPage";
 const { RecommendationType } = cockroach.sql.IndexRecommendation;
@@ -39,7 +39,16 @@ export const selectIndexDetails = createSelector(
     getMatchParamByName(props.match, indexNameAttr),
   (state: AppState) => state.adminUI.indexStats.cachedData,
   (state: AppState) => selectIsTenant(state),
-  (database, schema, table, index, indexStats): IndexDetailsPageData => {
+  (state: AppState) => selectHasAdminRole(state),
+  (
+    database,
+    schema,
+    table,
+    index,
+    indexStats,
+    isTenant,
+    hasAdminRole,
+  ): IndexDetailsPageData => {
     const stats = indexStats[generateTableID(database, table)];
     const details = stats?.data?.statistics.filter(
       stat => stat.index_name === index, // index names must be unique for a table
@@ -70,6 +79,7 @@ export const selectIndexDetails = createSelector(
         table,
         index,
       ),
+      hasAdminRole: hasAdminRole,
       details: {
         loading: !!stats?.inFlight,
         loaded: !!stats?.valid,

diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsConnected.ts b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsConnected.ts
@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import { AppState } from "../store";
+import { AppState, uiConfigActions } from "../store";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { selectIndexDetails } from "./indexDetails.selectors";
 import { Dispatch } from "redux";
@@ -42,6 +42,7 @@ const mapDispatchToProps = (dispatch: Dispatch): IndexDetailPageActions => ({
     );
   },
   refreshNodes: () => dispatch(nodesActions.refresh()),
+  refreshUserSQLRoles: () => dispatch(uiConfigActions.refreshUserSQLRoles()),
 });
 
 export const ConnectedIndexDetailsPage = withRouter<any, any>(

diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.stories.tsx
@@ -55,6 +55,7 @@ const withData: IndexDetailsPageProps = {
   refreshIndexStats: () => {},
   resetIndexUsageStats: () => {},
   refreshNodes: () => {},
+  refreshUserSQLRoles: () => {},
 };
 
 storiesOf("Index Details Page", module)

diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx
@@ -11,7 +11,7 @@
 import React from "react";
 import classNames from "classnames/bind";
 import { SortSetting } from "src/sortedtable";
-
+import { UIConfigState } from "../store";
 import styles from "./indexDetailsPage.module.scss";
 import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses";
 import { CaretRight } from "../icon/caretRight";
@@ -58,6 +58,7 @@ export interface IndexDetailsPageData {
   indexName: string;
   details: IndexDetails;
   breadcrumbItems: BreadcrumbItem[];
+  hasAdminRole?: UIConfigState["hasAdminRole"];
 }
 
 interface IndexDetails {
@@ -81,6 +82,7 @@ export interface IndexDetailPageActions {
   refreshIndexStats?: (database: string, table: string) => void;
   resetIndexUsageStats?: (database: string, table: string) => void;
   refreshNodes?: () => void;
+  refreshUserSQLRoles: () => void;
 }
 
 export type IndexDetailsPageProps = IndexDetailsPageData &
@@ -113,6 +115,7 @@ export class IndexDetailsPage extends React.Component<
   }
 
   private refresh() {
+    this.props.refreshUserSQLRoles();
     if (this.props.refreshNodes != null) {
       this.props.refreshNodes();
     }
@@ -210,6 +213,8 @@ export class IndexDetailsPage extends React.Component<
   }
 
   render(): React.ReactElement {
+    const { hasAdminRole } = this.props;
+
     return (
       <div className={cx("page-container")}>
         <div className="root table-area">
@@ -235,23 +240,25 @@ export class IndexDetailsPage extends React.Component<
                   {this.getTimestampString(this.props.details.lastReset)}
                 </div>
               </Tooltip>
-              <div>
-                <a
-                  className={cx(
-                    "action",
-                    "separator",
-                    "index-stats__reset-btn",
-                  )}
-                  onClick={() =>
-                    this.props.resetIndexUsageStats(
-                      this.props.databaseName,
-                      this.props.tableName,
-                    )
-                  }
-                >
-                  Reset all index stats
-                </a>
-              </div>
+              {hasAdminRole && (
+                <div>
+                  <a
+                    className={cx(
+                      "action",
+                      "separator",
+                      "index-stats__reset-btn",
+                    )}
+                    onClick={() =>
+                      this.props.resetIndexUsageStats(
+                        this.props.databaseName,
+                        this.props.tableName,
+                      )
+                    }
+                  >
+                    Reset all index stats
+                  </a>
+                </div>
+              )}
             </div>
           </div>
           <section className={baseHeadingClasses.wrapper}>

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
@@ -100,10 +100,6 @@ export const MemoryUsageItem: React.FC<{
 export class SessionDetails extends React.Component<SessionDetailsProps> {
   terminateSessionRef: React.RefObject<TerminateSessionModalRef>;
   terminateQueryRef: React.RefObject<TerminateQueryModalRef>;
-  static defaultProps = {
-    uiConfig: { showGatewayNodeLink: true },
-    isTenant: false,
-  };
 
   componentDidMount(): void {
     if (!this.props.isTenant) {

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.tsx
@@ -117,9 +117,6 @@ export class DiagnosticsView extends React.Component<
   DiagnosticsViewProps,
   DiagnosticsViewState
 > {
-  static defaultProps: Partial<DiagnosticsViewProps> = {
-    showDiagnosticsViewLink: true,
-  };
   columns: ColumnsConfig<IStatementDiagnosticsReport> = [
     {
       key: "activatedOn",

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -210,15 +210,6 @@ export class StatementDetails extends React.Component<
     }
   }
 
-  static defaultProps: Partial<StatementDetailsProps> = {
-    onDiagnosticBundleDownload: _.noop,
-    uiConfig: {
-      showStatementDiagnosticsLink: true,
-    },
-    isTenant: false,
-    hasViewActivityRedactedRole: false,
-  };
-
   hasDiagnosticReports = (): boolean =>
     this.props.diagnosticsReports.length > 0;
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts
@@ -925,6 +925,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
   columns: null,
   isTenant: false,
   hasViewActivityRedactedRole: false,
+  hasAdminRole: true,
   dismissAlertMessage: noop,
   refreshStatementDiagnosticsRequests: noop,
   refreshStatements: noop,

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -137,6 +137,7 @@ export interface StatementsPageStateProps {
   search: string;
   isTenant?: UIConfigState["isTenant"];
   hasViewActivityRedactedRole?: UIConfigState["hasViewActivityRedactedRole"];
+  hasAdminRole?: UIConfigState["hasAdminRole"];
 }
 
 export interface StatementsPageState {
@@ -213,11 +214,6 @@ export class StatementsPage extends React.Component<
     }
   }
 
-  static defaultProps: Partial<StatementsPageProps> = {
-    isTenant: false,
-    hasViewActivityRedactedRole: false,
-  };
-
   getStateFromHistory = (): Partial<StatementsPageState> => {
     const {
       history,
@@ -673,6 +669,7 @@ export class StatementsPage extends React.Component<
       search,
       isTenant,
       nodeRegions,
+      hasAdminRole,
     } = this.props;
 
     const nodes = isTenant
@@ -728,14 +725,18 @@ export class StatementsPage extends React.Component<
               setTimeScale={this.changeTimeScale}
             />
           </PageConfigItem>
-          <PageConfigItem
-            className={`${commonStyles("separator")} ${cx("reset-btn-area")} `}
-          >
-            <ClearStats
-              resetSQLStats={this.resetSQLStats}
-              tooltipType="statement"
-            />
-          </PageConfigItem>
+          {hasAdminRole && (
+            <PageConfigItem
+              className={`${commonStyles("separator")} ${cx(
+                "reset-btn-area",
+              )} `}
+            >
+              <ClearStats
+                resetSQLStats={this.resetSQLStats}
+                tooltipType="statement"
+              />
+            </PageConfigItem>
+          )}
         </PageConfig>
         <div className={cx("table-area")}>
           <Loading

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx
@@ -39,6 +39,7 @@ import {
 import {
   selectIsTenant,
   selectHasViewActivityRedactedRole,
+  selectHasAdminRole,
 } from "../store/uiConfig";
 import { nodeRegionsByIDSelector } from "../store/nodes";
 import { StatementsRequest } from "src/api/statementsApi";
@@ -94,6 +95,7 @@ export const ConnectedStatementsPage = withRouter(
         filters: selectFilters(state),
         isTenant: selectIsTenant(state),
         hasViewActivityRedactedRole: selectHasViewActivityRedactedRole(state),
+        hasAdminRole: selectHasAdminRole(state),
         lastReset: selectLastReset(state),
         nodeRegions: selectIsTenant(state)
           ? {}

diff --git a/pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.reducer.ts b/pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.reducer.ts
@@ -18,6 +18,7 @@ export type UIConfigState = {
   isTenant: boolean;
   userSQLRoles: string[];
   hasViewActivityRedactedRole: boolean;
+  hasAdminRole: boolean;
   pages: {
     statementDetails: {
       showStatementDiagnosticsLink: boolean;
@@ -32,6 +33,7 @@ const initialState: UIConfigState = {
   isTenant: false,
   userSQLRoles: [],
   hasViewActivityRedactedRole: false,
+  hasAdminRole: false,
   pages: {
     statementDetails: {
       showStatementDiagnosticsLink: true,

diff --git a/pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.selector.ts b/pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.selector.ts
@@ -25,3 +25,7 @@ export const selectHasViewActivityRedactedRole = createSelector(
   selectUIConfig,
   uiConfig => uiConfig.userSQLRoles.includes("VIEWACTIVITYREDACTED"),
 );
+
+export const selectHasAdminRole = createSelector(selectUIConfig, uiConfig =>
+  uiConfig.userSQLRoles.includes("ADMIN"),
+);