Finishing touches.

webpack/devices/actions.ts

@@ -264,15 +264,9 @@ export function connectDevice(token: string): ConnectDeviceReturn {
   return (dispatch: Function, getState: GetState) => {
     const secure = location.protocol === "https:";
     const bot = new Farmbot({ token, secure });
-    bot.on("online", () => {
-      bot.setUserEnv({ "LAST_CLIENT_CONNECTED": JSON.stringify(new Date()) });
-      dispatch(setMqttStatus(true));
-    });
+    bot.on("online", () => dispatch(setMqttStatus(true)));
     bot.on("offline", () => {
       dispatch(setMqttStatus(false));
-      bot.setUserEnv(
-        { "LAST_CLIENT_CONNECTED": "" }
-      );
       error(t(Content.MQTT_DISCONNECTED));
     });
     return bot
@@ -287,6 +281,7 @@ export function connectDevice(token: string): ConnectDeviceReturn {
           ))
           .catch(() => { });
         bot.on("logs", function (msg: Log) {
+          dispatch(setMqttStatus(true));
           if (isLog(msg) && !oneOf(BAD_WORDS, msg.message.toUpperCase())) {
             maybeShowLog(msg);
             dispatch(init({
@@ -300,6 +295,7 @@ export function connectDevice(token: string): ConnectDeviceReturn {
           }
         });
         bot.on("status", _.throttle(function (msg: BotStateTree) {
+          dispatch(setMqttStatus(true));
           dispatch(incomingStatus(msg));
           if (NEED_VERSION_CHECK) {
             const IS_OK = versionOK(getState()
@@ -315,6 +311,7 @@ export function connectDevice(token: string): ConnectDeviceReturn {
 
         let alreadyToldYou = false;
         bot.on("malformed", function () {
+          dispatch(setMqttStatus(true));
           if (!alreadyToldYou) {
             warning(t(Content.MALFORMED_MESSAGE_REC_UPGRADE));
             alreadyToldYou = true;

webpack/devices/connectivity/connectivity_row.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { CowardlyDictionary } from "../../util";
+import { Row, Col } from "../../ui/index";
+
+/** Data model for a single row within the <ConnectivityPanel /> */
+export interface StatusRowProps {
+  connectionStatus?: boolean | undefined;
+  from: string;
+  to: string;
+  children?: React.ReactChild;
+}
+
+const iconLookup: CowardlyDictionary<string> = {
+  true: "saucer green active",
+  false: "saucer red active"
+};
+
+export function ConnectivityRow(props: StatusRowProps) {
+  const className = iconLookup["" + props.connectionStatus] || "saucer yellow active";
+  return <Row>
+    <Col xs={1}>
+      <div className={className}></div>
+    </Col>
+    <Col xs={1}>
+      <p>
+        {props.from}
+      </p>
+    </Col>
+    <Col xs={1}>
+      <p>
+        {props.to}
+      </p>
+    </Col>
+    <Col xs={9}>
+      <p>
+        {props.children}
+      </p>
+    </Col>
+  </Row>;
+}

webpack/devices/connectivity/index.tsx

@@ -1,11 +1,15 @@
 import * as React from "react";
 import { Widget, WidgetHeader, WidgetBody, Row, Col } from "../../ui/index";
 import { t } from "i18next";
-import { CowardlyDictionary } from "../../util";
+import { ConnectivityRow, StatusRowProps } from "./connectivity_row";
+import { RetryBtn } from "./retry_btn";
+import { SpecialStatus } from "../../resources/tagged_resources";
 
 interface Props {
+  onRefresh(): void;
   rowData: StatusRowProps[];
   children?: React.ReactChild;
+  status: SpecialStatus | undefined;
 }
 
 interface State {
@@ -21,7 +25,10 @@ export class ConnectivityPanel extends React.Component<Props, State> {
       <WidgetHeader
         title={t("Connectivity")}
         helpText={t("Diagnose connectivity issues with FarmBot and the browser.")}>
-        <RetryBtn flags={rowData.map(x => !!x.connectionStatus)} />
+        <RetryBtn
+          status={this.props.status}
+          onClick={this.props.onRefresh}
+          flags={rowData.map(x => !!x.connectionStatus)} />
       </WidgetHeader>
       <WidgetBody>
         <ConnectivityRow from="from" to="to" />
@@ -37,52 +44,3 @@ export class ConnectivityPanel extends React.Component<Props, State> {
     </Widget>;
   }
 }
-
-/** Data model for a single row within the <ConnectivityPanel /> */
-export interface StatusRowProps {
-  connectionStatus?: boolean | undefined;
-  from: string;
-  to: string;
-  children?: React.ReactChild;
-}
-
-const iconLookup: CowardlyDictionary<string> = {
-  true: "saucer green active",
-  false: "saucer red active"
-};
-
-function ConnectivityRow(props: StatusRowProps) {
-  const className = iconLookup["" + props.connectionStatus] || "saucer yellow active";
-  return <Row>
-    <Col xs={1}>
-      <div className={className}></div>
-    </Col>
-    <Col xs={1}>
-      <p>
-        {props.from}
-      </p>
-    </Col>
-    <Col xs={1}>
-      <p>
-        {props.to}
-      </p>
-    </Col>
-    <Col xs={9}>
-      <p>
-        {props.children}
-      </p>
-    </Col>
-  </Row>;
-}
-
-interface RetryBtnProps {
-  flags: boolean[];
-}
-export function RetryBtn(props: RetryBtnProps) {
-  const failures = props.flags.includes(false);
-  const color = failures ? "red" : "green";
-
-  return <button className={color + " fb-button"}>
-    Check Again
-</button>;
-}

webpack/devices/connectivity/retry_btn.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { SpecialStatus } from "../../resources/tagged_resources";
+
+interface RetryBtnProps {
+  flags: boolean[];
+  onClick(): void;
+  status: SpecialStatus | undefined;
+}
+
+export function RetryBtn(props: RetryBtnProps) {
+  const failures = props.flags.includes(false);
+  const color = failures ? "red" : "green";
+  const css = props.status === "SAVING" ? "yellow" : color;
+  return <button
+    className={css + " fb-button"}
+    onClick={props.onClick}>
+    Check Again
+</button>;
+}

webpack/devices/connectivity/status_checks.tsx

@@ -1,6 +1,6 @@
 import { isUndefined } from "lodash";
 import * as moment from "moment";
-import { StatusRowProps } from "./index";
+import { StatusRowProps } from "./connectivity_row";
 
 const HOUR = 1000 * 60 * 60;
 const SIX_HOURS = HOUR * 6;

webpack/devices/devices.tsx

@@ -6,9 +6,11 @@ import { Page, Col, Row } from "../ui";
 import { mapStateToProps } from "./state_to_props";
 import { Props } from "./interfaces";
 import * as moment from "moment";
-import { StatusRowProps, ConnectivityPanel } from "./connectivity/index";
+import { ConnectivityPanel } from "./connectivity/index";
 import { botToMQTT, botToAPI, browserToMQTT } from "./connectivity/status_checks";
 import { Diagnosis, DiagnosisProps } from "./connectivity/diagnosis";
+import { StatusRowProps } from "./connectivity/connectivity_row";
+import { refresh } from "../api/crud";
 
 @connect(mapStateToProps)
 export class Devices extends React.Component<Props, {}> {
@@ -32,6 +34,12 @@ export class Devices extends React.Component<Props, {}> {
     return [this.flags.userMQTT, this.flags.botMQTT, this.flags.botAPI];
   }
 
+  refresh = () => {
+    this
+      .props
+      .dispatch(refresh(this.props.deviceAccount));
+  };
+
   render() {
     if (this.props.auth) {
       return <Page className="devices">
@@ -52,7 +60,10 @@ export class Devices extends React.Component<Props, {}> {
         </Row>
         <Row>
           <Col xs={12} sm={6}>
-            <ConnectivityPanel rowData={this.rowData}>
+            <ConnectivityPanel
+              status={this.props.deviceAccount.specialStatus}
+              onRefresh={this.refresh}
+              rowData={this.rowData}>
               <Diagnosis
                 botMQTT={!!this.flags.botMQTT.connectionStatus}
                 botAPI={!!this.flags.botAPI.connectionStatus}