@plutonhq/core-frontend 0.1.25 → 0.1.26

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@plutonhq/core-frontend",
    "description": "Pluton Core Frontend Library",
-   "version": "0.1.25",
+   "version": "0.1.26",
    "author": "Plutonhq",
    "license": "Apache-2.0",
    "publishConfig": {

package/src/@types/backups.ts

@@ -55,7 +55,7 @@ export type Backup = {
    started: number;
    ended: number;
    duration: number;
-   status: 'completed' | 'cancelled' | 'failed' | 'started';
+   status: 'completed' | 'cancelled' | 'failed' | 'started' | 'retrying' | 'initializing';
    inProgress: boolean;
    totalFiles: number;
    totalSize: number;

package/src/components/Plan/BackupEvents/BackupEvents.tsx

@@ -57,9 +57,11 @@ const BackupEvents = ({ id, type = 'backup', sourceId, sourceType, planId, inPro
                   <Icon type={inProgress ? 'loading' : hasFinished === 'Completed' ? 'check-circle-filled' : 'error-circle-filled'} size={14} />{' '}
                   {inProgress ? `${type} In Progress` : `${type} ${hasFinished}` || 'Unknown'}
                </div>
-               <div title="Duration" className={classes.duration}>
-                  <Icon type="clock" size={14} /> {(progressDataToUse?.duration && formatDuration(progressDataToUse.duration / 1000)) || 'N/A'}
-               </div>
+               {!inProgress && hasFinished && (
+                  <div title="Duration" className={classes.duration}>
+                     <Icon type="clock" size={14} /> {(progressDataToUse?.duration && formatDuration(progressDataToUse.duration / 1000)) || 'N/A'}
+                  </div>
+               )}
             </div>
             {isLoading && (
                <div className={classes.loading}>

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

@@ -15,6 +15,56 @@ interface PlanPruneModalProps {
 const PlanPruneModal = ({ planId, method, prune, snapshotsCount, taskPending, close }: PlanPruneModalProps) => {
    const pruneMutation = usePrunePlan();
 
+   const getBackupMessage = () => {
+      switch (prune.policy) {
+         case 'keepLast':
+            return (
+               <>
+                  Your plan is set to keep the last {prune.snapCount} backups.{' '}
+                  {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.'}
+               </>
+            );
+         case 'forgetByAge':
+            return (
+               <>
+                  Your plan is set to remove backups older than {planIntervalAgeName(prune.forgetAge || '3m')}, while always keeping at least{' '}
+                  {prune.snapCount || 1} backup{(prune.snapCount || 1) > 1 ? 's' : ''}. This action will remove any backups that exceed the retention
+                  policy.
+               </>
+            );
+         case 'custom':
+            return (
+               <>
+                  Your plan uses an advanced retention policy
+                  {prune.keepDailySnaps ? `, keeping daily backups for ${prune.keepDailySnaps} days` : ''}
+                  {prune.keepWeeklySnaps ? `, weekly backups for ${prune.keepWeeklySnaps} weeks` : ''}
+                  {prune.keepMonthlySnaps ? `, monthly backups for ${prune.keepMonthlySnaps} months` : ''}, while always keeping at least{' '}
+                  {prune.snapCount || 1} backup{(prune.snapCount || 1) > 1 ? 's' : ''}. This action will remove any backups that exceed the retention
+                  policy.
+               </>
+            );
+         case 'disable':
+            return <>Pruning is disabled for this plan. No backups will be removed.</>;
+         default:
+            return (
+               <>
+                  Your plan is set to maintain {prune.snapCount} recent backups.{' '}
+                  {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.'}
+               </>
+            );
+      }
+   };
+
+   const canPrune = () => {
+      if (prune.policy === 'disable') return false;
+      if (prune.policy === 'keepLast' && prune.snapCount >= snapshotsCount) return false;
+      return true;
+   };
+
    return (
       <ActionModal
          title={method === 'sync' ? 'Clean Up Old Revisions' : 'Clean Up Old Backups'}
@@ -23,25 +73,18 @@ const PlanPruneModal = ({ planId, method, prune, snapshotsCount, taskPending, cl
                {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.
+                     {prune.policy === 'forgetByAge' ? `file revisions newer than ${planIntervalAgeName(prune.forgetAge || '3m')}.` : ''} 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.'}
-                  </>
+                  getBackupMessage()
                )}
             </>
          }
          closeModal={() => !pruneMutation.isPending && close()}
          width="500px"
          primaryAction={{
-            title: method === 'sync' ? `Yes, Remove Old Revisions` : prune.snapCount < snapshotsCount ? 'Yes, Remove Old Backups' : '',
+            title: method === 'sync' ? 'Yes, Remove Old Revisions' : canPrune() ? 'Yes, Remove Old Backups' : '',
             type: 'default',
             isPending: pruneMutation.isPending,
             action: () =>

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

@@ -1,9 +1,9 @@
 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';
+import Toggle from '../../common/form/Toggle/Toggle';
 
 interface PlanPruneSettingsProps {
    plan: NewPlanSettings;
@@ -11,7 +11,7 @@ interface PlanPruneSettingsProps {
 }
 
 const PlanPruneSettings = ({ plan, onUpdate }: PlanPruneSettingsProps) => {
-   const pruneSettings = plan.settings?.prune;
+   const pruneSettings = plan.settings?.prune || {};
 
    return (
       <>
@@ -19,83 +19,167 @@ const PlanPruneSettings = ({ plan, onUpdate }: PlanPruneSettingsProps) => {
             <label className={classes.label}>Backup Retention Policy</label>
             <Select
                options={[
-                  { label: 'Remove by Age', value: 'forgetByAge' },
-                  { label: 'Remove by Date', value: 'forgetByDate' },
-                  { label: 'Custom Prune Policy', value: 'custom' },
+                  { label: 'Keep Number of Backups', value: 'keepLast' },
+                  { label: 'Remove Backups By Age', value: 'forgetByAge' },
+                  { label: 'Advanced Policy', value: 'custom' },
+                  { label: 'Keep All Backups (Disable Pruning)', value: 'disable' },
                ]}
-               fieldValue={pruneSettings.policy}
-               onUpdate={(val: string) => onUpdate({ ...pruneSettings, policy: val })}
+               fieldValue={pruneSettings.policy || 'keepLast'}
+               onUpdate={(val: string) => {
+                  // Reset snapCount to a default safe value if switching contexts, or retain if preferred
+                  onUpdate({ ...pruneSettings, policy: val, snapCount: val === 'keepLast' ? 5 : pruneSettings.snapCount });
+               }}
             />
          </div>
-         {pruneSettings.policy === 'forgetByAge' && (
+
+         {/* OPTION 1: KEEP LAST N */}
+         {pruneSettings.policy === 'keepLast' && (
             <div className={classes.field}>
-               <label className={classes.label}>Remove Backups 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 Backups Older Than</label>
-               <Input type="date" fieldValue={pruneSettings.forgetDate || ''} onUpdate={(val) => onUpdate({ ...pruneSettings, forgetDate: val })} />
+               <NumberInput
+                  label="Number of Backups to Keep"
+                  fieldValue={pruneSettings.snapCount || 5}
+                  onUpdate={(val) => onUpdate({ ...pruneSettings, snapCount: val })}
+                  placeholder="5"
+                  min={1}
+                  hint="Only the most recent 5 backups will be kept."
+                  inline={false}
+               />
             </div>
          )}
-         {pruneSettings.policy === 'custom' && (
+
+         {/* OPTION 2: REMOVE BY AGE */}
+         {pruneSettings.policy === 'forgetByAge' && (
             <>
                <div className={classes.field}>
-                  <label className={classes.label}>Custom Policy Settings</label>
-                  <div className={classes.customPolicyOption}>
-                     <span>Keep Daily Backups for </span>
+                  <label className={classes.label}>Remove Backups Older Than</label>
+                  <div className={classes.forgetByAgeField}>
                      <NumberInput
-                        fieldValue={pruneSettings.keepDailySnaps || ''}
-                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepDailySnaps: val })}
+                        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="3"
+                        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' },
+                           { label: 'Years', value: 'y' },
+                        ]}
+                        onUpdate={(val: string) =>
+                           onUpdate({
+                              ...pruneSettings,
+                              forgetAge: (pruneSettings.forgetAge || '3m').replace(/\D/g, val),
+                           })
+                        }
                      />
-                     <span>Days</span>
                   </div>
-                  <div className={classes.customPolicyOption}>
-                     <span>Keep Weekly Backups for </span>
+               </div>
+
+               {/* Fail-safe keeping minimum N backups so they aren't left with 0 backups if backups fail for a month */}
+               <div className={classes.field}>
+                  <label className={classes.label}>Minimum numbers of backups to keep</label>
+                  <div>
                      <NumberInput
-                        fieldValue={pruneSettings.keepWeeklySnaps || ''}
-                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepWeeklySnaps: val })}
+                        fieldValue={pruneSettings.snapCount || 1}
+                        onUpdate={(val) => onUpdate({ ...pruneSettings, snapCount: val })}
+                        min={1}
+                        placeholder="3"
+                        full={true}
                      />
-                     <span>Weeks</span>
                   </div>
-                  <div className={classes.customPolicyOption}>
-                     <span>Keep Monthly Backups for </span>
+               </div>
+            </>
+         )}
+
+         {/* OPTION 3: ADVANCED */}
+         {pruneSettings.policy === 'custom' && (
+            <div className={classes.field}>
+               <label className={classes.label}>Advanced Policy Settings</label>
+               <small className={classes.helperText} style={{ marginBottom: '15px', display: 'block', color: 'var(--text-muted)' }}>
+                  A backup is kept if it matches <strong>ANY</strong> of the checked rules below.
+               </small>
+
+               {/* Keep Daily */}
+               <div className={classes.customPolicyOption}>
+                  <Toggle
+                     fieldValue={!!pruneSettings.keepDailySnaps}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepDailySnaps: val ? 7 : undefined })}
+                     customClasses={classes.removeRemoteToggle}
+                     inline={true}
+                  />
+                  <span>Keep the latest daily backup for</span>
+                  <NumberInput
+                     fieldValue={pruneSettings.keepDailySnaps || ''}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepDailySnaps: val })}
+                     min={1}
+                  />
+                  <span>Days</span>
+               </div>
+
+               {/* Keep Weekly */}
+               <div className={classes.customPolicyOption}>
+                  <Toggle
+                     fieldValue={!!pruneSettings.keepWeeklySnaps}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepWeeklySnaps: val ? 4 : undefined })}
+                     customClasses={classes.removeRemoteToggle}
+                     inline={true}
+                  />
+                  <span>Keep the latest weekly backup for</span>
+                  <NumberInput
+                     fieldValue={pruneSettings.keepWeeklySnaps || ''}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepWeeklySnaps: val })}
+                     min={1}
+                  />
+                  <span>Weeks</span>
+               </div>
+
+               {/* Keep Monthly */}
+               <div className={classes.customPolicyOption}>
+                  <Toggle
+                     fieldValue={!!pruneSettings.keepMonthlySnaps}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepMonthlySnaps: val ? 12 : undefined })}
+                     customClasses={classes.removeRemoteToggle}
+                     inline={true}
+                  />
+                  <span>Keep the latest monthly backup for</span>
+                  <NumberInput
+                     fieldValue={pruneSettings.keepMonthlySnaps || ''}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepMonthlySnaps: val })}
+                     min={1}
+                  />
+                  <span>Months</span>
+               </div>
+               {/* Fail-safe keeping minimum N backups so they aren't left with 0 backups if backups fail for a month */}
+               <div className={classes.field} style={{ marginTop: '15px' }}>
+                  <label className={classes.label}>Minimum numbers of backups to keep</label>
+                  <div>
                      <NumberInput
