feat: add test latency & select tag functionality

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

@@ -4,3 +4,4 @@ export * from './getGroupDelay';
 export * from './getProxies';
 export * from './getVersion';
 export * from './triggerProxySelector';
+export * from './triggerLatencyTest';

fe-app-podkop/src/clash/methods/triggerLatencyTest.ts

@@ -0,0 +1,35 @@
+import { IBaseApiResponse } from '../types';
+import { createBaseApiRequest } from './createBaseApiRequest';
+import { getClashApiUrl } from '../../helpers';
+
+export async function triggerLatencyGroupTest(
+  tag: string,
+  timeout: number = 2000,
+  url: string = 'https://www.gstatic.com/generate_204',
+): Promise<IBaseApiResponse<void>> {
+  return createBaseApiRequest<void>(() =>
+    fetch(
+      `${getClashApiUrl()}/group/${tag}/delay?url=${encodeURIComponent(url)}&timeout=${timeout}`,
+      {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      },
+    ),
+  );
+}
+
+export async function triggerLatencyProxyTest(
+  tag: string,
+  timeout: number = 2000,
+  url: string = 'https://www.gstatic.com/generate_204',
+): Promise<IBaseApiResponse<void>> {
+  return createBaseApiRequest<void>(() =>
+    fetch(
+      `${getClashApiUrl()}/proxies/${tag}/delay?url=${encodeURIComponent(url)}&timeout=${timeout}`,
+      {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      },
+    ),
+  );
+}

fe-app-podkop/src/dashboard/initDashboardController.ts

@@ -9,6 +9,11 @@ import { store } from '../store';
 import { socket } from '../socket';
 import { renderDashboardWidget } from './renderer/renderWidget';
 import { prettyBytes } from '../helpers/prettyBytes';
+import {
+  triggerLatencyGroupTest,
+  triggerLatencyProxyTest,
+  triggerProxySelector,
+} from '../clash';
 
 // Fetchers
 
