RBAC fixes (#1030)

* rbac-fixes * [UI] EVEREST-1803 Monitoring unavailable in db details widget when specific rule is set #1018 Co-authored-by: Percona Platform Robot <[email protected]> * [UI] EVEREST-1781 Update message for empty state when user has no create permissions (#1035) * fix: update message for empty state when user has no create permissions * fix: add specific prop for create permission * [UI] EVEREST-1800 Fix display of Add DB button, redirect from /new if state if empty (#1036) * fix: show add button if user has permission for any db engine, redirect /new url if user if not being directed to it by a component * fix: change check for available engines * fix: missing namespaces polling (#1044) --------- Co-authored-by: Percona Platform Robot <[email protected]> Co-authored-by: Fábio Silva <[email protected]>
percona · Jan 31, 2025 · f703832 · f703832
1 parent 7f097f8
commit f703832
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 64 deletions.
diff --git a/ui/apps/everest/src/hooks/api/backup-storages/useBackupStorages.ts b/ui/apps/everest/src/hooks/api/backup-storages/useBackupStorages.ts
@@ -18,8 +18,6 @@ import {
   UseMutationOptions,
   useQueries,
   useQuery,
-  UseQueryOptions,
-  UseQueryResult,
 } from '@tanstack/react-query';
 import {
   createBackupStorageFn,
@@ -32,46 +30,31 @@ import {
   GetBackupStoragesPayload,
 } from 'shared-types/backupStorages.types';
 import { PerconaQueryOptions } from 'shared-types/query.types';
+import { useNamespaces } from '../namespaces';
 
 export const BACKUP_STORAGES_QUERY_KEY = 'backupStorages';
 
-export interface BackupStoragesForNamespaceResult {
-  namespace: string;
-  queryResult: UseQueryResult<BackupStorage[], unknown>;
-}
+export type BackupStoragesForNamespaceResult =
+  PerconaQueryOptions<GetBackupStoragesPayload>;
 
-export const useBackupStorages = (
-  queriesParams: Array<{
-    namespace: string;
-    options?: PerconaQueryOptions<
-      GetBackupStoragesPayload,
-      unknown,
-      BackupStorage[]
-    >;
-  }>
-) => {
-  const queries = queriesParams.map<
-    UseQueryOptions<GetBackupStoragesPayload, unknown, BackupStorage[]>
-  >(({ namespace, options }) => {
+export const useBackupStorages = () => {
+  const { data: namespaces = [] } = useNamespaces({
+    refetchInterval: 5 * 1000,
+  });
+  const queries = namespaces.map((namespace) => {
     return {
       queryKey: [BACKUP_STORAGES_QUERY_KEY, namespace],
       retry: false,
       queryFn: () => getBackupStoragesFn(namespace),
       refetchInterval: 5 * 1000,
-      ...options,
     };
   });
 
-  const queryResults = useQueries({ queries });
-
-  const results: BackupStoragesForNamespaceResult[] = queryResults.map(
-    (item, i) => ({
-      namespace: queriesParams[i].namespace,
-      queryResult: item,
-    })
-  );
+  const queryResults = useQueries({
+    queries,
+  });
 
-  return results;
+  return queryResults;
 };
 
 export const useBackupStoragesByNamespace = (

diff --git a/ui/apps/everest/src/hooks/api/monitoring/useMonitoringInstancesList.ts b/ui/apps/everest/src/hooks/api/monitoring/useMonitoringInstancesList.ts
@@ -18,6 +18,7 @@ import {
   UseQueryResult,
   useMutation,
   useQueries,
+  useQuery,
 } from '@tanstack/react-query';
 import {
   getMonitoringInstancesFn,
@@ -78,6 +79,15 @@ export const useMonitoringInstancesList = (
   return results;
 };
 
+export const useMonitoringInstancesForNamespace = (namespace: string) => {
+  return useQuery({
+    queryKey: [MONITORING_INSTANCES_QUERY_KEY, namespace],
+    retry: false,
+    queryFn: () => getMonitoringInstancesFn(namespace),
+    refetchInterval: 5 * 1000,
+  });
+};
+
 export const useCreateMonitoringInstance = (
   options?: UseMutationOptions<
     MonitoringInstance,

diff --git a/ui/apps/everest/src/pages/common/empty-state/databases/index.tsx b/ui/apps/everest/src/pages/common/empty-state/databases/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Typography } from '@mui/material';
+import { Box, Divider, Link, Typography } from '@mui/material';
 import { EmptyStateIcon } from '@percona/ui-lib';
 import { Messages } from './messages';
 import CreateDbButton from 'pages/databases/create-db-button/create-db-button';
@@ -7,8 +7,10 @@ import { ContactSupportLink } from '../ContactSupportLink';
 
 export const EmptyStateDatabases = ({
   showCreationButton,
+  hasCreatePermission,
 }: {
   showCreationButton: boolean;
+  hasCreatePermission: boolean;
 }) => {
   return (
     <>
@@ -22,7 +24,24 @@ export const EmptyStateDatabases = ({
         <EmptyStateIcon w="60px" h="60px" />
         <Box sx={centeredContainerStyle}>
           <Typography>{Messages.noDbClusters}</Typography>
-          <Typography> {Messages.createToStart}</Typography>
+          {hasCreatePermission ? (
+            <Typography> {Messages.createToStart} </Typography>
+          ) : (
+            <>
+              <Typography>{Messages.noPermissions}</Typography>
+              <Typography>
+                Click{' '}
+                <Link
+                  target="_blank"
+                  rel="noopener"
+                  href="https://docs.percona.com/everest/administer/rbac.html"
+                >
+                  here
+                </Link>{' '}
+                to learn how to get permissions.
+              </Typography>
+            </>
+          )}
         </Box>
         {showCreationButton && <CreateDbButton />}
         <Divider sx={{ width: '30%', marginTop: '10px' }} />

diff --git a/ui/apps/everest/src/pages/common/empty-state/databases/messages.ts b/ui/apps/everest/src/pages/common/empty-state/databases/messages.ts
@@ -3,4 +3,5 @@ export const Messages = {
   createToStart: 'Create one to get started.',
   create: 'Create Database',
   contactSupport: 'Contact Percona Support',
+  noPermissions: 'You lack permission to create a database cluster.',
 };
diff --git a/ui/apps/everest/src/pages/database-form/database-form.tsx b/ui/apps/everest/src/pages/database-form/database-form.tsx
@@ -161,6 +161,12 @@ export const DatabasePage = () => {
     }
   }, [defaultValues, isDirty, reset, mode]);
 
+  useEffect(() => {
+    if (!location.state) {
+      navigate('/');
+    }
+  }, []);
+
   return formSubmitted ? (
     <ConfirmationScreen />
   ) : (

diff --git a/ui/apps/everest/src/pages/databases/DbClusterView.tsx b/ui/apps/everest/src/pages/databases/DbClusterView.tsx
@@ -16,7 +16,10 @@
 import { Box, Stack } from '@mui/material';
 import { Table } from '@percona/ui-lib';
 import StatusField from 'components/status-field';
-import { useNamespaces } from 'hooks/api/namespaces/useNamespaces';
+import {
+  useDBEnginesForNamespaces,
+  useNamespaces,
+} from 'hooks/api/namespaces/useNamespaces';
 import { type MRT_ColumnDef } from 'material-react-table';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -46,11 +49,14 @@ export const DbClusterView = () => {
   );
 
   const navigate = useNavigate();
+  const { results: dbEngines } = useDBEnginesForNamespaces();
+  const hasAvailableDbEngines = dbEngines.some(
+    (obj) => (obj?.data || []).length > 0
+  );
 
   const { canCreate } = useNamespacePermissionsForResource('database-clusters');
-  const { canRead } = useNamespacePermissionsForResource('database-engines');
 
-  const canAddCluster = canCreate.length > 0 && canRead.length > 0;
+  const canAddCluster = canCreate.length > 0 && hasAvailableDbEngines;
   const dbClustersResults = useDBClustersForNamespaces(
     namespaces.map((ns) => ({
       namespace: ns,
@@ -155,7 +161,10 @@ export const DbClusterView = () => {
           tableName="dbClusterView"
           emptyState={
             namespaces.length > 0 ? (
-              <EmptyStateDatabases showCreationButton={canAddCluster} />
+              <EmptyStateDatabases
+                showCreationButton={canAddCluster}
+                hasCreatePermission={canAddCluster}
+              />
             ) : (
               <EmptyStateNamespaces />
             )

diff --git a/...pps/everest/src/pages/db-cluster-details/cluster-overview/cards/db-details/db-details.tsx b/...pps/everest/src/pages/db-cluster-details/cluster-overview/cards/db-details/db-details.tsx
@@ -21,8 +21,9 @@ import { BasicInformationSection } from './basic-information/basic';
 import { ConnectionDetails } from './connection-details';
 import { MonitoringDetails } from './monitoring/monitoring';
 import { AdvancedConfiguration } from './advanced-configuration';
-import { DbClusterContext } from 'pages/db-cluster-details/dbCluster.context';
-import { useContext } from 'react';
+import { useMemo } from 'react';
+import { useMonitoringInstancesForNamespace } from 'hooks';
+import { useRBACPermissions } from 'hooks/rbac';
 
 export const DbDetails = ({
   loading,
@@ -40,7 +41,22 @@ export const DbDetails = ({
   externalAccess,
   parameters,
 }: DatabaseDetailsOverviewCardProps) => {
-  const { canReadMonitoring } = useContext(DbClusterContext);
+  const { data: monitoringInstances } =
+    useMonitoringInstancesForNamespace(namespace);
+
+  const monitoringInstancesToCheck = useMemo(
+    () =>
+      (monitoringInstances || []).map(
+        (monitoringInstance) =>
+          `${monitoringInstance.namespace}/${monitoringInstance.name}`
+      ),
+    [monitoringInstances]
+  );
+
+  const { canRead: canReadMonitoring } = useRBACPermissions(
+    'monitoring-instances',
+    monitoringInstancesToCheck.length > 0 ? monitoringInstancesToCheck : '*'
+  );
 
   return (
     <OverviewCard

diff --git a/.../src/pages/db-cluster-details/cluster-overview/cards/db-details/monitoring/monitoring.tsx b/.../src/pages/db-cluster-details/cluster-overview/cards/db-details/monitoring/monitoring.tsx
@@ -28,13 +28,12 @@ export const MonitoringDetails = ({
   monitoring,
 }: MonitoringConfigurationOverviewCardProps) => {
   const [openEditModal, setOpenEditModal] = useState(false);
-  const { dbCluster, canUpdateDb, canUpdateMonitoring } =
-    useContext(DbClusterContext);
+  const { dbCluster, canUpdateDb } = useContext(DbClusterContext);
   const restoringOrDeleting = [
     DbClusterStatus.restoring,
     DbClusterStatus.deleting,
   ].includes(dbCluster?.status?.status!);
-  const editable = canUpdateDb && !restoringOrDeleting && canUpdateMonitoring;
+  const editable = canUpdateDb && !restoringOrDeleting;
 
   const { mutate: updateDbClusterMonitoring } = useUpdateDbClusterMonitoring();
 

diff --git a/ui/apps/everest/src/pages/db-cluster-details/dbCluster.context.tsx b/ui/apps/everest/src/pages/db-cluster-details/dbCluster.context.tsx
@@ -13,8 +13,6 @@ export const DbClusterContext = createContext<DbClusterContextProps>({
   dbCluster: {} as DbCluster,
   isLoading: false,
   canReadBackups: false,
-  canReadMonitoring: false,
-  canUpdateMonitoring: false,
   canReadCredentials: false,
   canUpdateDb: false,
   clusterDeleted: false,
@@ -59,8 +57,6 @@ export const DbClusterContextProvider = ({
     'database-cluster-backups',
     `${namespace}/${dbClusterName}`
   );
-  const { canRead: canReadMonitoring, canUpdate: canUpdateMonitoring } =
-    useRBACPermissions('monitoring-instances', `${namespace}/*`);
   const { canRead: canReadCredentials } = useRBACPermissions(
     'database-cluster-credentials',
     `${namespace}/${dbClusterName}`
@@ -97,8 +93,6 @@ export const DbClusterContextProvider = ({
         dbCluster,
         isLoading,
         canReadBackups,
-        canReadMonitoring,
-        canUpdateMonitoring,
         canUpdateDb,
         canReadCredentials,
         clusterDeleted,

diff --git a/ui/apps/everest/src/pages/db-cluster-details/dbCluster.context.types.ts b/ui/apps/everest/src/pages/db-cluster-details/dbCluster.context.types.ts
@@ -5,8 +5,6 @@ export interface DbClusterContextProps {
   dbCluster?: DbCluster;
   isLoading: boolean;
   canReadBackups: boolean;
-  canReadMonitoring: boolean;
-  canUpdateMonitoring: boolean;
   canUpdateDb: boolean;
   canReadCredentials: boolean;
   queryResult: QueryObserverResult<DbCluster, unknown>;

diff --git a/ui/apps/everest/src/pages/settings/storage-locations/storage-locations.tsx b/ui/apps/everest/src/pages/settings/storage-locations/storage-locations.tsx
@@ -29,23 +29,17 @@ import {
   convertBackupStoragesPayloadToTableFormat,
   convertStoragesType,
 } from './storage-locations.utils';
-import { useNamespaces } from 'hooks/api/namespaces';
 import { useNamespacePermissionsForResource } from 'hooks/rbac';
 import TableActionsMenu from '../../../components/table-actions-menu';
 import { StorageLocationsActionButtons } from './storage-locations-menu-actions';
 
 export const StorageLocations = () => {
   const queryClient = useQueryClient();
   const { canCreate } = useNamespacePermissionsForResource('backup-storages');
-  const { data: namespaces = [] } = useNamespaces();
-  const backupStorages = useBackupStorages(
-    namespaces.map((namespace) => ({
-      namespace: namespace,
-    }))
-  );
+  const backupStorages = useBackupStorages();
 
   const backupStoragesLoading = backupStorages.some(
-    (result) => result.queryResult.isLoading
+    (result) => result.isLoading
   );
 
   const tableData = useMemo(

diff --git a/ui/apps/everest/src/pages/settings/storage-locations/storage-locations.utils.ts b/ui/apps/everest/src/pages/settings/storage-locations/storage-locations.utils.ts
@@ -1,6 +1,9 @@
-import { StorageType } from 'shared-types/backupStorages.types';
+import { UseQueryResult } from '@tanstack/react-query';
+import {
+  GetBackupStoragesPayload,
+  StorageType,
+} from 'shared-types/backupStorages.types';
 import { Messages } from './storage-locations.messages';
-import { BackupStoragesForNamespaceResult } from 'hooks/api/backup-storages/useBackupStorages';
 import { BackupStorageTableElement } from './storage-locations.types';
 
 export const convertStoragesType = (value: StorageType) =>
@@ -11,14 +14,13 @@ export const convertStoragesType = (value: StorageType) =>
   })[value];
 
 export const convertBackupStoragesPayloadToTableFormat = (
-  data: BackupStoragesForNamespaceResult[]
+  data: UseQueryResult<GetBackupStoragesPayload, Error>[]
 ): BackupStorageTableElement[] => {
   const result: BackupStorageTableElement[] = [];
   data.forEach((item) => {
-    const tableDataForNamespace: BackupStorageTableElement[] = item?.queryResult
-      ?.isSuccess
-      ? item.queryResult?.data.map((storage) => ({
-          namespace: item.namespace,
+    const tableDataForNamespace: BackupStorageTableElement[] = item.isSuccess
+      ? item.data.map((storage) => ({
+          namespace: storage.namespace,
           name: storage.name,
           type: storage.type,
           bucketName: storage.bucketName,