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

View File

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

View File

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