feat: integrate system info on diagnostic

fe-app-podkop/src/helpers/normalizeCompiledVersion.ts

@@ -0,0 +1,7 @@
+export function normalizeCompiledVersion(version: string) {
+  if (version.includes('COMPILED')) {
+    return 'dev';
+  }
+
+  return version;
+}

fe-app-podkop/src/podkop/methods/shell/index.ts

@@ -81,5 +81,7 @@ export const PodkopShellMethods = {
   checkLogs: async () =>
     callBaseMethod<unknown>(Podkop.AvailableMethods.CHECK_LOGS),
   getSystemInfo: async () =>
-    callBaseMethod<unknown>(Podkop.AvailableMethods.GET_SYSTEM_INFO),
+    callBaseMethod<Podkop.GetSystemInfo>(
+      Podkop.AvailableMethods.GET_SYSTEM_INFO,
+    ),
 };

fe-app-podkop/src/podkop/services/store.service.ts

@@ -181,6 +181,15 @@ export interface StoreType {
     viewLogs: { loading: boolean };
     showSingBoxConfig: { loading: boolean };
   };
+  diagnosticsSystemInfo: {
+    loading: boolean;
+    podkop_version: string;
+    podkop_latest_version: string;
+    luci_app_version: string;
+    sing_box_version: string;
+    openwrt_version: string;
+    device_model: string;
+  };
 }
 
 const initialStore: StoreType = {

fe-app-podkop/src/podkop/tabs/diagnostic/diagnostic.store.ts

@@ -6,8 +6,20 @@ import { StoreType } from '../../services';
 
 export const initialDiagnosticStore: Pick<
   StoreType,
-  'diagnosticsChecks' | 'diagnosticsRunAction' | 'diagnosticsActions'
+  | 'diagnosticsChecks'
+  | 'diagnosticsRunAction'
+  | 'diagnosticsActions'
+  | 'diagnosticsSystemInfo'
 > = {
+  diagnosticsSystemInfo: {
+    loading: true,
+    podkop_version: 'loading',
+    podkop_latest_version: 'loading',
+    luci_app_version: 'loading',
+    sing_box_version: 'loading',
+    openwrt_version: 'loading',
+    device_model: 'loading',
+  },
   diagnosticsActions: {
     restart: {
       loading: false,

fe-app-podkop/src/podkop/tabs/diagnostic/initController.ts

@@ -6,6 +6,7 @@ import { runFakeIPCheck } from './checks/runFakeIPCheck';
 import { loadingDiagnosticsChecksStore } from './diagnostic.store';
 import { store, StoreType } from '../../services';
 import {
+  IRenderSystemInfoRow,
   renderAvailableActions,
   renderCheckSection,
   renderRunAction,
@@ -13,6 +14,32 @@ import {
 } from './partials';
 import { PodkopShellMethods } from '../../methods';
 import { fetchServicesInfo } from '../../fetchers';
+import { normalizeCompiledVersion } from '../../../helpers/normalizeCompiledVersion';
+
+async function fetchSystemInfo() {
+  const systemInfo = await PodkopShellMethods.getSystemInfo();
+
+  if (systemInfo.success) {
+    store.set({
+      diagnosticsSystemInfo: {
+        loading: false,
+        ...systemInfo.data,
+      },
+    });
+  } else {
+    store.set({
+      diagnosticsSystemInfo: {
+        loading: false,
+        podkop_version: 'unknown',
+        podkop_latest_version: 'unknown',
+        luci_app_version: 'unknown',
+        sing_box_version: 'unknown',
+        openwrt_version: 'unknown',
+        device_model: 'unknown',
+      },
+    });
+  }
+}
 
 function renderDiagnosticsChecks() {
   console.log('renderDiagnosticsChecks');
@@ -246,30 +273,67 @@ function renderDiagnosticAvailableActionsWidget() {
 
 function renderDiagnosticSystemInfoWidget() {
   console.log('renderDiagnosticSystemInfoWidget');
+  const diagnosticsSystemInfo = store.get().diagnosticsSystemInfo;
 
   const container = document.getElementById('pdk_diagnostic-page-system-info');
 
+  function getPodkopVersionRow(): IRenderSystemInfoRow {
+    const loading = diagnosticsSystemInfo.loading;
+    const unknown = diagnosticsSystemInfo.podkop_version === 'unknown';
+    const hasActualVersion = Boolean(
+      diagnosticsSystemInfo.podkop_latest_version,
+    );
+    const version = normalizeCompiledVersion(
+      diagnosticsSystemInfo.podkop_version,
+    );
+    const isDevVersion = version === 'dev';
+
+    if (loading || unknown || !hasActualVersion || isDevVersion) {
+      return {
+        key: 'Podkop',
+        value: version,
+      };
+    }
+
+    if (version !== diagnosticsSystemInfo.podkop_latest_version) {
+      return {
+        key: 'Podkop',
+        value: version,
+        tag: {
+          label: 'Outdated',
+          kind: 'warning',
+        },
+      };
+    }
+
+    return {
+      key: 'Podkop',
+      value: version,
+      tag: {
+        label: 'Latest',
+        kind: 'success',
+      },
+    };
+  }
+
   const renderedSystemInfo = renderSystemInfo({
     items: [
-      {
-        key: 'Podkop',
-        value: '1',
-      },
+      getPodkopVersionRow(),
       {
         key: 'Luci App',
-        value: '1',
+        value: normalizeCompiledVersion(diagnosticsSystemInfo.luci_app_version),
       },
       {
         key: 'Sing-box',
-        value: '1',
+        value: diagnosticsSystemInfo.sing_box_version,
       },
       {
         key: 'OS',
-        value: '1',
+        value: diagnosticsSystemInfo.openwrt_version,
       },
       {
         key: 'Device',
-        value: '1',
+        value: diagnosticsSystemInfo.device_model,
       },
     ],
   });
@@ -295,6 +359,10 @@ async function onStoreUpdate(
   if (diff.diagnosticsActions || diff.servicesInfoWidget) {
     renderDiagnosticAvailableActionsWidget();
   }
+
+  if (diff.diagnosticsSystemInfo) {
+    renderDiagnosticSystemInfoWidget();
+  }
 }
 
 async function runChecks() {
@@ -341,5 +409,8 @@ export async function initController(): Promise<void> {
 
     // Initial services info fetch
     fetchServicesInfo();
+
+    // Initial system info fetch
+    fetchSystemInfo();
   });
 }

fe-app-podkop/src/podkop/tabs/diagnostic/partials/renderSystemInfo.ts

@@ -1,5 +1,16 @@
+import { insertIf } from '../../../../helpers';
+
+export interface IRenderSystemInfoRow {
+  key: string;
+  value: string;
+  tag?: {
+    label: string;
+    kind: 'warning' | 'success';
+  };
+}
+
 interface IRenderSystemInfoProps {
-  items: Array<{ key: string; value: string }>;
+  items: Array<IRenderSystemInfoRow>;
 }
 
 export function renderSystemInfo({ items }: IRenderSystemInfoProps) {
@@ -9,11 +20,30 @@ export function renderSystemInfo({ items }: IRenderSystemInfoProps) {
       { class: 'pdk_diagnostic-page__right-bar__system-info__title' },
       'System information',
     ),
-    ...items.map((item) =>
-      E('div', { class: 'pdk_diagnostic-page__right-bar__system-info__row' }, [
-        E('b', {}, item.key),
-        E('div', {}, item.value),
-      ]),
-    ),
+    ...items.map((item) => {
+      const tagClass = [
+        'pdk_diagnostic-page__right-bar__system-info__row__tag',
+        ...insertIf(item.tag?.kind === 'warning', [
+          'pdk_diagnostic-page__right-bar__system-info__row__tag--warning',
+        ]),
+        ...insertIf(item.tag?.kind === 'success', [
+          'pdk_diagnostic-page__right-bar__system-info__row__tag--success',
+        ]),
+      ]
+        .filter(Boolean)
+        .join(' ');
+
+      return E(
+        'div',
+        { class: 'pdk_diagnostic-page__right-bar__system-info__row' },
+        [
+          E('b', {}, item.key),
+          E('div', {}, [
+            E('span', {}, item.value),
+            E('span', { class: tagClass }, item?.tag?.label),
+          ]),
+        ],
+      );
+    }),
   ]);
 }

fe-app-podkop/src/podkop/tabs/diagnostic/styles.ts

@@ -59,6 +59,23 @@ export const styles = `
     grid-column-gap: 5px;
 }
 
+.pdk_diagnostic-page__right-bar__system-info__row__tag {
+    padding: 2px 4px;
+    border: 1px transparent solid;
+    border-radius: 4px;
+    margin-left: 5px;
+}
+
+.pdk_diagnostic-page__right-bar__system-info__row__tag--warning {
+    border: 1px var(--warn-color-medium, orange) solid;
+    color: var(--warn-color-medium, orange);
+}
+
+.pdk_diagnostic-page__right-bar__system-info__row__tag--success {
+    border: 1px var(--success-color-medium, green) solid;
+    color: var(--success-color-medium, green);
+}
+
 .pdk_diagnostic-page__left-bar {
     display: grid;
     grid-template-columns: 1fr;

fe-app-podkop/src/podkop/types.ts

@@ -190,4 +190,13 @@ export namespace Podkop {
     enabled: number;
     status: string;
   }
+
+  export interface GetSystemInfo {
+    podkop_version: string;
+    podkop_latest_version: string;
+    luci_app_version: string;
+    sing_box_version: string;
+    openwrt_version: string;
+    device_model: string;
+  }
 }