@plutonhq/core-frontend 0.0.1

package/src/components/Plan/Backups/Backups.tsx

@@ -0,0 +1,295 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { Plan } from '../../../@types/plans';
+import { Backup } from '../../../@types/backups';
+import { formatBytes, formatDateTime, formatDuration, formatNumberToK, timeAgo } from '../../../utils/helpers';
+import Icon from '../../common/Icon/Icon';
+import classes from './Backups.module.scss';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useCancelBackupDownload, useDeleteBackup, useDownloadBackup, useGetBackupDownload } from '../../../services/backups';
+import { useQueryClient } from '@tanstack/react-query';
+import RestoreWizard from '../../Restore/RestoreWizard/RestoreWizard';
+import StatusLabel from '../../common/StatusLabel/StatusLabel';
+import BackupEvents from '../BackupEvents/BackupEvents';
+
+const DownloadLabel = ({ download, downloadBackup }: { download: Backup['download']; downloadBackup: () => void }) => {
+   if (download?.status === 'started') {
+      return (
+         <span
+            className={classes.downloadLabel}
+            data-tooltip-id="htmlToolTip"
+            data-tooltip-place="top"
+            data-tooltip-html={`<div>Generating Download...</div>`}
+         >
+            <Icon type="downloading" size={14} />
+         </span>
+      );
+   } else if (download?.status === 'failed') {
+      return (
+         <span
+            className={`${classes.downloadLabelFailed} ${classes.downloadLabel}`}
+            data-tooltip-id="htmlToolTip"
+            data-tooltip-place="top"
+            data-tooltip-html={`<div><div>Download Generation Failed!</div>${download.error ? `<div>${download.error}<div>` : ''}</div>`}
+         >
+            <Icon type="error" size={12} />
+         </span>
+      );
+   } else if (download?.status === 'complete') {
+      let remainingHours;
+      if (download?.ended) {
+         const endTime = download.ended * 1000;
+         const validUntil = endTime + 24 * 60 * 60 * 1000;
+         const now = Date.now();
+         remainingHours = Math.max(0, Math.floor((validUntil - now) / (60 * 60 * 1000)));
+      }
+
+      return remainingHours ? (
+         <span
+            className={`${classes.downloadLabelDone} ${classes.downloadLabel}`}
+            onClick={downloadBackup}
+            data-tooltip-id="htmlToolTip"
+            data-tooltip-place="top"
+            data-tooltip-html={`<div><div>Download Generated. Click to Download. ${remainingHours ? `Valid for the next ${remainingHours} hours.` : '⚠ Download Expired!'} </div>`}
+         >
+            <Icon type="download" size={12} />
+         </span>
+      ) : null;
+   } else {
+      return;
+   }
+};
+
+const Backups = ({
+   planId,
+   method,
+   backups = [],
+   sourceId,
+   sourceType,
+   // snapLimit,
+}: {
+   planId: string;
+   method: string;
+   backups: Plan['backups'];
+   sourceId: string;
+   sourceType: string;
+   snapLimit: number;
+}) => {
+   const [showSnapOptions, setShowSnapOptions] = useState<false | string>(false);
+   const [showDeleteModal, setShowDeleteModal] = useState<Backup | false>(false);
+   const [showRestoreModal, setShowRestoreModal] = useState<Backup | false>(false);
+   const [showBackupEvents, setShowBackupEvents] = useState<false | string>(false);
+   const queryClient = useQueryClient();
+   const deleteBackupMutation = useDeleteBackup();
+   const downloadBackupMutation = useDownloadBackup();
+   const cancelDownloadMutation = useCancelBackupDownload();
+   const getDownloadMutation = useGetBackupDownload();
+   const isSync = method === 'sync';
+
+   console.log('backups :', backups);
+
+   const removeBackup = (backup: Backup) => {
+      console.log('remove :', backup.id);
+      deleteBackupMutation.mutate(backup.id, {
+         onError: () => {
+            toast.error(`Failed to Remove "backup-${backup.id}"`);
+         },
+         onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['plan', planId] });
+            toast.success(`Backup "backup-${backup.id}" Removed Successfully.`);
+            setShowDeleteModal(false);
+         },
+      });
+   };
+
+   const downloadBackup = (backupId: string) => {
+      toast.promise(downloadBackupMutation.mutateAsync({ backupId, planId }), {
+         pending: 'Sending Download Request...',
+         success: 'Generating Download. This might take a while..',
+         error: {
+            render({ data }: any) {
+               return `Failed to Generate Download. ${data?.message || 'Unknown Error.'}`;
+            },
+         },
+      });
+   };
+
+   const cancelDownload = (backupId: string) => {
+      toast.promise(cancelDownloadMutation.mutateAsync({ backupId, planId }), {
+         pending: 'Cancelling Download...',
+         success: 'Download Cancelled',
+         error: {
+            render({ data }: any) {
+               return `Failed to Cancel Download. ${data?.message || 'Unknown Error.'}`;
+            },
+         },
+      });
+   };
+
+   return (
+      <div className={classes.backupsTable}>
+         <div className={classes.backupsTableHead}>
+            <div>{isSync ? 'Sync' : 'Backup'} ID</div>
+            <div>Status</div>
+            <div>Duration</div>
+            <div>Changes</div>
+            <div>Size</div>
+            <div>Date</div>
+            <div></div>
+         </div>
+         <div className={classes.backupsTableContent}>
+            {backups
+               .filter((s) => !s.inProgress)
+               .map((snapshot) => {
+                  const { id, started, ended, download, status, errorMsg, duration, totalFiles, totalSize, changes, active } = snapshot;
+                  const isDownloading = download && download.status === 'started';
+
+                  return (
+                     <div
+                        key={id}
+                        className={`${classes.backupsTableRow} ${showSnapOptions && showSnapOptions === id ? classes.backupsTableRowActive : ''}`}
+                     >
+                        <div>
+                           <span className={classes.backupTitle} onClick={() => !isSync && setShowBackupEvents(id)}>
+                              <Icon type={isSync ? 'sync' : 'box'} size={14} /> {isSync ? 'sync' : 'backup'}-{id}{' '}
+                           </span>
+                           {!isSync && active && (
+                              <span className={classes.activeBackup} data-tooltip-id="htmlToolTip" data-tooltip-html={`Active Snapshot`}>
+                                 <Icon type="bolt" size={14} />
+                              </span>
+                           )}
+                           {download && <DownloadLabel download={download} downloadBackup={() => getDownloadMutation.mutate(id)} />}
+                        </div>
+                        <div
+                           className={`${classes.status} ${errorMsg ? classes.statusHasError : ''}`}
+                           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.changes}
+                           data-tooltip-id="htmlToolTip"
+                           data-tooltip-html={`
+                                          <div><b>New Items</b>: ${changes.new}</div>
+                                          <div><b>Modified Items</b>: ${changes.modified}</div>
+                                          <div><b>Deleted Items</b>: ${changes.removed || 0}</div>
+                                       `}
+                        >
+                           <span className={classes.changesNew}>
+                              <Icon type="file-new" size={12} /> {changes.new}
+                           </span>{' '}
+                           <span className={classes.changesModified}>
+                              <Icon type="file-modified" size={12} /> {changes.modified}
+                           </span>{' '}
+                           <span className={classes.changesRemoved}>
+                              <Icon type="file-removed" size={12} /> {changes.removed || 0}
+                           </span>
+                        </div>
+                        <div data-tooltip-id="htmlToolTip" data-tooltip-html={`${formatNumberToK(totalFiles)} Files `}>
+                           {formatBytes(totalSize)}
+                        </div>
+                        <div
+                           data-tooltip-id="htmlToolTip"
+                           data-tooltip-html={`
+                                          <div><b>Started</b>: ${formatDateTime(started)}</div>
+                                          <div><b>Ended</b>: ${ended ? formatDateTime(ended) : ''}</div>
+                                       `}
+                           title={formatDateTime(ended || started)}
+                        >
+                           {ended ? timeAgo(new Date(ended)) : timeAgo(started ? new Date(started) : new Date())}
+                        </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}>
+                              {!isSync && status === 'completed' && active && (
+                                 <button
+                                    className={downloadBackupMutation.isPending || cancelDownloadMutation.isPending ? 'notAllowed' : ''}
+                                    disabled={downloadBackupMutation.isPending || cancelDownloadMutation.isPending}
+                                    onClick={() => {
+                                       if (isDownloading) {
+                                          cancelDownload(id);
+                                       } else {
+                                          downloadBackup(id);
+                                       }
+                                       setShowSnapOptions(false);
+                                    }}
+                                 >
+                                    <Icon type={isDownloading ? 'close' : 'download'} size={14} /> {isDownloading ? 'Cancel Download' : 'Download'}
+                                 </button>
+                              )}
+                              {status === 'completed' && active && (
+                                 <button
+                                    className={isDownloading ? 'notAllowed' : ''}
+                                    disabled={isDownloading}
+                                    onClick={() => {
+                                       if (isDownloading) {
+                                          return;
+                                       }
+                                       setShowRestoreModal(snapshot);
+                                       setShowSnapOptions(false);
+                                    }}
+                                 >
+                                    <Icon type="restore" size={14} /> Restore
+                                 </button>
+                              )}
+                              <button
+                                 className={isDownloading ? 'notAllowed' : ''}
+                                 disabled={isDownloading}
+                                 onClick={() => {
+                                    if (isDownloading) {
+                                       return;
+                                    }
+                                    setShowDeleteModal(snapshot);
+                                    setShowSnapOptions(false);
+                                 }}
+                              >
+                                 <Icon type="trash" size={14} /> Remove
+                              </button>
+                           </div>
+                        )}
+                     </div>
+                  );
+               })}
+            {backups.length === 0 && <div className={classes.noBackups}>Hasn't been backed up yet.</div>}
+         </div>
+         {showDeleteModal && (
+            <ActionModal
+               title="Remove Backup"
+               message={
+                  <>
+                     Are you sure you want to remove the Backup <strong>"backup-{showDeleteModal.id}"</strong>?
+                  </>
+               }
+               closeModal={() => !deleteBackupMutation.isPending && setShowDeleteModal(false)}
+               width="400px"
+               primaryAction={{
+                  title: 'Yes, Remove Backup',
+                  type: 'danger',
+                  icon: 'trash',
+                  isPending: deleteBackupMutation.isPending,
+                  action: () => removeBackup(showDeleteModal),
+               }}
+            />
+         )}
+         {showRestoreModal && <RestoreWizard close={() => setShowRestoreModal(false)} planId={planId} backupId={showRestoreModal.id} />}
+         {showBackupEvents && (
+            <BackupEvents
+               id={showBackupEvents}
+               planId={planId}
+               sourceId={sourceId}
+               sourceType={sourceType}
+               close={() => setShowBackupEvents(false)}
+            />
+         )}
+      </div>
+   );
+};
+
+export default Backups;

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

