From 7336948ad3a5c422bd20b46e99ae056f8b4b53d9 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Tue, 29 Aug 2023 21:39:52 +0800
Subject: [PATCH] feat: update connection columns

---
 src/pages/Connections.tsx | 53 +++++++++++++++++----------------------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index 6517ff7..25a6a7f 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -46,12 +46,6 @@ export default () => {
 
   const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
 
-  const defaultSorting = Object.freeze({
-    id: 'ID',
-    desc: true,
-  })
-  const [sorting, setSorting] = createSignal<SortingState>([defaultSorting])
-
   const columns: ColumnDef<Connection>[] = [
     {
       id: 'close',
@@ -81,40 +75,35 @@ export default () => {
       accessorFn: (row) => row.id,
     },
     {
-      accessorKey: 'Network',
-      accessorFn: (row) => row.metadata.network,
+      accessorKey: 'Type',
+      accessorFn: (row) => `${row.metadata.type}(${row.metadata.network})`,
     },
     {
-      accessorKey: 'Download',
-      accessorFn: (row) => byteSize(row.download),
-    },
-    {
-      accessorKey: 'Upload',
-      accessorFn: (row) => byteSize(row.upload),
-    },
-    {
-      accessorKey: 'Rule',
-      accessorFn: (row) => row.rule,
-    },
-    {
-      accessorKey: 'Chains',
-      accessorFn: (row) => row.chains.join(' -> '),
-    },
-    {
-      accessorKey: 'Remote Destination',
-      accessorFn: (row) => row.metadata.remoteDestination,
+      accessorKey: 'Process',
+      accessorFn: (row) => row.metadata.process || '-',
     },
     {
       accessorKey: 'Host',
       accessorFn: (row) => row.metadata.host,
     },
     {
-      accessorKey: 'DNS Mode',
-      accessorFn: (row) => row.metadata.dnsMode,
+      accessorKey: 'Rule',
+      accessorFn: (row) =>
+        !row.rulePayload ? row.rule : `${row.rule} :: ${row.rulePayload}`,
     },
     {
-      accessorKey: 'Type',
-      accessorFn: (row) => row.metadata.type,
+      accessorKey: 'Chains',
+      accessorFn: (row) => row.chains.join(' -> '),
+    },
+    {
+      accessorKey: 'Download',
+      accessorFn: (row) => byteSize(row.download),
+      sortingFn: (a, b) => a.original.download - b.original.download,
+    },
+    {
+      accessorKey: 'Upload',
+      accessorFn: (row) => byteSize(row.upload),
+      sortingFn: (a, b) => a.original.upload - b.original.upload,
     },
     {
       accessorKey: 'Source',
@@ -132,6 +121,10 @@ export default () => {
     },
   ]
 
+  const [sorting, setSorting] = createSignal<SortingState>([
+    { id: 'ID', desc: true },
+  ])
+
   const table = createSolidTable({
     state: {
       get sorting() {