@plutonhq/core-frontend 0.0.1

package/src/routes/DeviceSingle/DeviceSingle.tsx

@@ -0,0 +1,86 @@
+import { useParams } from 'react-router';
+import { useState } from 'react';
+import Icon from '../../components/common/Icon/Icon';
+import PageHeader from '../../components/common/PageHeader/PageHeader';
+import { useGetDevice, useGetSystemMetrics } from '../../services/devices';
+import DeviceInfo from '../../components/Device/DeviceInfo/DeviceInfo';
+import EditDevice from '../../components/Device/EditDevice/EditDevice';
+import classes from './DeviceSingle.module.scss';
+// import { compareVersions } from '../../utils/helpers';
+import NotFound from '../../components/common/NotFound/NotFound';
+import DeviceBackups from '../../components/Device/DeviceBackups/DeviceBackups';
+import { DevicePlan } from '../../@types/devices';
+
+const DeviceSingle = () => {
+   const { id } = useParams();
+   const [showEditModal, setShowEditModal] = useState(false);
+   const { data, isLoading, error: DeviceError } = useGetDevice(id as string);
+   const { data: metricsData } = useGetSystemMetrics(id as string);
+
+   console.log('DeviceError :', DeviceError, (DeviceError as Error & { status?: number })?.status);
+
+   const errorStatusCode = (DeviceError as Error & { status?: number })?.status;
+   if (!id || errorStatusCode === 404) {
+      return <NotFound name="Device" link="/sources" linkText="All Sources" />;
+   }
+
+   const device = data?.result?.device;
+   const metrics = metricsData?.result && metricsData?.result?.system ? metricsData.result : device?.metrics;
+   const devicePlans: DevicePlan[] = data?.result?.plans || [];
+   const deviceName = device?.name;
+   const isPending = device?.status && device?.status === 'pending';
+
+   const { restic = '100.0.0', rclone = '100.0.0' } = device?.versions || {};
+
+   return (
+      <div className={classes.device}>
+         {deviceName ? (
+            <PageHeader
+               title={
+                  <>
+                     {deviceName}
+                     {id === 'main' && <span className="label in_progress">Main</span>}
+                  </>
+               }
+               pageTitle={deviceName}
+               icon="devices"
+               rightSection={
+                  <>
+                     {(!isPending || id === 'main') && (
+                        <>
+                           <button className={`${classes.version}`} data-tooltip-id="appTooltip" data-tooltip-content={`Restic version: ${restic}`}>
+                              <Icon type="restic" size={14} /> <i>v{restic}</i>
+                           </button>
+                           <button className={`${classes.version}`} data-tooltip-id="appTooltip" data-tooltip-content={`Rclone version: ${rclone}`}>
+                              <Icon type="rclone" size={14} /> <i>v{rclone}</i>
+                           </button>
+                           <b>|</b>
+                        </>
+                     )}
+                     <button className={classes.actionBtn} onClick={() => setShowEditModal(true)}>
+                        <Icon size={14} type="edit-settings" /> Edit
+                     </button>
+                  </>
+               }
+            />
+         ) : (
+            <span className={`skeleton-box ${classes.titleSkeleton}`} />
+         )}
+         <div className={classes.deviceContent}>
+            {isLoading ? (
+               <div className="loadingScreen">
+                  <Icon size={60} type="loading" />
+               </div>
+            ) : (
+               <>
+                  <DeviceBackups plans={devicePlans} />
+                  {metrics?.system && <DeviceInfo metrics={metrics} isRefetching={false} />}
+               </>
+            )}
+         </div>
+         {device && showEditModal && <EditDevice device={device} close={() => setShowEditModal(false)} />}
+      </div>
+   );
+};
+
+export default DeviceSingle;

package/src/routes/Login/Login.module.scss

