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: [
-      {
+      getPodkopVersionRow(),
-        key: 'Podkop',
-        value: '1',
-      },
       {
         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) =>
+    ...items.map((item) => {
-      E('div', { class: 'pdk_diagnostic-page__right-bar__system-info__row' }, [
+      const tagClass = [
-        E('b', {}, item.key),
+        'pdk_diagnostic-page__right-bar__system-info__row__tag',
-        E('div', {}, item.value),
+        ...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;
+  }
 }

luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js

@@ -522,7 +522,9 @@ var PodkopShellMethods = {
   globalCheck: async () => callBaseMethod(Podkop.AvailableMethods.GLOBAL_CHECK),
   showSingBoxConfig: async () => callBaseMethod(Podkop.AvailableMethods.SHOW_SING_BOX_CONFIG),
   checkLogs: async () => callBaseMethod(Podkop.AvailableMethods.CHECK_LOGS),
-  getSystemInfo: async () => callBaseMethod(Podkop.AvailableMethods.GET_SYSTEM_INFO)
+  getSystemInfo: async () => callBaseMethod(
+    Podkop.AvailableMethods.GET_SYSTEM_INFO
+  )
 };
 
 // src/podkop/methods/custom/getDashboardSections.ts
@@ -924,6 +926,15 @@ var DIAGNOSTICS_CHECKS_MAP = {
 
 // src/podkop/tabs/diagnostic/diagnostic.store.ts
 var initialDiagnosticStore = {
+  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
@@ -3192,16 +3203,63 @@ function renderSystemInfo({ items }) {
       { class: "pdk_diagnostic-page__right-bar__system-info__title" },
       "System information"
     ),
-    ...items.map(
+    ...items.map((item) => {
-      (item) => E("div", { class: "pdk_diagnostic-page__right-bar__system-info__row" }, [
+      const tagClass = [
-        E("b", {}, item.key),
+        "pdk_diagnostic-page__right-bar__system-info__row__tag",
-        E("div", {}, item.value)
+        ...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)
+          ])
+        ]
+      );
+    })
   ]);
 }
 
+// src/helpers/normalizeCompiledVersion.ts
+function normalizeCompiledVersion(version) {
+  if (version.includes("COMPILED")) {
+    return "dev";
+  }
+  return version;
+}
+
 // src/podkop/tabs/diagnostic/initController.ts
+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");
   const diagnosticsChecks = store.get().diagnosticsChecks.sort((a, b) => a.order - b.order);
@@ -3409,28 +3467,61 @@ function renderDiagnosticAvailableActionsWidget() {
 }
 function renderDiagnosticSystemInfoWidget() {
   console.log("renderDiagnosticSystemInfoWidget");
+  const diagnosticsSystemInfo = store.get().diagnosticsSystemInfo;
   const container = document.getElementById("pdk_diagnostic-page-system-info");
+  function getPodkopVersionRow() {
+    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: [
-      {
+      getPodkopVersionRow(),
-        key: "Podkop",
-        value: "1"
-      },
       {
         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
       }
     ]
   });
@@ -3448,6 +3539,9 @@ async function onStoreUpdate2(next, prev, diff) {
   if (diff.diagnosticsActions || diff.servicesInfoWidget) {
     renderDiagnosticAvailableActionsWidget();
   }
+  if (diff.diagnosticsSystemInfo) {
+    renderDiagnosticSystemInfoWidget();
+  }
 }
 async function runChecks() {
   try {
@@ -3475,6 +3569,7 @@ async function initController2() {
     renderDiagnosticAvailableActionsWidget();
     renderDiagnosticSystemInfoWidget();
     fetchServicesInfo();
+    fetchSystemInfo();
   });
 }
 
@@ -3539,6 +3634,23 @@ var styles3 = `
     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;