[PLAT-7272][PLAT-8078][PLAT-10452] - fix : Gflag improvements

Summary: **[PLAT-7272][PLAT-8078]** Show Reload modal if gflags got updated before applying new changes. **[PLAT-10452]** Fix a punctuation error in Edit Gflags page. Test Plan: Tested Manually **Screenshot** {F119015} Reviewers: kkannan, asathyan Reviewed By: kkannan, asathyan Subscribers: ui, yugaware Differential Revision: https://phorge.dev.yugabyte.com/D29150
yugabyte · Oct 9, 2023 · 07d7838 · 07d7838
1 parent 42de602
commit 07d7838
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 52 deletions.
diff --git a/managed/ui/src/redesign/features/universe/universe-actions/edit-gflags/EditGflags.tsx b/managed/ui/src/redesign/features/universe/universe-actions/edit-gflags/EditGflags.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useState, useRef } from 'react';
 import _ from 'lodash';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +7,7 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { toast } from 'react-toastify';
 import { Box, Typography, makeStyles } from '@material-ui/core';
 import { InheritRRDialog } from './InheritRRDialog';
+import { ModifiedFlagsDialog } from './ModifiedFlagsDialog';
 import { YBModal, YBToggle, YBRadioGroupField, YBInputField } from '../../../../components';
 import { api } from '../../../../features/universe/universe-form/utils/api';
 import { Universe } from '../../universe-form/utils/dto';
