add icon to diagnosis indicator

frontend/css/global.scss

@@ -150,6 +150,24 @@ fieldset {
   pointer-events: all;
 }
 
+.diagnosis-indicator {
+  text-align: center !important;
+  i {
+    display: block;
+    position: absolute;
+    top: 0.1rem;
+    left: 0.1rem;
+    color: $white;
+    font-size: 14px;
+    &.fa-times {
+      left: 0.25rem;
+    }
+    &.fa-question {
+      left: 0.35rem;
+    }
+  }
+}
+
 .connectivity-popover-portal {
   .bp3-transition-container {
     z-index: 999;

frontend/devices/connectivity/connectivity_row.tsx

@@ -15,22 +15,29 @@ export interface StatusRowProps {
   hoveredConnection?: string | undefined;
 }
 
-const iconLookup: CowardlyDictionary<string> = {
+const colorLookup: CowardlyDictionary<string> = {
   true: "green",
   false: "red",
   undefined: "yellow"
 };
 
+const iconLookup: CowardlyDictionary<string> = {
+  true: "check",
+  false: "times",
+  undefined: "question"
+};
+
 export function ConnectivityRow(props: StatusRowProps) {
   const { connectionStatus, connectionName, hoveredConnection } = props;
-  const colorClass = iconLookup["" + connectionStatus] || "grey";
+  const colorClass = colorLookup["" + connectionStatus];
   const connectorColorClass = connectionName === "botFirmware" &&
     colorClass === "yellow" ? "red" : colorClass;
   const hoverClass = hoveredConnection === connectionName ? "hover" : "";
   const hoverOver = props.hover ? props.hover : () => { };
   const className = props.header
     ? "saucer active grey"
-    : `saucer active ${colorClass} ${hoverClass}`;
+    : `diagnosis-indicator saucer active ${colorClass} ${hoverClass}`;
+  const icon = iconLookup["" + connectionStatus];
 
   const getTitle = () => {
     switch (connectionStatus) {
@@ -45,7 +52,9 @@ export function ConnectivityRow(props: StatusRowProps) {
       <div className={className}
         title={props.header ? t("Status") : getTitle()}
         onMouseEnter={hoverOver(connectionName)}
-        onMouseLeave={hoverOver(undefined)} />
+        onMouseLeave={hoverOver(undefined)}>
+        {!props.header && <i className={`fa fa-${icon}`} />}
+      </div>
       {!props.header &&
         <div className={`saucer-connector ${connectorColorClass}`} />}
     </Col>

frontend/devices/connectivity/diagnosis.tsx

@@ -21,20 +21,23 @@ export const DiagnosisSaucer = (props: DiagnosisProps) => {
   const diagnosisBoolean = diagnosisStatus(props);
   const diagnosisColor = diagnosisBoolean ? "green" : "red";
   const title = diagnosisBoolean ? t("Ok") : t("Error");
-  return <div className={"saucer active " + diagnosisColor} title={title} />;
+  return <div
+    className={"diagnosis-indicator saucer active " + diagnosisColor}
+    title={title}>
+    <i className={`fa fa-${diagnosisBoolean ? "check" : "times"}`} />
+  </div>;
 };
 
 export function Diagnosis(props: DiagnosisProps) {
   const diagnosisBoolean = diagnosisStatus(props);
   const diagnosisColor = diagnosisBoolean ? "green" : "red";
-  const title = diagnosisBoolean ? t("Ok") : t("Error");
   return <div className={"diagnosis-section"}>
     <div className={"connectivity-diagnosis"}>
       <h4>{t("Diagnosis")}</h4>
     </div>
     <Row>
       <Col xs={1}>
-        <div className={"saucer active " + diagnosisColor} title={title} />
+        <DiagnosisSaucer {...props} />
         <div className={"saucer-connector last " + diagnosisColor} />
       </Col>
       <Col xs={10} className={"connectivity-diagnosis"}>