@plutonhq/core-frontend 0.0.1

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

@@ -0,0 +1,96 @@
+import Icon from '../../common/Icon/Icon';
+import { Plan } from '../../../@types/plans';
+import { formatBytes, formatNumberToK } from '../../../utils/helpers';
+import PlanHistory from '../PlanHistory/PlanHistory';
+import classes from './PlanStats.module.scss';
+
+interface PlanStatsProps {
+   plan: Plan;
+   isSync: boolean;
+   lastBackupItem: any;
+}
+
+const PlanStats = ({ plan, isSync, lastBackupItem }: PlanStatsProps) => {
+   const { sourceConfig, storage, storagePath, isActive, settings } = plan;
+   const { interval } = settings;
+
+   const totalFiles = lastBackupItem?.totalFiles || 0;
+   const totalSize = lastBackupItem?.totalSize || 0;
+
+   const sourceTooltipHTML = (sources: Plan['sourceConfig']) => {
+      let html = '';
+      if (sources && sources.includes && sources.includes.length > 0) {
+         html += `<div><strong>Includes</strong></div>`;
+         html += sources.includes.map((p) => `<div>${p}</div>`).join('');
+      }
+      if (sources && sources.excludes && sources.excludes.length > 0) {
+         html += `<div><strong>Excludes</strong></div>`;
+         html += sources.excludes.map((p) => `<div>${p}</div>`).join('');
+      }
+      return html;
+   };
+
+   return (
+      <div className={classes.planStats}>
+         <div className={classes.sources}>
+            <div className={classes.widgetTitle}>
+               <Icon type="backup" size={12} /> {isSync ? 'Syncing' : 'Backing Up'}
+            </div>
+            <div className={classes.sourceContent}>
+               <div data-tooltip-id="htmlToolTip" data-tooltip-place="top" data-tooltip-html={sourceTooltipHTML(sourceConfig)}>
+                  <Icon type="folders" size={18} />
+                  <span>{sourceConfig?.includes.length} Sources</span>
+               </div>
+               <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'
+                  }
+               >
+                  <Icon type={isActive ? (isSync ? 'reload' : 'copy') : 'pause'} size={16} />
+                  <div className={classes.sourceArrow}>→</div>
+               </div>
+               <div
+                  data-tooltip-id="htmlToolTip"
+                  data-tooltip-place="top"
+                  data-tooltip-html={`<div><strong>Storage:</strong> ${storage?.name}</div><div><strong>Path:</strong> ${storagePath || '/'}</div>`}
+               >
+                  {storage?.type && <img src={`/providers/${storage?.type}.png`} />}
+                  {storage?.name}
+               </div>
+            </div>
+         </div>
+         <div className={classes.snapshots}>
+            <div className={classes.widgetTitle}>
+               <Icon type="folders" size={12} /> Source Stats
+            </div>
+            <div className={classes.snapshotsContent}>
+               <div>
+                  <span>{totalFiles ? formatNumberToK(totalFiles) : 0}</span>
+                  <span>Files</span>
+               </div>
+               <div></div>
+               <div>
+                  <span>{totalSize ? formatBytes(totalSize) : '0.00B'}</span>
+                  <span>Size</span>
+               </div>
+            </div>
+         </div>
+         <div className={classes.health}>
+            <div className={classes.widgetTitle}>
+               <Icon type="speed" size={12} /> Health
+            </div>
+            <div className={classes.healthContent}>
+               <PlanHistory planId={plan.id} history={plan.backups} itemsCount={90} />
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default PlanStats;

package/src/components/Plan/PlanUnlockModal/PlanUnlockModal.tsx

@@ -0,0 +1,34 @@
+import { useUnlockPlan } from '../../../services/plans';
+import ActionModal from '../../common/ActionModal/ActionModal';
+
+interface PlanUnlockModalProps {
+   planId: string;
+   taskPending: boolean;
+   close: () => void;
+}
+
+const PlanUnlockModal = ({ planId, taskPending, close }: PlanUnlockModalProps) => {
+   const unlockMutation = useUnlockPlan();
+   return (
+      <ActionModal
+         title="Unlock Stale Locks"
+         message={<>Remove unused locks left by failed backups. This helps if a backup is stuck and you want to start a new one.</>}
+         closeModal={() => !unlockMutation.isPending && close()}
+         width="500px"
+         primaryAction={{
+            title: 'Yes, Unlock',
+            type: 'default',
+            isPending: unlockMutation.isPending,
+            action: () =>
+               !taskPending &&
+               unlockMutation.mutate(planId, {
+                  onSuccess: () => {
+                     close();
+                  },
+               }),
+         }}
+      />
+   );
+};
+
+export default PlanUnlockModal;

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

@@ -0,0 +1,155 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useQueryClient } from '@tanstack/react-query';
+import Icon from '../../common/Icon/Icon';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { RestoreSlim } from '../../../@types/restores';
+import { formatBytes, formatDateTime, formatDuration, formatNumberToK, timeAgo } from '../../../utils/helpers';
+import classes from '../Backups/Backups.module.scss';
+import StatusLabel from '../../common/StatusLabel/StatusLabel';
+import { useDeleteRestore } from '../../../services/restores';
+import BackupEvents from '../BackupEvents/BackupEvents';
+import RestoreChangeViewer from '../../Restore/RestoreChangeViewer/RestoreChangeViewer';
+
+const Restores = ({
+   planId,
+   method,
+   restores = [],
+   sourceId,
+   sourceType,
+}: {
+   planId: string;
+   method: string;
+   sourceId: string;
+   sourceType: string;
+   restores: RestoreSlim[];
+}) => {
+   const [showSnapOptions, setShowSnapOptions] = useState<false | string>(false);
+   const [previewRestore, setPreviewRestore] = useState<false | RestoreSlim>(false);
+   const [showDeleteModal, setShowDeleteModal] = useState<RestoreSlim | false>(false);
+   const [showRestoreEvents, setShowRestoreEvents] = useState<false | string>(false);
+   const queryClient = useQueryClient();
+   const deleteRestoreMutation = useDeleteRestore();
+
+   const removeRestore = (restore: RestoreSlim) => {
+      console.log('remove :', restore.id);
+      deleteRestoreMutation.mutate(restore.id, {
+         onError: () => {
+            toast.error(`Failed to Remove Restore Entry`);
+         },
+         onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['plan', planId] });
+            toast.success(`Restore Entry Removed Successfully.`, { autoClose: 5000 });
+            setShowDeleteModal(false);
+         },
+      });
+   };
+
+   const isSync = method === 'sync';
+
+   return (
+      <div className={classes.backupsTable}>
+         <div className={classes.backupsTableHead}>
+            <div>Restored Backup</div>
+            <div>Status</div>
+            <div>Duration</div>
+            <div>Restore Path</div>
+            <div>Files</div>
+            <div>Date</div>
+            <div></div>
+         </div>
+         <div className={classes.backupsTableContent}>
+            {restores
+               .filter((s) => s.status !== 'started')
+               .map((restore) => {
+                  const { id, backupId, started, ended, config, status, taskStats, errorMsg } = restore;
+                  const duration = started && ended && new Date(ended).getTime() / 1000 - new Date(started).getTime() / 1000;
+                  return (
+                     <div
+                        key={id}
+                        className={`${classes.backupsTableRow} ${showSnapOptions && showSnapOptions === id ? classes.backupsTableRowActive : ''}`}
+                     >
+                        <div className={classes.backupTitle} onClick={() => !isSync && setShowRestoreEvents(id)}>
+                           <Icon type={isSync ? 'sync' : 'box'} size={14} /> {isSync ? 'sync' : 'backup'}-{backupId}
+                        </div>
+                        <div
+                           className={classes.status}
+                           data-tooltip-id="htmlToolTip"
+                           data-tooltip-html={`<div><string>Error</string>: ${errorMsg}</div>`}
+                           data-tooltip-hidden={!errorMsg}
+                        >
+                           <StatusLabel status={status} hasError={!!errorMsg} />
+                        </div>
+                        <div title={duration + 's'}>{formatDuration(duration)}</div>
+                        <div className={classes.target} data-tooltip-id="htmlToolTip" data-tooltip-html={`${config.target}`}>
+                           {config.target || 'Original'}
+                        </div>
+                        <div data-tooltip-id="" data-tooltip-html={formatBytes(taskStats?.bytes_restored || 0)}>
+                           {formatNumberToK(taskStats?.files_restored || 0)}
+                        </div>
+                        <div title={formatDateTime(ended || started)}>{ended ? timeAgo(new Date(ended)) : timeAgo(new Date(started))}</div>
+                        <div className={classes.snapOptsBtn}>
+                           <button onClick={() => setShowSnapOptions(showSnapOptions && showSnapOptions === id ? false : id)}>
+                              <Icon type="dots-vertical" size={12} />
+                           </button>
+                        </div>
+                        {showSnapOptions === id && (
+                           <div className={classes.settings}>
+                              <button
+                                 onClick={() => {
+                                    setPreviewRestore(restore);
+                                    setShowSnapOptions(false);
+                                 }}
+                              >
+                                 <Icon type={'eye'} size={14} /> View Changes
+                              </button>
+                              <button
+                                 onClick={() => {
+                                    setShowDeleteModal(restore);
+                                    setShowSnapOptions(false);
+                                 }}
+                              >
+                                 <Icon type="trash" size={14} /> Remove
+                              </button>
+                           </div>
+                        )}
+                     </div>
+                  );
+               })}
+            {restores.length === 0 && <div className={classes.noBackups}>No Backups Restored Yet.</div>}
+         </div>
+         {showDeleteModal && (
+            <ActionModal
+               title="Remove Restore Entry"
+               message={
+                  <>
+                     Are you sure you want to remove this Restore entry <strong>"restore-{showDeleteModal.id}"</strong> from the database?
+                  </>
+               }
+               closeModal={() => !deleteRestoreMutation.isPending && setShowDeleteModal(false)}
+               width="400px"
+               primaryAction={{
+                  title: 'Yes, Remove Restore',
+                  type: 'danger',
+                  icon: 'trash',
+                  isPending: deleteRestoreMutation.isPending,
+                  action: () => removeRestore(showDeleteModal),
+               }}
+            />
+         )}
+         {previewRestore && previewRestore?.taskStats && <RestoreChangeViewer restore={previewRestore} close={() => setPreviewRestore(false)} />}
+         {showRestoreEvents && (
+            <BackupEvents
+               id={showRestoreEvents}
+               type="restore"
+               planId={planId}
+               sourceId={sourceId}
+               sourceType={sourceType}
+               close={() => setShowRestoreEvents(false)}
+            />
+         )}
+      </div>
+   );
+};
+
+export default Restores;

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

