@plutonhq/core-frontend 0.0.1

package/src/components/Plan/PlanItems/PlanItem.module.scss

@@ -0,0 +1,332 @@
+.plan {
+   position: relative;
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   padding: 10px;
+   margin-bottom: 20px;
+   gap: 10px;
+   border-radius: 7px;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   transition: all 0.2s linear;
+   &:hover {
+      box-shadow: 0 0 20px var(--content-shadow-color);
+   }
+
+   .leftContent {
+      flex-basis: 60%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+   }
+   .rightContent {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-basis: 40%;
+      justify-content: right;
+      gap: 20px;
+   }
+
+   .status {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+      margin-left: 5px;
+      position: relative;
+      color: var(--success-label);
+      &.paused {
+         color: var(--icon-color);
+      }
+   }
+
+   .statusPaused {
+      background-color: #e4e4e4;
+      button {
+         color: inherit;
+      }
+   }
+
+   .content {
+      display: flex;
+      flex-direction: column;
+      color: var(--content-text-color-light);
+      a {
+         color: inherit;
+         &:hover {
+            color: inherit;
+            h4 {
+               color: var(--primary-color);
+            }
+         }
+      }
+   }
+
+   .title {
+      display: flex;
+      flex-direction: row;
+      h4 {
+         margin: 0;
+         margin-bottom: 4px;
+         color: var(--content-text-color);
+         display: flex;
+         align-items: center;
+      }
+      :global(.icon) {
+         position: relative;
+         top: 2px;
+         margin-left: 5px;
+         opacity: 0.5;
+      }
+   }
+
+   .sources {
+      font-size: 0.75rem;
+      img {
+         width: auto;
+         max-height: 13px;
+         vertical-align: middle;
+         margin-right: 3px;
+      }
+      i {
+         font-style: normal;
+         background: var(--line-color);
+         border-radius: 20px;
+         padding: 1px 6px;
+         font-size: 0.6875rem;
+         margin-left: 5px;
+      }
+      .sourceCount {
+         font-size: 0.8em;
+         padding: 1px 7px;
+         border-radius: 20px;
+         margin-left: 4px;
+         background-color: var(--background-color);
+      }
+   }
+
+   .interval {
+      min-width: 120px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      :global(.icon) {
+         position: relative;
+         top: 2px;
+         margin-right: 5px;
+         opacity: 0.5;
+      }
+      i {
+         text-transform: capitalize;
+         font-style: normal;
+         margin-left: 5px;
+      }
+   }
+
+   .time,
+   .size {
+      min-width: 120px;
+      display: flex;
+      align-items: center;
+      i {
+         font-style: normal;
+      }
+      :global(.icon) {
+         position: relative;
+         top: 2px;
+         margin-right: 5px;
+         opacity: 0.5;
+      }
+   }
+
+   .size {
+      min-width: 90px;
+   }
+
+   .moreBtn {
+      color: var(--content-text-color-light);
+      padding: 3px 6px;
+      border-radius: 4px;
+      &.moreBtnActive {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+      }
+   }
+
+   .settings {
+      position: absolute;
+      z-index: 99;
+      top: 45px;
+      right: 15px;
+      display: flex;
+      flex-direction: column;
+      justify-content: left;
+      width: 120px;
+      text-align: left;
+      align-items: center;
+      background: var(--content-background-color);
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      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);
+         }
+      }
+   }
+
+   &.planHasError {
+      border: 1px solid var(--error-bg-color-active);
+      .status {
+         color: var(--error-button-color);
+      }
+   }
+}
+
+// MODALS
+.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%);
+         }
+      }
+   }
+}
+
+.planGrid {
+   width: 100%;
+   flex-direction: column;
+   margin: 0;
+   align-items: flex-start;
+   box-sizing: border-box;
+   padding: 0;
+   gap: 0;
+
+   .leftContent {
+      width: 100%;
+      padding: 15px;
+      box-sizing: border-box;
+      .status {
+         position: absolute;
+         right: 0;
+         margin-top: -15px;
+         transform: scale(0.8);
+      }
+      .title h4 {
+         margin-bottom: 8px;
+      }
+   }
+   .rightContent {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      row-gap: 0;
+      column-gap: 12px;
+      border-top: 1px solid var(--line-color);
+      padding-top: 10px;
+      margin-top: 5px;
+      font-size: 0.9em;
+      background-color: var(--primary-color-lighter);
+      :global([class*='_history_']) {
+         width: 100%;
+         margin-top: 10px;
+         border-top: 1px solid var(--line-color);
+         background-color: var(--content-background-color);
+         padding: 10px;
+         border-radius: 0 0 6px 6px;
+      }
+      .moreBtn {
+         margin-left: auto;
+         position: absolute;
+         right: 10px;
+         bottom: 10px;
+      }
+      .interval,
+      .time,
+      .size {
+         min-width: unset;
+      }
+      .size {
+         padding-left: 15px;
+      }
+   }
+   .settings {
+      bottom: 10px;
+      top: auto;
+      right: 40px;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .plan {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+
+      .title {
+         margin-bottom: 5px;
+      }
+      .status {
+         position: absolute;
+         right: 0;
+         margin-top: -15px;
+         transform: scale(0.8);
+         opacity: 0.7;
+      }
+      .leftContent {
+         width: 100%;
+      }
+      .rightContent {
+         width: 100%;
+         gap: 0px;
+         padding-top: 10px;
+         border-top: 1px solid var(--line-color);
+         margin-top: 10px;
+         justify-content: flex-start;
+         .interval {
+            display: none !important;
+         }
+         :global([class*='_history_']) {
+            margin-left: auto;
+         }
+         .moreBtn {
+            margin-left: 0;
+         }
+      }
+   }
+}

package/src/components/Plan/PlanItems/PlanItem.tsx

@@ -0,0 +1,202 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { NavLink } from 'react-router';
+import { Plan } from '../../../@types/plans';
+import { formatBytes, formatDateTime, timeAgo } from '../../../utils/helpers';
+import Icon from '../../common/Icon/Icon';
+import classes from './PlanItem.module.scss';
+import { useDeletePlan, usePausePlan, usePerformBackup, useResumePlan } from '../../../services/plans';
+import { planIntervalName } from '../../../utils/plans';
+import PlanHistory from '../PlanHistory/PlanHistory';
+
+interface PlanItemProps {
+   plan: Plan;
+   layout?: 'grid' | 'list';
+}
+
+const PlanItem = ({ plan, layout = 'list' }: PlanItemProps) => {
+   const {
+      id,
+      title,
+      sourceConfig = { includes: [], excludes: [] },
+      settings,
+      inProgress,
+      lastBackupTime = '',
+      stats,
+      backups = [],
+      storage,
+      isActive = false,
+      verified,
+      device,
+      method = 'backup',
+   } = plan;
+
+   const { interval = { type: 'daily', time: '10:00AM' }, encryption = false, compression = false } = settings;
+   const [showSettings, setShowSettings] = useState(false);
+
+   const deletePlanMutation = useDeletePlan();
+   const performBackupMutation = usePerformBackup();
+   const pauseMutation = usePausePlan();
+   const resumeMutation = useResumePlan();
+   const shouldBeInaccessible =
+      pauseMutation.isPending || resumeMutation.isPending || performBackupMutation.isPending || deletePlanMutation.isPending;
+   const isSync = method === 'sync';
+   const changeStatus = () => {
+      if (inProgress || shouldBeInaccessible) {
+         return;
+      }
+      // isActive, set it to false, else true
+      // When the action is being performed, the item should grey out and stay inaccessible.
+      // When this happens, the server should stop the restic Cron schedule
+      console.log(' changeStatus:', !isActive);
+      if (isActive) {
+         toast.promise(pauseMutation.mutateAsync(id), {
+            pending: 'Pausing backup Plan...',
+            success: 'Backup Plan Paused',
+            error: {
+               render({ data }: any) {
+                  return `Failed to Pause Backup Plan. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         });
+      } else {
+         toast.promise(resumeMutation.mutateAsync(id), {
+            pending: 'Resuming backup Plan...',
+            success: 'Backup Plan Resumed',
+            error: {
+               render({ data }: any) {
+                  return `Failed to Resume Backup Plan. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         });
+      }
+   };
+
+   const backupNow = () => {
+      if (shouldBeInaccessible) {
+         return;
+      }
+      toast.promise(
+         performBackupMutation.mutateAsync(id),
+         {
+            pending: `Starting ${isSync ? 'Sync' : 'Backup'}...`,
+            success: `${isSync ? 'Sync' : 'Backup'} initiated successfully! 🚀`,
+            error: {
+               render({ data }: any) {
+                  // When the promise reject, data will contains the error
+                  return `Failed to start ${isSync ? 'Sync' : 'Backup'}. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         },
+         {
+            style: {
+               minWidth: '250px',
+            },
+         },
+      );
+      setShowSettings(false);
+   };
+
+   return (
+      <div
+         key={id}
+         className={`${classes.plan} ${layout === 'grid' ? classes.planGrid : classes.planList} ${verified && verified.hasError ? classes.planHasError : ''}`}
+      >
+         <div className={classes.leftContent}>
+            <div className={`${classes.status} ${!isActive ? classes.paused : ''}`}>
+               <Icon type={method === 'backup' ? 'plans' : 'sync'} size={28} />
+            </div>
+
+            <div className={classes.content}>
+               <NavLink to={`/plan/${id}`}>
+                  <div className={classes.title}>
+                     <h4>{title}</h4>
+                     {encryption && (
+                        <i data-tooltip-id="appTooltip" data-tooltip-content={`Encrypted`} data-tooltip-place="top">
+                           <Icon type="encrypted" size={14} />
+                        </i>
+                     )}
+                     {compression && (
+                        <i data-tooltip-id="appTooltip" data-tooltip-content={`Compressed`} data-tooltip-place="top">
+                           <Icon type="compressed" size={14} />
+                        </i>
+                     )}
+                     {!isActive && (
+                        <i data-tooltip-id="appTooltip" data-tooltip-content={`Plan Paused`} data-tooltip-place="top">
+                           <Icon type="pause" size={14} />
+                        </i>
+                     )}
+                     {verified && verified.hasError && (
+                        <i data-tooltip-id="appTooltip" data-tooltip-content={`Plan Has Error`} data-tooltip-place="top">
+                           <Icon size={14} type={'error-circle-filled'} color="#dd6b6b" />
+                        </i>
+                     )}
+                  </div>
+                  <div className={classes.sources}>
+                     <span
+                        data-tooltip-id="htmlToolTip"
+                        data-tooltip-place="top"
+                        data-tooltip-html={sourceConfig?.includes ? sourceConfig.includes.map((p) => `<div>${p}</div>`).join('') : ''}
+                     >
+                        {device?.name && (
+                           <>
+                              <Icon type={device.id === 'main' ? 'computer' : 'computer-remote'} size={13} /> {device.name}
+                           </>
+                        )}
+                        <span className={classes.sourceCount}>{sourceConfig.includes.length}</span>
+                     </span>{' '}
+                     {'-->'} {storage.type && <img src={`/providers/${storage.type}.png`} />}
+                     {storage.name}
+                     {/* {storagePath && storagePath !== '/' && '/' + storagePath} */}
+                  </div>
+               </NavLink>
+            </div>
+         </div>
+         <div className={classes.rightContent}>
+            <div
+               className={classes.size}
+               data-tooltip-id="appTooltip"
+               data-tooltip-place="top"
+               data-tooltip-hidden={!stats.snapshots || method === 'sync'}
+               data-tooltip-content={`Total Snapshots: ${stats.snapshots.length}`}
+            >
+               <Icon type="disk" size={14} /> <i>{formatBytes(stats.size)}</i>
+            </div>
+            <div className={classes.interval}>
+               <Icon type="interval" size={14} /> <i>{planIntervalName(interval)}</i>
+            </div>
+            <div
+               className={classes.time}
+               data-tooltip-id="appTooltip"
+               data-tooltip-content={lastBackupTime ? `Last backed up on ${formatDateTime(lastBackupTime as string)}` : "Hasn't been backed up yet"}
+               data-tooltip-place="top"
+               data-tooltip-hidden={inProgress}
+            >
+               <Icon type={inProgress ? 'loading' : 'clock'} size={14} />{' '}
+               {inProgress ? 'In Progress' : lastBackupTime ? timeAgo(new Date(lastBackupTime as string)) : 'Not Yet'}
+            </div>
+            <PlanHistory planId={id} history={backups} />
+            <button className={`${classes.moreBtn} ${showSettings ? classes.moreBtnActive : ''}`} onClick={() => setShowSettings(!showSettings)}>
+               <Icon type="dots-vertical" size={14} />
+            </button>
+         </div>
+         {showSettings && (
+            <div className={classes.settings}>
+               <button onClick={backupNow}>
+                  <Icon type="backup" size={14} /> {isSync ? 'Sync' : 'Backup'} Now
+               </button>
+               <button
+                  onClick={() => {
+                     changeStatus();
+                     setShowSettings(false);
+                  }}
+               >
+                  <Icon type={isActive ? 'pause' : 'resume'} size={14} /> {isActive ? 'Pause Plan' : 'Resume Plan'}
+               </button>
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default PlanItem;

package/src/components/Plan/PlanLogs/PlanLogs.tsx

@@ -0,0 +1,25 @@
+import { useGetPlanLogs } from '../../../services/plans';
+import Icon from '../../common/Icon/Icon';
+import LogViewer from '../../common/LogViewer/LogViewer';
+import SidePanel from '../../common/SidePanel/SidePanel';
+
+interface PlanLogsProps {
+   planId: string;
+   planMethod: string;
+   sourceType: string;
+   close: () => void;
+}
+
+const PlanLogs = ({ planId, planMethod, close }: PlanLogsProps) => {
+   const { data: logs, isLoading } = useGetPlanLogs(planId);
+   const planLogs = logs?.logs || [];
+   console.log('logs :', planLogs);
+
+   return (
+      <SidePanel width="80%" title="Plan Logs" icon={<Icon type={'logs'} size={20} />} footer={<></>} close={close}>
+         <LogViewer type="plan" planMethod={planMethod} logs={planLogs} planId={planId} isLoading={isLoading} />
+      </SidePanel>
+   );
+};
+
+export default PlanLogs;

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

@@ -0,0 +1,42 @@
+.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;
+   }
+
+   .progressSkeleton {
+      display: block;
+      width: 100%;
+      height: 20px;
+      margin-bottom: 10px;
+   }
+   .backupLeft {
+      width: calc(55% - 20px);
+      .backupId {
+         font-weight: 600;
+         margin-bottom: 5px;
+         color: var(--content-text-color);
+      }
+      .backupStart {
+         color: var(--content-text-color-light);
+         font-size: 0.75rem;
+         display: flex;
+         gap: 10px;
+      }
+   }
+   .backupRight {
+      width: calc(45% - 20px);
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      padding-top: 10px;
+   }
+}

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

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router';
+import { useCheckActiveBackups } from '../../../services/plans';
+import classes from './PlanPendingBackup.module.scss';
+import Icon from '../../common/Icon/Icon';
+
+interface PlanPendingBackup {
+   planId: string;
+   onPendingBackupDetect: () => void;
+}
+
+const PlanPendingBackup = ({ planId, onPendingBackupDetect }: PlanPendingBackup) => {
+   const [, setSearchParams] = useSearchParams();
+   const checkActiveBackupsMutation = useCheckActiveBackups();
+
+   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();
+               }
+            },
+         });
+      }, 1000);
+
+      return () => window.clearInterval(interval);
+   }, [planId]);
+
+   return (
+      <div className={classes.backup}>
+         <div className={classes.backupIcon}>
+            <Icon type="loading" size={24} />
+         </div>
+         <div className={classes.backupLeft}>
+            <div className={classes.backupId}>Starting Backup...</div>
+            <div className={classes.backupStart}>
+               <div>
+                  <Icon type="clock" size={12} /> Starting in a few seconds
+               </div>
+            </div>
+         </div>
+         <div className={classes.backupRight}>
+            <span className={`skeleton-box ${classes.progressSkeleton}`} />
+         </div>
+      </div>
+   );
+};
+export default PlanPendingBackup;

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

@@ -0,0 +1,19 @@
+.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;
+      }
+   }
+}