[PLAT-14456] Add UI for configuring continuous backup

Summary:
This diff adds the ability to configure continuous backup (presented to users as "automated platform backups" on the YBA UI) from the YBA platform admin tab.
The user is able to create and edit their continuous backup configuration from this page. To disable the automatic backup, users need to delete remove the
continuous backup configuration. The UI support for this is also included in this diff.

After the changes in this diff, the platform HA sub-tabs are now presented as vertical tabs under a new "Platform High Availability" sub-tab.
The new continuous backup feature can be found under the "Automated Platform Backups".

This diff also implements a new backup storage config select field according to the latest design spec.
The component name is `BackupStorageConfigSelect`.
The new select field includes a menu action for creating a new storage config (implemented as a redirect modal to the backup storage config page) and
also a separate prompt component which appears if users have no storage configs at all.
The component handles the customer config fetching and filters for the storage configs internally.

The entire continuous backup UI is hidden behind a runtime config feature flag `yb.ui.feature_flags.continuous_platform_backups` which must be
enabled first. By default this is turned off.

Test Plan:
Review UX with design team.

Create and edit continuous backup configs.

Verify component behaviour of the new backup storage config select component.

{F389613}
{F328823}
{F328819}
{F389614}

Reviewers: rmadhavan, kkannan, muthu

Reviewed By: rmadhavan

Subscribers: yugaware

Differential Revision: https://phorge.dev.yugabyte.com/D41320

Author: Jethro-M

managed/src/main/java/com/yugabyte/yw/common/config/GlobalConfKeys.java

@@ -1861,4 +1861,13 @@ public class GlobalConfKeys extends RuntimeConfigKeysModule {
           "Enable performing automatic rollback of edit operation (if possible)",
           ConfDataType.BooleanType,
           ImmutableList.of(ConfKeyTags.PUBLIC));
+  public static final ConfKeyInfo<Boolean> enableContinuousPlatformBackups =
+      new ConfKeyInfo<>(
+          "yb.ui.feature_flags.continuous_platform_backups",
+          ScopeType.GLOBAL,
+          "Enable new YBA platform backup and restore UI",
+          "Exposes a new subtab on the platform administration page where users can enable"
+              + " automated platform backups.",
+          ConfDataType.BooleanType,
+          ImmutableList.of(ConfKeyTags.INTERNAL));
 }

managed/src/main/resources/reference.conf

@@ -213,6 +213,7 @@ yb {
       off_cluster_pitr_enabled=false
       enable_path_style_access=false
       enable_earlyoom=false
+      continuous_platform_backups=false
     }
 
     xcluster {

managed/ui/src/components/administration/Administration.tsx

@@ -8,18 +8,16 @@ import { RouteComponentProps } from 'react-router-dom';
 import { fetchGlobalRunTimeConfigs } from '../../api/admin';
 import { YBTabsPanel, YBTabsWithLinksPanel } from '../panels';
 import { isAvailable, showOrRedirect } from '../../utils/LayoutUtils';
-import { HAReplication } from '../ha';
 import { AlertConfigurationContainer } from '../alerts';
 import { UserManagementContainer } from '../users';
 import { RuntimeConfigContainer } from '../advanced';
-import { HAInstancesContainer } from '../ha/instances/HAInstanceContainer';
-import { HaMetrics } from '../ha/HaMetrics';
 import ListCACerts from '../customCACerts/ListCACerts';
 import { RBACContainer } from '../../redesign/features/rbac/RBACContainer';
 import { RbacValidator } from '../../redesign/features/rbac/common/RbacApiPermValidator';
 import { ApiPermissionMap } from '../../redesign/features/rbac/ApiAndUserPermMapping';
 import { isRbacEnabled } from '../../redesign/features/rbac/common/RbacUtils';
-import { useLoadHAConfiguration } from '../ha/hooks/useLoadHAConfiguration';
+import { ContinuousBackup } from '../../redesign/features/continuous-backup/ContinuousBackup';
+import { PlatformHa } from '../../redesign/features/platform-ha/PlatformHa';
 
 import './Administration.scss';
 
@@ -36,35 +34,33 @@ interface Store {
   };
 }
 
