@plutonhq/core-frontend 0.1.13 → 0.1.14

package/src/components/Plan/Backups/Backups.tsx

@@ -12,6 +12,8 @@ import RestoreWizard from '../../Restore/RestoreWizard/RestoreWizard';
 import StatusLabel from '../../common/StatusLabel/StatusLabel';
 import BackupEvents from '../BackupEvents/BackupEvents';
 import Input from '../../common/form/Input/Input';
+import MirrorStatusBadge from '../Mirrors/MirrorStatusBadge';
+import MirrorStorageSelectorModal from '../Mirrors/MirrorStorageSelectorModal';
 
 const DownloadLabel = ({ download, downloadBackup }: { download: Backup['download']; downloadBackup: () => void }) => {
    if (download?.status === 'started') {
@@ -67,6 +69,9 @@ const Backups = ({
    backups = [],
    sourceId,
    sourceType,
+   replicationSettings,
+   storage,
+   deviceId,
    // snapLimit,
 }: {
    planId: string;
@@ -75,12 +80,20 @@ const Backups = ({
    sourceId: string;
    sourceType: string;
    snapLimit: number;
+   deviceId: string;
+   storage: {
+      id: string;
+      type: string;
+      name: string;
+   };
+   replicationSettings: Plan['settings']['replication'];
 }) => {
    const [showSnapOptions, setShowSnapOptions] = useState<false | string>(false);
    const [showDeleteModal, setShowDeleteModal] = useState<Backup | false>(false);
    const [showRestoreModal, setShowRestoreModal] = useState<Backup | false>(false);
    const [showBackupEvents, setShowBackupEvents] = useState<false | string>(false);
    const [showEditModal, setShowEditModal] = useState<Backup | false>(false);
+   const [showStorageSelector, setShowStorageSelector] = useState<Backup | false>(false);
    const queryClient = useQueryClient();
    const deleteBackupMutation = useDeleteBackup();
    const updateBackupMutation = useUpdateBackup();
@@ -129,8 +142,16 @@ const Backups = ({
       );
    };
 
-   const downloadBackup = (backupId: string) => {
-      toast.promise(downloadBackupMutation.mutateAsync({ backupId, planId }), {
+   const handleDownloadClick = (backup: Backup) => {
+      if (replicationSettings?.enabled && backup.mirrors && backup.mirrors.some((m) => m.status === 'completed')) {
+         setShowStorageSelector(backup);
+      } else {
+         downloadBackup(backup.id);
+      }
+   };
+
+   const downloadBackup = (backupId: string, replicationId?: string) => {
+      toast.promise(downloadBackupMutation.mutateAsync({ backupId, planId, replicationId }), {
          pending: 'Sending Download Request...',
          success: 'Generating Download. This might take a while..',
          error: {
@@ -199,6 +220,9 @@ const Backups = ({
                                  <Icon type="bolt" size={14} />
                               </span>
                            )}
+                           {replicationSettings?.enabled && snapshot.mirrors && snapshot.mirrors.length > 0 && (
+                              <MirrorStatusBadge mirrors={snapshot.mirrors} planId={planId} backupId={id} replicationSettings={replicationSettings} />
+                           )}
                            {download && <DownloadLabel download={download} downloadBackup={() => getDownloadMutation.mutate(id)} />}
                         </div>
                         <div
@@ -257,7 +281,7 @@ const Backups = ({
                                        if (isDownloading) {
                                           cancelDownload(id);
                                        } else {
-                                          downloadBackup(id);
+                                          handleDownloadClick(snapshot);
                                        }
                                        setShowSnapOptions(false);
                                     }}
@@ -319,7 +343,20 @@ const Backups = ({
                }}
             />
          )}
-         {showRestoreModal && <RestoreWizard close={() => setShowRestoreModal(false)} planId={planId} backupId={showRestoreModal.id} />}
+         {showRestoreModal && (
+            <RestoreWizard
+               close={() => setShowRestoreModal(false)}
+               planId={planId}
+               backupId={showRestoreModal.id}
+               deviceId={deviceId}
+               planStorage={storage}
+               mirrors={
+                  replicationSettings?.enabled && showRestoreModal.mirrors && showRestoreModal.mirrors.some((m) => m.status === 'completed')
+                     ? showRestoreModal.mirrors
+                     : []
+               }
+            />
+         )}
          {showBackupEvents && (
             <BackupEvents
                id={showBackupEvents}
@@ -366,6 +403,17 @@ const Backups = ({
                }}
             />
          )}
+         {showStorageSelector && (
+            <MirrorStorageSelectorModal
+               mirrors={showStorageSelector.mirrors || []}
+               primaryStorage={storage}
+               onSelect={(replicationId) => {
+                  downloadBackup(showStorageSelector.id, replicationId);
+                  setShowStorageSelector(false);
+               }}
+               onClose={() => setShowStorageSelector(false)}
+            />
+         )}
       </div>
    );
 };

package/src/components/Plan/EditPlan/EditPlan.tsx

@@ -42,6 +42,7 @@ const EditPlan = ({ close, plan }: EditPlanProps) => {
       <PlanForm
          title="Edit Plan"
          type="edit"
+         planId={plan.id}
          planSettings={newPlan}
          isSubmitting={updatePlanMutation.isPending}
          storagePath={plan.storagePath}

package/src/components/Plan/Mirrors/MirrorDetails.module.scss

@@ -0,0 +1,76 @@
+.mirrorStats {
+   display: flex;
+   flex-direction: row;
+   justify-content: space-between;
+   padding: 12px 4px;
+}
+
+.mirrorList {
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   .mirrorItem {
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--line-color);
+
+      .mirrorItemContent {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+      }
+      img {
+         max-width: 14px;
+         vertical-align: middle;
+         margin-right: 2px;
+      }
+      .mirrorItemLabel {
+         i {
+            color: var(--content-text-color-light);
+            font-size: 0.7rem;
+            font-style: normal;
+            margin-left: 5px;
+         }
+      }
+      .mirrorItemStatus {
+         .retryButton {
+            border-radius: 12px;
+            padding: 2px 12px;
+            margin-right: 5px;
+            border: 1px solid var(--line-active-color);
+            cursor: pointer;
+            :global(.icon) {
+               color: var(--icon-color) !important;
+            }
+            &:hover {
+               background-color: var(--primary-color);
+               color: white;
+               border-color: var(--primary-color);
+               :global(.icon) {
+                  color: white !important;
+               }
+            }
+         }
+         span {
+            color: var(--icon-color);
+         }
+         &.mirrorItemStatus.completed {
+            span {
+               color: var(--success-text-color);
+            }
+         }
+         &.mirrorItemStatus.failed {
+            span {
+               color: var(--error-button-color);
+            }
+         }
+      }
+      .mirrorItemError {
+         width: 100%;
+         background-color: var(--error-bg-color);
+         color: var(--error-text-color);
+         border-radius: 6px;
+         padding: 12px;
+         box-sizing: border-box;
+         margin-top: 12px;
+      }
+   }
+}

package/src/components/Plan/Mirrors/MirrorDetails.tsx

@@ -0,0 +1,100 @@
+import { toast } from 'react-toastify';
+import { Backup, PlanReplicationSettings } from '../../../@types';
+import { useRetryFailedReplications } from '../../../services';
+import { formatBytes, formatDuration } from '../../../utils';
+import Icon from '../../common/Icon/Icon';
+import Modal from '../../common/Modal/Modal';
+import classes from './MirrorDetails.module.scss';
+
+interface MirrorDetailsProps {
+   mirrors: Backup['mirrors'];
+   replicationSettings?: PlanReplicationSettings;
+   backupId: string;
+   backupTitle?: string;
+   planId: string;
+   close: () => void;
+}
+
+const MirrorDetails = ({ mirrors = [], backupId, backupTitle, planId, close }: MirrorDetailsProps) => {
+   const retryReplicationsMutation = useRetryFailedReplications();
+
+   const retryReplication = (backupId: string, replicationId: string) => {
+      toast.promise(retryReplicationsMutation.mutateAsync({ backupId, planId, replicationId }), {
+         pending: 'Retrying failed replication...',
+         success: 'Replication retry queued!',
+         error: {
+            render({ data }: any) {
+               return `Failed to retry replication. ${data?.message || 'Unknown Error.'}`;
+            },
+         },
+      });
+   };
+
+   return (
+      <Modal title={`Mirrors for ${backupTitle ? backupTitle : 'backup-' + backupId}`} closeModal={close} width="560px">
+         <div>
+            <div className={classes.mirrorList}>
+               {mirrors && mirrors.length > 0 ? (
+                  mirrors.map((mirror, index) => {
+                     const duration = mirror.ended && mirror.started ? formatDuration((mirror.ended - mirror.started) / 1000) : 'N/A';
+                     const mirrorSize = mirror.size ? formatBytes(mirror.size) : '';
+                     const label =
+                        mirror.status === 'completed'
+                           ? 'Completed'
+                           : mirror.status === 'failed'
+                             ? 'Failed'
+                             : mirror.status === 'started'
+                               ? 'In Progress'
+                               : 'Pending';
+                     const iconType =
+                        mirror.status === 'completed'
+                           ? 'check'
+                           : mirror.status === 'failed'
+                             ? 'error'
+                             : mirror.status === 'started'
+                               ? 'loading'
+                               : 'clock';
+                     return (
+                        <div key={index} className={classes.mirrorItem}>
+                           <div className={classes.mirrorItemContent}>
+                              <div className={classes.mirrorItemLabel}>
+                                 <img src={`/providers/${mirror.storageType}.png`} /> {mirror.storageName}{' '}
+                                 {mirror.status === 'completed' && (
+                                    <>
+                                       {mirrorSize && (
+                                          <i>
+                                             <Icon type="disk" size={12} /> {mirrorSize}
+                                          </i>
+                                       )}{' '}
+                                       <i>
+                                          <Icon type="clock" size={12} /> {duration}
+                                       </i>
+                                    </>
+                                 )}
+                              </div>
+                              <div className={`${classes.mirrorItemStatus} ${classes[mirror.status]}`}>
+                                 {mirror.status === 'failed' && (
+                                    <button
+                                       className={classes.retryButton}
+                                       onClick={() => !retryReplicationsMutation.isPending && retryReplication(backupId, mirror.replicationId)}
+                                    >
+                                       <Icon type={'reload'} size={14} /> Retry
+                                    </button>
+                                 )}{' '}
+                                 <Icon type={iconType} size={12} /> {label}
+                              </div>
+                           </div>
+                           {mirror.error && <div className={classes.mirrorItemError}>{mirror.error}</div>}
+                        </div>
+                     );
+                  })
+               ) : (
+                  <div>No mirrors available.</div>
+               )}
+            </div>
+         </div>
+      </Modal>
+   );
+};
+
+export default MirrorDetails;

package/src/components/Plan/Mirrors/MirrorStatusBadge.module.scss

@@ -0,0 +1,25 @@
+.badge {
+   display: inline-flex;
+   align-items: center;
+   gap: 3px;
+   padding: 1px 4px;
+   cursor: default;
+   white-space: nowrap;
+   cursor: pointer;
+}
+
+.badgeSuccess {
+   color: var(--success-text-color);
+}
+
+.badgePartial {
+   color: var(--warning-button-color);
+}
+
+.badgeFailed {
+   color: var(--error-text-color);
+}
+
+.badgeProgress {
+   color: #7e90c5;
+}

package/src/components/Plan/Mirrors/MirrorStatusBadge.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { BackupMirror } from '../../../@types/backups';
+import Icon from '../../common/Icon/Icon';
+import classes from './MirrorStatusBadge.module.scss';
+import MirrorDetails from './MirrorDetails';
+import { PlanReplicationSettings } from '../../../@types';
+
+interface MirrorStatusBadgeProps {
+   mirrors: BackupMirror[];
+   planId: string;
+   backupId: string;
+   replicationSettings?: PlanReplicationSettings;
+}
+
+const MirrorStatusBadge = ({ mirrors, planId, backupId, replicationSettings }: MirrorStatusBadgeProps) => {
+   const [showMirrorDetails, setShowMirrorDetails] = useState(false);
+   if (!mirrors || mirrors.length === 0) return null;
+
+   const completed = mirrors.filter((m) => m.status === 'completed').length;
+   const failed = mirrors.filter((m) => m.status === 'failed').length;
+   const inProgress = mirrors.filter((m) => m.status === 'started' || m.status === 'pending').length;
+   const total = mirrors.length;
+
+   let badgeClass = classes.badge;
+   let label: string;
+
+   if (inProgress > 0) {
+      badgeClass += ` ${classes.badgeProgress}`;
+      label = 'Replicating...';
+   } else if (failed === total) {
+      badgeClass += ` ${classes.badgeFailed}`;
+      label = 'Replication failed';
+   } else if (failed > 0) {
+      badgeClass += ` ${classes.badgePartial}`;
+      label = `${completed}/${total} mirrors`;
+   } else {
+      badgeClass += ` ${classes.badgeSuccess}`;
+      label = `${total} mirror${total > 1 ? 's' : ''}`;
+   }
+
+   return (
+      <>
+         <span
+            className={badgeClass}
+            data-tooltip-id="htmlToolTip"
+            data-tooltip-place="top"
+            data-tooltip-html={`<div>${label}</div>`}
+            onClick={() => setShowMirrorDetails(true)}
+         >
+            <Icon type={'mirrors'} size={13} />
+         </span>
+         {showMirrorDetails && (
+            <MirrorDetails
+               mirrors={mirrors}
+               planId={planId}
+               backupId={backupId}
+               replicationSettings={replicationSettings}
+               close={() => setShowMirrorDetails(false)}
+            />
+         )}
+      </>
+   );
+};
+
+export default MirrorStatusBadge;

package/src/components/Plan/Mirrors/MirrorStorageSelector.module.scss

@@ -0,0 +1,97 @@
+.mirrorSelector {
+   .selectorContent {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 10px;
+   }
+
+   .storageOption {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 12px;
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.12s linear;
+      &:hover {
+         background-color: var(--primary-color-light);
+      }
+   }
+
+   .storageDisabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      &:hover {
+         border-color: var(--line-color);
+         background-color: transparent;
+      }
+   }
+
+   .radio {
+      color: var(--icon-color);
+      &.radioSelected {
+         color: var(--primary-color);
+      }
+   }
+
+   .storageName {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      img {
+         max-width: 20px;
+         vertical-align: middle;
+      }
+      .storageLabel {
+         font-size: 0.65rem;
+         border-radius: 12px;
+         padding: 1px 10px;
+         background-color: var(--background-color);
+      }
+   }
+
+   .statusLabel {
+      margin-left: auto;
+      font-size: 0.6875rem;
+      padding: 1px 8px;
+      border-radius: 12px;
+      text-transform: capitalize;
+      background-color: var(--line-color);
+      color: var(--content-text-color-light);
+   }
+
+   .noMirrors {
+      padding: 15px;
+      text-align: center;
+      color: var(--content-text-color-light);
+      font-size: 0.8125rem;
+   }
+
+   &.dropdown {
+      position: relative;
+      .dropdownLabel {
+         padding: 6px 10px;
+         border: 1px solid var(--line-color);
+         border-radius: 6px;
+         cursor: pointer;
+         min-width: 160px;
+      }
+      .selectorContent {
+         display: none;
+         position: absolute;
+         margin-top: 0px;
+         right: 0;
+         min-width: 260px;
+         z-index: 99;
+         padding: 10px;
+         background-color: var(--content-background-color);
+         border: 1px solid var(--line-color);
+         border-radius: 6px;
+         &.showOptions {
+            display: block;
+         }
+      }
+   }
+}

package/src/components/Plan/Mirrors/MirrorStorageSelector.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { BackupMirror } from '../../../@types/backups';
+import Icon from '../../common/Icon/Icon';
+import classes from './MirrorStorageSelector.module.scss';
+
+interface MirrorStorageSelectorProps {
+   mirrors: BackupMirror[];
+   primaryStorage: { id: string; type: string; name: string };
+   onChange: (replicationId?: string) => void;
+   selectedReplicationId?: string;
+}
+
+const MirrorStorageSelector = ({ mirrors, primaryStorage, onChange, selectedReplicationId }: MirrorStorageSelectorProps) => {
+   const [selected, setSelected] = useState<string | undefined>(selectedReplicationId);
+   const completedMirrors = mirrors.filter((m) => m.status === 'completed');
+
+   return (
+      <div className={classes.mirrorSelector}>
+         <div className={classes.selectorContent}>
+            <div
+               className={classes.storageOption}
+               onClick={() => {
+                  setSelected(undefined);
+                  onChange(undefined);
+               }}
+            >
+               <span className={`${classes.radio} ${selected === undefined ? classes.radioSelected : ''}`}>
+                  <Icon type={selected === undefined ? 'check-circle-filled' : 'check-circle'} size={16} />
+               </span>
+               <span className={classes.storageName}>
+                  <img src={`/providers/${primaryStorage.type}.png`} />
+                  {primaryStorage.name}
+                  <span className={classes.storageLabel}>Primary</span>
+               </span>
+            </div>
+            {mirrors.map((mirror) => {
+               const isCompleted = mirror.status === 'completed';
+               const isSelected = selected === mirror.replicationId;
+               return (
+                  <div
+                     key={mirror.replicationId}
+                     className={`${classes.storageOption} ${!isCompleted ? classes.storageDisabled : ''}`}
+                     onClick={() => {
+                        if (isCompleted) {
+                           setSelected(mirror.replicationId);
+                           onChange(mirror.replicationId);
+                        }
+                     }}
+                  >
+                     <span className={`${classes.radio} ${isSelected ? classes.radioSelected : ''}`}>
+                        <Icon type={isSelected ? 'check-circle-filled' : 'check-circle'} size={16} />
+                     </span>
+
+                     <span className={classes.storageName}>
+                        <img src={`/providers/${mirror.storageType}.png`} /> {mirror.storageName}
+                        <span className={classes.storageLabel}>Mirror</span>
+                     </span>
+                     {!isCompleted && <span className={classes.statusLabel}>{mirror.status}</span>}
+                  </div>
+               );
+            })}
+            {completedMirrors.length === 0 && (
+               <div className={classes.noMirrors}>No completed mirrors available. Only the primary storage can be used.</div>
+            )}
+         </div>
+      </div>
+   );
+};
+
+export default MirrorStorageSelector;

package/src/components/Plan/Mirrors/MirrorStorageSelectorModal.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { BackupMirror } from '../../../@types/backups';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import MirrorStorageSelector from './MirrorStorageSelector';
+
+interface MirrorStorageSelectorProps {
+   mirrors: BackupMirror[];
+   primaryStorage: { id: string; type: string; name: string };
+   onSelect: (replicationId?: string) => void;
+   onClose: () => void;
+   actionLabel?: string;
+}
+
+const MirrorStorageSelectorModal = ({ mirrors, primaryStorage, onSelect, onClose, actionLabel = 'Download' }: MirrorStorageSelectorProps) => {
+   const [selected, setSelected] = useState<string | undefined>(undefined);
+
+   return (
+      <ActionModal
+         title={`Choose a Mirror to ${actionLabel} From`}
+         message={
+            <MirrorStorageSelector
+               mirrors={mirrors}
+               primaryStorage={primaryStorage}
+               onChange={(replicationId) => replicationId && setSelected(replicationId)}
+            />
+         }
+         closeModal={onClose}
+         width="450px"
+         primaryAction={{
+            title: actionLabel,
+            type: 'default',
+            isPending: false,
+            icon: 'download',
+            action: () => onSelect(selected),
+         }}
+      />
+   );
+};
+
+export default MirrorStorageSelectorModal;

package/src/components/Plan/PlanBackups/PlanBackups.tsx

@@ -14,7 +14,7 @@ const PlanBackups = ({ plan }: PlanBackupsProps) => {
    const AllBackups = useComponentOverride('Backups', Backups);
    const [historyTab, setHistoryTab] = useState<'backups' | 'restores'>('backups');
 
-   const { backups = [], stats, restores = [], method, sourceId, sourceType, settings } = plan;
+   const { backups = [], stats, restores = [], method, sourceId, sourceType, settings, storage } = plan;
 
    const sortedHistory = [...(backups || [])].sort((a, b) => new Date(b.started).getTime() - new Date(a.started).getTime());
    const isSync = method === 'sync';
@@ -44,7 +44,10 @@ const PlanBackups = ({ plan }: PlanBackupsProps) => {
                method={method}
                sourceId={sourceId}
                sourceType={sourceType}
+               deviceId={plan.device.id}
+               storage={storage}
                snapLimit={settings.prune.snapCount}
+               replicationSettings={settings.replication}
             />
          )}
          {historyTab === 'restores' && <Restores restores={restores} planId={plan.id} method={method} sourceId={sourceId} sourceType={sourceType} />}

package/src/components/Plan/PlanForm/PlanForm.tsx

@@ -15,6 +15,7 @@ import IntervalField from '../../common/form/IntervalField/IntervalField';
 import PlanFormNav from './PlanFormNav';
 import { useGetDevice } from '../../../services/devices';
 import PlanPruneSettings from '../PlanSettings/PlanPruneSettings';
+import PlanReplicationSettings from '../PlanSettings/PlanReplicationSettings';
 
 type PlanFormProps = {
    title: string;
@@ -26,9 +27,21 @@ type PlanFormProps = {
    close: () => void;
    storagePath?: string;
    storageId?: string;
+   planId?: string;
 };
 
-const PlanForm = ({ title, planSettings, type, onPlanSettingsChange, onSubmit, isSubmitting, close, storagePath, storageId }: PlanFormProps) => {
+const PlanForm = ({
+   title,
+   planSettings,
+   type,
+   onPlanSettingsChange,
+   onSubmit,
+   isSubmitting,
+   close,
+   storagePath,
+   storageId,
+   planId,
+}: PlanFormProps) => {
    const [step, setStep] = useState<number>(1);
 
    const { data: settingsData } = useGetSettings();
@@ -208,8 +221,8 @@ const PlanForm = ({ title, planSettings, type, onPlanSettingsChange, onSubmit, i
                      <label className={classes.label}>Backup Destination*</label>
                      {!planSettings.storage.name && <span className={classes.fieldErrorLabel}>{'Required'}</span>}
                      <StoragePicker
-                        storagePath={storagePath}
-                        storageId={storageId}
+                        storagePath={storagePath || planSettings.storagePath}
+                        storageId={storageId || planSettings.storage?.id || ''}
                         deviceId={planSettings.sourceId || 'main'}
                         disabled={type === 'edit' ? true : false}
                         onUpdate={(s: { storage: { name: string; id: string; type: string }; path: string }) =>
@@ -221,6 +234,20 @@ const PlanForm = ({ title, planSettings, type, onPlanSettingsChange, onSubmit, i
                         }
                      />
                   </div>
+                  <PlanReplicationSettings
+                     replication={planSettings.settings.replication}
+                     primaryStorageId={planSettings.storage.id}
+                     primaryStoragePath={planSettings.storagePath}
+                     deviceId={planSettings.sourceId || 'main'}
+                     isEditing={type === 'edit' ? true : false}
+                     planID={planId}
+                     onUpdate={(replication) =>
+                        onPlanSettingsChange({
+                           ...planSettings,
+                           settings: { ...planSettings.settings, replication: replication },
+                        })
+                     }
+                  />
                </div>
             )}
             {step === 3 && (