feat: show current page title, closes #474

This commit is contained in:
kunish 2024-10-10 00:49:58 +08:00
parent 443cb251ba
commit 9c76d7ff76
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
16 changed files with 4729 additions and 2143 deletions

1
auto-imports.d.ts vendored
View File

@ -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']

View File

@ -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>

View File

@ -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"
}

File diff suppressed because it is too large Load Diff

View 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

View File

@ -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)}>

View File

@ -1,5 +1,6 @@
export default {
add: 'Add',
setup: 'Setup',
overview: 'Overview',
proxies: 'Proxies',
proxiesSettings: 'Proxies Settings',

View File

@ -2,6 +2,7 @@ import { Dict } from '~/i18n/dict'
export default {
add: '添加',
setup: '设置',
overview: '概览',
proxies: '代理',
proxiesSettings: '代理设置',

View File

@ -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>

View File

@ -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>
</>
)
}

View File

@ -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>
</>
)
}

View File

@ -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>
</>
)
}

View File

@ -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>
</>
)
}

View File

@ -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>
</>
)
}

View File

@ -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>
</>
)
}

View File

@ -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>
</>
)
}