@plutonhq/core-frontend 0.0.1

package/src/components/Plan/PlanProgress/PlanProgress.tsx

@@ -0,0 +1,75 @@
+import { Backup } from '../../../@types/backups';
+import { Plan } from '../../../@types/plans';
+import { RestoreSlim } from '../../../@types/restores';
+import BackupProgress from '../BackupProgress/BackupProgress';
+import PlanPendingBackup from '../PlanPendingBackup/PlanPendingBackup';
+import classes from './PlanProgress.module.scss';
+
+interface PlanProgressProps {
+   plan: Plan;
+   isBackupPending: boolean;
+   activeBackups: Backup[];
+   activeRestores: RestoreSlim[];
+   refetchPlan: () => void;
+}
+
+const PlanProgress = ({ plan, isBackupPending, activeBackups, activeRestores, refetchPlan }: PlanProgressProps) => {
+   return (
+      <div>
+         {isBackupPending && (
+            <div className={classes.activeBackups}>
+               <div className={classes.backupsHeader}>
+                  <h3>Backup in Progress</h3>
+               </div>
+               <div className={classes.activeBackupsTable}>
+                  <PlanPendingBackup planId={plan.id} onPendingBackupDetect={() => refetchPlan()} />
+               </div>
+            </div>
+         )}
+
+         {activeBackups.length > 0 && (
+            <div className={classes.activeBackups}>
+               <div className={classes.backupsHeader}>
+                  <h3>
+                     Active Backups <span>{activeBackups.length}</span>
+                  </h3>
+               </div>
+               <div className={classes.activeBackupsTable}>
+                  {activeBackups.map((backup) => (
+                     <BackupProgress
+                        key={backup.id}
+                        type={'backup'}
+                        item={backup}
+                        sourceId={plan.sourceId || ''}
+                        sourceType={'main'}
+                        planId={plan.id}
+                     />
+                  ))}
+               </div>
+            </div>
+         )}
+
+         {activeRestores.length > 0 && (
+            <div className={classes.activeBackups}>
+               <div className={classes.backupsHeader}>
+                  <h3>Restoring Backup</h3>
+               </div>
+               <div className={classes.activeBackupsTable}>
+                  {activeRestores.map((restore) => (
+                     <BackupProgress
+                        key={restore.id}
+                        type={'restore'}
+                        item={restore}
+                        sourceId={plan.sourceId || ''}
+                        sourceType={'main'}
+                        planId={plan.id}
+                     />
+                  ))}
+               </div>
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default PlanProgress;

package/src/components/Plan/PlanPruneModal/PlanPruneModal.tsx

@@ -0,0 +1,59 @@
+import { PlanPrune } from '../../../@types/plans';
+import { usePrunePlan } from '../../../services/plans';
+import { planIntervalAgeName } from '../../../utils/plans';
+import ActionModal from '../../common/ActionModal/ActionModal';
+
+interface PlanPruneModalProps {
+   planId: string;
+   method: string;
+   prune: PlanPrune;
+   snapshotsCount: number;
+   taskPending: boolean;
+   close: () => void;
+}
+
+const PlanPruneModal = ({ planId, method, prune, snapshotsCount, taskPending, close }: PlanPruneModalProps) => {
+   const pruneMutation = usePrunePlan();
+
+   return (
+      <ActionModal
+         title={method === 'sync' ? 'Clean Up Old Revisions' : 'Clean Up Old Backups'}
+         message={
+            <>
+               {method === 'sync' ? (
+                  <>
+                     Your plan is set to maintain{' '}
+                     {prune.policy === 'forgetByAge' ? `file revisions newer than ${planIntervalAgeName(prune.forgetAge || '3m')}.` : ''}{' '}
+                     {prune.policy === 'forgetByFileCount' ? `Only keep the last ${prune.snapCount} versions of each file.` : ''} This action will
+                     remove any excess file revisions older than the retention policy.
+                  </>
+               ) : (
+                  <>
+                     Your plan is set to maintain {prune.snapCount} recent backups(snapshots).{' '}
+                     {prune.snapCount < snapshotsCount
+                        ? `Running prune now will remove ${' '}
+                        ${snapshotsCount - prune.snapCount} older snapshots, freeing up some storage space`
+                        : 'There are no excess snapshots to clean up.'}
+                  </>
+               )}
+            </>
+         }
+         closeModal={() => !pruneMutation.isPending && close()}
+         width="500px"
+         primaryAction={{
+            title: method === 'sync' ? `Yes, Remove Old Revisions` : prune.snapCount < snapshotsCount ? 'Yes, Remove Old Backups' : '',
+            type: 'default',
+            isPending: pruneMutation.isPending,
+            action: () =>
+               !taskPending &&
+               pruneMutation.mutate(planId, {
+                  onSuccess: () => {
+                     close();
+                  },
+               }),
+         }}
+      />
+   );
+};
+
+export default PlanPruneModal;

package/src/components/Plan/PlanRemoveModal/PlanRemoveModal.module.scss

@@ -0,0 +1,9 @@
+.removeRemoteToggle {
+   margin-top: 15px;
+   :global([class*='_toggleCheckbox']) {
+      opacity: 1;
+      span {
+         width: 100%;
+      }
+   }
+}

package/src/components/Plan/PlanRemoveModal/PlanRemoveModal.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useDeletePlan } from '../../../services/plans';
+import Toggle from '../../common/form/Toggle/Toggle';
+import classes from './PlanRemoveModal.module.scss';
+
+interface PlanRemoveModalProps {
+   planId: string;
+   taskPending: boolean;
+   actionInProgress: boolean;
+   close: (value?: boolean) => void;
+}
+
+const PlanRemoveModal = ({ planId, taskPending, actionInProgress, close }: PlanRemoveModalProps) => {
+   const [removeRemoteData, setRemoveRemoteData] = useState(false);
+
+   const navigate = useNavigate();
+   const deletePlanMutation = useDeletePlan();
+
+   const removePlan = () => {
+      if (actionInProgress) {
+         return toast.error('A Backup/Restore Process is in Progress.');
+      }
+      if (taskPending) {
+         return;
+      }
+      deletePlanMutation.mutate(
+         { id: planId, removeRemoteData },
+         {
+            onError: (error: Error) => {
+               console.log('error :', error?.message);
+               toast.error(error.message || `Error Removing Plan!`);
+            },
+            onSuccess: (data: any) => {
+               console.log('Success :', data);
+               toast.success(`Removed Backup Plan Successfully!`, { autoClose: 5000 });
+               navigate('/');
+            },
+         },
+      );
+   };
+
+   return (
+      <ActionModal
+         title="Remove Backup Plan"
+         message={
+            <div>
+               Are you sure you want to remove this Plan? All the Snapshots of this Backup plan will be removed.
+               <Toggle
+                  fieldValue={removeRemoteData}
+                  onUpdate={setRemoveRemoteData}
+                  description={`Remove remote backup data from the Remote Storage`}
+                  customClasses={classes.removeRemoteToggle}
+               />
+            </div>
+         }
+         closeModal={() => !deletePlanMutation.isPending && close(false)}
+         width="400px"
+         primaryAction={{
+            title: 'Yes, Remove Plan',
+            type: 'danger',
+            icon: 'trash',
+            isPending: deletePlanMutation.isPending,
+            action: () => removePlan(),
+         }}
+      />
+   );
+};
+
+export default PlanRemoveModal;

package/src/components/Plan/PlanSettings/PlanAdvancedSettings.tsx

@@ -0,0 +1,115 @@
+import { useMemo, useState } from 'react';
+import Icon from '../../common/Icon/Icon';
+import classes from './PlanSettings.module.scss';
+import PlanNotificationSettings from './PlanNotificationSettings';
+import PlanPruneSettings from './PlanPruneSettings';
+import PlanPerformanceSettings from './PlanPerformanceSettings';
+import { NewPlanSettings } from '../../../@types/plans';
+import TagsInput from '../../common/form/TagsInput/TagsInput';
+import PlanGeneralSettings from './PlanGeneralSettings';
+import { isMobile } from '../../../utils/helpers';
+import Select from '../../common/form/Select/Select';
+import PlanScriptsSettings from './PlanScriptsSettings';
+import { Device } from '../../../@types/devices';
+
+interface PlanAdvancedSettingsProps {
+   plan: NewPlanSettings;
+   appSettings?: Record<string, any>;
+   device: Device;
+   onUpdate: (notificationSettings: NewPlanSettings) => void;
+}
+
+const PlanAdvancedSettings = ({ plan, appSettings, device, onUpdate }: PlanAdvancedSettingsProps) => {
+   const [advancedTab, setAdvancedTab] = useState('General');
+   const settings = plan.settings;
+   const integrationTypes = useMemo(() => {
+      const types: string[] = [];
+      if (appSettings?.integration) {
+         Object.keys(appSettings.integration).forEach((k) => {
+            if (appSettings.integration[k] && appSettings.integration[k].connected) {
+               types.push(k);
+            }
+         });
+      }
+      return types;
+   }, [appSettings]);
+
+   return (
+      <div className={`${classes.advancedOptions} styled__scrollbar`}>
+         {isMobile() ? (
+            <Select
+               customClasses={classes.advancedSettingsSelect}
+               options={[
+                  { label: 'General', value: 'General', icon: 'folders' },
+                  { label: 'Prune', value: 'Prune', icon: 'prune' },
+                  { label: 'Performance', value: 'Performance', icon: 'performance' },
+                  { label: 'Notification', value: 'Notification', icon: 'notification' },
+                  { label: 'Misc.', value: 'Misc', icon: 'settings-alt' },
+               ]}
+               fieldValue={advancedTab}
+               full={true}
+               onUpdate={(val) => setAdvancedTab(val)}
+            />
+         ) : (
+            <>
+               <ul className={classes.advancedTabs}>
+                  <li onClick={() => setAdvancedTab('General')} className={advancedTab === 'General' ? classes.advancedTabActive : ''}>
+                     <Icon size={13} type="folders" /> General
+                  </li>
+                  <li onClick={() => setAdvancedTab('Prune')} className={advancedTab === 'Prune' ? classes.advancedTabActive : ''}>
+                     <Icon size={13} type="prune" /> Prune
+                  </li>
+                  <li onClick={() => setAdvancedTab('Performance')} className={advancedTab === 'Performance' ? classes.advancedTabActive : ''}>
+                     <Icon size={13} type="performance" /> Performance
+                  </li>
+                  <li onClick={() => setAdvancedTab('Notification')} className={advancedTab === 'Notification' ? classes.advancedTabActive : ''}>
+                     <Icon size={13} type="notification" /> Notification
+                  </li>
+                  <li onClick={() => setAdvancedTab('Scripts')} className={advancedTab === 'Scripts' ? classes.advancedTabActive : ''}>
+                     <Icon size={13} type="cli" /> Scripts
+                  </li>
+                  <li onClick={() => setAdvancedTab('Misc')} className={advancedTab === 'Misc' ? classes.advancedTabActive : ''}>
+                     <Icon size={14} type="settings-alt" /> Misc.
+                  </li>
+               </ul>
+            </>
+         )}
+         <div className={classes.advancedTabContent}>
+            {advancedTab === 'General' && (
+               <PlanGeneralSettings settings={settings} onUpdate={(newSettings) => onUpdate({ ...plan, settings: newSettings })} />
+            )}
+            {advancedTab === 'Notification' && (
+               <PlanNotificationSettings
+                  types={integrationTypes}
+                  plan={plan}
+                  admin_email={appSettings?.admin_email}
+                  onUpdate={(notification: NewPlanSettings['settings']['notification']) =>
+                     onUpdate({ ...plan, settings: { ...settings, notification } })
+                  }
+               />
+            )}
+            {advancedTab === 'Prune' && (
+               <PlanPruneSettings plan={plan} onUpdate={(prune) => onUpdate({ ...plan, settings: { ...settings, prune } })} />
+            )}
+            {advancedTab === 'Performance' && (
+               <PlanPerformanceSettings plan={plan} onUpdate={(performance) => onUpdate({ ...plan, settings: { ...settings, performance } })} />
+            )}
+            {advancedTab === 'Misc' && (
+               <div className={classes.field}>
+                  <label className={classes.label}>Tags</label>
+                  <TagsInput fieldValue={plan.tags || []} onUpdate={(val) => onUpdate({ ...plan, tags: val })} />
+               </div>
+            )}
+            {advancedTab === 'Scripts' && (
+               <PlanScriptsSettings
+                  settings={plan.settings?.scripts || {}}
+                  platform={device?.platform || undefined}
+                  onUpdate={(scripts: NewPlanSettings['settings']['scripts']) => onUpdate({ ...plan, settings: { ...plan.settings, scripts } })}
+               />
+            )}
+         </div>
+      </div>
+   );
+};
+
+export default PlanAdvancedSettings;

package/src/components/Plan/PlanSettings/PlanGeneralSettings.tsx

@@ -0,0 +1,53 @@
+import { NewPlanSettings } from '../../../@types/plans';
+import NumberInput from '../../common/form/NumberInput/NumberInput';
+import Toggle from '../../common/form/Toggle/Toggle';
+import classes from './PlanSettings.module.scss';
+
+interface PlanGeneralSettingsProps {
+   settings: NewPlanSettings['settings'];
+   onUpdate: (settings: NewPlanSettings['settings']) => void;
+}
+
+const PlanGeneralSettings = ({ settings, onUpdate }: PlanGeneralSettingsProps) => {
+   const { encryption, compression, retries, retryDelay } = settings;
+   return (
+      <>
+         <div className={classes.field}>
+            <label className={classes.label}>Encryption</label>
+            <Toggle
+               fieldValue={encryption}
+               onUpdate={(val: boolean) => onUpdate({ ...settings, encryption: val })}
+               description="Encrypt Source Files before backup"
+            />
+         </div>
+         <div className={classes.field}>
+            <label className={classes.label}>Compression</label>
+            <Toggle
+               fieldValue={compression}
+               onUpdate={(val: boolean) => onUpdate({ ...settings, compression: val })}
+               description="Compress Source Files before backup"
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Retries"
+               fieldValue={retries}
+               onUpdate={(val: number) => onUpdate({ ...settings, retries: val })}
+               hint="How many times a failed backups is retried. Default: 5."
+               inline={false}
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Retries Delay"
+               fieldValue={retryDelay}
+               onUpdate={(val: number) => onUpdate({ ...settings, retryDelay: val })}
+               hint="How long to wait before retrying a failed backup. Default: 300 seconds."
+               inline={false}
+            />
+         </div>
+      </>
+   );
+};
+
+export default PlanGeneralSettings;

package/src/components/Plan/PlanSettings/PlanNotificationSettings.tsx

@@ -0,0 +1,78 @@
+import classes from './PlanSettings.module.scss';
+import Select from '../../common/form/Select/Select';
+import Input from '../../common/form/Input/Input';
+import Toggle from '../../common/form/Toggle/Toggle';
+import { NewPlanSettings, PlanNotificationCase } from '../../../@types/plans';
+import { NavLink } from 'react-router';
+
+interface PlanNotificationSettingsProps {
+   plan: NewPlanSettings;
+   types: string[];
+   admin_email?: string;
+   onUpdate: (notificationSettings: NewPlanSettings['settings']['notification']) => void;
+}
+
+const PlanNotificationSettings = ({ plan, types = [], admin_email = '', onUpdate }: PlanNotificationSettingsProps) => {
+   const notificationSettings = plan.settings?.notification || {};
+
+   const updateNotificationEmails = (emails: string) => {
+      onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, emails } });
+   };
+
+   const hasConnectedIntegrations = types.length > 0;
+   const defaultEmail = !hasConnectedIntegrations && admin_email ? admin_email : '';
+
+   return (
+      <>
+         <div className={classes.field}>
+            <label className={classes.label}>Notification</label>
+            <Toggle
+               fieldValue={notificationSettings?.email?.enabled || false}
+               onUpdate={(val: boolean) => onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, enabled: val } })}
+               description={plan.method === 'sync' ? 'Notify Me when Sync fails' : 'Notify Me when Backup fails or succeeds'}
+            />
+         </div>
+         {notificationSettings?.email?.enabled && (
+            <>
+               {plan.method !== 'sync' && (
+                  <div className={classes.field}>
+                     <label className={classes.label}>Send Notification</label>
+                     <Select
+                        fieldValue={notificationSettings?.email?.case || 'failure'}
+                        options={[
+                           { label: 'On Start', value: 'start' },
+                           { label: 'On End', value: 'end' },
+                           { label: 'On Both Start & End', value: 'both' },
+                           { label: 'On Success Only', value: 'success' },
+                           { label: 'On Failure Only', value: 'failure' },
+                        ]}
+                        onUpdate={(val: string) =>
+                           onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, case: val as PlanNotificationCase } })
+                        }
+                     />
+                  </div>
+               )}
+               <div className={classes.field}>
+                  <label className={classes.label}>Email Addresses</label>
+                  <Input
+                     fieldValue={notificationSettings?.email?.emails || defaultEmail}
+                     onUpdate={(val) => updateNotificationEmails(val)}
+                     placeholder="john@gmail.com, chris@icloud.com"
+                     full={true}
+                     disabled={!hasConnectedIntegrations}
+                     error={!notificationSettings?.email?.emails ? 'Required' : undefined}
+                  />
+                  {!hasConnectedIntegrations && (
+                     <div className={classes.fieldNotice}>
+                        ⚠️ SMTP has not been setup yet. Set it up in <NavLink to={`/settings?t=integration`}>Settings</NavLink> to enable Email
+                        Notification.
+                     </div>
+                  )}
+               </div>
+            </>
+         )}
+      </>
+   );
+};
+
+export default PlanNotificationSettings;

