add max messages and make web log dynamic - #71

interface/src/system/LogEventController.tsx

@@ -3,19 +3,27 @@ import { Component } from 'react';
 import {
   restController,
   RestControllerProps,
-  RestFormLoader,
-  SectionContent
+  SectionContent,
+  BlockFormControlLabel
 } from '../components';
 
-import { addAccessTokenParameter } from '../authentication';
+import {
+  ValidatorForm,
+  SelectValidator
+} from 'react-material-ui-form-validator';
+
+import { Grid, Slider, FormLabel, Checkbox, MenuItem } from '@material-ui/core';
+
+import {
+  addAccessTokenParameter,
+  redirectingAuthorizedFetch
+} from '../authentication';
 
 import { ENDPOINT_ROOT, EVENT_SOURCE_ROOT } from '../api';
 export const FETCH_LOG_ENDPOINT = ENDPOINT_ROOT + 'fetchLog';
 export const LOG_SETTINGS_ENDPOINT = ENDPOINT_ROOT + 'logSettings';
-
 export const LOG_EVENT_EVENT_SOURCE_URL = EVENT_SOURCE_ROOT + 'log';
 
-import LogEventForm from './LogEventForm';
 import LogEventConsole from './LogEventConsole';
 
 import { LogEvent, LogSettings } from './types';
@@ -26,6 +34,9 @@ const decoder = new Decoder();
 interface LogEventControllerState {
   eventSource?: EventSource;
   events: LogEvent[];
+  compact: boolean;
+  level: number;
+  max_messages: number;
 }
 
 type LogEventControllerProps = RestControllerProps<LogSettings>;
@@ -40,12 +51,15 @@ class LogEventController extends Component<
   constructor(props: LogEventControllerProps) {
     super(props);
     this.state = {
-      events: []
+      events: [],
+      compact: false,
+      level: 6,
+      max_messages: 25
     };
   }
 
   componentDidMount() {
-    this.props.loadData();
+    this.fetchValues();
     this.fetchLog();
     this.configureEventSource();
   }
@@ -59,6 +73,15 @@ class LogEventController extends Component<
     }
   }
 
+  changeCompact = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => {
+    this.setState({
+      compact: checked
+    });
+  };
+
   fetchLog = () => {
     fetch(FETCH_LOG_ENDPOINT)
       .then((response) => {
@@ -78,6 +101,25 @@ class LogEventController extends Component<
       });
   };
 
+  fetchValues = () => {
+    redirectingAuthorizedFetch(LOG_SETTINGS_ENDPOINT)
+      .then((response) => {
+        if (response.status === 200) {
+          return response.json();
+        }
+        throw Error('Unexpected status code: ' + response.status);
+      })
+      .then((json) => {
+        this.setState({ level: json.level, max_messages: json.max_messages });
+      })
+      .catch((error) => {
+        const errorMessage = error.message || 'Unknown error';
+        this.props.enqueueSnackbar('Problem fetching: ' + errorMessage, {
+          variant: 'error'
+        });
+      });
+  };
+
   configureEventSource = () => {
     this.eventSource = new EventSource(
       addAccessTokenParameter(LOG_EVENT_EVENT_SOURCE_URL)
@@ -102,14 +144,114 @@ class LogEventController extends Component<
     }
   };
 
+  changeMaxMessages = (
+    event: React.ChangeEvent<{}>,
+    value: number | number[]
+  ) => {
+    this.setState({
+      max_messages: value as number
+    });
+    this.send_data(this.state.level, value as number);
+  };
+
+  changeLevel = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    this.setState({
+      level: parseInt(event.target.value)
+    });
+    this.send_data(parseInt(event.target.value), this.state.max_messages);
+  };
+
+  send_data = (level: number, max_messages: number) => {
+    redirectingAuthorizedFetch(LOG_SETTINGS_ENDPOINT, {
+      method: 'POST',
+      body: JSON.stringify({
+        level: level,
+        max_messages: max_messages
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          throw Error('Unexpected response code: ' + response.status);
+        }
+      })
+      .catch((error) => {
+        this.props.enqueueSnackbar(
+          error.message || 'Problem applying log settings',
+          { variant: 'warning' }
+        );
+      });
+  };
+
   render() {
+    const { saveData } = this.props;
     return (
       <SectionContent title="System Log" id="log-window">
-        <RestFormLoader
-          {...this.props}
-          render={(formProps) => <LogEventForm {...formProps} />}
+        <ValidatorForm onSubmit={saveData}>
+          <Grid
+            container
+            spacing={3}
+            direction="row"
+            justify="flex-start"
+            alignItems="center"
+          >
+            <Grid item xs={2}>
+              <SelectValidator
+                name="level"
+                label="Log Level"
+                value={this.state.level}
+                fullWidth
+                variant="outlined"
+                onChange={this.changeLevel}
+                margin="normal"
+              >
+                <MenuItem value={3}>ERROR</MenuItem>
+                <MenuItem value={4}>WARNING</MenuItem>
+                <MenuItem value={5}>NOTICE</MenuItem>
+                <MenuItem value={6}>INFO</MenuItem>
+                <MenuItem value={7}>DEBUG</MenuItem>
+                <MenuItem value={8}>ALL</MenuItem>
+              </SelectValidator>
+            </Grid>
+            <Grid item xs={2}>
+              <FormLabel>Buffer size</FormLabel>
+              <Slider
+                value={this.state.max_messages}
+                valueLabelDisplay="auto"
+                name="max_messages"
+                marks={[
+                  { value: 25, label: '25' },
+                  { value: 50, label: '50' },
+                  { value: 75, label: '75' }
+                ]}
+                step={25}
+                min={25}
+                max={75}
+                onChange={this.changeMaxMessages}
+              />
+            </Grid>
+            <Grid item xs={4}>
+              <BlockFormControlLabel
+                control={
+                  <Checkbox
+                    checked={this.state.compact}
+                    onChange={this.changeCompact}
+                    value="compact"
+                  />
+                }
+                label="Compact Layout"
+              />
+            </Grid>
+          </Grid>
+        </ValidatorForm>
+
+        <LogEventConsole
+          level={this.state.level}
+          compact={this.state.compact}
+          events={this.state.events}
         />
-        <LogEventConsole events={this.state.events} />
       </SectionContent>
     );
   }