Farmbot-Web-App/frontend/devices/components/send_diagnostic_report.tsx

68 lines
2.0 KiB
TypeScript

import * as React from "react";
import { Row, Col } from "../../ui";
import { ColWidth } from "./farmbot_os_settings";
import { Collapse } from "@blueprintjs/core";
import { Header } from "./hardware_settings/header";
import { ShouldDisplay, Feature } from "../interfaces";
import { TaggedDiagnosticDump } from "farmbot";
import { DiagnosticDumpRow } from "./diagnostic_dump_row";
import { requestDiagnostic } from "../actions";
import { Content } from "../../constants";
import { t } from "../../i18next_wrapper";
export interface DiagReportProps {
dispatch: Function;
expanded: boolean;
shouldDisplay: ShouldDisplay;
diagnostics: TaggedDiagnosticDump[];
botOnline: boolean;
}
export class SendDiagnosticReport extends React.Component<DiagReportProps, {}> {
show = () => {
return <section>
<div style={{ fontSize: "1px" }}>
<Header
expanded={this.props.expanded}
title={t("Diagnostic Reports")}
name={Feature.diagnostic_dumps}
dispatch={this.props.dispatch} />
</div>
<Collapse isOpen={this.props.expanded}>
<Row>
<Col xs={ColWidth.label}>
<label>
{t("DIAGNOSTIC CHECK")}
</label>
</Col>
<Col xs={6}>
<p>{t(Content.DIAGNOSTIC_CHECK)}</p>
</Col>
<Col xs={3}>
<button
className="fb-button yellow"
disabled={!this.props.botOnline}
onClick={requestDiagnostic}>
{t("Record Diagnostic")}
</button>
</Col>
</Row>
<hr />
{this.props.diagnostics.map(d => {
return <DiagnosticDumpRow
key={d.uuid}
diag={d}
dispatch={this.props.dispatch} />;
})}
</Collapse>
</section>;
}
noShow = () => <div />;
render() {
const show = this.props.shouldDisplay(Feature.diagnostic_dumps);
return (show ? this.show : this.noShow)();
}
}