show # messages, use msgpack to compress json

interface/src/project/EMSESPDashboard.tsx

@@ -24,7 +24,10 @@ class EMSESP extends Component<RouteComponentProps> {
           onChange={(e, path) => this.handleTabChange(path)}
           variant="fullWidth"
         >
-          <Tab value={`/${PROJECT_PATH}/devices`} label="Devices & Sensors" />
+          <Tab
+            value={`/${PROJECT_PATH}/devices`}
+            label="Devices &amp; Sensors"
+          />
           <Tab value={`/${PROJECT_PATH}/status`} label="EMS Status" />
           <Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" />
         </Tabs>

interface/src/project/EMSESPDevicesController.tsx

@@ -22,7 +22,7 @@ class EMSESPDevicesController extends Component<EMSESPDevicesControllerProps> {
 
   render() {
     return (
-      <SectionContent title="Devices & Sensors">
+      <SectionContent title="Devices &amp; Sensors">
         <RestFormLoader
           {...this.props}
           render={(formProps) => <EMSESPDevicesForm {...formProps} />}

interface/src/system/LogEventConsole.tsx

@@ -108,12 +108,10 @@ const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
     <Box id="log-window" className={classes.console}>
       {events.map((e) => (
         <div className={classes.entry}>
-          <span>{e.time}</span>
-          <span className={styleLevel(e.level)}>
-            {paddedLevelLabel(e.level)}{' '}
-          </span>
-          <span>{paddedNameLabel(e.name)} </span>
-          <span>{e.message}</span>
+          <span>{e.t}</span>
+          <span className={styleLevel(e.l)}>{paddedLevelLabel(e.l)} </span>
+          <span>{paddedNameLabel(e.n)} </span>
+          <span>{e.m}</span>
         </div>
       ))}
     </Box>

interface/src/system/LogEventController.tsx

@@ -22,6 +22,9 @@ import LogEventConsole from './LogEventConsole';
 
 import { LogEvent, LogSettings } from './types';
 
+import { Decoder } from '@msgpack/msgpack';
+const decoder = new Decoder();
+
 interface LogEventControllerState {
   eventSource?: EventSource;
   events: LogEvent[];
@@ -71,12 +74,13 @@ class LogEventController extends Component<
     fetch(FETCH_LOG_ENDPOINT)
       .then((response) => {
         if (response.status === 200) {
-          return response.json();
+          return response.arrayBuffer();
         } else {
           throw Error('Unexpected status code: ' + response.status);
         }
       })
-      .then((json) => {
+      .then((arrayBuffer) => {
+        const json: any = decoder.decode(arrayBuffer);
         this.setState({ events: json.events });
       })
       .catch((error) => {

interface/src/system/LogEventForm.tsx

@@ -5,6 +5,8 @@ import {
   SelectValidator
 } from 'react-material-ui-form-validator';
 
+import { Typography } from '@material-ui/core';
+
 import MenuItem from '@material-ui/core/MenuItem';
 
 import {
@@ -79,6 +81,9 @@ class LogEventForm extends Component<LogEventFormProps> {
           <MenuItem value={7}>DEBUG</MenuItem>
           <MenuItem value={8}>TRACE</MenuItem>
         </SelectValidator>
+        <Typography color="primary" variant="body2">
+          <i>Only the last {data.max_messages} messages are shown</i>
+        </Typography>
       </ValidatorForm>
     );
   }

interface/src/system/types.ts

@@ -47,12 +47,13 @@ export enum LogLevel {
 }
 
 export interface LogEvent {
-  time: string;
-  level: LogLevel;
-  name: string;
-  message: string;
+  t: string;
+  l: LogLevel;
+  n: string;
+  m: string;
 }
 
 export interface LogSettings {
   level: LogLevel;
+  max_messages: number;
 }