[PLAT-18616] Add warning when restoring with old backups during HA failover

Jethro-M · avoidik · commit 7f1702692c85 · 2025-11-06T09:27:30.000Z
Summary: Ideally we want to avoid older backups when restoring during HA failover because of the increased likelyhood of missing YBA context. Ex. If a TLS toggle off occurred, but we restored to a backup prior to this operation, then YBA would assume TLS is still enabled leading to broken connectivity and inability to perform basic operations like backup. This diff adds an extra warning which appears when users try to promote their standby using a backup which is older than 24 hours. Users can accept the risk and proceed if needed. Test Plan: Set up a HA config between 2 YBA platforms and try promoting standby with backups > 24 hours old and <= 24 hours old. {F410712} {F410713} Reviewers: kkannan, rmadhavan Reviewed By: rmadhavan Subscribers: yugaware Differential Revision: https://phorge.dev.yugabyte.com/D47494
diff --git a/managed/ui/src/components/ha/modals/PromoteInstanceModal.tsx b/managed/ui/src/components/ha/modals/PromoteInstanceModal.tsx
@@ -17,6 +17,12 @@ import { handleServerError } from '../../../utils/errorHandlingUtils';
 import InfoIcon from '../../../redesign/assets/info-message.svg';
 import { YBInput, YBTooltip } from '../../../redesign/components';
 import { formatDatetime, YBTimeFormats } from '../../../redesign/helpers/DateUtils';
+import {
+  getHaBackupFileTimestamp,
+  getIsHaBackupOld,
+  HA_BACKUP_OLD_THRESHOLD_HOURS
+} from '../utils';
+import { ReactComponent as WarningIcon } from '@app/redesign/assets/alert.svg';
 
 import './PromoteInstanceModal.scss';
 
@@ -41,12 +47,16 @@ const validationSchema = Yup.object().shape({
   backupFile: Yup.object().nullable().required('Backup file is required')
 });
 
-const adaptHaBackupToFormFieldOption = (value: string, currentUserTimezone?: string): PromoteInstanceFormValues['backupFile'] => {
-  // backup_21-02-20-00-40.tgz --> 21-02-20-00-40
-  const timestamp = value.replace('backup_', '').replace('.tgz', '');
-  // we always get the backup list time in UTC
-  const formattedTimestamp = moment.utc(timestamp, 'YY-MM-DD-HH:mm').toDate();
-  const label = formatDatetime(formattedTimestamp, YBTimeFormats.YB_DEFAULT_TIMESTAMP , currentUserTimezone);
+const adaptHaBackupToFormFieldOption = (
+  value: string,
+  currentUserTimezone?: string
+): PromoteInstanceFormValues['backupFile'] => {
+  const formattedTimestamp = moment.utc(getHaBackupFileTimestamp(value), 'YY-MM-DD-HH:mm').toDate();
+  const label = formatDatetime(
+    formattedTimestamp,
+    YBTimeFormats.YB_DEFAULT_TIMESTAMP,
+    currentUserTimezone
+  );
 
   return { value, label };
 };
@@ -60,6 +70,17 @@ const useStyles = makeStyles((theme) => ({
   },
   fieldLabel: {
     marginBottom: theme.spacing(1)
+  },
+  warningBanner: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(1),
+
+    backgroundColor: theme.palette.warning[100],
+    borderRadius: theme.shape.borderRadius
   }
 }));
 
