network info

client/src/app/api/apiConstants.js

@@ -1,6 +1,7 @@
 export const NODE_PORT = 4001;
 export const EVENT_TABLE = 'event';
 export const EVENTS_TABLE = 'events';
+export const APP_TABLE = 'appinfo';
 
 const calculateServer = () => {
   return window.location.origin.replace(window.location.port, `${NODE_PORT}/`);

client/src/app/api/ontimeApi.js

@@ -1,6 +1,15 @@
 import axios from 'axios';
 import { ontimeURL } from './apiConstants';
 
+export const ontimePlaceholderInfo = {
+  networkInterfaces: [],
+};
+
+export const getInfo = async () => {
+  const res = await axios.get(ontimeURL + '/info');
+  return res.data;
+};
+
 export const downloadEvents = async () => {
   await axios({
     url: ontimeURL + '/db',

client/src/features/info/Info.jsx

@@ -3,6 +3,7 @@ import { useSocket } from 'app/context/socketContext';
 import style from './Info.module.css';
 import InfoTitle from './InfoTitle';
 import InfoLogger from './InfoLogger';
+import InfoNif from './InfoNif';
 import { useState } from 'react';
 
 export default function Info() {
@@ -71,6 +72,7 @@ export default function Info() {
     <>
       <div className={style.main}>{selected}</div>
       <InfoLogger logData={logData} />
+      <InfoNif />
       <InfoTitle title={'Now'} data={titlesNow} />
       <InfoTitle title={'Next'} data={titlesNext} />
     </>

client/src/features/info/Info.module.css

@@ -30,6 +30,15 @@
   color: #ccc;
 }
 
+.if {
+  font-size: 0.8em;
+  color: #4bffabcc;
+  background-color: rgba(0, 0, 0, 0.13);
+  border-radius: 2px;
+  padding: 0 0.5em;
+  margin: 0 0.5em;
+}
+
 ul > li {
   font-size: 0.9em;
   color: #fff;
@@ -37,7 +46,7 @@ ul > li {
 
 .log {
   overflow-y: scroll;
-  height: 40vh;
+  height: 30vh;
 }
 
 .info {

client/src/features/info/InfoNif.jsx

@@ -0,0 +1,49 @@
+import { Icon } from '@chakra-ui/react';
+import { useState } from 'react';
+import { FiChevronUp } from 'react-icons/fi';
+import { APP_TABLE } from 'app/api/apiConstants';
+import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi';
+import { useFetch } from 'app/hooks/useFetch';
+import style from './Info.module.css';
+
+export default function InfoNif() {
+  const { data, status } = useFetch(APP_TABLE, getInfo, {
+    placeholderData: ontimePlaceholderInfo,
+  });
+  const [collapsed, setCollapsed] = useState(false);
+
+  const isDev = process.env.NODE_ENV === 'development';
+  const baseURL = `http://__IP__:${isDev ? 3000 : 4001}`;
+
+  return (
+    <div className={style.container}>
+      <div className={style.header}>
+        Network Info
+        <Icon
+          className={collapsed ? style.moreCollapsed : style.moreExpanded}
+          as={FiChevronUp}
+          onClick={() => setCollapsed((c) => !c)}
+        />
+      </div>
+
+      {!collapsed && (
+        <div>
+          {status === 'success' && (
+            <>
+              {data?.networkInterfaces.map((e) => {
+                return (
+                  <a
+                    href={baseURL.replace('__IP__', e.address)}
+                    target='_blank'
+                    rel='noreferrer'
+                    className={style.if}
+                  >{`${e.name} - ${e.address}`}</a>
+                );
+              })}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

server/src/controllers/ontimeController.js

@@ -7,6 +7,7 @@ import {
   block as blockDef,
 } from '../data/eventsDefinition.js';
 import { dbModel } from '../data/dataModel.js';
+import { networkInterfaces } from 'os';
 
 function getEventTitle() {
   return data.event.title;
@@ -126,3 +127,35 @@ export const dbUpload = async (req, res) => {
     res.status(400).send({ message: error });
   }
 };
+
+/**
+ * @description Gets information on IPV4 non internal interfaces
+ * @returns {array} - Array of objects {name: ip}
+ */
+const getNetworkInterfaces = () => {
+  const nets = networkInterfaces();
+  const results = [];
+
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name]) {
+      // Skip over non-IPv4 and internal (i.e. 127.0.0.1) addresses
+      if (net.family === 'IPv4' && !net.internal) {
+        results.push({
+          name: name,
+          address: net.address,
+        });
+      }
+    }
+  }
+  return results;
+};
+
+// Create controller for POST request to '/ontime/info'
+// Returns -
+// TODO: Add version
+export const getInfo = async (req, res) => {
+  const ni = getNetworkInterfaces();
+  res.status(200).send({
+    networkInterfaces: ni,
+  });
+};

server/src/routes/ontimeRouter.js

@@ -2,10 +2,17 @@ import express from 'express';
 import uploadJson from '../utils/upload.js';
 export const router = express.Router();
 
-import { dbDownload, dbUpload } from '../controllers/ontimeController.js';
+import {
+  dbDownload,
+  dbUpload,
+  getInfo,
+} from '../controllers/ontimeController.js';
 
 // create route between controller and '/ontime/db' endpoint
 router.get('/db', dbDownload);
 
 // create route between controller and '/ontime/db' endpoint
 router.post('/db', uploadJson, dbUpload);
+
+// create route between controller and '/ontime/info' endpoint
+router.get('/info', uploadJson, getInfo);