@plutonhq/core-frontend 0.0.1

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

@@ -0,0 +1,120 @@
+.activeBackups {
+   width: 100%;
+   margin: 30px 0;
+}
+
+.activeBackupsTable {
+   width: 100%;
+}
+
+.backup {
+   width: 100%;
+   padding: 10px 15px;
+   display: flex;
+   justify-content: left;
+   align-items: center;
+   box-sizing: border-box;
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   margin-bottom: 15px;
+   .backupIcon {
+      margin-right: 15px;
+   }
+   .backupLeft {
+      width: calc(55% - 20px);
+      .backupId {
+         font-weight: 600;
+         margin-bottom: 5px;
+         color: var(--content-text-color);
+      }
+      .backupTime {
+         font-size: 0.9em;
+         color: var(--content-text-color-light);
+         margin-left: 10px;
+         font-weight: normal;
+      }
+
+      .backupError {
+         color: var(--error-button-color);
+         margin-left: 0.5rem;
+         font-size: 0.9em;
+         i {
+            font-style: normal;
+         }
+      }
+
+      .backupStart {
+         color: var(--content-text-color-light);
+         font-size: 0.75rem;
+         display: flex;
+         gap: 10px;
+
+         .progressMessage {
+            cursor: pointer;
+            text-transform: capitalize;
+            &:hover {
+               color: var(--content-text-color);
+            }
+         }
+
+         button {
+            color: inherit;
+            font-family: inherit;
+            background: var(--line-color);
+            padding-right: 12px;
+            border-radius: 12px;
+            transition: all 0.12s linear;
+            &:hover {
+               color: var(--error-button-color);
+               background-color: var(--error-bg-color);
+            }
+         }
+      }
+   }
+   .backupRight {
+      width: calc(45% - 20px);
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      .ProgressStats {
+         display: flex;
+         justify-content: space-between;
+         .ProgressStatsLeft {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            i {
+               display: block;
+               width: 1px;
+               height: 11px;
+               background-color: var(--line-color);
+            }
+         }
+      }
+      .progressBar {
+         width: 100%;
+         height: 12px;
+         border-radius: 4px;
+         background-color: var(--line-color);
+         .progressBarFill {
+            height: 100%;
+            border-radius: 4px;
+            background-color: turquoise;
+            position: relative;
+            transition: all 0.2s linear;
+            span {
+               font-weight: 600;
+               font-size: 0.625rem;
+               line-height: 1.2em;
+               position: absolute;
+            }
+            &.progressBarFilled {
+               span {
+                  right: 5px;
+                  color: #fff;
+               }
+            }
+         }
+      }
+   }
+}

