mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat(connection): filter connections with sourceIP, closes #246
This commit is contained in:
parent
bfdb2c9e96
commit
ffa244760f
@ -28,6 +28,7 @@ import {
|
||||
} from '@tanstack/solid-table'
|
||||
import byteSize from 'byte-size'
|
||||
import dayjs from 'dayjs'
|
||||
import { uniq } from 'lodash'
|
||||
import { For, Index, createMemo, createSignal } from 'solid-js'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { closeAllConnectionsAPI, closeSingleConnectionAPI } from '~/apis'
|
||||
@ -39,6 +40,7 @@ import {
|
||||
import { CONNECTIONS_TABLE_ACCESSOR_KEY, MODAL } from '~/constants'
|
||||
import { formatTimeFromNow } from '~/helpers'
|
||||
import {
|
||||
allConnections,
|
||||
clientSourceIPTags,
|
||||
connectionsTableColumnOrder,
|
||||
connectionsTableColumnVisibility,
|
||||
@ -286,6 +288,12 @@ export default () => {
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
})
|
||||
|
||||
const sourceIPHeader = createMemo(() =>
|
||||
table
|
||||
.getFlatHeaders()
|
||||
.find(({ id }) => id === CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP),
|
||||
)
|
||||
|
||||
const tabs = createMemo(() => [
|
||||
{
|
||||
type: ActiveTab.activeConnections,
|
||||
@ -302,7 +310,8 @@ 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="tabs-boxed tabs gap-2">
|
||||
<div class="join items-center">
|
||||
<div class="tabs-boxed join-item tabs items-center gap-2 self-stretch">
|
||||
<Index each={tabs()}>
|
||||
{(tab) => (
|
||||
<button
|
||||
@ -319,6 +328,24 @@ export default () => {
|
||||
</Index>
|
||||
</div>
|
||||
|
||||
<select
|
||||
class="select join-item select-bordered select-primary"
|
||||
onChange={(e) =>
|
||||
sourceIPHeader()?.column.setFilterValue(e.target.value)
|
||||
}
|
||||
>
|
||||
<option value="">{t('all')}</option>
|
||||
|
||||
<Index
|
||||
each={uniq(
|
||||
allConnections().map(({ metadata: { sourceIP } }) => sourceIP),
|
||||
).sort()}
|
||||
>
|
||||
{(sourceIP) => <option value={sourceIP()}>{sourceIP()}</option>}
|
||||
</Index>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="join flex w-full items-center md:flex-1">
|
||||
<input
|
||||
type="search"
|
||||
|
Loading…
Reference in New Issue
Block a user