more colours, add another diff, smol css chgs

.gitignore

@@ -4,3 +4,6 @@ db.sqlite3
 data.csv
 public/styles/style.css
 swarm/.env.deploy
+swarm/.env.netmon.brent
+swarm/.env.netmon.josh
+swarm/.env.netmon.shannon

README.md

@@ -36,3 +36,11 @@ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli
 
 npm install tailwindcss postcss autoprefixer postcss-cli
 ```
+
+dev outside the container
+
+```
+python3 -m http.server 8000
+python3 netmon.py monitor
+npm run dev
+```

swarm/docker-compose.netmon.yml

@@ -7,6 +7,9 @@ networks:
 
 volumes:
   netmon-data:
+  netmon-data-brent:
+  netmon-data-shannon:
+  netmon-data-josh:
 
 services:
   app:
@@ -32,3 +35,75 @@ services:
         - traefik.http.routers.${netmonTraefikGrp? Variable not set}.tls=true
         - traefik.http.routers.${netmonTraefikGrp? Variable not set}.tls.certresolver=le
         - traefik.http.services.${netmonTraefikGrp? Variable not set}.loadbalancer.server.port=3000
+
+  brent:
+    image: daveplsno/netmon:latest
+    hostname: netmonBrent
+    env_file: .env.netmon.brent
+    volumes:
+      - netmon-data-brent:/app
+    networks:
+      - swarmnet-public
+    deploy:
+      restart_policy:
+        condition: on-failure
+      placement:
+        constraints:
+          - node.labels.${netmonNode? Variable not set} == true
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=swarmnet-public
+        - traefik.constraint-label=swarmnet-public
+        - traefik.http.routers.${netmonBrentTraefikGrp? Variable not set}.rule=Host(`${netmonBrentTraefikUrl? Variable not set}`)
+        - traefik.http.routers.${netmonBrentTraefikGrp? Variable not set}.entrypoints=websecure
+        - traefik.http.routers.${netmonBrentTraefikGrp? Variable not set}.tls=true
+        - traefik.http.routers.${netmonBrentTraefikGrp? Variable not set}.tls.certresolver=le
+        - traefik.http.services.${netmonBrentTraefikGrp? Variable not set}.loadbalancer.server.port=3000
+
+  shannon:
+    image: daveplsno/netmon:latest
+    hostname: netmonShannon
+    env_file: .env.netmon.shannon
+    volumes:
+      - netmon-data-shannon:/app
+    networks:
+      - swarmnet-public
+    deploy:
+      restart_policy:
+        condition: on-failure
+      placement:
+        constraints:
+          - node.labels.${netmonNode? Variable not set} == true
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=swarmnet-public
+        - traefik.constraint-label=swarmnet-public
+        - traefik.http.routers.${netmonShannonTraefikGrp? Variable not set}.rule=Host(`${netmonShannonTraefikUrl? Variable not set}`)
+        - traefik.http.routers.${netmonShannonTraefikGrp? Variable not set}.entrypoints=websecure
+        - traefik.http.routers.${netmonShannonTraefikGrp? Variable not set}.tls=true
+        - traefik.http.routers.${netmonShannonTraefikGrp? Variable not set}.tls.certresolver=le
+        - traefik.http.services.${netmonShannonTraefikGrp? Variable not set}.loadbalancer.server.port=3000
+
+  josh:
+    image: daveplsno/netmon:latest
+    hostname: netmonJosh
+    env_file: .env.netmon.josh
+    volumes:
+      - netmon-data-josh:/app
+    networks:
+      - swarmnet-public
+    deploy:
+      restart_policy:
+        condition: on-failure
+      placement:
+        constraints:
+          - node.labels.${netmonNode? Variable not set} == true
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=swarmnet-public
+        - traefik.constraint-label=swarmnet-public
+        - traefik.http.routers.${netmonJoshTraefikGrp? Variable not set}.rule=Host(`${netmonJoshTraefikUrl? Variable not set}`)
+        - traefik.http.routers.${netmonJoshTraefikGrp? Variable not set}.entrypoints=websecure
+        - traefik.http.routers.${netmonJoshTraefikGrp? Variable not set}.tls=true
+        - traefik.http.routers.${netmonJoshTraefikGrp? Variable not set}.tls.certresolver=le
+        - traefik.http.services.${netmonJoshTraefikGrp? Variable not set}.loadbalancer.server.port=3000

views/Card.jsx

@@ -1,12 +1,25 @@
 const React = require('react');
-import { TimeBetweenRows } from './DiffCard';
+import { TimeDiff } from './TimeDiff';
 
 export const Card = ({ dbdata }) => {
   return dbdata.reverse().map((row, index) => {
     const nextRow = dbdata[index + 1];
+    const lastRow = dbdata.slice()[0];
+    const textStyles = 'flex justify-center items-center py-2 text-sm';
 
     return (
       <div className="grid grid-cols-1 px-2">
+        {row.id === lastRow.id ? (
+          <div
+            className={`${textStyles} ${
+              row.status === 1 ? 'text-green-600' : 'text-red-600'
+            }`}
+          >
+            {row.status === 1 ? 'yeh all good for ' : 'absolutely cooked for '}
+            <TimeDiff row={row} nextRow={lastRow} />
+          </div>
+        ) : null}
+
         <div
           className={`shadow-md p-1 flex items-center justify-between ${
             row.status === 1 ? 'bg-green-50' : 'bg-red-50'
@@ -15,10 +28,13 @@ export const Card = ({ dbdata }) => {
           <div className="flex-grow pl-2">{row.timestamp}</div>
           <div className="p-1 pr-2">{row.status === 1 ? '🟢' : '🔴'}</div>
         </div>
-
         {!!nextRow ? (
-          <div className="flex justify-center items-center py-1 text-gray-400">
-            <TimeBetweenRows row={row} nextRow={nextRow} />
+          <div
+            className={`${textStyles}	${
+              row.status === 0 ? 'text-green-600' : 'text-red-600'
+            }`}
+          >
+            <TimeDiff row={row} nextRow={nextRow} />
           </div>
         ) : null}
       </div>

views/TimeDiff.jsx

@@ -1,18 +1,18 @@
 const React = require('react');
 const dayjs = require('dayjs');
 
-export const TimeBetweenRows = ({ row, nextRow }) => {
+export const TimeDiff = ({ row, nextRow }) => {
   if (nextRow) {
+    const now = dayjs();
     const firstDate = dayjs(row.timestamp);
     const secondDate = dayjs(nextRow.timestamp);
-    const theDiff = firstDate.diff(secondDate);
+    const theDiff =
+      row.id === nextRow.id ? now.diff(firstDate) : firstDate.diff(secondDate);
     const theSeconds = theDiff / 1000;
     const theMinutes = theSeconds / 60;
     const theHours = theMinutes / 60;
     const theDays = theHours / 24;
 
-    // console.log(theDiff, theSeconds, theMinutes, theHours, theDays);
-
     const renderSecs = <>{theSeconds === 1 ? 'sec' : 'secs'}</>;
     const renderMins = <>{theMinutes === 1 ? 'min ' : 'mins '}</>;
     const renderHrs = <>{theHours === 1 ? 'hr ' : 'hrs '}</>;