package/src/components/Plan/PlanSettings/PlanPerformanceSettings.tsx

@@ -0,0 +1,87 @@
+import classes from './PlanSettings.module.scss';
+import Toggle from '../../common/form/Toggle/Toggle';
+import { NewPlanSettings } from '../../../@types/plans';
+import NumberInput from '../../common/form/NumberInput/NumberInput';
+
+interface PlanPerformanceSettingsProps {
+   plan: NewPlanSettings;
+   onUpdate: (perfSettings: NewPlanSettings['settings']['performance']) => void;
+}
+
+const PlanPerformanceSettings = ({ plan, onUpdate }: PlanPerformanceSettingsProps) => {
+   const perfSettings = plan.settings?.performance || {};
+   return (
+      <>
+         <div className={classes.field}>
+            <NumberInput
+               label="Max Processor Cores"
+               fieldValue={perfSettings?.maxProcessor || ''}
+               onUpdate={(val) => onUpdate({ ...perfSettings, maxProcessor: val })}
+               min={0}
+               max={64}
+               hint="Keep 0 or empty to use all cores"
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Read Concurrency"
+               fieldValue={perfSettings?.readConcurrency || ''}
+               onUpdate={(val) => onUpdate({ ...perfSettings, readConcurrency: val })}
+               min={0}
+               hint="Read n files Concurrently. Default: 2"
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Packet Size (MB)"
+               fieldValue={perfSettings?.packSize ? parseInt(perfSettings.packSize.replace('MiB', ''), 10) : ''}
+               onUpdate={(val) => onUpdate({ ...perfSettings, packSize: val + 'MiB' })}
+               min={0}
+               max={4000}
+            />
+         </div>
+
+         <div className={classes.field}>
+            <NumberInput
+               label="Concurrent File Uploads"
+               fieldValue={perfSettings?.transfers || ''}
+               onUpdate={(val) => onUpdate({ ...perfSettings, transfers: val })}
+               min={0}
+               max={100}
+               hint="Default: 4"
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Multi Thread Streams"
+               fieldValue={perfSettings?.multiThreadStream || ''}
+               onUpdate={(val) => onUpdate({ ...perfSettings, multiThreadStream: val })}
+               min={0}
+               max={100}
+               hint="Useful for large files. Default: 4"
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Buffer Size (MB)"
+               fieldValue={perfSettings?.bufferSize ? parseInt(perfSettings.bufferSize.replace('M', ''), 10) : ''}
+               onUpdate={(val) => onUpdate({ ...perfSettings, bufferSize: val ? val + 'M' : '' })}
+               min={0}
+               max={100}
+               hint="In Megabytes. Helps with streaming large files. Default: 4"
+            />
+         </div>
+         <div className={classes.field}>
+            <Toggle
+               label="Scan Before Backup"
+               fieldValue={perfSettings.scan || false}
+               onUpdate={(val: boolean) => onUpdate({ ...perfSettings, scan: val })}
+               hint="Scan Before Backup for estimated Backup Time"
+               inline={true}
+            />
+         </div>
+      </>
+   );
+};
+
+export default PlanPerformanceSettings;

