@plutonhq/core-frontend 0.1.32 → 0.1.34

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