@@ -63,11 +68,40 @@ async function connectToClashSockets() {
 
 // Renderer
 
+async function handleChooseOutbound(selector: string, tag: string) {
+  await triggerProxySelector(selector, tag);
+  await fetchDashboardSections();
+}
+
+async function handleTestGroupLatency(tag: string) {
+  await triggerLatencyGroupTest(tag);
+  await fetchDashboardSections();
+}
+
+async function handleTestProxyLatency(tag: string) {
+  await triggerLatencyProxyTest(tag);
+  await fetchDashboardSections();
+}
+
 async function renderDashboardSections() {
   const sections = store.get().sections;
   console.log('render dashboard sections group');
   const container = document.getElementById('dashboard-sections-grid');
-  const renderedOutboundGroups = sections.map(renderOutboundGroup);
+  const renderedOutboundGroups = sections.map((section) =>
+    renderOutboundGroup({
+      section,
+      onTestLatency: (tag) => {
+        if (section.withTagSelect) {
+          return handleTestGroupLatency(tag);
+        }
+
+        return handleTestProxyLatency(tag);
+      },
+      onChooseOutbound: (selector, tag) => {
+        handleChooseOutbound(selector, tag);
+      },
+    }),
+  );
 
   container!.replaceChildren(...renderedOutboundGroups);
 }

fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts

@@ -1,12 +1,28 @@
 import { Podkop } from '../../podkop/types';
 
+interface IRenderOutboundGroupProps {
+  section: Podkop.OutboundGroup;
+  onTestLatency: (tag: string) => void;
+  onChooseOutbound: (selector: string, tag: string) => void;
+}
+
 export function renderOutboundGroup({
-  outbounds,
-  displayName,
-}: Podkop.OutboundGroup) {
+  section,
+  onTestLatency,
+  onChooseOutbound,
+}: IRenderOutboundGroupProps) {
+  function testLatency() {
+    if (section.withTagSelect) {
+      return onTestLatency(section.code);
+    }
+
+    if (section.outbounds.length) {
+      return onTestLatency(section.outbounds[0].code);
+    }
+  }
+
   function renderOutbound(outbound: Podkop.Outbound) {
     function getLatencyClass() {
-
       if (!outbound.latency) {
         return 'pdk_dashboard-page__outbound-grid__item__latency--empty';
       }
@@ -25,7 +41,10 @@ export function renderOutboundGroup({
     return E(
       'div',
       {
-        class: `pdk_dashboard-page__outbound-grid__item ${outbound.selected ? 'pdk_dashboard-page__outbound-grid__item--active' : ''}`,
+        class: `pdk_dashboard-page__outbound-grid__item ${outbound.selected ? 'pdk_dashboard-page__outbound-grid__item--active' : ''} ${section.withTagSelect ? 'pdk_dashboard-page__outbound-grid__item--selectable' : ''}`,
+        click: () =>
+          section.withTagSelect &&
+          onChooseOutbound(section.code, outbound.code),
       },
       [
         E('b', {}, outbound.displayName),
@@ -53,14 +72,14 @@ export function renderOutboundGroup({
         {
           class: 'pdk_dashboard-page__outbound-section__title-section__title',
         },
-        displayName,
+        section.displayName,
       ),
-      E('button', { class: 'btn' }, 'Test latency'),
+      E('button', { class: 'btn', click: () => testLatency() }, 'Test latency'),
     ]),
     E(
       'div',
       { class: 'pdk_dashboard-page__outbound-grid' },
-      outbounds.map((outbound) => renderOutbound(outbound)),
+      section.outbounds.map((outbound) => renderOutbound(outbound)),
     ),
   ]);
 }

fe-app-podkop/src/podkop/methods/getDashboardSections.ts

@@ -28,7 +28,8 @@ export async function getDashboardSections(): Promise<Podkop.OutboundGroup[]> {
           );
 
           return {
-            code: section['.name'],
+            withTagSelect: false,
+            code: outbound?.code || section['.name'],
             displayName: section['.name'],
             outbounds: [
               {
@@ -51,7 +52,8 @@ export async function getDashboardSections(): Promise<Podkop.OutboundGroup[]> {
           );
 
           return {
-            code: section['.name'],
+            withTagSelect: false,
+            code: outbound?.code || section['.name'],
             displayName: section['.name'],
             outbounds: [
               {
@@ -90,7 +92,8 @@ export async function getDashboardSections(): Promise<Podkop.OutboundGroup[]> {
             }));
 
           return {
-            code: section['.name'],
+            withTagSelect: true,
+            code: selector?.code || section['.name'],
             displayName: section['.name'],
             outbounds: [
               {
@@ -112,7 +115,8 @@ export async function getDashboardSections(): Promise<Podkop.OutboundGroup[]> {
         );
 
         return {
-          code: section['.name'],
+          withTagSelect: false,
+          code: outbound?.code || section['.name'],
           displayName: section['.name'],
           outbounds: [
             {
@@ -127,6 +131,7 @@ export async function getDashboardSections(): Promise<Podkop.OutboundGroup[]> {
       }
 
       return {
+        withTagSelect: false,
         code: section['.name'],
         displayName: section['.name'],
         outbounds: [],

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

@@ -9,6 +9,7 @@ export namespace Podkop {
   }
 
   export interface OutboundGroup {
+    withTagSelect: boolean;
     code: string;
     displayName: string;
     outbounds: Outbound[];

fe-app-podkop/src/styles.ts

@@ -122,13 +122,17 @@ export const GlobalStyles = `
 }
 
 .pdk_dashboard-page__outbound-grid__item {
-    cursor: pointer;
     border: 2px var(--background-color-low) solid;
     border-radius: 4px;
     padding: 10px;
     transition: border 0.2s ease;
 }
-.pdk_dashboard-page__outbound-grid__item:hover {
+
+.pdk_dashboard-page__outbound-grid__item--selectable {
+    cursor: pointer;
+}
+
+.pdk_dashboard-page__outbound-grid__item--selectable:hover {
     border-color: var(--primary-color-high);
 }