@plutonhq/core-frontend 0.1.13 → 0.1.14

package/src/components/Plan/PlanItems/PlanItem.tsx

@@ -8,6 +8,7 @@ import classes from './PlanItem.module.scss';
 import { useDeletePlan, usePausePlan, usePerformBackup, useResumePlan } from '../../../services/plans';
 import { planIntervalName } from '../../../utils/plans';
 import PlanHistory from '../PlanHistory/PlanHistory';
+import PlanStorageInfo from '../PlanStorageInfo/PlanStorageInfo';
 
 interface PlanItemProps {
    plan: Plan;
@@ -156,9 +157,8 @@ const PlanItem = ({ plan, layout = 'list' }: PlanItemProps) => {
                         )}
                         <span className={classes.sourceCount}>{sourceConfig.includes.length}</span>
                      </span>{' '}
-                     {'-->'} {storage.type && <img src={`/providers/${storage.type}.png`} />}
-                     {storage.name}
-                     {/* {storagePath && storagePath !== '/' && '/' + storagePath} */}
+                     {'-->'}
+                     <PlanStorageInfo replicationSettings={plan.settings.replication} storage={storage} storagePath={plan.storagePath} />
                   </div>
                </NavLink>
             </div>

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

@@ -51,7 +51,7 @@ const PlanRemoveModal = ({ planId, taskPending, actionInProgress, close }: PlanR
                <Toggle
                   fieldValue={removeRemoteData}
                   onUpdate={setRemoveRemoteData}
-                  description={`Remove remote backup data from the Remote Storage`}
+                  description={`Remove backup data from the Storage`}
                   customClasses={classes.removeRemoteToggle}
                />
             </div>

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

@@ -0,0 +1,105 @@
+.mirrorSection {
+   margin-top: 10px;
+   padding: 15px 0;
+   border-top: 1px solid var(--line-color);
+}
+
+.mirrorSettings {
+   margin-top: 15px;
+   display: flex;
+   flex-direction: column;
+   gap: 15px;
+}
+
+.mirrorDestination {
+   padding: 15px;
+   border: 1px solid var(--field-line-color);
+   border-radius: 6px;
+}
+
+.mirrorHeader {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   margin-bottom: 10px;
+
+   label {
+      margin-bottom: 0 !important;
+   }
+}
+
+.mirrorHeaderRight {
+   display: flex;
+   gap: 6px;
+   .confirmBtn {
+      color: var(--primary-color);
+      background-color: var(--primary-color-light);
+      font-size: 0.7rem;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: all 0.12s linear;
+      &:hover:not(:disabled) {
+         background-color: var(--primary-color);
+         color: var(--primary-color-light);
+      }
+      &:disabled {
+         opacity: 0.6;
+         cursor: not-allowed;
+      }
+   }
+   .removeBtn {
+      color: var(--error-button-color);
+      font-size: 0.75rem;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: all 0.12s linear;
+      &:hover {
+         background-color: var(--error-bg-color);
+      }
+   }
+
+   .storagePositionControls {
+      button {
+         color: var(--icon-color);
+         &:hover {
+            color: var(--primary-color);
+         }
+         &:disabled {
+            opacity: 0.4;
+            color: var(--icon-color);
+            cursor: not-allowed;
+         }
+      }
+   }
+}
+
+.addMirrorBtn {
+   display: flex;
+   align-items: center;
+   gap: 6px;
+   padding: 10px 16px;
+   border: 1px dashed var(--field-line-color);
+   border-radius: 6px;
+   color: var(--content-text-color-light);
+   font-size: 0.75rem;
+   width: 100%;
+   justify-content: center;
+   transition: all 0.12s linear;
+   &:hover {
+      border-color: var(--primary-color);
+      color: var(--primary-color);
+      background-color: var(--primary-color-light);
+   }
+}
+
+.concurrentOption {
+   margin-top: 5px;
+   padding-top: 10px;
+   border-top: 1px solid var(--line-color);
+}

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

@@ -0,0 +1,334 @@
+import { useState, useCallback } from 'react';
+import { PlanReplicationSettings as ReplicationSettings, PlanReplicationStorage } from '../../../@types/plans';
+import Icon from '../../common/Icon/Icon';
+import StoragePicker from '../../common/form/StoragePicker/StoragePicker';
+import Toggle from '../../common/form/Toggle/Toggle';
+import classes from '../../Plan/AddPlan/AddPlan.module.scss';
+import mirrorClasses from './PlanReplicationSettings.module.scss';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useDeleteReplicationStorage } from '../../../services';
+import { toast } from 'react-toastify';
+import { nanoid } from 'nanoid';
+
+interface PlanReplicationSettingsProps {
+   replication?: ReplicationSettings;
+   primaryStorageId: string;
+   primaryStoragePath?: string;
+   deviceId: string;
+   isEditing?: boolean;
+   planID?: string;
+   maxReplications?: number;
+   onUpdate: (replication: ReplicationSettings) => void;
+}
+
+const defaultReplication: ReplicationSettings = {
+   enabled: false,
+   concurrent: false,
+   storages: [],
+};
+
+const MAX_REPLICATIONS = 2;
+
+const PlanReplicationSettings = ({
+   replication,
+   primaryStorageId,
+   primaryStoragePath,
+   deviceId,
+   isEditing = false,
+   planID,
+   maxReplications: maxReplicationsProp,
+   onUpdate,
+}: PlanReplicationSettingsProps) => {
+   const [tempStorages, setTempStorages] = useState<PlanReplicationStorage[]>([]);
+   const [removeStorageData, setRemoveStorageData] = useState<boolean>(false);
+   const [showRemoveModal, setShowRemoveModal] = useState<boolean | PlanReplicationStorage>(false);
+
+   const deleteStorageMutation = useDeleteReplicationStorage();
+   const settings = replication || defaultReplication;
+
+   /** Check if a storage+path combination already exists in committed or temp storages */
+   const isDuplicateStorage = useCallback(
+      (storageId: string, storagePath: string, excludeCommittedIndex?: number, excludeTempIndex?: number) => {
+         // Skip duplicate check if storageId or storagePath is empty (incomplete selection)
+         if (!storageId || !storagePath) return false;
+         const committedDuplicate = settings.storages.some(
+            (s, i) =>
+               (excludeCommittedIndex === undefined || i !== excludeCommittedIndex) && s.storageId === storageId && s.storagePath === storagePath,
+         );
+         const tempDuplicate = tempStorages.some(
+            (s, i) => (excludeTempIndex === undefined || i !== excludeTempIndex) && s.storageId === storageId && s.storagePath === storagePath,
+         );
+         return committedDuplicate || tempDuplicate;
+      },
+      [settings.storages, tempStorages],
+   );
+
+   const updateEnabled = (enabled: boolean) => {
+      onUpdate({ ...settings, enabled });
+   };
+
+   const updateConcurrent = (concurrent: boolean) => {
+      onUpdate({ ...settings, concurrent });
+   };
+
+   const addReplicationStorage = () => {
+      if (isEditing) {
+         const maxReplications = maxReplicationsProp ?? MAX_REPLICATIONS;
+         if (settings.storages.length + tempStorages.length >= maxReplications) return;
+         setTempStorages([...tempStorages, { replicationId: nanoid(), storageId: '', storagePath: '', storageType: '', addedAt: Date.now() }]);
+      } else {
+         const maxReplications = maxReplicationsProp ?? MAX_REPLICATIONS;
+         if (settings.storages.length >= maxReplications) return;
+         onUpdate({
+            ...settings,
+            storages: [...settings.storages, { replicationId: nanoid(), storageId: '', storagePath: '', storageType: '', addedAt: Date.now() }],
+         });
+      }
+   };
+
+   const updateTempStorage = (index: number, storage: PlanReplicationStorage) => {
+      setTempStorages((prev) => {
+         const updated = [...prev];
+         updated[index] = storage;
+         return updated;
+      });
+   };
+
+   const confirmAddStorage = (index: number) => {
+      const storage = tempStorages[index];
+      if (!storage.storageId) return;
+      if (storage.storageId === primaryStorageId && storage.storagePath === primaryStoragePath) {
+         toast.error('Cannot replicate to the same storage as the primary backup.');
+         return;
+      }
+      if (isDuplicateStorage(storage.storageId, storage.storagePath, undefined, index)) {
+         toast.error('This storage destination is already added.');
+         return;
+      }
+      setTempStorages((prev) => prev.filter((_, i) => i !== index));
+      onUpdate({ ...settings, storages: [...settings.storages, storage] });
+   };
+
+   const removeTempStorage = (index: number) => {
+      setTempStorages((prev) => prev.filter((_, i) => i !== index));
+   };
+
+   const updateReplicationStorage = (index: number, storage: PlanReplicationStorage) => {
+      const updated = [...settings.storages];
+      updated[index] = storage;
+      onUpdate({ ...settings, storages: updated });
+   };
+
+   const removeAddedStorage = (index: number) => {
+      const updated = settings.storages.filter((_, i) => i !== index);
+      onUpdate({ ...settings, storages: updated });
+   };
+
+   const removeReplicationStorage = () => {
+      if (typeof showRemoveModal === 'object' && planID) {
+         const storageToRemove = showRemoveModal;
+         deleteStorageMutation.mutate(
+            {
+               planID: planID,
+               storageID: storageToRemove.storageId,
+               removeData: removeStorageData,
+               storagePath: storageToRemove.storagePath,
+               replicationId: storageToRemove.replicationId,
+            },
+            {
+               onSuccess: () => {
+                  // Remove the storage from local state and close modal
+                  const updated = settings.storages.filter((s) => s.replicationId !== storageToRemove.replicationId);
+                  onUpdate({ ...settings, storages: updated, ...(updated.length === 0 && { enabled: false }) });
+                  setShowRemoveModal(false);
+                  setRemoveStorageData(false);
+                  deleteStorageMutation.reset();
+               },
+            },
+         );
+      }
+   };
+
+   const openRemoveModal = (mirror: PlanReplicationStorage) => {
+      setRemoveStorageData(false);
+      deleteStorageMutation.reset();
+      setShowRemoveModal(mirror);
+   };
+
+   return (
+      <div className={classes.field}>
+         <div className={mirrorClasses.mirrorSection}>
+            <Toggle
+               label="Enable Replication"
+               description="Replicate backups to additional storage destinations for redundancy (3-2-1 backup strategy)"
+               fieldValue={settings.enabled}
+               onUpdate={updateEnabled}
+            />
+
+            {settings.enabled && (
+               <div className={mirrorClasses.mirrorSettings}>
+                  {settings.storages.map((mirror, index) => (
+                     <div key={mirror.addedAt || index} className={mirrorClasses.mirrorDestination}>
+                        <div className={mirrorClasses.mirrorHeader}>
+                           <label className={classes.label}>Replication Destination {index + 1}</label>
+                           <div className={mirrorClasses.mirrorHeaderRight}>
+                              {settings.storages.length > 1 && (
+                                 <div className={mirrorClasses.storagePositionControls}>
+                                    <button
+                                       title="Move Up"
+                                       disabled={index === 0}
+                                       onClick={() => {
+                                          const updatedStorages = [...(settings.storages || [])];
+                                          const [movedStorage] = updatedStorages.splice(index, 1);
+                                          updatedStorages.splice(index - 1, 0, movedStorage);
+                                          onUpdate({ ...settings, storages: updatedStorages });
+                                       }}
+                                    >
+                                       <Icon type={'caret-up'} size={14} />
+                                    </button>
+                                    <button
+                                       title="Move Down"
+                                       disabled={index === settings.storages.length - 1}
+                                       onClick={() => {
+                                          const updatedStorages = [...(settings.storages || [])];
+                                          const [movedStorage] = updatedStorages.splice(index, 1);
+                                          updatedStorages.splice(index + 1, 0, movedStorage);
+                                          onUpdate({ ...settings, storages: updatedStorages });
+                                       }}
+                                    >
+                                       <Icon type={'caret-down'} size={14} />
+                                    </button>
+                                 </div>
+                              )}
+                              <button
+                                 className={mirrorClasses.removeBtn}
+                                 onClick={() => (isEditing ? openRemoveModal(mirror) : removeAddedStorage(index))}
+                                 title="Remove replication destination"
+                              >
+                                 <Icon type="trash" size={14} /> Remove
+                              </button>
+                           </div>
+                        </div>
+                        <StoragePicker
+                           storagePath={mirror.storagePath}
+                           storageId={mirror.storageId}
+                           deviceId={deviceId}
+                           disabled={isEditing}
+                           onUpdate={(s) => {
+                              if (s.storage.id === primaryStorageId && s.path === primaryStoragePath) {
+                                 toast.error('Cannot replicate to the same storage as the primary backup.');
+                                 return;
+                              }
+                              updateReplicationStorage(index, {
+                                 replicationId: mirror.replicationId,
+                                 storageId: s.storage.id,
+                                 storagePath: s.path,
+                                 storageType: s.storage.type,
+                                 storageName: s.storage.name,
+                                 addedAt: mirror.addedAt,
+                              });
+                           }}
+                        />
+                     </div>
+                  ))}
+
+                  {isEditing &&
+                     tempStorages.map((tempStorage, index) => (
+                        <div key={tempStorage.addedAt} className={mirrorClasses.mirrorDestination}>
+                           <div className={mirrorClasses.mirrorHeader}>
+                              <label className={classes.label}>Replication Destination {settings.storages.length + index + 1}</label>
+                              <div className={mirrorClasses.mirrorHeaderRight}>
+                                 <button
+                                    className={mirrorClasses.confirmBtn}
+                                    onClick={() => confirmAddStorage(index)}
+                                    disabled={!tempStorage.storageId}
+                                    title={!tempStorage.storageId ? 'Select Storage Type to add the storage' : 'Confirm replication destination'}
+                                 >
+                                    <Icon type="check" size={11} /> Confirm
+                                 </button>
+                                 <button
+                                    className={mirrorClasses.removeBtn}
+                                    onClick={() => removeTempStorage(index)}
+                                    title="Remove replication destination"
+                                 >
+                                    <Icon type="trash" size={14} /> Remove
+                                 </button>
+                              </div>
+                           </div>
+                           <StoragePicker
+                              storagePath={tempStorage.storagePath}
+                              storageId={tempStorage.storageId}
+                              deviceId={deviceId}
+                              disabled={false}
+                              onUpdate={(s) => {
+                                 updateTempStorage(index, {
+                                    replicationId: tempStorage.replicationId,
+                                    storageId: s.storage.id,
+                                    storagePath: s.path,
+                                    storageType: s.storage.type,
+                                    storageName: s.storage.name,
+                                    addedAt: tempStorage.addedAt,
+                                 });
+                              }}
+                           />
+                        </div>
+                     ))}
+
+                  {settings.storages.length + (isEditing ? tempStorages.length : 0) < (maxReplicationsProp ?? MAX_REPLICATIONS) && (
+                     <button className={mirrorClasses.addMirrorBtn} onClick={addReplicationStorage}>
+                        <Icon type="plus" size={12} /> + Add Replication Destination
+                     </button>
+                  )}
+
+                  {settings.storages.length > 1 && (
+                     <div className={mirrorClasses.concurrentOption}>
+                        <Toggle
+                           label="Run replications concurrently"
+                           description="Run replications in parallel to speed up the backup process"
+                           fieldValue={settings.concurrent}
+                           onUpdate={updateConcurrent}
+                        />
+                     </div>
+                  )}
+               </div>
+            )}
+         </div>
+
+         {showRemoveModal && (
+            <ActionModal
+               title="Remove Replication Storage"
+               message={
+                  <div>
+                     <p>Are you sure you want to remove this Replication storage from this plan?</p>
+                     <Toggle
+                        fieldValue={removeStorageData}
+                        onUpdate={() => setRemoveStorageData((prev) => !prev)}
+                        description={`Remove replicated data from the Storage`}
+                        customClasses={classes.removeRemoteToggle}
+                     />
+                  </div>
+               }
+               closeModal={() => {
+                  if (!deleteStorageMutation.isPending) {
+                     setShowRemoveModal(false);
+                     setRemoveStorageData(false);
+                     deleteStorageMutation.reset();
+                  }
+               }}
+               width="400px"
+               errorMessage={deleteStorageMutation.isError && 'Error Removing Replication Storage!'}
+               successMessage={deleteStorageMutation.isSuccess && 'Removed Replication Storage Successfully!'}
+               primaryAction={{
+                  title: 'Yes, Remove Storage',
+                  type: 'danger',
+                  icon: 'trash',
+                  isPending: deleteStorageMutation.isPending,
+                  action: () => removeReplicationStorage(),
+               }}
+            />
+         )}
+      </div>
+   );
+};
+
+export default PlanReplicationSettings;

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

