@plutonhq/core-frontend 0.1.31 → 0.1.33

package/src/components/common/SortItems/SortItems.module.scss

@@ -7,6 +7,7 @@
    span {
       opacity: 1;
       color: inherit;
+      font-weight: 600;
    }
 }
 
@@ -18,11 +19,11 @@
    background: var(--field-bg);
    width: calc(100% - 2px);
    border-radius: 0 0 4px 4px;
-   max-height: 200px;
    overflow: auto;
    font-size: 0.75rem;
    right: 0;
-   width: 200px;
+   width: 210px;
+   max-height: 320px;
    border-radius: 6px;
    ul {
       margin: 0;

package/src/components/common/SortItems/SortItems.tsx

@@ -2,18 +2,19 @@ import { useState } from 'react';
 import Icon from '../Icon/Icon';
 import classes from './SortItems.module.scss';
 type SortItemsProps = {
+   id: string;
    onSort: (s: string) => void;
    options: { label: string; value: string }[];
 };
 
-const SortItems = ({ options, onSort }: SortItemsProps) => {
+const SortItems = ({ id, options, onSort }: SortItemsProps) => {
    const [showDropDown, setshowDropDown] = useState(false);
-   const [selected, setsSelected] = useState('');
+   const [selected, setsSelected] = useState(localStorage.getItem(id) || '');
    const selectedLabel = options.find((item) => item.value === selected);
    return (
       <div className={classes.sortItems}>
          <button
-            className={selected ? classes.sortActive : ''}
+            className={selected || showDropDown ? classes.sortActive : ''}
             onClick={() => setshowDropDown(!showDropDown)}
             data-tooltip-id="appTooltip"
             data-tooltip-content="Sort"
@@ -34,6 +35,7 @@ const SortItems = ({ options, onSort }: SortItemsProps) => {
                               onClick={() => {
                                  setsSelected(item.value);
                                  onSort(item.value);
+                                 localStorage.setItem(id, item.value);
                                  setshowDropDown(false);
                               }}
                               className={`${selected && item.value === selected ? classes.selectedItem : ''}`}
@@ -46,6 +48,7 @@ const SortItems = ({ options, onSort }: SortItemsProps) => {
                      onClick={() => {
                         setsSelected('');
                         onSort('');
+                        localStorage.removeItem(id);
                         setshowDropDown(false);
                      }}
                   >

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

@@ -73,6 +73,7 @@
          .dropBtn {
             background: transparent;
             color: var(--icon-color);
+            padding: 0;
          }
       }
 

package/src/components/index.ts

@@ -27,6 +27,7 @@ export { default as PathPicker } from './common/PathPicker/PathPicker';
 export { default as SearchItems } from './common/SearchItems/SearchItems';
 export { default as SidePanel } from './common/SidePanel/SidePanel';
 export { default as SortItems } from './common/SortItems/SortItems';
+export { default as FilterPlans } from './Plan/FilterPlans/FilterPlans';
 export { default as StatusLabel } from './common/StatusLabel/StatusLabel';
 export { default as Tabs, TabList, TabPanel, Tab } from './common/Tabs/Tabs';
 export { default as TagsFilter } from './common/TagsFilter/TagsFilter';
@@ -90,6 +91,7 @@ export { default as PlanTypeSettings } from './Plan/PlanSettings/PlanTypeSetting
 export { default as PlanStats } from './Plan/PlanStats/PlanStats';
 export { default as PlanUnlockModal } from './Plan/PlanUnlockModal/PlanUnlockModal';
 export { default as PlanIntegrity } from './Plan/PlanIntegrity/PlanIntegrity';
+export { default as PlanRepair } from './Plan/PlanRepair/PlanRepair';
 export { default as SnapshotViewer } from './Plan/SnapshotViewer/SnapshotViewer';
 export { default as SnapshotViewerFile } from './Plan/SnapshotViewer/SnapshotViewerFile';
 

package/src/hooks/usePlanSingleActions.tsx

@@ -97,30 +97,33 @@ export const usePlanSingleActions = (): {
 
       const toastId = toast.loading(`Starting ${isSync ? 'Sync' : 'Backup'}...`);
 
-      performBackupMutation.mutate(plan.id, {
-         onSuccess: (data) => {
-            const msg = data?.message || `${isSync ? 'Sync' : 'Backup'} initiated successfully!  🚀`;
-            const notStarted = !isSync && data?.message && data?.message.includes('reached the concurrency limit');
-            toast.update(toastId, {
-               render: isSync ? msg : notStarted ? data?.message : 'Backup initiated successfully!',
-               type: 'success',
-               isLoading: false,
-               autoClose: 3000,
-            });
-            if (!isSync && !notStarted) {
-               navigate(`/plan/${plan.id}?pendingbackup=1`);
-            }
-         },
-         onError: (error: any) => {
-            toast.update(toastId, {
-               render: `${isSync ? 'Sync' : 'Backup'} failed to start. ${error?.message || 'Unknown Error.'}`,
-               type: 'error',
-               isLoading: false,
-               autoClose: false,
-               closeButton: true,
-            });
+      performBackupMutation.mutate(
+         { id: plan.id },
+         {
+            onSuccess: (data) => {
+               const msg = data?.message || `${isSync ? 'Sync' : 'Backup'} initiated successfully!  🚀`;
+               const notStarted = !isSync && data?.message && data?.message.includes('reached the concurrency limit');
+               toast.update(toastId, {
+                  render: isSync ? msg : notStarted ? data?.message : 'Backup initiated successfully!',
+                  type: 'success',
+                  isLoading: false,
+                  autoClose: 3000,
+               });
+               if (!isSync && !notStarted) {
+                  navigate(`/plan/${plan.id}?pendingbackup=1`);
+               }
+            },
+            onError: (error: any) => {
+               toast.update(toastId, {
+                  render: `${isSync ? 'Sync' : 'Backup'} failed to start. ${error?.message || 'Unknown Error.'}`,
+                  type: 'error',
+                  isLoading: false,
+                  autoClose: false,
+                  closeButton: true,
+               });
+            },
          },
-      });
+      );
    };
 
    return {

package/src/routes/Login/Login.tsx

@@ -65,7 +65,13 @@ const Login = () => {
             </h3>
          </div>
          <div className={classes.container}>
-            <div className="loginForm">
+            <form
+               className="loginForm"
+               onSubmit={(e) => {
+                  e.preventDefault();
+                  handleLogin();
+               }}
+            >
                <div className={classes.loginInput}>
                   <Icon type="user" classes={classes.loginInputIcon} />
                   <input
@@ -90,7 +96,7 @@ const Login = () => {
                   {loginMutation.isPending ? 'Logging in...' : 'Login'}
                </button>
                {error && error.msg && <div className={classes.loginErrorMsg}>{error.msg}</div>}
-            </div>
+            </form>
          </div>
       </div>
    );

package/src/routes/PlanSingle/PlanSingle.tsx

@@ -15,10 +15,13 @@ import PlanRemoveModal from '../../components/Plan/PlanRemoveModal/PlanRemoveMod
 import PlanProgress from '../../components/Plan/PlanProgress/PlanProgress';
 import PlanBackups from '../../components/Plan/PlanBackups/PlanBackups';
 import PlanIntegrity from '../../components/Plan/PlanIntegrity/PlanIntegrity';
+import PlanRepair from '../../components/Plan/PlanRepair/PlanRepair';
+import { PlanVerifiedResult } from '../..';
 
 const PlanSingle = () => {
    const [showMoreOptions, setShowMoreOptions] = useState(false);
    const [showIntegrityModal, setShowIntegrityModal] = useState(false);
+   const [showRepoRepair, setShowRepoRepair] = useState('');
    const { id } = useParams();
 
    const EditPlanModal = useComponentOverride('EditPlan', EditPlan);
@@ -198,6 +201,20 @@ const PlanSingle = () => {
                   storage={plan.storage}
                   replicationStorages={plan.settings.replication?.enabled ? plan.settings.replication.storages : []}
                   onClose={() => setShowIntegrityModal(false)}
+                  onRepairOpen={(replicationId) => {
+                     setShowIntegrityModal(false);
+                     setShowRepoRepair(replicationId);
+                  }}
+               />
+            )}
+            {showRepoRepair && !isSync && (
+               <PlanRepair
+                  planId={id}
+                  errorType={
+                     (plan.verified?.result[showRepoRepair as keyof typeof plan.verified.result] as PlanVerifiedResult)?.errorType || 'unknown'
+                  }
+                  onClose={() => setShowRepoRepair('')}
+                  onOpenIntegrity={() => setShowIntegrityModal(true)}
                />
             )}
             {showDeleteModal && (

package/src/routes/Plans/Plans.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import classes from './Plans.module.scss';
 import PageHeader from '../../components/common/PageHeader/PageHeader';
 import PlanItem from '../../components/Plan/PlanItems/PlanItem';
 import AddPlan from '../../components/Plan/AddPlan/AddPlan';
-import TagsFilter from '../../components/common/TagsFilter/TagsFilter';
 import SearchItems from '../../components/common/SearchItems/SearchItems';
 import SortItems from '../../components/common/SortItems/SortItems';
 import { useGetPlans } from '../../services/plans';
@@ -11,14 +10,14 @@ import { Plan } from '../../@types/plans';
 import { useComponentOverride } from '../../context/ComponentOverrideContext';
 import ItemsLayout from '../../components/common/ItemsLayout/ItemsLayout';
 import SkeletonItems from '../../components/Skeleton/SkeletonItems';
+import { getIntervalMinutes } from '../../utils';
+import FilterPlans, { PlanFilterTypes } from '../../components/Plan/FilterPlans/FilterPlans';
 
 const Plans = () => {
    const [showSidePanel, setShowSidePanel] = useState(false);
    const [plans, setPlans] = useState<Plan[]>([]);
    const [plansLayout, setPlansLayout] = useState<'list' | 'grid'>(() => (localStorage.getItem('plans_layout') === 'grid' ? 'grid' : 'list'));
    const { data, isLoading } = useGetPlans();
-   // const data = { result: [] };
-   // const isLoading = true;
 
    const fetchedPlans: Plan[] = data?.result || [];
 
@@ -27,33 +26,19 @@ const Plans = () => {
    useEffect(() => {
       if (data?.result) {
          setPlans(data.result);
+         const sortSetting = localStorage.getItem('plans_sort');
+         const filterSettingsRaw = localStorage.getItem('plans_filter');
+         const filterSettings = filterSettingsRaw ? JSON.parse(filterSettingsRaw) : null;
+         if (filterSettings) {
+            applyFilters(filterSettings, data.result);
+         }
+         if (sortSetting) {
+            sortPlans(sortSetting, data.result);
+         }
       }
    }, [data]);
 
-   console.log('plans :', plans);
-
-   const allTags = useMemo(() => {
-      const tags: string[] = [];
-      if (plans && plans.length > 0) {
-         plans.forEach((plan) => {
-            plan.tags.forEach((tag) => {
-               if (!tags.includes(tag)) {
-                  tags.push(tag);
-               }
-            });
-         });
-      }
-
-      return tags;
-   }, [plans]);
-
-   const filterByTags = (tag: string) => {
-      if (tag) {
-         setPlans(fetchedPlans.filter((p) => p.tags.includes(tag)));
-      } else {
-         setPlans(fetchedPlans);
-      }
-   };
+   // console.log('plans :', plans);
 
    const searchPlans = (term: string) => {
       if (term) {
@@ -63,28 +48,73 @@ const Plans = () => {
       }
    };
 
-   const sortPlans = (sortBy: string) => {
+   const sortPlans = (sortBy: string, plansToSort?: Plan[]) => {
+      const thePlans = plansToSort && plansToSort.length > 0 ? plansToSort : plans;
       switch (sortBy) {
          case 'title_asc':
-            setPlans([...plans].sort((a, b) => a.title.localeCompare(b.title)));
+            setPlans([...thePlans].sort((a, b) => a.title.localeCompare(b.title)));
             break;
          case 'title_desc':
-            setPlans([...plans].sort((a, b) => b.title.localeCompare(a.title)));
+            setPlans([...thePlans].sort((a, b) => b.title.localeCompare(a.title)));
             break;
          case 'created_asc':
-            setPlans([...plans].sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt)));
+            setPlans([...thePlans].sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt)));
             break;
          case 'created_desc':
-            setPlans([...plans].sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt)));
+            setPlans([...thePlans].sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt)));
+            break;
+         case 'size_asc':
+            setPlans([...thePlans].sort((a, b) => a.stats.size - b.stats.size));
+            break;
+         case 'size_desc':
+            setPlans([...thePlans].sort((a, b) => b.stats.size - a.stats.size));
+            break;
+         case 'run_frequency_asc':
+            setPlans([...thePlans].sort((a, b) => getIntervalMinutes(a.settings.interval) - getIntervalMinutes(b.settings.interval)));
+            break;
+         case 'run_frequency_desc':
+            setPlans([...thePlans].sort((a, b) => getIntervalMinutes(b.settings.interval) - getIntervalMinutes(a.settings.interval)));
             break;
          case '':
-            setPlans([...plans]);
+            setPlans([...fetchedPlans]);
             break;
          default:
             break;
       }
    };
 
+   const applyFilters = (filter: Record<PlanFilterTypes, string[]> | null, plansToSort?: Plan[]) => {
+      if (!filter) {
+         setPlans(fetchedPlans);
+         const sortSetting = localStorage.getItem('plans_sort');
+         if (sortSetting) {
+            sortPlans(sortSetting, fetchedPlans);
+         }
+         return;
+      } else {
+         let filteredPlans = plansToSort && plansToSort.length > 0 ? plansToSort : plans;
+
+         if (filter.devices.length > 0) {
+            filteredPlans = filteredPlans.filter((plan) => filter.devices.includes(plan.device.id));
+         }
+         if (filter.methods.length > 0) {
+            filteredPlans = filteredPlans.filter((plan) => filter.methods.includes(plan.method));
+         }
+         if (filter.storages.length > 0) {
+            filteredPlans = filteredPlans.filter((plan) => filter.storages.includes(plan.storage.id));
+         }
+         if (filter.tags.length > 0) {
+            filteredPlans = filteredPlans.filter((plan) => plan.tags.some((tag) => filter.tags.includes(tag)));
+         }
+
+         setPlans(filteredPlans);
+         const sortSetting = localStorage.getItem('plans_sort');
+         if (sortSetting) {
+            sortPlans(sortSetting, filteredPlans);
+         }
+      }
+   };
+
    return (
       <div className={classes.plans}>
          <PageHeader
@@ -94,17 +124,22 @@ const Plans = () => {
             buttonAction={() => setShowSidePanel(true)}
             rightSection={
                <>
-                  <TagsFilter tags={allTags} onSelect={filterByTags} />
                   <SearchItems onSearch={(term) => searchPlans(term)} itemName="Plans" />
                   <SortItems
+                     id={'plans_sort'}
                      options={[
                         { label: 'Title (A to Z)', value: 'title_asc' },
                         { label: 'Title (Z to A)', value: 'title_desc' },
+                        { label: 'Size (Smallest First)', value: 'size_asc' },
+                        { label: 'Size (Largest First)', value: 'size_desc' },
                         { label: 'Date Created (Oldest First)', value: 'created_asc' },
                         { label: 'Date Created (Newest First)', value: 'created_desc' },
+                        { label: 'Run Frequency (Shortest First)', value: 'run_frequency_asc' },
+                        { label: 'Run Frequency (Longest First)', value: 'run_frequency_desc' },
                      ]}
                      onSort={(sortBy) => sortPlans(sortBy)}
                   />
+                  <FilterPlans plans={fetchedPlans} onUpdate={(filterSettings) => applyFilters(filterSettings)} />
                   <ItemsLayout onChange={(value) => setPlansLayout(value)} type="plans" value={plansLayout} />
                </>
             }

package/src/services/plans.ts

@@ -1,7 +1,13 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
 import { API_URL } from '../utils/constants';
-import { NewPlanSettings, Plan, PlanNotification } from '../@types/plans';
+import { NewPlanSettings, Plan, PlanAddRunSettings, PlanNotification } from '../@types/plans';
+
+type BackupRunConfig = {
+   skipDryRun?: boolean;
+   skipPrune?: boolean;
+   ignoreErrors?: boolean;
+};
 
 // Get All Plans
 export async function getAllPlans() {
@@ -137,14 +143,14 @@ export function useGetDownloadLogs() {
 }
 
 // Create New Plan
-export async function createPlan(newPlan: NewPlanSettings) {
+export async function createPlan({ newPlan, runSettings }: { newPlan: NewPlanSettings; runSettings: PlanAddRunSettings }) {
    const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
    console.log('newPlan :', newPlan);
    const res = await fetch(`${API_URL}/plans`, {
       method: 'POST',
       credentials: 'include',
       headers: header,
-      body: JSON.stringify(newPlan),
+      body: JSON.stringify({ plan: newPlan, runSettings }),
    });
    const data = await res.json();
    if (!data.success) {
@@ -227,12 +233,13 @@ export function useDeletePlan() {
 }
 
 // Perform Backup
-export async function performBackup(id: string) {
+export async function performBackup({ id, runConfig }: { id: string; runConfig?: BackupRunConfig }) {
    const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
    const res = await fetch(`${API_URL}/plans/${id}/action/backup`, {
       method: 'POST',
       credentials: 'include',
       headers: header,
+      body: JSON.stringify({ runConfig }),
    });
    const data = await res.json();
    if (!data.success) {
@@ -468,6 +475,35 @@ export function useCheckPlanIntegrity() {
    });
 }
 
+export async function repairBackupPlan({ planId, type, replicationId }: { planId: string; type: string; replicationId?: string }) {
+   // const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/plans/${planId}/action/repair?type=${type}${replicationId ? `&replicationId=${replicationId}` : ''}`, {
+      method: 'POST',
+      credentials: 'include',
+      // headers: header,
+   });
+   // Check if response is ok
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data;
+}
+
+export function useRepairBackupPlan() {
+   const queryClient = useQueryClient();
+   return useMutation({
+      mutationFn: repairBackupPlan,
+      onSuccess: (res, payload) => {
+         queryClient.invalidateQueries({ queryKey: ['plan', payload.planId] });
+         console.log('res :', payload, res);
+      },
+      onError: (error, payload) => {
+         console.error('Error repairing backup plan for planId:', payload.planId, error);
+      },
+   });
+}
+
 export async function sendTestNotificationRequest(payload: {
    planId: string;
    notificationCase: string;

package/src/styles/global.scss

@@ -161,6 +161,10 @@ button {
    border-right: 1px solid var(--line-color);
 }
 
+.linebreak-tooltip-content {
+   line-break: anywhere;
+}
+
 .loadingScreen {
    width: 100%;
    height: 100vh;

package/src/utils/helpers.ts

@@ -30,6 +30,8 @@ export const isMobile = (): boolean => {
    return false;
 };
 
+export const isDarkMode = window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+
 const formatter = new Intl.RelativeTimeFormat('en');
 export const timeAgo = (input: Date) => {
    const date = input instanceof Date ? input : new Date(input);
@@ -503,3 +505,26 @@ export const secondsToMinutes = (seconds: number) => {
    }
    return seconds > 60 ? `${Math.round(seconds / 60)} min` : `${seconds} sec`;
 };
+
+export const getIntervalMinutes = (interval: PlanInterval): number => {
+   switch (interval.type) {
+      case 'minutes':
+         return interval.minutes || 5;
+      case 'hours':
+         return parseInt(interval.hours || '1') * 60;
+      case 'hourly':
+         return 60;
+      case 'daily':
+         return 1440;
+      case 'days': {
+         const dayCount = interval.days?.split(',').filter(Boolean).length || 1;
+         return Math.round((7 / dayCount) * 1440);
+      }
+      case 'weekly':
+         return 10080;
+      case 'monthly':
+         return 43200;
+      default:
+         return 1440;
+   }
+};