@@ -0,0 +1,71 @@
+.preview {
+   width: 100%;
+   height: 100vh;
+   background-color: var(--modal-bg);
+   position: fixed;
+   left: 0;
+   top: 0;
+   z-index: 999;
+   display: flex;
+   align-items: flex-start;
+   justify-content: center;
+   .previewWrapper {
+      width: 90%;
+      max-width: 1200px;
+      height: 100vh;
+      position: absolute;
+      background: var(--content-background-color);
+      color: var(--content-text-color);
+      border: 1px solid var(--content-shadow-color);
+      right: 0;
+      top: 0;
+      box-sizing: border-box;
+      box-shadow: 0 0 20px var(--modal-shadow-color);
+      .previewBrowser {
+         display: flex;
+         flex-direction: column;
+         padding: 30px;
+         height: calc(100vh - 130px);
+         overflow: auto;
+         position: relative;
+      }
+   }
+   .previewHeader {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px;
+      // border-bottom: 1px solid var(--content-shadow-color);
+      h3 {
+         font-size: 1rem;
+         margin: 0;
+      }
+      .closePreview {
+         background: transparent;
+         opacity: 0.5;
+         color: var(--content-text-color);
+         transition: all 0.2s linear;
+         &:hover {
+            opacity: 1;
+            transform: rotate(90deg);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .preview {
+      .previewWrapper {
+         width: 100%;
+         .previewBrowser {
+            padding: 20px;
+            padding-top: 0;
+         }
+      }
+      .previewHeader {
+         h3 {
+            font-size: 13px;
+         }
+      }
+   }
+}

package/src/components/Restore/RestoreChangeViewer/RestoreChangeViewer.tsx

@@ -0,0 +1,37 @@
+import { RestoreSlim } from '../../../@types/restores';
+import { useGetRestoreStats } from '../../../services/restores';
+import Icon from '../../common/Icon/Icon';
+import RestoredFileBrowser from '../RestoredFileBrowser/RestoredFileBrowser';
+import classes from './RestoreChangeViewer.module.scss';
+
+interface RestoreChangeViewerProps {
+   restore: RestoreSlim;
+   close: () => void;
+}
+
+const RestoreChangeViewer = ({ restore, close }: RestoreChangeViewerProps) => {
+   const { data } = useGetRestoreStats(restore.id);
+   console.log('Restore Stats :', data?.result?.restoredPaths);
+   return (
+      <div className={classes.preview}>
+         <div className={classes.previewWrapper}>
+            <div className={classes.previewHeader}>
+               <h3>
+                  Restore File Changes{' '}
+                  <span className={`label ${restore.status !== 'completed' ? 'error' : 'success'}`}>
+                     {restore.status === 'completed' ? 'Successfully Restored' : 'Restoration Failed'}{' '}
+                  </span>
+               </h3>
+               <button className={classes.closePreview} onClick={() => close()}>
+                  <Icon type="close" size={24} />
+               </button>
+            </div>
+            <div className={classes.previewBrowser}>
+               <RestoredFileBrowser files={data?.result?.restoredPaths || []} stats={restore.taskStats || undefined} />
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default RestoreChangeViewer;