@@ -109,7 +109,7 @@
       }
    }
    .health {
-      width: 38%;
+      width: 33%;
    }
 }
 

package/src/components/Plan/PlanStats/PlanStats.tsx

@@ -3,6 +3,7 @@ import { Plan } from '../../../@types/plans';
 import { formatBytes, formatNumberToK } from '../../../utils/helpers';
 import PlanHistory from '../PlanHistory/PlanHistory';
 import classes from './PlanStats.module.scss';
+import PlanStorageInfo from '../PlanStorageInfo/PlanStorageInfo';
 
 interface PlanStatsProps {
    plan: Plan;
@@ -55,14 +56,13 @@ const PlanStats = ({ plan, isSync, lastBackupItem }: PlanStatsProps) => {
                   <Icon type={isActive ? (isSync ? 'reload' : 'copy') : 'pause'} size={16} />
                   <div className={classes.sourceArrow}>→</div>
                </div>
-               <div
-                  data-tooltip-id="htmlToolTip"
-                  data-tooltip-place="top"
-                  data-tooltip-html={`<div><strong>Storage:</strong> ${storage?.name}</div><div><strong>Path:</strong> ${storagePath || '/'}</div>`}
-               >
-                  {storage?.type && <img src={`/providers/${storage?.type}.png`} />}
-                  {storage?.name}
-               </div>
+               <PlanStorageInfo
+                  disableTooltip={false}
+                  inline={false}
+                  replicationSettings={plan.settings.replication}
+                  storage={storage}
+                  storagePath={storagePath}
+               />
             </div>
          </div>
          <div className={classes.snapshots}>

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

@@ -0,0 +1,43 @@
+.planStorages {
+   .storageWithReplications {
+      display: flex;
+      flex-direction: column;
+      .storageIcons {
+         display: inline-block;
+         img {
+            width: auto;
+            max-height: 14px;
+            display: inline-block !important;
+            position: relative;
+            margin-left: -10px;
+            padding: 3px;
+            border-radius: 50%;
+            background: var(--content-background-color);
+            border: 1px solid var(--line-color);
+         }
+         img:nth-child(1) {
+            z-index: 99;
+            margin-left: 0;
+         }
+      }
+   }
+   &.inline {
+      display: inline-block;
+      margin-left: 5px;
+      .storageWithReplications {
+         flex-direction: row;
+         align-items: center;
+         .storageIcons {
+            img {
+               margin-left: 0px;
+               padding: 0;
+               background: transparent;
+               border: none;
+            }
+         }
+      }
+      .storageName {
+         display: inline-block;
+      }
+   }
+}

package/src/components/Plan/PlanStorageInfo/PlanStorageInfo.tsx

@@ -0,0 +1,83 @@
+import { PlanReplicationSettings } from '../../../@types';
+import classes from './PlanStorageInfo.module.scss';
+
+interface PlanStorageInfoProps {
+   storage: { name: string; type: string; id: string };
+   storagePath: string;
+   replicationSettings?: PlanReplicationSettings;
+   disableTooltip?: boolean;
+   inline?: boolean;
+}
+
+const PlanStorageInfo = ({ replicationSettings, storage, storagePath, disableTooltip = true, inline = true }: PlanStorageInfoProps) => {
+   console.log('replicationSettings :', replicationSettings);
+   return (
+      <>
+         {replicationSettings && replicationSettings.enabled && replicationSettings.storages.length > 0 ? (
+            <div
+               className={`${classes.planStorages} ${inline ? classes.inline : ''}`}
+               data-tooltip-hidden={disableTooltip}
+               data-tooltip-id="htmlToolTip"
+               data-tooltip-place="top"
+               data-tooltip-html={`
+                           <div style="display: flex; flex-direction: column; gap: 8px;">
+                           <div>
+                              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                                 <img style="width: 24px; height: 24px;" src="/providers/${storage?.type}.png" />
+                                 <div>
+                                    <strong style="display: block;">${storage?.name}</strong>
+                                    ${storagePath || '/'}
+                                 </div>
+                              </div>
+                           </div>
+                           ${replicationSettings.storages
+                              .slice(0, 3)
+                              .map(
+                                 (s) => `
+                              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                                 <img style="width: 24px; height: 24px;" src="/providers/${s?.storageType}.png" />
+                                 <div>
+                                    <strong style="display: block;">${s?.storageName} (Mirror)</strong>
+                                    ${s?.storagePath || '/'}
+                                 </div>
+                              </div>
+                                    `,
+                              )
+                              .join('')}
+                        </div>`}
+            >
+               <div className={classes.storageWithReplications}>
+                  <div className={classes.storageIcons}>
+                     <img src={`/providers/${storage?.type}.png`} />
+                     {replicationSettings.storages.map((s, index) => (
+                        <img key={s.replicationId} src={`/providers/${s.storageType}.png`} style={{ zIndex: 98 - index }} />
+                     ))}
+                  </div>
+                  <div className={classes.storageName}>{replicationSettings.storages.length + 1} Storages</div>
+               </div>
+            </div>
+         ) : (
+            <div
+               className={`${classes.planStorages} ${inline ? classes.inline : ''}`}
+               data-tooltip-hidden={disableTooltip}
+               data-tooltip-id="htmlToolTip"
+               data-tooltip-place="top"
+               data-tooltip-html={`
+                           <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                              <img style="width: 24px; height: 24px;" src="/providers/${storage?.type}.png" />
+                              <div>
+                                 <strong style="display: block;">${storage?.name}</strong>
+                                 ${storagePath || '/'}
+                              </div>
+                           </div>
+                        `}
+            >
+               <img src={`/providers/${storage?.type}.png`} />
+               <div className={classes.storageName}>{storage?.name}</div>
+            </div>
+         )}
+      </>
+   );
+};
+
+export default PlanStorageInfo;

package/src/components/Restore/RestoreWizard/RestoreConfirmStep.tsx

@@ -33,6 +33,8 @@ const RestoreConfirmStep = ({ backupId, planId, settings, stats, snapshotsStats,
             includes: settings.includes,
             excludes: settings.excludes,
             deleteOption: settings.delete,
+            storageId: settings.storageId,
+            replicationId: settings.replicationId,
          },
          {
             onSuccess: (data: any, variables) => {

package/src/components/Restore/RestoreWizard/RestorePreviewStep.tsx

@@ -57,6 +57,8 @@ const RestorePreviewStep = ({ backupId, planId, settings, preview, nextLabel, go
             includes: settings.includes,
             excludes: settings.excludes,
             deleteOption: settings.delete,
+            storageId: settings.storageId,
+            replicationId: settings.replicationId,
          },
          {
             onSuccess: (data) => {