add pi model info

frontend/devices/connectivity/connectivity.tsx

@@ -9,6 +9,7 @@ import {
   reformatFwVersion, reformatFbosVersion, LocalIpAddress, MacAddress, isWifi,
   MemoryUsageDisplay,
   CameraIndicator,
+  PiDisplay,
 } from "../../settings/fbos_settings/fbos_details";
 import { t } from "../../i18next_wrapper";
 import { QosPanel } from "./qos_panel";
@@ -110,6 +111,7 @@ export class Connectivity
             <LocalIpAddress address={private_ip} />
             <VoltageDisplay throttleData={throttled} />
             <CameraIndicator videoDevices={video_devices} />
+            <PiDisplay chip={target} firmware={this.props.apiFirmwareValue} />
             <p><b>{t("Connectivity code")}: </b>{
               getDiagnosisCode(this.props.flags)}</p>
           </div>

frontend/devices/connectivity/fbos_metric_history_plot.tsx

@@ -13,6 +13,7 @@ const BORDERS = BORDER_WIDTH * 2;
 const MAX_X = HISTORY_LENGTH_HOUR_TENTHS;
 const MAX_Y = HEIGHT;
 const MAX_GAP_SECONDS = 15 * 60;
+const TOP_EXTRA_HEIGHT = 7;
 
 /** Names of metrics in plot. */
 const METRIC_NAMES: (keyof Telemetry)[] = [
@@ -234,7 +235,7 @@ export const FbosMetricHistoryPlot = (props: FbosMetricHistoryPlotProps) => {
       height={MAX_Y}
       x={0}
       y={-BORDER_WIDTH}
-      viewBox={`0 ${-7} ${MAX_X} ${MAX_Y}`}>
+      viewBox={`0 ${-TOP_EXTRA_HEIGHT} ${MAX_X} ${MAX_Y + TOP_EXTRA_HEIGHT}`}>
       <PlotBackground />
       <PlotLines telemetry={props.telemetry}
         hoveredMetric={props.hoveredMetric}

frontend/settings/fbos_settings/__tests__/fbos_details_test.tsx

@@ -6,6 +6,8 @@ import {
   OSReleaseChannelSelectionProps, OSReleaseChannelSelection, reformatFwVersion,
   reformatFbosVersion, MacAddress, MacAddressProps, colorFromMemoryUsage,
   convertUptime,
+  PiDisplay,
+  PiDisplayProps,
 } from "../fbos_details";
 import { shallow, mount } from "enzyme";
 import { bot } from "../../../__test_support__/fake_state/bot";
@@ -17,6 +19,7 @@ import {
 } from "../../../__test_support__/resource_index_builder";
 import { fakeTimeSettings } from "../../../__test_support__/fake_time_settings";
 import { updateConfig } from "../../../devices/actions";
+import { FirmwareHardware } from "farmbot";
 
 describe("<FbosDetails />", () => {
   const fakeConfig = fakeFbosConfig();
@@ -290,6 +293,27 @@ describe("colorFromTemp()", () => {
   });
 });
 
+describe("<PiDisplay />", () => {
+  const fakeProps = (): PiDisplayProps => ({
+    chip: "rpi",
+    firmware: "arduino",
+  });
+
+  it.each<[string, string, FirmwareHardware | undefined]>([
+    ["Zero W", "rpi", "arduino"],
+    ["3", "rpi3", "arduino"],
+    ["Zero 2 W", "rpi3", "express_k11"],
+    ["4", "rpi4", "arduino"],
+    ["unknown", "", undefined],
+  ])("returns correct pi model: %s", (expected, chip, firmware) => {
+    const p = fakeProps();
+    p.chip = chip;
+    p.firmware = firmware;
+    const wrapper = mount(<PiDisplay {...p} />);
+    expect(wrapper.text()).toContain(expected);
+  });
+});
+
 describe("colorFromMemoryUsage()", () => {
   it("memory usage is missing", () => {
     expect(colorFromMemoryUsage(undefined)).toEqual("gray");

frontend/settings/fbos_settings/fbos_details.tsx

@@ -10,11 +10,12 @@ import { LastSeen } from "./last_seen_row";
 import moment from "moment";
 import { formatTime } from "../../util";
 import {
-  boardType, FIRMWARE_CHOICES_DDI,
+  boardType, FIRMWARE_CHOICES_DDI, validFirmwareHardware,
 } from "../firmware/firmware_hardware_support";
 import { ExternalUrl, FarmBotRepo } from "../../external_urls";
 import { DeviceAccountSettings } from "farmbot/dist/resources/api_resources";
 import { getModifiedClassName } from "./default_values";
+import { FirmwareHardware } from "farmbot";
 
 /** Return an indicator color for the given temperature (C). */
 export const colorFromTemp = (temp: number | undefined): string => {
@@ -52,6 +53,26 @@ export function ChipTemperatureDisplay(
   </div>;
 }
 
+export interface PiDisplayProps {
+  chip: string;
+  firmware: FirmwareHardware | undefined;
+}
+
+/** RPI model display row. */
+export const PiDisplay = ({ chip, firmware }: PiDisplayProps): JSX.Element => {
+  const pi = () => {
+    switch (chip) {
+      case "rpi": return "Zero W";
+      case "rpi3": return firmware == "express_k11" ? "Zero 2 W" : "3";
+      case "rpi4": return "4";
+      default: return t("unknown");
+    }
+  };
+  return <div className={"pi-display"}>
+    <p><b>{t("Raspberry Pi")}: </b>{pi()}</p>
+  </div>;
+};
+
 /** Return an indicator color for the given memory usage (MB). */
 export const colorFromMemoryUsage = (usage: number | undefined) => {
   if (!isNumber(usage)) { return "gray"; }
@@ -385,6 +406,8 @@ export function FbosDetails(props: FbosDetailsProps) {
     "last_ota" as keyof DeviceAccountSettings] as string | undefined;
   const firmware_path =
     props.sourceFbosConfig("firmware_path").value || "---";
+  const firmware_hardware = validFirmwareHardware(
+    props.sourceFbosConfig("firmware_hardware").value);
   const infoFwCommit = firmware_version?.includes(".") ? firmware_commit : "---";
   const firmwareCommit = firmware_version?.split("-")[1] || infoFwCommit;
 
@@ -399,6 +422,7 @@ export function FbosDetails(props: FbosDetailsProps) {
     <CommitDisplay title={t("Commit")}
       repo={FarmBotRepo.FarmBotOS} commit={commit} />
     <p><b>{t("Target")}: </b>{target}</p>
+    <PiDisplay chip={target} firmware={firmware_hardware} />
     <p><b>{t("Node name")}: </b>{last((node_name || "").split("@"))}</p>
     <p><b>{t("Device ID")}: </b>{props.deviceAccount.body.id}</p>
     <LocalIpAddress address={private_ip} />