@@ -0,0 +1,94 @@
+.loginPage {
+   width: 100%;
+   height: 100vh;
+   display: flex;
+   align-items: center;
+   justify-content: top;
+   flex-direction: column;
+   padding-top: 10%;
+   box-sizing: border-box;
+}
+
+.loginLogo {
+   h3 {
+      display: flex;
+      align-items: center;
+      color: var(--primary-color);
+      font-size: 1.125rem;
+      text-transform: uppercase;
+      font-weight: 900;
+      span:nth-child(1) {
+         display: flex;
+         color: var(--primary-color);
+      }
+      span:nth-child(2) {
+         margin-left: 5px;
+      }
+   }
+}
+
+.container {
+   width: 270px;
+   border-radius: 7px;
+   background-color: var(--content-background-color);
+   padding: 30px 25px;
+   box-shadow: 0 0 10px var(--content-shadow-color);
+}
+
+.loginForm {
+   width: 100%;
+   display: flex;
+   h4 {
+      margin-top: 0;
+   }
+}
+.loginInput {
+   margin-bottom: 15px;
+   position: relative;
+   label {
+      display: block;
+      color: var(--content-text-color);
+      font-size: 0.75rem;
+      font-weight: 600;
+      margin-bottom: 4px;
+   }
+   input {
+      border: 1px solid;
+      border-color: var(--line-color);
+      border-radius: 4px;
+      padding: 12px;
+      padding-left: 36px;
+      width: 100%;
+      box-sizing: border-box;
+      outline: none;
+      &:focus {
+         outline: none;
+         border-color: var(--primary-color);
+      }
+   }
+   .loginInputIcon {
+      position: absolute !important;
+      left: 12px;
+      top: 12px;
+      opacity: 0.7;
+   }
+}
+
+.loginButton {
+   background-color: var(--primary-color);
+   color: var(--primary-text-color);
+   font-size: 0.75rem;
+   border-radius: 4px;
+   width: 100%;
+   box-sizing: border-box;
+   padding: 12px;
+   font-weight: 600;
+}
+
+.loginErrorMsg {
+   color: var(--error-text-color);
+   background-color: var(--error-bg-color);
+   padding: 12px;
+   border-radius: 5px;
+   margin-top: 15px;
+}