package/src/components/Plan/PlanSettings/PlanPruneSettings.tsx

@@ -0,0 +1,104 @@
+import classes from './PlanSettings.module.scss';
+import Select from '../../common/form/Select/Select';
+import Input from '../../common/form/Input/Input';
+import Tristate from '../../common/form/Tristate/Tristate';
+import { NewPlanSettings } from '../../../@types/plans';
+import NumberInput from '../../common/form/NumberInput/NumberInput';
+
+interface PlanPruneSettingsProps {
+   plan: NewPlanSettings;
+   onUpdate: (pruneSettings: NewPlanSettings['settings']['prune']) => void;
+}
+
+const PlanPruneSettings = ({ plan, onUpdate }: PlanPruneSettingsProps) => {
+   const pruneSettings = plan.settings?.prune;
+
+   return (
+      <>
+         <div className={classes.field}>
+            <label className={classes.label}>Snapshot Removal Policy</label>
+            <Select
+               options={[
+                  { label: 'Remove by Age', value: 'forgetByAge' },
+                  { label: 'Remove by Date', value: 'forgetByDate' },
+                  { label: 'Custom Prune Policy', value: 'custom' },
+               ]}
+               fieldValue={pruneSettings.policy}
+               onUpdate={(val: string) => onUpdate({ ...pruneSettings, policy: val })}
+            />
+         </div>
+         {pruneSettings.policy === 'forgetByAge' && (
+            <div className={classes.field}>
+               <label className={classes.label}>Remove Snapshots Older Than</label>
+               <div className={classes.forgetByAgeField}>
+                  <NumberInput
+                     fieldValue={pruneSettings.forgetAge ? parseInt(pruneSettings.forgetAge.replace(/\D/g, ''), 10) : 3}
+                     onUpdate={(val) =>
+                        onUpdate({
+                           ...pruneSettings,
+                           forgetAge: (pruneSettings.forgetAge || '3m').replace(/\d+/g, val.toString()),
+                        })
+                     }
+                     placeholder="5"
+                     min={1}
+                     full={true}
+                  />
+                  <Tristate
+                     fieldValue={(pruneSettings.forgetAge || '3m').replace(/\d/g, '')}
+                     options={[
+                        { label: 'Days', value: 'd' },
+                        { label: 'Weeks', value: 'w' },
+                        { label: 'Months', value: 'm' },
+                     ]}
+                     onUpdate={(val: string) =>
+                        onUpdate({
+                           ...pruneSettings,
+                           forgetAge: (pruneSettings.forgetAge || '3m').replace(/\D/g, val),
+                        })
+                     }
+                  />
+               </div>
+            </div>
+         )}
+         {pruneSettings.policy === 'forgetByDate' && (
+            <div className={classes.field} style={{ width: '200px' }}>
+               <label className={classes.label}>Remove Snapshots Older Than</label>
+               <Input type="date" fieldValue={pruneSettings.forgetDate || ''} onUpdate={(val) => onUpdate({ ...pruneSettings, forgetDate: val })} />
+            </div>
+         )}
+         {pruneSettings.policy === 'custom' && (
+            <>
+               <div className={classes.field}>
+                  <label className={classes.label}>Custom Policy Settings</label>
+                  <div className={classes.customPolicyOption}>
+                     <span>Keep Daily Snapshots for </span>
+                     <NumberInput
+                        fieldValue={pruneSettings.keepDailySnaps || ''}
+                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepDailySnaps: val })}
+                     />
+                     <span>Days</span>
+                  </div>
+                  <div className={classes.customPolicyOption}>
+                     <span>Keep Weekly Snapshots for </span>
+                     <NumberInput
+                        fieldValue={pruneSettings.keepWeeklySnaps || ''}
+                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepWeeklySnaps: val })}
+                     />
+                     <span>Days</span>
+                  </div>
+                  <div className={classes.customPolicyOption}>
+                     <span>Keep Monthly Snapshots for </span>
+                     <NumberInput
+                        fieldValue={pruneSettings.keepMonthlySnaps || ''}
+                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepMonthlySnaps: val })}
+                     />
+                     <span>Days</span>
+                  </div>
+               </div>
+            </>
+         )}
+      </>
+   );
+};
+
+export default PlanPruneSettings;