store weblog settings, no log filtering, prevent double messages

interface/src/system/LogEventConsole.tsx

@@ -65,9 +65,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
   useWindowSize();
   const classes = useStyles({ topOffset, leftOffset });
-  const { events, compact, level } = props;
-
-  const filter_events = events.filter((e) => e.l <= level);
+  const { events, compact } = props;
 
   const styleLevel = (level: LogLevel) => {
     switch (level) {
@@ -109,7 +107,7 @@ const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
 
   const paddedLevelLabel = (level: LogLevel, compact: boolean) => {
     const label = levelLabel(level);
-    return compact ? ' ' + label[0] : label.padStart(8, '\xa0');
+    return compact ? ' ' + label[0] : label.padStart(7, '\xa0');
   };
 
   const paddedNameLabel = (name: string, compact: boolean) => {
@@ -124,7 +122,7 @@ const LogEventConsole: FC<LogEventConsoleProps> = (props) => {
 
   return (
     <Box id="log-window" className={classes.console}>
-      {filter_events.map((e) => (
+      {events.map((e) => (
         <div className={classes.entry} key={e.i}>
           <span>{e.t}</span>
           {compact && <span>{paddedLevelLabel(e.l, compact)} </span>}

interface/src/system/LogEventController.tsx

@@ -88,6 +88,11 @@ class LogEventController extends Component<
     this.setState({
       compact: checked
     });
+    this.send_data(
+      this.state.level,
+      this.state.max_messages,
+      checked as boolean
+    );
   };
 
   fetchLog = () => {
@@ -118,7 +123,11 @@ class LogEventController extends Component<
         throw Error('Unexpected status code: ' + response.status);
       })
       .then((json) => {
-        this.setState({ level: json.level, max_messages: json.max_messages });
+        this.setState({
+          level: json.level,
+          max_messages: json.max_messages,
+          compact: json.compact
+        });
       })
       .catch((error) => {
         const errorMessage = error.message || 'Unknown error';
@@ -159,22 +168,27 @@ class LogEventController extends Component<
     this.setState({
       max_messages: value as number
     });
-    this.send_data(this.state.level, value as number);
+    this.send_data(this.state.level, value as number, this.state.compact);
   };
 
   changeLevel = (event: React.ChangeEvent<HTMLSelectElement>) => {
     this.setState({
       level: parseInt(event.target.value)
     });
-    this.send_data(parseInt(event.target.value), this.state.max_messages);
+    this.send_data(
+      parseInt(event.target.value),
+      this.state.max_messages,
+      this.state.compact
+    );
   };
 
-  send_data = (level: number, max_messages: number) => {
+  send_data = (level: number, max_messages: number, compact: boolean) => {
     redirectingAuthorizedFetch(LOG_SETTINGS_ENDPOINT, {
       method: 'POST',
       body: JSON.stringify({
         level: level,
-        max_messages: max_messages
+        max_messages: max_messages,
+        compact: compact
       }),
       headers: {
         'Content-Type': 'application/json'
@@ -280,11 +294,12 @@ class LogEventController extends Component<
                 marks={[
                   { value: 25, label: '25' },
                   { value: 50, label: '50' },
-                  { value: 75, label: '75' }
+                  { value: 75, label: '75' },
+                  { value: 100, label: '100' }
                 ]}
                 step={25}
                 min={25}
-                max={75}
+                max={100}
                 onChange={this.changeMaxMessages}
               />
             </Grid>

interface/src/system/types.ts

@@ -58,4 +58,5 @@ export interface LogEvent {
 export interface LogSettings {
   level: LogLevel;
   max_messages: number;
+  compact: boolean;
 }