github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/check/common/CheckCard.tsx (about)

     1  import IntegerDisplay from "../../../IntegerDisplay";
     2  import LoadingIndicator from "../../LoadingIndicator";
     3  import startCase from "lodash/startCase";
     4  import { classNames } from "../../../../utils/styles";
     5  import { getTextClasses, getWrapperClasses } from "../../../../utils/card";
     6  
     7  type ControlCardProps = {
     8    loading: boolean;
     9    status: "alarm" | "error" | "info" | "ok" | "skip";
    10    value: number;
    11  };
    12  
    13  const getCardStyle = (status) => {
    14    switch (status) {
    15      case "alarm":
    16      case "error":
    17        return "alert";
    18      case "info":
    19        return "info";
    20      case "ok":
    21        return "ok";
    22      default:
    23        return "plain";
    24    }
    25  };
    26  
    27  const getCardLabel = (status) => {
    28    switch (status) {
    29      case "alarm":
    30        return "Alarm";
    31      case "error":
    32        return "Error";
    33      case "info":
    34        return "Info";
    35      case "ok":
    36        return "OK";
    37      case "skip":
    38        return "Skip";
    39      default:
    40        return startCase(status);
    41    }
    42  };
    43  
    44  const CheckCard = ({ loading = true, status, value }: ControlCardProps) => {
    45    const cardStyle = getCardStyle(status);
    46    const cardLabel = getCardLabel(status);
    47    const wrapperClass = getWrapperClasses(cardStyle);
    48    const textClass = getTextClasses(cardStyle);
    49    return (
    50      <div
    51        className={classNames(
    52          "col-span-1 overflow-hidden shadow rounded-lg py-2 px-4",
    53          wrapperClass,
    54          // (status === "alarm" || status === "error") && value === 0
    55          // value === 0 ? "opacity-60" : null,
    56          textClass
    57        )}
    58      >
    59        <dt className="text-sm font-medium truncate">{cardLabel}</dt>
    60        <dd className="mt-1 text-3xl font-semibold truncate">
    61          {loading && <LoadingIndicator />}
    62          {!loading && <IntegerDisplay num={value} />}
    63        </dd>
    64      </div>
    65    );
    66  };
    67  
    68  export default CheckCard;