@@ -84,12 +85,14 @@ export const EditGflagsModal: FC<EditGflagsModalProps> = ({ open, onClose, unive
   const { nodePrefix } = universeDetails;
   const [isPrimary, setIsPrimary] = useState(true);
   const [openInheritRRModal, setOpenInheritRRModal] = useState(false);
+  const [openWarningModal, setWarningModal] = useState(false);
   const classes = useStyles();
   const globalClasses = useFormMainStyles();
   const primaryCluster = _.cloneDeep(getPrimaryCluster(universeDetails));
   const asyncCluster = _.cloneDeep(getAsyncCluster(universeDetails));
   const currentVersion = getCurrentVersion(universeDetails) || '';
   const { gFlags, asyncGflags, inheritFlagsFromPrimary } = transformToEditFlagsForm(universeData);
+  const initialGflagSet = useRef({ gFlags, asyncGflags, inheritFlagsFromPrimary });
 
   const formMethods = useForm<EditGflagsFormValues>({
     defaultValues: {
@@ -115,59 +118,67 @@ export const EditGflagsModal: FC<EditGflagsModalProps> = ({ open, onClose, unive
   };
 
   const handleFormSubmit = handleSubmit(async (values) => {
-    const { gFlags, asyncGflags, inheritFlagsFromPrimary } = values;
-    const payload: EditGflagPayload = {
-      nodePrefix,
-      universeUUID,
-      sleepAfterMasterRestartMillis: values.timeDelay * 1000,
-      sleepAfterTServerRestartMillis: values.timeDelay * 1000,
-      taskType: 'GFlags',
-      upgradeOption: values?.upgradeOption,
-      ybSoftwareVersion: currentVersion,
-      clusters: []
-    };
+    const newUniverseData = await api.fetchUniverse(universeUUID);
+    const newGflagSet = transformToEditFlagsForm(newUniverseData);
 
-    if (primaryCluster && !_.isEmpty(primaryCluster)) {
-      const { masterGFlags, tserverGFlags } = transformFlagArrayToObject(gFlags);
-      primaryCluster.userIntent.specificGFlags = {
-        inheritFromPrimary: false,
-        perProcessFlags: {
-          value: {
-            MASTER: masterGFlags,
-            TSERVER: tserverGFlags
-          }
-        }
+    if (_.isEqual(initialGflagSet.current, newGflagSet) || openWarningModal) {
+      setWarningModal(false);
+      const { gFlags, asyncGflags, inheritFlagsFromPrimary } = values;
+      const payload: EditGflagPayload = {
+        nodePrefix,
+        universeUUID,
+        sleepAfterMasterRestartMillis: values.timeDelay * 1000,
+        sleepAfterTServerRestartMillis: values.timeDelay * 1000,
+        taskType: 'GFlags',
+        upgradeOption: values?.upgradeOption,
+        ybSoftwareVersion: currentVersion,
+        clusters: []
       };
-      delete primaryCluster.userIntent.masterGFlags;
-      delete primaryCluster.userIntent.tserverGFlags;
-      payload.clusters = [primaryCluster];
-    }
-    if (asyncCluster && !_.isEmpty(asyncCluster)) {
-      if (inheritFlagsFromPrimary) {
-        asyncCluster.userIntent.specificGFlags = {
-          inheritFromPrimary: true,
-          perProcessFlags: {}
-        };
-      } else {
-        const { tserverGFlags } = transformFlagArrayToObject(asyncGflags);
-        asyncCluster.userIntent.specificGFlags = {
+
+      if (primaryCluster && !_.isEmpty(primaryCluster)) {
+        const { masterGFlags, tserverGFlags } = transformFlagArrayToObject(gFlags);
+        primaryCluster.userIntent.specificGFlags = {
           inheritFromPrimary: false,
           perProcessFlags: {
             value: {
+              MASTER: masterGFlags,
               TSERVER: tserverGFlags
             }
           }
         };
+        delete primaryCluster.userIntent.masterGFlags;
+        delete primaryCluster.userIntent.tserverGFlags;
+        payload.clusters = [primaryCluster];
       }
-      delete asyncCluster.userIntent.masterGFlags;
-      delete asyncCluster.userIntent.tserverGFlags;
-      payload.clusters.push(asyncCluster);
-    }
-    try {
-      await api.upgradeGflags(payload, universeUUID);
-      onClose();
-    } catch (error) {
-      toast.error(createErrorMessage(error), { autoClose: TOAST_AUTO_DISMISS_INTERVAL });
+      if (asyncCluster && !_.isEmpty(asyncCluster)) {
+        if (inheritFlagsFromPrimary) {
+          asyncCluster.userIntent.specificGFlags = {
+            inheritFromPrimary: true,
+            perProcessFlags: {}
+          };
+        } else {
+          const { tserverGFlags } = transformFlagArrayToObject(asyncGflags);
+          asyncCluster.userIntent.specificGFlags = {
+            inheritFromPrimary: false,
+            perProcessFlags: {
+              value: {
+                TSERVER: tserverGFlags
+              }
+            }
+          };
+        }
+        delete asyncCluster.userIntent.masterGFlags;
+        delete asyncCluster.userIntent.tserverGFlags;
+        payload.clusters.push(asyncCluster);
+      }
+      try {
+        await api.upgradeGflags(payload, universeUUID);
+        onClose();
+      } catch (error) {
+        toast.error(createErrorMessage(error), { autoClose: TOAST_AUTO_DISMISS_INTERVAL });
+      }
+    } else {
+      setWarningModal(true);
     }
   });
 
@@ -354,6 +365,14 @@ export const EditGflagsModal: FC<EditGflagsModalProps> = ({ open, onClose, unive
           }}
           open={openInheritRRModal}
         />
+        <ModifiedFlagsDialog
+          onSubmit={() => {
+            setWarningModal(false);
+            window.location.reload();
+          }}
+          onCancel={handleFormSubmit}
+          open={openWarningModal}
+        />
       </FormProvider>
     </YBModal>
   );

diff --git a/managed/ui/src/redesign/features/universe/universe-actions/edit-gflags/GflagHelper.ts b/managed/ui/src/redesign/features/universe/universe-actions/edit-gflags/GflagHelper.ts
@@ -33,7 +33,11 @@ export interface EditGflagPayload {
 
 export const transformToEditFlagsForm = (universeData: Universe) => {
   const { universeDetails } = universeData;
-  const editGflagsFormData: Partial<EditGflagsFormValues> = {};
+  const editGflagsFormData: Partial<EditGflagsFormValues> = {
+    gFlags: [],
+    asyncGflags: [],
+    inheritFlagsFromPrimary: true
+  };
   const primaryCluster = getPrimaryCluster(universeDetails);
   const asyncCluster = getAsyncCluster(universeDetails);
   if (primaryCluster) {

diff --git a/managed/ui/src/redesign/features/universe/universe-actions/edit-gflags/InheritRRDialog.tsx b/managed/ui/src/redesign/features/universe/universe-actions/edit-gflags/InheritRRDialog.tsx
@@ -52,7 +52,13 @@ export const InheritRRDialog: FC<ModalProps> = ({ onCancel, onSubmit, open }) =>
             <img alt="" src={ErrorIcon} />
           </Box>
           <Box display="flex" flexDirection="column" ml={1}>
-            <Typography variant="body2">{t('universeForm.gFlags.inheritRRModalBody')}</Typography>
+            <Typography variant="body2">
+              {t('universeForm.gFlags.inheritRRModalLine1')}
+              <br />
+              {t('universeForm.gFlags.inheritRRModalLine2')}
+              <br />
+              {t('universeForm.gFlags.inheritRRModalLine3')}
+            </Typography>
           </Box>
         </Box>
         <Box mt={4}>

diff --git a/...ed/ui/src/redesign/features/universe/universe-actions/edit-gflags/ModifiedFlagsDialog.tsx b/...ed/ui/src/redesign/features/universe/universe-actions/edit-gflags/ModifiedFlagsDialog.tsx
@@ -0,0 +1,73 @@
+import { FC } from 'react';
+import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+import { Box, Typography, makeStyles } from '@material-ui/core';
+import { YBModal } from '../../../../components';
+import ErrorIcon from '../../../../assets/error.svg';
+
+interface ModalProps {
+  onCancel: () => void;
+  onSubmit: () => void;
+  open: boolean;
+}
+
+export const useStyles = makeStyles((theme) => ({
+  infoContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(1.5, 2),
+    height: '74px',
+    background: '#FDE2E2',
+    borderRadius: theme.spacing(1)
+  }
+}));
+
+export const ModifiedFlagsDialog: FC<ModalProps> = ({ onCancel, onSubmit, open }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+  return (
+    <YBModal
+      open={open}
+      titleSeparator
+      size="sm"
+      overrideHeight={300}
+      overrideWidth={600}
+      cancelLabel={t('common.continue')}
+      submitLabel={t('common.reload')}
+      title={t('common.areYouSure')}
+      onClose={onCancel}
+      onSubmit={onSubmit}
+      hideCloseBtn={true}
+      submitTestId="ModifiedFlagsDialog-Reload"
+      cancelTestId="ModifiedFlagsDialog-Continue"
+    >
+      <Box
+        height="100%"
+        width="100%"
+        display="flex"
+        flexDirection="column"
+        data-testid="ModifiedFlagsDialog-Modal"
+      >
+        <Box className={classes.infoContainer}>
+          <Box display="flex" flexShrink={1} alignItems="flex-start">
+            <img alt="" src={ErrorIcon} />
+          </Box>
+          <Box display="flex" flexDirection="column" ml={1}>
+            <Typography variant="body2">
+              {t('universeForm.gFlags.flagsModifiedModalBody1')}
+              <br />
+              {t('universeForm.gFlags.flagsModifiedModalBody2')}
+            </Typography>
+          </Box>
+        </Box>
+        <Box mt={3}>
+          <Typography variant="body2">
+            {t('universeForm.gFlags.flagsModifiedModalLine1')}
+            <br />
+            {t('universeForm.gFlags.flagsModifiedModalLine2')}
+          </Typography>
+        </Box>
+      </Box>
+    </YBModal>
+  );
+};
diff --git a/managed/ui/src/translations/en.json b/managed/ui/src/translations/en.json
@@ -6,6 +6,7 @@
       "applyChanges": "Apply Changes",
       "cancel": "Cancel",
       "confirm": "Confirm",
+      "continue": "Continue",
       "create": "Create",
       "genericFailure": "Something went wrong. Please try again.",
       "no": "No",
@@ -27,7 +28,8 @@
       "back": "Back",
       "selectAll": "Select All",
       "selected": "Selected",
-      "note": "Note :"
+      "note": "Note :",
+      "reload": "Reload"
     },
     "task": {
       "viewDetails": "View Details"
@@ -251,11 +253,14 @@
         "gFlagUpdateOptions": "G-Flag Update Options",
         "rollingMsg": "Apply all changes using a rolling restart (slower, zero downtime)",
         "nonRollingMsg": "Apply all changes immediately, using a concurrent restart (faster, some downtime)",
-        "nonRestart": "Apply all changes which do not require a restart immediately",
-        "nonRestartRuntime": "apply remaining changes the next time the database is restarted",
+        "nonRestart": "Apply all changes which do not require a restart immediately; ",
+        "nonRestartRuntime": " apply remaining changes the next time the database is restarted",
         "delayBetweenServers": "Delay Between Servers :",
         "seconds": "seconds",
-        "inheritRRModalBody": "Apply the same Flags to both Primary Cluster and Read replica? <br /> This will override all the Flags that are currently applied to Read replica<br /> by Primary Cluster’s Flag.",
+        "inheritRRModalBody": "Apply the same Flags to both Primary Cluster and Read replica? \n<br/> This will override all the Flags that are currently applied to Read replica <br/> by Primary Cluster’s Flag.",
+        "inheritRRModalLine1": "Apply the same Flags to both Primary Cluster and Read replica?",
+        "inheritRRModalLine2": "This will override all the Flags that are currently applied to Read replica",
+        "inheritRRModalLine3": "by Primary Cluster’s Flag.",
         "inheritRRModalConfirmMsg": "Are you sure you want to continue with the changes?",
         "validationError": "Fix all the errors shown below to proceed",
         "hbaLDAPConfLocal": "local database user auth-method [auth-options]",
@@ -274,7 +279,11 @@
         "identConfDescriptionSecond": "Enter each mapping as a new row, comprising the map-name, external user name, and database user name. ",
         "identConfDescriptionMore": "To incorporate user name mappings from this flag, add them to the authentication methods that use external user names in hba_conf_csv file. ",
         "readMore": "Read More",
-        "readLess": "Read Less"
+        "readLess": "Read Less",
+        "flagsModifiedModalBody1": "The Gflags has been modified in another tab/browser/device.",
+        "flagsModifiedModalBody2": "If you don't want to lose modified flags, please reload the page.",
+        "flagsModifiedModalLine1": "Do you want to reload ?",
+        "flagsModifiedModalLine2": "Note that current changes will be lost."
       },
       "helmOverrides": {
         "addK8sOverrides": "Add Kubernetes Overrides",
@@ -1116,4 +1125,4 @@
       }
     }
   }
-}
+}