@pagerduty/backstage-plugin
Version:
A Backstage plugin that integrates towards PagerDuty
96 lines (93 loc) • 4.4 kB
JavaScript
import { makeStyles, withStyles, LinearProgress, Card, Typography, IconButton, Tooltip } from '@material-ui/core';
import React from 'react';
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__ */ React.createElement(Card, { className: cardStyle }, /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, "Unable to retrieve Scores")));
}
return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, completed !== void 0 && total !== void 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: tooltipContainer }, /* @__PURE__ */ React.createElement(IconButton, null, /* @__PURE__ */ React.createElement(
Tooltip,
{
interactive: true,
title: /* @__PURE__ */ React.createElement(React.Fragment, null, standards?.map((standard, key) => /* @__PURE__ */ React.createElement("p", { key }, standard.pass ? /* @__PURE__ */ React.createElement("span", { className: standardItem }, /* @__PURE__ */ React.createElement(CheckCircle, { className: tooltipIcon }), " ", standard.name) : /* @__PURE__ */ React.createElement("span", { className: standardItem }, /* @__PURE__ */ React.createElement(RadioButtonUncheckedIcon, { className: tooltipIcon }), " ", standard.name))))
},
/* @__PURE__ */ React.createElement(InfoIcon, null)
))), /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, completed), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, "/", total)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
BorderLinearProgress,
{
variant: "determinate",
value: completed / total * 100
}
))) : /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, "Unable to retrieve Scores")));
}
export { ServiceStandardsCard as default };
//# sourceMappingURL=ServiceStandardsCard.esm.js.map