@plutonhq/core-frontend 0.1.26 → 0.1.28

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

@@ -5,7 +5,6 @@ import StoragePicker from '../../common/form/StoragePicker/StoragePicker';
 import PlanStrategySettings from '../PlanSettings/PlanStrategySettings';
 import PlanSourceSettings from '../PlanSettings/PlanSourceSettings';
 import { NewPlanSettings } from '../../../@types/plans';
-import NumberInput from '../../common/form/NumberInput/NumberInput';
 import classes from '../AddPlan/AddPlan.module.scss';
 import PFClasses from './PlanForm.module.scss';
 import { useGetSettings } from '../../../services/settings';
@@ -254,30 +253,13 @@ const PlanForm = ({
                <div className={PFClasses.planStep}>
                   <div className={classes.field} style={{ width: '150px' }}>
                      <IntervalField
-                        label="Backup Interval*"
+                        label="Backup Interval"
                         fieldValue={planSettings.settings.interval}
                         onUpdate={(intervalSettings) =>
                            onPlanSettingsChange({ ...planSettings, settings: { ...planSettings.settings, interval: intervalSettings } })
                         }
                      />
                   </div>
-
-                  <div className={classes.field} style={{ width: '150px' }}>
-                     <NumberInput
-                        label="Backups to Keep"
-                        fieldValue={planSettings.settings.prune.snapCount}
-                        onUpdate={(val) =>
-                           onPlanSettingsChange({
-                              ...planSettings,
-                              settings: { ...planSettings.settings, prune: { ...planSettings.settings.prune, snapCount: val } },
-                           })
-                        }
-                        placeholder="5"
-                        min={1}
-                        inline={false}
-                        hint="Number of Active Restorable Backups/Snapshots to Keep regardless of the Removal Policy"
-                     />
-                  </div>
                   <PlanPruneSettings
                      plan={planSettings}
                      onUpdate={(pruneSettings) =>

package/src/components/Plan/PlanHistory/PlanHistory.tsx

@@ -40,24 +40,27 @@ const PlanHistory = ({ planId, history, itemsCount = 10 }: PlanHistoryProps) =>
                ></div>
             ))}
 
