mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-23 09:25:35 +08:00
feat: show current page title, closes #474
This commit is contained in:
kunish
parent
443cb251ba
commit
9c76d7ff76
1
auto-imports.d.ts
vendored
1
auto-imports.d.ts
vendored
@ -3,6 +3,7 @@
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
// biome-ignore lint: disable
|
||||
export { }
|
||||
declare global {
|
||||
const $DEVCOMP: (typeof import('solid-js'))['$DEVCOMP']
|
||||
|
||||
@ -9,9 +9,8 @@
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="/pwa-192x192.png" />
|
||||
|
||||
<title>metacubexd</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
"@solid-primitives/storage": "^4.2.1",
|
||||
"@solid-primitives/timer": "^1.3.10",
|
||||
"@solid-primitives/websocket": "^1.2.2",
|
||||
"@solidjs/meta": "^0.29.4",
|
||||
"@solidjs/router": "^0.14.7",
|
||||
"@tabler/icons-solidjs": "^3.19.0",
|
||||
"@tanstack/match-sorter-utils": "^8.19.4",
|
||||
@ -44,7 +45,7 @@
|
||||
"autoprefixer": "^10.4.20",
|
||||
"byte-size": "^9.0.0",
|
||||
"commitlint": "^19.5.0",
|
||||
"daisyui": "^4.12.12",
|
||||
"daisyui": "^4.12.13",
|
||||
"dayjs": "^1.11.13",
|
||||
"eslint": "^9.12.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
@ -73,5 +74,5 @@
|
||||
"vite-plugin-solid": "^2.10.2",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"packageManager": "pnpm@9.10.0"
|
||||
"packageManager": "pnpm@9.12.1"
|
||||
}
|
||||
|
||||
5255
pnpm-lock.yaml
5255
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
6
src/components/DocumentTitle.tsx
Normal file
6
src/components/DocumentTitle.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import { Title } from '@solidjs/meta'
|
||||
import { ParentComponent } from 'solid-js'
|
||||
|
||||
export default (({ children }) => {
|
||||
return <Title>{children} - MetaCubeXD</Title>
|
||||
}) as ParentComponent
|
||||
@ -119,7 +119,7 @@ export const Header = () => {
|
||||
<div class="drawer-side">
|
||||
<label for="navs" class="drawer-overlay" />
|
||||
|
||||
<ul class="menu min-h-full w-2/5 gap-2 rounded-r-box bg-base-300 pt-20">
|
||||
<ul class="min-w-2/5 menu min-h-full gap-2 rounded-r-box bg-base-300 pt-20">
|
||||
<For each={navs()}>
|
||||
{({ href, name, icon }) => (
|
||||
<li onClick={() => setOpenedDrawer(false)}>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export default {
|
||||
add: 'Add',
|
||||
setup: 'Setup',
|
||||
overview: 'Overview',
|
||||
proxies: 'Proxies',
|
||||
proxiesSettings: 'Proxies Settings',
|
||||
|
||||
@ -2,6 +2,7 @@ import { Dict } from '~/i18n/dict'
|
||||
|
||||
export default {
|
||||
add: '添加',
|
||||
setup: '设置',
|
||||
overview: '概览',
|
||||
proxies: '代理',
|
||||
proxiesSettings: '代理设置',
|
||||
|
||||
23
src/main.tsx
23
src/main.tsx
@ -1,6 +1,7 @@
|
||||
/* @refresh reload */
|
||||
import '~/index.css'
|
||||
|
||||
import { MetaProvider } from '@solidjs/meta'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/zh-cn'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
@ -24,16 +25,18 @@ dayjs.extend(relativeTime)
|
||||
render(
|
||||
() => (
|
||||
<I18nProvider locale={locale()}>
|
||||
<HashRouter root={App}>
|
||||
<Route path={ROUTES.Setup} component={Setup} />
|
||||
<Route path="*" component={Overview} />
|
||||
<Route path={ROUTES.Overview} component={Overview} />
|
||||
<Route path={ROUTES.Proxies} component={Proxies} />
|
||||
<Route path={ROUTES.Rules} component={Rules} />
|
||||
<Route path={ROUTES.Conns} component={Connections} />
|
||||
<Route path={ROUTES.Log} component={Logs} />
|
||||
<Route path={ROUTES.Config} component={Config} />
|
||||
</HashRouter>
|
||||
<MetaProvider>
|
||||
<HashRouter root={App}>
|
||||
<Route path={ROUTES.Setup} component={Setup} />
|
||||
<Route path="*" component={Overview} />
|
||||
<Route path={ROUTES.Overview} component={Overview} />
|
||||
<Route path={ROUTES.Proxies} component={Proxies} />
|
||||
<Route path={ROUTES.Rules} component={Rules} />
|
||||
<Route path={ROUTES.Conns} component={Connections} />
|
||||
<Route path={ROUTES.Log} component={Logs} />
|
||||
<Route path={ROUTES.Config} component={Config} />
|
||||
</HashRouter>
|
||||
</MetaProvider>
|
||||
|
||||
<Toaster position="bottom-center" />
|
||||
</I18nProvider>
|
||||
|
||||
@ -21,6 +21,7 @@ import {
|
||||
upgradingUI,
|
||||
} from '~/apis'
|
||||
import { Button, ConfigTitle } from '~/components'
|
||||
import DocumentTitle from '~/components/DocumentTitle'
|
||||
import { LANG, ROUTES, themes } from '~/constants'
|
||||
import { locale, setLocale, useI18n } from '~/i18n'
|
||||
import {
|
||||
@ -540,24 +541,28 @@ export default () => {
|
||||
updateBackendVersion()
|
||||
|
||||
return (
|
||||
<div class="mx-auto flex max-w-screen-md flex-col gap-4">
|
||||
<Show when={!isSingBox()}>
|
||||
<ConfigTitle withDivider>{t('dnsQuery')}</ConfigTitle>
|
||||
<>
|
||||
<DocumentTitle>{t('config')}</DocumentTitle>
|
||||
|
||||
<DNSQueryForm />
|
||||
</Show>
|
||||
<div class="mx-auto flex max-w-screen-md flex-col gap-4">
|
||||
<Show when={!isSingBox()}>
|
||||
<ConfigTitle withDivider>{t('dnsQuery')}</ConfigTitle>
|
||||
|
||||
<ConfigTitle withDivider>{t('coreConfig')}</ConfigTitle>
|
||||
<DNSQueryForm />
|
||||
</Show>
|
||||
|
||||
<ConfigForm />
|
||||
<ConfigTitle withDivider>{t('coreConfig')}</ConfigTitle>
|
||||
|
||||
<ConfigTitle withDivider>{t('xdConfig')}</ConfigTitle>
|
||||
<ConfigForm />
|
||||
|
||||
<ConfigForXd />
|
||||
<ConfigTitle withDivider>{t('xdConfig')}</ConfigTitle>
|
||||
|
||||
<ConfigTitle withDivider>{t('version')}</ConfigTitle>
|
||||
<ConfigForXd />
|
||||
|
||||
<Versions backendVersion={backendVersion} />
|
||||
</div>
|
||||
<ConfigTitle withDivider>{t('version')}</ConfigTitle>
|
||||
|
||||
<Versions backendVersion={backendVersion} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -35,6 +35,7 @@ import {
|
||||
ConnectionsSettingsModal,
|
||||
ConnectionsTableDetailsModal,
|
||||
} from '~/components'
|
||||
import DocumentTitle from '~/components/DocumentTitle'
|
||||
import { CONNECTIONS_TABLE_ACCESSOR_KEY } from '~/constants'
|
||||
import { useI18n } from '~/i18n'
|
||||
import {
|
||||
@ -355,231 +356,238 @@ export default () => {
|
||||
])
|
||||
|
||||
return (
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<div class="flex w-full flex-wrap items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="tabs-boxed tabs gap-2">
|
||||
<Index each={tabs()}>
|
||||
{(tab) => (
|
||||
<button
|
||||
class={twMerge(
|
||||
activeTab() === tab().type && 'tab-active',
|
||||
'tab-sm sm:tab-md tab gap-2 px-2',
|
||||
)}
|
||||
onClick={() => setActiveTab(tab().type)}
|
||||
>
|
||||
<span>{tab().name}</span>
|
||||
<div class="badge badge-sm">{tab().count}</div>
|
||||
</button>
|
||||
)}
|
||||
</Index>
|
||||
<>
|
||||
<DocumentTitle>{t('connections')}</DocumentTitle>
|
||||
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<div class="flex w-full flex-wrap items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="tabs-boxed tabs gap-2">
|
||||
<Index each={tabs()}>
|
||||
{(tab) => (
|
||||
<button
|
||||
class={twMerge(
|
||||
activeTab() === tab().type && 'tab-active',
|
||||
'tab-sm sm:tab-md tab gap-2 px-2',
|
||||
)}
|
||||
onClick={() => setActiveTab(tab().type)}
|
||||
>
|
||||
<span>{tab().name}</span>
|
||||
<div class="badge badge-sm">{tab().count}</div>
|
||||
</button>
|
||||
)}
|
||||
</Index>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2 hidden lg:inline-block">
|
||||
{t('quickFilter')}:
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
checked={enableQuickFilter()}
|
||||
onChange={(e) => setEnableQuickFilter(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
class="select select-bordered select-primary select-sm w-full max-w-full flex-1"
|
||||
onChange={(e) => setSourceIPFilter(e.target.value)}
|
||||
>
|
||||
<option value="">{t('all')}</option>
|
||||
|
||||
<Index
|
||||
each={uniq(
|
||||
allConnections().map(({ metadata: { sourceIP } }) => {
|
||||
const tagged = clientSourceIPTags().find(
|
||||
(tag) => tag.sourceIP === sourceIP,
|
||||
)
|
||||
|
||||
return tagged ? tagged.tagName : sourceIP
|
||||
}),
|
||||
).sort()}
|
||||
>
|
||||
{(sourceIP) => <option value={sourceIP()}>{sourceIP()}</option>}
|
||||
</Index>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2 hidden lg:inline-block">{t('quickFilter')}:</span>
|
||||
<div class="join flex flex-1 items-center md:flex-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle"
|
||||
checked={enableQuickFilter()}
|
||||
onChange={(e) => setEnableQuickFilter(e.target.checked)}
|
||||
type="search"
|
||||
class="input input-sm join-item input-primary min-w-0 flex-1"
|
||||
placeholder={t('search')}
|
||||
onInput={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
class="btn btn-primary join-item btn-sm"
|
||||
onClick={() => setPaused((paused) => !paused)}
|
||||
icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
|
||||
/>
|
||||
|
||||
<Button
|
||||
class="btn btn-primary join-item btn-sm"
|
||||
onClick={() => {
|
||||
if (table.getState().globalFilter) {
|
||||
table
|
||||
.getFilteredRowModel()
|
||||
.rows.forEach(({ original }) =>
|
||||
closeSingleConnectionAPI(original.id),
|
||||
)
|
||||
} else {
|
||||
closeAllConnectionsAPI()
|
||||
}
|
||||
}}
|
||||
icon={<IconX />}
|
||||
/>
|
||||
|
||||
<Button
|
||||
class="btn btn-primary join-item btn-sm"
|
||||
onClick={() => connectionsSettingsModalRef?.showModal()}
|
||||
icon={<IconSettings />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select
|
||||
class="select select-bordered select-primary select-sm w-full max-w-full flex-1"
|
||||
onChange={(e) => setSourceIPFilter(e.target.value)}
|
||||
<div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
|
||||
<table
|
||||
class={twMerge(
|
||||
tableSizeClassName(connectionsTableSize()),
|
||||
'table table-zebra relative rounded-none',
|
||||
)}
|
||||
>
|
||||
<option value="">{t('all')}</option>
|
||||
|
||||
<Index
|
||||
each={uniq(
|
||||
allConnections().map(({ metadata: { sourceIP } }) => {
|
||||
const tagged = clientSourceIPTags().find(
|
||||
(tag) => tag.sourceIP === sourceIP,
|
||||
)
|
||||
|
||||
return tagged ? tagged.tagName : sourceIP
|
||||
}),
|
||||
).sort()}
|
||||
>
|
||||
{(sourceIP) => <option value={sourceIP()}>{sourceIP()}</option>}
|
||||
</Index>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="join flex flex-1 items-center md:flex-1">
|
||||
<input
|
||||
type="search"
|
||||
class="input input-sm join-item input-primary min-w-0 flex-1"
|
||||
placeholder={t('search')}
|
||||
onInput={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
class="btn btn-primary join-item btn-sm"
|
||||
onClick={() => setPaused((paused) => !paused)}
|
||||
icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
|
||||
/>
|
||||
|
||||
<Button
|
||||
class="btn btn-primary join-item btn-sm"
|
||||
onClick={() => {
|
||||
if (table.getState().globalFilter) {
|
||||
table
|
||||
.getFilteredRowModel()
|
||||
.rows.forEach(({ original }) =>
|
||||
closeSingleConnectionAPI(original.id),
|
||||
)
|
||||
} else {
|
||||
closeAllConnectionsAPI()
|
||||
}
|
||||
}}
|
||||
icon={<IconX />}
|
||||
/>
|
||||
|
||||
<Button
|
||||
class="btn btn-primary join-item btn-sm"
|
||||
onClick={() => connectionsSettingsModalRef?.showModal()}
|
||||
icon={<IconSettings />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
|
||||
<table
|
||||
class={twMerge(
|
||||
tableSizeClassName(connectionsTableSize()),
|
||||
'table table-zebra relative rounded-none',
|
||||
)}
|
||||
>
|
||||
<thead class="sticky top-0 z-10 h-8">
|
||||
<For each={table.getHeaderGroups()}>
|
||||
{(headerGroup) => (
|
||||
<tr>
|
||||
<For each={headerGroup.headers}>
|
||||
{(header) => (
|
||||
<th class="bg-base-200">
|
||||
<div class={twMerge('flex items-center gap-2')}>
|
||||
{header.column.getCanGroup() ? (
|
||||
<button
|
||||
class="cursor-pointer"
|
||||
onClick={header.column.getToggleGroupingHandler()}
|
||||
>
|
||||
{header.column.getIsGrouped() ? (
|
||||
<IconZoomOutFilled size={18} />
|
||||
) : (
|
||||
<IconZoomInFilled size={18} />
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
class={twMerge(
|
||||
header.column.getCanSort() &&
|
||||
'cursor-pointer select-none',
|
||||
'flex-1',
|
||||
)}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</div>
|
||||
|
||||
{{
|
||||
asc: <IconSortAscending />,
|
||||
desc: <IconSortDescending />,
|
||||
}[header.column.getIsSorted() as string] ?? null}
|
||||
</div>
|
||||
</th>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<For each={table.getRowModel().rows}>
|
||||
{(row) => (
|
||||
<tr class="hover:!bg-primary hover:text-primary-content">
|
||||
<For each={row.getVisibleCells()}>
|
||||
{(cell) => {
|
||||
return (
|
||||
<td
|
||||
class="py-2"
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const value = cell.renderValue() as null | string
|
||||
value && writeClipboard(value).catch(() => {})
|
||||
}}
|
||||
>
|
||||
{cell.getIsGrouped() ? (
|
||||
<button
|
||||
class={twMerge(
|
||||
row.getCanExpand()
|
||||
? 'cursor-pointer'
|
||||
: 'cursor-normal',
|
||||
'flex items-center gap-2',
|
||||
)}
|
||||
onClick={row.getToggleExpandedHandler()}
|
||||
>
|
||||
<div>
|
||||
{row.getIsExpanded() ? (
|
||||
<thead class="sticky top-0 z-10 h-8">
|
||||
<For each={table.getHeaderGroups()}>
|
||||
{(headerGroup) => (
|
||||
<tr>
|
||||
<For each={headerGroup.headers}>
|
||||
{(header) => (
|
||||
<th class="bg-base-200">
|
||||
<div class={twMerge('flex items-center gap-2')}>
|
||||
{header.column.getCanGroup() ? (
|
||||
<button
|
||||
class="cursor-pointer"
|
||||
onClick={header.column.getToggleGroupingHandler()}
|
||||
>
|
||||
{header.column.getIsGrouped() ? (
|
||||
<IconZoomOutFilled size={18} />
|
||||
) : (
|
||||
<IconZoomInFilled size={18} />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
<div>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
<div
|
||||
class={twMerge(
|
||||
header.column.getCanSort() &&
|
||||
'cursor-pointer select-none',
|
||||
'flex-1',
|
||||
)}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</div>
|
||||
|
||||
{{
|
||||
asc: <IconSortAscending />,
|
||||
desc: <IconSortDescending />,
|
||||
}[header.column.getIsSorted() as string] ?? null}
|
||||
</div>
|
||||
</th>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<For each={table.getRowModel().rows}>
|
||||
{(row) => (
|
||||
<tr class="hover:!bg-primary hover:text-primary-content">
|
||||
<For each={row.getVisibleCells()}>
|
||||
{(cell) => {
|
||||
return (
|
||||
<td
|
||||
class="py-2"
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const value = cell.renderValue() as null | string
|
||||
|
||||
if (value) writeClipboard(value).catch(() => {})
|
||||
}}
|
||||
>
|
||||
{cell.getIsGrouped() ? (
|
||||
<button
|
||||
class={twMerge(
|
||||
row.getCanExpand()
|
||||
? 'cursor-pointer'
|
||||
: 'cursor-normal',
|
||||
'flex items-center gap-2',
|
||||
)}
|
||||
</div>
|
||||
onClick={row.getToggleExpandedHandler()}
|
||||
>
|
||||
<div>
|
||||
{row.getIsExpanded() ? (
|
||||
<IconZoomOutFilled size={18} />
|
||||
) : (
|
||||
<IconZoomInFilled size={18} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>({row.subRows.length})</div>
|
||||
</button>
|
||||
) : cell.getIsAggregated() ? (
|
||||
flexRender(
|
||||
cell.column.columnDef.aggregatedCell ??
|
||||
<div>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>({row.subRows.length})</div>
|
||||
</button>
|
||||
) : cell.getIsAggregated() ? (
|
||||
flexRender(
|
||||
cell.column.columnDef.aggregatedCell ??
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)
|
||||
) : cell.getIsPlaceholder() ? null : (
|
||||
flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)
|
||||
) : cell.getIsPlaceholder() ? null : (
|
||||
flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
cell.getContext(),
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<ConnectionsSettingsModal
|
||||
ref={(el) => (connectionsSettingsModalRef = el)}
|
||||
order={connectionsTableColumnOrder()}
|
||||
visible={connectionsTableColumnVisibility()}
|
||||
onOrderChange={(data) => setConnectionsTableColumnOrder(data)}
|
||||
onVisibleChange={(data) =>
|
||||
setConnectionsTableColumnVisibility({ ...data })
|
||||
}
|
||||
/>
|
||||
|
||||
<ConnectionsTableDetailsModal
|
||||
ref={(el) => (connectionsDetailsModalRef = el)}
|
||||
selectedConnectionID={selectedConnectionID()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ConnectionsSettingsModal
|
||||
ref={(el) => (connectionsSettingsModalRef = el)}
|
||||
order={connectionsTableColumnOrder()}
|
||||
visible={connectionsTableColumnVisibility()}
|
||||
onOrderChange={(data) => setConnectionsTableColumnOrder(data)}
|
||||
onVisibleChange={(data) =>
|
||||
setConnectionsTableColumnVisibility({ ...data })
|
||||
}
|
||||
/>
|
||||
|
||||
<ConnectionsTableDetailsModal
|
||||
ref={(el) => (connectionsDetailsModalRef = el)}
|
||||
selectedConnectionID={selectedConnectionID()}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ import {
|
||||
} from '@tanstack/solid-table'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { Button, LogsSettingsModal } from '~/components'
|
||||
import DocumentTitle from '~/components/DocumentTitle'
|
||||
import { LOG_LEVEL } from '~/constants'
|
||||
import { useI18n } from '~/i18n'
|
||||
import { endpoint, logsTableSize, tableSizeClassName } from '~/signals'
|
||||
@ -120,99 +121,104 @@ export default () => {
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<div class="join w-full">
|
||||
<input
|
||||
type="search"
|
||||
class="input input-sm join-item input-primary flex-1 flex-shrink-0"
|
||||
placeholder={t('search')}
|
||||
onInput={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
<>
|
||||
<DocumentTitle>{t('logs')}</DocumentTitle>
|
||||
|
||||
<Button
|
||||
class="btn-primary join-item btn-sm"
|
||||
onClick={() => setPaused((paused) => !paused)}
|
||||
icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
|
||||
/>
|
||||
<Button
|
||||
class="btn-primary join-item btn-sm"
|
||||
onClick={() => logsSettingsModalRef?.showModal()}
|
||||
icon={<IconSettings />}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<div class="join w-full">
|
||||
<input
|
||||
type="search"
|
||||
class="input input-sm join-item input-primary flex-1 flex-shrink-0"
|
||||
placeholder={t('search')}
|
||||
onInput={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
|
||||
<div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
|
||||
<table
|
||||
class={twMerge(
|
||||
tableSizeClassName(logsTableSize()),
|
||||
'table relative rounded-none',
|
||||
)}
|
||||
>
|
||||
<thead class="sticky top-0 z-10">
|
||||
<Index each={table.getHeaderGroups()}>
|
||||
{(keyedHeaderGroup) => {
|
||||
const headerGroup = keyedHeaderGroup()
|
||||
<Button
|
||||
class="btn-primary join-item btn-sm"
|
||||
onClick={() => setPaused((paused) => !paused)}
|
||||
icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
|
||||
/>
|
||||
<Button
|
||||
class="btn-primary join-item btn-sm"
|
||||
onClick={() => logsSettingsModalRef?.showModal()}
|
||||
icon={<IconSettings />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<Index each={headerGroup.headers}>
|
||||
{(keyedHeader) => {
|
||||
const header = keyedHeader()
|
||||
<div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
|
||||
<table
|
||||
class={twMerge(
|
||||
tableSizeClassName(logsTableSize()),
|
||||
'table relative rounded-none',
|
||||
)}
|
||||
>
|
||||
<thead class="sticky top-0 z-10">
|
||||
<Index each={table.getHeaderGroups()}>
|
||||
{(keyedHeaderGroup) => {
|
||||
const headerGroup = keyedHeaderGroup()
|
||||
|
||||
return (
|
||||
<th class="bg-base-200">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class={twMerge(
|
||||
header.column.getCanSort() &&
|
||||
'cursor-pointer select-none',
|
||||
'flex-1',
|
||||
)}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
return (
|
||||
<tr>
|
||||
<Index each={headerGroup.headers}>
|
||||
{(keyedHeader) => {
|
||||
const header = keyedHeader()
|
||||
|
||||
return (
|
||||
<th class="bg-base-200">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class={twMerge(
|
||||
header.column.getCanSort() &&
|
||||
'cursor-pointer select-none',
|
||||
'flex-1',
|
||||
)}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</div>
|
||||
|
||||
{{
|
||||
asc: <IconSortAscending />,
|
||||
desc: <IconSortDescending />,
|
||||
}[header.column.getIsSorted() as string] ??
|
||||
null}
|
||||
</div>
|
||||
</th>
|
||||
)
|
||||
}}
|
||||
</Index>
|
||||
</tr>
|
||||
)
|
||||
}}
|
||||
</Index>
|
||||
</thead>
|
||||
|
||||
{{
|
||||
asc: <IconSortAscending />,
|
||||
desc: <IconSortDescending />,
|
||||
}[header.column.getIsSorted() as string] ?? null}
|
||||
</div>
|
||||
</th>
|
||||
)
|
||||
}}
|
||||
</Index>
|
||||
<tbody>
|
||||
<For each={table.getRowModel().rows}>
|
||||
{(row) => (
|
||||
<tr class="hover:!bg-primary hover:text-primary-content">
|
||||
<For each={row.getVisibleCells()}>
|
||||
{(cell) => (
|
||||
<td class="py-2">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)
|
||||
}}
|
||||
</Index>
|
||||
</thead>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<tbody>
|
||||
<For each={table.getRowModel().rows}>
|
||||
{(row) => (
|
||||
<tr class="hover:!bg-primary hover:text-primary-content">
|
||||
<For each={row.getVisibleCells()}>
|
||||
{(cell) => (
|
||||
<td class="py-2">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
<LogsSettingsModal ref={(el) => (logsSettingsModalRef = el)} />
|
||||
</div>
|
||||
|
||||
<LogsSettingsModal ref={(el) => (logsSettingsModalRef = el)} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import byteSize from 'byte-size'
|
||||
import { merge } from 'lodash'
|
||||
import { SolidApexCharts } from 'solid-apexcharts'
|
||||
import type { JSX, ParentComponent } from 'solid-js'
|
||||
import DocumentTitle from '~/components/DocumentTitle'
|
||||
import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
|
||||
import { useI18n } from '~/i18n'
|
||||
import { endpoint, latestConnectionMsg, useWsRequest } from '~/signals'
|
||||
@ -87,53 +88,57 @@ export default () => {
|
||||
])
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-2 lg:h-full">
|
||||
<div class="stats stats-vertical w-full flex-shrink-0 grid-cols-2 bg-gradient-to-br from-primary to-secondary shadow lg:stats-horizontal lg:flex">
|
||||
<TrafficWidget label={t('upload')}>
|
||||
{byteSize(traffic()?.up || 0).toString()}/s
|
||||
</TrafficWidget>
|
||||
<>
|
||||
<DocumentTitle>{t('overview')}</DocumentTitle>
|
||||
|
||||
<TrafficWidget label={t('download')}>
|
||||
{byteSize(traffic()?.down || 0).toString()}/s
|
||||
</TrafficWidget>
|
||||
<div class="flex flex-col gap-2 lg:h-full">
|
||||
<div class="stats stats-vertical w-full flex-shrink-0 grid-cols-2 bg-gradient-to-br from-primary to-secondary shadow lg:stats-horizontal lg:flex">
|
||||
<TrafficWidget label={t('upload')}>
|
||||
{byteSize(traffic()?.up || 0).toString()}/s
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('uploadTotal')}>
|
||||
{byteSize(latestConnectionMsg()?.uploadTotal || 0).toString()}
|
||||
</TrafficWidget>
|
||||
<TrafficWidget label={t('download')}>
|
||||
{byteSize(traffic()?.down || 0).toString()}/s
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('downloadTotal')}>
|
||||
{byteSize(latestConnectionMsg()?.downloadTotal || 0).toString()}
|
||||
</TrafficWidget>
|
||||
<TrafficWidget label={t('uploadTotal')}>
|
||||
{byteSize(latestConnectionMsg()?.uploadTotal || 0).toString()}
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('activeConnections')}>
|
||||
{latestConnectionMsg()?.connections?.length || 0}
|
||||
</TrafficWidget>
|
||||
<TrafficWidget label={t('downloadTotal')}>
|
||||
{byteSize(latestConnectionMsg()?.downloadTotal || 0).toString()}
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('memoryUsage')}>
|
||||
{byteSize(memory()?.inuse || 0).toString()}
|
||||
</TrafficWidget>
|
||||
</div>
|
||||
<TrafficWidget label={t('activeConnections')}>
|
||||
{latestConnectionMsg()?.connections?.length || 0}
|
||||
</TrafficWidget>
|
||||
|
||||
<div class="flex flex-col gap-2 rounded-box bg-base-300 py-4 lg:flex-row">
|
||||
<div class="flex-1">
|
||||
<SolidApexCharts
|
||||
type="area"
|
||||
options={trafficChartOptions()}
|
||||
series={trafficChartSeries()}
|
||||
/>
|
||||
<TrafficWidget label={t('memoryUsage')}>
|
||||
{byteSize(memory()?.inuse || 0).toString()}
|
||||
</TrafficWidget>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<SolidApexCharts
|
||||
type="line"
|
||||
options={memoryChartOptions()}
|
||||
series={memoryChartSeries()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer mx-auto mt-4 block rounded-box bg-neutral p-4 text-center text-lg font-bold text-neutral-content">
|
||||
{endpoint()?.url}
|
||||
</footer>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 rounded-box bg-base-300 py-4 lg:flex-row">
|
||||
<div class="flex-1">
|
||||
<SolidApexCharts
|
||||
type="area"
|
||||
options={trafficChartOptions()}
|
||||
series={trafficChartSeries()}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<SolidApexCharts
|
||||
type="line"
|
||||
options={memoryChartOptions()}
|
||||
series={memoryChartSeries()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer mx-auto mt-4 block rounded-box bg-neutral p-4 text-center text-lg font-bold text-neutral-content">
|
||||
{endpoint()?.url}
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
ProxyNodePreview,
|
||||
SubscriptionInfo,
|
||||
} from '~/components'
|
||||
import DocumentTitle from '~/components/DocumentTitle'
|
||||
import {
|
||||
filterProxiesByAvailability,
|
||||
sortProxiesByOrderingType,
|
||||
@ -125,257 +126,269 @@ export default () => {
|
||||
]
|
||||
|
||||
return (
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="tabs-boxed tabs gap-2">
|
||||
<For each={tabs()}>
|
||||
{(tab) => (
|
||||
<button
|
||||
class={twMerge(
|
||||
activeTab() === tab.type && 'tab-active',
|
||||
'tab-sm sm:tab-md tab gap-2 px-2',
|
||||
)}
|
||||
onClick={() => setActiveTab(tab.type)}
|
||||
>
|
||||
<span>{tab.name}</span>
|
||||
<div class="badge badge-sm">{tab.count}</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<>
|
||||
<DocumentTitle>{t('proxies')}</DocumentTitle>
|
||||
|
||||
<Show when={activeTab() === ActiveTab.proxyProviders}>
|
||||
<Button
|
||||
class="btn btn-circle btn-sm"
|
||||
disabled={isAllProviderUpdating()}
|
||||
onClick={(e) => onUpdateAllProviderClick(e)}
|
||||
icon={
|
||||
<IconReload
|
||||
class={twMerge(
|
||||
isAllProviderUpdating() && 'animate-spin text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<div class="ml-auto">
|
||||
<Button
|
||||
class="btn-circle btn-primary btn-sm"
|
||||
onClick={() => proxiesSettingsModalRef?.showModal()}
|
||||
icon={<IconSettings />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<Show when={activeTab() === ActiveTab.proxies}>
|
||||
<div
|
||||
class={twMerge(
|
||||
'grid grid-cols-1 place-items-start gap-2',
|
||||
renderProxiesInTwoColumns() ? 'sm:grid-cols-2' : 'sm:grid-cols-1',
|
||||
)}
|
||||
>
|
||||
<For each={renderProxies()}>
|
||||
{(proxyGroup) => {
|
||||
const sortedProxyNames = createMemo(() =>
|
||||
filterProxiesByAvailability(
|
||||
sortProxiesByOrderingType(
|
||||
proxyGroup.all ?? [],
|
||||
proxiesOrderingType(),
|
||||
),
|
||||
hideUnAvailableProxies(),
|
||||
),
|
||||
)
|
||||
|
||||
const title = (
|
||||
<>
|
||||
<div class="flex items-center justify-between pr-8">
|
||||
<div class="flex items-center">
|
||||
<Show when={proxyGroup.icon}>
|
||||
<img
|
||||
src={proxyGroup.icon}
|
||||
style={{
|
||||
height: `${iconHeight()}px`,
|
||||
'margin-right': `${iconMarginRight()}px`,
|
||||
}}
|
||||
/>
|
||||
</Show>
|
||||
<span>{proxyGroup.name}</span>
|
||||
<div class="badge badge-sm ml-2">
|
||||
{proxyGroup.all?.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
class="btn-circle btn-sm"
|
||||
disabled={
|
||||
proxyGroupLatencyTestingMap()[proxyGroup.name]
|
||||
}
|
||||
onClick={(e) =>
|
||||
onProxyGroupLatencyTestClick(e, proxyGroup.name)
|
||||
}
|
||||
icon={
|
||||
<IconBrandSpeedtest
|
||||
class={twMerge(
|
||||
proxyGroupLatencyTestingMap()[proxyGroup.name] &&
|
||||
'animate-pulse text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-sm text-slate-500">
|
||||
<span>
|
||||
{proxyGroup.type}{' '}
|
||||
{proxyGroup.now?.length > 0 && ` :: ${proxyGroup.now}`}
|
||||
</span>
|
||||
<span>
|
||||
{byteSize(
|
||||
speedGroupByName()[proxyGroup.name] ?? 0,
|
||||
).toString()}
|
||||
/s
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Show when={!collapsedMap()[proxyGroup.name]}>
|
||||
<ProxyNodePreview
|
||||
proxyNameList={sortedProxyNames()}
|
||||
now={proxyGroup.now}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
isOpen={collapsedMap()[proxyGroup.name]}
|
||||
title={title}
|
||||
onCollapse={(val) =>
|
||||
setCollapsedMapByKey(proxyGroup.name, val)
|
||||
}
|
||||
>
|
||||
<For each={sortedProxyNames()}>
|
||||
{(proxyName) => (
|
||||
<ProxyNodeCard
|
||||
proxyName={proxyName}
|
||||
isSelected={proxyGroup.now === proxyName}
|
||||
onClick={() =>
|
||||
void selectProxyInGroup(proxyGroup, proxyName)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</Collapse>
|
||||
)
|
||||
}}
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="tabs-boxed tabs gap-2">
|
||||
<For each={tabs()}>
|
||||
{(tab) => (
|
||||
<button
|
||||
class={twMerge(
|
||||
activeTab() === tab.type && 'tab-active',
|
||||
'tab-sm sm:tab-md tab gap-2 px-2',
|
||||
)}
|
||||
onClick={() => setActiveTab(tab.type)}
|
||||
>
|
||||
<span>{tab.name}</span>
|
||||
<div class="badge badge-sm">{tab.count}</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={activeTab() === ActiveTab.proxyProviders}>
|
||||
<div
|
||||
class={twMerge(
|
||||
'grid grid-cols-1 place-items-start gap-2',
|
||||
renderProxiesInTwoColumns() ? 'sm:grid-cols-2' : 'sm:grid-cols-1',
|
||||
)}
|
||||
>
|
||||
<For each={proxyProviders()}>
|
||||
{(proxyProvider) => {
|
||||
const sortedProxyNames = createMemo(() =>
|
||||
sortProxiesByOrderingType(
|
||||
proxyProvider.proxies.map((i) => i.name) ?? [],
|
||||
proxiesOrderingType(),
|
||||
),
|
||||
)
|
||||
<Show when={activeTab() === ActiveTab.proxyProviders}>
|
||||
<Button
|
||||
class="btn btn-circle btn-sm"
|
||||
disabled={isAllProviderUpdating()}
|
||||
onClick={(e) => onUpdateAllProviderClick(e)}
|
||||
icon={
|
||||
<IconReload
|
||||
class={twMerge(
|
||||
isAllProviderUpdating() && 'animate-spin text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
const title = (
|
||||
<>
|
||||
<div class="flex items-center justify-between pr-8">
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{proxyProvider.name}</span>
|
||||
<div class="badge badge-sm">
|
||||
{proxyProvider.proxies.length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<Button
|
||||
class="btn-circle btn-primary btn-sm"
|
||||
onClick={() => proxiesSettingsModalRef?.showModal()}
|
||||
icon={<IconSettings />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
class="btn btn-circle btn-sm"
|
||||
disabled={updatingMap()[proxyProvider.name]}
|
||||
onClick={(e) =>
|
||||
onUpdateProxyProviderClick(e, proxyProvider.name)
|
||||
}
|
||||
icon={
|
||||
<IconReload
|
||||
class={twMerge(
|
||||
updatingMap()[proxyProvider.name] &&
|
||||
'animate-spin text-success',
|
||||
)}
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<Show when={activeTab() === ActiveTab.proxies}>
|
||||
<div
|
||||
class={twMerge(
|
||||
'grid grid-cols-1 place-items-start gap-2',
|
||||
renderProxiesInTwoColumns()
|
||||
? 'sm:grid-cols-2'
|
||||
: 'sm:grid-cols-1',
|
||||
)}
|
||||
>
|
||||
<For each={renderProxies()}>
|
||||
{(proxyGroup) => {
|
||||
const sortedProxyNames = createMemo(() =>
|
||||
filterProxiesByAvailability(
|
||||
sortProxiesByOrderingType(
|
||||
proxyGroup.all ?? [],
|
||||
proxiesOrderingType(),
|
||||
),
|
||||
hideUnAvailableProxies(),
|
||||
),
|
||||
)
|
||||
|
||||
const title = (
|
||||
<>
|
||||
<div class="flex items-center justify-between pr-8">
|
||||
<div class="flex items-center">
|
||||
<Show when={proxyGroup.icon}>
|
||||
<img
|
||||
src={proxyGroup.icon}
|
||||
style={{
|
||||
height: `${iconHeight()}px`,
|
||||
'margin-right': `${iconMarginRight()}px`,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Show>
|
||||
<span>{proxyGroup.name}</span>
|
||||
<div class="badge badge-sm ml-2">
|
||||
{proxyGroup.all?.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
class="btn btn-circle btn-sm"
|
||||
class="btn-circle btn-sm"
|
||||
disabled={
|
||||
proxyProviderLatencyTestingMap()[proxyProvider.name]
|
||||
proxyGroupLatencyTestingMap()[proxyGroup.name]
|
||||
}
|
||||
onClick={(e) =>
|
||||
onProxyProviderLatencyTestClick(
|
||||
e,
|
||||
proxyProvider.name,
|
||||
)
|
||||
onProxyGroupLatencyTestClick(e, proxyGroup.name)
|
||||
}
|
||||
icon={
|
||||
<IconBrandSpeedtest
|
||||
class={twMerge(
|
||||
proxyProviderLatencyTestingMap()[
|
||||
proxyProvider.name
|
||||
proxyGroupLatencyTestingMap()[
|
||||
proxyGroup.name
|
||||
] && 'animate-pulse text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SubscriptionInfo
|
||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||
/>
|
||||
<div class="flex items-center justify-between text-sm text-slate-500">
|
||||
<span>
|
||||
{proxyGroup.type}{' '}
|
||||
{proxyGroup.now?.length > 0 &&
|
||||
` :: ${proxyGroup.now}`}
|
||||
</span>
|
||||
<span>
|
||||
{byteSize(
|
||||
speedGroupByName()[proxyGroup.name] ?? 0,
|
||||
).toString()}
|
||||
/s
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxyProvider.vehicleType} :: {t('updated')}{' '}
|
||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||
</div>
|
||||
<Show when={!collapsedMap()[proxyGroup.name]}>
|
||||
<ProxyNodePreview
|
||||
proxyNameList={sortedProxyNames()}
|
||||
now={proxyGroup.now}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
|
||||
<Show when={!collapsedMap()[proxyProvider.name]}>
|
||||
<ProxyNodePreview proxyNameList={sortedProxyNames()} />
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<Collapse
|
||||
isOpen={collapsedMap()[proxyGroup.name]}
|
||||
title={title}
|
||||
onCollapse={(val) =>
|
||||
setCollapsedMapByKey(proxyGroup.name, val)
|
||||
}
|
||||
>
|
||||
<For each={sortedProxyNames()}>
|
||||
{(proxyName) => (
|
||||
<ProxyNodeCard
|
||||
proxyName={proxyName}
|
||||
isSelected={proxyGroup.now === proxyName}
|
||||
onClick={() =>
|
||||
void selectProxyInGroup(proxyGroup, proxyName)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</Collapse>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
isOpen={collapsedMap()[proxyProvider.name]}
|
||||
title={title}
|
||||
onCollapse={(val) =>
|
||||
setCollapsedMapByKey(proxyProvider.name, val)
|
||||
}
|
||||
>
|
||||
<For each={sortedProxyNames()}>
|
||||
{(proxyName) => <ProxyNodeCard proxyName={proxyName} />}
|
||||
</For>
|
||||
</Collapse>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={activeTab() === ActiveTab.proxyProviders}>
|
||||
<div
|
||||
class={twMerge(
|
||||
'grid grid-cols-1 place-items-start gap-2',
|
||||
renderProxiesInTwoColumns()
|
||||
? 'sm:grid-cols-2'
|
||||
: 'sm:grid-cols-1',
|
||||
)}
|
||||
>
|
||||
<For each={proxyProviders()}>
|
||||
{(proxyProvider) => {
|
||||
const sortedProxyNames = createMemo(() =>
|
||||
sortProxiesByOrderingType(
|
||||
proxyProvider.proxies.map((i) => i.name) ?? [],
|
||||
proxiesOrderingType(),
|
||||
),
|
||||
)
|
||||
|
||||
const title = (
|
||||
<>
|
||||
<div class="flex items-center justify-between pr-8">
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{proxyProvider.name}</span>
|
||||
<div class="badge badge-sm">
|
||||
{proxyProvider.proxies.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
class="btn btn-circle btn-sm"
|
||||
disabled={updatingMap()[proxyProvider.name]}
|
||||
onClick={(e) =>
|
||||
onUpdateProxyProviderClick(e, proxyProvider.name)
|
||||
}
|
||||
icon={
|
||||
<IconReload
|
||||
class={twMerge(
|
||||
updatingMap()[proxyProvider.name] &&
|
||||
'animate-spin text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Button
|
||||
class="btn btn-circle btn-sm"
|
||||
disabled={
|
||||
proxyProviderLatencyTestingMap()[
|
||||
proxyProvider.name
|
||||
]
|
||||
}
|
||||
onClick={(e) =>
|
||||
onProxyProviderLatencyTestClick(
|
||||
e,
|
||||
proxyProvider.name,
|
||||
)
|
||||
}
|
||||
icon={
|
||||
<IconBrandSpeedtest
|
||||
class={twMerge(
|
||||
proxyProviderLatencyTestingMap()[
|
||||
proxyProvider.name
|
||||
] && 'animate-pulse text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</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>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
isOpen={collapsedMap()[proxyProvider.name]}
|
||||
title={title}
|
||||
onCollapse={(val) =>
|
||||
setCollapsedMapByKey(proxyProvider.name, val)
|
||||
}
|
||||
>
|
||||
<For each={sortedProxyNames()}>
|
||||
{(proxyName) => <ProxyNodeCard proxyName={proxyName} />}
|
||||
</For>
|
||||
</Collapse>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<ProxiesSettingsModal ref={(el) => (proxiesSettingsModalRef = el)} />
|
||||
</div>
|
||||
|
||||
<ProxiesSettingsModal ref={(el) => (proxiesSettingsModalRef = el)} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import { createVirtualizer } from '@tanstack/solid-virtual'
|
||||
import { matchSorter } from 'match-sorter'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { Button } from '~/components'
|
||||
import DocumentTitle from '~/components/DocumentTitle'
|
||||
import { useStringBooleanMap } from '~/helpers'
|
||||
import { useI18n } from '~/i18n'
|
||||
import { endpoint, formatTimeFromNow, useRules } from '~/signals'
|
||||
@ -124,147 +125,155 @@ export default () => {
|
||||
const ruleProviderVirtualizerItems = ruleProviderVirtualizer.getVirtualItems()
|
||||
|
||||
return (
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="tabs-boxed tabs gap-2">
|
||||
<For each={tabs()}>
|
||||
{(tab) => (
|
||||
<button
|
||||
class={twMerge(
|
||||
activeTab() === tab.type && 'tab-active',
|
||||
'tab-sm md:tab-md tab gap-2 px-2',
|
||||
)}
|
||||
onClick={() => setActiveTab(tab.type)}
|
||||
>
|
||||
<span>{tab.name}</span>
|
||||
<div class="badge badge-sm">{tab.count}</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
<>
|
||||
<DocumentTitle>{t('rules')}</DocumentTitle>
|
||||
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="tabs-boxed tabs gap-2">
|
||||
<For each={tabs()}>
|
||||
{(tab) => (
|
||||
<button
|
||||
class={twMerge(
|
||||
activeTab() === tab.type && 'tab-active',
|
||||
'tab-sm md:tab-md tab gap-2 px-2',
|
||||
)}
|
||||
onClick={() => setActiveTab(tab.type)}
|
||||
>
|
||||
<span>{tab.name}</span>
|
||||
<div class="badge badge-sm">{tab.count}</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<Show when={activeTab() === ActiveTab.ruleProviders}>
|
||||
<Button
|
||||
class="btn btn-circle btn-sm"
|
||||
disabled={allProviderIsUpdating()}
|
||||
onClick={(e) => onUpdateAllProviderClick(e)}
|
||||
icon={
|
||||
<IconReload
|
||||
class={twMerge(
|
||||
allProviderIsUpdating() && 'animate-spin text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Show when={activeTab() === ActiveTab.ruleProviders}>
|
||||
<Button
|
||||
class="btn btn-circle btn-sm"
|
||||
disabled={allProviderIsUpdating()}
|
||||
onClick={(e) => onUpdateAllProviderClick(e)}
|
||||
icon={
|
||||
<IconReload
|
||||
class={twMerge(
|
||||
allProviderIsUpdating() && 'animate-spin text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
<input
|
||||
class="input input-sm input-bordered input-primary"
|
||||
placeholder={t('search')}
|
||||
value={globalFilter()}
|
||||
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<input
|
||||
class="input input-sm input-bordered input-primary"
|
||||
placeholder={t('search')}
|
||||
value={globalFilter()}
|
||||
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
||||
/>
|
||||
<div
|
||||
ref={(ref) => (scrollElementRef = ref)}
|
||||
class="flex-1 overflow-y-auto"
|
||||
>
|
||||
<Show when={activeTab() === ActiveTab.rules}>
|
||||
<div
|
||||
class="relative"
|
||||
style={{ height: `${ruleVirtualizer.getTotalSize()}px` }}
|
||||
>
|
||||
{ruleVirtualizerItems.map((virtualizerItem) => {
|
||||
const rule = filteredRules().find(
|
||||
(rule) => getRuleItemKey(rule) === virtualizerItem.key,
|
||||
)!
|
||||
|
||||
<div
|
||||
ref={(ref) => (scrollElementRef = ref)}
|
||||
class="flex-1 overflow-y-auto"
|
||||
>
|
||||
<Show when={activeTab() === ActiveTab.rules}>
|
||||
<div
|
||||
class="relative"
|
||||
style={{ height: `${ruleVirtualizer.getTotalSize()}px` }}
|
||||
>
|
||||
{ruleVirtualizerItems.map((virtualizerItem) => {
|
||||
const rule = filteredRules().find(
|
||||
(rule) => getRuleItemKey(rule) === virtualizerItem.key,
|
||||
)!
|
||||
return (
|
||||
<div
|
||||
ref={(el) =>
|
||||
onMount(() => ruleVirtualizer.measureElement(el))
|
||||
}
|
||||
data-index={virtualizerItem.index}
|
||||
class="absolute inset-x-0 top-0 pb-2 last:pb-0"
|
||||
style={{
|
||||
transform: `translateY(${virtualizerItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<div class="card card-bordered card-compact bg-base-200 p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="break-all">{rule.payload}</span>
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={(el) =>
|
||||
onMount(() => ruleVirtualizer.measureElement(el))
|
||||
}
|
||||
data-index={virtualizerItem.index}
|
||||
class="absolute inset-x-0 top-0 pb-2 last:pb-0"
|
||||
style={{
|
||||
transform: `translateY(${virtualizerItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<div class="card card-bordered card-compact bg-base-200 p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="break-all">{rule.payload}</span>
|
||||
<Show when={rule.size !== -1}>
|
||||
<div class="badge badge-sm">{rule.size}</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Show when={rule.size !== -1}>
|
||||
<div class="badge badge-sm">{rule.size}</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-slate-500">
|
||||
{rule.type} :: {rule.proxy}
|
||||
<div class="text-xs text-slate-500">
|
||||
{rule.type} :: {rule.proxy}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Show>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={activeTab() === ActiveTab.ruleProviders}>
|
||||
<div
|
||||
class="relative"
|
||||
style={{ height: `${ruleProviderVirtualizer.getTotalSize()}px` }}
|
||||
>
|
||||
{ruleProviderVirtualizerItems.map((virtualizerItem) => {
|
||||
const ruleProvider = ruleProviders().find(
|
||||
(ruleProvider) =>
|
||||
getRuleProviderItemKey(ruleProvider) === virtualizerItem.key,
|
||||
)!
|
||||
<Show when={activeTab() === ActiveTab.ruleProviders}>
|
||||
<div
|
||||
class="relative"
|
||||
style={{ height: `${ruleProviderVirtualizer.getTotalSize()}px` }}
|
||||
>
|
||||
{ruleProviderVirtualizerItems.map((virtualizerItem) => {
|
||||
const ruleProvider = ruleProviders().find(
|
||||
(ruleProvider) =>
|
||||
getRuleProviderItemKey(ruleProvider) ===
|
||||
virtualizerItem.key,
|
||||
)!
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={(el) =>
|
||||
onMount(() => ruleProviderVirtualizer.measureElement(el))
|
||||
}
|
||||
data-index={virtualizerItem.index}
|
||||
class="absolute inset-x-0 top-0 pb-2 last:pb-0"
|
||||
style={{
|
||||
transform: `translateY(${virtualizerItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<div class="card card-bordered card-compact bg-base-200 p-4">
|
||||
<div class="flex items-center gap-2 pr-8">
|
||||
<span class="break-all">{ruleProvider.name}</span>
|
||||
<div class="badge badge-sm">{ruleProvider.ruleCount}</div>
|
||||
return (
|
||||
<div
|
||||
ref={(el) =>
|
||||
onMount(() => ruleProviderVirtualizer.measureElement(el))
|
||||
}
|
||||
data-index={virtualizerItem.index}
|
||||
class="absolute inset-x-0 top-0 pb-2 last:pb-0"
|
||||
style={{
|
||||
transform: `translateY(${virtualizerItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<div class="card card-bordered card-compact bg-base-200 p-4">
|
||||
<div class="flex items-center gap-2 pr-8">
|
||||
<span class="break-all">{ruleProvider.name}</span>
|
||||
<div class="badge badge-sm">
|
||||
{ruleProvider.ruleCount}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-slate-500">
|
||||
{ruleProvider.vehicleType} / {ruleProvider.behavior} /
|
||||
{t('updated')}{' '}
|
||||
{formatTimeFromNow(ruleProvider.updatedAt)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4"
|
||||
disabled={updatingMap()[ruleProvider.name]}
|
||||
onClick={(e) =>
|
||||
onUpdateProviderClick(e, ruleProvider.name)
|
||||
}
|
||||
icon={
|
||||
<IconReload
|
||||
class={twMerge(
|
||||
updatingMap()[ruleProvider.name] &&
|
||||
'animate-spin text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-slate-500">
|
||||
{ruleProvider.vehicleType} / {ruleProvider.behavior} /
|
||||
{t('updated')} {formatTimeFromNow(ruleProvider.updatedAt)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
class="btn-circle btn-sm absolute right-2 top-2 mr-2 h-4"
|
||||
disabled={updatingMap()[ruleProvider.name]}
|
||||
onClick={(e) =>
|
||||
onUpdateProviderClick(e, ruleProvider.name)
|
||||
}
|
||||
icon={
|
||||
<IconReload
|
||||
class={twMerge(
|
||||
updatingMap()[ruleProvider.name] &&
|
||||
'animate-spin text-success',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Show>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import { toast } from 'solid-toast'
|
||||
import { v4 as uuid } from 'uuid'
|
||||
import { z } from 'zod'
|
||||
import { Button } from '~/components'
|
||||
import DocumentTitle from '~/components/DocumentTitle'
|
||||
import { transformEndpointURL } from '~/helpers'
|
||||
import { useI18n } from '~/i18n'
|
||||
import {
|
||||
@ -140,71 +141,75 @@ export default () => {
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="mx-auto flex max-w-screen-sm flex-col items-center gap-4 py-10">
|
||||
<form class="contents" use:form={form}>
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<div class="flex-1">
|
||||
<label class="label">
|
||||
<span class="label-text">{t('endpointURL')}</span>
|
||||
</label>
|
||||
<>
|
||||
<DocumentTitle>{t('setup')}</DocumentTitle>
|
||||
|
||||
<input
|
||||
name="url"
|
||||
type="url"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="http(s)://{hostname}:{port}"
|
||||
list="defaultEndpoints"
|
||||
/>
|
||||
<div class="mx-auto flex max-w-screen-sm flex-col items-center gap-4 py-10">
|
||||
<form class="contents" use:form={form}>
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<div class="flex-1">
|
||||
<label class="label">
|
||||
<span class="label-text">{t('endpointURL')}</span>
|
||||
</label>
|
||||
|
||||
<datalist id="defaultEndpoints">
|
||||
<option value="http://127.0.0.1:9090" />
|
||||
<Show when={window.location.origin !== 'http://127.0.0.1:9090'}>
|
||||
<option value={window.location.origin} />
|
||||
</Show>
|
||||
</datalist>
|
||||
</div>
|
||||
<input
|
||||
name="url"
|
||||
type="url"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="http(s)://{hostname}:{port}"
|
||||
list="defaultEndpoints"
|
||||
/>
|
||||
|
||||
<div class="flex-1">
|
||||
<label class="label">
|
||||
<span class="label-text">{t('secret')}</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
name="secret"
|
||||
type="password"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="secret"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" class="btn-primary uppercase">
|
||||
{t('add')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="grid w-full grid-cols-2 gap-4">
|
||||
<For each={endpointList()}>
|
||||
{({ id, url }) => (
|
||||
<div
|
||||
class="badge badge-info flex w-full cursor-pointer items-center justify-between gap-4 py-4"
|
||||
onClick={() => onEndpointSelect(id)}
|
||||
>
|
||||
<span class="truncate">{url}</span>
|
||||
|
||||
<Button
|
||||
class="btn-circle btn-ghost btn-xs text-white"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onRemove(id)
|
||||
}}
|
||||
>
|
||||
<IconX />
|
||||
</Button>
|
||||
<datalist id="defaultEndpoints">
|
||||
<option value="http://127.0.0.1:9090" />
|
||||
<Show when={window.location.origin !== 'http://127.0.0.1:9090'}>
|
||||
<option value={window.location.origin} />
|
||||
</Show>
|
||||
</datalist>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
|
||||
<div class="flex-1">
|
||||
<label class="label">
|
||||
<span class="label-text">{t('secret')}</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
name="secret"
|
||||
type="password"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="secret"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" class="btn-primary uppercase">
|
||||
{t('add')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="grid w-full grid-cols-2 gap-4">
|
||||
<For each={endpointList()}>
|
||||
{({ id, url }) => (
|
||||
<div
|
||||
class="badge badge-info flex w-full cursor-pointer items-center justify-between gap-4 py-4"
|
||||
onClick={() => onEndpointSelect(id)}
|
||||
>
|
||||
<span class="truncate">{url}</span>
|
||||
|
||||
<Button
|
||||
class="btn-circle btn-ghost btn-xs text-white"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onRemove(id)
|
||||
}}
|
||||
>
|
||||
<IconX />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user