@plutonhq/core-frontend 0.1.13 → 0.1.14

package/src/components/Device/DeviceBackups/DeviceBackups.tsx

@@ -1,41 +1,15 @@
-import { useMemo } from 'react';
 import { NavLink } from 'react-router';
-import { DevicePlan } from '../../../@types/devices';
+import { DevicePlan, DeviceStorage } from '../../../@types/devices';
 import Icon from '../../common/Icon/Icon';
 import classes from './DeviceBackups.module.scss';
 import { formatBytes } from '../../../utils/helpers';
 
 interface DeviceBackupsProps {
    plans: DevicePlan[];
+   storages: DeviceStorage[];
 }
 
-const DeviceBackups = ({ plans }: DeviceBackupsProps) => {
-   const plansStorages = useMemo(() => {
-      const storages: (DevicePlan['storage'] & { size: number })[] = [];
-
-      //first calculate each storage's size from the plan size.
-      const storageSizes: { [key: string]: number } = {};
-      plans.forEach((plan) => {
-         const planStorageId = plan.storage.id;
-         if (!storageSizes[planStorageId]) {
-            storageSizes[planStorageId] = 0;
-         }
-         storageSizes[planStorageId] += plan.size;
-      });
-
-      plans.forEach((plan) => {
-         if (!storages.some((storage) => storage.id === plan.storage.id)) {
-            // if (plan.storage.id !== 'local') {
-            // TODO: implement this check
-            storages.push({ ...plan.storage, size: storageSizes[plan.storage.id] });
-            // }
-         }
-      });
-      return storages;
-   }, [plans]);
-
-   console.log('plansStorages :', plansStorages);
-
+const DeviceBackups = ({ plans, storages }: DeviceBackupsProps) => {
    return (
       <div className={classes.devicePlans}>
          {/* Backup Plans */}
@@ -46,7 +20,7 @@ const DeviceBackups = ({ plans }: DeviceBackupsProps) => {
             <div className={classes.widgetContent}>
                {plans.length === 0 && <div className={classes.noData}>No backup plans found for this device.</div>}
                {plans.length > 0 &&
-                  plans.map(({ id, title, sourceConfig, storage, isActive, method, size }) => (
+                  plans.map(({ id, title, sourceConfig, storage, isActive, method, size, replicatedStorages }) => (
                      <div key={id} className={classes.planItem}>
                         <div className={`${classes.status} ${!isActive ? classes.paused : ''}`}>
                            <div className={classes.iconBlock}>
@@ -63,7 +37,7 @@ const DeviceBackups = ({ plans }: DeviceBackupsProps) => {
                                  {sourceConfig.includes.length > 1 ? 'paths' : 'path'}
                               </div>
                               <div>
-                                 <Icon type="storages" size={12} /> {storage.name}
+                                 <Icon type="storages" size={12} /> {replicatedStorages > 0 ? `${replicatedStorages + 1} storages` : storage.name}
                               </div>
                               <div>
                                  <Icon type="disk" size={12} /> {formatBytes(size)}
@@ -109,12 +83,13 @@ const DeviceBackups = ({ plans }: DeviceBackupsProps) => {
                <Icon type="storages" size={12} /> Connected Storages
             </div>
             <div className={classes.widgetContent}>
-               {plans.length === 0 && <div className={classes.noData}>No Remote storages are being used by this device.</div>}
-               {plans.length > 0 &&
-                  plansStorages.map(({ id, name, size, type, typeName }) => (
+               {storages && storages.length === 0 && <div className={classes.noData}>No Remote storages are being used by this device.</div>}
+               {storages &&
+                  storages.length > 0 &&
+                  storages.map(({ id, name, type, storageTypeName }) => (
                      <div key={id} className={classes.planItem}>
                         <div className={`${classes.status}`}>
-                           <div className={classes.iconBlock} title={typeName}>
+                           <div className={classes.iconBlock}>
                               {type === 'local' ? <Icon type="storages" size={12} /> : <img src={`/providers/${type}.png`} />}
                            </div>
                         </div>
@@ -122,7 +97,7 @@ const DeviceBackups = ({ plans }: DeviceBackupsProps) => {
                            <h4>
                               <NavLink to={`/storage/${id}`}>{name}</NavLink>
                            </h4>
-                           <div className={classes.planStats}>{formatBytes(size)}</div>
+                           <div className={classes.planStats}>{storageTypeName}</div>
                         </div>
                      </div>
                   ))}

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

@@ -195,3 +195,68 @@
       }
    }
 }
+
+.mirrorsEventsSection {
+   margin-top: 20px;
+}
+
+.mirrorEventsGroup {
+   margin-bottom: 16px;
+}
+
+.mirrorEventsHeader {
+   display: flex;
+   align-items: center;
+   gap: 8px;
+   padding: 8px 0;
+   font-weight: 600;
+   font-size: 0.95em;
+}
+
+.mirrorProviderIcon {
+   width: 20px;
+   height: 20px;
+   object-fit: contain;
+}
+
+.mirrorEventsName {
+   color: var(--content-text-color);
+}
+
+.mirrorEventsStatus {
+   padding: 2px 10px;
+   font-size: 0.85em;
+   border-radius: 12px;
+   text-transform: capitalize;
+   font-weight: 500;
+
+   &.mirror_pending {
+      background-color: var(--primary-color-lighter);
+      color: var(--content-text-color-light);
+   }
+   &.mirror_running {
+      background-color: var(--primary-color-lighter);
+      color: var(--primary-color);
+   }
+   &.mirror_completed {
+      background-color: var(--success-bg-color);
+      color: var(--success-text-color);
+   }
+   &.mirror_failed {
+      background-color: var(--error-bg-color);
+      color: var(--error-button-color);
+   }
+}
+
+.noEvents {
+   padding: 12px;
+   color: var(--content-text-color-light);
+   font-style: italic;
+   font-size: 0.9em;
+}
+
+.errorDetails {
+   padding: 10px;
+   word-break: break-word;
+   color: var(--error-button-color);
+}

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

@@ -2,7 +2,7 @@ import Icon from '../../common/Icon/Icon';
 import SidePanel from '../../common/SidePanel/SidePanel';
 import { getBackupEventActionMessage, getRestoreEventActionMessage } from '../../../utils/progressHelpers';
 import classes from './BackupEvents.module.scss';
-import { BackupProgressData } from '../../../@types/backups';
+import { BackupProgressData, ReplicationProgressData } from '../../../@types/backups';
 import { useGetBackupProgressOnce } from '../../../services/backups';
 import { useGetRestoreProgressOnce } from '../../../services/restores';
 import { useMemo, useState } from 'react';
@@ -21,7 +21,7 @@ interface BackupEventsProps {
 }
 
 const BackupEvents = ({ id, type = 'backup', sourceId, sourceType, planId, inProgress, progressData, close }: BackupEventsProps) => {
-   const [showError, setShowError] = useState<false | number>(false);
+   const [showError, setShowError] = useState<false | string>(false);
    const { data: fetchedProgressData, isLoading } =
       type === 'backup'
          ? useGetBackupProgressOnce({ id, sourceId, sourceType, planId })
@@ -95,7 +95,7 @@ const BackupEvents = ({ id, type = 'backup', sourceId, sourceType, planId, inPro
                            <span className={classes.action}>
                               {type === 'backup' ? getBackupEventActionMessage(event.action) : getRestoreEventActionMessage(event.action)}
                               {event.error && (
-                                 <span className={classes.viewError} onClick={() => setShowError(index)}>
+                                 <span className={classes.viewError} onClick={() => setShowError(`main-${index}`)}>
                                     View Error
                                  </span>
                               )}
@@ -105,10 +105,71 @@ const BackupEvents = ({ id, type = 'backup', sourceId, sourceType, planId, inPro
                   })}
                </ul>
             ) : null}
+            {/* Mirror Events */}
+            {progressDataToUse?.mirrors && Object.keys(progressDataToUse.mirrors).length > 0 && (
+               <div className={classes.mirrorsEventsSection}>
+                  {Object.entries(progressDataToUse.mirrors as Record<string, ReplicationProgressData>).map(([storageId, mirror]) => (
+                     <div key={storageId} className={classes.mirrorEventsGroup}>
+                        <div className={classes.mirrorEventsHeader}>
+                           <img src={`/providers/${mirror.storageType}.png`} className={classes.mirrorProviderIcon} />
+                           <span className={classes.mirrorEventsName}>{mirror.storageName}</span>
+                           <span className={`${classes.mirrorEventsStatus} ${classes[`mirror_${mirror.status}`] || ''}`}>{mirror.status}</span>
+                        </div>
+                        {mirror.events && mirror.events.length > 0 ? (
+                           <ul className={classes.eventList}>
+                              {mirror.events.map((event: any, index: number) => {
+                                 const isError = event.error;
+                                 const isCompleted = event.action === 'REPLICATION_COMPLETE';
+                                 const isFailed = event.action === 'REPLICATION_FAILED';
+                                 return (
+                                    <li
+                                       key={index}
+                                       className={`${classes.eventItem} ${isError ? classes.error : ''} ${isCompleted ? classes.completed : ''} ${isFailed ? classes.failed : ''}`}
+                                    >
+                                       <span className={classes.icon}>
+                                          <Icon type={isError ? 'error-circle-filled' : 'check-circle-filled'} size={16} />
+                                       </span>
+                                       <span className={classes.time}>{new Date(event.timestamp).toLocaleTimeString()}</span>
+                                       <span className={classes.phase}>{event.phase}</span>
+                                       <span className={classes.action}>
+                                          {getBackupEventActionMessage(event.action, mirror.storageName)}
+                                          {event.error && (
+                                             <span className={classes.viewError} onClick={() => setShowError(`mirror-${storageId}-${index}`)}>
+                                                View Error
+                                             </span>
+                                          )}
+                                       </span>
+                                    </li>
+                                 );
+                              })}
+                           </ul>
+                        ) : (
+                           <div className={classes.noEvents}>No events recorded</div>
+                        )}
+                     </div>
+                  ))}
+               </div>
+            )}
          </div>
          {showError && (
             <Modal title="Error Details" closeModal={() => setShowError(false)} width="400px">
-               <div className={classes.errorDetails}>{progressDataToUse?.events[showError]?.error || 'Unknown error occurred.'}</div>
+               <div className={classes.errorDetails}>
+                  {(() => {
+                     if (typeof showError === 'string') {
+                        if (showError.startsWith('main-')) {
+                           const idx = parseInt(showError.replace('main-', ''));
+                           return progressDataToUse?.events[idx]?.error || 'Unknown error occurred.';
+                        }
+                        if (showError.startsWith('mirror-')) {
+                           const parts = showError.replace('mirror-', '').split('-');
+                           const eventIdx = parseInt(parts.pop()!);
+                           const sId = parts.join('-');
+                           return (progressDataToUse?.mirrors as any)?.[sId]?.events?.[eventIdx]?.error || 'Unknown error occurred.';
+                        }
+                     }
+                     return 'Unknown error occurred.';
+                  })()}
+               </div>
             </Modal>
          )}
       </SidePanel>

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

@@ -10,13 +10,15 @@
 .backup {
    width: 100%;
    padding: 10px 15px;
-   display: flex;
-   justify-content: left;
-   align-items: center;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid var(--line-color);
    margin-bottom: 15px;
+   .backupProgress {
+      display: flex;
+      justify-content: left;
+      align-items: center;
+   }
    .backupIcon {
       margin-right: 15px;
    }
@@ -118,3 +120,119 @@
       }
    }
 }
+
+.mirrorsSection {
+   width: 100%;
+   margin-top: 10px;
+   padding: 10px;
+   box-sizing: border-box;
+   border-top: 1px solid var(--line-color);
+}
+
+.mirrorsTitle {
+   font-size: 0.6875rem;
+   font-weight: 600;
+   color: var(--content-text-color-light);
+   margin-bottom: 8px;
+}
+
+.mirrorsList {
+   display: flex;
+   flex-direction: column;
+   gap: 6px;
+}
+
+.mirrorItem {
+   display: flex;
+   flex-direction: row;
+   gap: 10px;
+}
+.mirrorProgress {
+   width: 100%;
+   display: flex;
+   flex-direction: column;
+   gap: 5px;
+}
+
+.mirrorStorageIcon {
+   padding: 5px;
+   border-radius: 4px;
+   border: 1px solid var(--line-color);
+   position: relative;
+   span {
+      position: absolute;
+      z-index: 2;
+      top: -5px;
+      margin-left: -10px;
+   }
+   img {
+      max-width: 20px;
+      vertical-align: middle;
+   }
+}
+
+.mirrorInfo {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+}
+
+.mirrorName {
+   font-size: 0.7rem;
+   color: var(--content-text-color);
+}
+
+.mirrorStatus {
+   font-size: 0.7rem;
+   font-weight: 600;
+   color: var(--content-text-color-light);
+   &.mirrorCompleted {
+      color: var(--success-text-color);
+   }
+   &.mirrorFailed {
+      color: var(--error-button-color);
+   }
+}
+
+.mirrorBar {
+   width: 100%;
+   height: 6px;
+   border-radius: 3px;
+   background-color: var(--line-color);
+   overflow: hidden;
+   .mirrorBarFill {
+      height: 100%;
+      border-radius: 3px;
+      transition: all 0.3s linear;
+      &.mirrorCompleted {
+         background-color: turquoise;
+      }
+      &.mirrorFailed {
+         background-color: var(--error-button-color);
+      }
+      &.mirrorRunning {
+         background-color: turquoise;
+      }
+      &.mirrorPending {
+         background-color: var(--line-color);
+         width: 0;
+      }
+
+      &.mirrorRunningIndeterminate {
+         background-color: turquoise;
+         width: 100% !important;
+         opacity: 0.4;
+         animation: mirrorPulse 1.8s ease-in-out infinite;
+      }
+   }
+}
+
+@keyframes mirrorPulse {
+   0%,
+   100% {
+      opacity: 0.25;
+   }
+   50% {
+      opacity: 0.6;
+   }
+}

package/src/components/Plan/BackupProgress/BackupProgress.tsx

@@ -5,12 +5,18 @@ import Icon from '../../common/Icon/Icon';
 import { useCancelBackup, useGetBackupProgress } from '../../../services/backups';
 import classes from './BackupProgress.module.scss';
 import { formatBytes, formatDateTime, formatSeconds, timeAgo } from '../../../utils/helpers';
-import { generateBackupProgressMessage, extractResticData, generateRestoreProgressMessage } from '../../../utils/progressHelpers';
+import {
+   generateBackupProgressMessage,
+   extractResticData,
+   generateRestoreProgressMessage,
+   generateMirrorProgressMessage,
+} from '../../../utils/progressHelpers';
 import { Backup } from '../../../@types/backups';
 import { RestoreSlim } from '../../../@types/restores';
 import ActionModal from '../../common/ActionModal/ActionModal';
 import { useCancelRestore, useGetRestoreProgress } from '../../../services/restores';
 import BackupEvents from '../BackupEvents/BackupEvents';
+import { ReplicationProgressData } from '../../../@types/backups';
 
 interface BackupProgressProps {
    item: Backup | RestoreSlim;
@@ -127,84 +133,156 @@ const BackupProgress = ({ item, sourceId, sourceType, planId, type = 'backup' }:
 
    return (
       <div key={item.id} className={classes.backup}>
-         <div className={classes.backupIcon}>
-            <Icon type="loading" size={24} />
-         </div>
-         <div className={classes.backupLeft}>
-            <div className={classes.backupId}>
-               {type === 'restore' ? 'Restoring ' : ''}backup-{id}
-               <span className={classes.backupTime} title={formatDateTime(started)}>
-                  <Icon type="clock" size={12} /> Started {started ? timeAgo(new Date(started)) : 'a few seconds ago'}
-               </span>
-               {item.errorMsg && (
-                  <span className={classes.backupError}>
-                     <Icon type="error-circle-filled" size={13} />{' '}
-                     <i data-tooltip-id="htmlToolTip" data-tooltip-place="top" data-tooltip-html={item.errorMsg}>
-                        <u>Error</u> Occurred.
-                     </i>{' '}
-                     Retrying...
-                  </span>
-               )}
+         <div key={item.id} className={classes.backupProgress}>
+            <div className={classes.backupIcon}>
+               <Icon type="loading" size={24} />
             </div>
-            <div className={classes.backupStart}>
-               <div>
-                  <span className={classes.progressMessage} onClick={() => setShowProgressDetails(true)}>
-                     {progressMessage}
+            <div className={classes.backupLeft}>
+               <div className={classes.backupId}>
+                  {type === 'restore' ? 'Restoring ' : ''}backup-{id}
+                  <span className={classes.backupTime} title={formatDateTime(started)}>
+                     <Icon type="clock" size={12} /> Started {started ? timeAgo(new Date(started)) : 'a few seconds ago'}
                   </span>
-                  {/* <Icon type="clock" size={12} /> Started {started ? timeAgo(new Date(started)) : 'a few seconds ago'} */}
+                  {item.errorMsg && (
+                     <span className={classes.backupError}>
+                        <Icon type="error-circle-filled" size={13} />{' '}
+                        <i data-tooltip-id="htmlToolTip" data-tooltip-place="top" data-tooltip-html={item.errorMsg}>
+                           <u>Error</u> Occurred.
+                        </i>{' '}
+                        Retrying...
+                     </span>
+                  )}
                </div>
-               <button onClick={() => setShowCancelModal(true)} title={`Cancel ${type}`}>
-                  <Icon type="close" size={12} /> Cancel
-               </button>
-            </div>
-         </div>
-         <div className={classes.backupRight}>
-            <div className={classes.ProgressStats}>
-               <div className={classes.ProgressStatsLeft}>
-                  <span>
-                     {filesProcessed} / {totalFiles} Files
-                  </span>
-                  <i></i>
-                  <span>
-                     {formatBytes(bytesProcessed)} / {formatBytes(totalBytes)}
-                  </span>
+               <div className={classes.backupStart}>
+                  <div>
+                     <span className={classes.progressMessage} onClick={() => setShowProgressDetails(true)}>
+                        {progressMessage}
+                     </span>
+                     {/* <Icon type="clock" size={12} /> Started {started ? timeAgo(new Date(started)) : 'a few seconds ago'} */}
+                  </div>
+                  <button onClick={() => setShowCancelModal(true)} title={`Cancel ${type}`}>
+                     <Icon type="close" size={12} /> Cancel
+                  </button>
                </div>
-               <div className={classes.ProgressStatsRight}>{type !== 'restore' && <>Remaining: {formatSeconds(seconds_remaining)}</>}</div>
             </div>
-            <div className={classes.progressBar}>
-               <div
-                  className={`${classes.progressBarFill} ${progressPercent > 3 ? classes.progressBarFilled : ''}`}
-                  style={{ width: progressPercent + '%' }}
-               >
-                  <span>{progressPercent}%</span>
+            <div className={classes.backupRight}>
+               <div className={classes.ProgressStats}>
+                  <div className={classes.ProgressStatsLeft}>
+                     <span>
+                        {filesProcessed} / {totalFiles} Files
+                     </span>
+                     <i></i>
+                     <span>
+                        {formatBytes(bytesProcessed)} / {formatBytes(totalBytes)}
+                     </span>
+                  </div>
+                  <div className={classes.ProgressStatsRight}>{type !== 'restore' && <>Remaining: {formatSeconds(seconds_remaining)}</>}</div>
+               </div>
+               <div className={classes.progressBar}>
+                  <div
+                     className={`${classes.progressBarFill} ${progressPercent > 3 ? classes.progressBarFilled : ''}`}
+                     style={{ width: progressPercent + '%' }}
+                  >
+                     <span>{progressPercent}%</span>
+                  </div>
                </div>
             </div>
+
+            {showCancelModal && (
+               <ActionModal
+                  title={`Cancel ${type}`}
+                  message={<>{`Are you sure you want to cancel the ${type} process?`}</>}
+                  closeModal={() => setShowCancelModal(false)}
+                  width="400px"
+                  primaryAction={{
+                     title: `Yes, Cancel ${type}`,
+                     type: 'danger',
+                     isPending: type === 'restore' ? cancelRestoreMutation.isPending : cancelBackupMutation.isPending,
+                     action: () => cancel(),
+                  }}
+               />
+            )}
+            {showProgressDetails && (
+               <BackupEvents
+                  id={id}
+                  type={type}
+                  planId={planId}
+                  sourceId={sourceId}
+                  sourceType={sourceType}
+                  progressData={progressData}
+                  inProgress={true}
+                  close={() => setShowProgressDetails(false)}
+               />
+            )}
          </div>
-         {showCancelModal && (
-            <ActionModal
-               title={`Cancel ${type}`}
-               message={<>{`Are you sure you want to cancel the ${type} process?`}</>}
-               closeModal={() => setShowCancelModal(false)}
-               width="400px"
-               primaryAction={{
-                  title: `Yes, Cancel ${type}`,
-                  type: 'danger',
-                  isPending: type === 'restore' ? cancelRestoreMutation.isPending : cancelBackupMutation.isPending,
-                  action: () => cancel(),
-               }}
-            />
-         )}
-         {showProgressDetails && (
-            <BackupEvents
-               id={id}
-               type={type}
-               planId={planId}
-               sourceId={sourceId}
-               sourceType={sourceType}
-               progressData={progressData}
-               inProgress={true}
-               close={() => setShowProgressDetails(false)}
-            />
+         {/* Mirrors Progress */}
+         {progressData?.mirrors && Object.keys(progressData.mirrors).length > 0 && (
+            <div className={classes.mirrorsSection}>
+               <div className={classes.mirrorsTitle}>Replicating</div>
+               <div className={classes.mirrorsList}>
+                  {Object.entries(progressData.mirrors as Record<string, ReplicationProgressData>).map(([storageId, mirror]) => {
+                     const mirrorResticData = mirror.events
+                        ?.slice()
+                        .reverse()
+                        .find((e: any) => e.resticData)?.resticData;
+                     const mirrorPercent = mirrorResticData?.percent_done ? Math.round(mirrorResticData.percent_done * 100) : 0;
+                     const mirrorMessage = generateMirrorProgressMessage(mirror);
+
+                     let mirrorStatusClass = classes.mirrorPending;
+                     if (mirror.status === 'running')
+                        mirrorStatusClass = mirrorPercent > 0 ? classes.mirrorRunning : classes.mirrorRunningIndeterminate;
+                     if (mirror.status === 'completed') mirrorStatusClass = classes.mirrorCompleted;
+                     if (mirror.status === 'failed') mirrorStatusClass = classes.mirrorFailed;
+                     if (mirror.status === 'retrying') mirrorStatusClass = classes.mirrorRunningIndeterminate;
+
+                     return (
+                        <div key={storageId} className={classes.mirrorItem}>
+                           <div className={classes.mirrorStorageIcon}>
+                              {(mirror.status === 'running' || mirror.status === 'pending' || mirror.status === 'retrying') && (
+                                 <Icon type="loading" size={12} />
+                              )}
+                              <img src={`/providers/${mirror.storageType}.png`} />
+                           </div>
+                           <div className={classes.mirrorProgress}>
+                              <div className={classes.mirrorInfo}>
+                                 <span className={classes.mirrorName}>{mirror.storageName}</span>
+                                 <span className={`${classes.mirrorStatus} ${mirrorStatusClass}`}>
+                                    {mirror.status === 'pending' && 'Pending'}
+                                    {mirror.status === 'running' && (mirrorPercent > 0 ? `${mirrorPercent}% — ${mirrorMessage}` : mirrorMessage)}
+                                    {mirror.status === 'completed' && (
+                                       <>
+                                          <Icon type="check" size={10} /> Completed
+                                       </>
+                                    )}
+                                    {mirror.status === 'failed' && (
+                                       <span data-tooltip-id="htmlToolTip" data-tooltip-html={mirror.error || 'Replication failed'}>
+                                          <Icon type="error" size={12} /> Failed
+                                       </span>
+                                    )}
+                                    {mirror.status === 'retrying' && mirrorMessage}
+                                 </span>
+                              </div>
+                              <div className={classes.mirrorBar}>
+                                 <div
+                                    className={`${classes.mirrorBarFill} ${mirrorStatusClass}`}
+                                    style={{
+                                       width:
+                                          mirror.status === 'completed'
+                                             ? '100%'
+                                             : mirror.status === 'failed'
+                                               ? '100%'
+                                               : mirrorPercent > 0
+                                                 ? `${mirrorPercent}%`
+                                                 : undefined,
+                                    }}
+                                 />
+                              </div>
+                           </div>
+                        </div>
+                     );
+                  })}
+               </div>
+            </div>
          )}
       </div>
    );