feat(connection): filter connections with sourceIP, closes #246

This commit is contained in:
kunish 2023-09-22 00:56:18 +08:00
parent bfdb2c9e96
commit ffa244760f
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430

View File

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