Add console pane

dashboard/src/components/ConsolePane.ts

@@ -0,0 +1,54 @@
+import { Fabricate } from 'fabricate.js';
+import { AppState } from '../types.ts';
+
+declare const fabricate: Fabricate<AppState>;
+
+/**
+ * ConsoleLine component.
+ *
+ * @returns {HTMLElement} Fabricate component.
+ */
+const ConsoleLine = () => fabricate('Text')
+  .setStyles(({ fonts, palette }) => ({
+    color: 'white',
+    fontFamily: fonts.code,
+    padding: '3px',
+    margin: '0px 0px 2px 0px',
+    borderBottom: `1px solid ${palette.grey2}`,
+    borderLeft: `5px solid ${palette.grey5}`,
+    fontSize: '0.8rem',
+    wordBreak: 'break-word',
+  }));
+
+/**
+ * ConsoleView component.
+ *
+ * @returns {HTMLElement} Fabricate component.
+ */
+const ConsoleView = () => fabricate('Column')
+  .setStyles(({ palette }) => ({
+    position: 'fixed',
+    right: '0',
+    top: '100vh',
+    left: '0',
+    height: '60vh',
+    backgroundColor: palette.grey1,
+    width: '100vw',
+    transition: '0.5s',
+    overflowY: 'scroll',
+    borderTop: `5px solid ${palette.grey5}`,
+  }))
+  .onUpdate((el, state, keys) => {
+    const { consoleOpen, consoleLogs } = state;
+    if (keys.includes('consoleOpen')) {
+      el.setStyles({ top: consoleOpen ? '40vh' : '100vh' });
+    }
+
+    if (keys.includes('consoleLogs')) {
+      el.setChildren(
+        consoleLogs.map((log) => ConsoleLine().setText(log)),
+      );
+    }
+  }, ['consoleOpen', 'consoleLogs']);
+
+export default ConsoleView;

dashboard/src/constants.ts

@@ -18,8 +18,10 @@ export const INITIAL_STATE: AppState = {
   metricNames: [],
   monitorPlugins: [],
 
-  // Selections
+  // State
   selectedDevice: null,
+  consoleOpen: false,
+  consoleLogs: [],
 };
 
 /** Icon type names */

dashboard/src/index.ts

@@ -6,6 +6,7 @@ import { parseParams } from './util.ts';
 import SideBar from './components/SideBar.ts';
 import AppArea from './components/AppArea.ts';
 import { fetchFleetList } from './services/conduitService.ts';
+import ConsoleView from './components/ConsolePane.ts';
 
 declare const fabricate: Fabricate<AppState>;
 
@@ -17,7 +18,31 @@ declare const fabricate: Fabricate<AppState>;
 const AppNavBar = () => fabricate('NavBar', {
   title: 'Node Microservices Dashboard',
   backgroundColor: Theme.palette.primary,
-});
+})
+  .addChildren([
+    fabricate('Image', { src: 'assets/images/console.png' })
+      .setStyles({
+        marginLeft: 'auto',
+        width: '28px',
+        height: '28px',
+        cursor: 'pointer',
+      })
+      .onClick((el, { consoleOpen }) => {
+        fabricate.update({ consoleOpen: !consoleOpen });
+      }),
+  ])
+
+// Get logs as they occur.
+const originalConsoleLog = console.log;
+/**
+ * Override console.log to update the console logs in the state.
+ *
+ * @param args - Arguments to log.
+ */
+window.console.log = (msg) => {
+  originalConsoleLog(msg);
+  fabricate.update('consoleLogs', (state: AppState) => [...state.consoleLogs, msg]);
+};
 
 /**
  * App component.
@@ -34,6 +59,7 @@ const App = () => fabricate('Column')
       .setChildren([
         SideBar(),
         AppArea(),
+        ConsoleView(),
       ]),
   ])
   .onUpdate(async (el, state, keys) => {

dashboard/src/types.ts

@@ -74,8 +74,10 @@ export type AppState = {
   metricNames: string[];
   monitorPlugins: MonitorPlugin[];
 
-  // Selections
+  // State
   selectedDevice: Device | null,
+  consoleOpen: boolean;
+  consoleLogs: string[];
 };
 
 /** Request states */