@plutonhq/core-frontend 0.0.1

package/src/components/Device/EditDevice/EditDevice.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import Icon from '../../common/Icon/Icon';
+import SidePanel from '../../common/SidePanel/SidePanel';
+import classes from './EditDevice.module.scss';
+import { Device, DeviceSettings } from '../../../@types/devices';
+import Input from '../../common/form/Input/Input';
+import { useUpdateDevice } from '../../../services/devices';
+import FolderPicker from '../../common/FolderPicker/FolderPicker';
+import DeviceRcloneSettings from '../DeviceRcloneSettings/DeviceRcloneSettings';
+import DeviceResticSettings from '../DeviceResticSettings/DeviceResticSettings';
+import Tabs, { Tab, TabList, TabPanel } from '../../common/Tabs/Tabs';
+
+type EditDeviceProps = {
+   device: Device;
+   close: () => void;
+};
+
+const EditDevice = ({ close, device }: EditDeviceProps) => {
+   const [inputError, setInputErrors] = useState({ name: '' });
+   const [newDevice, setNewDevice] = useState<{ name: string; settings: DeviceSettings | undefined }>(() => ({
+      name: device.name,
+      settings: device.settings || {},
+   }));
+   const [showFileManager, setShowFileManager] = useState(false);
+   const updateDeviceMutation = useUpdateDevice();
+
+   useEffect(() => {
+      if (newDevice.name) {
+         setInputErrors((currentState) => ({ ...currentState, name: '' }));
+      }
+   }, [newDevice.name]);
+
+   const updateDevice = () => {
+      console.log('newDevice :', newDevice);
+      setInputErrors({ name: '' });
+
+      const errors = { ...inputError };
+
+      if (!newDevice.name) {
+         errors.name = 'Required';
+      }
+
+      setInputErrors(errors);
+
+      if (Object.values(errors).some((error) => error !== '') === false) {
+         updateDeviceMutation.mutate(
+            {
+               id: device.id,
+               data: newDevice,
+            },
+            {
+               onError: (error: any) => {
+                  console.log('error :', error);
+                  toast.error(error.message || `Error Updating Device.`);
+               },
+               onSuccess: (data: any) => {
+                  console.log('Success :', data);
+                  toast.success(`Device Updated!`, { autoClose: 5000 });
+               },
+            },
+         );
+      }
+   };
+   return (
+      <SidePanel
+         title={`Edit Device ${device.name}`}
+         icon={<Icon type={'devices'} size={20} />}
+         close={close}
+         footer={
+            <>
+               <div className={classes.footerLeft}>
+                  <div className={classes.summary}></div>
+               </div>
+               <div className={classes.footerRight}>
+                  <button className={classes.createButton} onClick={() => updateDevice()}>
+                     <Icon type="check" size={12} /> Update Device
+                  </button>
+               </div>
+            </>
+         }
+      >
+         {updateDeviceMutation.isPending && (
+            <div className={classes.loader}>
+               <Icon size={36} type="loading" />
+            </div>
+         )}
+         <div className={classes.field}>
+            <label className={classes.label}>Device Name*</label>
+            {inputError.name && <span className={classes.fieldErrorLabel}>{inputError.name}</span>}
+            <input
+               className={classes.titleInput}
+               type="text"
+               placeholder="Device Name"
+               value={newDevice.name || ''}
+               onChange={(e) => setNewDevice({ ...newDevice, name: e.target.value })}
+            />
+         </div>
+         <Tabs defaultValue="general">
+            <TabList>
+               <Tab value="general" label="General" icon="settings" />
+               <Tab value="restic" label="Restic" icon="restic" />
+               <Tab value="rclone" label="Rclone" icon="rclone" />
+            </TabList>
+            <TabPanel value="general">
+               <>
+                  <div className={classes.field}>
+                     <Input
+                        label="Temporary Working Directory"
+                        fieldValue={newDevice.settings?.tempDir || ''}
+                        onUpdate={(val) => setNewDevice({ ...newDevice, settings: { ...newDevice.settings, tempDir: val } })}
+                        full={true}
+                        hint="Where the backup, restores and downloads will be temporarily stored."
+                     />
+                     <button
+                        className={classes.fileManagerBtn}
+                        data-tooltip-id="appTooltip"
+                        data-tooltip-content="Open FileManager to Select Directory"
+                        data-tooltip-place="top"
+                        onClick={() => setShowFileManager(true)}
+                     >
+                        <Icon type="folders" size={16} />
+                     </button>
+                  </div>
+               </>
+            </TabPanel>
+            <TabPanel value="restic">
+               <DeviceResticSettings
+                  settings={newDevice.settings?.restic}
+                  onUpdate={(resticSettings) => setNewDevice({ ...newDevice, settings: { ...newDevice.settings, restic: resticSettings } })}
+               />
+            </TabPanel>
+            <TabPanel value="rclone">
+               <DeviceRcloneSettings
+                  settings={newDevice.settings?.rclone}
+                  onUpdate={(rcloneSettings) => setNewDevice({ ...newDevice, settings: { ...newDevice.settings, rclone: rcloneSettings } })}
+               />
+            </TabPanel>
+         </Tabs>
+
+         {showFileManager && (
+            <FolderPicker
+               deviceId={device.id}
+               title="Select Temporary Working Directory"
+               selected={newDevice.settings?.tempDir || ''}
+               close={() => setShowFileManager(false)}
+               onSelect={(val) => setNewDevice({ ...newDevice, settings: { ...newDevice.settings, tempDir: val } })}
+            />
+         )}
+      </SidePanel>
+   );
+};
+
+export default EditDevice;

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

