mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15: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'
|
} from '@tanstack/solid-table'
|
||||||
import byteSize from 'byte-size'
|
import byteSize from 'byte-size'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
|
import { uniq } from 'lodash'
|
||||||
import { For, Index, createMemo, createSignal } from 'solid-js'
|
import { For, Index, createMemo, createSignal } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { closeAllConnectionsAPI, closeSingleConnectionAPI } from '~/apis'
|
import { closeAllConnectionsAPI, closeSingleConnectionAPI } from '~/apis'
|
||||||
@ -39,6 +40,7 @@ import {
|
|||||||
import { CONNECTIONS_TABLE_ACCESSOR_KEY, MODAL } from '~/constants'
|
import { CONNECTIONS_TABLE_ACCESSOR_KEY, MODAL } from '~/constants'
|
||||||
import { formatTimeFromNow } from '~/helpers'
|
import { formatTimeFromNow } from '~/helpers'
|
||||||
import {
|
import {
|
||||||
|
allConnections,
|
||||||
clientSourceIPTags,
|
clientSourceIPTags,
|
||||||
connectionsTableColumnOrder,
|
connectionsTableColumnOrder,
|
||||||
connectionsTableColumnVisibility,
|
connectionsTableColumnVisibility,
|
||||||
@ -286,6 +288,12 @@ export default () => {
|
|||||||
getCoreRowModel: getCoreRowModel(),
|
getCoreRowModel: getCoreRowModel(),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const sourceIPHeader = createMemo(() =>
|
||||||
|
table
|
||||||
|
.getFlatHeaders()
|
||||||
|
.find(({ id }) => id === CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP),
|
||||||
|
)
|
||||||
|
|
||||||
const tabs = createMemo(() => [
|
const tabs = createMemo(() => [
|
||||||
{
|
{
|
||||||
type: ActiveTab.activeConnections,
|
type: ActiveTab.activeConnections,
|
||||||
@ -302,7 +310,8 @@ export default () => {
|
|||||||
return (
|
return (
|
||||||
<div class="flex h-full flex-col gap-2">
|
<div class="flex h-full flex-col gap-2">
|
||||||
<div class="flex w-full flex-wrap items-center 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()}>
|
<Index each={tabs()}>
|
||||||
{(tab) => (
|
{(tab) => (
|
||||||
<button
|
<button
|
||||||
@ -319,6 +328,24 @@ export default () => {
|
|||||||
</Index>
|
</Index>
|
||||||
</div>
|
</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">
|
<div class="join flex w-full items-center md:flex-1">
|
||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
|
Loading…
Reference in New Issue
Block a user