@@ -0,0 +1,41 @@
+//Fields
+
+.field {
+   margin-bottom: 20px;
+   width: 100%;
+   position: relative;
+   .fieldErrorLabel {
+      position: absolute;
+      right: 10px;
+      top: 15px;
+      background-color: var(--error-bg-active);
+      color: var(--error-active-text);
+      padding: 1px 12px;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      letter-spacing: 0.2px;
+      z-index: 2;
+   }
+}
+
+.label {
+   font-weight: 600;
+   display: block;
+   margin-bottom: 8px;
+   font-size: 0.75rem;
+}
+
+.titleInput {
+   width: 100%;
+   border: 1px solid var(--line-color);
+   background-color: var(--content-background-color);
+   color: var(--content-text-color);
+   padding: 15px;
+   font-size: 0.75rem;
+   border-radius: 6px;
+   box-sizing: border-box;
+   &:focus {
+      outline: none;
+      border-color: var(line-active-color);
+   }
+}

package/src/components/Plan/EditPlan/EditPlan.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { NewPlanSettings, Plan } from '../../../@types/plans';
+import { useUpdatePlan } from '../../../services/plans';
+import PlanForm from '../PlanForm/PlanForm';
+
+type EditPlanProps = {
+   plan: Plan;
+   close: () => void;
+};
+
+const EditPlan = ({ close, plan }: EditPlanProps) => {
+   const [newPlan, setNewPlan] = useState<NewPlanSettings>(() => plan);
+   const backingUp = plan.backups.some((s) => s.inProgress);
+   const updatePlanMutation = useUpdatePlan();
+
+   const updatePlan = () => {
+      if (backingUp) {
+         return toast.error(`Can't Update Plan Settings while a Backup is in progress.`);
+      }
+      console.log('newPlan :', newPlan);
+
+      const allowedFields = ['title', 'isActive', 'storagePath', 'sourceConfig', 'tags', 'settings'] as const;
+      const updatedPlan = Object.fromEntries(Object.entries(newPlan).filter(([key]) => allowedFields.includes(key as any)));
+
+      updatePlanMutation.mutate(
+         { id: plan.id, data: updatedPlan },
+         {
+            onError: (error: any) => {
+               console.log('error :', error);
+               toast.error(error.message || `Error Updating Backup Plan.`);
+            },
+            onSuccess: (data: any) => {
+               console.log('Success :', data);
+               toast.success(`Backup Plan Updated!`, { autoClose: 5000 });
+            },
+         },
+      );
+   };
+
+   return (
+      <PlanForm
+         title="Edit Plan"
+         type="edit"
+         planSettings={newPlan}
+         isSubmitting={updatePlanMutation.isPending}
+         storagePath={plan.storagePath}
+         storageId={plan.storage.id}
+         onPlanSettingsChange={setNewPlan}
+         onSubmit={updatePlan}
+         close={close}
+      />
+   );
+};
+
+export default EditPlan;

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

