@backstage-community/plugin-xcmetrics 0.2.53

package/dist/esm/index-Dehp5p72.esm.js

@@ -0,0 +1,966 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Progress, TrendLine, Select, StatusAborted, StatusOK, StatusError, StatusWarning, EmptyState, ContentHeader, SupportButton, Table, InfoCard, StructuredMetadataTable, Page, Header, HeaderLabel, TabbedLayout, Content } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { x as xcmetricsApiRef, b as buildsRouteRef } from './index-DfJWmS4I.esm.js';
+import '@backstage/errors';
+import { Duration, DateTime } from 'luxon';
+import useAsync from 'react-use/esm/useAsync';
+import Alert from '@material-ui/lab/Alert';
+import { makeStyles, useTheme, createStyles } from '@material-ui/core/styles';
+import useMeasure from 'react-use/esm/useMeasure';
+import upperFirst from 'lodash/upperFirst';
+import Tooltip from '@material-ui/core/Tooltip';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import AlertTitle from '@material-ui/lab/AlertTitle';
+import Chip from '@material-ui/core/Chip';
+import IconButton from '@material-ui/core/IconButton';
+import Button from '@material-ui/core/Button';
+import FilterList from '@material-ui/icons/FilterList';
+import withStyles from '@material-ui/core/styles/withStyles';
+import InputBase from '@material-ui/core/InputBase/InputBase';
+import makeStyles$1 from '@material-ui/core/styles/makeStyles';
+import Typography$1 from '@material-ui/core/Typography/Typography';
+import Divider from '@material-ui/core/Divider';
+import MuiAccordion from '@material-ui/core/Accordion';
+import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Legend, Bar } from 'recharts';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import CloseIcon from '@material-ui/icons/Close';
+
+const sumField = (field, arr) => {
+  return arr == null ? void 0 : arr.reduce((sum, current) => sum + field(current), 0);
+};
+const getValues = (field, arr) => {
+  if (!(arr == null ? void 0 : arr.length)) {
+    return void 0;
+  }
+  return arr.map((element) => field(element));
+};
+
+const formatDuration = (seconds) => {
+  var _a;
+  const duration = Duration.fromObject({
+    seconds
+  }).shiftTo("hours", "minutes", "seconds", "milliseconds");
+  if (duration.hours + duration.minutes + duration.seconds === 0) {
+    return `${Math.round(duration.milliseconds)} ms`;
+  }
+  const h = duration.hours ? `${duration.hours} h` : "";
+  const m = duration.minutes ? `${duration.minutes} m` : "";
+  const s = duration.hours < 12 ? `${(_a = duration.seconds) != null ? _a : 0} s` : "";
+  return `${h} ${m} ${s}`;
+};
+const formatSecondsInterval = ([start, end]) => {
+  return `${Math.round(start * 100) / 100} s - ${Math.round(end * 100) / 100} s`;
+};
+const formatTime = (timestamp) => {
+  return DateTime.fromISO(timestamp).toLocaleString(
+    DateTime.DATETIME_SHORT_WITH_SECONDS
+  );
+};
+const formatPercentage = (number) => {
+  return `${Math.round(number * 100)} %`;
+};
+const formatStatus = (status) => upperFirst(status);
+
+const getErrorRatios = (buildCounts) => {
+  if (!(buildCounts == null ? void 0 : buildCounts.length)) {
+    return void 0;
+  }
+  return buildCounts.map(
+    (counts) => counts.builds === 0 ? 0 : counts.errors / counts.builds
+  );
+};
+const getAverageDuration = (buildTimes, field) => {
+  if (!(buildTimes == null ? void 0 : buildTimes.length)) {
+    return void 0;
+  }
+  return formatDuration(
+    buildTimes.reduce((sum, current) => sum + field(current), 0) / buildTimes.length
+  );
+};
+
+const classNames = (...args) => args.filter((c) => !!c).join(" ");
+const cn = classNames;
+
+const TooltipContent = ({ buildId }) => {
+  const client = useApi(xcmetricsApiRef);
+  const { value, loading, error } = useAsync(
+    async () => client.getBuild(buildId),
+    []
+  );
+  if (error) {
+    return /* @__PURE__ */ React.createElement("div", null, error.message);
+  }
+  if (loading || !(value == null ? void 0 : value.build)) {
+    return /* @__PURE__ */ React.createElement(Progress, { style: { width: 100 } });
+  }
+  return /* @__PURE__ */ React.createElement("table", null, /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, "Started"), /* @__PURE__ */ React.createElement("td", null, new Date(value.build.startTimestamp).toLocaleString())), /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, "Duration"), /* @__PURE__ */ React.createElement("td", null, formatDuration(value.build.duration))), /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, "Status"), /* @__PURE__ */ React.createElement("td", null, formatStatus(value.build.buildStatus)))));
+};
+const useStyles$9 = makeStyles((theme) => ({
+  root: {
+    width: ({ size }) => size,
+    height: ({ size }) => size,
+    marginRight: ({ spacing }) => spacing,
+    marginBottom: ({ spacing }) => spacing,
+    backgroundColor: theme.palette.grey[600],
+    "&:hover": {
+      transform: "scale(1.2)"
+    }
+  },
+  ...{
+    succeeded: {
+      backgroundColor: theme.palette.type === "light" ? theme.palette.success.light : theme.palette.success.main
+    }
+  },
+  // Make sure that key matches a status
+  ...{
+    failed: {
+      backgroundColor: theme.palette.error[theme.palette.type]
+    }
+  },
+  ...{
+    stopped: {
+      backgroundColor: theme.palette.warning[theme.palette.type]
+    }
+  }
+}));
+const StatusCell = (props) => {
+  const classes = useStyles$9(props);
+  const { buildStatus } = props;
+  if (!buildStatus) {
+    return /* @__PURE__ */ React.createElement("div", { className: classes.root });
+  }
+  return /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ React.createElement(TooltipContent, { buildId: buildStatus.id }),
+      enterNextDelay: 500,
+      arrow: true
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": buildStatus.id,
+        className: cn(classes.root, classes[buildStatus.buildStatus])
+      }
+    )
+  );
+};
+
+const CELL_SIZE = 12;
+const CELL_MARGIN = 4;
+const MAX_ROWS = 4;
+const useStyles$8 = makeStyles((theme) => ({
+  root: {
+    marginTop: 8,
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%"
+  },
+  loading: {
+    animation: `$loadingOpacity 900ms ${theme.transitions.easing.easeInOut}`,
+    animationIterationCount: "infinite"
+  },
+  "@keyframes loadingOpacity": {
+    "0%": { opacity: 0.3 },
+    "100%": { opacity: 0.8 }
+  }
+}));
+const StatusMatrix = () => {
+  const classes = useStyles$8();
+  const [measureRef, { width: rootWidth }] = useMeasure();
+  const client = useApi(xcmetricsApiRef);
+  const {
+    value: builds,
+    loading,
+    error
+  } = useAsync(async () => client.getBuildStatuses(300), []);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
+  }
+  const cols = Math.trunc(rootWidth / (CELL_SIZE + CELL_MARGIN)) || 1;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(classes.root, loading && classes.loading),
+      ref: measureRef
+    },
+    loading && [...new Array(cols * MAX_ROWS)].map((_, index) => {
+      return /* @__PURE__ */ React.createElement(StatusCell, { key: index, size: CELL_SIZE, spacing: CELL_MARGIN });
+    }),
+    builds && builds.slice(0, cols * MAX_ROWS).map((buildStatus, index) => /* @__PURE__ */ React.createElement(
+      StatusCell,
+      {
+        key: index,
+        buildStatus,
+        size: CELL_SIZE,
+        spacing: CELL_MARGIN
+      }
+    ))
+  );
+};
+
+const Trend = ({ data, title, color }) => {
+  const emptyData = [0, 0];
+  const max = Math.max(...data != null ? data : emptyData);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "overline" }, title), /* @__PURE__ */ React.createElement(
+    TrendLine,
+    {
+      data: data != null ? data : emptyData,
+      title,
+      max,
+      color: data && color
+    }
+  ));
+};
+
+const DataValue = ({ field, value }) => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, field), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, value != null ? value : "--"));
+};
+const DataValueGridItem = (props) => {
+  var _a, _b, _c;
+  return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: (_a = props.xs) != null ? _a : 6, md: (_b = props.md) != null ? _b : 6, lg: (_c = props.lg) != null ? _c : 4 }, /* @__PURE__ */ React.createElement(DataValue, { ...props }));
+};
+
+const useStyles$7 = makeStyles({
+  spacingTop: {
+    marginTop: 8
+  },
+  spacingVertical: {
+    marginTop: 8,
+    marginBottom: 8
+  }
+});
+const DAYS_SELECT_ITEMS = [
+  { label: "7 days", value: 7 },
+  { label: "14 days", value: 14 },
+  { label: "30 days", value: 30 },
+  { label: "60 days", value: 60 }
+];
+const OverviewTrends = () => {
+  var _a, _b;
+  const [days, setDays] = useState(14);
+  const theme = useTheme();
+  const classes = useStyles$7();
+  const client = useApi(xcmetricsApiRef);
+  const buildCountsResult = useAsync(
+    async () => client.getBuildCounts(days),
+    [days]
+  );
+  const buildTimesResult = useAsync(
+    async () => client.getBuildTimes(days),
+    [days]
+  );
+  if (buildCountsResult.loading && buildTimesResult.loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  const sumBuilds = sumField((b) => b.builds, buildCountsResult.value);
+  const sumErrors = sumField((b) => b.errors, buildCountsResult.value);
+  const errorRate = sumBuilds && sumErrors ? sumErrors / sumBuilds : void 0;
+  const averageBuildDurationP50 = getAverageDuration(
+    buildTimesResult.value,
+    (b) => b.durationP50
+  );
+  const averageBuildDurationP95 = getAverageDuration(
+    buildTimesResult.value,
+    (b) => b.durationP95
+  );
+  const totalBuildTime = sumField((t) => t.totalDuration, buildTimesResult.value);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      selected: days,
+      items: DAYS_SELECT_ITEMS,
+      label: "Trends for",
+      onChange: (selection) => setDays(selection)
+    }
+  ), buildCountsResult.error && /* @__PURE__ */ React.createElement(Alert, { severity: "error", className: classes.spacingVertical }, /* @__PURE__ */ React.createElement(AlertTitle, null, "Failed to fetch build counts"), (_a = buildCountsResult == null ? void 0 : buildCountsResult.error) == null ? void 0 : _a.message), buildTimesResult.error && /* @__PURE__ */ React.createElement(Alert, { severity: "error", className: classes.spacingVertical }, /* @__PURE__ */ React.createElement(AlertTitle, null, "Failed to fetch build times"), (_b = buildTimesResult == null ? void 0 : buildTimesResult.error) == null ? void 0 : _b.message), (!buildCountsResult.error || !buildTimesResult.error) && /* @__PURE__ */ React.createElement("div", { className: classes.spacingVertical }, /* @__PURE__ */ React.createElement(
+    Trend,
+    {
+      title: "Build Time",
+      color: theme.palette.secondary.main,
+      data: getValues((e) => e.durationP50, buildTimesResult.value)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Trend,
+    {
+      title: "Error Rate",
+      color: theme.palette.status.warning,
+      data: getErrorRatios(buildCountsResult.value)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Trend,
+    {
+      title: "Build Count",
+      color: theme.palette.primary.main,
+      data: getValues((e) => e.builds, buildCountsResult.value)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      spacing: 3,
+      direction: "row",
+      className: classes.spacingTop
+    },
+    /* @__PURE__ */ React.createElement(DataValueGridItem, { field: "Build Count", value: sumBuilds }),
+    /* @__PURE__ */ React.createElement(DataValueGridItem, { field: "Error Count", value: sumErrors }),
+    /* @__PURE__ */ React.createElement(
+      DataValueGridItem,
+      {
+        field: "Error Rate",
+        value: errorRate && formatPercentage(errorRate)
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      DataValueGridItem,
+      {
+        field: "Avg. Build Time (P50)",
+        value: averageBuildDurationP50
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      DataValueGridItem,
+      {
+        field: "Avg. Build Time (P95)",
+        value: averageBuildDurationP95
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      DataValueGridItem,
+      {
+        field: "Total Build Time",
+        value: totalBuildTime && formatDuration(totalBuildTime)
+      }
+    )
+  )));
+};
+
+const STATUS_ICONS = {
+  succeeded: /* @__PURE__ */ React.createElement(StatusOK, null),
+  failed: /* @__PURE__ */ React.createElement(StatusError, null),
+  stopped: /* @__PURE__ */ React.createElement(StatusWarning, null)
+};
+const StatusIcon = ({ buildStatus }) => {
+  var _a;
+  return (_a = STATUS_ICONS[buildStatus]) != null ? _a : /* @__PURE__ */ React.createElement(StatusAborted, null);
+};
+
+const baseColumns = [
+  {
+    field: "buildStatus",
+    render: (data) => /* @__PURE__ */ React.createElement(StatusIcon, { buildStatus: data.buildStatus })
+  },
+  {
+    title: "Project",
+    field: "projectName"
+  },
+  {
+    title: "Schema",
+    field: "schema"
+  },
+  {
+    title: "Started",
+    field: "startedAt",
+    render: (data) => formatTime(data.startTimestamp),
+    cellStyle: { whiteSpace: "nowrap" }
+  },
+  {
+    title: "Duration",
+    field: "duration",
+    render: (data) => formatDuration(data.duration)
+  },
+  {
+    title: "User",
+    field: "userid"
+  }
+];
+const isCi = {
+  field: "isCI",
+  render: (data) => data.isCi && /* @__PURE__ */ React.createElement(Chip, { label: "CI", size: "small" }),
+  width: "10",
+  sorting: false
+};
+const overviewColumns = [...baseColumns, isCi];
+const buildPageColumns = [
+  ...baseColumns,
+  {
+    title: "Host",
+    field: "machineName"
+  },
+  {
+    title: "Warnings",
+    field: "warningCount"
+  },
+  {
+    title: "Category",
+    field: "category",
+    render: (data) => /* @__PURE__ */ React.createElement(Chip, { label: data.category, size: "small" })
+  },
+  isCi
+];
+
+const Overview = () => {
+  const client = useApi(xcmetricsApiRef);
+  const {
+    value: builds,
+    loading,
+    error
+  } = useAsync(async () => client.getBuilds(), []);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  } else if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
+  }
+  if (!builds || !builds.length) {
+    return /* @__PURE__ */ React.createElement(
+      EmptyState,
+      {
+        missing: "data",
+        title: "No builds to show",
+        description: "There are no builds in XCMetrics yet"
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "XCMetrics Dashboard" }, /* @__PURE__ */ React.createElement(SupportButton, null, "Dashboard for XCMetrics")), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "row" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 8, xl: 9 }, /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      options: {
+        paging: false,
+        search: false,
+        sorting: false,
+        draggable: false
+      },
+      data: builds,
+      columns: overviewColumns,
+      title: /* @__PURE__ */ React.createElement(React.Fragment, null, "Latest Builds", /* @__PURE__ */ React.createElement(StatusMatrix, null))
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 4, lg: 4, xl: 3 }, /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(OverviewTrends, null)))));
+};
+
+const BootstrapInput = withStyles(
+  (theme) => createStyles({
+    root: {
+      margin: theme.spacing(1, 0),
+      maxWidth: 300,
+      "label + &": {
+        marginTop: theme.spacing(3)
+      }
+    },
+    input: {
+      borderRadius: 4,
+      position: "relative",
+      backgroundColor: theme.palette.background.paper,
+      border: "1px solid #ced4da",
+      fontSize: 16,
+      padding: "10px 26px 10px 12px",
+      transition: theme.transitions.create(["border-color", "box-shadow"]),
+      fontFamily: "Helvetica Neue",
+      height: 25,
+      "&:focus": {
+        background: theme.palette.background.paper,
+        borderRadius: 4
+      }
+    }
+  })
+)(InputBase);
+const useStyles$6 = makeStyles$1({
+  root: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+const DatePicker = ({
+  label,
+  onDateChange,
+  ...inputProps
+}) => {
+  const classes = useStyles$6();
+  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "button" }, label), /* @__PURE__ */ React.createElement(
+    BootstrapInput,
+    {
+      inputProps: { "aria-label": label },
+      type: "date",
+      fullWidth: true,
+      onChange: (event) => onDateChange == null ? void 0 : onDateChange(event.target.value),
+      ...inputProps
+    }
+  ));
+};
+
+const toSelectItems = (strings) => {
+  return strings.map((str) => ({ label: str, value: str }));
+};
+const useStyles$5 = makeStyles((theme) => ({
+  filtersContent: {
+    padding: theme.spacing(2, 2, 2, 2.5)
+  }
+}));
+const BuildListFilter = ({
+  onFilterChange,
+  initialValues
+}) => {
+  const client = useApi(xcmetricsApiRef);
+  const classes = useStyles$5();
+  const [open, setOpen] = useState(false);
+  const [values, setValues] = useState(initialValues);
+  useEffect(() => onFilterChange(values), [onFilterChange, values]);
+  const numFilters = Object.keys(values).reduce((sum, key) => {
+    const filtersKey = key;
+    return sum + Number(values[filtersKey] !== initialValues[filtersKey]);
+  }, 0);
+  const title = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      onClick: () => setOpen(!open),
+      "aria-label": `${open ? "hide" : "show"} filters`
+    },
+    /* @__PURE__ */ React.createElement(FilterList, null)
+  ), "Filters (", numFilters, ")", !!numFilters && /* @__PURE__ */ React.createElement(Button, { color: "primary", onClick: () => setValues(initialValues) }, "Clear all"));
+  const statusItems = [
+    { label: "All", value: "all" },
+    { label: "Succeeded", value: "succeeded" },
+    { label: "Failed", value: "failed" },
+    { label: "Stopped", value: "stopped" }
+  ];
+  const { value: projects, loading } = useAsync(async () => {
+    return client.getProjects();
+  }, []);
+  const content = /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      spacing: 3,
+      direction: "row",
+      className: classes.filtersContent
+    },
+    /* @__PURE__ */ React.createElement(Grid, { item: true, sm: 6, md: 4, lg: 2 }, /* @__PURE__ */ React.createElement(
+      DatePicker,
+      {
+        label: "From",
+        value: values.from,
+        onDateChange: (date) => setValues({ ...values, from: date })
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, sm: 6, md: 4, lg: 2 }, /* @__PURE__ */ React.createElement(
+      DatePicker,
+      {
+        label: "To",
+        value: values.to,
+        onDateChange: (date) => setValues({ ...values, to: date })
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, sm: 6, md: 4, lg: 2 }, /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        label: "Status",
+        items: statusItems,
+        selected: !values.buildStatus ? "all" : values.buildStatus,
+        onChange: (selection) => {
+          const buildStatus = selection === "all" ? void 0 : selection;
+          setValues({ ...values, buildStatus });
+        }
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, sm: 6, md: 4, lg: 2 }, loading ? /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        label: "Project",
+        placeholder: "Loading..",
+        items: [],
+        onChange: () => void 0
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        label: "Project",
+        items: toSelectItems(["All"].concat(projects != null ? projects : [])),
+        selected: values.project ? values.project : "All",
+        onChange: (selection) => setValues({
+          ...values,
+          project: selection === "All" ? void 0 : selection
+        })
+      }
+    ))
+  );
+  return /* @__PURE__ */ React.createElement(
+    InfoCard,
+    {
+      title,
+      titleTypographyProps: { variant: "h6" },
+      divider: open,
+      noPadding: true,
+      variant: "gridItem"
+    },
+    open && content
+  );
+};
+
+const useStyles$4 = makeStyles(
+  (theme) => createStyles({
+    heading: {
+      flexBasis: "33.33%",
+      flexShrink: 0
+    },
+    secondaryHeading: {
+      color: theme.palette.text.secondary
+    }
+  })
+);
+const Accordion = (props) => {
+  var _a;
+  const classes = useStyles$4();
+  return /* @__PURE__ */ React.createElement(
+    MuiAccordion,
+    {
+      disabled: props.disabled,
+      TransitionProps: { unmountOnExit: (_a = props.unmountOnExit) != null ? _a : false }
+    },
+    /* @__PURE__ */ React.createElement(
+      MuiAccordionSummary,
+      {
+        expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
+        "aria-controls": `${props.id}-content`,
+        id: `${props.id}-header`
+      },
+      /* @__PURE__ */ React.createElement(Typography, { className: classes.heading }, props.heading),
+      /* @__PURE__ */ React.createElement(Typography, { className: classes.secondaryHeading }, props.secondaryHeading)
+    ),
+    /* @__PURE__ */ React.createElement(AccordionDetails, null, props.children)
+  );
+};
+
+const EMPTY_HEIGHT = 100;
+const useStyles$3 = makeStyles(
+  (theme) => createStyles({
+    toolTip: {
+      backgroundColor: theme.palette.background.paper,
+      opacity: 0.8,
+      padding: 8
+    }
+  })
+);
+const TargetToolTip = ({ active, payload, label }) => {
+  const classes = useStyles$3();
+  if (active && payload && payload.length === 2) {
+    const buildTime = payload[0].value[1] - payload[0].value[0];
+    const compileTime = payload[1].value[1] - payload[1].value[0];
+    return /* @__PURE__ */ React.createElement("div", { className: classes.toolTip }, `${label}: ${formatSecondsInterval(payload[0].value)}`, /* @__PURE__ */ React.createElement("br", null), buildTime > 0 && `Compile time: ${formatPercentage(compileTime / buildTime)}`);
+  }
+  return null;
+};
+const getTimelineData = (targets) => {
+  const min = targets[0].startTimestampMicroseconds;
+  return targets.filter((target) => target.fetchedFromCache === false).map((target) => ({
+    name: target.name,
+    buildTime: [
+      target.startTimestampMicroseconds - min,
+      target.endTimestampMicroseconds - min
+    ],
+    compileTime: [
+      target.startTimestampMicroseconds - min,
+      target.compilationEndTimestampMicroseconds - min
+    ]
+  }));
+};
+const BuildTimeline = ({
+  targets,
+  height,
+  width
+}) => {
+  const theme = useTheme();
+  if (!targets.length)
+    return /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "No Targets");
+  const data = getTimelineData(targets);
+  return /* @__PURE__ */ React.createElement(
+    ResponsiveContainer,
+    {
+      height,
+      width,
+      minHeight: EMPTY_HEIGHT + targets.length * 5
+    },
+    /* @__PURE__ */ React.createElement(BarChart, { layout: "vertical", data, maxBarSize: 10, barGap: 0 }, /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "2 2" }), /* @__PURE__ */ React.createElement(XAxis, { type: "number", domain: [0, "dataMax"] }), /* @__PURE__ */ React.createElement(YAxis, { type: "category", dataKey: "name", padding: { top: 0, bottom: 0 } }), /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(TargetToolTip, null) }), /* @__PURE__ */ React.createElement(Legend, null), /* @__PURE__ */ React.createElement(
+      Bar,
+      {
+        dataKey: "buildTime",
+        fill: theme.palette.grey[400],
+        minPointSize: 1
+      }
+    ), /* @__PURE__ */ React.createElement(Bar, { dataKey: "compileTime", fill: theme.palette.primary.main }))
+  );
+};
+
+const useStyles$2 = makeStyles(
+  (theme) => createStyles({
+    pre: {
+      whiteSpace: "pre-line",
+      wordBreak: "break-all"
+    },
+    expandable: {
+      cursor: "pointer"
+    },
+    fullPre: {
+      whiteSpace: "pre-wrap"
+    },
+    closeButton: {
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  })
+);
+const PreformattedText = ({
+  text,
+  maxChars,
+  expandable,
+  title
+}) => {
+  const [open, setOpen] = useState(false);
+  const classes = useStyles$2();
+  const handleKeyUp = (event) => {
+    if (expandable && event.key === "Enter") {
+      setOpen(true);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: expandable ? "button" : void 0,
+      onClick: () => expandable && setOpen(true),
+      onKeyUp: handleKeyUp,
+      tabIndex: expandable ? 0 : void 0
+    },
+    /* @__PURE__ */ React.createElement("pre", { className: cn(classes.pre, expandable && classes.expandable) }, text.slice(0, maxChars - 1).trim(), text.length > maxChars - 1 && "\u2026")
+  ), expandable && /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open,
+      onClose: () => setOpen(false),
+      "aria-labelledby": "dialog-title",
+      "aria-describedby": "dialog-description",
+      maxWidth: "xl",
+      fullWidth: true
+    },
+    /* @__PURE__ */ React.createElement(DialogTitle, { id: "dialog-title" }, title, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        "aria-label": "close",
+        className: classes.closeButton,
+        onClick: () => setOpen(false)
+      },
+      /* @__PURE__ */ React.createElement(CloseIcon, null)
+    )),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement("pre", { className: classes.fullPre }, text)),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { color: "primary", onClick: () => setOpen(false) }, "Close"))
+  ));
+};
+
+const useStyles$1 = makeStyles(
+  (theme) => createStyles({
+    divider: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2)
+    }
+  })
+);
+const BuildDetails = ({
+  buildData: { build, targets, xcode },
+  showId
+}) => {
+  var _a, _b;
+  const classes = useStyles$1();
+  const client = useApi(xcmetricsApiRef);
+  const hostResult = useAsync(
+    async () => client.getBuildHost(build.id),
+    [build.id]
+  );
+  const errorsResult = useAsync(
+    async () => client.getBuildErrors(build.id),
+    [build.id]
+  );
+  const warningsResult = useAsync(
+    async () => client.getBuildWarnings(build.id),
+    [build.id]
+  );
+  const metadataResult = useAsync(
+    async () => client.getBuildMetadata(build.id),
+    [build.id]
+  );
+  const buildDetails = {
+    project: build.projectName,
+    schema: build.schema,
+    category: build.category,
+    userId: build.userid,
+    "started at": formatTime(build.startTimestamp),
+    "ended at": formatTime(build.endTimestamp),
+    duration: formatDuration(build.duration),
+    status: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StatusIcon, { buildStatus: build.buildStatus }), formatStatus(build.buildStatus)),
+    xcode: xcode ? `${xcode.version} (${xcode.buildNumber})` : "Unknown",
+    CI: build.isCi
+  };
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, item: true, direction: "row" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    StructuredMetadataTable,
+    {
+      metadata: showId === false ? buildDetails : { id: build.id, ...buildDetails }
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 8 }, /* @__PURE__ */ React.createElement(
+    Accordion,
+    {
+      id: "buildHost",
+      heading: "Host",
+      secondaryHeading: build.machineName
+    },
+    hostResult.loading && /* @__PURE__ */ React.createElement(Progress, null),
+    !hostResult.loading && hostResult.value && /* @__PURE__ */ React.createElement(StructuredMetadataTable, { metadata: hostResult.value })
+  ), /* @__PURE__ */ React.createElement(
+    Accordion,
+    {
+      id: "buildErrors",
+      heading: "Errors",
+      secondaryHeading: build.errorCount,
+      disabled: build.errorCount === 0
+    },
+    /* @__PURE__ */ React.createElement("div", null, errorsResult.loading && /* @__PURE__ */ React.createElement(Progress, null), !errorsResult.loading && ((_a = errorsResult.value) == null ? void 0 : _a.map((error, idx) => /* @__PURE__ */ React.createElement("div", { key: error.id }, /* @__PURE__ */ React.createElement(
+      PreformattedText,
+      {
+        title: "Error Details",
+        text: error.detail,
+        maxChars: 190,
+        expandable: true
+      }
+    ), idx !== errorsResult.value.length - 1 && /* @__PURE__ */ React.createElement(Divider, { className: classes.divider })))))
+  ), /* @__PURE__ */ React.createElement(
+    Accordion,
+    {
+      id: "buildWarnings",
+      heading: "Warnings",
+      secondaryHeading: build.warningCount,
+      disabled: build.warningCount === 0
+    },
+    /* @__PURE__ */ React.createElement("div", null, warningsResult.loading && /* @__PURE__ */ React.createElement(Progress, null), !warningsResult.loading && ((_b = warningsResult.value) == null ? void 0 : _b.map((warning, idx) => {
+      var _a2;
+      return /* @__PURE__ */ React.createElement("div", { key: warning.id }, /* @__PURE__ */ React.createElement(
+        PreformattedText,
+        {
+          title: "Warning Details",
+          text: (_a2 = warning.detail) != null ? _a2 : warning.title,
+          maxChars: 190,
+          expandable: true
+        }
+      ), idx !== warningsResult.value.length - 1 && /* @__PURE__ */ React.createElement(Divider, { className: classes.divider }));
+    })))
+  ), /* @__PURE__ */ React.createElement(
+    Accordion,
+    {
+      id: "buildMetadata",
+      heading: "Metadata",
+      disabled: !metadataResult.loading && !metadataResult.value
+    },
+    metadataResult.loading && /* @__PURE__ */ React.createElement(Progress, null),
+    !metadataResult.loading && metadataResult.value && /* @__PURE__ */ React.createElement(StructuredMetadataTable, { metadata: metadataResult.value })
+  ), /* @__PURE__ */ React.createElement(Accordion, { id: "buildTimeline", heading: "Timeline", unmountOnExit: true }, /* @__PURE__ */ React.createElement(BuildTimeline, { targets }))));
+};
+const withRequest = (Component) => ({ buildId, ...props }) => {
+  const client = useApi(xcmetricsApiRef);
+  const {
+    value: buildResponse,
+    loading,
+    error
+  } = useAsync(async () => client.getBuild(buildId), []);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
+  }
+  if (!buildResponse) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Could not load build ", buildId);
+  }
+  return /* @__PURE__ */ React.createElement(Component, { ...props, buildData: buildResponse });
+};
+
+const useStyles = makeStyles(
+  (theme) => createStyles({
+    detailPanel: {
+      padding: theme.spacing(2),
+      backgroundColor: theme.palette.background.paper
+    }
+  })
+);
+const BuildList = () => {
+  const classes = useStyles();
+  const client = useApi(xcmetricsApiRef);
+  const tableRef = useRef();
+  const initialFilters = {
+    from: DateTime.now().minus({ years: 1 }).toISODate(),
+    to: DateTime.now().toISODate()
+  };
+  const [filters, setFilters] = useState(initialFilters);
+  const handleFilterChange = (values) => {
+    var _a;
+    setFilters(values);
+    (_a = tableRef.current) == null ? void 0 : _a.onQueryChange();
+  };
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React.createElement(
+    BuildListFilter,
+    {
+      onFilterChange: handleFilterChange,
+      initialValues: initialFilters
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      title: "Builds",
+      columns: buildPageColumns,
+      options: { paging: true, sorting: false, search: false, pageSize: 10 },
+      tableRef,
+      data: (query) => {
+        return new Promise((resolve, reject) => {
+          if (!query)
+            return;
+          client.getFilteredBuilds(
+            filters,
+            query.page + 1,
+            // Page is 0-indexed in Table
+            query.pageSize
+          ).then((result) => {
+            resolve({
+              data: result.items,
+              page: result.metadata.page - 1,
+              totalCount: result.metadata.total
+            });
+          }).catch((reason) => reject(reason));
+        });
+      },
+      detailPanel: (rowData) => {
+        const BuildDetailsWithRequest = withRequest(BuildDetails);
+        return /* @__PURE__ */ React.createElement("div", { className: classes.detailPanel }, /* @__PURE__ */ React.createElement(BuildDetailsWithRequest, { buildId: rowData.rowData.id }));
+      }
+    }
+  ));
+};
+
+const TABS = [
+  {
+    path: "/",
+    title: "Overview",
+    component: /* @__PURE__ */ React.createElement(Overview, null)
+  },
+  {
+    path: buildsRouteRef.path,
+    title: "Builds",
+    component: /* @__PURE__ */ React.createElement(BuildList, null)
+  }
+];
+const XcmetricsLayout = () => /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "XCMetrics", subtitle: "Dashboard" }, /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Owner", value: "Spotify" }), /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Lifecycle", value: "Alpha" })), /* @__PURE__ */ React.createElement(TabbedLayout, null, TABS.map((tab) => /* @__PURE__ */ React.createElement(TabbedLayout.Route, { key: tab.path, path: tab.path, title: tab.title }, /* @__PURE__ */ React.createElement(Content, null, tab.component)))));
+
+export { XcmetricsLayout };
+//# sourceMappingURL=index-Dehp5p72.esm.js.map