@@ -0,0 +1,191 @@
+//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(--field-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;
+   transition: all 0.12s linear;
+   &:focus {
+      outline: none;
+      border-color: var(--line-active-color);
+   }
+}
+
+.typeFieldOptions {
+   display: flex;
+   gap: 12px;
+}
+
+.typeFieldOption {
+   display: flex;
+   flex: 1 1 0px;
+   align-items: center;
+   border: 1px solid var(--line-color);
+   padding: 15px;
+   padding-right: 25px;
+   border-radius: 6px;
+   cursor: pointer;
+   font-size: 0.75rem;
+   position: relative;
+
+   :global(.checkMark) {
+      color: var(--primary-color);
+      position: absolute;
+      top: 5px;
+      right: 5px;
+   }
+}
+
+.forgetByAgeField {
+   display: flex;
+   flex-direction: row;
+   gap: 10px;
+   width: 50%;
+}
+
+.customPolicyOption {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   margin-bottom: 10px;
+   & > div {
+      width: 100px;
+      margin: 0 10px;
+   }
+}
+
+.typeFieldActive {
+   background-color: var(--background-color);
+   border-color: var(--primary-color);
+}
+
+.typeFieldIcon {
+   margin-right: 10px;
+   opacity: 0.4;
+}
+
+.typeFieldContent {
+   h4 {
+      margin: 0;
+      margin-bottom: 5px;
+   }
+   p {
+      margin: 0;
+   }
+}
+
+.intervalField {
+   display: flex;
+   gap: 10px;
+   align-items: center;
+}
+
+.pathPickerField {
+   display: flex;
+   div[class*='_paths_'] {
+      border-radius: 0 4px 4px 4px;
+   }
+}
+
+.pathPickerFieldTabs {
+   display: flex;
+   margin: 0;
+   padding: 0;
+   li {
+      list-style-type: none;
+      cursor: pointer;
+      padding: 4px 12px;
+      border: 1px solid var(--content-background-color);
+      border-bottom-color: transparent;
+      border-radius: 4px 4px 0 0;
+      position: relative;
+      bottom: -1px;
+      &.pathPickerFieldActive {
+         border-color: var(--line-color);
+         border-bottom-color: var(--content-background-color);
+      }
+   }
+}
+
+.weekDays {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+
+   button {
+      padding: 6px 8px;
+      color: var(--content-text-color);
+      text-transform: capitalize;
+      font-size: 0.75rem;
+      span {
+         color: var(--icon-color);
+      }
+      &.weekDayActive {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+         span {
+            color: var(--primary-color);
+         }
+      }
+   }
+}
+
+.summary {
+   font-size: 0.75rem;
+}
+
+.createButton {
+   border-radius: 6px;
+   font-size: 0.75rem;
+   padding: 12px 20px;
+   color: var(--primary-text-color);
+   background-color: var(--primary-color);
+   cursor: pointer;
+}
+
+.loader {
+   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;
+}

