moved mqtt and system to correct web pages

interface/src/mqtt/MqttSettingsForm.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
 
 import { Checkbox, TextField } from '@material-ui/core';
 import SaveIcon from '@material-ui/icons/Save';
+import MenuItem from '@material-ui/core/MenuItem';
 
 import { RestFormProps, FormActions, FormButton, BlockFormControlLabel, PasswordValidator } from '../components';
 import { isIP, isHostname, or } from '../validators';
@@ -115,6 +116,51 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
           onChange={handleValueChange('max_topic_length')}
           margin="normal"
         />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.system_heartbeat}
+              onChange={handleValueChange('system_heartbeat')}
+              value="system_heartbeat"
+            />
+          }
+          label="MQTT Heartbeat"
+        />
+        <SelectValidator name="mqtt_format"
+          label="MQTT Format"
+          value={data.mqtt_format}
+          fullWidth
+          variant="outlined"
+          onChange={handleValueChange('mqtt_format')}
+          margin="normal">
+          <MenuItem value={1}>Single</MenuItem>
+          <MenuItem value={2}>Nested</MenuItem>
+          <MenuItem value={3}>Home Assistant</MenuItem>
+          <MenuItem value={4}>Custom</MenuItem>
+        </SelectValidator>
+        <SelectValidator name="mqtt_qos"
+          label="MQTT QoS"
+          value={data.mqtt_qos}
+          fullWidth
+          variant="outlined"
+          onChange={handleValueChange('mqtt_qos')}
+          margin="normal">
+          <MenuItem value={0}>0</MenuItem>
+          <MenuItem value={1}>1</MenuItem>
+          <MenuItem value={2}>2</MenuItem>
+        </SelectValidator>
+        <TextValidator
+          validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:65535']}
+          errorMessages={['Publish time is required', "Must be a number", "Must be greater than 0", "Max value is 65535"]}
+          name="publish_time"
+          label="MQTT Publish Time (seconds)"
+          fullWidth
+          variant="outlined"
+          value={data.publish_time}
+          type="number"
+          onChange={handleValueChange('publish_time')}
+          margin="normal"
+        />
         <FormActions>
           <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
             Save

interface/src/mqtt/MqttStatus.ts

@@ -43,3 +43,15 @@ export const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
       return "Unknown"
   }
 }
+
+export const mqttStatusHighlight2 = ({ mqtt_fails }: MqttStatus, theme: Theme) => {
+
+  if (mqtt_fails === 0)
+    return theme.palette.success.main;
+
+  if (mqtt_fails < 10)
+    return theme.palette.warning.main;
+
+  return theme.palette.success.main;
+
+}

interface/src/mqtt/MqttStatusForm.tsx

@@ -6,9 +6,10 @@ import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@
 import DeviceHubIcon from '@material-ui/icons/DeviceHub';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import ReportIcon from '@material-ui/icons/Report';
+import SpeakerNotesOffIcon from "@material-ui/icons/SpeakerNotesOff";
 
 import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components';
-import { mqttStatusHighlight, mqttStatus, disconnectReason } from './MqttStatus';
+import { mqttStatusHighlight, mqttStatus, mqttStatusHighlight2, disconnectReason } from './MqttStatus';
 import { MqttStatus } from './types';
 
 type MqttStatusFormProps = RestFormProps<MqttStatus> & WithTheme;
@@ -16,7 +17,7 @@ type MqttStatusFormProps = RestFormProps<MqttStatus> & WithTheme;
 class MqttStatusForm extends Component<MqttStatusFormProps> {
 
   renderConnectionStatus() {
-    const { data } = this.props
+    const { data, theme } = this.props
     if (data.connected) {
       return (
         <Fragment>
@@ -27,6 +28,17 @@ class MqttStatusForm extends Component<MqttStatusFormProps> {
             <ListItemText primary="Client ID" secondary={data.client_id} />
           </ListItem>
           <Divider variant="inset" component="li" />
+          <ListItem>
+          <ListItemAvatar>
+            <HighlightAvatar color={mqttStatusHighlight2(data, theme)}>
+              <SpeakerNotesOffIcon />
+            </HighlightAvatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary="MQTT Publish Errors"
+            secondary={data.mqtt_fails}
+          />
+        </ListItem>
         </Fragment>
       );
     }

interface/src/mqtt/types.ts

@@ -14,6 +14,7 @@ export interface MqttStatus {
   connected: boolean;
   client_id: string;
   disconnect_reason: MqttDisconnectReason;
+  mqtt_fails: number;
 }
 
 export interface MqttSettings {
@@ -26,4 +27,8 @@ export interface MqttSettings {
   keep_alive: number;
   clean_session: boolean;
   max_topic_length: number;
+  publish_time: number;
+  mqtt_format: number;
+  mqtt_qos: number;
+  system_heartbeat: boolean;
 }