changed: reduce connections table visual width

for #488

1 files changed, 44 insertions, 48 deletions

diff --git a/src/components/ConnectionTable.js b/src/components/ConnectionTable.js
index a6c90b1..b147e44 100644
--- a/src/components/ConnectionTable.js
+++ b/src/components/ConnectionTable.js
@@ -10,18 +10,16 @@ import s from './ConnectionTable.module.css';
 const columns = [
   { accessor: 'id', show: false },
   { Header: 'Host', accessor: 'host' },
-  { Header: 'Download', accessor: 'download' },
-  { Header: 'Upload', accessor: 'upload' },
-  { Header: 'Download Speed', accessor: 'downloadSpeedCurr' },
-  { Header: 'Upload Speed', accessor: 'uploadSpeedCurr' },
-  { Header: 'Network', accessor: 'network' },
-  { Header: 'Type', accessor: 'type' },
+  { Header: 'DL', accessor: 'download' },
+  { Header: 'UL', accessor: 'upload' },
+  { Header: 'DL Speed', accessor: 'downloadSpeedCurr' },
+  { Header: 'UL Speed', accessor: 'uploadSpeedCurr' },
   { Header: 'Chains', accessor: 'chains' },
   { Header: 'Rule', accessor: 'rule' },
   { Header: 'Time', accessor: 'start' },
-  { Header: 'Source IP', accessor: 'sourceIP' },
-  { Header: 'Source Port', accessor: 'sourcePort' },
+  { Header: 'Source', accessor: 'source' },
   { Header: 'Destination IP', accessor: 'destinationIP' },
+  { Header: 'Type', accessor: 'type' },
 ];
 
 function renderCell(cell, now) {
@@ -61,47 +59,45 @@ function Table({ data }) {
   );
   return (
     <div {...getTableProps()}>
-      <div className={s.thead}>
-        {headerGroups.map((headerGroup) => {
-          return (
-            <div {...headerGroup.getHeaderGroupProps()} className={s.tr}>
-              {headerGroup.headers.map((column) => (
-                <div
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
-                  className={s.th}
-                >
-                  <span>{column.render('Header')}</span>
-                  <span className={s.sortIconContainer}>
-                    {column.isSorted ? (
-                      <span className={column.isSortedDesc ? '' : s.rotate180}>
-                        <ChevronDown size={16} />
-                      </span>
-                    ) : null}
-                  </span>
-                </div>
-              ))}
+      {headerGroups.map((headerGroup) => {
+        return (
+          <div {...headerGroup.getHeaderGroupProps()} className={s.tr}>
+            {headerGroup.headers.map((column) => (
+              <div
+                {...column.getHeaderProps(column.getSortByToggleProps())}
+                className={s.th}
+              >
+                <span>{column.render('Header')}</span>
+                <span className={s.sortIconContainer}>
+                  {column.isSorted ? (
+                    <span className={column.isSortedDesc ? '' : s.rotate180}>
+                      <ChevronDown size={16} />
+                    </span>
+                  ) : null}
+                </span>
+              </div>
+            ))}
 
-              {rows.map((row, i) => {
-                prepareRow(row);
-                return row.cells.map((cell, j) => {
-                  return (
-                    <div
-                      {...cell.getCellProps()}
-                      className={cx(
-                        s.td,
-                        i % 2 === 0 ? s.odd : false,
-                        j >= 1 && j <= 4 ? s.du : false
-                      )}
-                    >
-                      {renderCell(cell, now)}
-                    </div>
-                  );
-                });
-              })}
-            </div>
-          );
-        })}
-      </div>
+            {rows.map((row, i) => {
+              prepareRow(row);
+              return row.cells.map((cell, j) => {
+                return (
+                  <div
+                    {...cell.getCellProps()}
+                    className={cx(
+                      s.td,
+                      i % 2 === 0 ? s.odd : false,
+                      j >= 1 && j <= 4 ? s.du : false
+                    )}
+                  >
+                    {renderCell(cell, now)}
+                  </div>
+                );
+              });
+            })}
+          </div>
+        );
+      })}
     </div>
   );
 }