@plutonhq/core-frontend 0.1.31 → 0.1.33

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

@@ -233,6 +233,22 @@
    }
 }
 
+.errorDetailsModal {
+   width: 100%;
+   max-height: 500px;
+   overflow: auto;
+   font-family: monospace;
+   box-sizing: border-box;
+   border-radius: 6px;
+   background-color: var(--primary-color-lighter);
+   p {
+      border-bottom: 1px solid;
+      padding: 12px;
+      margin: 0;
+      border-color: var(--line-color);
+   }
+}
+
 @media only screen and (max-width: 768px) {
    .backupsTable {
       overflow: auto;

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

@@ -21,7 +21,7 @@ import BackupEvents from '../BackupEvents/BackupEvents';
 import Input from '../../common/form/Input/Input';
 import MirrorStatusBadge from '../Mirrors/MirrorStatusBadge';
 import MirrorStorageSelectorModal from '../Mirrors/MirrorStorageSelectorModal';
-import { SidePanel, SnapshotViewer } from '../..';
+import { Modal, SidePanel, SnapshotViewer } from '../..';
 
 const DownloadLabel = ({ download, downloadBackup }: { download: Backup['download']; downloadBackup: () => void }) => {
    if (download?.status === 'started') {
@@ -101,6 +101,7 @@ const Backups = ({
    const [showRestoreModal, setShowRestoreModal] = useState<Backup | false>(false);
    const [showBackupEvents, setShowBackupEvents] = useState<false | string>(false);
    const [showSnapshotViewer, setShowSnapshotViewer] = useState<Backup | false>(false);
+   const [showBackupError, setShowBackupError] = useState<string | false>(false);
    const [showEditModal, setShowEditModal] = useState<Backup | false>(false);
    const [showStorageSelector, setShowStorageSelector] = useState<Backup | false>(false);
    const queryClient = useQueryClient();
@@ -240,8 +241,9 @@ const Backups = ({
                         <div
                            className={`${classes.status} ${errorMsg ? classes.statusHasError : ''}`}
                            data-tooltip-id="htmlToolTip"
-                           data-tooltip-html={`<div><string>Error</string>: ${errorMsg}</div>`}
+                           data-tooltip-html={`<div class="linebreak-tooltip-content"><string>Error</string>: ${errorMsg?.slice(0, 120) + (errorMsg && errorMsg.length > 120 ? '...' : '')}</div>`}
                            data-tooltip-hidden={!errorMsg}
+                           onClick={() => errorMsg && errorMsg.length > 120 && setShowBackupError(errorMsg)}
                         >
                            <StatusLabel status={status} hasError={!!errorMsg} />
                         </div>
@@ -453,6 +455,15 @@ const Backups = ({
                />
             </SidePanel>
          )}
+         {showBackupError && (
+            <Modal title="Error Details" closeModal={() => setShowBackupError(false)} width={'600px'}>
+               <div className={`${classes.errorDetailsModal} styled__scrollbar`}>
+                  {showBackupError.split('\n').map((line, index) => (
+                     <p key={index}>{line}</p>
+                  ))}
+               </div>
+            </Modal>
+         )}
       </div>
    );
 };

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

@@ -0,0 +1,65 @@
+.filterItems {
+   position: relative;
+   .filterBtn {
+      display: flex;
+      align-items: center;
+      .filterCount {
+         background-color: var(--primary-color);
+         color: var(--primary-text-color);
+         padding: 1px 6px;
+         border-radius: 12px;
+         font-size: 10px;
+      }
+      &.filterBtnActive {
+         color: var(--primary-color);
+      }
+   }
+   .dropdown {
+      margin-top: -1px;
+      position: absolute;
+      z-index: 9999;
+      border: 1px solid var(--line-color);
+      background: var(--field-bg);
+      box-shadow: 0 0 15px var(--content-shadow-color);
+      width: calc(100% - 2px);
+      border-radius: 0 0 4px 4px;
+      overflow: auto;
+      font-size: 0.75rem;
+      right: 0;
+      width: max-content;
+      max-height: 320px;
+      border-radius: 6px;
+
+      .field {
+         padding: 12px 12px 0 12px;
+         label {
+            font-weight: 600;
+            margin-bottom: 4px;
+            display: block;
+         }
+      }
+      .footer {
+         border-top: 1px solid var(--line-color);
+         margin-top: 12px;
+         display: flex;
+         justify-content: space-around;
+         button:nth-child(2) {
+            padding: 6px 10px;
+            background: var(--primary-color-light);
+            color: var(--primary-color);
+            line-height: 1em;
+            height: fit-content;
+            border-radius: 4px;
+            margin: 8px;
+            font-weight: 600;
+            &:hover {
+               background: var(--primary-color);
+               color: var(--primary-text-color);
+            }
+         }
+         button:hover {
+            color: var(--primary-color);
+         }
+      }
+   }
+}

package/src/components/Plan/FilterPlans/FilterPlans.tsx

@@ -0,0 +1,126 @@
+import { useMemo, useState } from 'react';
+import classes from './FilterPlans.module.scss';
+import { Plan } from '../../..';
+import { Icon, MultiSelect } from '../..';
+
+type FilterPlansProps = {
+   onUpdate: (s: Record<PlanFilterTypes, string[]> | null) => void;
+   plans: Plan[];
+};
+export type PlanFilterTypes = 'devices' | 'tags' | 'storages' | 'methods';
+
+const defaultState = { devices: [], tags: [], storages: [], methods: [] };
+
+const FilterPlans = ({ onUpdate, plans }: FilterPlansProps) => {
+   const [showDropDown, setShowDropDown] = useState(false);
+   const [selected, setSelected] = useState<Record<PlanFilterTypes, string[]>>(() => {
+      const storedSettingsRaw = localStorage.getItem('plans_filter');
+      const storedSettings = storedSettingsRaw ? JSON.parse(storedSettingsRaw) : null;
+      return storedSettings || defaultState;
+   });
+
+   const hasFilters = Object.values(selected).some((arr) => arr.length > 0);
+
+   const filterableItems = useMemo(() => {
+      const items: Record<PlanFilterTypes, { label: string; value: string }[]> = { devices: [], tags: [], storages: [], methods: [] };
+      plans.forEach((plan) => {
+         plan.tags.forEach((tag) => {
+            if (!items.tags.find((t) => t.value === tag)) {
+               items.tags.push({ label: tag, value: tag });
+            }
+         });
+         if (!items.devices.find((t) => t.value === plan.device.id)) {
+            items.devices.push({ label: plan.device.name, value: plan.device.id });
+         }
+         if (!items.storages.find((t) => t.value === plan.storage.id)) {
+            items.storages.push({ label: plan.storage.name, value: plan.storage.id });
+         }
+         if (!items.methods.find((t) => t.value === plan.method)) {
+            items.methods.push({ label: plan.method, value: plan.method });
+         }
+      });
+      return items;
+   }, [plans]);
+
+   return (
+      <div className={classes.filterItems}>
+         <button
+            className={`${classes.filterBtn} ${showDropDown || hasFilters ? classes.filterBtnActive : ''}`}
+            onClick={() => setShowDropDown(!showDropDown)}
+            data-tooltip-id="appTooltip"
+            data-tooltip-content="Filter"
+            aria-label="Filter Plans"
+            data-tooltip-place="top"
+            data-tooltip-delay-show={500}
+         >
+            <Icon type="filter" size={18} />{' '}
+            {hasFilters && <span className={classes.filterCount}>{Object.values(selected).reduce((acc, arr) => acc + arr.length, 0)}</span>}
+         </button>
+         {showDropDown && (
+            <div className={`${classes.dropdown} styled__scrollbar`}>
+               {filterableItems.devices.length > 1 && (
+                  <div className={classes.field}>
+                     <label>Devices</label>
+                     <MultiSelect
+                        title="Devices"
+                        fieldValue={selected.devices}
+                        options={filterableItems.devices}
+                        onUpdate={(devices) => setSelected((selected) => ({ ...selected, devices }))}
+                     />
+                  </div>
+               )}
+               <div className={classes.field}>
+                  <label>Backup Type</label>
+                  <MultiSelect
+                     title="Backup Type"
+                     fieldValue={selected.methods}
+                     options={filterableItems.methods}
+                     onUpdate={(methods) => setSelected((selected) => ({ ...selected, methods }))}
+                  />
+               </div>
+               <div className={classes.field}>
+                  <label>Storage</label>
+                  <MultiSelect
+                     title="Storages"
+                     fieldValue={selected.storages}
+                     options={filterableItems.storages}
+                     onUpdate={(storages) => setSelected((selected) => ({ ...selected, storages }))}
+                  />
+               </div>
+               <div className={classes.field}>
+                  <label>Tags</label>
+                  <MultiSelect
+                     title="Tags"
+                     fieldValue={selected.tags}
+                     options={filterableItems.tags}
+                     onUpdate={(tags) => setSelected((selected) => ({ ...selected, tags }))}
+                  />
+               </div>
+               <div className={classes.footer}>
+                  <button
+                     onClick={() => {
+                        localStorage.removeItem('plans_filter');
+                        setSelected(defaultState);
+                        onUpdate(null);
+                        setShowDropDown(false);
+                     }}
+                  >
+                     <Icon type="reload" /> Reset
+                  </button>
+                  <button
+                     onClick={() => {
+                        localStorage.setItem('plans_filter', JSON.stringify(selected));
+                        onUpdate(selected);
+                        setShowDropDown(false);
+                     }}
+                  >
+                     <Icon type="check" size={12} /> Apply
+                  </button>
+               </div>
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default FilterPlans;

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

@@ -4,7 +4,7 @@ import SidePanel from '../../common/SidePanel/SidePanel';
 import StoragePicker from '../../common/form/StoragePicker/StoragePicker';
 import PlanStrategySettings from '../PlanSettings/PlanStrategySettings';
 import PlanSourceSettings from '../PlanSettings/PlanSourceSettings';
-import { NewPlanSettings } from '../../../@types/plans';
+import { NewPlanSettings, PlanAddRunSettings } from '../../../@types/plans';
 import classes from '../AddPlan/AddPlan.module.scss';
 import PFClasses from './PlanForm.module.scss';
 import { useGetSettings } from '../../../services/settings';
@@ -27,6 +27,8 @@ type PlanFormProps = {
    storagePath?: string;
    storageId?: string;
    planId?: string;
+   runSettings?: PlanAddRunSettings;
+   setRunSettings?: (runSettings: PlanAddRunSettings) => void;
 };
 
 const PlanForm = ({
@@ -40,6 +42,8 @@ const PlanForm = ({
    storagePath,
    storageId,
    planId,
+   runSettings,
+   setRunSettings,
 }: PlanFormProps) => {
    const [step, setStep] = useState<number>(1);
 
@@ -279,6 +283,8 @@ const PlanForm = ({
                      onUpdate={onPlanSettingsChange}
                      device={deviceInstance}
                      isEditing={type === 'edit'}
+                     runSettings={runSettings}
+                     setRunSettings={setRunSettings}
                   />
                </div>
             )}

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

@@ -103,6 +103,25 @@
    }
 }
 
+.repairBox {
+   border: 1px solid var(--line-color);
+   padding: 12px;
+   margin: 15px 5px;
+   box-sizing: border-box;
+   border-radius: 6px;
+   border-color: var(--primary-color-mid) #aaacff;
+   background: var(--background-color);
+
+   button {
+      background-color: var(--primary-color);
+      color: var(--primary-text-color);
+      padding: 6px 12px;
+      cursor: pointer;
+      border-radius: 4px;
+      margin-top: 6px;
+   }
+}
+
 @media only screen and (max-width: 768px) {
    .integrityLogs .integrityLogsHeader {
       flex-direction: column;

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

@@ -13,9 +13,10 @@ interface PlanIntegrityProps {
    storage: { name: string; type: string; id: string };
    replicationStorages: PlanReplicationStorage[];
    onClose: () => void;
+   onRepairOpen: (replicationId: string) => void;
 }
 
-const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replicationStorages = [], onClose }: PlanIntegrityProps) => {
+const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replicationStorages = [], onClose, onRepairOpen }: PlanIntegrityProps) => {
    const [showContent, setShowContent] = useState('primary');
    const integrityCheckMutation = useCheckPlanIntegrity();
 
@@ -67,6 +68,11 @@ const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replica
                      .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>}
+               {(backupResData.errorType === 'pack_file_error' || backupResData.errorType === 'index_error') && (
+                  <p>
+                     <button onClick={() => onRepairOpen(storageType)}>Open Repo Repair</button> Window for more options.
+                  </p>
+               )}
                <p>
                   Learn more about fixing restic repo issues{' '}
                   <a
@@ -96,6 +102,37 @@ const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replica
       return <div className="label error">⛔ Error Found. {backupMessage}</div>;
    };
 
+   const renderRepairContent = (storageType: string) => {
+      const backupResData = getBackupResultByStorage(storageType);
+      return (
+         <div className={classes.repairBox}>
+            {(backupResData?.errorType === 'pack_file_error' || backupResData?.errorType === 'repairable_pack_file_error') && (
+               <div>
+                  Some pack files in the repository are either damaged or missing and can be repaired.{' '}
+                  <button onClick={() => onRepairOpen(storageType)}>
+                     <Icon type="repair" size={13} /> Open Repo Repair Tool
+                  </button>
+               </div>
+            )}
+            {backupResData?.errorType === 'index_error' && (
+               <div>
+                  The index files in the repository are corrupted and can be repaired.{' '}
+                  <button onClick={() => onRepairOpen(storageType)}>
+                     <Icon type="repair" size={13} /> Open Repo Repair Tool
+                  </button>{' '}
+               </div>
+            )}
+         </div>
+      );
+   };
+
+   const renderRepairOrFixSuggestion = (storageType: string) => {
+      const backupResData = getBackupResultByStorage(storageType);
+      const errorType = backupResData?.errorType;
+      const isRepairable = errorType === 'pack_file_error' || errorType === 'index_error' || errorType === 'repairable_pack_file_error';
+      return isRepairable ? renderRepairContent(storageType) : renderBackupFixSuggestion(storageType);
+   };
+
    const renderResultWithReplications = () => {
       return (
          <div className={`${classes.integrityResult} ${classes.withReplications}`}>
@@ -130,7 +167,7 @@ const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replica
                            <div className={classes.replicationResultContent}>
                               {renderBackupStatus(storageType)}
                               {renderLogs(storageType)}
-                              {renderBackupFixSuggestion(storageType)}
+                              {renderRepairOrFixSuggestion(storageType)}
                            </div>
                         )}
                      </div>
@@ -152,7 +189,7 @@ const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replica
                         <div className={classes.integrityResult}>
                            {renderBackupStatus('primary')}
                            {renderLogs('primary')}
-                           {renderBackupFixSuggestion('primary')}
+                           {renderRepairOrFixSuggestion('primary')}
                         </div>
                      ) : (
                         renderResultWithReplications()

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

@@ -79,7 +79,7 @@ const PlanItem = ({ plan, layout = 'list' }: PlanItemProps) => {
          return;
       }
       toast.promise(
-         performBackupMutation.mutateAsync(id),
+         performBackupMutation.mutateAsync({ id }),
          {
             pending: `Starting ${isSync ? 'Sync' : 'Backup'}...`,
             success: `${isSync ? 'Sync' : 'Backup'} initiated successfully! 🚀`,

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

@@ -0,0 +1,53 @@
+.repairContainer {
+   position: relative;
+   small {
+      padding: 12px 0;
+      display: block;
+   }
+   .repairContent {
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      button {
+         background: var(--background-color);
+         border-radius: 20px;
+         line-height: 1.7em;
+         color: var(--primary-color);
+         padding: 2px 10px;
+         transition: all 0.1s linear;
+         &:hover {
+            background: var(--primary-color);
+            color: var(--primary-text-color);
+         }
+      }
+      .repairTitle {
+         background: var(--background-color);
+         margin-top: 0;
+         font-weight: 600;
+         font-size: 1.1em;
+         padding: 12px;
+      }
+      p {
+         padding: 16px 8px;
+         border-bottom: 1px solid var(--line-color);
+         margin: 0;
+      }
+      p:last-child {
+         border-bottom: none;
+      }
+   }
+   .overlay {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0.95;
+      background-color: var(--modal-bg);
+      z-index: 3;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+   }
+}