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 { form } = createForm<z.infer<typeof schema>>({
|
||||
const { form, reset } = createForm<z.infer<typeof schema>>({
|
||||
extend: validator({ schema }),
|
||||
onSubmit: ({ tagName, sourceIP }) =>
|
||||
onSubmit: ({ tagName, sourceIP }) => {
|
||||
setClientSourceIPTags((tags) => {
|
||||
if (
|
||||
tags.some(
|
||||
@ -60,7 +60,10 @@ const TagClientSourceIPWithNameForm: Component = () => {
|
||||
}
|
||||
|
||||
return [...tags, { tagName, sourceIP }]
|
||||
}),
|
||||
})
|
||||
|
||||
reset()
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
@ -220,12 +223,12 @@ export const ConnectionsSettingsModal = (props: {
|
||||
<div class="flex flex-col gap-4">
|
||||
<TagClientSourceIPWithNameForm />
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="flex flex-col gap-2">
|
||||
<For each={clientSourceIPTags()}>
|
||||
{({ 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">
|
||||
{tagName}({sourceIP})
|
||||
{tagName} ({sourceIP})
|
||||
</span>
|
||||
|
||||
<Button
|
||||
|
@ -19,7 +19,7 @@ const useLanguage = () => {
|
||||
return { lang, setLang }
|
||||
}
|
||||
|
||||
const I18nUpdator: ParentComponent = (props) => {
|
||||
const I18nUpdater: ParentComponent = (props) => {
|
||||
const { setLang } = useLanguage()
|
||||
const [, { locale }] = useI18n()
|
||||
|
||||
@ -37,7 +37,7 @@ export const I18nProvider: ParentComponent = (props) => {
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={value}>
|
||||
<I18nUpdator>{props.children}</I18nUpdator>
|
||||
<I18nUpdater>{props.children}</I18nUpdater>
|
||||
</I18nContext.Provider>
|
||||
)
|
||||
}
|
||||
|
@ -29,7 +29,14 @@ import {
|
||||
import byteSize from 'byte-size'
|
||||
import dayjs from 'dayjs'
|
||||
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 { closeAllConnectionsAPI, closeSingleConnectionAPI } from '~/apis'
|
||||
import {
|
||||
@ -288,10 +295,22 @@ export default () => {
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
})
|
||||
|
||||
const sourceIPHeader = createMemo(() =>
|
||||
table
|
||||
.getFlatHeaders()
|
||||
.find(({ id }) => id === CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP),
|
||||
const sourceIPHeader = table
|
||||
.getFlatHeaders()
|
||||
.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(() => [
|
||||
@ -329,16 +348,20 @@ export default () => {
|
||||
</div>
|
||||
|
||||
<select
|
||||
class="select join-item select-bordered select-primary"
|
||||
onChange={(e) =>
|
||||
sourceIPHeader()?.column.setFilterValue(e.target.value)
|
||||
}
|
||||
class="join-item select select-bordered select-primary"
|
||||
onChange={(e) => setSourceIPFilter(e.target.value)}
|
||||
>
|
||||
<option value="">{t('all')}</option>
|
||||
|
||||
<Index
|
||||
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()}
|
||||
>
|
||||
{(sourceIP) => <option value={sourceIP()}>{sourceIP()}</option>}
|
||||
|
Loading…
Reference in New Issue
Block a user