package/src/components/Plan/AddPlan/AddPlan.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router';
+import { NewPlanSettings } from '../../../@types/plans';
+import { DEFAULT_PLAN_SETTINGS } from '../../../utils/constants';
+import { useCreatePlan } from '../../../services/plans';
+
+import PlanForm from '../PlanForm/PlanForm';
+
+type AddPlanProps = {
+   isPRO?: boolean;
+   close: () => void;
+};
+
+const AddPlan = ({ close }: AddPlanProps) => {
+   const [newPlan, setNewPlan] = useState<NewPlanSettings>(DEFAULT_PLAN_SETTINGS);
+
+   const createPlanMutation = useCreatePlan();
+   const navigate = useNavigate();
+
+   const createBackup = () => {
+      console.log('newPlan :', newPlan);
+
+      createPlanMutation.mutate(newPlan, {
+         onError: (error: any) => {
+            console.log('error :', error);
+            toast.error(error.message || `Error Creating New Backup Plan.`);
+         },
+         onSuccess: (data: any) => {
+            console.log('Success :', data);
+            toast.success(`New Backup Plan Created!`, { autoClose: 5000 });
+            close();
+            if (data?.result) {
+               const planID = Array.isArray(data.result) ? data.result[0].id : data.result.id;
+               if (planID) {
+                  navigate(`/plan/${planID}?pendingbackup=1`);
+               }
+            }
+         },
+      });
+   };
+
+   return (
+      <PlanForm
+         title="Add New Plan"
+         type="add"
+         isSubmitting={createPlanMutation.isPending}
+         planSettings={newPlan}
+         onPlanSettingsChange={setNewPlan}
+         onSubmit={createBackup}
+         close={close}
+      />
+   );
+};
+
+export default AddPlan;

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

