@nitin15j/plugin-dora-frontend
Version:
Welcome to the dora-frontend plugin!
106 lines (103 loc) • 3.6 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useEntity } from '@backstage/plugin-catalog-react';
import { Alert } from '@material-ui/lab';
import { makeStyles } from '@material-ui/core/styles';
import { CircularProgress, Grid, Paper } from '@material-ui/core';
import { TimeRangeSelector } from '../shared/components/TimeRangeSelector.esm.js';
import { useEntityMetrics } from './hooks/useEntityMetrics.esm.js';
import { MetricsPerformance } from './components/MetricsPerformance.esm.js';
import { MetricSummary } from './components/MetricSummary.esm.js';
import './components/MetricsPerformanceTable.esm.js';
import './components/MetricsPerformanceTableRow.esm.js';
const useStyles = makeStyles({
error: {
marginBottom: "1rem"
},
container: {
padding: "1rem"
},
paper: {
padding: "1rem",
marginBottom: "1rem"
},
title: {
marginBottom: "1rem",
fontSize: "1.25rem",
fontWeight: 500
},
loader: {
display: "flex",
justifyContent: "center",
alignItems: "center",
minHeight: "200px"
},
content: {
position: "relative"
},
loadingOverlay: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(255, 255, 255, 0.7)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 1
}
});
const EntityDashboard = () => {
const classes = useStyles();
const { entity } = useEntity();
const projectSlug = entity.metadata.annotations?.["sleuth.io/project-slug"];
if (!projectSlug) {
return /* @__PURE__ */ jsxs(Alert, { severity: "warning", className: classes.error, children: [
"No Sleuth project Slug found in entity annotations. Add the 'sleuth.io/project-slug' annotation to view DORA metrics.",
/* @__PURE__ */ jsx("br", {}),
"Available annotations: ",
JSON.stringify(entity.metadata.annotations, null, 2)
] });
}
const {
metrics,
insights,
loading,
error,
selectedTimeRange,
setSelectedTimeRange
} = useEntityMetrics(entity);
if (error) {
return /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(Alert, { severity: "error", className: classes.error, children: error }) });
}
return /* @__PURE__ */ jsxs("div", { className: classes.container, children: [
/* @__PURE__ */ jsx(
TimeRangeSelector,
{
selectedRange: selectedTimeRange,
onRangeChange: setSelectedTimeRange
}
),
/* @__PURE__ */ jsxs("div", { className: classes.content, children: [
loading && /* @__PURE__ */ jsx("div", { className: classes.loadingOverlay, children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
/* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
/* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Paper, { className: classes.paper, children: [
/* @__PURE__ */ jsx("div", { className: classes.title, children: "DORA Metrics Overview" }),
/* @__PURE__ */ jsx(
MetricSummary,
{
metrics,
insights
}
)
] }) }),
/* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Paper, { className: classes.paper, children: [
/* @__PURE__ */ jsx("div", { className: classes.title, children: "Detailed DORA Metrics" }),
/* @__PURE__ */ jsx(MetricsPerformance, { metrics })
] }) })
] })
] })
] });
};
export { EntityDashboard };
//# sourceMappingURL=EntityDashboard.esm.js.map