Stub out a lot of connectivity things

webpack/devices/components/farmbot_os_settings.tsx

@@ -103,20 +103,6 @@ export class FarmbotOsSettings
               </div>
             </Col>
           </Row>
-          <Row>
-            <Col xs={2}>
-              <label>
-                {t("NETWORK")}
-              </label>
-            </Col>
-            <Col xs={10}>
-              <p>
-                {this.props.bot.connectedToMQTT ?
-                  "connected to " : "OFFLINE! "}
-                {`mqtt://${this.props.auth.token.unencoded.mqtt}`}
-              </p>
-            </Col>
-          </Row>
           <this.lastSeen />
           <MustBeOnline
             fallback="Some settings are not available when FarmBot is offline."

webpack/devices/connectivity_panel.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { Widget, WidgetHeader, WidgetBody, Row, Col } from "../ui/index";
+import { t } from "i18next";
+import { CowardlyDictionary } from "../util";
+
+interface Props {
+  rowData: StatusRowProps[];
+}
+
+interface State {
+
+}
+
+export class ConnectivityPanel extends React.Component<Props, State> {
+  state: State = {};
+
+  render() {
+    return <Widget className="device-widget">
+      <WidgetHeader
+        title={t("Connectivity")}
+        helpText={t("Diagnose connectivity issues with FarmBot and the browser.")} />
+      <WidgetBody>
+        <ConnectivityRow from="from" to="to" />
+        {this
+          .props
+          .rowData
+          .map(x => <ConnectivityRow {...x} />)}
+      </WidgetBody>
+    </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: "fa fa-thumbs-up",
+  false: "fa fa-thumbs-down"
+};
+
+function ConnectivityRow(props: StatusRowProps) {
+  const className = iconLookup["" + props.connectionStatus] || "fa fa-question";
+  return <Row>
+    <Col xs={1}>
+      <i className={className}></i>
+    </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/devices.tsx

@@ -5,9 +5,36 @@ import { FarmbotOsSettings } from "./components/farmbot_os_settings";
 import { Page, Col, Row } from "../ui";
 import { mapStateToProps } from "./state_to_props";
 import { Props } from "./interfaces";
+import { ConnectivityPanel, StatusRowProps } from "./connectivity_panel";
+import * as moment from "moment";
+import { isUndefined } from "lodash";
+
+interface State {
+  online: boolean;
+}
 
 @connect(mapStateToProps)
-export class Devices extends React.Component<Props, {}> {
+export class Devices extends React.Component<Props, State> {
+  state = { online: false };
+  get rowData(): StatusRowProps[] {
+    const mqttUrl = this.props.auth && this.props.auth.token.unencoded.mqtt;
+    const mqttConnected = this.props.bot.connectedToMQTT;
+    const lastSeen = this.props.deviceAccount.body.last_seen;
+    return [
+      botToMQTT(),
+      botToAPI(lastSeen ? moment(lastSeen) : undefined, moment()),
+      browserToAPI(this.state.online),
+      browserToMQTT(mqttUrl, mqttConnected)
+    ];
+  }
+
+  componentDidMount() {
+    window.addEventListener("online", () =>
+      this.setState({ online: true }));
+    window.addEventListener("offline", () =>
+      this.setState({ online: false }));
+  }
+
   render() {
     if (this.props.auth) {
       return <Page className="devices">
@@ -26,9 +53,64 @@ export class Devices extends React.Component<Props, {}> {
               bot={this.props.bot} />
           </Col>
         </Row>
+        <Row>
+          <Col xs={12} sm={6}>
+            <ConnectivityPanel rowData={this.rowData} />
+          </Col>
+        </Row>
       </Page>;
     } else {
       throw new Error("Log in first");
     }
   }
 }
+
+const HOUR = 1000 * 60 * 60;
+const TWO_HOURS = HOUR * 2;
+function botToAPI(lastSeen: moment.Moment | undefined,
+  now = moment()): StatusRowProps {
+  // less than 1 hour == probably OK
+  // 1 -- 2 hours == questionable
+  // > 2 bad!
+  const diff = lastSeen && lastSeen.diff(now);
+  if (isUndefined(diff) || (diff > TWO_HOURS)) {
+    return {
+      from: "TODO",
+      to: "TODO",
+      children: "TODO"
+    };
+  } else {
+    return {
+      from: "TODO",
+      to: "TODO",
+      children: "TODO"
+    };
+
+  }
+}
+
+function botToMQTT(): StatusRowProps {
+  return {
+    from: "TODO",
+    to: "TODO",
+    children: "TODO"
+  };
+}
+
+function browserToAPI(isOnline: boolean): StatusRowProps {
+  return {
+    from: "TODO",
+    to: "TODO",
+    children: "TODO"
+  };
+}
+
+function browserToMQTT(mqttUrl: string | undefined, online?: boolean): StatusRowProps {
+  const url = `mqtt://${mqttUrl}`;
+  return {
+    from: "Browser",
+    to: "MQTT",
+    children: online ? ("Connected to  " + url) : "Unable to connect",
+    connectionStatus: online
+  };
+}