@@ -0,0 +1,58 @@
+.backups {
+   margin-top: 20px;
+}
+
+.backupsHeader {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding-top: 10px;
+   h3 {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--content-title-color);
+      span {
+         background-color: var(--line-color);
+         color: var(--content-text-color-light);
+         font-size: 0.7rem;
+         padding: 1px 8px;
+         border-radius: 20px;
+      }
+   }
+
+   .historyTabs {
+      display: flex;
+      gap: 10px;
+      button {
+         padding: 12px 18px;
+         border-radius: 6px 6px 0 0;
+         color: var(--content-text-color-light);
+         border: 1px solid transparent;
+         position: relative;
+         top: 1px;
+         i {
+            padding: 2px 7px;
+            border-radius: 20px;
+            font-size: 0.625rem;
+            line-height: 0.625rem;
+            font-style: normal;
+            background-color: var(--light-grey);
+         }
+         &.historyTabActive {
+            color: var(--content-text-color);
+            border-color: var(--line-color);
+            border-bottom-color: var(--content-background-color);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .backups {
+      overflow-x: auto;
+   }
+   .backupsInfo {
+      display: none;
+   }
+}

package/src/components/Plan/PlanBackups/PlanBackups.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import classes from './PlanBackups.module.scss';
+import { formatBytes } from '../../../utils/helpers';
+import { Plan } from '../../../@types/plans';
+import Restores from '../Restores/Restores';
+import Backups from '../Backups/Backups';
+import { useComponentOverride } from '../../../context/ComponentOverrideContext';
+
+interface PlanBackupsProps {
+   plan: Plan;
+}
+
+const PlanBackups = ({ plan }: PlanBackupsProps) => {
+   const AllBackups = useComponentOverride('Backups', Backups);
+   const [historyTab, setHistoryTab] = useState<'backups' | 'restores'>('backups');
+
+   const { backups = [], stats, restores = [], method, sourceId, sourceType, settings } = plan;
+
+   const sortedHistory = [...(backups || [])].sort((a, b) => new Date(b.started).getTime() - new Date(a.started).getTime());
+   const isSync = method === 'sync';
+   const snapshotsCount = stats.snapshots?.length || 0;
+
+   return (
+      <div className={classes.backups}>
+         <div className={classes.backupsHeader}>
+            <div className={classes.historyTabs}>
+               <button onClick={() => setHistoryTab('backups')} className={historyTab === 'backups' ? classes.historyTabActive : ''}>
+                  {isSync ? 'Sync Tasks' : 'Backups'} <i>{sortedHistory.length}</i>
+               </button>
+               <button onClick={() => setHistoryTab('restores')} className={historyTab === 'restores' ? classes.historyTabActive : ''}>
+                  Restores <i>{restores.length}</i>
+               </button>
+            </div>
+            {!isSync && historyTab === 'backups' && (
+               <div className={classes.backupsInfo}>
+                  {snapshotsCount} Active Snapshots <i className="pipe">|</i> {formatBytes(stats.size)}
+               </div>
+            )}
+         </div>
+         {historyTab === 'backups' && (
+            <AllBackups
+               backups={sortedHistory}
+               planId={plan.id}
+               method={method}
+               sourceId={sourceId}
+               sourceType={sourceType}
+               snapLimit={settings.prune.snapCount}
+            />
+         )}
+         {historyTab === 'restores' && <Restores restores={restores} planId={plan.id} method={method} sourceId={sourceId} sourceType={sourceType} />}
+      </div>
+   );
+};
+
+export default PlanBackups;

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

@@ -0,0 +1,72 @@
+@use '../../../styles/steps.scss';
+
+.steps {
+   @extend %modalSteps;
+
+   &.stepsEdit {
+      & > ul {
+         position: relative;
+         top: 6px;
+         justify-content: flex-start;
+         gap: 12px;
+         &::before {
+            display: none;
+         }
+         li {
+            border-radius: 6px 6px 0 0;
+            border: 1px solid transparent;
+            border-bottom: none;
+            cursor: pointer;
+            i {
+               padding: 4px 18px;
+               position: relative;
+               top: -3px;
+            }
+            &.stepCurrent {
+               background-color: var(--content-background-color);
+               border: 1px solid var(--content-shadow-color);
+               border-bottom: none;
+            }
+            & > span {
+               display: none;
+            }
+         }
+      }
+   }
+}
+
+.formContent {
+   padding: 30px;
+   display: flex;
+   flex-direction: column;
+   padding: 30px;
+   height: calc(100vh - 265px);
+   overflow: auto;
+
+   hr {
+      margin: 30px 0;
+      border: 0;
+      border-top: 1px solid var(--line-color);
+   }
+}
+
+.backButton {
+   color: var(--icon-color);
+   &:hover {
+      color: var(--content-text-color-light);
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .steps.stepsEdit {
+      > ul {
+         gap: 0;
+         li i {
+            padding: 4px 10px;
+            span {
+               display: none;
+            }
+         }
+      }
+   }
+}