PMM-11950 admin requests (#665)

* PMM-11950 fetch only needed requests

* PMM-11950 update panel: fetch if admin

* PMM-11950 UpdatePanel: use store

Author: fabio-silva

public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
+import { config } from '@grafana/runtime';
 import { Button, HorizontalGroup, Icon, Modal, useStyles2, useTheme2 } from '@grafana/ui';
-import { contextSrv } from 'app/core/services/context_srv';
 import {
   fetchServerInfoAction,
   fetchServerSaasHostAction,
@@ -18,6 +18,7 @@ import { useAppDispatch } from 'app/store/store';
 
 import { Telemetry } from '../../../ui-events/components/Telemetry';
 import usePerconaTour from '../../core/hooks/tour';
+import { isPmmAdmin } from '../../helpers/permissions';
 
 import { Messages } from './PerconaBootstrapper.messages';
 import { getStyles } from './PerconaBootstrapper.styles';
@@ -32,7 +33,8 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
   const [modalIsOpen, setModalIsOpen] = useState(true);
   const [showTour, setShowTour] = useState(false);
   const styles = useStyles2(getStyles);
-  const isLoggedIn = contextSrv.user.isSignedIn;
+  const { user } = config.bootData;
+  const { isSignedIn } = user;
   const theme = useTheme2();
 
   const dismissModal = () => {
@@ -73,28 +75,31 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
     };
 
     const bootstrap = async () => {
-      await getSettings();
+      if (isPmmAdmin(user)) {
+        await getSettings();
+        await dispatch(fetchUserStatusAction());
+        await dispatch(fetchAdvisors({ disableNotifications: true }));
+      }
+
       await getUserDetails();
-      await dispatch(fetchUserStatusAction());
       await dispatch(fetchServerInfoAction());
       await dispatch(fetchServerSaasHostAction());
-      await dispatch(fetchAdvisors({ disableNotifications: true }));
       onReady();
     };
 
-    if (isLoggedIn) {
+    if (isSignedIn) {
       bootstrap();
     } else {
       onReady();
     }
-  }, [dispatch, isLoggedIn, setSteps, onReady]);
+  }, [dispatch, isSignedIn, setSteps, onReady, user]);
 
   return (
     <>
-      {isLoggedIn && <Telemetry />}
+      {isSignedIn && <Telemetry />}
       <PerconaNavigation />
       <PerconaTourBootstrapper />
-      {isLoggedIn && showTour && (
+      {isSignedIn && showTour && (
         <Modal onDismiss={dismissModal} isOpen={modalIsOpen} title={Messages.title}>
           <div className={styles.iconContainer}>
             <Icon type="mono" name={theme.isLight ? 'pmm-logo-light' : 'pmm-logo'} className={styles.svg} />

public/app/plugins/panel/pmm-check/components/Failed/Failed.tsx

@@ -1,11 +1,13 @@
 import { cx } from '@emotion/css';
 import React, { FC, useCallback, useEffect, useState } from 'react';
 
+import { config } from '@grafana/runtime';
 import { Spinner, Tooltip, useStyles2 } from '@grafana/ui';
 import { CheckService } from 'app/percona/check/Check.service';
 import { FailedCheckSummary } from 'app/percona/check/types';
 import { getPerconaSettings, getPerconaUser } from 'app/percona/shared/core/selectors';
 import { logger } from 'app/percona/shared/helpers/logger';
+import { isPmmAdmin } from 'app/percona/shared/helpers/permissions';
 import { useSelector } from 'app/types';
 
 import { PMM_DATABASE_CHECKS_PANEL_URL, PMM_SETTINGS_URL } from '../../CheckPanel.constants';
@@ -35,7 +37,9 @@ export const Failed: FC = () => {
   }, []);
 
   useEffect(() => {
-    fetchAlerts();
+    if (isPmmAdmin(config.bootData.user)) {
+      fetchAlerts();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

public/app/plugins/panel/pmm-update/UpdatePanel.tsx

@@ -1,8 +1,8 @@
 import React, { FC, MouseEvent, useEffect, useState } from 'react';
 
 import { Button, IconName, Spinner } from '@grafana/ui';
-import { SettingsService } from 'app/percona/settings/Settings.service';
-import { logger } from 'app/percona/shared/helpers/logger';
+import { getPerconaUser, getPerconaSettings } from 'app/percona/shared/core/selectors';
+import { useSelector } from 'app/types';
 
 import { Messages } from './UpdatePanel.messages';
 import * as styles from './UpdatePanel.styles';
@@ -14,9 +14,8 @@ export const UpdatePanel: FC<{}> = () => {
   const [forceUpdate, setForceUpdate] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [updatesDisabled, setUpdatesDisabled] = useState(false);
-  const [isLoadingSettings, setLoadingSettings] = useState(true);
-  const [hasNoAccess, setHasNoAccess] = useState(false);
+  const { isAuthorized } = useSelector(getPerconaUser);
+  const { result: settings, loading: isLoadingSettings } = useSelector(getPerconaSettings);
   const [
     { installedVersionDetails, lastCheckDate, nextVersionDetails, isUpdateAvailable },
     fetchVersionErrorMessage,
@@ -27,25 +26,6 @@ export const UpdatePanel: FC<{}> = () => {
   const [output, updateErrorMessage, isUpdated, updateFailed, launchUpdate] = usePerformUpdate();
   const isLoading = isLoadingVersionDetails || isLoadingSettings;
 
-  const getSettings = async () => {
-    setLoadingSettings(true);
-
-    try {
-      const { updatesDisabled } = await SettingsService.getSettings(undefined, true);
-
-      setUpdatesDisabled(!!updatesDisabled);
-    } catch (e) {
-      // @ts-ignore
-      if (e.response?.status === 401) {
-        setHasNoAccess(true);
-      }
-
-      logger.error(e);
-    }
-
-    setLoadingSettings(false);
-  };
-
   const handleCheckForUpdates = (e: MouseEvent) => {
     if (e.altKey) {
       setForceUpdate(true);
@@ -54,10 +34,6 @@ export const UpdatePanel: FC<{}> = () => {
     getCurrentVersionDetails({ force: true });
   };
 
-  useEffect(() => {
-    getSettings();
-  }, []);
-
   useEffect(() => {
     setErrorMessage(fetchVersionErrorMessage || updateErrorMessage);
 
@@ -79,7 +55,7 @@ export const UpdatePanel: FC<{}> = () => {
     <>
       <div className={styles.panel}>
         <CurrentVersion installedVersionDetails={installedVersionDetails} />
-        {isUpdateAvailable && !isDefaultView && !updatesDisabled && !hasNoAccess && !isLoading && isOnline ? (
+        {isUpdateAvailable && !isDefaultView && !settings?.updatesDisabled && isAuthorized && !isLoading && isOnline ? (
           <AvailableUpdate nextVersionDetails={nextVersionDetails} />
         ) : null}
         {isLoading ? (
@@ -88,7 +64,7 @@ export const UpdatePanel: FC<{}> = () => {
           </div>
         ) : (
           <>
-            {(isUpdateAvailable || forceUpdate) && !updatesDisabled && !hasNoAccess && isOnline ? (
+            {(isUpdateAvailable || forceUpdate) && !settings?.updatesDisabled && isAuthorized && isOnline ? (
               <div className={styles.middleSectionWrapper}>
                 {/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */}
                 <Button onClick={handleUpdate} icon={'fa fa-download' as IconName} variant="secondary">
@@ -98,15 +74,15 @@ export const UpdatePanel: FC<{}> = () => {
             ) : (
               <InfoBox
                 upToDate={!isDefaultView && !forceUpdate}
-                hasNoAccess={hasNoAccess}
-                updatesDisabled={updatesDisabled}
+                hasNoAccess={!isAuthorized}
+                updatesDisabled={settings?.updatesDisabled}
                 isOnline={isOnline}
               />
             )}
           </>
         )}
         <LastCheck
-          disabled={isLoading || updatesDisabled || !isOnline}
+          disabled={isLoading || settings?.updatesDisabled || !isOnline}
           onCheckForUpdates={handleCheckForUpdates}
           lastCheckDate={lastCheckDate}
         />