-                        fieldValue={pruneSettings.keepMonthlySnaps || ''}
-                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepMonthlySnaps: val })}
+                        fieldValue={pruneSettings.snapCount || 1}
+                        onUpdate={(val) => onUpdate({ ...pruneSettings, snapCount: val })}
+                        min={1}
+                        placeholder="3"
+                        full={true}
                      />
-                     <span>Months</span>
                   </div>
                </div>
-            </>
+            </div>
+         )}
+
+         {/* OPTION 4: DISABLE */}
+         {pruneSettings.policy === 'disable' && (
+            <div className={classes.field}>
+               <small className={classes.helperText}>
+                  Pruning is disabled. Old backups will never be deleted. Make sure you have enough storage!
+               </small>
+            </div>
          )}
       </>
    );

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

@@ -113,10 +113,15 @@
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
+   gap: 10px;
    & > div {
       width: 100px;
       margin: 0 10px;
    }
+   div[class*='_toggleField'] {
+      width: auto;
+      margin: 0;
+   }
 }
 
 .typeFieldActive {

package/src/components/common/StatusLabel/StatusLabel.tsx

@@ -1,7 +1,7 @@
 import Icon from '../Icon/Icon';
 
 interface StatusLabelProps {
-   status: 'completed' | 'cancelled' | 'failed' | 'started';
+   status: 'completed' | 'cancelled' | 'failed' | 'started' | 'retrying' | 'initializing';
    hasError: boolean;
 }
 
@@ -30,6 +30,12 @@ const StatusLabel = ({ status, hasError }: StatusLabelProps) => {
             <Icon type={'loading'} size={15} /> In Progress
          </div>
       );
+   } else if (status === 'initializing') {
+      return (
+         <div>
+            <Icon type={'loading'} size={15} /> Initializing
+         </div>
+      );
    }
 };
 

package/src/components/common/form/NumberInput/NumberInput.module.scss

@@ -92,6 +92,7 @@
       width: 100%;
       .input {
          width: 100%;
+         min-width: 120px;
       }
    }
    &.fieldHasError {