diff --git a/webpack/devices/actions.ts b/webpack/devices/actions.ts index 2289bc19d..1017c7de7 100644 --- a/webpack/devices/actions.ts +++ b/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; diff --git a/webpack/devices/connectivity/connectivity_row.tsx b/webpack/devices/connectivity/connectivity_row.tsx new file mode 100644 index 000000000..b530a1b8d --- /dev/null +++ b/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 */ +export interface StatusRowProps { + connectionStatus?: boolean | undefined; + from: string; + to: string; + children?: React.ReactChild; +} + +const iconLookup: CowardlyDictionary = { + true: "saucer green active", + false: "saucer red active" +}; + +export function ConnectivityRow(props: StatusRowProps) { + const className = iconLookup["" + props.connectionStatus] || "saucer yellow active"; + return + +
+ + +

+ {props.from} +

+ + +

+ {props.to} +

+ + +

+ {props.children} +

+ +
; +} diff --git a/webpack/devices/connectivity/index.tsx b/webpack/devices/connectivity/index.tsx index faef886b3..9bc0ce80c 100644 --- a/webpack/devices/connectivity/index.tsx +++ b/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 { - !!x.connectionStatus)} /> + !!x.connectionStatus)} /> @@ -37,52 +44,3 @@ export class ConnectivityPanel extends React.Component { ; } } - -/** Data model for a single row within the */ -export interface StatusRowProps { - connectionStatus?: boolean | undefined; - from: string; - to: string; - children?: React.ReactChild; -} - -const iconLookup: CowardlyDictionary = { - true: "saucer green active", - false: "saucer red active" -}; - -function ConnectivityRow(props: StatusRowProps) { - const className = iconLookup["" + props.connectionStatus] || "saucer yellow active"; - return - -
- - -

- {props.from} -

- - -

- {props.to} -

- - -

- {props.children} -

- -
; -} - -interface RetryBtnProps { - flags: boolean[]; -} -export function RetryBtn(props: RetryBtnProps) { - const failures = props.flags.includes(false); - const color = failures ? "red" : "green"; - - return ; -} diff --git a/webpack/devices/connectivity/retry_btn.tsx b/webpack/devices/connectivity/retry_btn.tsx new file mode 100644 index 000000000..990164c77 --- /dev/null +++ b/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 ; +} diff --git a/webpack/devices/connectivity/status_checks.tsx b/webpack/devices/connectivity/status_checks.tsx index 433dd9951..cacc8721b 100644 --- a/webpack/devices/connectivity/status_checks.tsx +++ b/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; diff --git a/webpack/devices/devices.tsx b/webpack/devices/devices.tsx index 7c42c27ab..75bf65d32 100644 --- a/webpack/devices/devices.tsx +++ b/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 { @@ -32,6 +34,12 @@ export class Devices extends React.Component { return [this.flags.userMQTT, this.flags.botMQTT, this.flags.botAPI]; } + refresh = () => { + this + .props + .dispatch(refresh(this.props.deviceAccount)); + }; + render() { if (this.props.auth) { return @@ -52,7 +60,10 @@ export class Devices extends React.Component { - +