mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat(connection): filter client sourceIP with tag name support, closes #264
This commit is contained in:
parent
365cde39ff
commit
8df4d7a7e9
@ -47,9 +47,9 @@ const TagClientSourceIPWithNameForm: Component = () => {
|
|||||||
|
|
||||||
const [t] = useI18n()
|
const [t] = useI18n()
|
||||||
|
|
||||||
const { form } = createForm<z.infer<typeof schema>>({
|
const { form, reset } = createForm<z.infer<typeof schema>>({
|
||||||
extend: validator({ schema }),
|
extend: validator({ schema }),
|
||||||
onSubmit: ({ tagName, sourceIP }) =>
|
onSubmit: ({ tagName, sourceIP }) => {
|
||||||
setClientSourceIPTags((tags) => {
|
setClientSourceIPTags((tags) => {
|
||||||
if (
|
if (
|
||||||
tags.some(
|
tags.some(
|
||||||
@ -60,7 +60,10 @@ const TagClientSourceIPWithNameForm: Component = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return [...tags, { tagName, sourceIP }]
|
return [...tags, { tagName, sourceIP }]
|
||||||
}),
|
})
|
||||||
|
|
||||||
|
reset()
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -220,12 +223,12 @@ export const ConnectionsSettingsModal = (props: {
|
|||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
<TagClientSourceIPWithNameForm />
|
<TagClientSourceIPWithNameForm />
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<For each={clientSourceIPTags()}>
|
<For each={clientSourceIPTags()}>
|
||||||
{({ tagName, sourceIP }) => (
|
{({ tagName, sourceIP }) => (
|
||||||
<div class="badge badge-primary w-full items-center gap-2 py-4">
|
<div class="badge badge-primary w-full items-center justify-between gap-2 py-4">
|
||||||
<span class="truncate">
|
<span class="truncate">
|
||||||
{tagName}({sourceIP})
|
{tagName} ({sourceIP})
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
@ -19,7 +19,7 @@ const useLanguage = () => {
|
|||||||
return { lang, setLang }
|
return { lang, setLang }
|
||||||
}
|
}
|
||||||
|
|
||||||
const I18nUpdator: ParentComponent = (props) => {
|
const I18nUpdater: ParentComponent = (props) => {
|
||||||
const { setLang } = useLanguage()
|
const { setLang } = useLanguage()
|
||||||
const [, { locale }] = useI18n()
|
const [, { locale }] = useI18n()
|
||||||
|
|
||||||
@ -37,7 +37,7 @@ export const I18nProvider: ParentComponent = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<I18nContext.Provider value={value}>
|
<I18nContext.Provider value={value}>
|
||||||
<I18nUpdator>{props.children}</I18nUpdator>
|
<I18nUpdater>{props.children}</I18nUpdater>
|
||||||
</I18nContext.Provider>
|
</I18nContext.Provider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -29,7 +29,14 @@ import {
|
|||||||
import byteSize from 'byte-size'
|
import byteSize from 'byte-size'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { uniq } from 'lodash'
|
import { uniq } from 'lodash'
|
||||||
import { For, Index, createMemo, createSignal } from 'solid-js'
|
import {
|
||||||
|
For,
|
||||||
|
Index,
|
||||||
|
createEffect,
|
||||||
|
createMemo,
|
||||||
|
createSignal,
|
||||||
|
on,
|
||||||
|
} from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { closeAllConnectionsAPI, closeSingleConnectionAPI } from '~/apis'
|
import { closeAllConnectionsAPI, closeSingleConnectionAPI } from '~/apis'
|
||||||
import {
|
import {
|
||||||
@ -288,10 +295,22 @@ export default () => {
|
|||||||
getCoreRowModel: getCoreRowModel(),
|
getCoreRowModel: getCoreRowModel(),
|
||||||
})
|
})
|
||||||
|
|
||||||
const sourceIPHeader = createMemo(() =>
|
const sourceIPHeader = table
|
||||||
table
|
.getFlatHeaders()
|
||||||
.getFlatHeaders()
|
.find(({ id }) => id === CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP)
|
||||||
.find(({ id }) => id === CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP),
|
|
||||||
|
const [sourceIPFilter, setSourceIPFilter] = createSignal('')
|
||||||
|
|
||||||
|
createEffect(
|
||||||
|
on(sourceIPFilter, () => {
|
||||||
|
const tagged = clientSourceIPTags().find(
|
||||||
|
(tag) => tag.sourceIP === sourceIPFilter(),
|
||||||
|
)
|
||||||
|
|
||||||
|
sourceIPHeader?.column.setFilterValue(
|
||||||
|
tagged ? tagged.tagName : sourceIPFilter(),
|
||||||
|
)
|
||||||
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
const tabs = createMemo(() => [
|
const tabs = createMemo(() => [
|
||||||
@ -329,16 +348,20 @@ export default () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<select
|
<select
|
||||||
class="select join-item select-bordered select-primary"
|
class="join-item select select-bordered select-primary"
|
||||||
onChange={(e) =>
|
onChange={(e) => setSourceIPFilter(e.target.value)}
|
||||||
sourceIPHeader()?.column.setFilterValue(e.target.value)
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<option value="">{t('all')}</option>
|
<option value="">{t('all')}</option>
|
||||||
|
|
||||||
<Index
|
<Index
|
||||||
each={uniq(
|
each={uniq(
|
||||||
allConnections().map(({ metadata: { sourceIP } }) => sourceIP),
|
allConnections().map(({ metadata: { sourceIP } }) => {
|
||||||
|
const tagged = clientSourceIPTags().find(
|
||||||
|
(tag) => tag.sourceIP === sourceIP,
|
||||||
|
)
|
||||||
|
|
||||||
|
return tagged ? tagged.tagName : sourceIP
|
||||||
|
}),
|
||||||
).sort()}
|
).sort()}
|
||||||
>
|
>
|
||||||
{(sourceIP) => <option value={sourceIP()}>{sourceIP()}</option>}
|
{(sourceIP) => <option value={sourceIP()}>{sourceIP()}</option>}
|
||||||
|
Loading…
Reference in New Issue
Block a user