@plutonhq/core-frontend 0.1.13 → 0.1.15

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();
@@ -177,20 +190,20 @@ const PlanForm = ({ title, planSettings, type, onPlanSettingsChange, onSubmit, i
                               label: 'Incremental Backup',
                               description: 'Periodically create Incremental backup snapshots of source',
                            },
-                           {
-                              value: 'sync',
-                              icon: 'reload',
-                              label: 'Real-time Sync',
-                              description: 'Maintain identical source (with revisions)',
-                              disabled: true,
-                           },
-                           {
-                              value: 'rescue',
-                              icon: 'rescue',
-                              label: 'Linux Server Backup',
-                              description: 'Full Linux system backups with bootable ISO image',
-                              disabled: true,
-                           },
+                           // {
+                           //    value: 'sync',
+                           //    icon: 'reload',
+                           //    label: 'Real-time Sync',
+                           //    description: 'Maintain identical source (with revisions)',
+                           //    disabled: true,
+                           // },
+                           // {
+                           //    value: 'rescue',
+                           //    icon: 'rescue',
+                           //    label: 'Linux Server Backup',
+                           //    description: 'Full Linux system backups with bootable ISO image',
+                           //    disabled: true,
+                           // },
                         ]}
                      />
                   )}
@@ -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 && (

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

@@ -0,0 +1,110 @@
+.integrityMessage {
+   :global(.label) {
+      font-size: 0.9em;
+      border-radius: 6px;
+      padding: 10px;
+   }
+}
+
+.fixSuggestion {
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   box-sizing: border-box;
+   margin: 0 5px;
+   margin-top: 12px;
+   h4 {
+      padding: 12px;
+      font-weight: 600;
+      margin: 0;
+      border-bottom: 1px solid var(--line-color);
+   }
+   .fixSuggestionContent {
+      padding: 0 12px;
+      font-size: 0.9em;
+      code {
+         background: var(--line-color);
+         padding: 5px;
+         border-radius: 4px;
+         display: block;
+         font-family: monospace;
+      }
+   }
+}
+
+.integrityLogs {
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   box-sizing: border-box;
+   margin: 0 5px;
+   margin-top: 12px;
+
+   .integrityLogsHeader {
+      padding: 12px;
+      font-weight: 600;
+      border-bottom: 1px solid var(--line-color);
+      display: flex;
+      justify-content: space-between;
+      & > div:nth-child(2) {
+         font-weight: normal;
+         color: var(--content-text-color-light);
+      }
+   }
+   .integrityLogMessages {
+      font-family: monospace;
+      background-color: var(--background-color);
+      line-height: 1.3rem;
+      max-height: 300px;
+      overflow: auto;
+      span {
+         display: block;
+         padding: 4px 12px;
+         line-break: anywhere;
+         &:nth-child(even) {
+            background: rgba(0, 0, 0, 0.03);
+         }
+      }
+   }
+}
+
+.integrityResult {
+   &.withReplications {
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      .replicationResult {
+         h4 {
+            margin: 0;
+            padding: 12px;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid var(--line-color);
+            i {
+               background-color: var(--background-color);
+               color: var(--content-text-color-light);
+               padding: 1px 12px;
+               border-radius: 20px;
+               font-size: 0.7rem;
+               font-weight: normal;
+               font-style: normal;
+               display: inline-block;
+               margin-left: 6px;
+            }
+            img {
+               max-width: 14px;
+               vertical-align: middle;
+               margin-right: 6px;
+            }
+         }
+         .replicationResultContent {
+            padding: 12px;
+            border-bottom: 1px solid var(--line-color);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .integrityLogs .integrityLogsHeader {
+      flex-direction: column;
+   }
+}

package/src/components/Plan/PlanIntegrity/PlanIntegrity.tsx

@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import classes from './PlanIntegrity.module.scss';
+import { useCheckPlanIntegrity } from '../../../services';
+import { Plan, PlanReplicationStorage, PlanVerifiedResult } from '../../../@types';
+import { formatDateTime, timeAgo } from '../../../utils';
+import Icon from '../../common/Icon/Icon';
+import ActionModal from '../../common/ActionModal/ActionModal';
+
+interface PlanIntegrityProps {
+   planId: string;
+   taskPending: boolean;
+   verificationData: Plan['verified'];
+   storage: { name: string; type: string; id: string };
+   replicationStorages: PlanReplicationStorage[];
+   onClose: () => void;
+}
+
+const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replicationStorages = [], onClose }: PlanIntegrityProps) => {
+   const [showContent, setShowContent] = useState('primary');
+   const integrityCheckMutation = useCheckPlanIntegrity();
+
+   const integrityResultLoaded = verificationData && verificationData?.result;
+   const hasReplications = replicationStorages && replicationStorages.length > 0;
+
+   const getBackupResultByStorage = (storageType: string): PlanVerifiedResult | null => {
+      if (!verificationData?.result) return null;
+
+      const replicationResult = verificationData.result as Record<string, PlanVerifiedResult>;
+      return replicationResult[storageType] ?? null;
+   };
+
+   const renderLogs = (storageType: string) => {
+      if (integrityCheckMutation.isPending) return null;
+      const backupResData = getBackupResultByStorage(storageType);
+      const messages = backupResData?.logs;
+      if (!messages?.length) return null;
+
+      return (
+         <div className={classes.integrityLogs}>
+            <div className={classes.integrityLogsHeader}>
+               <div>Integrity Check Output Logs</div>
+               <div title={formatDateTime(verificationData.endedAt || verificationData.startedAt)}>
+                  <Icon type="clock" size={14} /> {timeAgo(new Date(verificationData.endedAt || verificationData.startedAt))}
+               </div>
+            </div>
+            <div className={classes.integrityLogMessages}>
+               {messages.map((message, index) => (
+                  <span key={index}>{message}</span>
+               ))}
+            </div>
+         </div>
+      );
+   };
+
+   const renderBackupFixSuggestion = (storageType: string) => {
+      if (!integrityResultLoaded) return null;
+      if (integrityCheckMutation.isPending) return null;
+      const backupResData = getBackupResultByStorage(storageType);
+      if (!backupResData?.hasError) return null;
+
+      return (
+         <div className={classes.fixSuggestion}>
+            <h4>Fix Suggestion</h4>
+            <div className={classes.fixSuggestionContent}>
+               {backupResData.fix &&
+                  backupResData.fix
+                     .split('\n')
+                     .map((line, index) => <p key={index}>{line.includes('`') ? <code>{line.replace(/`/g, '')}</code> : line}</p>)}
+               {!backupResData.fix && <p>No Suggestion for this issue.</p>}
+               <p>
+                  Learn more about fixing restic repo issues{' '}
+                  <a
+                     href="https://restic.readthedocs.io/en/latest/077_troubleshooting.html#find-out-what-is-damaged"
+                     target="_blank"
+                     rel="noreferrer"
+                  >
+                     here.
+                  </a>
+               </p>
+            </div>
+         </div>
+      );
+   };
+
+   const renderBackupStatus = (storageType: string) => {
+      if (!integrityResultLoaded) return null;
+      if (integrityCheckMutation.isPending) return null;
+      const backupResData = getBackupResultByStorage(storageType);
+      const backupHasError = backupResData?.hasError;
+      const backupMessage = backupResData?.message;
+
+      if (!backupHasError && backupMessage?.includes('No Issue Detected')) {
+         return <div className="label success">🥳 Yoohoo! No Corruption or Bit rot found. Your backup snapshots are completely restorable.</div>;
+      }
+
+      return <div className="label error">⛔ Error Found. {backupMessage}</div>;
+   };
+
+   const renderResultWithReplications = () => {
+      return (
+         <div className={`${classes.integrityResult} ${classes.withReplications}`}>
+            {verificationData &&
+               Object.entries(verificationData.result as Record<string, PlanVerifiedResult>).map(([storageType]) => {
+                  let theStorage = storage;
+                  if (storageType !== 'primary') {
+                     const mirror = replicationStorages.find((s) => s.storageId === storageType.replace('mirror_', ''));
+                     if (mirror) {
+                        theStorage = { name: mirror.storageName as string, type: mirror?.storageType as string, id: mirror?.storageId as string };
+                     }
+                  }
+                  if (!theStorage) return null;
+                  const backupResData = getBackupResultByStorage(storageType);
+                  const backupHasError = backupResData?.hasError;
+                  return (
+                     <div key={storageType} className={classes.replicationResult}>
+                        <h4 onClick={() => setShowContent(storageType)} className={showContent === storageType ? classes.active : ''}>
+                           <span>
+                              <img src={`/providers/${theStorage.type}.png`} />
+                              {theStorage.name} <i>{storageType === 'primary' ? 'Primary' : `Mirror`}</i>
+                           </span>
+                           <span>
+                              {backupHasError ? (
+                                 <Icon type="error-circle-filled" size={14} color="#ff4d4f" />
+                              ) : (
+                                 <Icon type="check-circle-filled" size={14} color="#06ba9f" />
+                              )}
+                           </span>
+                        </h4>
+                        {showContent === storageType && (
+                           <div className={classes.replicationResultContent}>
+                              {renderBackupStatus(storageType)}
+                              {renderLogs(storageType)}
+                              {renderBackupFixSuggestion(storageType)}
+                           </div>
+                        )}
+                     </div>
+                  );
+               })}
+         </div>
+      );
+   };
+
+   return (
+      <ActionModal
+         title="Check Backup Integrity"
+         message={
+            <div className={classes.integrityMessage}>
+               {!integrityResultLoaded && <p>Check the integrity of the backup snapshots now to check if they are restorable?</p>}
+               {integrityResultLoaded && (
+                  <div>
+                     {!hasReplications ? (
+                        <div className={classes.integrityResult}>
+                           {renderBackupStatus('primary')}
+                           {renderLogs('primary')}
+                           {renderBackupFixSuggestion('primary')}
+                        </div>
+                     ) : (
+                        renderResultWithReplications()
+                     )}
+                  </div>
+               )}
+               {integrityCheckMutation.isPending && (
+                  <div className="label in_progress">
+                     <Icon type="loading" size={14} />
+                     Checking integrity...
+                  </div>
+               )}
+            </div>
+         }
+         errorMessage={integrityCheckMutation.error?.message}
+         closeModal={() => onClose()}
+         width="600px"
+         primaryAction={{
+            title: integrityResultLoaded ? 'Check Again' : 'Check Now',
+            type: 'default',
+            isPending: integrityCheckMutation.isPending,
+            action: () => !taskPending && integrityCheckMutation.mutate({ planId }),
+         }}
+         secondaryAction={{
+            title: 'Close',
+            action: () => onClose(),
+         }}
+      />
+   );
+};
+
+export default PlanIntegrity;

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/PlanPendingBackup/PlanPendingBackup.tsx

@@ -4,13 +4,13 @@ import { useCheckActiveBackupsOrRestore } from '../../../services/plans';
 import classes from './PlanPendingBackup.module.scss';
 import Icon from '../../common/Icon/Icon';
 
-interface PlanPendingBackup {
+interface PlanPendingBackupProps {
    planId: string;
    type?: 'backup' | 'restore';
    onPendingDetect: () => void;
 }
 
-const PlanPendingBackup = ({ planId, type = 'backup', onPendingDetect }: PlanPendingBackup) => {
+const PlanPendingBackup = ({ planId, type = 'backup', onPendingDetect }: PlanPendingBackupProps) => {
    const [, setSearchParams] = useSearchParams();
    const checkActivesMutation = useCheckActiveBackupsOrRestore();
 

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);
+}