@@ -0,0 +1,189 @@
+.backupEventsContainer {
+   margin-top: -20px;
+}
+
+.header {
+   display: flex;
+   flex-direction: row;
+   justify-content: space-between;
+   margin-bottom: 15px;
+   position: sticky;
+   top: -30px;
+   background: var(--content-background-color);
+   width: 100%;
+   box-sizing: border-box;
+   padding: 10px 0;
+   z-index: 2;
+   border-bottom: 1px solid var(--line-color);
+
+   .duration {
+      color: var(--content-text-color-light);
+   }
+
+   .status {
+      padding: 2px 12px;
+      font-size: 0.9em;
+      font-weight: 600;
+      border-radius: 15px;
+      text-transform: capitalize;
+      &.inProgress {
+         background-color: var(--primary-color-lighter);
+         color: var(--primary-color);
+      }
+      &.hasCompleted {
+         background-color: var(--success-bg-color);
+         color: var(--success-text-color);
+      }
+      &.hasFailed {
+         background-color: var(--error-bg-color);
+         color: var(--error-button-color);
+      }
+   }
+}
+
+.eventList {
+   list-style-type: none;
+   margin: 0;
+   padding: 0;
+   max-width: 100%;
+   display: flex;
+   flex-direction: column;
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   .eventItem {
+      padding: 8px 12px;
+      word-break: break-word;
+      display: flex;
+      gap: 10px;
+      .time {
+         color: var(--content-text-color-light);
+      }
+      .phase {
+         padding: 2px 8px;
+         font-size: 0.9em;
+         border-radius: 12px;
+         background-color: var(--primary-color-light);
+         margin: 0 4px;
+         text-transform: capitalize;
+      }
+      .action {
+         color: var(--content-text-color);
+         .viewError {
+            text-decoration: underline;
+            text-decoration-style: dashed;
+            margin-left: 10px;
+            text-decoration-color: var(--line-active-color);
+            font-weight: 600;
+            color: var(--content-text-color);
+            cursor: pointer;
+            &:hover {
+               color: var(--primary-color);
+            }
+         }
+      }
+      .icon {
+         color: var(--primary-color);
+      }
+      &.error {
+         .icon {
+            color: var(--error-button-color);
+         }
+      }
+      &:nth-child(odd) {
+         background-color: var(--primary-color-lighter);
+      }
+      &.completed {
+         background-color: var(--success-bg-color);
+         border: 2px solid var(--success-bg-color-active);
+         border-radius: 6px;
+         .icon {
+            color: var(--success-text-color);
+         }
+         .action {
+            color: var(--success-text-color);
+            font-weight: 600;
+         }
+         .phase {
+            background-color: var(--success-bg-color-active);
+            color: var(--success-text-color);
+         }
+      }
+      &.failed {
+         background-color: var(--error-bg-color);
+         border: 2px solid var(--error-bg-color-active);
+         border-radius: 6px;
+         .action {
+            color: var(--error-button-color);
+            font-weight: 600;
+         }
+         .phase {
+            background-color: var(--error-bg-color-active);
+            color: var(--error-button-color);
+         }
+         .icon {
+            color: var(--error-button-color);
+         }
+      }
+      &.retrying {
+         border-top: 2px solid var(--primary-color-mid);
+         .action {
+            color: var(--primary-color);
+            font-weight: 600;
+         }
+      }
+      &.isError {
+         .action {
+            color: var(--error-button-color);
+            font-weight: 600;
+         }
+      }
+      &.isWarning {
+         .phase {
+            background-color: var(--warning-bg-color);
+            color: var(--warning-text-color);
+         }
+         .icon {
+            color: var(--warning-button-color);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .eventList {
+      .eventItem {
+         display: grid;
+         grid-template-columns: 20px 80px auto auto;
+         grid-template-rows: auto auto;
+         border-bottom: 1px solid var(--line-color);
+         gap: 5px;
+         .icon {
+            grid-column: 1;
+            grid-row: 1;
+         }
+         .time {
+            grid-column: 2;
+            grid-row: 1;
+         }
+         .phase {
+            grid-column: 3;
+            grid-row: 1;
+            background: transparent;
+            color: var(--content-text-color-light);
+            &::before {
+               content: 'Phase: ';
+            }
+         }
+         .action {
+            grid-column: 1 / span 3;
+            grid-row: 2;
+            font-size: 13px;
+            font-weight: 500;
+            padding: 6px;
+         }
+         &.eventItem:nth-child(odd) {
+            background: transparent;
+         }
+      }
+   }
+}

package/src/components/Plan/BackupEvents/BackupEvents.tsx

@@ -0,0 +1,113 @@
+import Icon from '../../common/Icon/Icon';
+import SidePanel from '../../common/SidePanel/SidePanel';
+import { getBackupEventActionMessage, getRestoreEventActionMessage } from '../../../utils/progressHelpers';
+import classes from './BackupEvents.module.scss';
+import { BackupProgressData } from '../../../@types/backups';
+import { useGetBackupProgressOnce } from '../../../services/backups';
+import { useGetRestoreProgressOnce } from '../../../services/restores';
+import { useMemo, useState } from 'react';
+import Modal from '../../common/Modal/Modal';
+import { formatDuration } from '../../../utils/helpers';
+
+interface BackupEventsProps {
+   id: string;
+   planId: string;
+   sourceId: string;
+   sourceType: string;
+   type?: 'backup' | 'restore';
+   inProgress?: boolean;
+   progressData?: BackupProgressData | null;
+   close: () => void;
+}
+
+const BackupEvents = ({ id, type = 'backup', sourceId, sourceType, planId, inProgress, progressData, close }: BackupEventsProps) => {
+   const [showError, setShowError] = useState<false | number>(false);
+   const { data: fetchedProgressData } =
+      type === 'backup'
+         ? useGetBackupProgressOnce({ id, sourceId, sourceType, planId })
+         : useGetRestoreProgressOnce({ id, sourceId, sourceType, planId });
+
+   const progressDataToUse: BackupProgressData | null = progressData || fetchedProgressData;
+
+   console.log('progressDataToUse :', progressDataToUse);
+   const hasFinished = useMemo(() => {
+      if (!progressDataToUse || !progressDataToUse.events) return '';
+      let finishedEvent = '';
+      progressDataToUse.events.forEach((event) => {
+         if (event.action === 'TASK_COMPLETED') {
+            finishedEvent = 'Completed';
+         } else if (event.action === 'TASK_CANCELLED') {
+            finishedEvent = 'Cancelled';
+         } else if (event.action === 'FAILED_PERMANENTLY') {
+            finishedEvent = 'Failed';
+         }
+      });
+      return finishedEvent;
+   }, [progressDataToUse]);
+
+   return (
+      <SidePanel title={`${type}-${id} Events`} width="1000px" icon={<Icon type={'logs'} size={18} />} footer={<></>} close={close}>
+         <div className={classes.backupEventsContainer}>
+            <div className={classes.header}>
+               <div
+                  title="Status"
+                  className={`${classes.status} ${inProgress ? classes.inProgress : ''} 
+               ${!inProgress && hasFinished === 'Completed' ? classes.hasCompleted : ''} ${!inProgress && hasFinished === 'Failed' ? classes.hasFailed : ''}`}
+               >
+                  <Icon type={inProgress ? 'loading' : hasFinished === 'Completed' ? 'check-circle-filled' : 'error-circle-filled'} size={14} />{' '}
+                  {inProgress ? `${type} In Progress` : `${type} ${hasFinished}` || 'Unknown'}
+               </div>
+               <div title="Duration" className={classes.duration}>
+                  <Icon type="clock" size={14} /> {(progressDataToUse?.duration && formatDuration(progressDataToUse.duration / 1000)) || 'N/A'}
+               </div>
+            </div>
+            {progressDataToUse && progressDataToUse.events && progressDataToUse.events.length > 0 ? (
+               <ul className={classes.eventList}>
+                  {progressDataToUse.events.map((event: any, index: number) => {
+                     const completed = event.phase === 'finished' && event.action === 'TASK_COMPLETED';
+                     const failed = event.phase === 'finished' && event.action === 'FAILED_PERMANENTLY';
+                     const retrying = event.action.includes('RETRY_ATTEMPT_');
+                     const isError = event.action === 'TASK_FAILED';
+                     const isWarning =
+                        event.action === 'BACKUP_WARNING' ||
+                        event.action === 'RESTORE_WARNING' ||
+                        event.action === 'POST_BACKUP_PRUNE_FAILED' ||
+                        event.action === 'POST_BACKUP_REPO_STATS_FAILED';
+                     return (
+                        <li
+                           key={index}
+                           className={`${classes.eventItem} ${event.error ? classes.error : ''} 
+                           ${completed ? classes.completed : ''} ${failed ? classes.failed : ''} 
+                           ${retrying ? classes.retrying : ''} ${isError ? classes.isError : ''} 
+                           ${isWarning ? classes.isWarning : ''}`}
+                        >
+                           <span className={classes.icon}>
+                              <Icon type={event.error || isWarning ? 'error-circle-filled' : 'check-circle-filled'} size={16} />
+                           </span>
+                           {/* Timestamp should be converted to time only eg: 10:20:23 AM */}
+                           <span className={classes.time}>{new Date(event.timestamp).toLocaleTimeString()}</span>
+                           <span className={classes.phase}>{event.phase}</span>
+                           <span className={classes.action}>
+                              {type === 'backup' ? getBackupEventActionMessage(event.action) : getRestoreEventActionMessage(event.action)}
+                              {event.error && (
+                                 <span className={classes.viewError} onClick={() => setShowError(index)}>
+                                    View Error
+                                 </span>
+                              )}
+                           </span>
+                        </li>
+                     );
+                  })}
+               </ul>
+            ) : null}
+         </div>
+         {showError && (
+            <Modal title="Error Details" closeModal={() => setShowError(false)} width="400px">
+               <div className={classes.errorDetails}>{progressDataToUse?.events[showError]?.error || 'Unknown error occurred.'}</div>
+            </Modal>
+         )}
+      </SidePanel>
+   );
+};
+
+export default BackupEvents;