feat: init diagnostic tab

fe-app-podkop/src/podkop/tabs/dashboard/renderDashboard.ts

@@ -47,6 +47,7 @@ export function renderDashboard() {
           },
           onTestLatency: () => {},
           onChooseOutbound: () => {},
+          latencyFetching: false,
         }),
       ),
     ],

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

@@ -0,0 +1,2 @@
+export * from './renderDiagnostic';
+export * from './initDiagnosticController';

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

@@ -0,0 +1,7 @@
+import { onMount } from '../../../helpers';
+
+export async function initDiagnosticController(): Promise<void> {
+  onMount('diagnostic-status').then(() => {
+    console.log('diagnostic controller initialized.');
+  });
+}

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

@@ -0,0 +1,10 @@
+export function renderDiagnostic() {
+  return E(
+    'div',
+    {
+      id: 'diagnostic-status',
+      class: 'pdk_diagnostic-page',
+    },
+    'Not implemented yet',
+  );
+}

fe-app-podkop/src/podkop/tabs/index.ts

@@ -1 +1,2 @@
 export * from './dashboard';
+export * from './diagnostic';

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

@@ -0,0 +1,22 @@
+'use strict';
+'require baseclass';
+'require form';
+'require ui';
+'require uci';
+'require fs';
+'require view.podkop.main as main';
+
+function createDiagnosticContent(section) {
+    const o = section.option(form.DummyValue, '_mount_node');
+    o.rawhtml = true;
+    o.cfgvalue = () => {
+        main.initDiagnosticController();
+        return main.renderDiagnostic();
+    };
+}
+
+const EntryPoint = {
+    createDiagnosticContent,
+};
+
+return baseclass.extend(EntryPoint);

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

@@ -1503,7 +1503,8 @@ function renderDashboard() {
           onTestLatency: () => {
           },
           onChooseOutbound: () => {
-          }
+          },
+          latencyFetching: false
         })
       )
     ]
@@ -1971,6 +1972,25 @@ async function initDashboardController() {
     connectToClashSockets();
   });
 }
+
+// src/podkop/tabs/diagnostic/renderDiagnostic.ts
+function renderDiagnostic() {
+  return E(
+    "div",
+    {
+      id: "diagnostic-status",
+      class: "pdk_diagnostic-page"
+    },
+    "Not implemented yet"
+  );
+}
+
+// src/podkop/tabs/diagnostic/initDiagnosticController.ts
+async function initDiagnosticController() {
+  onMount("diagnostic-status").then(() => {
+    console.log("diagnostic controller initialized.");
+  });
+}
 return baseclass.extend({
   ALLOWED_WITH_RUSSIA_INSIDE,
   BOOTSTRAP_DNS_SERVER_OPTIONS,
@@ -2010,6 +2030,7 @@ return baseclass.extend({
   getProxyUrlName,
   getSingboxStatus,
   initDashboardController,
+  initDiagnosticController,
   injectGlobalStyles,
   maskIP,
   onMount,
@@ -2017,6 +2038,7 @@ return baseclass.extend({
   parseValueList,
   preserveScrollForPage,
   renderDashboard,
+  renderDiagnostic,
   splitProxyString,
   triggerLatencyGroupTest,
   triggerLatencyProxyTest,

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

@@ -14,6 +14,9 @@
 // Dashboard content
 'require view.podkop.dashboard as dashboard';
 
+// Diagnostic content
+'require view.podkop.diagnostic as diagnostic';
+
 
 const EntryPoint = {
   async render() {
@@ -43,11 +46,19 @@ const EntryPoint = {
     settings.createSettingsContent(settingsSection);
 
 
+    // Diagnostic tab
+    const diagnosticSection = podkopMap.section(form.TypedSection, 'diagnostic', _('Diagnostics'));
+    diagnosticSection.anonymous = true;
+    diagnosticSection.addremove = false;
+    diagnosticSection.cfgsections = function () { return ['diagnostic']; };
+
+    // Render diagnostic content
+    diagnostic.createDiagnosticContent(diagnosticSection);
+
     // Dashboard tab
     const dashboardSection = podkopMap.section(form.TypedSection, 'dashboard', _('Dashboard'));
     dashboardSection.anonymous = true;
     dashboardSection.addremove = false;
-    // dashboardSection.title = '';
     dashboardSection.cfgsections = function () { return ['dashboard']; };
 
     // Render dashboard content