@@ -70,11 +91,17 @@ export const PromoteInstanceModal: FC<PromoteInstanceModalProps> = ({
   instanceId
 }) => {
   const [confirmationText, setConfirmationText] = useState<string>('');
+  const [
+    isRestoreOldBackupConfirmationModalOpen,
+    setIsRestoreOldBackupConfirmationModalOpen
+  ] = useState(false);
   const formik = useRef({} as FormikProps<PromoteInstanceFormValues>);
   const theme = useTheme();
   const classes = useStyles();
   const queryClient = useQueryClient();
-  const currentUserTimezone = useSelector((state: any) => state?.customer?.currentUser?.data?.timezone);
+  const currentUserTimezone = useSelector(
+    (state: any) => state?.customer?.currentUser?.data?.timezone
+  );
 
   const { isLoading, data } = useQuery(
     [QUERY_KEY.getHABackups, configId],
@@ -84,7 +111,10 @@ export const PromoteInstanceModal: FC<PromoteInstanceModalProps> = ({
       onSuccess: (data) => {
         // pre-select first backup file from the list
         if (Array.isArray(data) && data.length) {
-          formik.current.setFieldValue('backupFile', adaptHaBackupToFormFieldOption(data[0], currentUserTimezone));
+          formik.current.setFieldValue(
+            'backupFile',
+            adaptHaBackupToFormFieldOption(data[0], currentUserTimezone)
+          );
         }
       }
     }
@@ -106,7 +136,9 @@ export const PromoteInstanceModal: FC<PromoteInstanceModalProps> = ({
     }
   );
 
-  const backupsList = (data ?? []).map(backup => adaptHaBackupToFormFieldOption(backup, currentUserTimezone));
+  const backupsList = (data ?? []).map((backup) =>
+    adaptHaBackupToFormFieldOption(backup, currentUserTimezone)
+  );
 
   const closeModal = () => {
     if (!formik.current.isSubmitting) {
@@ -115,7 +147,7 @@ export const PromoteInstanceModal: FC<PromoteInstanceModalProps> = ({
     }
   };
 
-  const submitForm = async (
+  const handleSubmit = async (
     formValues: PromoteInstanceFormValues,
     actions: FormikActions<PromoteInstanceFormValues>
   ) => {
@@ -137,7 +169,7 @@ export const PromoteInstanceModal: FC<PromoteInstanceModalProps> = ({
         showCancelButton
         title="Make Active"
         onHide={closeModal}
-        onFormSubmit={submitForm}
+        onFormSubmit={handleSubmit}
         isSubmitDisabled={isSubmitDisabled}
         footerAccessory={
           <Box display="flex" gridGap={theme.spacing(1)}>
@@ -164,38 +196,80 @@ export const PromoteInstanceModal: FC<PromoteInstanceModalProps> = ({
         render={(formikProps: FormikProps<PromoteInstanceFormValues>) => {
           // workaround for outdated version of Formik to access form methods outside of <Formik>
           formik.current = formikProps;
-
+          const isHaBackupOld =
+            !!formik.current.values.backupFile?.value &&
+            getIsHaBackupOld(formik.current.values.backupFile.value);
           return (
-            <div data-testid="ha-make-active-modal">
-              {isLoading ? (
-                <YBLoading />
-              ) : (
-                <div className="ha-promote-instance-modal">
-                  <Alert bsStyle="warning">
-                    Note: promotion will replace all existing data on this platform instance with
-                    the data from the selected backup. After promotion succeeds you will need to
-                    re-sign in with the credentials of the previously active platform instance.
-                  </Alert>
-                  <Typography variant="body2" className={classes.fieldLabel}>
-                    <Field
-                      name="backupFile"
-                      component={YBFormSelect}
-                      options={backupsList}
-                      label="Select the backup to restore from"
-                      isSearchable
+            <>
+              <div data-testid="ha-make-active-modal">
+                {isLoading ? (
+                  <YBLoading />
+                ) : (
+                  <div className="ha-promote-instance-modal">
+                    <Box
+                      display="flex"
+                      flexDirection="column"
+                      gridGap={theme.spacing(1)}
+                      marginBottom={2}
+                    >
+                      <div className={classes.warningBanner}>
+                        <Box width={24} height={24}>
+                          <WarningIcon width={24} height={24} color={theme.palette.warning[700]} />
+                        </Box>
+                        <Typography variant="body2">
+                          <b>Note! </b>After promotion, all existing data from this platform
+                          instance will be replaced with the data from teh selected backup. After
+                          promotion succeeds, you will need to log-in again with the credentials of
+                          the previous active platform instance. Contact Yugabyte Support for
+                          assistance.
+                        </Typography>
+                      </div>
+                      {isHaBackupOld && (
+                        <div className={classes.warningBanner}>
+                          <Box width={24} height={24}>
+                            <WarningIcon
+                              width={24}
+                              height={24}
+                              color={theme.palette.warning[700]}
+                            />
+                          </Box>
+                          <Typography variant="body2">
+                            <p>
+                              <b>
+                                {`Note! The selected backup is more than ${HA_BACKUP_OLD_THRESHOLD_HOURS} hours old. Restoring from this backup could cause serious issues, including
+                              data loss.`}
+                              </b>{' '}
+                            </p>
+                            <p>Contact Yugabyte Support for assistance.</p>
+                          </Typography>
+                        </div>
+                      )}
+                    </Box>
+                    <Typography variant="body2" className={classes.fieldLabel}>
+                      <Field
+                        name="backupFile"
+                        component={YBFormSelect}
+                        options={backupsList}
+                        label="Select the backup to restore from"
+                        isSearchable
+                        menuPortalTarget={document.body}
+                        styles={{
+                          menuPortal: (base: any) => ({ ...base, zIndex: 4000 })
+                        }}
+                      />
+                      Please type PROMOTE to confirm.
+                    </Typography>
+                    <YBInput
+                      className={classes.confirmTextInputBox}
+                      inputProps={{ 'data-testid': 'PromoteInstanceModal-ConfirmTextInputField' }}
+                      placeholder="PROMOTE"
+                      value={confirmationText}
+                      onChange={(event) => setConfirmationText(event.target.value)}
                     />
-                    Please type PROMOTE to confirm.
-                  </Typography>
-                  <YBInput
-                    className={classes.confirmTextInputBox}
-                    inputProps={{ 'data-testid': 'PromoteInstanceModal-ConfirmTextInputField' }}
-                    placeholder="PROMOTE"
-                    value={confirmationText}
-                    onChange={(event) => setConfirmationText(event.target.value)}
-                  />
-                </div>
-              )}
-            </div>
+                  </div>
+                )}
+              </div>
+            </>
           );
         }}
       />
diff --git a/managed/ui/src/components/ha/utils.ts b/managed/ui/src/components/ha/utils.ts
@@ -0,0 +1,22 @@
+import moment from 'moment';
+
+/**
+ * Extracts the timestamp from a platform HA backup file name.
+ * Backup filenames are in the format of backup_YYYY-MM-DD-HH-mm.tgz. Ex. backup_2025-01-01-00-00.tgz.
+ * Returns the extracted timestamp.
+ */
+export const getHaBackupFileTimestamp = (backupFileName: string) =>
+  backupFileName.replace('backup_', '').replace('.tgz', '');
+
+export const HA_BACKUP_OLD_THRESHOLD_HOURS = 24;
+/**
+ * Checks if a given timestamp is older than HA_BACKUP_OLD_THRESHOLD_HOURS from the current time.
+ * True if the timestamp is older than HA_BACKUP_OLD_THRESHOLD_HOURS, false otherwise.
+ */
+export const getIsHaBackupOld = (backupFileName: string): boolean => {
+  const backupTimestamp = moment.utc(getHaBackupFileTimestamp(backupFileName), 'YYYY-MM-DD-HH-mm');
+  const now = moment.utc();
+  const hoursDiff = now.diff(backupTimestamp, 'hours');
+
+  return hoursDiff > HA_BACKUP_OLD_THRESHOLD_HOURS;
+};
