@plutonhq/core-frontend 0.0.1

package/src/components/Device/DeviceCPU/DeviceCPU.tsx

@@ -0,0 +1,60 @@
+import classes from '../DeviceInfo/DeviceInfo.module.scss';
+import { DeviceMetrics } from '../../../@types/devices';
+import Icon from '../../common/Icon/Icon';
+import { getProcessorIcon } from '../../../utils/helpers';
+
+interface DeviceCPUProps {
+   cpu: DeviceMetrics['cpu'];
+}
+
+const DeviceCPU = ({ cpu }: DeviceCPUProps) => {
+   const processorIcon = getProcessorIcon(cpu.manufacturer);
+
+   const cpuPercent = cpu.load?.currentLoad ? Math.round(cpu.load?.currentLoad) : 0;
+
+   return (
+      <div className={`${classes.widget} ${classes.cpu}`}>
+         <div className={classes.widgetTitle}>
+            <Icon type="speed" size={12} /> CPU
+         </div>
+         <div className={classes.widgetContent}>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type={processorIcon} size={24} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>Processor</span>
+                  <span title={`${cpu.manufacturer} ${cpu.brand}`}>{`${cpu.manufacturer} ${cpu.brand}`}</span>
+               </div>
+            </div>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type={'cpu'} size={20} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>Physical Cores / Cores</span>
+                  <span>{`${cpu.physicalCores} / ${cpu.cores}`}</span>
+               </div>
+            </div>
+            <div className={classes.infoBlock}>
+               <div className={classes.iconBlock}>
+                  <Icon type={'speed'} size={20} />
+               </div>
+               <div className={classes.infoBlockRight}>
+                  <span>CPU Usage</span>
+                  <div className={classes.progressBar}>
+                     <div
+                        className={`${classes.progressBarFill} ${cpuPercent > 10 ? classes.progressBarFilled : ''}`}
+                        style={{ width: cpuPercent + '%' }}
+                     >
+                        <span>{cpuPercent}%</span>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default DeviceCPU;

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

@@ -0,0 +1,214 @@
+.deviceContent {
+   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;
+}
+
+.iconBlock {
+   width: 40px;
+   height: 40px;
+   flex: 0 0 40px;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   border-radius: 50%;
+   background-color: var(--background-color);
+   color: var(--primary-color);
+}
+
+.deviceInfo {
+   width: 100%;
+   &.reloading {
+      opacity: 0.6;
+      user-select: none;
+   }
+}
+
+.topComponents {
+   display: flex;
+   gap: 20px;
+   margin-bottom: 30px;
+
+   .widget {
+      border: 1px solid var(--line-color);
+      padding: 20px;
+      border-radius: 6px;
+      box-sizing: border-box;
+      width: calc(33.33% - 15px);
+      .widgetTitle {
+         padding: 2px 6px;
+         background-color: var(--content-background-color);
+         border: 1px solid var(--line-color);
+         color: var(--content-title-color);
+         border-radius: 4px;
+         font-size: 0.6875rem;
+         font-weight: 600;
+         width: max-content;
+         position: relative;
+         margin-top: -30px;
+         span {
+            color: var(--icon-color);
+         }
+      }
+      .widgetContent {
+         width: 100%;
+         display: flex;
+         flex-direction: column;
+         gap: 15px;
+         padding-top: 10px;
+      }
+      .infoBlock {
+         width: 100%;
+         display: flex;
+         gap: 15px;
+         align-items: center;
+         .infoBlockRight {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            color: var(--content-text-color);
+            font-weight: 600;
+            font-size: 0.625rem;
+            span:nth-child(1) {
+               font-size: 0.625rem;
+               color: var(--icon-color);
+            }
+            span:nth-child(2) {
+               display: block;
+               width: 90%;
+               white-space: nowrap;
+               overflow: hidden;
+               text-overflow: ellipsis;
+            }
+         }
+      }
+   }
+}
+
+.additionalMemory {
+   color: var(--icon-color);
+   background-color: var(--line-color);
+   font-style: normal;
+   font-size: 0.6rem;
+   padding: 2px 6px;
+   border-radius: 6px;
+   margin-left: 2px;
+}
+
+.progressBarWrap {
+   display: flex;
+   align-items: center;
+   gap: 7px;
+}
+.progressBar {
+   width: 100%;
+   height: 10px;
+   border-radius: 4px;
+   margin-top: 3px;
+   background-color: var(--line-color);
+   display: inline-block;
+   .progressBarFill {
+      height: 100%;
+      border-radius: 4px;
+      background-color: turquoise;
+      position: relative;
+      transition: all 0.2s linear;
+      min-width: 12%;
+      span {
+         font-weight: 600;
+         font-size: 0.625rem;
+         line-height: 1.1em;
+         position: absolute;
+         color: #fff !important;
+         right: 5px;
+      }
+   }
+}
+
+.component {
+   border: 1px solid var(--line-color);
+   padding: 20px;
+   margin-bottom: 30px;
+   border-radius: 6px;
+   box-sizing: border-box;
+   width: 100%;
+   .componentTitle {
+      padding: 2px 10px 2px 8px;
+      background-color: var(--content-background-color);
+      border: 1px solid var(--line-color);
+      color: var(--content-title-color);
+      border-radius: 4px;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      width: max-content;
+      position: relative;
+      margin-top: -30px;
+      span {
+         color: var(--icon-color);
+      }
+   }
+   .contentBlock {
+      width: calc(100% - 50px);
+   }
+   .componentContent {
+      width: 100%;
+      padding-top: 15px;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 20px;
+      align-items: center;
+   }
+   .item {
+      display: flex;
+      gap: 10px;
+      border: 1px solid var(--line-color);
+      padding: 20px;
+      border-radius: 6px;
+      box-sizing: border-box;
+      font-size: 0.7rem;
+      align-items: center;
+      position: relative;
+      h4 {
+         margin: 0;
+         color: var(--content-title-color);
+         white-space: nowrap;
+         overflow: hidden;
+         text-overflow: ellipsis;
+      }
+      .blockLabel {
+         position: absolute;
+         top: -8px;
+         right: 8px;
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .topComponents {
+      flex-direction: column;
+      .widget {
+         width: 100%;
+         .infoBlock .infoBlockRight {
+            width: 190px;
+         }
+      }
+   }
+   .component {
+      .componentContent {
+         display: flex;
+         flex-direction: column;
+         align-items: flex-start;
+         .item {
+            width: 100%;
+         }
+      }
+   }
+}

package/src/components/Device/DeviceInfo/DeviceInfo.tsx

@@ -0,0 +1,44 @@
+import { DeviceMetrics } from '../../../@types/devices';
+import classes from './DeviceInfo.module.scss';
+import DeviceNetworks from '../DeviceNetworks/DeviceNetworks';
+import DeviceStorageDrives from '../DeviceStorageDrives/DeviceStorageDrives';
+import DeviceStorageDisks from '../DeviceStorageDisks/DeviceStorageDisks';
+import DeviceMemory from '../DeviceMemory/DeviceMemory';
+import DeviceCPU from '../DeviceCPU/DeviceCPU';
+import DeviceSystem from '../DeviceSystem/DeviceSystem';
+
+interface DeviceInfoProps {
+   metrics: DeviceMetrics;
+   isRefetching: boolean;
+}
+
+const DeviceInfo = ({ metrics, isRefetching }: DeviceInfoProps) => {
+   // const { name } = data.device;
+   const { os, time, cpu, memory, disks, network } = metrics;
+
+   const storageDisks = disks?.physical || [];
+   const storageDrives = disks?.filesystems || [];
+
+   return (
+      <div className={`${classes.deviceInfo} ${isRefetching ? classes.reloading : ''}`}>
+         <div className={classes.topComponents}>
+            {/* SYSTEM */}
+            <DeviceSystem os={os} time={time} />
+            {/* CPU */}
+            <DeviceCPU cpu={cpu} />
+            {/* MEMORY */}
+            <DeviceMemory memory={memory} />
+         </div>
+         <div className={classes.otherComponents}>
+            {/* Storage Disks */}
+            {storageDisks && storageDisks.length > 0 && <DeviceStorageDisks storageDisks={storageDisks} />}
+            {/* Storage Drives */}
+            {storageDrives && storageDrives.length > 0 && <DeviceStorageDrives storageDrives={storageDrives} />}
+            {/* Networks */}
+            {network && network.length > 0 && <DeviceNetworks network={network} />}
+         </div>
+      </div>
+   );
+};
+
+export default DeviceInfo;

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

@@ -0,0 +1,216 @@
+.device {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   position: relative;
+   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: 40%;
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+}
+.rightContent {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   flex-basis: 60%;
+   justify-content: right;
+   gap: 10px;
+}
+
+.deviceType {
+   display: flex;
+   align-items: center;
+   margin-right: 10px;
+   margin-left: 5px;
+   position: relative;
+   color: var(--icon-color);
+   .deviceOS {
+      position: absolute;
+      bottom: 13px;
+      left: 10px;
+   }
+   .connectionStatus {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--line-active-color);
+      position: absolute;
+      top: 3px;
+      right: 0px;
+      z-index: 9;
+
+      &.connected {
+         background-color: turquoise;
+      }
+   }
+}
+
+.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;
+
+   .mainLabel {
+      line-height: 0.9rem;
+   }
+   h4 {
+      margin: 0;
+      margin-bottom: 2px;
+      color: var(--content-text-color);
+      display: flex;
+      align-items: center;
+   }
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-left: 5px;
+      opacity: 0.5;
+   }
+}
+
+.type {
+   text-transform: capitalize;
+}
+
+.version {
+   margin-right: 30px;
+   display: flex;
+   align-items: center;
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+      opacity: 0.5;
+   }
+   i {
+      font-style: normal;
+   }
+   b {
+      margin-left: 3px;
+      color: #06ba9f;
+   }
+   &.versionUpdate {
+      cursor: pointer;
+      &:hover {
+         color: var(--primary-color);
+      }
+   }
+}
+
+.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);
+      }
+   }
+}
+
+.deviceGrid {
+   width: 100%;
+   margin: 0;
+   flex-direction: column;
+   align-items: baseline;
+   padding: 0;
+   padding-bottom: 12px;
+   .leftContent {
+      padding: 12px;
+      width: 100%;
+      box-sizing: border-box;
+   }
+   .rightContent {
+      width: 100%;
+      flex-basis: unset;
+      justify-content: flex-start;
+      padding: 6px 10px;
+      box-sizing: border-box;
+      background: var(--primary-color-lighter);
+      .moreBtn {
+         margin-left: auto;
+      }
+   }
+   .settings {
+      bottom: 10px;
+      top: auto;
+      right: 40px;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .device {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+
+      .rightContent {
+         width: 100%;
+         justify-content: flex-start;
+         border-top: 1px solid var(--line-color);
+         padding-top: 10px;
+         margin-top: 10px;
+         gap: 0;
+         button.moreBtn {
+            margin-left: auto;
+         }
+      }
+
+      .settings {
+         right: 35px;
+      }
+   }
+}

package/src/components/Device/DeviceItem/DeviceItem.tsx

@@ -0,0 +1,94 @@
+import Icon from '../../common/Icon/Icon';
+import classes from './DeviceItem.module.scss';
+import { NavLink, useNavigate } from 'react-router';
+import { Device } from '../../../@types/devices';
+import { useState } from 'react';
+import { getOSIcon } from '../../../utils/helpers';
+import EditDevice from '../EditDevice/EditDevice';
+
+interface DeviceItemProps {
+   device: Device;
+   layout: 'grid' | 'list';
+}
+
+const DeviceItem = ({ device, layout }: DeviceItemProps) => {
+   const [showSettings, setShowSettings] = useState(false);
+   const [showEditModal, setShowEditModal] = useState(false);
+   const navigate = useNavigate();
+   const { id, versions, name, isRemote, plans = [], os = 'linux', type, status, connected } = device;
+   const { agent: agentVersion } = versions || {};
+   const isPlutonServer = id === 'main';
+
+   const osIcon = getOSIcon(os || 'linux');
+
+   return (
+      <div key={id} className={`${classes.device} ${layout === 'grid' ? classes.deviceGrid : classes.list}`}>
+         <div className={classes.leftContent}>
+            <div className={classes.deviceType}>
+               {!isPlutonServer && (
+                  <span
+                     title={connected ? 'Connected' : 'Disconnected'}
+                     className={`${classes.connectionStatus} ${connected ? classes.connected : ''}`}
+                  />
+               )}
+               <Icon type={isRemote ? 'computer-remote' : 'computer'} size={36} />
+               <span className={classes.deviceOS} data-tooltip-id="appTooltip" data-tooltip-content={os}>
+                  <Icon type={osIcon} size={14} />
+               </span>
+            </div>
+
+            <div className={classes.content}>
+               <NavLink to={`/device/${id}`}>
+                  <div className={classes.title}>
+                     <h4>
+                        {name}
+                        {id === 'main' && <span className={`label in_progress ${classes.mainLabel}`}>Main</span>}{' '}
+                        {status === 'pending' && <span className={`label error ${classes.mainLabel}`}>Agent not Installed</span>}
+                     </h4>
+                  </div>
+                  <div className={classes.type}>{type}</div>
+               </NavLink>
+            </div>
+         </div>
+         <div className={classes.rightContent}>
+            <div className={classes.version}>
+               <Icon type="backup" size={14} /> <i>{plans.length} Plans</i>
+            </div>
+            <div
+               className={classes.version}
+               data-tooltip-id="appTooltip"
+               data-tooltip-content={`Pluton Agent version: ${agentVersion ? 'v' + agentVersion : 'latest'}`}
+            >
+               <Icon type="compressed" size={14} /> <i>{agentVersion ? 'v' + agentVersion : 'latest'}</i>
+            </div>
+            <button className={`${classes.moreBtn} ${showSettings ? classes.moreBtnActive : ''}`} onClick={() => setShowSettings(!showSettings)}>
+               <Icon type="dots-vertical" size={14} />
+            </button>
+            {showSettings && (
+               <div className={classes.settings}>
+                  <button
+                     onClick={() => {
+                        setShowEditModal(true);
+                        setShowSettings(false);
+                     }}
+                  >
+                     <Icon type="edit-settings" size={14} /> Edit
+                  </button>
+                  <button
+                     onClick={() => {
+                        setShowSettings(false);
+                        navigate(`/device/${id}`);
+                     }}
+                  >
+                     <Icon type="eye" size={14} /> System Info
+                  </button>
+               </div>
+            )}
+         </div>
+
+         {showEditModal && <EditDevice device={device} close={() => setShowEditModal(false)} />}
+      </div>
+   );
+};
+
+export default DeviceItem;