@pagerduty/backstage-plugin
Version:
A Backstage plugin that integrates towards PagerDuty
114 lines (111 loc) • 4.43 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { makeStyles, withStyles, LinearProgress, Card, Typography, IconButton, Tooltip } 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';
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",
display: "grid",
gridTemplateRows: "1fr auto auto",
backgroundColor: "rgba(0, 0, 0, 0.03)"
},
containerStyle: {
display: "flex",
justifyContent: "center",
marginTop: compact !== true ? "-100px" : "-50px"
},
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",
justifyContent: "center",
marginLeft: "-2px",
marginTop: compact !== true ? "25px" : "20px"
},
tooltipContainer: {},
tooltipIcon: {
marginRight: "5px"
},
standardItem: {
display: "flex",
alignItems: "center"
}
}));
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,
containerStyle,
largeTextStyle,
smallTextStyle,
tooltipContainer,
tooltipIcon,
standardItem
} = useStyles();
if (standards === void 0 || completed === void 0 || total === void 0) {
return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: /* @__PURE__ */ jsx("div", { className: containerStyle, children: /* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: "Unable to retrieve Scores" }) }) });
}
return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: completed !== void 0 && total !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", { className: tooltipContainer, children: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(
Tooltip,
{
interactive: true,
title: /* @__PURE__ */ jsx(Fragment, { 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)) }),
children: /* @__PURE__ */ jsx(InfoIcon, {})
}
) }) }),
/* @__PURE__ */ jsxs("div", { className: containerStyle, children: [
/* @__PURE__ */ jsx(Typography, { className: largeTextStyle, children: completed }),
/* @__PURE__ */ jsxs(Typography, { className: smallTextStyle, children: [
"/",
total
] })
] }),
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
BorderLinearProgress,
{
variant: "determinate",
value: completed / total * 100
}
) })
] }) : /* @__PURE__ */ jsx("div", { className: containerStyle, children: /* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: "Unable to retrieve Scores" }) }) });
}
export { ServiceStandardsCard as default };
//# sourceMappingURL=ServiceStandardsCard.esm.js.map