Fixed connection state mobx updating

app/components/DeviceView.tsx

@@ -8,7 +8,8 @@ import { ConnectionState as ConState, SprinklersDevice } from "@common/sprinkler
 import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
 import "./DeviceView.scss";
 
-function ConnectionState({ connectionState, className }: { connectionState: ConState, className?: string }) {
+const ConnectionState = observer(({ connectionState, className }:
+                                      { connectionState: ConState, className?: string }) => {
     const connected = connectionState.isConnected;
     const classes = classNames({
         connectionState: true,
@@ -31,7 +32,7 @@ function ConnectionState({ connectionState, className }: { connectionState: ConS
             {connectionText}
         </div>
     );
-}
+});
 
 interface DeviceViewProps {
     deviceId: string;
@@ -62,11 +63,11 @@ class DeviceView extends React.Component<DeviceViewProps> {
                     <Item.Meta>
                         Raspberry Pi Grinklers Device
                     </Item.Meta>
-                    <Grid>
+                    <Grid stackable>
-                        <Grid.Column mobile={16} largeScreen={8}>
+                        <Grid.Column width="8">
                             <SectionTable sections={sections}/>
                         </Grid.Column>
-                        <Grid.Column mobile={16} largeScreen={8}>
+                        <Grid.Column width="8">
                             <RunSectionForm sections={sections}/>
                         </Grid.Column>
                     </Grid>

app/components/SectionRunnerView.tsx

@@ -27,7 +27,7 @@ function SectionRunView({ run, sections }:
     const duration = Duration.fromSeconds(run.duration);
     const cancel = run.cancel;
     return (
-        <Segment inverted={current} color={current ? "olive" : undefined}>
+        <Segment inverted={current} color={current ? "green" : undefined}>
             '{section.name}' for {duration.toString()}
             <Button onClick={cancel} icon><Icon name="remove" /></Button>
         </Segment>

app/sprinklers/websocket.ts

@@ -6,7 +6,7 @@ import * as requests from "@common/sprinklers/requests";
 import * as schema from "@common/sprinklers/schema/index";
 import { seralizeRequest } from "@common/sprinklers/schema/requests";
 import * as ws from "@common/sprinklers/websocketData";
-import { autorun, observable } from "mobx";
+import { action, autorun, observable } from "mobx";
 
 const log = logger.child({ source: "websocket" });
 
@@ -102,15 +102,25 @@ export class WebSocketApiClient implements s.ISprinklersApi {
         this.connectionState.clientToServer = true;
     }
 
+    /* tslint:disable-next-line:member-ordering */
+    private onDisconnect = action(() => {
+        this.connectionState.serverToBroker = null;
+        this.connectionState.clientToServer = false;
+    });
+
     private onClose(event: CloseEvent) {
         log.info({ reason: event.reason, wasClean: event.wasClean },
             "disconnected from websocket");
-        this.connectionState.clientToServer = false;
+        this.onDisconnect();
     }
 
     private onError(event: Event) {
-        log.error(event, "websocket error");
+        log.error({ event }, "websocket error");
-        this.connectionState.clientToServer = false;
+        action(() => {
+            this.connectionState.serverToBroker = null;
+            this.connectionState.clientToServer = false;
+        });
+        this.onDisconnect();
     }
 
     private onMessage(event: MessageEvent) {