@plutonhq/core-frontend 0.0.1

package/src/components/Device/DeviceMemory/DeviceMemory.tsx

@@ -0,0 +1,97 @@
+import classes from '../DeviceInfo/DeviceInfo.module.scss';
+import { DeviceMetrics } from '../../../@types/devices';
+import Icon from '../../common/Icon/Icon';
+import { formatBytes } from '../../../utils/helpers';
+import { useMemo } from 'react';
+
+interface DeviceMemoryProps {
+   memory: DeviceMetrics['memory'];
+}
+
+const DeviceMemory = ({ memory }: DeviceMemoryProps) => {
+   const memoryPercent = Math.round((memory.used / memory.total) * 100);
+
+   const memoryComponents = useMemo(() => {
+      const memoryLayout = memory?.layout;
+      if (!memoryLayout || memoryLayout.length === 0) {
+         return 'No memory information available';
+      }
+
+      const memoryGroups: Record<string, number> = {};
+      (memoryLayout as DeviceMetrics['memory']['layout']).forEach((mem) => {
+         const key = `${mem.manufacturer} ${formatBytes(mem.size)} ${mem.type}`;
+         memoryGroups[key] = (memoryGroups[key] || 0) + 1;
+      });
+      const sortedGroups = Object.entries(memoryGroups).sort((a, b) => b[1] - a[1]);
+      const primaryGroup = sortedGroups[0];
+      const mainText = `${primaryGroup[1]}x ${primaryGroup[0] || 'Unknown'}`;
+      const remainingCount = sortedGroups.slice(1).reduce((sum, group) => sum + group[1], 0);
+
+      if (remainingCount > 0) {
+         const tooltipContent = (memoryLayout as DeviceMetrics['memory']['layout'])
+            .map((mem) => `<div>1x ${mem.manufacturer} ${formatBytes(mem.size)} ${mem.type} (${mem.formFactor})</div>`)
+            .join('');
+         return (
+            <>
+               {mainText}{' '}
+               <i className={classes.additionalMemory} data-tooltip-id="htmlToolTip" data-tooltip-place="top" data-tooltip-html={tooltipContent}>
+                  +{remainingCount}
+               </i>
+            </>
+         );
+      }
+
+      return mainText;
+   }, [memory?.layout]);
+
+   return (
+      <div className={`${classes.widget} ${classes.memory}`}>
+         <div className={classes.widgetTitle}>
+            <Icon type="performance" size={12} /> Memory
+         </div>
+         <div className={classes.widgetContent}>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type={'memory'} size={18} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>Memory Components</span>
+                  <span>{memoryComponents}</span>
+               </div>
+            </div>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type={'percent'} size={16} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>Total Memory</span>
+                  <span>{formatBytes(memory.total)}</span>
+               </div>
+            </div>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type={'speed'} size={20} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>Memory Usage</span>
+                  <div
+                     className={classes.progressBar}
+                     data-tooltip-id="htmlToolTip"
+                     data-tooltip-place="top"
+                     data-tooltip-html={`${formatBytes(memory.used)} / ${formatBytes(memory.total)}`}
+                  >
+                     <div
+                        className={`${classes.progressBarFill} ${memoryPercent > 10 ? classes.progressBarFilled : ''}`}
+                        style={{ width: memoryPercent + '%' }}
+                     >
+                        <span>{memoryPercent}%</span>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default DeviceMemory;

package/src/components/Device/DeviceNetworks/DeviceNetworks.tsx

@@ -0,0 +1,48 @@
+import classes from '../DeviceInfo/DeviceInfo.module.scss';
+import { DeviceMetrics } from '../../../@types/devices';
+import Icon from '../../common/Icon/Icon';
+
+interface DeviceNetworksProps {
+   network: DeviceMetrics['network'];
+}
+
+const DeviceNetworks = ({ network }: DeviceNetworksProps) => {
+   return (
+      <div className={classes.networks}>
+         {network.length > 0 && (
+            <div className={classes.component}>
+               <div className={classes.componentTitle}>
+                  <Icon type="net-wired" size={12} /> Network
+               </div>
+               <div className={classes.componentContent}>
+                  {[...network]
+                     .sort((a, b) => {
+                        if (a.operstate === 'up' && b.operstate !== 'up') return -1;
+                        if (a.operstate !== 'up' && b.operstate === 'up') return 1;
+                        return 0;
+                     })
+                     .map((net) => {
+                        return (
+                           <div key={net.ifaceName} className={classes.item}>
+                              <div className={`label ${net.operstate === 'up' ? 'success' : 'disabled'} ${classes.blockLabel}`}>
+                                 {net.operstate === 'up' ? 'Active' : 'Inactive'}
+                              </div>
+                              <div className={classes.iconBlock}>
+                                 <Icon type={`net-${net.type === 'wireless' ? 'wireless' : 'wired'}`} size={18} />
+                              </div>
+                              <div className={classes.contentBlock}>
+                                 <h4>{net.ifaceName}</h4>
+                                 <div>IP4: {net.ip4}</div>
+                                 <div>IP6: {net.ip6}</div>
+                              </div>
+                           </div>
+                        );
+                     })}
+               </div>
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default DeviceNetworks;

package/src/components/Device/DeviceRcloneSettings/DeviceRcloneSettings.tsx

@@ -0,0 +1,150 @@
+import { DeviceSettings } from '../../../@types/devices';
+import Input from '../../common/form/Input/Input';
+import NumberInput from '../../common/form/NumberInput/NumberInput';
+import SizePicker from '../../common/form/SizePicker/SizePicker';
+import classes from '../EditDevice/EditDevice.module.scss';
+
+interface DeviceRcloneSettingsProps {
+   settings?: DeviceSettings['rclone'];
+   onUpdate: (settings: DeviceRcloneSettingsProps['settings']) => void;
+}
+
+const DeviceRcloneSettings = ({ settings = {}, onUpdate }: DeviceRcloneSettingsProps) => {
+   const currentBWLimit = settings?.bwlimit ? settings?.bwlimit.split(':') : '';
+   const uploadLimit = Array.isArray(currentBWLimit) && currentBWLimit[0] && currentBWLimit[0] !== 'off' ? currentBWLimit[0] : '';
+   const downloadLimit = Array.isArray(currentBWLimit) && currentBWLimit[1] && currentBWLimit[1] !== 'off' ? currentBWLimit[1] : '';
+
+   const update = (key: string, value: string | number | boolean) => {
+      let theValue = value;
+      if (key === 'bwlimit' && value === 'off:off') {
+         theValue = '';
+      }
+      if (value === 0) {
+         theValue = '';
+      }
+      onUpdate({ ...settings, [key]: theValue });
+   };
+   return (
+      <div>
+         <div className={classes.field}>
+            <Input
+               label="Temporary Directory"
+               fieldValue={settings?.tempDir || ''}
+               onUpdate={(val) => update('tempDir', val)}
+               hint="Where Rclone will temporarily store the data for it's operations. default: OS temp directory."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="Cache Directory"
+               fieldValue={settings?.cacheDir || ''}
+               onUpdate={(val) => update('cacheDir', val)}
+               hint="Where Rclone will store it's cache."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <SizePicker
+               label={'Upload Bandwidth Limit'}
+               inline={true}
+               type="rclone"
+               fieldValue={uploadLimit}
+               hint={'Limit the Upload Bandwidth for backups'}
+               onUpdate={(newVal: string) =>
+                  update('bwlimit', `${newVal || 'off'}:${Array.isArray(currentBWLimit) && currentBWLimit[1] ? currentBWLimit[1] : 'off'}`)
+               }
+            />
+         </div>
+         <div className={classes.field}>
+            <SizePicker
+               label={'Download Bandwidth Limit'}
+               inline={true}
+               type="rclone"
+               fieldValue={downloadLimit}
+               hint={'Limit the Download Bandwidth'}
+               onUpdate={(newVal: string) =>
+                  update('bwlimit', `${Array.isArray(currentBWLimit) && currentBWLimit[0] ? currentBWLimit[0] : 'off'}:${newVal || 'off'}`)
+               }
+            />
+         </div>
+         <div className={classes.field}>
+            <SizePicker
+               label={'Buffer Size'}
+               inline={true}
+               type="rclone"
+               fieldValue={settings?.bufferSize || ''}
+               hint={
+                  'Use this sized buffer to speed up file transfers. Buffer Size is multiplied by the number of simultaneous "Transfer" setting value.'
+               }
+               onUpdate={(newVal: string) => update('bufferSize', newVal)}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="Timeout"
+               fieldValue={settings?.timeout || ''}
+               onUpdate={(val) => update('timeout', val)}
+               inline={true}
+               hint="Inset value in  m(minutes) or s(seconds). eg: 5m, 30s. This sets the IO idle timeout. If a transfer has started but then becomes idle for this long it is considered broken and disconnected. Default: 5m."
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Retries"
+               fieldValue={settings?.retries || ''}
+               onUpdate={(val) => update('retries', val)}
+               hint="How many times a failed transfer is retried. Default: 3."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Low Level Retries"
+               fieldValue={settings?.lowLevelRetries || ''}
+               onUpdate={(val) => update('lowLevelRetries', val)}
+               hint="A low level retry is used to retry a failing operation. Default: 3."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Transfers"
+               fieldValue={settings?.transfers || ''}
+               onUpdate={(val) => update('transfers', val)}
+               hint="The number of file transfers to run in parallel. Default: 4."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Checkers"
+               fieldValue={settings?.checkers || ''}
+               onUpdate={(val) => update('checkers', val)}
+               hint="number of file checkers to run in parallel. Default: 8."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Multi Thread Streams"
+               fieldValue={settings?.multiThreadStream || ''}
+               onUpdate={(val) => update('multiThreadStream', val)}
+               hint="When using multi thread transfers this sets the number of streams to use. Default: 4."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <Input
+               label="Config File Password"
+               fieldValue={settings?.configPass || ''}
+               onUpdate={(val) => update('configPass', val)}
+               hint="Encrypt the config file with a password."
+               inline={true}
+            />
+         </div>
+      </div>
+   );
+};
+
+export default DeviceRcloneSettings;

package/src/components/Device/DeviceResticSettings/DeviceResticSettings.tsx

@@ -0,0 +1,59 @@
+import { DeviceSettings } from '../../../@types/devices';
+import Input from '../../common/form/Input/Input';
+import NumberInput from '../../common/form/NumberInput/NumberInput';
+import classes from '../EditDevice/EditDevice.module.scss';
+
+interface DeviceResticSettingsProps {
+   settings?: DeviceSettings['restic'];
+   onUpdate: (settings: DeviceResticSettingsProps['settings']) => void;
+}
+
+const DeviceResticSettings = ({ settings = {}, onUpdate }: DeviceResticSettingsProps) => {
+   return (
+      <div>
+         <div className={classes.field}>
+            <Input
+               label="Cache Directory"
+               fieldValue={settings?.cacheDir || ''}
+               onUpdate={(val) => onUpdate({ ...settings, cacheDir: val })}
+               hint="Where Restic will store it's cache."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Max Processor Cores"
+               fieldValue={settings?.maxProcessor || ''}
+               onUpdate={(val) => onUpdate({ ...settings, maxProcessor: val === 0 ? '' : val })}
+               min={0}
+               max={64}
+               hint="Keep 0 or empty to use all cores. Uses all cores by default."
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Read Concurrency"
+               fieldValue={settings?.readConcurrency || ''}
+               onUpdate={(val) => onUpdate({ ...settings, readConcurrency: val === 0 ? '' : val })}
+               min={0}
+               hint="Read n files Concurrently. Default: 2"
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <NumberInput
+               label="Packet Size (MB)"
+               fieldValue={settings?.packSize ? parseInt(settings.packSize.replace('MiB', ''), 10) : ''}
+               onUpdate={(val) => onUpdate({ ...settings, packSize: val ? val + 'MiB' : '' })}
+               min={0}
+               max={4000}
+               hint="Packs are blobs of data, which are encrypted and stored in the repository. Increasing the pack size requires more disk space for temporary pack files to be created before uploading."
+               inline={true}
+            />
+         </div>
+      </div>
+   );
+};
+
+export default DeviceResticSettings;

package/src/components/Device/DeviceStorageDisks/DeviceStorageDisks.tsx

@@ -0,0 +1,38 @@
+import classes from '../DeviceInfo/DeviceInfo.module.scss';
+import { DeviceMetrics } from '../../../@types/devices';
+import Icon from '../../common/Icon/Icon';
+import { formatBytes } from '../../../utils/helpers';
+
+interface DeviceStorageDisksProps {
+   storageDisks: DeviceMetrics['disks']['physical'];
+}
+
+const DeviceStorageDisks = ({ storageDisks }: DeviceStorageDisksProps) => {
+   return (
+      <div className={classes.component}>
+         <div className={classes.componentTitle}>
+            <Icon type="storage-disk" size={12} /> Storage Disks
+         </div>
+         <div className={classes.componentContent}>
+            {storageDisks.map((sd, index) => {
+               return (
+                  <div key={`${sd.name}-${index}`} className={classes.item}>
+                     <div className={classes.iconBlock}>
+                        <Icon type="storage-disk" size={24} />
+                     </div>
+                     <div className={classes.contentBlock}>
+                        <h4 title={`${sd.name} ${sd.type !== 'Unspecified' ? `(${sd.type})` : ''}`}>
+                           {sd.name} {sd.type !== 'Unspecified' && `(${sd.type})`}
+                        </h4>
+                        <div>{sd.interfaceType}</div>
+                        <div>{formatBytes(sd.size)}</div>
+                     </div>
+                  </div>
+               );
+            })}
+         </div>
+      </div>
+   );
+};
+
+export default DeviceStorageDisks;

package/src/components/Device/DeviceStorageDrives/DeviceStorageDrives.tsx

@@ -0,0 +1,51 @@
+import classes from '../DeviceInfo/DeviceInfo.module.scss';
+import { DeviceMetrics } from '../../../@types/devices';
+import Icon from '../../common/Icon/Icon';
+import { formatBytes } from '../../../utils/helpers';
+
+interface DeviceStorageDrivesProps {
+   storageDrives: DeviceMetrics['disks']['filesystems'];
+}
+
+const DeviceStorageDrives = ({ storageDrives }: DeviceStorageDrivesProps) => {
+   return (
+      <div className={classes.component}>
+         <div className={classes.componentTitle}>
+            <Icon type="storage-drive" size={12} /> Storage Drives
+         </div>
+         <div className={classes.componentContent}>
+            {storageDrives.map((sd) => {
+               const usedPercent = Math.round((sd.used / sd.size) * 100);
+               return (
+                  <div key={sd.mount} className={classes.item}>
+                     <div className={classes.iconBlock}>
+                        <Icon type="storage-drive" size={24} />
+                     </div>
+                     <div className={classes.contentBlock}>
+                        <h4>{sd.name}</h4>
+                        <div
+                           className={classes.progressBar}
+                           data-tooltip-id="htmlToolTip"
+                           data-tooltip-place="top"
+                           data-tooltip-html={`${formatBytes(sd.used)} / ${formatBytes(sd.size)}`}
+                        >
+                           <div
+                              className={`${classes.progressBarFill} ${usedPercent > 10 ? classes.progressBarFilled : ''}`}
+                              style={{ width: usedPercent + '%' }}
+                           >
+                              <span>{usedPercent}%</span>
+                           </div>
+                        </div>
+                        <div>
+                           {formatBytes(sd.size - sd.used)} Free of {formatBytes(sd.size)}
+                        </div>
+                     </div>
+                  </div>
+               );
+            })}
+         </div>
+      </div>
+   );
+};
+
+export default DeviceStorageDrives;

package/src/components/Device/DeviceSystem/DeviceSystem.tsx

@@ -0,0 +1,52 @@
+import classes from '../DeviceInfo/DeviceInfo.module.scss';
+import { DeviceMetrics } from '../../../@types/devices';
+import Icon from '../../common/Icon/Icon';
+import { getOSIcon } from '../../../utils/helpers';
+
+interface DeviceSystemProps {
+   os: DeviceMetrics['os'];
+   time: DeviceMetrics['time'];
+}
+
+const DeviceSystem = ({ os, time }: DeviceSystemProps) => {
+   const osIcon = getOSIcon(os.distro || 'linux');
+
+   return (
+      <div className={`${classes.widget} ${classes.system}`}>
+         <div className={classes.widgetTitle}>
+            <Icon type="computer" size={12} /> System
+         </div>
+         <div className={classes.widgetContent}>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type={osIcon} size={16} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>Operating System</span>
+                  <span title={os.distro + ` (v${os.release})`}>{os.distro + ` (v${os.release})`}</span>
+               </div>
+            </div>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type="computer" size={20} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>Host Name</span>
+                  <span>{os.hostname}</span>
+               </div>
+            </div>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type="clock" size={16} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>Uptime</span>
+                  <span>{time.uptime ? Math.round(time.uptime / 3600) : 0} hours</span>
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default DeviceSystem;

package/src/components/Device/EditDevice/EditDevice.module.scss

@@ -0,0 +1,110 @@
+//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;
+   }
+   .fileManagerBtn {
+      position: absolute;
+      right: 0;
+      top: 22px;
+      padding: 10px;
+      cursor: pointer;
+      color: var(--icon-color);
+      &:hover {
+         color: var(--primary-color);
+      }
+   }
+}
+
+.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);
+   }
+}
+
+.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;
+}
+
+.tabs {
+   padding: 10px;
+   border: 1px solid var(--line-color);
+   border-radius: 6px 6px 0 0;
+   ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      display: flex;
+      gap: 10px;
+      li {
+         padding: 3px 12px;
+         border-radius: 20px;
+         cursor: pointer;
+         span {
+            color: var(--icon-color);
+         }
+         &.tabActive {
+            color: var(--primary-color);
+            background-color: var(--primary-color-light);
+            span {
+               color: var(--primary-color);
+            }
+         }
+      }
+   }
+}
+.tabContent {
+   padding: 20px;
+   border: 1px solid var(--line-color);
+   border-top: 0;
+   border-radius: 0 0 6px 6px;
+}