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

A Backstage plugin that integrates towards PagerDuty

import { jsx, jsxs } from 'react/jsx-runtime';
import { makeStyles, withStyles, LinearProgress, Typography } from '@material-ui/core';
import InfoIcon from '@material-ui/icons/Info';
import CheckCircle from '@material-ui/icons/CheckCircle';
import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
import { Card, Flex, TooltipTrigger, ButtonIcon, Tooltip } from '@backstage/ui';

function colorFromPercentage(theme, percentage) {
  if (percentage < 0.5) {
    return theme.palette.error.main;
  } else if (percentage < 0.8) {
    return theme.palette.warning.main;
  }
  return theme.palette.success.main;
}
function ServiceStandardsCard({ total, completed, standards, compact }) {
  const useStyles = makeStyles((theme) => ({
    cardStyle: {
      height: compact !== true ? "120px" : "80px",
      padding: 0,
      position: "relative",
      backgroundColor: "rgba(0, 0, 0, 0.03)"
    },
    largeTextStyle: {
      fontSize: compact !== true ? "50px" : "40px",
      color: completed !== void 0 && total !== void 0 ? colorFromPercentage(theme, completed / total) : colorFromPercentage(theme, 0),
      alignSelf: "center",
      justifyContent: "center"
    },
    smallTextStyle: {
      color: theme.palette.textSubtle,
      fontSize: compact !== true ? "14px" : "12px",
      fontWeight: "bold",
      alignSelf: "center",
      marginLeft: "-17px",
      marginBottom: "-26px"
    },
    tooltipIcon: {
      marginRight: "5px"
    },
    infoIcon: {
      color: "gray",
      "&:hover": {
        backgroundColor: "transparent"
      }
    },
    standardItem: {
      display: "flex",
      alignItems: "center"
    },
    linearProgressContainer: {
      left: 0,
      position: "absolute",
      bottom: 0,
      width: "100%",
      padding: "0px"
    },
    textContainerStyle: {
      position: "absolute",
      top: compact ? "5px" : "20px",
      width: "100%"
    },
    tooltipTriggerStyles: {
      position: "relative",
      zIndex: 1
    }
  }));
  const BorderLinearProgress = withStyles((theme) => ({
    root: {
      height: 10,
      borderRadius: 5,
      margin: 5
    },
    colorPrimary: {
      backgroundColor: theme.palette.grey[theme.palette.type === "light" ? 200 : 700]
    },
    bar: {
      borderRadius: 5,
      backgroundColor: completed !== void 0 && total !== void 0 ? colorFromPercentage(theme, completed / total) : colorFromPercentage(theme, 0)
    }
  }))(LinearProgress);
  const {
    cardStyle,
    largeTextStyle,
    smallTextStyle,
    linearProgressContainer,
    tooltipIcon,
    textContainerStyle,
    infoIcon,
    standardItem,
    tooltipTriggerStyles
  } = useStyles();
  if (standards === void 0 || completed === void 0 || total === void 0) {
    return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: "Unable to retrieve Scores" }) }) });
  }
  return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
    /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
      /* @__PURE__ */ jsx(
        ButtonIcon,
        {
          className: tooltipTriggerStyles,
          icon: /* @__PURE__ */ jsx(InfoIcon, { className: infoIcon }),
          variant: "tertiary"
        }
      ),
      /* @__PURE__ */ jsx(Tooltip, { children: standards?.map((standard, key) => /* @__PURE__ */ jsx(Typography, { children: standard.pass ? /* @__PURE__ */ jsxs(Typography, { className: standardItem, children: [
        /* @__PURE__ */ jsx(CheckCircle, { className: tooltipIcon }),
        " ",
        standard.name
      ] }) : /* @__PURE__ */ jsxs(Typography, { className: standardItem, children: [
        /* @__PURE__ */ jsx(RadioButtonUncheckedIcon, { className: tooltipIcon }),
        " ",
        standard.name
      ] }) }, key)) })
    ] }),
    /* @__PURE__ */ jsxs(Flex, { justify: "center", className: textContainerStyle, children: [
      /* @__PURE__ */ jsx(Typography, { className: largeTextStyle, children: completed }),
      /* @__PURE__ */ jsxs(Typography, { className: smallTextStyle, children: [
        "/",
        total
      ] })
    ] }),
    /* @__PURE__ */ jsx("div", { className: linearProgressContainer, children: /* @__PURE__ */ jsx(
      BorderLinearProgress,
      {
        variant: "determinate",
        value: completed / total * 100
      }
    ) })
  ] }) });
}

export { colorFromPercentage, ServiceStandardsCard as default };
//# sourceMappingURL=ServiceStandardsCard.esm.js.map