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

src/components/ConnectionsSettingsModal.tsx

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

src/i18n/index.tsx

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

src/pages/Connections.tsx

@@ -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
+  const sourceIPHeader = table
     .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(() => [
@@ -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>}