HostIcons.js

import { Tooltip, useTheme } from "@material-ui/core";
import { Brightness1, ErrorOutline, RadioButtonUnchecked } from "@material-ui/icons";
import React from "react";

export function HostStatusIcon({ host }) {

  const theme = useTheme();

  // const statusBulbColors = {
  //   "ok": theme.palette.success.light,
  //   "down": theme.palette.text.disabled,
  //   "unreachable": theme.palette.secondary.light,
  //   "undeployed": theme.palette.text.disabled,
  // };

  // const statusBulbIcons = {
  //   "ok": <Brightness1 />,
  //   "down": <Brightness1 />,
  //   "unreachable": <ErrorOutline />,
  //   "undeployed": <RadioButtonUnchecked />,
  // }

  const statusBulbColors = {
    "available": theme.palette.success.light,
    "unreachable": theme.palette.secondary.light,
    null: theme.palette.text.disabled,
  };

  const statusBulbIcons = {
    "available": <Tooltip title="Available"><Brightness1 /></Tooltip>,
    "unreachable": <Tooltip title="Unreachable"><ErrorOutline /></Tooltip>,
    null: <Tooltip title="Unknown"><RadioButtonUnchecked /></Tooltip>,
  }
  
  let state = host.status ? (host.status.toLowerCase()) : null;

  const iconStyle = { fill: statusBulbColors[state] };
  const icon = React.cloneElement(statusBulbIcons[state], { style: iconStyle });

  return icon;
}