Add Process column to connections (#722)

src/api/connections.ts

@@ -21,6 +21,7 @@ export type ConnectionItem = {
     sourcePort: string;
     destinationPort: string;
     host: string;
+    processPath: string;
   };
   upload: number;
   download: number;

src/components/ConnectionTable.module.scss

@@ -1,7 +1,7 @@
 .tr {
   display: grid;
   /* grid-template-columns: repeat(11, minmax(max-content, 1fr)); */
-  grid-template-columns: repeat(11, minmax(max-content, auto));
+  grid-template-columns: repeat(12, minmax(max-content, auto));
 }
 
 .th {

src/components/ConnectionTable.tsx

@@ -12,6 +12,7 @@ const sortDescFirst = true;
 const columns = [
   { accessor: 'id', show: false },
   { Header: 'Host', accessor: 'host' },
+  { Header: 'Process', accessor: 'process' },
   { Header: 'DL', accessor: 'download', sortDescFirst },
   { Header: 'UL', accessor: 'upload', sortDescFirst },
   { Header: 'DL Speed', accessor: 'downloadSpeedCurr', sortDescFirst },
@@ -85,7 +86,7 @@ function Table({ data }) {
                     className={cx(
                       s.td,
                       i % 2 === 0 ? s.odd : false,
-                      j >= 1 && j <= 4 ? s.du : false
+                      j >= 2 && j <= 5 ? s.du : false
                     )}
                   >
                     {renderCell(cell)}

src/components/Connections.tsx

@@ -31,6 +31,10 @@ function arrayToIdKv<T extends { id: string }>(items: T[]) {
   return o;
 }
 
+function basePath (path: string) {
+  return path.replace(/.*[/\\]/, '')
+}
+
 type FormattedConn = {
   id: string;
   upload: number;
@@ -46,6 +50,7 @@ type FormattedConn = {
   host: string;
   type: string;
   network: string;
+  processPath: string;
   downloadSpeedCurr?: number;
   uploadSpeedCurr?: number;
 };
@@ -67,6 +72,7 @@ function filterConns(conns: FormattedConn[], keyword: string) {
           conn.rule,
           conn.type,
           conn.network,
+          conn.processPath,
         ].some((field) => hasSubstring(field, keyword))
       );
 }
@@ -77,7 +83,7 @@ function formatConnectionDataItem(
   now: number
 ): FormattedConn {
   const { id, metadata, upload, download, start, chains, rule, rulePayload } = i;
-  const { host, destinationPort, destinationIP, network, type, sourceIP, sourcePort } = metadata;
+  const { host, destinationPort, destinationIP, network, type, sourceIP, sourcePort, processPath } = metadata;
   // host could be an empty string if it's direct IP connection
   let host2 = host;
   if (host2 === '') host2 = destinationIP;
@@ -95,6 +101,7 @@ function formatConnectionDataItem(
     source: `${sourceIP}:${sourcePort}`,
     downloadSpeedCurr: download - (prev ? prev.download : 0),
     uploadSpeedCurr: upload - (prev ? prev.upload : 0),
+    process: basePath(processPath),
   };
   return ret;
 }