-         {history.slice(0, itemsCount).map((h, i) => {
-            const duration = h.duration || (h.ended ? (new Date(h.ended).getTime() - new Date(h.started).getTime()) / 1000 : 0);
-            return (
-               <div
-                  className={`${h.status === 'completed' ? classes.historyItemSuccess : ''} ${h.status === 'failed' || h.status === 'cancelled' ? classes.historyItemFailed : ''} ${h.inProgress ? classes.historyItemPending : ''}`}
-                  key={`${planId}-history-${i}`}
-                  data-tooltip-id="htmlToolTip"
-                  data-tooltip-html={`
+         {history
+            .slice(0, itemsCount)
+            .sort((a, b) => (b.inProgress ? 1 : 0) - (a.inProgress ? 1 : 0))
+            .map((h, i) => {
+               const duration = !h.inProgress && (h.duration || (h.ended ? (new Date(h.ended).getTime() - new Date(h.started).getTime()) / 1000 : 0));
+               return (
+                  <div
+                     className={`${h.status === 'completed' ? classes.historyItemSuccess : ''} ${h.status === 'failed' || h.status === 'cancelled' ? classes.historyItemFailed : ''} ${h.inProgress ? classes.historyItemPending : ''}`}
+                     key={`${planId}-history-${i}`}
+                     data-tooltip-id="htmlToolTip"
+                     data-tooltip-html={`
                   <div><b>Status</b>: ${statusVals[h.status as keyof typeof statusVals] || 'Unknown'}</div>
                   <div><b>Changes</b>: ${backupChanges(h.changes)}</div>
                   <div><b>Started</b>: ${formatDateTime(h.started)}</div>
                   <div><b>Ended</b>: ${h.ended ? formatDateTime(h.ended) : ' - '}</div>
-                  <div><b>Duration</b>: ${duration ? formatDuration(duration) : '0ms'} </div>
+                  <div><b>Duration</b>: ${h.status && h.status !== 'started' && duration ? formatDuration(duration) : '-'} </div>
                `}
-                  data-tooltip-place="top"
-               ></div>
-            );
-         })}
+                     data-tooltip-place="top"
+                  ></div>
+               );
+            })}
       </div>
    );
 };

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

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import classes from './PlanSettings.module.scss';
 import PathPicker from '../../common/PathPicker/PathPicker';
 import { NewPlanSettings } from '../../../@types/plans';
@@ -27,6 +28,19 @@ const PlanSourceSettings = ({ plan, onUpdate, error, isEditing }: PlanSourceSett
       );
    }
 
+   // When the device changes, reset the sourceConfig paths to prevent invalid paths from being submitted
+   useEffect(() => {
+      if (!isEditing) {
+         onUpdate({
+            ...plan,
+            sourceConfig: {
+               includes: [],
+               excludes: [],
+            },
+         });
+      }
+   }, [isEditing, deviceId]);
+
    return (
       <>
          <div className={classes.field}>
@@ -47,7 +61,7 @@ const PlanSourceSettings = ({ plan, onUpdate, error, isEditing }: PlanSourceSett
                onUpdate={(paths) => onUpdate({ ...plan, sourceConfig: { ...paths } })}
                deviceId={deviceId}
                single={plan.method === 'sync'}
-               disallowChange={plan.method === 'sync'}
+               disallowChange={plan.method === 'sync' && isEditing}
             />
          </div>
       </>

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

@@ -1,5 +1,6 @@
 .planStats {
    display: flex;
+   justify-content: space-between;
    gap: 20px;
    .widgetTitle {
       padding: 2px 6px;
@@ -42,6 +43,7 @@
             gap: 5px;
             font-size: 0.75rem;
             font-weight: 500;
+            min-width: 80px;
             img {
                width: auto;
                max-height: 18px;
@@ -55,6 +57,7 @@
                border: 1px solid var(--line-color);
                border-radius: 50%;
                width: 30px;
+               min-width: 30px;
                height: 30px;
                box-sizing: border-box;
                padding-top: 4px;

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

@@ -1,6 +1,6 @@
 import Icon from '../../common/Icon/Icon';
 import { Plan } from '../../../@types/plans';
-import { formatBytes, formatNumberToK } from '../../../utils/helpers';
+import { formatBytes, formatNumberToK, formatIntervalDisplay } from '../../../utils/helpers';
 import PlanHistory from '../PlanHistory/PlanHistory';
 import classes from './PlanStats.module.scss';
 import PlanStorageInfo from '../PlanStorageInfo/PlanStorageInfo';
@@ -45,13 +45,7 @@ const PlanStats = ({ plan, isSync, lastBackupItem }: PlanStatsProps) => {
                <div
                   data-tooltip-id="htmlToolTip"
                   data-tooltip-place="top"
-                  data-tooltip-html={
-                     isActive
-                        ? isSync
-                           ? `Syncing changes every ${interval.minutes} minutes`
-                           : `Copying changes ${['hours', 'minutes', 'days'].includes(interval.type) ? interval[interval.type as 'hours' | 'minutes' | 'days'] + interval.type : interval.type}`
-                        : 'Plan is Not Active'
-                  }
+                  data-tooltip-html={isActive ? `${isSync ? 'Syncing' : 'Copying'} changes ${formatIntervalDisplay(interval)}` : 'Plan is Not Active'}
                >
                   <Icon type={isActive ? (isSync ? 'reload' : 'copy') : 'pause'} size={16} />
                   <div className={classes.sourceArrow}>→</div>

package/src/components/common/Icon/Icon.tsx

@@ -732,6 +732,18 @@ const Icon = ({ type, color = 'currentColor', size = 16, title = '', classes = '
                </g>
             </IconWrapper>
          )}
+         {type === 'folder-exclude' && (
+            <IconWrapper size={size} viewBox="0 0 24 24">
+               <path
+                  fill="none"
+                  stroke={color}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13.5 19H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4l3 3h7a2 2 0 0 1 2 2v4m1 9l-5-5m0 5l5-5"
+               ></path>
+            </IconWrapper>
+         )}
 
          {type === 'folders' && (
             <IconWrapper size={size} viewBox="0 0 24 24">

package/src/components/common/form/IntervalField/IntervalField.tsx

@@ -1,3 +1,4 @@
+import { NumberInput } from '../../..';
 import { PlanInterval } from '../../../../@types/plans';
 import Icon from '../../Icon/Icon';
 import FormField from '../FormField/FormField';
@@ -44,6 +45,7 @@ const IntervalField = ({
                      { label: 'Daily', value: 'daily' },
                      { label: 'Weekly', value: 'weekly' },
                      { label: 'Monthly', value: 'monthly' },
+                     { label: 'Every x Minutes', value: 'minutes' },
                      { label: 'Every x Hours', value: 'hours' },
                      { label: 'Every x Days', value: 'days' },
                   ]}
@@ -84,7 +86,7 @@ const IntervalField = ({
                      </div>
                   </>
                )}
-               {fieldValue.type !== 'hourly' && fieldValue.type !== 'hours' && (
+               {fieldValue.type !== 'hourly' && fieldValue.type !== 'hours' && fieldValue.type !== 'minutes' && (
                   <>
                      <span>at</span>
                      <TimePicker fieldValue={fieldValue.time || '10:00AM'} onUpdate={(val) => onUpdate({ ...fieldValue, time: val })} />
@@ -123,6 +125,24 @@ const IntervalField = ({
                      />
                   </>
                )}
+               {fieldValue.type === 'minutes' && (
+                  <>
+                     <span>Every</span>
+                     <NumberInput
+                        min={5}
+                        inline={true}
+                        fieldValue={fieldValue.minutes || 5}
+                        onUpdate={(minutes) =>
+                           onUpdate({
+                              ...fieldValue,
+                              minutes: minutes,
+                           })
+                        }
+                        placeholder="1"
+                     />{' '}
+                     Minutes
+                  </>
+               )}
                {fieldValue.type === 'hours' && (
                   <>
                      <span>Every</span>

package/src/components/common/form/StoragePicker/StoragePicker.tsx

@@ -70,6 +70,13 @@ const StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false
       }
    }, [selectedStorage, path]);
 
+   useEffect(() => {
+      if (!disabled) {
+         setSelectedStorage(null);
+         setPath('');
+      }
+   }, [deviceId, disabled]);
+
    // console.log('Storage path :', path, !disabled && isLocalStorage && !path);
 
    return (
@@ -98,7 +105,7 @@ const StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false
                   <Input
                      disabled={disabled}
                      fieldValue={path}
-                     onUpdate={(val) => setPath(val.startsWith('/') ? val.slice(1) : val)} //if the val starts with a slash remove it
+                     onUpdate={(val) => setPath(!isLocalStorage && val.startsWith('/') ? val.slice(1) : val)} //if the val starts with a slash remove it (only for remote storages, local paths need the leading slash)
                      placeholder={isLocalStorage ? 'Select a folder' : hasBucketName ? 'subfolder' : `folder-or-bucket/subfolder`}
                      full={true}
                      required={!disabled && isLocalStorage}

package/src/components/common/form/TagsInput/TagsInput.tsx

@@ -10,11 +10,12 @@ type TagsInputProps = {
    icon?: string;
    type?: string;
    inline?: boolean;
+   hint?: string;
    fieldValue: string[];
    onUpdate: (f: string[]) => void;
 };
 
-const TagsInput = ({ label, description, customClasses = '', fieldValue = [], onUpdate, icon, type = 'tag', inline }: TagsInputProps) => {
+const TagsInput = ({ label, description, customClasses = '', hint = '', fieldValue = [], onUpdate, icon, type = 'tag', inline }: TagsInputProps) => {
    const [tags, setTags] = useState<string[]>(() => (Array.isArray(fieldValue) ? fieldValue : []));
    const [newTag, setNewTag] = useState('');
 
@@ -56,7 +57,7 @@ const TagsInput = ({ label, description, customClasses = '', fieldValue = [], on
    };
 
    return (
-      <FormField type={'tags'} label={label} description={description} inline={inline} classes={`${classes.tagField} ${customClasses}`}>
+      <FormField type={'tags'} label={label} hint={hint} description={description} inline={inline} classes={`${classes.tagField} ${customClasses}`}>
          <div className={classes.tagBox}>
             {tags.map((t, i) => (
                <div className={classes.tag} key={t + i}>

package/src/components/common/form/TimePicker/TimePicker.module.scss

@@ -28,6 +28,7 @@
 
 .timeSelect {
    position: absolute;
+   z-index: 33;
    background-color: var(--field-bg);
    border: 1px solid var(--field-line-color);
    padding: 10px;

package/src/hooks/usePlanSingleActions.tsx

@@ -50,8 +50,8 @@ export const usePlanSingleActions = (): {
 
    const sortedHistory = [...(plan.backups || [])].sort((a, b) => b.started - a.started);
    const activeBackups = sortedHistory.filter((s) => s.inProgress);
-   const activeRestores = (plan.restores || []).filter((s) => s.status === 'started');
-   const lastBackupItem = sortedHistory[0];
+   const activeRestores = (plan.restores || []).filter((s) => s.inProgress);
+   const lastBackupItem = isSync ? sortedHistory.filter((s) => s.status === 'completed')[0] : sortedHistory[0];
    const actionInProgress = activeBackups.length > 0 || activeRestores.length > 0;
    const taskPending = pauseMutation.isPending || resumeMutation.isPending || performBackupMutation.isPending;
 

package/src/routes/Settings/Settings.module.scss

@@ -65,7 +65,7 @@
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
-         overflow: hidden;
+         // overflow: hidden;
          h4 {
             color: var(--content-title-color);
             margin-top: 0;

package/src/styles/global.scss

@@ -359,3 +359,9 @@ i.pipe {
       transform: translateX(100%);
    }
 }
+
+@media (max-width: 768px) {
+   :root {
+      --container-width: 100%;
+   }
+}

package/src/utils/constants.ts

@@ -57,7 +57,7 @@ export const DEFAULT_PLAN_SETTINGS: NewPlanSettings = {
          snapCount: 5,
          policy: 'forgetByAge',
          forgetAge: '1m',
-         revisions: true,
+         revisions: false,
       },
       performance: {
          scan: true,

package/src/utils/helpers.ts

@@ -1,5 +1,6 @@
 import { storageOptionField } from '../@types/storages';
 import { FileItem } from '../@types/system';
+import { PlanInterval } from '../@types/plans';
 
 export const isMobile = (): boolean => {
    // Server-side rendering check
@@ -472,6 +473,30 @@ export const getAvailableCliApps = (platform?: string) => {
    }
 };
 
+export const formatIntervalDisplay = (interval: PlanInterval): string => {
+   const time = interval.time ? ` at ${interval.time}` : '';
+   switch (interval.type) {
+      case 'hourly':
+         return 'every hour';
+      case 'hours':
+         return `every ${interval.hours?.replace('hrs', '')} hours`;
+      case 'minutes':
+         return `every ${interval.minutes} minutes`;
+      case 'daily':
+         return `daily${time}`;
+      case 'weekly':
+         return `weekly on ${interval.days}${time}`;
+      case 'days': {
+         const dayList = interval.days?.replace(/-$/, '').replace(/-/g, ', ');
+         return `every ${dayList}${time}`;
+      }
+      case 'monthly':
+         return `monthly (${interval.days})${time}`;
+      default:
+         return interval.type;
+   }
+};
+
 export const secondsToMinutes = (seconds: number) => {
    if (seconds === 0) {
       return '';

package/src/utils/plans.ts

@@ -13,11 +13,11 @@ export function planIntervalName(interval: PlanInterval): string {
       case 'monthly':
          return 'Every Month';
       case 'days':
-         return `Every ${interval.days} days`;
+         return `Every ${interval.days}`;
       case 'hours':
-         return `Every ${interval.hours} hrs`;
+         return `Every ${interval.hours}`;
       case 'minutes':
-         return `Every ${interval.minutes} mins`;
+         return `Every ${interval.minutes}`;
       default:
          return '';
    }