@pagerduty/backstage-plugin/dist/components/PagerDutyCardCommon/StatusCard.esm.js

A Backstage plugin that integrates towards PagerDuty

import { Card, Typography } from '@material-ui/core';
import React, { useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { useApi } from '@backstage/core-plugin-api';
import { pagerDutyApiRef } from '../../api/client.esm.js';
import { useAsyncFn } from 'react-use';
import Alert from '@material-ui/lab/Alert/Alert';
import { Progress } from '@backstage/core-components';

function labelFromStatus(status) {
  let label;
  switch (status) {
    case "active":
      label = "OK";
      break;
    case "warning":
      label = "ACTIVE";
      break;
    case "critical":
      label = "ALARM";
      break;
    case "maintenance":
      label = "MAINTENANCE";
      break;
    case "disabled":
      label = "DISABLED";
      break;
    default:
      label = "OK";
      break;
  }
  return label;
}
function colorFromStatus(theme, status) {
  let color;
  switch (status) {
    case "active":
      color = theme.palette.success.main;
      break;
    case "warning":
      color = theme.palette.warningBackground;
      break;
    case "critical":
      color = theme.palette.error.main;
      break;
    case "maintenance":
      color = "#ebdc00";
      break;
    case "disabled":
      color = "#A9A9A9";
      break;
    default:
      color = theme.palette.success.main;
      break;
  }
  return color;
}
function StatusCard({ serviceId, refreshStatus, account, compact }) {
  const api = useApi(pagerDutyApiRef);
  const [{ value: status, loading, error }, getStatus] = useAsyncFn(
    async () => {
      const { service: foundService } = await api.getServiceById(serviceId, account);
      return foundService.status;
    }
  );
  const useStyles = makeStyles((theme) => ({
    cardStyle: {
      height: compact !== true ? "120px" : "80px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      backgroundColor: status !== void 0 ? colorFromStatus(theme, status) : colorFromStatus(theme, "active"),
      marginRight: "10px"
    },
    largeTextStyle: {
      color: "white",
      fontWeight: "bold",
      fontSize: "20px",
      wordWrap: "break-word"
    }
  }));
  const { cardStyle, largeTextStyle } = useStyles();
  useEffect(() => {
    getStatus();
  }, [refreshStatus, getStatus]);
  if (error) {
    if (error.message.includes("Forbidden")) {
      return /* @__PURE__ */ React.createElement("p", null, "forbidden");
    }
    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Error encountered while fetching information. ", error.message);
  }
  if (loading) {
    return /* @__PURE__ */ React.createElement(Progress, null);
  }
  if (!status) {
    return /* @__PURE__ */ React.createElement("p", null, "not found");
  }
  return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, status !== void 0 ? /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, labelFromStatus(status)) : /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, "Unable to get status"));
}

export { StatusCard as default };
//# sourceMappingURL=StatusCard.esm.js.map