[PLAT-14119][PLAT-14591][PLAT-14824][PLAT-14849][PLAT-14725][PLAT-147…

…47] : Audit Log and PG Compatibility fixes and improvements Summary: **Audit Log** [PLAT-14119] - Add a warning message on the UI while updating 'ysql_pg_conf_csv' gflag. [PLAT-14591] - Remove MISC_SET as an option from the UI. [PLAT-14824] - Integrate RBAC for DB Audit log feature. [PLAT-14849] - Make the region mandate while creating AWS Cloudwatch telemetry provider. **PG Compatibility** [PLAT-14725] - With GFlag Groups applied, UI shows wrong value of GFlags part of the group. [PLAT-14747] - Display tooltip when Edit Postgres Compatibility is disabled due to asymmetric clusters. Test Plan: Tested manually Reviewers: kkannan Reviewed By: kkannan Subscribers: ui, yugaware Differential Revision: https://phorge.dev.yugabyte.com/D37087
yugabyte · Aug 6, 2024 · a2dfb8c · a2dfb8c
1 parent f439c8a
commit a2dfb8c
Show file tree

Hide file tree

Showing 14 changed files with 163 additions and 40 deletions.
diff --git a/managed/ui/src/components/universes/UniverseDetail/UniverseDetail.js b/managed/ui/src/components/universes/UniverseDetail/UniverseDetail.js
@@ -1127,18 +1127,29 @@ class UniverseDetail extends Component {
                       }}
                       isControl
                     >
-                      <YBMenuItem
-                        disabled={isEditGFlagsDisabled}
-                        onClick={showPGCompatibilityModal}
-                        availability={getFeatureState(
-                          currentCustomer.data.features,
-                          'universes.details.overview.editGFlags'
-                        )}
+                      <YBTooltip
+                        title={
+                          hasAsymmetricPrimaryCluster
+                            ? 'Editing gflags for asymmetric clusters is not supported from the UI. Please use the YBA API to edit instead.'
+                            : ''
+                        }
+                        placement="left"
                       >
