added log id and changed format layout

interface/src/system/LogEventConsole.tsx

@@ -110,7 +110,12 @@ const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
 
   const paddedNameLabel = (name: string) => {
     const label = '[' + name + ']';
-    return label.padStart(8, '\xa0');
+    return label.padEnd(12, '\xa0');
+  };
+
+  const paddedIDLabel = (id: number) => {
+    const label = id + ':';
+    return label.padEnd(7, '\xa0');
   };
 
   return (
@@ -119,6 +124,7 @@ const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
         <div className={classes.entry}>
           <span>{e.t}</span>
           <span className={styleLevel(e.l)}>{paddedLevelLabel(e.l)} </span>
+          <span>{paddedIDLabel(e.i)} </span>
           <span>{paddedNameLabel(e.n)} </span>
           <span>{e.m}</span>
         </div>

interface/src/system/types.ts

@@ -50,6 +50,7 @@ export enum LogLevel {
 export interface LogEvent {
   t: string;
   l: LogLevel;
+  i: number;
   n: string;
   m: string;
 }

mock-api/server.js

@@ -27,37 +27,43 @@ const fetch_log = {
     {
       t: '000+00:00:00.001',
       l: 3,
+      i: 1,
       n: 'system',
       m: 'this is message 3',
     },
     {
       t: '000+00:00:00.002',
       l: 4,
-      n: 'system',
+      i: 2,
+      n: 'ntp',
       m: 'this is message 4',
     },
     {
       t: '000+00:00:00.002',
       l: 5,
-      n: 'system',
+      i: 3,
+      n: 'mqtt',
       m: 'this is message 5',
     },
     {
       t: '000+00:00:00.002',
       l: 6,
-      n: 'system',
+      i: 444,
+      n: 'command',
       m: 'this is message 6',
     },
     {
       t: '000+00:00:00.002',
       l: 7,
+      i: 5555,
       n: 'emsesp',
       m: 'this is message 7',
     },
     {
       t: '000+00:00:00.002',
       l: 8,
-      n: 'mqtt',
+      i: 666666,
+      n: 'thermostat',
       m: 'this is message 8',
     },
   ],