package/src/components/Plan/BackupProgress/BackupProgress.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import Icon from '../../common/Icon/Icon';
+import { useCancelBackup, useGetBackupProgress } from '../../../services/backups';
+import classes from './BackupProgress.module.scss';
+import { formatBytes, formatDateTime, formatSeconds, timeAgo } from '../../../utils/helpers';
+import { generateBackupProgressMessage, extractResticData, generateRestoreProgressMessage } from '../../../utils/progressHelpers';
+import { Backup } from '../../../@types/backups';
+import { RestoreSlim } from '../../../@types/restores';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useCancelRestore, useGetRestoreProgress } from '../../../services/restores';
+import BackupEvents from '../BackupEvents/BackupEvents';
+
+interface BackupProgressProps {
+   item: Backup | RestoreSlim;
+   sourceId: string;
+   sourceType: string;
+   planId: string;
+   type: 'backup' | 'restore';
+}
+
+const BackupProgress = ({ item, sourceId, sourceType, planId, type = 'backup' }: BackupProgressProps) => {
+   const [showCancelModal, setShowCancelModal] = useState(false);
+   const [showProgressDetails, setShowProgressDetails] = useState(false);
+   const queryClient = useQueryClient();
+   const cancelRestoreMutation = useCancelRestore();
+   const cancelBackupMutation = useCancelBackup();
+
+   const { id, started } = item;
+   const { data: progressData } =
+      type === 'backup' ? useGetBackupProgress({ id, sourceId, sourceType, planId }) : useGetRestoreProgress({ id, sourceId, sourceType, planId });
+
+   console.log('#### data :', progressData);
+
+   const resticData = extractResticData(progressData);
+   const progressMessage = type === 'backup' ? generateBackupProgressMessage(progressData) : generateRestoreProgressMessage(progressData);
+
+   // Extract progress values from restic data or use defaults
+   const {
+      total_files_processed: total_files = resticData?.total_files || 0,
+      files_done = 0,
+      total_bytes_processed: total_bytes = resticData?.total_bytes_processed || resticData?.total_bytes || 0,
+      bytes_done = 0,
+      bytes_restored = 0,
+      files_restored = 0,
+      seconds_remaining = 0,
+      percent_done = 0,
+   } = resticData || {};
+
+   let filesProcessed = files_done;
+   let bytesProcessed = bytes_done;
+   let totalBytes = total_bytes;
+   let totalFiles = total_files;
+   let progressPercent = total_bytes ? Math.round((bytes_done / total_bytes) * 100) : 0;
+
+   if (type === 'restore') {
+      progressPercent = Math.round(percent_done * 100);
+      if (resticData?.total_bytes) {
+         totalBytes = resticData.total_bytes;
+      }
+      if (bytes_restored) {
+         bytesProcessed = bytes_restored;
+      } else {
+         if (resticData?.total_bytes) {
+            bytesProcessed = Math.round(percent_done * resticData.total_bytes);
+         }
+      }
+      if (files_restored) {
+         filesProcessed = files_restored;
+      } else {
+         if (resticData?.total_files) {
+            filesProcessed = Math.round(percent_done * resticData.total_files);
+         }
+      }
+   }
+
+   // For completed backups, show 100% if we have summary data
+   if (resticData?.message_type === 'summary') {
+      progressPercent = 100;
+      filesProcessed = totalFiles;
+      bytesProcessed = totalBytes;
+   }
+
+   const cancel = () => {
+      console.log('cancel :', type, item);
+      if (type === 'backup') {
+         toast.promise(
+            cancelBackupMutation.mutateAsync(
+               { planId, backupId: item.id },
+               {
+                  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['plan', planId] }),
+               },
+            ),
+            {
+               pending: 'Sending Cancel Request...',
+               success: 'Backup process Cancelled!',
+               error: {
+                  render({ data }: any) {
+                     // When the promise reject, data will contains the error
+                     return `Failed to cancel backup process. ${data?.message || 'Unknown Error.'}`;
+                  },
+               },
+            },
+         );
+      } else {
+         toast.promise(
+            cancelRestoreMutation.mutateAsync(
+               { planId, restoreId: item.id },
+               {
+                  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['plan', planId] }),
+               },
+            ),
+            {
+               pending: 'Sending Cancel Request...',
+               success: 'Restore process Cancelled!',
+               error: {
+                  render({ data }: any) {
+                     // When the promise reject, data will contains the error
+                     return `Failed to cancel restore process. ${data?.message || 'Unknown Error.'}`;
+                  },
+               },
+            },
+         );
+      }
+   };
+
+   return (
+      <div key={item.id} className={classes.backup}>
+         <div className={classes.backupIcon}>
+            <Icon type="loading" size={24} />
+         </div>
+         <div className={classes.backupLeft}>
+            <div className={classes.backupId}>
+               {type === 'restore' ? 'Restoring ' : ''}backup-{id}
+               <span className={classes.backupTime} title={formatDateTime(started)}>
+                  <Icon type="clock" size={12} /> Started {started ? timeAgo(new Date(started)) : 'a few seconds ago'}
+               </span>
+               {item.errorMsg && (
+                  <span className={classes.backupError}>
+                     <Icon type="error-circle-filled" size={13} />{' '}
+                     <i data-tooltip-id="htmlToolTip" data-tooltip-place="top" data-tooltip-html={item.errorMsg}>
+                        <u>Error</u> Occurred.
+                     </i>{' '}
+                     Retrying...
+                  </span>
+               )}
+            </div>
+            <div className={classes.backupStart}>
+               <div>
+                  <span className={classes.progressMessage} onClick={() => setShowProgressDetails(true)}>
+                     {progressMessage}
+                  </span>
+                  {/* <Icon type="clock" size={12} /> Started {started ? timeAgo(new Date(started)) : 'a few seconds ago'} */}
+               </div>
+               <button onClick={() => setShowCancelModal(true)} title={`Cancel ${type}`}>
+                  <Icon type="close" size={12} /> Cancel
+               </button>
+            </div>
+         </div>
+         <div className={classes.backupRight}>
+            <div className={classes.ProgressStats}>
+               <div className={classes.ProgressStatsLeft}>
+                  <span>
+                     {filesProcessed} / {totalFiles} Files
+                  </span>
+                  <i></i>
+                  <span>
+                     {formatBytes(bytesProcessed)} / {formatBytes(totalBytes)}
+                  </span>
+               </div>
+               <div className={classes.ProgressStatsRight}>{type !== 'restore' && <>Remaining: {formatSeconds(seconds_remaining)}</>}</div>
+            </div>
+            <div className={classes.progressBar}>
+               <div
+                  className={`${classes.progressBarFill} ${progressPercent > 3 ? classes.progressBarFilled : ''}`}
+                  style={{ width: progressPercent + '%' }}
+               >
+                  <span>{progressPercent}%</span>
+               </div>
+            </div>
+         </div>
+         {showCancelModal && (
+            <ActionModal
+               title={`Cancel ${type}`}
+               message={<>{`Are you sure you want to cancel the ${type} process?`}</>}
+               closeModal={() => setShowCancelModal(false)}
+               width="400px"
+               primaryAction={{
+                  title: `Yes, Cancel ${type}`,
+                  type: 'danger',
+                  isPending: type === 'restore' ? cancelRestoreMutation.isPending : cancelBackupMutation.isPending,
+                  action: () => cancel(),
+               }}
+            />
+         )}
+         {showProgressDetails && (
+            <BackupEvents
+               id={id}
+               type={type}
+               planId={planId}
+               sourceId={sourceId}
+               sourceType={sourceType}
+               progressData={progressData}
+               inProgress={true}
+               close={() => setShowProgressDetails(false)}
+            />
+         )}
+      </div>
+   );
+};
+export default BackupProgress;

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

