feat(view,api): add configuration options for label order; add public…

… ip option #64, #57
MauriceNino · Jun 4, 2022 · 0994baa · 0994baa
1 parent b6c0c41
commit 0994baa
Show file tree

Hide file tree

Showing 11 changed files with 279 additions and 175 deletions.
diff --git a/CONFIGURATION.md b/CONFIGURATION.md
diff --git a/apps/api/src/config.ts b/apps/api/src/config.ts
@@ -16,25 +16,34 @@ export const CONFIG: Config = {
   widget_list: lst(penv('WIDGET_LIST') ?? 'os,cpu,storage,ram,network'),
 
   disable_host: penv('DISABLE_HOST') === 'true',
+  os_label_list: lst(penv('OS_LABEL_LIST') ?? 'os,arch,up_since'),
   os_widget_grow: numNull(penv('OS_WIDGET_GROW')) ?? 1.5,
   os_widget_min_width: numNull(penv('OS_WIDGET_MIN_WIDTH')) ?? 300,
 
   enable_cpu_temps: penv('ENABLE_CPU_TEMPS') === 'true',
+  cpu_label_list: lst(
+    penv('CPU_LABEL_LIST') ?? 'brand,model,cores,threads,frequency'
+  ),
   cpu_widget_grow: numNull(penv('CPU_WIDGET_GROW')) ?? 4,
   cpu_widget_min_width: numNull(penv('CPU_WIDGET_MIN_WIDTH')) ?? 500,
   cpu_shown_datapoints: numNull(penv('CPU_SHOWN_DATAPOINTS')) ?? 20,
   cpu_poll_interval: numNull(penv('CPU_POLL_INTERVAL')) ?? 1000,
 
+  storage_label_list: lst(penv('STORAGE_LABEL_LIST') ?? 'brand,size,type'),
   storage_widget_grow: numNull(penv('STORAGE_WIDGET_GROW')) ?? 3.5,
   storage_widget_min_width: numNull(penv('STORAGE_WIDGET_MIN_WIDTH')) ?? 500,
   storage_poll_interval: numNull(penv('STORAGE_POLL_INTERVAL')) ?? 60000,
 
+  ram_label_list: lst(penv('RAM_LABEL_LIST') ?? 'brand,size,type,frequency'),
   ram_widget_grow: numNull(penv('RAM_WIDGET_GROW')) ?? 4,
   ram_widget_min_width: numNull(penv('RAM_WIDGET_MIN_WIDTH')) ?? 500,
   ram_shown_datapoints: numNull(penv('RAM_SHOWN_DATAPOINTS')) ?? 20,
   ram_poll_interval: numNull(penv('RAM_POLL_INTERVAL')) ?? 1000,
 
   speed_test_interval: numNull(penv('SPEED_TEST_INTERVAL')) ?? 60,
+  network_label_list: lst(
+    penv('NETWORK_LABEL_LIST') ?? 'type,speed_up,speed_down,interface_speed'
+  ),
   network_widget_grow: numNull(penv('NETWORK_WIDGET_GROW')) ?? 6,
   network_widget_min_width: numNull(penv('NETWORK_WIDGET_MIN_WIDTH')) ?? 500,
   network_shown_datapoints: numNull(penv('NETWORK_SHOWN_DATAPOINTS')) ?? 20,
@@ -56,6 +65,7 @@ export const CONFIG: Config = {
     network_speed_up: numNull(penv('OVERRIDE_NETWORK_SPEED_UP')),
     network_speed_down: numNull(penv('OVERRIDE_NETWORK_SPEED_DOWN')),
     network_interface_speed: numNull(penv('OVERRIDE_NETWORK_INTERFACE_SPEED')),
+    network_public_ip: penv('OVERRIDE_NETWORK_PUBLIC_IP'),
     storage_brand_1: penv('OVERRIDE_STORAGE_BRAND_1'),
     storage_size_1: numNull(penv('OVERRIDE_STORAGE_SIZE_1')),
     storage_type_1: penv('OVERRIDE_STORAGE_TYPE_1'),

diff --git a/apps/api/src/static-info.ts b/apps/api/src/static-info.ts
@@ -78,6 +78,7 @@ export const getStaticServerInfo = async (): Promise<ServerInfo> => {
       speedDown: 0,
       speedUp: 0,
       type: defaultNet.type,
+      publicIp: '',
     };
 
     INFO_SAVE = {
@@ -106,8 +107,10 @@ export const runSpeedTest = async () => {
     const { stdout } = await exec('speedtest --json');
     const json = JSON.parse(stdout);
 
-    INFO_SAVE!.network.speedDown = json.download ?? 0;
-    INFO_SAVE!.network.speedUp = json.upload ?? 0;
+    INFO_SAVE!.network.speedDown =
+      json.download ?? INFO_SAVE!.network.speedDown;
+    INFO_SAVE!.network.speedUp = json.upload ?? INFO_SAVE!.network.speedUp;
+    INFO_SAVE!.network.publicIp = json.client.ip ?? INFO_SAVE!.network.publicIp;
 
     return json;
   } else {
@@ -119,8 +122,12 @@ export const runSpeedTest = async () => {
 
     const speed = await universalSpeedtest.runSpeedtestNet();
 
-    INFO_SAVE!.network.speedDown = speed.downloadSpeed ?? 0;
-    INFO_SAVE!.network.speedUp = speed.uploadSpeed ?? 0;
+    INFO_SAVE!.network.speedDown =
+      speed.downloadSpeed ?? INFO_SAVE!.network.speedDown;
+    INFO_SAVE!.network.speedUp =
+      speed.uploadSpeed ?? INFO_SAVE!.network.speedUp;
+    INFO_SAVE!.network.publicIp =
+      speed.client.ip ?? INFO_SAVE!.network.publicIp;
 
     return speed;
   }

diff --git a/apps/view/src/components/info-table.tsx b/apps/view/src/components/info-table.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import styled from 'styled-components';
+import { InfoTableArr } from '../utils/format';
 import ThemedText from './text';
 
 export const InfoTextContainer = styled.div<{ noPadding?: boolean }>`
@@ -16,23 +17,22 @@ const InfoTextLabel = styled(ThemedText)`
   display: table-cell;
   width: auto;
   font-size: 0.8rem;
-  padding-bottom: 10px;
+  padding-bottom: 3px;
   padding-right: 15px;
   white-space: nowrap;
 `;
 
 const InfoTextValue = styled(ThemedText)`
+  line-height: 1.5;
+  white-space: pre-wrap;
   display: table-cell;
   font-size: 1rem;
   font-weight: bold;
-  padding-bottom: 10px;
+  padding-bottom: 3px;
 `;
 
 export type InfoTableProps = {
-  infos: {
-    label: string;
-    value?: string;
-  }[];
+  infos: InfoTableArr;
   className?: string;
 };
 

diff --git a/apps/view/src/utils/format.ts b/apps/view/src/utils/format.ts
@@ -0,0 +1,19 @@
+export type InfoTableArr = {
+  label: string;
+  value?: string;
+}[];
+
+export const toInfoTable = <T extends string>(
+  order: T[],
+  labels: { [key in T]: string },
+  data: { key: T; value?: string }[]
+): InfoTableArr =>
+  order.map(key => {
+    const label = labels[key];
+    const val = data.find(d => d.key === key);
+
+    return {
+      label,
+      value: val?.value ? val.value : undefined,
+    };
+  });
diff --git a/apps/view/src/widgets/cpu.tsx b/apps/view/src/widgets/cpu.tsx
@@ -12,6 +12,7 @@ import { ChartContainer } from '../components/chart-container';
 import HardwareInfoContainer from '../components/hardware-info-container';
 import ThemedText from '../components/text';
 import { useSetting } from '../services/settings';
+import { toInfoTable } from '../utils/format';
 
 const containerVariants = {
   animate: {
@@ -68,13 +69,13 @@ const TempContainer = styled.div`
 
 type CpuWidgetProps = {
   load: CpuLoad[];
-  data?: CpuInfo;
-  config?: Config;
+  data: CpuInfo;
+  config: Config;
 };
 
 export const CpuWidget: FC<CpuWidgetProps> = ({ load, data, config }) => {
   const theme = useTheme();
-  const override = config?.override;
+  const override = config.override;
   const latestLoad = load[load.length - 1];
 
   const [multiCore, setMulticore] = useSetting('multiCore', false);
@@ -122,7 +123,7 @@ export const CpuWidget: FC<CpuWidgetProps> = ({ load, data, config }) => {
     chartData = [chartValues];
   }
 
-  const frequency = override?.cpu_frequency ?? data?.frequency;
+  const frequency = override.cpu_frequency ?? data.frequency;
 
   const averageTemp =
     latestLoad?.reduce((acc, { temp }) => acc + (temp ?? 0), 0) /
@@ -136,28 +137,38 @@ export const CpuWidget: FC<CpuWidgetProps> = ({ load, data, config }) => {
       gap={8}
       color={theme.colors.cpuPrimary}
       heading='Processor'
-      infos={[
+      infos={toInfoTable(
+        config.cpu_label_list,
         {
-          label: 'Brand',
-          value: override?.cpu_brand ?? data?.brand,
+          brand: 'Brand',
+          model: 'Model',
+          cores: 'Cores',
+          threads: 'Threads',
+          frequency: 'Frequency',
         },
-        {
-          label: 'Model',
-          value: override?.cpu_model ?? data?.model,
-        },
-        {
-          label: 'Cores',
-          value: (override?.cpu_cores ?? data?.cores)?.toString(),
-        },
-        {
-          label: 'Threads',
-          value: (override?.cpu_threads ?? data?.threads)?.toString(),
-        },
-        {
-          label: 'Frequency',
-          value: frequency ? `${frequency} GHz` : '',
-        },
-      ]}
+        [
+          {
+            key: 'brand',
+            value: override.cpu_brand ?? data.brand,
+          },
+          {
+            key: 'model',
+            value: override.cpu_model ?? data.model,
+          },
+          {
+            key: 'cores',
+            value: (override.cpu_cores ?? data.cores)?.toString(),
+          },
+          {
+            key: 'threads',
+            value: (override.cpu_threads ?? data.threads)?.toString(),
+          },
+          {
+            key: 'frequency',
+            value: frequency ? `${frequency} GHz` : '',
+          },
+        ]
+      )}
       icon={faMicrochip}
       extraContent={
         <CpuSwitchContainer>
@@ -197,7 +208,7 @@ export const CpuWidget: FC<CpuWidgetProps> = ({ load, data, config }) => {
         >
           {size => (
             <>
-              {config?.enable_cpu_temps && !multiCore && chart.length > 1 && (
+              {config.enable_cpu_temps && !multiCore && chart.length > 1 && (
                 <TempContainer>
                   {`Ø: ${
                     (multiCore

diff --git a/apps/view/src/widgets/network.tsx b/apps/view/src/widgets/network.tsx
@@ -10,11 +10,12 @@ import { ChartContainer } from '../components/chart-container';
 import HardwareInfoContainer from '../components/hardware-info-container';
 import ThemedText from '../components/text';
 import { bpsPrettyPrint } from '../utils/calculations';
+import { toInfoTable } from '../utils/format';
 
 type NetworkWidgetProps = {
   load: NetworkLoad[];
-  data?: NetworkInfo;
-  config?: Config;
+  data: NetworkInfo;
+  config: Config;
 };
 
 export const NetworkWidget: FC<NetworkWidgetProps> = ({
@@ -23,13 +24,14 @@ export const NetworkWidget: FC<NetworkWidgetProps> = ({
   config,
 }) => {
   const theme = useTheme();
-  const override = config?.override;
+  const override = config.override;
 
-  const type = override?.network_type ?? data?.type;
-  const speedUp = override?.network_speed_up ?? data?.speedUp;
-  const speedDown = override?.network_speed_down ?? data?.speedDown;
+  const type = override.network_type ?? data.type;
+  const speedUp = override.network_speed_up ?? data.speedUp;
+  const speedDown = override.network_speed_down ?? data.speedDown;
   const interfaceSpeed =
-    override?.network_interface_speed ?? data?.interfaceSpeed;
+    override.network_interface_speed ?? data.interfaceSpeed;
+  const publicIp = override.network_public_ip ?? data.publicIp;
 
   const chartDataDown = load.map((load, i) => ({
     x: i,
@@ -54,26 +56,40 @@ export const NetworkWidget: FC<NetworkWidgetProps> = ({
       columns={2}
       color={theme.colors.networkPrimary}
       heading='Network'
-      infos={[
+      infos={toInfoTable(
+        config.network_label_list,
         {
-          label: 'Type',
-          value: type,
+          type: 'Type',
+          speed_up: 'Speed (Up)',
+          speed_down: 'Speed (Down)',
+          interface_speed: 'Interface Speed',
+          public_ip: 'Public IP',
         },
-        {
-          label: 'Speed (Up)',
-          value: speedUp ? bpsPrettyPrint(speedUp) : undefined,
-        },
-        {
-          label: 'Speed (Down)',
-          value: speedDown ? bpsPrettyPrint(speedDown) : undefined,
-        },
-        {
-          label: 'Interface Speed',
-          value: interfaceSpeed
-            ? bpsPrettyPrint(interfaceSpeed * 1000 * 1000)
-            : undefined,
-        },
-      ]}
+        [
+          {
+            key: 'type',
+            value: type,
+          },
+          {
+            key: 'speed_up',
+            value: speedUp ? bpsPrettyPrint(speedUp) : undefined,
+          },
+          {
+            key: 'speed_down',
+            value: speedDown ? bpsPrettyPrint(speedDown) : undefined,
+          },
+          {
+            key: 'interface_speed',
+            value: interfaceSpeed
+              ? bpsPrettyPrint(interfaceSpeed * 1000 * 1000)
+              : undefined,
+          },
+          {
+            key: 'public_ip',
+            value: publicIp,
+          },
+        ]
+      )}
       icon={faNetworkWired}
     >
       <ChartContainer