@plutonhq/core-frontend 0.1.6 → 0.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@plutonhq/core-frontend",
    "description": "Pluton Core Frontend Library",
-   "version": "0.1.6",
+   "version": "0.1.7",
    "author": "Plutonhq",
    "license": "Apache-2.0",
    "publishConfig": {

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

@@ -47,7 +47,8 @@
             cursor: pointer;
             transition: all 0.12s linear;
          }
-         .backupTitle {
+         .backupTitle,
+         .restoreTitle {
             cursor: pointer;
 
             &:hover {

package/src/components/Plan/PlanPendingBackup/PlanPendingBackup.tsx

@@ -1,37 +1,46 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router';
-import { useCheckActiveBackups } from '../../../services/plans';
+import { useCheckActiveBackupsOrRestore } from '../../../services/plans';
 import classes from './PlanPendingBackup.module.scss';
 import Icon from '../../common/Icon/Icon';
 
 interface PlanPendingBackup {
    planId: string;
-   onPendingBackupDetect: () => void;
+   type?: 'backup' | 'restore';
+   onPendingDetect: () => void;
 }
 
-const PlanPendingBackup = ({ planId, onPendingBackupDetect }: PlanPendingBackup) => {
+const PlanPendingBackup = ({ planId, type = 'backup', onPendingDetect }: PlanPendingBackup) => {
    const [, setSearchParams] = useSearchParams();
-   const checkActiveBackupsMutation = useCheckActiveBackups();
+   const checkActivesMutation = useCheckActiveBackupsOrRestore();
 
    useEffect(() => {
       const interval = window.setInterval(() => {
-         checkActiveBackupsMutation.mutate(planId, {
-            onSuccess: (data) => {
-               console.log('[isBackupPending] data :', data);
-               if (data.result) {
-                  window.clearInterval(interval);
-                  setSearchParams((params) => {
-                     params.delete('pendingbackup');
-                     return params;
-                  });
-                  onPendingBackupDetect();
-               }
+         checkActivesMutation.mutate(
+            { planId, type },
+            {
+               onSuccess: (data) => {
+                  console.log('[isBackupPending] data :', data);
+                  if (data.result) {
+                     window.clearInterval(interval);
+                     setSearchParams((params) => {
+                        if (type === 'restore') {
+                           params.delete('pendingrestore');
+                        } else {
+                           params.delete('pendingbackup');
+                        }
+
+                        return params;
+                     });
+                     onPendingDetect();
+                  }
+               },
             },
-         });
+         );
       }, 1000);
 
       return () => window.clearInterval(interval);
-   }, [planId]);
+   }, [planId, type]);
 
    return (
       <div className={classes.backup}>
@@ -39,7 +48,7 @@ const PlanPendingBackup = ({ planId, onPendingBackupDetect }: PlanPendingBackup)
             <Icon type="loading" size={24} />
          </div>
          <div className={classes.backupLeft}>
-            <div className={classes.backupId}>Starting Backup...</div>
+            <div className={classes.backupId}>Starting {type}...</div>
             <div className={classes.backupStart}>
                <div>
                   <Icon type="clock" size={12} /> Starting in a few seconds

package/src/components/Plan/PlanProgress/PlanProgress.tsx

@@ -8,12 +8,13 @@ import classes from './PlanProgress.module.scss';
 interface PlanProgressProps {
    plan: Plan;
    isBackupPending: boolean;
+   isRestorePending?: boolean;
    activeBackups: Backup[];
    activeRestores: RestoreSlim[];
    refetchPlan: () => void;
 }
 
-const PlanProgress = ({ plan, isBackupPending, activeBackups, activeRestores, refetchPlan }: PlanProgressProps) => {
+const PlanProgress = ({ plan, isBackupPending, isRestorePending, activeBackups, activeRestores, refetchPlan }: PlanProgressProps) => {
    return (
       <div>
          {isBackupPending && (
@@ -22,7 +23,7 @@ const PlanProgress = ({ plan, isBackupPending, activeBackups, activeRestores, re
                   <h3>Backup in Progress</h3>
                </div>
                <div className={classes.activeBackupsTable}>
-                  <PlanPendingBackup planId={plan.id} onPendingBackupDetect={() => refetchPlan()} />
+                  <PlanPendingBackup planId={plan.id} onPendingDetect={() => refetchPlan()} />
                </div>
             </div>
          )}
@@ -49,6 +50,16 @@ const PlanProgress = ({ plan, isBackupPending, activeBackups, activeRestores, re
             </div>
          )}
 
+         {isRestorePending && (
+            <div className={classes.activeBackups}>
+               <div className={classes.backupsHeader}>
+                  <h3>Restore in Progress</h3>
+               </div>
+               <div className={classes.activeBackupsTable}>
+                  <PlanPendingBackup planId={plan.id} type="restore" onPendingDetect={() => refetchPlan()} />
+               </div>
+            </div>
+         )}
          {activeRestores.length > 0 && (
             <div className={classes.activeBackups}>
                <div className={classes.backupsHeader}>

package/src/components/Plan/Restores/Restores.tsx

@@ -69,7 +69,7 @@ const Restores = ({
                         key={id}
                         className={`${classes.backupsTableRow} ${showSnapOptions && showSnapOptions === id ? classes.backupsTableRowActive : ''}`}
                      >
-                        <div className={classes.backupTitle} onClick={() => !isSync && setShowRestoreEvents(id)}>
+                        <div className={classes.restoreTitle} onClick={() => !isSync && setShowRestoreEvents(id)}>
                            <Icon type={isSync ? 'sync' : 'box'} size={14} /> {isSync ? 'sync' : 'backup'}-{backupId}
                         </div>
                         <div

package/src/components/Restore/RestoreFileSelector/RestoreFileSelector.tsx

@@ -165,12 +165,12 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
 
       const restorableFiles = fileSelectCondition ? files.filter((file) => fileSelectCondition(file)) : files;
 
-      console.log('restorableFiles :', restorableFiles);
-
       restorableFiles.forEach((file) => {
          if (isPathSelected(file.path)) {
             selectedFilesCount++;
-            selectedBytes += file.size;
+            if (!file.isDirectory) {
+               selectedBytes += file.size;
+            }
          }
       });
 
@@ -500,7 +500,7 @@ const RestoreFileSelector = ({ selected, files, isLoading, errorFetching, showCh
                         </div>
                      </div>
                      {selectedFolder ? (
-                        <List height={window.innerHeight - 300} itemCount={directChildren.length} itemSize={ITEM_HEIGHT} width="100%">
+                        <List height={window.innerHeight - 370} itemCount={directChildren.length} itemSize={ITEM_HEIGHT} width="100%">
                            {Row}
                         </List>
                      ) : (

package/src/components/Restore/RestoreWizard/RestoreConfirmStep.tsx

@@ -1,3 +1,5 @@
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router';
 import Icon from '../../common/Icon/Icon';
 import { useRestoreBackup } from '../../../services/restores';
 import classes from './RestoreWizard.module.scss';
@@ -16,20 +18,34 @@ interface RestoreConfirmStepProps {
 
 const RestoreConfirmStep = ({ backupId, planId, settings, stats, snapshotsStats, method, goBack, close }: RestoreConfirmStepProps) => {
    const restoreMutation = useRestoreBackup();
+   const navigate = useNavigate();
    const restoreStats = stats;
    const isSync = method === 'sync';
 
    const restoreBackup = () => {
       console.log('restore :', backupId);
-      restoreMutation.mutate({
-         backupId,
-         planId,
-         overwrite: settings.overwrite,
-         target: settings.type === 'custom' ? settings.path : '',
-         includes: settings.includes,
-         excludes: settings.excludes,
-         deleteOption: settings.delete,
-      });
+      restoreMutation.mutate(
+         {
+            backupId,
+            planId,
+            overwrite: settings.overwrite,
+            target: settings.type === 'custom' ? settings.path : '',
+            includes: settings.includes,
+            excludes: settings.excludes,
+            deleteOption: settings.delete,
+         },
+         {
+            onSuccess: (data: any, variables) => {
+               console.log('Success :', data);
+               toast.success(`Restore Started`, { autoClose: 5000 });
+               const targetPlanId = variables?.planId;
+               if (targetPlanId) {
+                  navigate(`/plan/${targetPlanId}?pendingrestore=1`);
+               }
+               close();
+            },
+         },
+      );
    };
 
    return (
@@ -69,15 +85,6 @@ const RestoreConfirmStep = ({ backupId, planId, settings, stats, snapshotsStats,
                   </button>
                </div>
             )}
-            {restoreMutation.isSuccess && (
-               <p className={classes.restoreSuccessMsg}>
-                  <Icon type="check-circle-filled" size={14} color="lightseagreen" /> Restore Process Started.{' '}
-                  <button onClick={() => location.reload()}>
-                     <Icon type="reload" size={12} /> Reload
-                  </button>{' '}
-                  the page to view the restoration progress.
-               </p>
-            )}
             {restoreMutation.isError && (
                <div className={classes.restoreError}>
                   <Icon type="error" size={14} color="red" /> {restoreMutation.error?.message || 'Failed to Generate Preview'}
@@ -94,7 +101,7 @@ const RestoreConfirmStep = ({ backupId, planId, settings, stats, snapshotsStats,
             </div>
             <div className={classes.footerRight}>
                <button onClick={() => close()} disabled={restoreMutation.isPending}>
-                  {restoreMutation.isSuccess ? 'Close' : 'Cancel'}
+                  Cancel
                </button>
             </div>
          </div>

package/src/components/Restore/RestoreWizard/RestorePreviewStep.tsx

@@ -96,7 +96,7 @@ const RestorePreviewStep = ({ backupId, planId, settings, preview, nextLabel, go
                   </button>
                </div>
             )}
-            {restoreStats && <RestoredFileBrowser files={restoredFiles} stats={restoreStats} />}
+            {restoreStats && <RestoredFileBrowser files={restoredFiles} stats={restoreStats} isPreview={true} />}
          </div>
          <div className={classes.footer}>
             <div className={classes.footerLeft}>

package/src/components/Restore/RestoreWizard/RestoreWizard.module.scss

@@ -136,8 +136,8 @@
          .fileManagerBtn {
             position: absolute;
             right: 0;
-            top: 22px;
-            padding: 10px;
+            top: 0;
+            padding: 8px;
             cursor: pointer;
             color: var(--icon-color);
             &:hover {

package/src/components/Restore/RestoredFileBrowser/RestoredFileBrowser.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { FixedSizeList as List } from 'react-window';
 import Icon from '../../common/Icon/Icon';
 import classes from './RestoredFileBrowser.module.scss';
@@ -10,12 +10,13 @@ import FileIcon from '../../common/FileIcon/FileIcon';
 interface RestoredFileBrowserProps {
    files: RestoredFileItem[];
    stats?: RestoredItemsStats;
+   isPreview?: boolean;
 }
 
 const isMobileDevice = isMobile();
 const ITEM_HEIGHT = isMobileDevice ? 65 : 45;
 
-const RestoredFileBrowser = ({ files, stats }: RestoredFileBrowserProps) => {
+const RestoredFileBrowser = ({ files, stats, isPreview = false }: RestoredFileBrowserProps) => {
    const [selectedFolder, setSelectedFolder] = useState<string>('');
    const [search, setSearch] = useState('');
    const [filters, setFilters] = useState({
@@ -69,9 +70,11 @@ const RestoredFileBrowser = ({ files, stats }: RestoredFileBrowserProps) => {
 
    const directories = useMemo(() => {
       const dirs = new Set<string>();
-      Object.keys(fileSystem).forEach((path) => {
-         const separator = getPathSeparator(path);
-         const parts = splitPath(path);
+      // Derive directories from all files, not filtered fileSystem, to keep tree stable during search
+      files.forEach((file) => {
+         const dirPath = getParentPath(file.path);
+         const separator = getPathSeparator(dirPath);
+         const parts = splitPath(dirPath);
          let currentPath = '';
 
          parts.forEach((part) => {
@@ -81,14 +84,15 @@ const RestoredFileBrowser = ({ files, stats }: RestoredFileBrowserProps) => {
             }
          });
       });
-      const dirsArray = Array.from(dirs);
-
-      // Set the first directory as selected by default
-      console.log('SelectedFolder :', dirsArray[0]);
-      setSelectedFolder(dirsArray[0] || '');
+      return Array.from(dirs);
+   }, [files]);
 
-      return dirsArray;
-   }, [fileSystem]);
+   // Set initial selected folder when directories change
+   useEffect(() => {
+      if (directories.length > 0 && selectedFolder === '') {
+         setSelectedFolder(directories[0]);
+      }
+   }, [directories, selectedFolder]);
 
    const hasSubdirectories = (dir: string) => {
       const separator = getPathSeparator(dir);
@@ -308,7 +312,7 @@ const RestoredFileBrowser = ({ files, stats }: RestoredFileBrowserProps) => {
                   </div>
                   {selectedFolder && totalItems > 0 ? (
                      <List
-                        height={window.innerHeight - 250}
+                        height={window.innerHeight - (isPreview ? 370 : 250)}
                         itemCount={totalItems}
                         itemSize={ITEM_HEIGHT}
                         width="100%"
@@ -317,7 +321,7 @@ const RestoredFileBrowser = ({ files, stats }: RestoredFileBrowserProps) => {
                         {FileRow}
                      </List>
                   ) : (
-                     <div className={classes.fileListEmpty}>Select a folder from the left to browse it's content</div>
+                     <div className={classes.fileListEmpty}>Select a folder from the left to browse its content</div>
                   )}
                </div>
             </div>

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

@@ -68,7 +68,7 @@
          }
       }
       .logs {
-         height: calc(100vh - 290px);
+         height: calc(100vh - 300px);
          overflow: auto;
 
          .log {

package/src/components/common/LogViewer/LogViewer.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Icon from '../Icon/Icon';
 import classes from './LogViewer.module.scss';
 import { useGetDownloadLogs } from '../../../services/plans';
@@ -25,19 +25,27 @@ const LogViewer = ({ type = '', planMethod = 'backup', logs = [], planId, settin
    const allTaskTypes = [...new Set(logs.map((log) => log.module))];
    const [search, setSearch] = useState('');
    const [filters, setFilters] = useState<string[]>(['info', 'error', 'warn']);
-   const [taskTypes, setTaskTypes] = useState<string[]>(allTaskTypes);
+   const [taskTypes, setTaskTypes] = useState<string[]>([]);
    const [currentPage, setCurrentPage] = useState(1);
    const downloadPlanLogsMutation = useGetDownloadLogs();
    const downloadAppLogsMutation = useGetDownloadAppLogs();
 
-   const theLogs = logs.filter((log) => {
-      const matchesSearch = log.msg?.toLowerCase().includes(search.toLowerCase());
-      const matchesBackupId = log.backupId?.toLowerCase().includes(search.toLowerCase());
-      const logType = getLogLevelName(log.level);
-      const matchesFilter = filters.includes(logType);
-      const matchesTaskType = taskTypes.includes(log.module);
-      return (matchesSearch || matchesBackupId) && matchesFilter && matchesTaskType;
-   });
+   useEffect(() => {
+      if (allTaskTypes.length > 0 && taskTypes.length === 0) {
+         setTaskTypes(allTaskTypes);
+      }
+   }, [allTaskTypes.length]);
+
+   const theLogs = logs
+      .filter((log) => {
+         const matchesSearch = log.msg?.toLowerCase().includes(search.toLowerCase());
+         const matchesBackupId = log.backupId?.toLowerCase().includes(search.toLowerCase());
+         const logType = getLogLevelName(log.level);
+         const matchesFilter = filters.includes(logType);
+         const matchesTaskType = taskTypes.includes(log.module);
+         return (matchesSearch || matchesBackupId) && matchesFilter && matchesTaskType;
+      })
+      .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime());
 
    const showPagination = theLogs.length > PAGINATION_THRESHOLD;
    const totalPages = Math.ceil(theLogs.length / ITEMS_PER_PAGE);

package/src/hooks/usePlanSingleActions.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { toast } from 'react-toastify';
 import { useGetPlan, usePausePlan, usePerformBackup, useResumePlan } from '../services/plans';
 import { Plan } from '../@types/plans';
@@ -37,6 +37,7 @@ export const usePlanSingleActions = (): {
    const [showLogsModal, setShowLogsModal] = useState(false);
 
    const { id } = useParams();
+   const navigate = useNavigate();
 
    const performBackupMutation = usePerformBackup();
    const pauseMutation = usePausePlan();
@@ -94,13 +95,25 @@ export const usePlanSingleActions = (): {
          return;
       }
 
-      toast.promise(performBackupMutation.mutateAsync(plan.id), {
-         pending: `Starting ${isSync ? 'Sync' : 'Backup'}...`,
-         success: `${isSync ? 'Sync' : 'Backup'} initiated successfully! 🚀`,
-         error: {
-            render({ data }: any) {
-               return `${isSync ? 'Sync' : 'Backup'} failed to start. ${data?.message || 'Unknown Error.'}`;
-            },
+      const toastId = toast.loading(`Starting ${isSync ? 'Sync' : 'Backup'}...`);
+
+      performBackupMutation.mutate(plan.id, {
+         onSuccess: () => {
+            toast.update(toastId, {
+               render: `${isSync ? 'Sync' : 'Backup'} initiated successfully! 🚀`,
+               type: 'success',
+               isLoading: false,
+               autoClose: 3000,
+            });
+            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,
+            });
          },
       });
    };

package/src/routes/PlanSingle/PlanSingle.tsx

@@ -23,6 +23,7 @@ const PlanSingle = () => {
 
    const [searchParams] = useSearchParams();
    const isBackupPending = searchParams.get('pendingbackup') === '1';
+   const isRestorePending = searchParams.get('pendingrestore') === '1';
 
    const {
       showDeleteModal,
@@ -154,6 +155,7 @@ const PlanSingle = () => {
                <PlanProgress
                   plan={plan}
                   isBackupPending={isBackupPending}
+                  isRestorePending={isRestorePending}
                   activeBackups={activeBackups}
                   activeRestores={activeRestores}
                   refetchPlan={refetchPlan}

package/src/services/backups.ts

@@ -2,6 +2,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
 import { API_URL } from '../utils/constants';
 
+const notifiedBackupProgress = new Set<string>();
+
 // Generate Download
 export async function generateBackupDownload({ backupId }: { backupId: string; planId: string }) {
    // const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
@@ -153,6 +155,9 @@ export function useGetBackupProgress(payload: { id: string; sourceId: string; so
       refetchOnMount: true,
       retry: false,
       refetchInterval(query) {
+         // Only refetch if the browser tab is active
+         // if (document.hidden) return false;
+
          // console.log('query :', query.state?.data);
          const progressData = query.state?.data;
 
@@ -161,11 +166,14 @@ export function useGetBackupProgress(payload: { id: string; sourceId: string; so
 
          if (isFinished) {
             const planId = progressData?.planId || payload.planId;
-            if (planId) {
-               console.log('Invalidate Plan and Reload It :', planId);
-               queryClient.invalidateQueries({ queryKey: ['plan', planId] });
+            if (!notifiedBackupProgress.has(payload.id)) {
+               notifiedBackupProgress.add(payload.id);
+               if (planId) {
+                  console.log('Invalidate Plan and Reload It :', planId);
+                  queryClient.invalidateQueries({ queryKey: ['plan', planId] });
+               }
+               toast.success('Process Complete!');
             }
-            toast.success('Process Complete!');
             return false;
          }
 

package/src/services/plans.ts

@@ -370,8 +370,9 @@ export function useUnlockPlan() {
 }
 
 // Get Backup Progress
-export async function checkActiveBackups(planId: string) {
+export async function checkActiveBackupsOrRestore(planId: string, type: 'backup' | 'restore' = 'backup') {
    const url = new URL(`${API_URL}/plans/${planId}/checkactive`);
+   url.searchParams.append('type', type);
 
    const res = await fetch(url.toString(), {
       method: 'GET',
@@ -384,10 +385,10 @@ export async function checkActiveBackups(planId: string) {
    return data;
 }
 
-export function useCheckActiveBackups() {
+export function useCheckActiveBackupsOrRestore() {
    return useMutation({
       // queryKey: ['planActiveBackups-' + planId],
-      mutationFn: checkActiveBackups,
+      mutationFn: ({ planId, type }: { planId: string; type: 'backup' | 'restore' }) => checkActiveBackupsOrRestore(planId, type),
       // refetchOnMount: true,
    });
 }

package/src/services/restores.ts

@@ -2,6 +2,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
 import { API_URL } from '../utils/constants';
 
+const notifiedRestoreProgress = new Set<string>();
+
 // Get All Restores
 export async function getAllRestores() {
    const url = new URL(`${API_URL}/restores`);
@@ -232,6 +234,9 @@ export function useGetRestoreProgress(payload: { id: string; sourceId: string; s
       refetchOnMount: true,
       retry: false,
       refetchInterval(query) {
+         // Only refetch if the browser tab is active
+         // if (document.hidden) return false;
+
          const progressData = query.state?.data;
 
          // Check if backup is finished by looking for a "finished" phase event
@@ -239,11 +244,14 @@ export function useGetRestoreProgress(payload: { id: string; sourceId: string; s
 
          if (isFinished) {
             const planId = progressData?.planId || payload.planId;
-            if (planId) {
-               console.log('Invalidate Plan and Reload It :', planId);
-               queryClient.invalidateQueries({ queryKey: ['plan', planId] });
+            if (!notifiedRestoreProgress.has(payload.id)) {
+               notifiedRestoreProgress.add(payload.id);
+               if (planId) {
+                  console.log('Invalidate Plan and Reload It :', planId);
+                  queryClient.invalidateQueries({ queryKey: ['plan', planId] });
+               }
+               toast.success('Restoration Complete!');
             }
-            toast.success('Restoration Complete!');
             return false;
          }