@@ -0,0 +1,210 @@
+.backupsTable {
+   width: 100%;
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+
+   .noBackups {
+      padding: 50px;
+      text-align: center;
+   }
+
+   .backupsTableHead {
+      font-weight: 600;
+      border-bottom: 1px solid var(--line-color);
+      color: var(--content-title-color);
+      display: flex;
+      justify-content: space-between;
+      & > div {
+         padding: 10px;
+         text-align: center;
+         min-width: 8%;
+         &:nth-child(1) {
+            text-align: left;
+            width: 25%;
+            padding-left: 20px;
+            padding-right: 0;
+         }
+         &:last-child {
+            min-width: unset;
+            width: 24px;
+         }
+      }
+   }
+   .backupsTableContent {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .backupsTableRow {
+         display: flex;
+         justify-content: space-between;
+         position: relative;
+         .backupTitle {
+            cursor: pointer;
+            &:hover {
+               color: var(--content-text-color);
+            }
+         }
+         & > div {
+            padding: 15px 10px;
+            text-align: center;
+            min-width: 8%;
+            .activeBackup {
+               color: var(--icon-color);
+            }
+            &:nth-child(1) {
+               text-align: left;
+               width: 25%;
+               padding-left: 20px;
+               padding-right: 0;
+               // white-space: nowrap;
+               // overflow: hidden;
+               // text-overflow: ellipsis;
+
+               & > .downloadLabel {
+                  padding: 1px 4px;
+                  padding-right: 6px;
+                  background: #e0eaff;
+                  color: #7e90c5;
+                  border-radius: 12px;
+                  margin-left: 5px;
+                  font-size: 0.6875rem;
+                  :global(.icon) {
+                     top: 2px;
+                  }
+
+                  &.downloadLabelFailed {
+                     background-color: var(--error-bg-color);
+                     color: var(--error-text-color);
+                  }
+                  &.downloadLabelDone {
+                     background-color: var(--primary-color);
+                     color: var(--primary-text-color);
+                     padding: 0 6px 2px 6px;
+                     cursor: pointer;
+                  }
+               }
+            }
+            &.snapOptsBtn {
+               min-width: unset;
+               button {
+                  color: var(--icon-color);
+               }
+            }
+         }
+         .changes {
+            display: flex;
+            gap: 7px;
+            justify-content: center;
+            :global(.icon) {
+               top: 1px;
+               right: -3px;
+            }
+            .changesNew {
+               color: cornflowerblue;
+            }
+            .changesModified {
+               color: darkseagreen;
+            }
+            .changesRemoved {
+               color: indianred;
+            }
+         }
+         .target {
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: block;
+         }
+         .status {
+            text-transform: capitalize;
+            &.statusHasError > div {
+               text-decoration: underline;
+               text-decoration-style: dashed;
+               cursor: pointer;
+            }
+         }
+         .settings {
+            position: absolute;
+            z-index: 99;
+            top: 35px;
+            right: 15px;
+            display: flex;
+            flex-direction: column;
+            justify-content: left;
+            width: max-content;
+            text-align: left;
+            align-items: center;
+            background: var(--content-background-color);
+            border: 1px solid var(--line-color);
+            border-radius: 6px;
+            padding: 0;
+            min-width: unset;
+            button {
+               padding: 6px 10px;
+               width: 100%;
+               text-align: left;
+               color: var(--content-text-color-light);
+               &:hover {
+                  background-color: var(--primary-color-light);
+                  color: var(--primary-color);
+               }
+            }
+         }
+         &.backupsTableRowActive {
+            background-color: var(--background-color);
+         }
+      }
+   }
+}
+
+.removeModalContent {
+   position: relative;
+   .deleteLoader {
+      position: absolute;
+      z-index: 9;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background-color: var(--content-background-color);
+      opacity: 0.7;
+      cursor: default;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+   }
+   .removeModalActions {
+      margin-top: 20px;
+      justify-content: right;
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      button {
+         background-color: var(--line-color);
+         color: var(--content-text-color);
+         padding: 6px 12px;
+         border-radius: 4px;
+         transition: all 0.12s linear;
+         &:nth-child(2) {
+            background-color: var(--error-button-color);
+            color: var(--error-active-text);
+         }
+         &:hover {
+            filter: brightness(105%);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .backupsTable {
+      overflow: auto;
+      max-width: 80vw;
+      .backupsTableHead,
+      .backupsTableContent {
+         width: 760px;
+      }
+   }
+}