feat(proxy): merge proxies and proxyProviders into one page

2024-12-27 07:34:12 +08:00 · 2023-09-06 20:06:26 +08:00 · 2023-09-06 20:06:26 +08:00 · 93114b22a2
commit 93114b22a2
parent 714158742d
9 changed files with 230 additions and 233 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -6,7 +6,6 @@ import { ROUTES } from '~/constants'
 import {
  curTheme,
  endpoint,
-  renderProxiesInSamePage,
  selectedEndpoint,
  useAutoSwitchTheme,
  useProxies,
@ -18,7 +17,6 @@ const Overview = lazy(() => import('~/pages/Overview'))
 const Connections = lazy(() => import('~/pages/Connections'))
 const Logs = lazy(() => import('~/pages/Logs'))
 const Proxies = lazy(() => import('~/pages/Proxies'))
-const ProxyProvider = lazy(() => import('~/pages/ProxyProvider'))
 const Rules = lazy(() => import('~/pages/Rules'))
 const Config = lazy(() => import('~/pages/Config'))

@ -54,9 +52,6 @@ export const App = () => {
          <Show when={selectedEndpoint()}>
            <Route path={ROUTES.Overview} component={Overview} />
            <Route path={ROUTES.Proxies} component={Proxies} />
-            <Show when={!renderProxiesInSamePage()}>
-              <Route path={ROUTES.ProxyProvider} component={ProxyProvider} />
-            </Show>
            <Route path={ROUTES.Rules} component={Rules} />
            <Route path={ROUTES.Conns} component={Connections} />
            <Route path={ROUTES.Log} component={Logs} />
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -3,7 +3,6 @@ import { A, useLocation } from '@solidjs/router'
 import {
  IconFileStack,
  IconGlobe,
-  IconGlobeFilled,
  IconHome,
  IconMenu,
  IconNetwork,
@ -11,10 +10,10 @@ import {
  IconRuler,
  IconSettings,
 } from '@tabler/icons-solidjs'
-import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js'
+import { For, ParentComponent, Show, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { ROUTES, themes } from '~/constants'
-import { renderProxiesInSamePage, setCurTheme, useProxies } from '~/signals'
+import { setCurTheme } from '~/signals'

 const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
  href,
@ -74,51 +73,38 @@ const LogoText = () => (

 export const Header = () => {
  const [t] = useI18n()
-  const { proxyProviders } = useProxies()
-  const navs = createMemo(() => {
-    const list = [
-      {
-        href: ROUTES.Overview,
-        name: t('overview'),
-        icon: <IconHome />,
-      },
-      {
-        href: ROUTES.Proxies,
-        name: t('proxies'),
-        icon: <IconGlobe />,
-      },
-      {
-        href: ROUTES.Rules,
-        name: t('rules'),
-        icon: <IconRuler />,
-      },
-      {
-        href: ROUTES.Conns,
-        name: t('connections'),
-        icon: <IconNetwork />,
-      },
-      {
-        href: ROUTES.Log,
-        name: t('logs'),
-        icon: <IconFileStack />,
-      },
-      {
-        href: ROUTES.Config,
-        name: t('config'),
-        icon: <IconSettings />,
-      },
-    ]
-
-    if (proxyProviders().length > 0 && !renderProxiesInSamePage()) {
-      list.splice(2, 0, {
-        href: ROUTES.ProxyProvider,
-        name: t('proxyProviders'),
-        icon: <IconGlobeFilled />,
-      })
-    }
-
-    return list
-  })
+  const navs = () => [
+    {
+      href: ROUTES.Overview,
+      name: t('overview'),
+      icon: <IconHome />,
+    },
+    {
+      href: ROUTES.Proxies,
+      name: t('proxies'),
+      icon: <IconGlobe />,
+    },
+    {
+      href: ROUTES.Rules,
+      name: t('rules'),
+      icon: <IconRuler />,
+    },
+    {
+      href: ROUTES.Conns,
+      name: t('connections'),
+      icon: <IconNetwork />,
+    },
+    {
+      href: ROUTES.Log,
+      name: t('logs'),
+      icon: <IconFileStack />,
+    },
+    {
+      href: ROUTES.Config,
+      name: t('config'),
+      icon: <IconSettings />,
+    },
+  ]

  const location = useLocation()

--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@ -71,4 +71,5 @@ export default {
  switchLanguage: 'Switch Language',
  latencyTestTimeoutDuration: 'Latency Test Timeout Duration',
  closedConnections: 'Closed Connections',
+  all: 'All',
 }
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@ -70,4 +70,5 @@ export default {
  switchLanguage: '切换语言',
  latencyTestTimeoutDuration: '测速超时时间',
  closedConnections: '已关闭连接',
+  all: '全部',
 }
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@ -30,7 +30,6 @@ import {
  proxiesOrderingType,
  proxiesPreviewType,
  renderInTwoColumns,
-  renderProxiesInSamePage,
  renderRulesAndProviderInTwoColumns,
  setAutoCloseConns,
  setAutoSwitchTheme,
@ -40,7 +39,6 @@ import {
  setProxiesOrderingType,
  setProxiesPreviewType,
  setRenderInTwoColumns,
-  setRenderProxiesInSamePage,
  setRenderRulesAndProviderInTwoColumns,
  setSelectedEndpoint,
  setTableSize,
@ -326,11 +324,6 @@ const ConfigForXd = () => {
      value: renderRulesAndProviderInTwoColumns,
      onChange: setRenderRulesAndProviderInTwoColumns,
    },
-    {
-      label: 'renderProxiesInSamePage',
-      value: renderProxiesInSamePage,
-      onChange: setRenderProxiesInSamePage,
-    },
    {
      label: 'autoSwitchTheme',
      value: autoSwitchTheme,
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@ -113,7 +113,7 @@ export default () => {
      )

      setClosedConnectionsWithSpeed((prev) =>
-        [...prev, ...closedConnections].slice(-100),
+        [...prev, ...closedConnections].slice(-1000),
      )

      return connections.slice(-100)
@ -157,7 +157,7 @@ export default () => {
    },
  )

-  const columns: ColumnDef<ConnectionWithSpeed>[] = [
+  const columns = createMemo<ColumnDef<ConnectionWithSpeed>[]>(() => [
    {
      header: () => t('close'),
      enableGrouping: false,
@ -265,7 +265,7 @@ export default () => {
        row.metadata.destinationIP ||
        row.metadata.host,
    },
-  ]
+  ])

  const [grouping, setGrouping] = createSignal<GroupingState>([])
  const [sorting, setSorting] = createSignal<SortingState>([
@ -297,7 +297,7 @@ export default () => {
    },
    sortDescFirst: true,
    enableHiding: true,
-    columns,
+    columns: columns(),
    onGlobalFilterChange: setSearch,
    onGroupingChange: setGrouping,
    onSortingChange: setSorting,
@ -327,10 +327,14 @@ export default () => {
        <For each={tabs()}>
          {(tab) => (
            <button
-              class={twMerge(activeTab() === tab.type && 'tab-active', 'tab')}
+              class={twMerge(
+                activeTab() === tab.type && 'tab-active',
+                'tab gap-2',
+              )}
              onClick={() => setActiveTab(tab.type)}
            >
-              {tab.name} ({tab.count})
+              <span>{tab.name}</span>
+              <div class="badge badge-sm">{tab.count}</div>
            </button>
          )}
        </For>
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@ -1,6 +1,6 @@
 import { useI18n } from '@solid-primitives/i18n'
-import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
-import { Show } from 'solid-js'
+import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
+import { For, Show, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import {
  Button,
@ -8,15 +8,21 @@ import {
  ForTwoColumns,
  ProxyCardGroups,
  ProxyNodePreview,
+  SubscriptionInfo,
 } from '~/components'
-import { sortProxiesByOrderingType, useStringBooleanMap } from '~/helpers'
 import {
-  proxiesOrderingType,
-  renderProxiesInSamePage,
-  useProxies,
-} from '~/signals'
+  formatTimeFromNow,
+  sortProxiesByOrderingType,
+  useStringBooleanMap,
+} from '~/helpers'
+import { proxiesOrderingType, useProxies } from '~/signals'
 import type { Proxy } from '~/types'
-import ProxyProvider from './ProxyProvider'
+
+enum ActiveTab {
+  all = 'all',
+  proxyProviders = 'proxyProviders',
+  proxies = 'proxies',
+}

 export default () => {
  const [t] = useI18n()
@ -25,27 +31,184 @@ export default () => {
    setProxyGroupByProxyName,
    latencyTestByProxyGroupName,
    latencyMap,
+    proxyProviders,
+    updateProviderByProviderName,
+    updateAllProvider,
+    healthCheckByProviderName,
  } = useProxies()

  const { map: collapsedMap, set: setCollapsedMap } = useStringBooleanMap()
-  const { map: speedTestingMap, setWithCallback: setSpeedTestingMap } =
+  const { map: latencyTestingMap, setWithCallback: setLatencyTestingMap } =
    useStringBooleanMap()

  const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
    void setProxyGroupByProxyName(proxy, proxyName)
  }

-  const onSpeedTestClick = async (e: MouseEvent, name: string) => {
+  const onLatencyTestClick = async (e: MouseEvent, name: string) => {
    e.stopPropagation()
-    setSpeedTestingMap(name, () => latencyTestByProxyGroupName(name))
+    void setLatencyTestingMap(name, () => latencyTestByProxyGroupName(name))
  }

+  const { map: healthCheckingMap, setWithCallback: setHealthCheckingMap } =
+    useStringBooleanMap()
+  const { map: updatingMap, setWithCallback: setUpdatingMap } =
+    useStringBooleanMap()
+  const [isAllProviderUpdating, setIsAllProviderUpdating] = createSignal(false)
+
+  const onHealthCheckClick = (e: MouseEvent, name: string) => {
+    e.stopPropagation()
+    void setHealthCheckingMap(name, () => healthCheckByProviderName(name))
+  }
+
+  const onUpdateProviderClick = (e: MouseEvent, name: string) => {
+    e.stopPropagation()
+    void setUpdatingMap(name, () => updateProviderByProviderName(name))
+  }
+
+  const onUpdateAllProviderClick = async (e: MouseEvent) => {
+    e.stopPropagation()
+    setIsAllProviderUpdating(true)
+    try {
+      await updateAllProvider()
+    } catch {}
+    setIsAllProviderUpdating(false)
+  }
+
+  const [activeTab, setActiveTab] = createSignal(ActiveTab.all)
+
+  const tabs = () => [
+    {
+      type: ActiveTab.all,
+      name: t('all'),
+      count: proxyProviders().length + proxies().length,
+    },
+    {
+      type: ActiveTab.proxyProviders,
+      name: t('proxyProviders'),
+      count: proxyProviders().length,
+    },
+    {
+      type: ActiveTab.proxies,
+      name: t('proxies'),
+      count: proxies().length,
+    },
+  ]
+
  return (
-    <>
-      <div class="flex flex-col gap-2">
-        <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
-          {t('proxies')}
-        </h1>
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <div class="tabs tabs-boxed gap-2">
+          <For each={tabs()}>
+            {(tab) => (
+              <button
+                class={twMerge(
+                  activeTab() === tab.type && 'tab-active',
+                  'tab gap-2',
+                )}
+                onClick={() => setActiveTab(tab.type)}
+              >
+                <span>{tab.name}</span>
+                <div class="badge badge-sm">{tab.count}</div>
+              </button>
+            )}
+          </For>
+        </div>
+
+        <Button
+          class="btn btn-circle btn-sm mr-2"
+          onClick={(e) => onUpdateAllProviderClick(e)}
+        >
+          <IconReload
+            class={twMerge(
+              isAllProviderUpdating() && 'animate-spin text-success',
+            )}
+          />
+        </Button>
+      </div>
+
+      <Show
+        when={
+          activeTab() === ActiveTab.all ||
+          activeTab() === ActiveTab.proxyProviders
+        }
+      >
+        <ForTwoColumns
+          subChild={proxyProviders().map((proxyProvider) => {
+            const sortedProxyNames = sortProxiesByOrderingType(
+              proxyProvider.proxies.map((i) => i.name) ?? [],
+              latencyMap(),
+              proxiesOrderingType(),
+            )
+
+            const title = (
+              <>
+                <div class="mr-8 flex items-center justify-between">
+                  <span>{proxyProvider.name}</span>
+                  <div>
+                    <Button
+                      class="btn btn-circle btn-sm mr-2"
+                      onClick={(e) =>
+                        onUpdateProviderClick(e, proxyProvider.name)
+                      }
+                    >
+                      <IconReload
+                        class={twMerge(
+                          updatingMap()[proxyProvider.name] &&
+                            'animate-spin text-success',
+                        )}
+                      />
+                    </Button>
+
+                    <Button
+                      class="btn btn-circle btn-sm"
+                      onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
+                    >
+                      <IconBrandSpeedtest
+                        class={twMerge(
+                          healthCheckingMap()[proxyProvider.name] &&
+                            'animate-pulse text-success',
+                        )}
+                      />
+                    </Button>
+                  </div>
+                </div>
+                <SubscriptionInfo
+                  subscriptionInfo={proxyProvider.subscriptionInfo}
+                />
+                <div class="text-sm text-slate-500">
+                  {proxyProvider.vehicleType} :: {t('updated')}{' '}
+                  {formatTimeFromNow(proxyProvider.updatedAt)}
+                </div>
+                <Show when={!collapsedMap()[proxyProvider.name]}>
+                  <ProxyNodePreview proxyNameList={sortedProxyNames} />
+                </Show>
+              </>
+            )
+
+            const content = <ProxyCardGroups proxyNames={sortedProxyNames} />
+
+            return (
+              <Collapse
+                isOpen={collapsedMap()[proxyProvider.name]}
+                title={title}
+                content={content}
+                onCollapse={(val) => setCollapsedMap(proxyProvider.name, val)}
+              />
+            )
+          })}
+        />
+      </Show>
+
+      <Show when={activeTab() === ActiveTab.all}>
+        <div class="divider" />
+      </Show>
+
+      <Show
+        when={
+          activeTab() === ActiveTab.all || activeTab() === ActiveTab.proxies
+        }
+      >
        <ForTwoColumns
          subChild={proxies().map((proxy) => {
            const sortedProxyNames = sortProxiesByOrderingType(
@ -60,19 +223,21 @@ export default () => {
                  <span>{proxy.name}</span>
                  <Button
                    class="btn-circle btn-sm"
-                    onClick={(e) => onSpeedTestClick(e, proxy.name)}
+                    onClick={(e) => onLatencyTestClick(e, proxy.name)}
                  >
                    <IconBrandSpeedtest
                      class={twMerge(
-                        speedTestingMap()[proxy.name] &&
+                        latencyTestingMap()[proxy.name] &&
                          'animate-pulse text-success',
                      )}
                    />
                  </Button>
                </div>
+
                <div class="text-sm text-slate-500">
                  {proxy.type} {proxy.now?.length > 0 && ` :: ${proxy.now}`}
                </div>
+
                <Show when={!collapsedMap()[proxy.name]}>
                  <ProxyNodePreview
                    proxyNameList={sortedProxyNames}
@ -102,11 +267,7 @@ export default () => {
            )
          })}
        />
-      </div>
-      <Show when={renderProxiesInSamePage()}>
-        <div class="divider"></div>
-        <ProxyProvider />
      </Show>
-    </>
+    </div>
  )
 }
--- a/src/pages/ProxyProvider.tsx
+++ b/src/pages/ProxyProvider.tsx
@ -1,139 +0,0 @@
-import { useI18n } from '@solid-primitives/i18n'
-import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
-import { Show, createSignal } from 'solid-js'
-import { twMerge } from 'tailwind-merge'
-import {
-  Button,
-  Collapse,
-  ForTwoColumns,
-  ProxyCardGroups,
-  ProxyNodePreview,
-  SubscriptionInfo,
-} from '~/components'
-import {
-  formatTimeFromNow,
-  sortProxiesByOrderingType,
-  useStringBooleanMap,
-} from '~/helpers'
-import { proxiesOrderingType, useProxies } from '~/signals'
-
-export default () => {
-  const [t] = useI18n()
-  const {
-    proxyProviders,
-    updateProviderByProviderName,
-    updateAllProvider,
-    healthCheckByProviderName,
-    latencyMap,
-  } = useProxies()
-
-  const { map: collapsedMap, set: setCollapsedMap } = useStringBooleanMap()
-  const { map: healthCheckingMap, setWithCallback: setHealthCheckingMap } =
-    useStringBooleanMap()
-  const { map: updateingMap, setWithCallback: setUpdateingMap } =
-    useStringBooleanMap()
-  const [allProviderIsUpdating, setAllProviderIsUpdating] = createSignal(false)
-
-  const onHealthCheckClick = (e: MouseEvent, name: string) => {
-    e.stopPropagation()
-    setHealthCheckingMap(name, () => healthCheckByProviderName(name))
-  }
-
-  const onUpdateProviderClick = (e: MouseEvent, name: string) => {
-    e.stopPropagation()
-    setUpdateingMap(name, () => updateProviderByProviderName(name))
-  }
-
-  const onUpdateAllProviderClick = async (e: MouseEvent) => {
-    e.stopPropagation()
-    setAllProviderIsUpdating(true)
-    try {
-      await updateAllProvider()
-    } catch {}
-    setAllProviderIsUpdating(false)
-  }
-
-  return (
-    <div class="flex flex-col gap-2">
-      <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
-        {t('proxyProviders')}
-
-        <Button
-          class="btn-circle btn-ghost btn-sm ml-2"
-          onClick={(e) => onUpdateAllProviderClick(e)}
-        >
-          <IconReload
-            class={twMerge(
-              allProviderIsUpdating() && 'animate-spin text-success',
-            )}
-          />
-        </Button>
-      </h1>
-      <ForTwoColumns
-        subChild={proxyProviders().map((proxyProvider) => {
-          const sortedProxyNames = sortProxiesByOrderingType(
-            proxyProvider.proxies.map((i) => i.name) ?? [],
-            latencyMap(),
-            proxiesOrderingType(),
-          )
-
-          const title = (
-            <>
-              <div class="mr-8 flex items-center justify-between">
-                <span>{proxyProvider.name}</span>
-                <div>
-                  <Button
-                    class="btn btn-circle btn-sm mr-2"
-                    onClick={(e) =>
-                      onUpdateProviderClick(e, proxyProvider.name)
-                    }
-                  >
-                    <IconReload
-                      class={twMerge(
-                        updateingMap()[proxyProvider.name] &&
-                          'animate-spin text-success',
-                      )}
-                    />
-                  </Button>
-
-                  <Button
-                    class="btn btn-circle btn-sm"
-                    onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
-                  >
-                    <IconBrandSpeedtest
-                      class={twMerge(
-                        healthCheckingMap()[proxyProvider.name] &&
-                          'animate-pulse text-success',
-                      )}
-                    />
-                  </Button>
-                </div>
-              </div>
-              <SubscriptionInfo
-                subscriptionInfo={proxyProvider.subscriptionInfo}
-              />
-              <div class="text-sm text-slate-500">
-                {proxyProvider.vehicleType} :: {t('updated')}{' '}
-                {formatTimeFromNow(proxyProvider.updatedAt)}
-              </div>
-              <Show when={!collapsedMap()[proxyProvider.name]}>
-                <ProxyNodePreview proxyNameList={sortedProxyNames} />
-              </Show>
-            </>
-          )
-
-          const content = <ProxyCardGroups proxyNames={sortedProxyNames} />
-
-          return (
-            <Collapse
-              isOpen={collapsedMap()[proxyProvider.name]}
-              title={title}
-              content={content}
-              onCollapse={(val) => setCollapsedMap(proxyProvider.name, val)}
-            />
-          )
-        })}
-      />
-    </div>
-  )
-}
--- a/src/signals/config.ts
+++ b/src/signals/config.ts
@ -45,11 +45,6 @@ export const [renderInTwoColumns, setRenderInTwoColumns] = makePersisted(
  createSignal(true),
  { name: 'renderInTwoColumn', storage: localStorage },
 )
-export const [renderProxiesInSamePage, setRenderProxiesInSamePage] =
-  makePersisted(createSignal(false), {
-    name: 'renderProxiesInSamePage',
-    storage: localStorage,
-  })
 export const [
  renderRulesAndProviderInTwoColumns,
  setRenderRulesAndProviderInTwoColumns,