-interface FetureFlags {
+interface FeatureFlags {
   released: any;
   test: any;
 }
 
 interface FeatureStore {
-  featureFlags: FetureFlags;
+  featureFlags: FeatureFlags;
 }
 
-// string values will be used in URL
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-enum AdministrationTabs {
-  HA = 'ha',
-  AC = 'alertConfig'
-}
+const AdministrationTabs = {
+  HA: 'ha',
+  AC: 'alertConfig'
+} as const;
+type AdministrationTabs = typeof AdministrationTabs[keyof typeof AdministrationTabs];
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-enum HighAvailabilityTabs {
-  REPLICATION = 'replication',
-  INSTANCES = 'instances',
-  METRICS = 'metrics'
-}
+const PlatformHaAndBackupsTabs = {
+  PLATFORM_HA: 'platformHa',
+  CONTINUOUS_BACKUP: 'continuousBackup'
+} as const;
+type PlatformHaAndBackupsTabs = typeof PlatformHaAndBackupsTabs[keyof typeof PlatformHaAndBackupsTabs];
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-enum AlertConfigurationTabs {
-  Creation = 'alertCreation'
-}
+const AlertConfigurationTabs = {
+  Creation: 'alertCreation'
+} as const;
+type AlertConfigurationTabs = typeof AlertConfigurationTabs[keyof typeof AlertConfigurationTabs];
 
-const USER_MANAGAEMENT_TAB = {
+const USER_MANAGEMENT_TAB = {
   title: 'User Management',
   id: 'user-management',
   defaultTab: 'users'
@@ -78,23 +74,20 @@ const ADVANCED_TAB = {
 
 interface RouteParams {
   tab: AdministrationTabs;
-  section: HighAvailabilityTabs | AlertConfigurationTabs;
+  section: PlatformHaAndBackupsTabs | AlertConfigurationTabs;
 }
 
 const customerSelector: Selector<Store, Customer> = (state) => state.customer.currentCustomer;
-const featureFlags: Selector<FeatureStore, FetureFlags> = (state) => state.featureFlags;
+const featureFlags: Selector<FeatureStore, FeatureFlags> = (state) => state.featureFlags;
 
 export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ params }) => {
   const currentCustomer = useSelector(customerSelector);
   const { test, released } = useSelector(featureFlags);
   const globalRuntimeConfigs = useQuery(['globalRuntimeConfigs'], () =>
     fetchGlobalRunTimeConfigs(true).then((res: any) => res.data)
   );
-  const { config, isNoHAConfigExists } = useLoadHAConfiguration({
-    loadSchedule: false,
-    autoRefresh: true
-  });
-  const isCongifUIEnabled =
+
+  const isRuntimeConfigUiEnabled =
     globalRuntimeConfigs?.data?.configEntries?.find(
       (c: any) => c.key === 'yb.runtime_conf_ui.enable_for_all'
     )?.value === 'true' ||
@@ -131,54 +124,36 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
     ) : null;
   };
 
-  const currentInstance = config?.instances.find((instance) => instance.is_local);
+  const isContinuousBackupsUiEnable =
+    globalRuntimeConfigs?.data?.configEntries?.find(
+      (runtimeConfig: any) =>
+        runtimeConfig.key === 'yb.ui.feature_flags.continuous_platform_backups'
+    )?.value === 'true';
   const getHighAvailabilityTab = () => {
     return isAvailable(currentCustomer.data.features, 'administration.highAvailability') ? (
-      <Tab eventKey="ha" title="High Availability" key="high-availability" unmountOnExit>
+      <Tab eventKey="ha" title="Platform HA and Backups" key="high-availability" unmountOnExit>
         <RbacValidator accessRequiredOn={ApiPermissionMap.GET_HA_CONFIG}>
           <YBTabsPanel
-            defaultTab={HighAvailabilityTabs.REPLICATION}
+            defaultTab={PlatformHaAndBackupsTabs.PLATFORM_HA}
             activeTab={params.section}
             routePrefix={`/admin/${AdministrationTabs.HA}/`}
             id="administration-ha-subtab"
             className="config-tabs"
           >
             <Tab
-              eventKey={HighAvailabilityTabs.REPLICATION}
-              title={
-                <span>
-                  <i className="fa fa-clone tab-logo" aria-hidden="true" /> Replication
-                  Configuration
-                </span>
-              }
-              unmountOnExit
-            >
-              <HAReplication />
-            </Tab>
-            <Tab
-              eventKey={HighAvailabilityTabs.INSTANCES}
-              title={
-                <span>
-                  <i className="fa fa-codepen tab-logo" aria-hidden="true"></i> Instance
-                  Configuration
-                </span>
-              }
+              eventKey={PlatformHaAndBackupsTabs.PLATFORM_HA}
+              title="Platform High Availability"
               unmountOnExit
             >
-              <HAInstancesContainer />
+              <PlatformHa />
             </Tab>
-            {currentInstance?.is_leader && !isNoHAConfigExists && (
+            {isContinuousBackupsUiEnable && (
               <Tab
-                eventKey={HighAvailabilityTabs.METRICS}
-                title={
-                  <span>
-                    <i className="fa fa-line-chart tab-logo" aria-hidden="true" />
-                    Metrics
-                  </span>
-                }
+                eventKey={PlatformHaAndBackupsTabs.CONTINUOUS_BACKUP}
+                title="Automated Platform Backups"
                 unmountOnExit
               >
-                <HaMetrics />
+                <ContinuousBackup />
               </Tab>
             )}
           </YBTabsPanel>
@@ -188,7 +163,7 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
   };
 
   const getUserManagementTab = () => {
-    const { id, title, defaultTab } = USER_MANAGAEMENT_TAB;
+    const { id, title, defaultTab } = USER_MANAGEMENT_TAB;
     return (
       <Tab eventKey={id} title={title} key={id} unmountOnExit>
         <UserManagementContainer
@@ -231,7 +206,7 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
 
   return (
     <div>
-      <h2 className="content-title">Platform Configuration</h2>
+      <h2 className="content-title">Platform Administration</h2>
       <YBTabsWithLinksPanel
         defaultTab={defaultTab}
         activeTab={params.tab}
@@ -243,7 +218,7 @@ export const Administration: FC<RouteComponentProps<{}, RouteParams>> = ({ param
         {getAlertTab()}
         {!isRbacEnabled() && getUserManagementTab()}
         {getCustomCACertsTab()}
-        {isCongifUIEnabled && getAdvancedTab()}
+        {isRuntimeConfigUiEnabled && getAdvancedTab()}
         {isRbacEnabled() && getRbacTab()}
       </YBTabsWithLinksPanel>
     </div>

managed/ui/src/components/backupv2/common/BackupAPI.ts

@@ -18,7 +18,7 @@ import {
   BACKUP_API_TYPES,
   Backup_Options_Type,
   ICommonBackupInfo,
-  IStorageConfig,
+  CustomerConfig,
   ITable,
   ThrottleParameters,
   IBackupEditParams
@@ -216,7 +216,7 @@ export function editBackup(values: IBackupEditParams) {
   return axios.put(requestUrl, values);
 }
 
-export const assignStorageConfig = (backup: IBackup, storageConfig: IStorageConfig) => {
+export const assignStorageConfig = (backup: IBackup, storageConfig: CustomerConfig) => {
   const cUUID = localStorage.getItem('customerId');
   const requestUrl = `${ROOT_URL}/customers/${cUUID}/backups/${backup.commonBackupInfo.backupUUID}`;
   return axios.put(requestUrl, {
@@ -296,5 +296,5 @@ export function deleteIncrementalBackup(incrementalBackup: ICommonBackupInfo) {
 export const fetchStorageConfigs = () => {
   const cUUID = localStorage.getItem('customerId');
   const requestUrl = `${ROOT_URL}/customers/${cUUID}/configs`;
-  return axios.get<IStorageConfig[]>(requestUrl);
+  return axios.get<CustomerConfig[]>(requestUrl);
 };

managed/ui/src/components/backupv2/common/BackupUtils.tsx

@@ -11,7 +11,7 @@ import React, { useState } from 'react';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { keyBy, mapValues, capitalize, lowerCase, find } from 'lodash';
-import { Backup_Options_Type, IBackup, IStorageConfig, IUniverse } from './IBackup';
+import { Backup_Options_Type, IBackup, CustomerConfig, IUniverse } from './IBackup';
 import { Backup_States } from '../common/IBackup';
 import { Alert } from 'react-bootstrap';
 import { TableType } from '../../../redesign/helpers/dtos';
@@ -166,7 +166,7 @@ export const RESTORE_IN_PROGRESS_MSG = (
     progress.
   </Alert>
 );
-export const convertBackupToFormValues = (backup: IBackup, storage_config: IStorageConfig) => {
+export const convertBackupToFormValues = (backup: IBackup, storage_config: CustomerConfig) => {
   const formValues = {
     use_cron_expression: false,
     cron_expression: '',
@@ -241,7 +241,10 @@ export const convertBackupToFormValues = (backup: IBackup, storage_config: IStor
 };
 
 export const isBackupPITREnabled = (runtimeConfigs: RunTimeConfig) => {
-  return find(runtimeConfigs?.configEntries, (config) => config.key === BACKUP_PITR_ENABLED)?.value === 'true';
+  return (
+    find(runtimeConfigs?.configEntries, (config) => config.key === BACKUP_PITR_ENABLED)?.value ===
+    'true'
+  );
 };
 
 export const isPathStyleAccess = (runtimeConfigs: RunTimeConfig) => {