package/src/routes/Login/Login.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import classes from './Login.module.scss';
+import Logo from '../../components/common/Logo/Logo';
+import { APP_NAME } from '../../utils/constants';
+import Icon from '../../components/common/Icon/Icon';
+import { useLogin } from '../../services/users';
+import PageTitle from '../../components/App/PageTitle/PageTitle';
+
+const Login = () => {
+   const [error, setError] = useState<LoginError | null>(null);
+   const [username, setUsername] = useState<string>('');
+   const [password, setPassword] = useState<string>('');
+   const loginMutation = useLogin();
+
+   type LoginError = {
+      type: string;
+      msg: string;
+   };
+
+   const handleLogin = () => {
+      if (!username || !password) {
+         let loginError: LoginError | null = null;
+         if (!username && !password) {
+            loginError = { type: 'empty_username_password', msg: 'Please Insert Your App Username & Password to login.' };
+         }
+         if (!username && password) {
+            loginError = { type: 'empty_username', msg: 'Please Insert Your App Username' };
+         }
+         if (!password && username) {
+            loginError = { type: 'empty_password', msg: 'Please Insert Your App Password' };
+         }
+         setError(loginError);
+         setTimeout(() => {
+            setError(null);
+         }, 5000);
+         return;
+      }
+
+      loginMutation.mutate(
+         { username, password },
+         {
+            onError: (error: Error) => {
+               let errorType = '';
+               if (error.message.toLowerCase().includes('username')) {
+                  errorType = 'incorrect_username';
+               }
+               if (error.message.toLowerCase().includes('password')) {
+                  errorType = 'incorrect_password';
+               }
+               setError({ type: errorType, msg: error.message });
+               setTimeout(() => {
+                  setError(null);
+               }, 5000);
+            },
+         },
+      );
+   };
+
+   return (
+      <div className={classes.loginPage}>
+         <PageTitle title={`Login`} />
+         <div className={classes.loginLogo}>
+            <h3>
+               <Logo size={36} /> <span>{APP_NAME}</span>
+            </h3>
+         </div>
+         <div className={classes.container}>
+            <div className="loginForm">
+               <div className={classes.loginInput}>
+                  <Icon type="user" classes={classes.loginInputIcon} />
+                  <input
+                     className={`${error && error.type.includes('username') ? 'inputError' : ''}`}
+                     type="text"
+                     value={username}
+                     placeholder="Username"
+                     onChange={(event) => setUsername(event.target.value)}
+                  />
+               </div>
+               <div className={classes.loginInput}>
+                  <Icon type="password" classes={classes.loginInputIcon} />
+                  <input
+                     className={`${error && error.type.includes('password') ? 'inputError' : ''}`}
+                     type="password"
+                     value={password}
+                     placeholder="Password"
+                     onChange={(event) => setPassword(event.target.value)}
+                  />
+               </div>
+               <button className={classes.loginButton} onClick={handleLogin} disabled={loginMutation.isPending}>
+                  {loginMutation.isPending ? 'Logging in...' : 'Login'}
+               </button>
+               {error && error.msg && <div className={classes.loginErrorMsg}>{error.msg}</div>}
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default Login;

package/src/routes/NotFoundRoute/NotFoundRoute.tsx

@@ -0,0 +1,7 @@
+import NotFound from '../../components/common/NotFound/NotFound';
+
+const NotFoundRoute = () => {
+   return <NotFound name="Page" link="/" linkText="Go Back Home" />;
+};
+
+export default NotFoundRoute;

package/src/routes/PlanSingle/PlanSingle.module.scss

@@ -0,0 +1,76 @@
+.planActions {
+   position: relative;
+   .moreOptions {
+      position: absolute;
+      width: max-content;
+      top: 35px;
+      right: 10px;
+      margin: 0;
+      padding: 0;
+      z-index: 9;
+      background-color: var(--content-background-color);
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      list-style-type: none;
+      li {
+         cursor: pointer;
+         padding: 5px 15px;
+         font-size: 0.9em;
+         color: var(--content-text-color-light);
+
+         &:hover {
+            background-color: var(--primary-color-light);
+            color: var(--primary-color);
+         }
+      }
+   }
+}
+
+.planContent {
+   width: 100%;
+   position: relative;
+   padding: 30px;
+   border-radius: 7px;
+   box-sizing: border-box;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   min-height: 200px;
+   margin-top: 20px;
+}
+
+.actionBtn {
+   &:hover {
+      color: var(--primary-color);
+   }
+   &.actionBtnHighlight {
+      font-weight: 600;
+      color: var(--content-text-color-light);
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .plans {
+      :global([class*='_header_']) {
+         flex-direction: column;
+         align-items: flex-start;
+      }
+      :global([class*='_header_']) {
+         :global([class*='_rightSection_']) {
+            width: 100%;
+         }
+         .planActions {
+            width: 100%;
+            display: flex;
+            justify-content: flex-start;
+            .actionMoreBtn {
+               margin-left: auto;
+            }
+         }
+      }
+      .planContent {
+         padding: 15px;
+         padding-top: 20px;
+      }
+   }
+}

package/src/routes/PlanSingle/PlanSingle.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { useParams, useSearchParams } from 'react-router';
+import PageHeader from '../../components/common/PageHeader/PageHeader';
+import Icon from '../../components/common/Icon/Icon';
+import EditPlan from '../../components/Plan/EditPlan/EditPlan';
+import PlanLogs from '../../components/Plan/PlanLogs/PlanLogs';
+import { useComponentOverride } from '../../context/ComponentOverrideContext';
+import PlanStats from '../../components/Plan/PlanStats/PlanStats';
+import { usePlanSingleActions } from '../../hooks/usePlanSingleActions';
+import classes from './PlanSingle.module.scss';
+import NotFound from '../../components/common/NotFound/NotFound';
+import PlanPruneModal from '../../components/Plan/PlanPruneModal/PlanPruneModal';
+import PlanUnlockModal from '../../components/Plan/PlanUnlockModal/PlanUnlockModal';
+import PlanRemoveModal from '../../components/Plan/PlanRemoveModal/PlanRemoveModal';
+import PlanProgress from '../../components/Plan/PlanProgress/PlanProgress';
+import PlanBackups from '../../components/Plan/PlanBackups/PlanBackups';
+
+const PlanSingle = () => {
+   const [showMoreOptions, setShowMoreOptions] = useState(false);
+   const { id } = useParams();
+
+   const EditPlanModal = useComponentOverride('EditPlan', EditPlan);
+
+   const [searchParams] = useSearchParams();
+   const isBackupPending = searchParams.get('pendingbackup') === '1';
+
+   const {
+      showDeleteModal,
+      setShowDeleteModal,
+      showEditModal,
+      setShowEditModal,
+      showPruneModal,
+      setShowPruneModal,
+      showLogsModal,
+      setShowLogsModal,
+      showUnlockModal,
+      setShowUnlockModal,
+
+      plan,
+      isLoading,
+      refetchPlan,
+      activeBackups,
+      activeRestores,
+      lastBackupItem,
+      taskPending,
+      planError,
+      actionInProgress,
+      changeStatus,
+      backupNow,
+   } = usePlanSingleActions();
+
+   // const errorMessage = planError?.message;
+   const errorStatusCode = (planError as Error & { status?: number })?.status;
+   if (!id || errorStatusCode === 404) {
+      return <NotFound name="Plan" link="/" />;
+   } else {
+      if (isLoading) {
+         return (
+            <div className="loadingScreen">
+               <Icon size={60} type="loading" />
+            </div>
+         );
+      }
+
+      const { isActive, method, title, stats, settings } = plan;
+      const prune = settings.prune;
+      const snapshotsCount = stats.snapshots?.length || 0;
+      const isSync = method === 'sync';
+
+      return (
+         <div className={classes.plans}>
+            <PageHeader
+               title={
+                  <>
+                     {title}{' '}
+                     {!isActive && (
+                        <span className="label warn">
+                           <Icon size={14} type={'pause'} color="#bf8d20" /> Paused
+                        </span>
+                     )}
+                  </>
+               }
+               pageTitle={title}
+               icon="plans"
+               rightSection={
+                  <>
+                     <div className={classes.planActions}>
+                        <button className={classes.actionBtn} onClick={backupNow}>
+                           <Icon size={14} type={isSync ? 'sync' : 'backup'} /> {isSync ? 'Sync' : 'Backup'} Now
+                        </button>
+                        <button className={`${classes.actionBtn} ${!isActive ? classes.actionBtnHighlight : ''}`} onClick={changeStatus}>
+                           <Icon size={14} type={isActive ? 'pause' : 'resume'} /> {isActive ? 'Pause' : 'Resume'}
+                        </button>
+                        <button className={classes.actionBtn} onClick={() => setShowEditModal(true)}>
+                           <Icon size={14} type="edit-settings" /> Edit
+                        </button>
+                        <button className={`${classes.actionBtn} ${classes.actionMoreBtn}`} onClick={() => setShowMoreOptions(!showMoreOptions)}>
+                           <Icon size={14} type="dots-vertical" />
+                        </button>
+
+                        {showMoreOptions && (
+                           <ul className={classes.moreOptions}>
+                              <li
+                                 className={classes.actionBtn}
+                                 onClick={() => {
+                                    setShowPruneModal(true);
+                                    setShowMoreOptions(false);
+                                 }}
+                              >
+                                 <Icon size={14} type="prune" /> Clean Up
+                              </li>
+                              {!isSync && (
+                                 <li
+                                    className={classes.actionBtn}
+                                    onClick={() => {
+                                       setShowUnlockModal(true);
+                                       setShowMoreOptions(false);
+                                    }}
+                                 >
+                                    <Icon size={14} type="unlock" /> Unlock
+                                 </li>
+                              )}
+                              <li
+                                 className={classes.actionBtn}
+                                 onClick={() => {
+                                    setShowLogsModal(true);
+                                    setShowMoreOptions(false);
+                                 }}
+                              >
+                                 <Icon size={14} type="logs" /> View Logs
+                              </li>
+                              <li
+                                 className={classes.actionBtn}
+                                 onClick={() => {
+                                    setShowDeleteModal(true);
+                                    setShowMoreOptions(false);
+                                 }}
+                              >
+                                 <Icon size={14} type="trash" /> Remove
+                              </li>
+                           </ul>
+                        )}
+                     </div>
+                  </>
+               }
+            />
+            <div className={classes.planContent}>
+               <PlanStats plan={plan} isSync={isSync} lastBackupItem={lastBackupItem} />
+               <PlanProgress
+                  plan={plan}
+                  isBackupPending={isBackupPending}
+                  activeBackups={activeBackups}
+                  activeRestores={activeRestores}
+                  refetchPlan={refetchPlan}
+               />
+               <PlanBackups plan={plan} />
+            </div>
+
+            {/* Action Modals */}
+            {showPruneModal && (
+               <PlanPruneModal
+                  planId={id}
+                  method={plan.method}
+                  prune={prune}
+                  snapshotsCount={snapshotsCount}
+                  taskPending={taskPending}
+                  close={() => setShowPruneModal(false)}
+               />
+            )}
+            {showDeleteModal && (
+               <PlanRemoveModal planId={id} taskPending={taskPending} actionInProgress={actionInProgress} close={() => setShowDeleteModal(false)} />
+            )}
+            {showUnlockModal && <PlanUnlockModal planId={id} taskPending={taskPending} close={() => setShowUnlockModal(false)} />}
+            {showEditModal && <EditPlanModal plan={plan} close={() => setShowEditModal(false)} />}
+            {showLogsModal && <PlanLogs planId={id} planMethod={plan.method} sourceType={plan.sourceType} close={() => setShowLogsModal(false)} />}
+         </div>
+      );
+   }
+};
+
+export default PlanSingle;

package/src/routes/Plans/Plans.module.scss

@@ -0,0 +1,29 @@
+.plans {
+   width: 100%;
+}
+
+.planItems {
+   margin-top: 20px;
+
+   &.plansGrid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 15px;
+   }
+}
+
+@media only screen and (max-width: 1024px) {
+   .planItems {
+      &.plansGrid {
+         grid-template-columns: repeat(2, 1fr);
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .planItems {
+      &.plansGrid {
+         grid-template-columns: repeat(1, 1fr);
+      }
+   }
+}