-                        <YBLabelWithIcon icon="fa fa-retweet fa-fw">
-                          Edit Postgres Compatibility
-                        </YBLabelWithIcon>
-                      </YBMenuItem>
+                        <span>
+                          <YBMenuItem
+                            disabled={isEditGFlagsDisabled}
+                            onClick={showPGCompatibilityModal}
+                            availability={getFeatureState(
+                              currentCustomer.data.features,
+                              'universes.details.overview.editGFlags'
+                            )}
+                          >
+                            <YBLabelWithIcon icon="fa fa-retweet fa-fw">
+                              Edit Postgres Compatibility
+                            </YBLabelWithIcon>
+                          </YBMenuItem>
+                        </span>
+                      </YBTooltip>
                     </RbacValidator>
                   )}
                   {!universePaused && isConfigureYSQLEnabled && (
@@ -1442,7 +1453,10 @@ class UniverseDetail extends Component {
             shouldDisplayTaskButton={true}
           />
         </div>
-        <TaskDetailBanner taskUUID={currentUniverse.data.universeDetails.updatingTaskUUID} universeUUID={currentUniverse.data.universeUUID}/>
+        <TaskDetailBanner
+          taskUUID={currentUniverse.data.universeDetails.updatingTaskUUID}
+          universeUUID={currentUniverse.data.universeUUID}
+        />
         <RollingUpgradeFormContainer
           modalVisible={
             showModal &&
@@ -1588,12 +1602,7 @@ class UniverseDetail extends Component {
             id={'universe-tab-panel'}
             className={'universe-detail'}
           >
-            {
-              [
-                ...tabElements,
-                <div title={actionMenuButtons} />
-              ]
-            }
+            {[...tabElements, <div title={actionMenuButtons} />]}
           </YBTabsWithLinksPanel>
         </Measure>
       </Grid>

diff --git a/managed/ui/src/components/universes/UniverseForm/AddGFlag.js b/managed/ui/src/components/universes/UniverseForm/AddGFlag.js
@@ -18,8 +18,17 @@ import WarningIcon from '../../../redesign/assets/warning-triangle.svg';
 // Styles
 import './UniverseForm.scss';
 
+const AUDIT_LOG_FLAG = 'ysql_pg_conf_csv';
+
 const AddGFlag = ({ formProps, gFlagProps, updateJWKSDialogStatus, disabledFlags = {} }) => {
-  const { mode, server, dbVersion, existingFlags, isGFlagMultilineConfEnabled } = gFlagProps;
+  const {
+    mode,
+    server,
+    dbVersion,
+    existingFlags,
+    isGFlagMultilineConfEnabled,
+    editMode
+  } = gFlagProps;
   const [searchVal, setSearchVal] = useState('');
   const [isLoading, setLoader] = useState(true);
   const [toggleMostUsed, setToggleMostUsed] = useState(true);
@@ -35,10 +44,13 @@ const AddGFlag = ({ formProps, gFlagProps, updateJWKSDialogStatus, disabledFlags
 
   const handleFlagSelect = (flag) => {
     let flagvalue = null;
-    const existingFlagValue = get(
-      existingFlags.find((f) => f.Name === flag?.name),
-      server
-    );
+    const disabledFlagValue = get(disabledFlags, flag?.name, null);
+    const existingFlagValue =
+      disabledFlagValue ??
+      get(
+        existingFlags.find((f) => f.Name === flag?.name),
+        server
+      );
     // eslint-disable-next-line no-prototype-builtins
     const defaultKey = flag?.hasOwnProperty('current') ? 'current' : 'default'; // Guard condition to handle inconstintency in gflag metadata
     if (flag?.type === 'bool')
@@ -144,6 +156,17 @@ const AddGFlag = ({ formProps, gFlagProps, updateJWKSDialogStatus, disabledFlags
     </div>
   );
 
+  const auditLogBanner = (
+    <div className="pg-banner">
+      <img alt="Warning" src={WarningIcon} width="24" />
+      &nbsp;
+      <span>
+        Please be careful when modifying the &quot;pgaudit&quot; params if DB audit logging is
+        enabled on this universe.
+      </span>
+    </div>
+  );
+
   const documentationLink = (
     <Row className="mt-16">
       <img alt="Book" src={BookOpen} width="12" />{' '}
@@ -306,6 +329,7 @@ const AddGFlag = ({ formProps, gFlagProps, updateJWKSDialogStatus, disabledFlags
       return (
         <>
           {get(disabledFlags, selectedFlag?.name, false) && pgBanner}
+          {editMode && selectedFlag?.name === AUDIT_LOG_FLAG && auditLogBanner}
           <div className="gflag-detail-container">
             <span className="flag-detail-header">Flag Details</span>
             {renderFieldInfo('Name', selectedFlag?.name)}

diff --git a/managed/ui/src/redesign/features/export-log/ExportLog.tsx b/managed/ui/src/redesign/features/export-log/ExportLog.tsx
@@ -221,7 +221,6 @@ export const ExportLog: FC<ExportLogProps> = () => {
                   underline="always"
                   href="https://docs.yugabyte.com/preview/secure/audit-logging/audit-logging-ysql/"
                 ></Link>
-                <Link underline="always"></Link>
               </Trans>
             </Typography>
           </Box>

diff --git a/managed/ui/src/redesign/features/export-log/components/DeleteTelProviderModal.tsx b/managed/ui/src/redesign/features/export-log/components/DeleteTelProviderModal.tsx
@@ -5,6 +5,10 @@ import { useTranslation, Trans } from 'react-i18next';
 import { YBModal } from '../../../components';
 import { api } from '../../../utils/api';
 import { createErrorMessage } from '../../universe/universe-form/utils/helpers';
+//RBAC
+import { hasNecessaryPerm } from '../../rbac/common/RbacApiPermValidator';
+import { ApiPermissionMap } from '../../rbac/ApiAndUserPermMapping';
+import { RBAC_ERR_MSG_NO_PERM } from '../../rbac/common/validator/ValidatorUtils';
 
 export interface TelemetryProviderMin {
   uuid: string;
@@ -47,6 +51,8 @@ export const DeleteTelProviderModal: FC<DeleteTelProviderProps> = ({
     }
   };
 
+  const canDeleteProvider = hasNecessaryPerm(ApiPermissionMap.DELETE_TELEMETRY_PROVIDER_BY_ID);
+
   return (
     <YBModal
       title={t('exportAuditLog.deleteModalTitle')}
@@ -59,6 +65,12 @@ export const DeleteTelProviderModal: FC<DeleteTelProviderProps> = ({
       onClose={onClose}
       submitTestId="DeleteTelProviderModal-Submit"
       cancelTestId="DeleteTelProviderModal-Cancel"
+      buttonProps={{
+        primary: {
+          disabled: !canDeleteProvider
+        }
+      }}
+      submitButtonTooltip={!canDeleteProvider ? RBAC_ERR_MSG_NO_PERM : ''}
     >
       <Trans
         i18nKey={'exportAuditLog.deleteModalMsg'}

diff --git a/managed/ui/src/redesign/features/export-log/components/ExportLogModalForm.tsx b/managed/ui/src/redesign/features/export-log/components/ExportLogModalForm.tsx
@@ -23,6 +23,10 @@ import {
   TPItem
 } from '../utils/types';
 import { TELEMETRY_PROVIDER_OPTIONS, DATADOG_SITES } from '../utils/constants';
+//RBAC
+import { hasNecessaryPerm } from '../../rbac/common/RbacApiPermValidator';
+import { ApiPermissionMap } from '../../rbac/ApiAndUserPermMapping';
+import { RBAC_ERR_MSG_NO_PERM } from '../../rbac/common/validator/ValidatorUtils';
 
 //styles
 import { exportLogStyles } from '../utils/ExportLogStyles';
@@ -318,6 +322,7 @@ export const ExportLogModalForm: FC<ExportLogFormProps> = ({ open, onClose, form
           <YBLabel>{t('exportAuditLog.awsRegion')}</YBLabel>
           <YBInputField
             control={control}
+            rules={{ required: 'This field is required' }}
             name="config.region"
             fullWidth
             disabled={isViewMode}
@@ -390,6 +395,8 @@ export const ExportLogModalForm: FC<ExportLogFormProps> = ({ open, onClose, form
     );
   };
 
+  const canCreateTelemetryProvider = hasNecessaryPerm(ApiPermissionMap.CREATE_TELEMETRY_PROVIDER);
+
   return (
     <YBSidePanel
       open={open}
@@ -403,9 +410,10 @@ export const ExportLogModalForm: FC<ExportLogFormProps> = ({ open, onClose, form
       cancelTestId="ExportLogModalForm-Cancel"
       buttonProps={{
         primary: {
-          disabled: isViewMode
+          disabled: isViewMode || !canCreateTelemetryProvider
         }
       }}
+      submitButtonTooltip={!canCreateTelemetryProvider ? RBAC_ERR_MSG_NO_PERM : ''}
     >
       <FormProvider {...formMethods}>
         <Box

diff --git a/managed/ui/src/redesign/features/rbac/ApiAndUserPermMapping.ts b/managed/ui/src/redesign/features/rbac/ApiAndUserPermMapping.ts
@@ -1123,5 +1123,25 @@ export const ApiPermissionMap = {
     GET_DR_CONFIG_SAFETIME: {
         requestType: ApiRequestType.GET,
         endpoint: '/dr_configs/$drUUID<[^/]+>/safetime'
+    },
+    ENABLE_AUDITLOG_CONFIG : {
+        requestType : ApiRequestType.POST,
+        endpoint : '/universes/$uniUUID<[^/]+>/audit_log_config'
+    },
+    GET_ALL_TELEMETRY_PROVIDERS : {
+        requestType : ApiRequestType.GET,
+        endpoint : '/telemetry_provider'
+    },
+    GET_TELEMETRY_PROVIDER_BY_ID : {
+        requestType : ApiRequestType.GET,
+        endpoint : '/telemetry_provider/$intUUID<[^/]+>'
+    },
+    CREATE_TELEMETRY_PROVIDER : {
+        requestType : ApiRequestType.POST,
+        endpoint : '/telemetry_provider'
+    },
+    DELETE_TELEMETRY_PROVIDER_BY_ID : {
+        requestType : ApiRequestType.DELETE,
+        endpoint : '/telemetry_provider/$intUUID<[^/]+>'
     }
 } satisfies ApiPermissionMapType;
diff --git a/...d/ui/src/redesign/features/universe/universe-form/form/fields/GflagsField/GflagsField.tsx b/...d/ui/src/redesign/features/universe/universe-form/form/fields/GflagsField/GflagsField.tsx
@@ -145,7 +145,9 @@ export const GFlagsField = ({
     }
   );
 
-  const pgGroupFlags = getFlagsByGroupName(pgFlags, GFLAG_GROUPS.ENHANCED_POSTGRES_COMPATIBILITY);
+  const pgGroupFlags = isPGSupported
+    ? getFlagsByGroupName(pgFlags, GFLAG_GROUPS.ENHANCED_POSTGRES_COMPATIBILITY)
+    : {};
   //options Array -- TO DRY THE CODE
   const OPTIONS = [
     {
@@ -543,7 +545,8 @@ export const GFlagsField = ({
               ...selectedProps,
               dbVersion,
               existingFlags: fields,
-              isGFlagMultilineConfEnabled
+              isGFlagMultilineConfEnabled,
+              editMode
             }}
           />
         );

diff --git a/...features/universe/universe-form/form/fields/PGCompatibilityField/PGCompatibilityField.tsx b/...features/universe/universe-form/form/fields/PGCompatibilityField/PGCompatibilityField.tsx
@@ -57,14 +57,15 @@ export const PGCompatibiltyField: FC<PGCompatibiltyFieldProps> = ({ disabled })
   return (
     <Box display="flex" width="100%" data-testid="PGCompatibiltyField-Container">
       <YBTooltip
+        interactive={true}
         title={
           isPGSupported ? (
             ''
           ) : (
             <Typography className={classes.subText}>
               <Trans>
                 {t('universeForm.advancedConfig.pgTooltip')}
-                <Link underline="always" className={classes.linkText}></Link>
+                {/* <Link underline="always" className={classes.linkText}></Link> */}
               </Trans>
             </Typography>
           )
@@ -90,7 +91,7 @@ export const PGCompatibiltyField: FC<PGCompatibiltyFieldProps> = ({ disabled })
           <Typography className={classes.subText}>
             <Trans>
               {t('universeForm.advancedConfig.pgSubText')}
-              <Link underline="always" className={classes.linkText}></Link>
+              {/* <Link underline="always" className={classes.linkText}></Link> */}
             </Trans>
           </Typography>
         </Box>

diff --git a/managed/ui/src/redesign/features/universe/universe-tabs/db-audit-logs/AuditLog.tsx b/managed/ui/src/redesign/features/universe/universe-tabs/db-audit-logs/AuditLog.tsx
@@ -342,6 +342,7 @@ export const AuditLog: FC<AuditLogProps> = ({ universeData, universePaused }) =>
         open={openDisableLogDialog}
         onClose={() => setDisableLogDialog(false)}
         universeName={universeName}
+        universeUUID={universeUUID}
         onSubmit={() => {
           disableAuditLog();
           setDisableLogDialog(false);
@@ -351,6 +352,7 @@ export const AuditLog: FC<AuditLogProps> = ({ universeData, universePaused }) =>
         open={openDisableExportDialog}
         onClose={() => setDisableExportDialog(false)}
         universeName={universeName}
+        universeUUID={universeUUID}
         onSubmit={() => {
           disableExport();
           setDisableExportDialog(false);

diff --git a/...rc/redesign/features/universe/universe-tabs/db-audit-logs/components/AuditLogSettings.tsx b/...rc/redesign/features/universe/universe-tabs/db-audit-logs/components/AuditLogSettings.tsx
@@ -34,6 +34,10 @@ import {
 import { ExportLogResponse } from '../../../../export-log/utils/types';
 import { TP_FRIENDLY_NAMES } from '../../../../export-log/utils/constants';
 import { YSQL_AUDIT_CLASSES, YSQL_LOG_LEVEL_OPTIONS } from '../utils/constants';
+//RBAC
+import { hasNecessaryPerm } from '../../../../rbac/common/RbacApiPermValidator';
+import { ApiPermissionMap } from '../../../../rbac/ApiAndUserPermMapping';
+import { RBAC_ERR_MSG_NO_PERM } from '../../../../rbac/common/validator/ValidatorUtils';
 
 //styles
 import { auditLogStyles } from '../utils/AuditLogStyles';
@@ -170,6 +174,11 @@ export const AuditLogSettings: FC<AuditLogSettingProps> = ({
     );
   };
 
+  const canUpdateAuditLog = hasNecessaryPerm({
+    onResource: universeUUID,
+    ...ApiPermissionMap.ENABLE_AUDITLOG_CONFIG
+  });
+
   return (
     <YBSidePanel
       open={open}
@@ -181,6 +190,12 @@ export const AuditLogSettings: FC<AuditLogSettingProps> = ({
       onSubmit={() => setConfirmationDialog(true)}
       submitTestId="AuditLogSettings-Submit"
       cancelTestId="AuditLogSettings-Cancel"
+      buttonProps={{
+        primary: {
+          disabled: !canUpdateAuditLog
+        }
+      }}
+      submitButtonTooltip={!canUpdateAuditLog ? RBAC_ERR_MSG_NO_PERM : ''}
     >
       <FormProvider {...formMethods}>
         <Box height="100%" width="100%" display="flex" pl={1} pr={1} flexDirection={'column'}>

diff --git a/...redesign/features/universe/universe-tabs/db-audit-logs/components/DisableExportDialog.tsx b/...redesign/features/universe/universe-tabs/db-audit-logs/components/DisableExportDialog.tsx
@@ -2,6 +2,10 @@ import { FC } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { Box, Typography } from '@material-ui/core';
 import { YBModal } from '../../../../../components';
+//RBAC
+import { hasNecessaryPerm } from '../../../../rbac/common/RbacApiPermValidator';
+import { ApiPermissionMap } from '../../../../rbac/ApiAndUserPermMapping';
+import { RBAC_ERR_MSG_NO_PERM } from '../../../../rbac/common/validator/ValidatorUtils';
 
 import { auditLogStyles } from '../utils/AuditLogStyles';
 
@@ -10,17 +14,24 @@ interface DisableExportDialogProps {
   onClose: () => void;
   onSubmit: () => void;
   universeName: string;
+  universeUUID: string;
 }
 
 export const DisableExportDialog: FC<DisableExportDialogProps> = ({
   open,
   onClose,
   onSubmit,
-  universeName
+  universeName,
+  universeUUID
 }) => {
   const classes = auditLogStyles();
   const { t } = useTranslation();
 
+  const canUpdateAuditLog = hasNecessaryPerm({
+    onResource: universeUUID,
+    ...ApiPermissionMap.ENABLE_AUDITLOG_CONFIG
+  });
+
   return (
     <YBModal
       open={open}
@@ -34,6 +45,12 @@ export const DisableExportDialog: FC<DisableExportDialogProps> = ({
       onSubmit={onSubmit}
       submitTestId="DisableExportDialog-Submit"
       cancelTestId="DisableExportDialog-Cancel"
+      buttonProps={{
+        primary: {
+          disabled: !canUpdateAuditLog
+        }
+      }}
+      submitButtonTooltip={!canUpdateAuditLog ? RBAC_ERR_MSG_NO_PERM : ''}
     >
       <Box className={classes.disableLogModalConatiner}>
         <Typography className={classes.exportInfoText}>