feat(connection): filter client sourceIP with tag name support, closes #264

This commit is contained in:
kunish 2023-09-22 13:45:30 +08:00
parent 365cde39ff
commit 8df4d7a7e9
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 44 additions and 18 deletions

View File

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

View File

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

View File

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