@backstage-community/plugin-cicd-statistics 0.1.37

package/dist/esm/entity-page-CNIrdNBp.esm.js

@@ -0,0 +1,1797 @@
+import React, { useState, useEffect, useCallback, useMemo, useContext, Fragment } from 'react';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { useApi, useApp, errorApiRef } from '@backstage/core-plugin-api';
+import { DateTime, Duration } from 'luxon';
+import { throttle, groupBy, countBy, capitalize, debounce } from 'lodash';
+import { cicdStatisticsApiRef, AbortError, statusTypes } from '../index.esm.js';
+import { map } from 'already';
+import { ReferenceArea, ResponsiveContainer, ComposedChart, Legend, CartesianGrid, XAxis, YAxis, Tooltip, Area, Line, Bar } from 'recharts';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import humanizeDuration from 'humanize-duration';
+import Button from '@material-ui/core/Button';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardContent from '@material-ui/core/CardContent';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import Tooltip$1 from '@material-ui/core/Tooltip';
+import ShowChartIcon from '@material-ui/icons/ShowChart';
+import BarChartIcon from '@material-ui/icons/BarChart';
+import MuiPickersUtilsProvider from '@material-ui/pickers/MuiPickersUtilsProvider';
+import { KeyboardDatePicker } from '@material-ui/pickers/DatePicker';
+import LuxonUtils from '@date-io/luxon';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Zoom from '@material-ui/core/Zoom';
+import Slider from '@material-ui/core/Slider';
+import useAsync from 'react-use/esm/useAsync';
+import Box from '@material-ui/core/Box';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Timeline from '@material-ui/lab/Timeline';
+import TimelineItem from '@material-ui/lab/TimelineItem';
+import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
+import TimelineConnector from '@material-ui/lab/TimelineConnector';
+import TimelineContent from '@material-ui/lab/TimelineContent';
+import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
+import TimelineDot from '@material-ui/lab/TimelineDot';
+
+function useCicdStatisticsApi() {
+  try {
+    return useApi(cicdStatisticsApiRef);
+  } catch (err) {
+    return void 0;
+  }
+}
+
+function useCicdStatistics(options) {
+  const {
+    entity,
+    abortController,
+    timeFrom,
+    timeTo,
+    filterStatus,
+    filterType
+  } = options;
+  const [state, setState] = useState({
+    loading: true
+  });
+  const cicdStatisticsApi = useCicdStatisticsApi();
+  useEffect(() => {
+    if (!cicdStatisticsApi) {
+      setState({ error: new Error("No CI/CD Statistics API installed") });
+      return () => {
+      };
+    }
+    let mounted = true;
+    let completed = false;
+    const updateProgressImpl = (_count, _total, _started) => {
+      if (!mounted || completed) {
+        return;
+      }
+      if (Array.isArray(_count)) {
+        setState({
+          loading: true,
+          steps: _count.map((step) => {
+            var _a;
+            return {
+              title: step.title,
+              progress: !step.total ? 0 : step.completed / step.total,
+              progressBuffer: !step.total ? 0 : ((_a = step.started) != null ? _a : 0) / step.total
+            };
+          })
+        });
+      } else {
+        const count = _count;
+        const total = _total;
+        const started = _started != null ? _started : 0;
+        setState({
+          loading: true,
+          progress: !total ? 0 : count / total,
+          progressBuffer: !total ? 0 : started / total
+        });
+      }
+    };
+    const updateProgress = throttle(
+      updateProgressImpl,
+      200
+      // throttle doesn't handle types of multi-signature functions
+    );
+    const fetchOptions = {
+      entity,
+      updateProgress,
+      abortSignal: abortController.signal,
+      timeFrom,
+      timeTo,
+      filterStatus,
+      filterType
+    };
+    (async () => {
+      return cicdStatisticsApi.fetchBuilds(fetchOptions);
+    })().then((builds) => {
+      completed = true;
+      if (mounted) {
+        setState({
+          value: builds
+        });
+      }
+    }).catch((err) => {
+      completed = true;
+      if (mounted) {
+        setState({
+          error: abortController.signal.aborted ? new AbortError() : err
+        });
+      }
+    });
+    return () => {
+      mounted = false;
+      abortController.abort();
+    };
+  }, [
+    abortController,
+    entity,
+    timeFrom,
+    timeTo,
+    filterStatus,
+    filterType,
+    cicdStatisticsApi
+  ]);
+  return state;
+}
+
+function defaultFormatStageName(parentNames, stageName) {
+  let name = stageName;
+  parentNames.forEach((parentName) => {
+    if (name.startsWith(parentName)) {
+      const newName = name.slice(parentName.length).replace(/^[^\w\d]+/g, "");
+      if (newName) {
+        name = newName;
+      }
+    }
+  });
+  return name.replace(/((pulling|(running)) [^:/]*\/.*?):.*/g, "$1");
+}
+async function cleanupBuildTree(builds, opts) {
+  const { formatStageName, lowerCase } = opts;
+  const recurseStage = (stage, parentNames) => {
+    var _a;
+    const name = formatStageName(
+      parentNames,
+      lowerCase ? stage.name.toLocaleLowerCase("en-US") : stage.name
+    );
+    const ancestry = [...parentNames, name];
+    return {
+      ...stage,
+      name,
+      stages: (_a = stage.stages) == null ? void 0 : _a.map((subStage) => recurseStage(subStage, ancestry))
+    };
+  };
+  return map(builds, { chunk: "idle" }, (build) => ({
+    ...build,
+    stages: build.stages.map((stage) => recurseStage(stage, []))
+  }));
+}
+
+function useCicdConfiguration() {
+  const cicdStatisticsApi = useCicdStatisticsApi();
+  const { entity } = useEntity();
+  const [state, setState] = useState({
+    loading: true
+  });
+  useEffect(() => {
+    if (!cicdStatisticsApi) {
+      setState({ error: new Error("No CI/CD Statistics API installed") });
+      return;
+    }
+    cicdStatisticsApi.getConfiguration({ entity }).then((configuration) => {
+      const {
+        availableStatuses = statusTypes,
+        formatStageName = defaultFormatStageName,
+        defaults = {}
+      } = configuration;
+      setState({
+        value: {
+          availableStatuses,
+          formatStageName,
+          defaults
+        }
+      });
+    }).catch((error) => {
+      setState({ error });
+    });
+  }, [cicdStatisticsApi, entity]);
+  return state;
+}
+
+function average(values) {
+  return !values.length ? 0 : Math.round(values.reduce((prev, cur) => prev + cur, 0) / values.length);
+}
+function getOrSetStage(stages, name) {
+  const stage = stages.get(name);
+  if (stage)
+    return stage;
+  const newStage = makeStage(name);
+  stages.set(name, newStage);
+  return newStage;
+}
+function makeStage(name) {
+  return {
+    analysis: {
+      unknown: { avg: 0, med: 0, max: 0, min: 0 },
+      enqueued: { avg: 0, med: 0, max: 0, min: 0 },
+      scheduled: { avg: 0, med: 0, max: 0, min: 0 },
+      running: { avg: 0, med: 0, max: 0, min: 0 },
+      aborted: { avg: 0, med: 0, max: 0, min: 0 },
+      succeeded: { avg: 0, med: 0, max: 0, min: 0 },
+      failed: { avg: 0, med: 0, max: 0, min: 0 },
+      stalled: { avg: 0, med: 0, max: 0, min: 0 },
+      expired: { avg: 0, med: 0, max: 0, min: 0 }
+    },
+    combinedAnalysis: { avg: 0, med: 0, max: 0, min: 0 },
+    statusSet: /* @__PURE__ */ new Set(),
+    name,
+    values: [],
+    stages: /* @__PURE__ */ new Map()
+  };
+}
+function startOfDay$1(date) {
+  if (typeof date === "number") {
+    return DateTime.fromMillis(date).startOf("day").toMillis();
+  }
+  return DateTime.fromJSDate(date).startOf("day").toMillis();
+}
+function sortTriggerReasons(reasons) {
+  return reasons.sort((a, b) => {
+    if (a === "manual")
+      return -1;
+    else if (b === "manual")
+      return 1;
+    else if (a === "scm")
+      return -1;
+    else if (b === "scm")
+      return 1;
+    else if (a === "other")
+      return -1;
+    else if (b === "other")
+      return 1;
+    return a.localeCompare(b);
+  });
+}
+function sortStatuses(statuses) {
+  return [
+    ...statusTypes.filter((status) => statuses.includes(status)),
+    ...statuses.filter((status) => !statusTypes.includes(status)).sort((a, b) => a.localeCompare(b))
+  ];
+}
+
+function countBuildsPerDay(values) {
+  const days = groupBy(values, (value) => startOfDay$1(value.__epoch));
+  Object.entries(days).forEach(([_startOfDay, valuesThisDay]) => {
+    const counts = Object.fromEntries(
+      statusTypes.map(
+        (type) => [
+          type,
+          valuesThisDay.filter((value) => value[type] !== void 0).length
+        ]
+      ).filter(([_type, count]) => count > 0).map(([type, count]) => [
+        `${type} count`,
+        count
+      ])
+    );
+    Object.assign(valuesThisDay[0], counts);
+  });
+}
+
+function getAnalysis(values, status) {
+  var _a, _b, _c;
+  const analysis = {
+    max: 0,
+    min: 0,
+    avg: 0,
+    med: 0
+  };
+  const definedValues = values.filter((value) => typeof value[status] !== "undefined").map((value) => value[status]).sort((a, b) => a - b);
+  analysis.max = (_a = definedValues[definedValues.length - 1]) != null ? _a : 0;
+  analysis.min = (_b = definedValues[0]) != null ? _b : 0;
+  analysis.avg = definedValues.length === 0 ? 0 : definedValues.reduce((prev, cur) => prev + cur, 0) / values.length;
+  analysis.med = (_c = definedValues[Math.ceil(definedValues.length / 2)]) != null ? _c : 0;
+  return analysis;
+}
+function makeCombinedAnalysis(analysis, allDurations) {
+  var _a;
+  if (analysis.succeeded) {
+    return analysis.succeeded;
+  }
+  const analysisValues = Object.values(analysis);
+  const max = analysisValues.reduce((prev, cur) => Math.max(prev, cur.max), 0);
+  const min = analysisValues.reduce(
+    (prev, cur) => Math.min(prev, cur.min),
+    max
+  );
+  const avg = !allDurations.length ? 0 : allDurations.reduce((prev, cur) => prev + cur, 0) / allDurations.length;
+  allDurations.sort((a, b) => a - b);
+  const med = (_a = allDurations[Math.ceil(allDurations.length / 2)]) != null ? _a : 0;
+  return {
+    max,
+    min,
+    avg,
+    med
+  };
+}
+
+function finalizeStage(stage, options) {
+  const { averageWidth, allEpochs } = options;
+  const { values, analysis, combinedAnalysis } = stage;
+  if (allEpochs.length > 0) {
+    const valueEpochs = new Set(values.map((value) => value.__epoch));
+    allEpochs.forEach((epoch) => {
+      if (!valueEpochs.has(epoch)) {
+        values.push({ __epoch: epoch });
+      }
+    });
+  }
+  values.sort((a, b) => a.__epoch - b.__epoch);
+  countBuildsPerDay(values);
+  const allDurations = [];
+  statusTypes.forEach((status) => {
+    analysis[status] = getAnalysis(values, status);
+    const durationsIndexes = values.map((value) => value[status]).map((duration, index) => ({ index, duration })).filter(({ duration }) => typeof duration !== "undefined").map(({ index }) => index);
+    const durationsDense = values.map((value) => value[status]).filter(
+      (duration) => typeof duration !== "undefined"
+    );
+    durationsDense.forEach((dur) => allDurations.push(dur));
+    const averages = durationsDense.map(
+      (_, i) => average(
+        durationsDense.slice(
+          Math.max(i - averageWidth, 0),
+          Math.min(i + averageWidth, durationsDense.length)
+        )
+      )
+    );
+    averages.forEach((avg, index) => {
+      const key = `${status} avg`;
+      values[durationsIndexes[index]][key] = avg;
+    });
+  });
+  Object.assign(combinedAnalysis, makeCombinedAnalysis(analysis, allDurations));
+  stage.stages.forEach((subStage) => finalizeStage(subStage, options));
+}
+
+function dailySummary(builds) {
+  const triggersDaily = countTriggersPerDay(builds);
+  const statusesDaily = countStatusesPerDay(builds);
+  const { triggerReasons } = triggersDaily;
+  const { statuses } = statusesDaily;
+  const reasonMap = new Map(
+    triggersDaily.values.map((value) => [value.__epoch, value])
+  );
+  const statusMap = new Map(
+    statusesDaily.values.map((value) => [value.__epoch, value])
+  );
+  const days = Object.keys(
+    groupBy(builds, (value) => startOfDay$1(value.requestedAt))
+  ).map((epoch) => parseInt(epoch, 10)).sort();
+  return {
+    values: days.map((epoch) => ({
+      __epoch: epoch,
+      ...reasonMap.get(epoch),
+      ...statusMap.get(epoch)
+    })),
+    triggerReasons,
+    statuses
+  };
+}
+function countTriggersPerDay(builds) {
+  const days = groupBy(builds, (value) => startOfDay$1(value.requestedAt));
+  const triggerReasons = sortTriggerReasons([
+    ...new Set(
+      builds.map(({ triggeredBy }) => triggeredBy).filter((v) => !!v)
+    )
+  ]);
+  const values = Object.entries(days).map(([epoch, buildsThisDay]) => {
+    const datapoint = Object.fromEntries(
+      triggerReasons.map(
+        (reason) => [
+          reason,
+          buildsThisDay.filter((build) => build.triggeredBy === reason).length
+        ]
+      ).filter(([_type, count]) => count > 0)
+    );
+    const value = Object.assign(datapoint, {
+      __epoch: parseInt(epoch, 10)
+    });
+    return value;
+  });
+  return { triggerReasons, values };
+}
+function countStatusesPerDay(builds) {
+  const days = groupBy(builds, (value) => startOfDay$1(value.requestedAt));
+  const foundStatuses = /* @__PURE__ */ new Set();
+  const values = Object.entries(days).map(([epoch, buildsThisDay]) => {
+    const byStatus = countBy(buildsThisDay, "status");
+    const value = {
+      __epoch: parseInt(epoch, 10),
+      ...byStatus
+    };
+    Object.keys(byStatus).forEach((status) => {
+      foundStatuses.add(status);
+    });
+    return value;
+  });
+  return {
+    statuses: sortStatuses([...foundStatuses]),
+    values
+  };
+}
+
+async function buildsToChartableStages(builds, options) {
+  const { normalizeTimeRange } = options;
+  const total = makeStage("Total");
+  const recurseDown = (stageMap, stage, __epoch) => {
+    var _a;
+    const { name, status, duration } = stage;
+    const subChartableStage = getOrSetStage(stageMap, name);
+    subChartableStage.statusSet.add(status);
+    subChartableStage.values.push({
+      __epoch,
+      [status]: duration,
+      [`${status} avg`]: duration
+    });
+    (_a = stage.stages) == null ? void 0 : _a.forEach((subStage) => {
+      recurseDown(subChartableStage.stages, subStage, __epoch);
+    });
+  };
+  const stages = /* @__PURE__ */ new Map();
+  await map(builds, { chunk: "idle" }, (build) => {
+    var _a;
+    const { duration, requestedAt, status } = build;
+    const __epoch = requestedAt.getTime();
+    total.statusSet.add(status);
+    total.values.push({
+      __epoch,
+      [status]: duration,
+      [`${status} avg`]: duration
+    });
+    (_a = build.stages) == null ? void 0 : _a.forEach((subStage) => {
+      recurseDown(stages, subStage, __epoch);
+    });
+  });
+  const allEpochs = normalizeTimeRange ? builds.map((build) => build.requestedAt.getTime()) : [];
+  await map(
+    [...stages.values()],
+    { chunk: "idle" },
+    (stage) => finalizeStage(stage, { allEpochs, averageWidth: 10 })
+  );
+  finalizeStage(total, { allEpochs, averageWidth: 10 });
+  const daily = dailySummary(builds);
+  const statuses = findStatuses(total, [...stages.values()]);
+  return { daily, total, stages, statuses };
+}
+function findStatuses(total, stages) {
+  const statuses = /* @__PURE__ */ new Set();
+  const addStatuses = (set) => {
+    set.forEach((status) => {
+      statuses.add(status);
+    });
+  };
+  addStatuses(total.statusSet);
+  const recurse = (subStages) => {
+    subStages.forEach((stage) => {
+      addStatuses(stage.statusSet);
+      recurse([...stage.stages.values()]);
+    });
+  };
+  recurse(stages);
+  return sortStatuses([...statuses]);
+}
+
+const context = React.createContext(void 0);
+function ZoomProvider({ children }) {
+  const [registeredSelectors, setRegisteredSelectors] = useState([]);
+  const [selectState, setSelectState] = useState({});
+  const [zoomState, setZoomState] = useState({});
+  const registerSelection = useCallback(
+    (selector) => {
+      setRegisteredSelectors((old) => [...old, selector]);
+      return () => {
+        setRegisteredSelectors((old) => old.filter((sel) => sel === selector));
+      };
+    },
+    [setRegisteredSelectors]
+  );
+  const callSelectors = useCallback(
+    (state) => {
+      registeredSelectors.forEach((selector) => {
+        selector(state);
+      });
+    },
+    [registeredSelectors]
+  );
+  const throttledCallSelectors = useMemo(
+    () => throttle(callSelectors, 200),
+    [callSelectors]
+  );
+  useEffect(() => {
+    throttledCallSelectors({
+      left: selectState.left,
+      right: selectState.right
+    });
+  }, [selectState.left, selectState.right, throttledCallSelectors]);
+  const resetZoom = useCallback(() => {
+    setSelectState({});
+    setZoomState({});
+  }, [setSelectState, setZoomState]);
+  const value = useMemo(
+    () => ({
+      registerSelection,
+      setSelectState,
+      zoomState,
+      setZoomState,
+      resetZoom
+    }),
+    [registerSelection, setSelectState, zoomState, setZoomState, resetZoom]
+  );
+  return /* @__PURE__ */ React.createElement(context.Provider, { value, children });
+}
+function useZoom() {
+  const { zoomState, resetZoom } = useContext(context);
+  const zoomFilterValues = useCallback(
+    (values) => {
+      const { left, right } = zoomState;
+      return left === void 0 || right === void 0 ? values : values.filter(({ __epoch }) => __epoch > left && __epoch < right);
+    },
+    [zoomState]
+  );
+  return useMemo(
+    () => ({
+      resetZoom,
+      zoomState,
+      zoomFilterValues
+    }),
+    [resetZoom, zoomState, zoomFilterValues]
+  );
+}
+function useZoomArea() {
+  const [showSelection, setShowSelection] = useState(false);
+  const [state, setState] = useState({});
+  const { setSelectState, setZoomState, registerSelection } = useContext(context);
+  const onMouseDown = useCallback(
+    (e) => {
+      if (!(e == null ? void 0 : e.activeLabel))
+        return;
+      setSelectState({ left: e.activeLabel });
+      setShowSelection(true);
+    },
+    [setSelectState, setShowSelection]
+  );
+  const onMouseMove = useCallback(
+    (e) => {
+      if (!(e == null ? void 0 : e.activeLabel))
+        return;
+      setSelectState((area) => {
+        if (!area.left) {
+          return area;
+        }
+        return { ...area, right: e.activeLabel };
+      });
+    },
+    [setSelectState]
+  );
+  const doZoom = useCallback(() => {
+    setSelectState((old) => {
+      const { left, right } = old;
+      if (left === void 0 || right === void 0 || left === right) {
+        setZoomState({});
+      } else if (left < right) {
+        setZoomState({ left, right });
+      } else if (left > right) {
+        setZoomState({ left: right, right: left });
+      }
+      return {};
+    });
+    setShowSelection(false);
+  }, [setSelectState, setZoomState, setShowSelection]);
+  const zoomProps = useMemo(
+    () => ({
+      onMouseDown,
+      onMouseMove,
+      onMouseUp: doZoom
+    }),
+    [onMouseDown, onMouseMove, doZoom]
+  );
+  useEffect(() => {
+    if (!showSelection) {
+      return void 0;
+    }
+    return registerSelection(setState);
+  }, [registerSelection, setState, showSelection]);
+  const getZoomArea = useCallback(
+    (props) => /* @__PURE__ */ React.createElement(Fragment, { key: "zoom-area" }, showSelection && state.left && state.right ? /* @__PURE__ */ React.createElement(
+      ReferenceArea,
+      {
+        x1: state.left,
+        x2: state.right,
+        strokeOpacity: 0.5,
+        ...props
+      }
+    ) : null),
+    [showSelection, state.left, state.right]
+  );
+  return {
+    zoomProps,
+    getZoomArea
+  };
+}
+
+const infoText = { color: "InfoText" };
+function pickElements(arr, num) {
+  if (arr.length <= num) {
+    return [...arr];
+  }
+  if (num < 2) {
+    return [arr[arr.length / 2]];
+  }
+  const step = arr.length / (num - 1);
+  return [
+    ...Array.from(Array(num - 1)).map(
+      (_, index) => arr[Math.round(index * step)]
+    ),
+    arr[arr.length - 1]
+  ];
+}
+function formatDateShort(milliseconds) {
+  if (milliseconds === "auto") {
+    return "";
+  }
+  return DateTime.fromMillis(milliseconds).toLocaleString(DateTime.DATE_SHORT);
+}
+function formatDateTimeShort(milliseconds) {
+  if (milliseconds === "auto") {
+    return "";
+  }
+  return DateTime.fromMillis(milliseconds).toLocaleString(
+    DateTime.DATETIME_SHORT
+  );
+}
+function labelFormatter(epoch) {
+  return /* @__PURE__ */ React.createElement(Typography, { component: "span", style: infoText }, formatDateTimeShort(epoch));
+}
+function labelFormatterWithoutTime(epoch) {
+  return /* @__PURE__ */ React.createElement(Typography, { component: "span", style: infoText }, formatDateShort(epoch));
+}
+function tickFormatterX(epoch) {
+  return formatDateShort(epoch);
+}
+function tickFormatterY(duration) {
+  if (duration === 0) {
+    return "0";
+  } else if (duration < 500) {
+    return `${duration} ms`;
+  }
+  return formatDuration(duration).replace(/second.*/, "sec").replace(/minute.*/, "min").replace(/hour.*/, "h").replace(/day.*/, "d").replace(/month.*/, "m").replace(/year.*/, "y");
+}
+function tooltipValueFormatter(durationOrCount, name) {
+  return [
+    // TODO(Rugvip): Types don't allow returning elements, but it was here before so presumably works
+    /* @__PURE__ */ React.createElement(Typography, { component: "span", style: infoText }, capitalize(name), ":", " ", name.endsWith(" count") ? durationOrCount : formatDuration(durationOrCount)),
+    null
+  ];
+}
+function formatDuration(millis) {
+  let rest = Math.round(millis);
+  const days = Math.floor(rest / (1e3 * 60 * 60 * 24));
+  rest -= days * (1e3 * 60 * 60 * 24);
+  const hours = Math.floor(rest / (1e3 * 60 * 60));
+  rest -= hours * (1e3 * 60 * 60);
+  const minutes = Math.floor(rest / (1e3 * 60));
+  rest -= minutes * (1e3 * 60);
+  const seconds = Math.floor(rest / 1e3);
+  rest -= seconds * 1e3;
+  const milliseconds = rest;
+  if (!days && !hours && !minutes) {
+    if (seconds < 1) {
+      return `${milliseconds}ms`;
+    } else if (seconds < 2) {
+      return `${((milliseconds + seconds * 1e3) / 1e3).toFixed(1)}s`;
+    }
+  }
+  const dur = Duration.fromObject({
+    ...days && { days },
+    ...hours && { hours },
+    ...minutes && !days && { minutes },
+    ...seconds && !days && !hours && { seconds }
+  });
+  return humanizeDuration(dur.toMillis(), { round: true });
+}
+function formatDurationFromSeconds(seconds) {
+  return formatDuration(seconds * 1e3);
+}
+
+const statusColorMap = {
+  unknown: "#3d01a4",
+  enqueued: "#7ad1b9",
+  scheduled: "#0391ce",
+  running: "#f3f318",
+  aborted: "#8600af",
+  succeeded: "#66b032",
+  failed: "#fe2712",
+  stalled: "#fb9904",
+  expired: "#a7194b"
+};
+const triggerColorMap = {
+  scm: "#0391ce",
+  manual: "#a7194b",
+  internal: "#82ca9d",
+  other: "#f3f318"
+};
+const fireColors = [
+  ["5%", "#e19678"],
+  ["30%", "#dfe178"],
+  ["50%", "#82ca9d"],
+  ["95%", "#82ca9d"]
+];
+const colorStroke = "#c0c0c0";
+const colorStrokeAvg = "#788ee1";
+
+const fullWidth = { width: "100%" };
+const noUserSelect = { userSelect: "none" };
+const transitionProps = { unmountOnExit: true };
+function StageChart(props) {
+  const { stage, ...chartOptions } = props;
+  const {
+    chartTypes,
+    defaultCollapsed = 0,
+    defaultHidden = 0,
+    zeroYAxis = false
+  } = chartOptions;
+  const { zoomFilterValues } = useZoom();
+  const { zoomProps, getZoomArea } = useZoomArea();
+  const ticks = useMemo(
+    () => pickElements(stage.values, 8).map((val) => val.__epoch),
+    [stage.values]
+  );
+  const domainY = useMemo(
+    () => [zeroYAxis ? 0 : "auto", "auto"],
+    [zeroYAxis]
+  );
+  const statuses = useMemo(
+    () => statusTypes.filter((status) => stage.statusSet.has(status)),
+    [stage.statusSet]
+  );
+  const legendPayload = useMemo(
+    () => statuses.map((status) => ({
+      value: capitalize(status),
+      type: "line",
+      id: status,
+      color: statusColorMap[status]
+    })),
+    [statuses]
+  );
+  const subStages = useMemo(
+    () => new Map(
+      [...stage.stages.entries()].filter(
+        ([_name, subStage]) => subStage.combinedAnalysis.max > defaultHidden
+      )
+    ),
+    [stage.stages, defaultHidden]
+  );
+  const zoomFilteredValues = useMemo(
+    () => zoomFilterValues(stage.values),
+    [stage.values, zoomFilterValues]
+  );
+  return stage.combinedAnalysis.max < defaultHidden ? null : /* @__PURE__ */ React.createElement(
+    Accordion,
+    {
+      defaultExpanded: stage.combinedAnalysis.max > defaultCollapsed,
+      TransitionProps: transitionProps
+    },
+    /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, stage.name, " (med ", formatDuration(stage.combinedAnalysis.med), ", avg", " ", formatDuration(stage.combinedAnalysis.avg), ")")),
+    /* @__PURE__ */ React.createElement(AccordionDetails, null, stage.values.length === 0 ? /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "No data") : /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true, style: noUserSelect }, /* @__PURE__ */ React.createElement(ResponsiveContainer, { width: "100%", height: 140 }, /* @__PURE__ */ React.createElement(ComposedChart, { data: zoomFilteredValues, ...zoomProps }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "colorDur", x1: "0", y1: "0", x2: "0", y2: "1" }, fireColors.map(([percent, color]) => /* @__PURE__ */ React.createElement(
+      "stop",
+      {
+        key: percent,
+        offset: percent,
+        stopColor: color,
+        stopOpacity: 0.8
+      }
+    )))), statuses.length > 1 && /* @__PURE__ */ React.createElement(Legend, { payload: legendPayload }), /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React.createElement(
+      XAxis,
+      {
+        dataKey: "__epoch",
+        type: "category",
+        ticks,
+        tickFormatter: tickFormatterX
+      }
+    ), /* @__PURE__ */ React.createElement(
+      YAxis,
+      {
+        yAxisId: 1,
+        tickFormatter: tickFormatterY,
+        type: "number",
+        tickCount: 5,
+        name: "Duration",
+        domain: domainY
+      }
+    ), /* @__PURE__ */ React.createElement(
+      YAxis,
+      {
+        yAxisId: 2,
+        orientation: "right",
+        type: "number",
+        tickCount: 5,
+        name: "Count"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Tooltip,
+      {
+        formatter: tooltipValueFormatter,
+        labelFormatter
+      }
+    ), statuses.reverse().map((status) => {
+      var _a, _b;
+      return /* @__PURE__ */ React.createElement(Fragment, { key: status }, !chartTypes[status].includes("duration") ? null : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        Area,
+        {
+          isAnimationActive: false,
+          yAxisId: 1,
+          type: "monotone",
+          dataKey: status,
+          stackId: status,
+          stroke: statuses.length > 1 ? statusColorMap[status] : colorStroke,
+          fillOpacity: statuses.length > 1 ? 0.5 : 1,
+          fill: statuses.length > 1 ? statusColorMap[status] : "url(#colorDur)",
+          connectNulls: true
+        }
+      ), /* @__PURE__ */ React.createElement(
+        Line,
+        {
+          isAnimationActive: false,
+          yAxisId: 1,
+          type: "monotone",
+          dataKey: `${status} avg`,
+          stroke: statuses.length > 1 ? statusColorMap[status] : colorStrokeAvg,
+          opacity: 0.8,
+          strokeWidth: 2,
+          dot: false,
+          connectNulls: true
+        }
+      )), !chartTypes[status].includes("count") ? null : /* @__PURE__ */ React.createElement(
+        Bar,
+        {
+          isAnimationActive: false,
+          yAxisId: 2,
+          type: "monotone",
+          dataKey: `${status} count`,
+          stackId: "1",
+          stroke: (_a = statusColorMap[status]) != null ? _a : "",
+          fillOpacity: 0.5,
+          fill: (_b = statusColorMap[status]) != null ? _b : ""
+        }
+      ));
+    }), getZoomArea({ yAxisId: 1 })))), subStages.size === 0 ? null : /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+      Accordion,
+      {
+        defaultExpanded: false,
+        TransitionProps: transitionProps
+      },
+      /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, "Sub stages (", subStages.size, ")")),
+      /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement("div", { style: fullWidth }, [...subStages.values()].map((subStage) => /* @__PURE__ */ React.createElement(
+        StageChart,
+        {
+          key: subStage.name,
+          ...chartOptions,
+          stage: subStage
+        }
+      ))))
+    ))))
+  );
+}
+
+function StatusChart(props) {
+  const { analysis } = props;
+  const { zoomFilterValues } = useZoom();
+  const { zoomProps, getZoomArea } = useZoomArea();
+  const values = useMemo(() => {
+    return analysis.daily.values.map((value) => {
+      const totTriggers = analysis.daily.triggerReasons.reduce(
+        (prev, cur) => {
+          var _a;
+          return prev + ((_a = value[cur]) != null ? _a : 0);
+        },
+        0
+      );
+      if (!totTriggers) {
+        return value;
+      }
+      return {
+        ...value,
+        ...Object.fromEntries(
+          analysis.daily.triggerReasons.map((reason) => {
+            var _a;
+            return [
+              reason,
+              ((_a = value[reason]) != null ? _a : 0) / totTriggers
+            ];
+          })
+        )
+      };
+    });
+  }, [analysis.daily]);
+  const triggerReasonLegendPayload = useMemo(
+    () => analysis.daily.triggerReasons.map((reason) => {
+      var _a;
+      return {
+        value: humanTriggerReason(reason),
+        type: "line",
+        id: reason,
+        color: (_a = triggerColorMap[reason]) != null ? _a : ""
+      };
+    }),
+    [analysis.daily.triggerReasons]
+  );
+  const statusesLegendPayload = useMemo(
+    () => analysis.daily.statuses.map((status) => {
+      var _a;
+      return {
+        value: capitalize(status),
+        type: "line",
+        id: status,
+        color: (_a = statusColorMap[status]) != null ? _a : ""
+      };
+    }),
+    [analysis.daily.statuses]
+  );
+  const legendPayload = useMemo(
+    () => [
+      ...triggerReasonLegendPayload,
+      ...statusesLegendPayload
+    ],
+    [statusesLegendPayload, triggerReasonLegendPayload]
+  );
+  const tooltipFormatter = useMemo(() => {
+    const reasonSet = new Set(analysis.daily.triggerReasons);
+    return (percentOrCount, name) => {
+      const label = reasonSet.has(name) ? humanTriggerReason(name) : capitalize(name);
+      const valueText = reasonSet.has(name) ? `${(percentOrCount * 100).toFixed(0)}%` : percentOrCount;
+      return [
+        // TODO(Rugvip): Types don't allow returning elements, but it was here before so presumably works
+        /* @__PURE__ */ React.createElement(Typography, { component: "span" }, label, ": ", valueText),
+        null
+      ];
+    };
+  }, [analysis.daily.triggerReasons]);
+  const zoomFilteredValues = useMemo(
+    () => zoomFilterValues(values),
+    [values, zoomFilterValues]
+  );
+  const barSize = getBarSize(analysis.daily.values.length);
+  return /* @__PURE__ */ React.createElement(Accordion, { defaultExpanded: analysis.daily.statuses.length > 1 }, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, "Build count per status over build trigger reason")), /* @__PURE__ */ React.createElement(AccordionDetails, null, values.length === 0 ? /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "No data") : /* @__PURE__ */ React.createElement(ResponsiveContainer, { width: "100%", height: 140 }, /* @__PURE__ */ React.createElement(ComposedChart, { data: zoomFilteredValues, ...zoomProps }, /* @__PURE__ */ React.createElement(Legend, { payload: legendPayload }), /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React.createElement(
+    XAxis,
+    {
+      dataKey: "__epoch",
+      type: "category",
+      tickFormatter: tickFormatterX
+    }
+  ), /* @__PURE__ */ React.createElement(YAxis, { yAxisId: 1, type: "number", tickCount: 5, name: "Count" }), /* @__PURE__ */ React.createElement(YAxis, { yAxisId: 2, type: "number", name: "Triggers", hide: true }), /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      labelFormatter: labelFormatterWithoutTime,
+      formatter: tooltipFormatter
+    }
+  ), triggerReasonLegendPayload.map((reason) => {
+    var _a, _b;
+    return /* @__PURE__ */ React.createElement(Fragment, { key: reason.id }, /* @__PURE__ */ React.createElement(
+      Area,
+      {
+        isAnimationActive: false,
+        type: "monotone",
+        dataKey: reason.id,
+        stackId: "triggers",
+        yAxisId: 2,
+        stroke: (_a = triggerColorMap[reason.id]) != null ? _a : "",
+        fillOpacity: 0.5,
+        fill: (_b = triggerColorMap[reason.id]) != null ? _b : ""
+      }
+    ));
+  }), [...analysis.daily.statuses].reverse().map((status) => {
+    var _a, _b;
+    return /* @__PURE__ */ React.createElement(Fragment, { key: status }, /* @__PURE__ */ React.createElement(
+      Bar,
+      {
+        isAnimationActive: false,
+        type: "monotone",
+        barSize,
+        dataKey: status,
+        stackId: "statuses",
+        yAxisId: 1,
+        stroke: (_a = statusColorMap[status]) != null ? _a : "",
+        fillOpacity: 0.8,
+        fill: (_b = statusColorMap[status]) != null ? _b : ""
+      }
+    ));
+  }), getZoomArea({ yAxisId: 1 })))));
+}
+function humanTriggerReason(reason) {
+  if (reason === "manual") {
+    return "Triggered manually";
+  } else if (reason === "scm") {
+    return "Triggered by SCM";
+  } else if (reason === "internal") {
+    return "Triggered internally";
+  } else if (reason === "other") {
+    return "Triggered by another reason";
+  }
+  return `Triggered by ${reason}`;
+}
+function getBarSize(count) {
+  if (count < 20) {
+    return 10;
+  } else if (count < 40) {
+    return 8;
+  }
+  return 5;
+}
+
+function switchValue(value) {
+  return typeof value === "object" ? value.value : value;
+}
+function switchText(value) {
+  var _a;
+  return typeof value === "object" ? (_a = value.text) != null ? _a : value.value : value;
+}
+function findParent(tagName, elem) {
+  let node = elem;
+  while (node.tagName !== tagName) {
+    node = node.parentElement;
+    if (!node) {
+      throw new Error(`Couldn't find ${tagName} parent`);
+    }
+  }
+  return node;
+}
+function ButtonSwitch(props) {
+  const { values, vertical = false } = props;
+  const onClick = useCallback(
+    (ev) => {
+      const btn = findParent("BUTTON", ev.target);
+      const index = [...btn.parentElement.children].findIndex(
+        (child) => child === btn
+      );
+      const value = switchValue(values[index]);
+      if (props.multi) {
+        props.onChange(
+          props.selection.includes(value) ? props.selection.filter((val) => val !== value) : [...props.selection, value]
+        );
+      } else {
+        props.onChange(value);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [values, props.selection, props.multi, props.onChange]
+  );
+  const hasSelection = (value) => {
+    if (props.multi) {
+      return props.selection.includes(value);
+    }
+    return props.selection === value;
+  };
+  const tooltipify = (value, elem) => typeof value === "object" && value.tooltip ? /* @__PURE__ */ React.createElement(
+    Tooltip$1,
+    {
+      key: value.value,
+      TransitionComponent: Zoom,
+      title: value.tooltip,
+      arrow: true
+    },
+    elem
+  ) : elem;
+  return /* @__PURE__ */ React.createElement(
+    ButtonGroup,
+    {
+      disableElevation: true,
+      orientation: vertical ? "vertical" : "horizontal",
+      variant: "outlined",
+      size: "small"
+    },
+    values.map(
+      (value) => tooltipify(
+        value,
+        /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            key: switchValue(value),
+            color: hasSelection(switchValue(value)) ? "primary" : "default",
+            variant: hasSelection(switchValue(value)) ? "contained" : "outlined",
+            onClick
+          },
+          switchText(value)
+        )
+      )
+    )
+  );
+}
+
+function Toggle({
+  checked,
+  setChecked,
+  children
+}) {
+  const toggler = useCallback(() => {
+    setChecked(!checked);
+  }, [checked, setChecked]);
+  return /* @__PURE__ */ React.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React.createElement(Switch, { checked, onChange: toggler }),
+      label: children
+    }
+  );
+}
+
+const useStyles$2 = makeStyles(
+  (theme) => ({
+    label: {
+      fontWeight: "normal",
+      margin: theme.spacing(0)
+    }
+  }),
+  {
+    name: "CicdStatisticsLabel"
+  }
+);
+function Label({ children }) {
+  const classes = useStyles$2();
+  return /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.label }, children);
+}
+
+const marks = [
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  10,
+  20,
+  30,
+  60,
+  2 * 60,
+  3 * 60,
+  4 * 60,
+  5 * 60,
+  10 * 60,
+  15 * 60,
+  30 * 60,
+  45 * 60,
+  60 * 60
+].map((value, index) => ({
+  value: index,
+  label: formatDurationFromSeconds(value),
+  seconds: value
+}));
+function findMarkIndex(seconds) {
+  if (marks[0].seconds > seconds) {
+    return 0;
+  } else if (marks[marks.length - 1].seconds < seconds) {
+    return marks.length - 1;
+  }
+  for (let i = 0; i < marks.length - 1; ++i) {
+    const a = marks[i];
+    const b = marks[i + 1];
+    if (seconds === a.seconds) {
+      return i;
+    } else if (seconds === b.seconds) {
+      return i + 1;
+    } else if (a.seconds < seconds && b.seconds > seconds) {
+      return seconds - a.seconds < b.seconds - seconds ? i : i - 1;
+    }
+  }
+  return 0;
+}
+function formatDurationFromIndex(index) {
+  return formatDurationFromSeconds(marks[index].seconds);
+}
+function DurationSlider(props) {
+  const { header, value, setValue } = props;
+  const [curValue, setCurValue] = useState(value);
+  const debouncedSetValue = useMemo(() => debounce(setValue, 1e3), [setValue]);
+  const onChange = useCallback(
+    (_, index) => {
+      const millis = marks[index].seconds * 1e3;
+      setCurValue(millis);
+      debouncedSetValue(millis);
+    },
+    [debouncedSetValue]
+  );
+  const indexValue = useMemo(() => findMarkIndex(curValue / 1e3), [curValue]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Label, null, header, " ", formatDuration(curValue)), /* @__PURE__ */ React.createElement(
+    Slider,
+    {
+      value: indexValue,
+      min: 0,
+      step: 1,
+      max: marks.length - 1,
+      marks: true,
+      getAriaValueText: formatDurationFromIndex,
+      valueLabelFormat: formatDurationFromIndex,
+      onChange,
+      valueLabelDisplay: "auto",
+      "aria-labelledby": "slider-hide-limit"
+    }
+  ));
+}
+
+const useStyles$1 = makeStyles(
+  (theme) => ({
+    rootCard: {
+      padding: theme.spacing(0, 0, 0, 0),
+      margin: theme.spacing(0, 0, 2, 0)
+    },
+    updateButton: {
+      margin: theme.spacing(1, 0, 0, 0)
+    },
+    header: {
+      margin: theme.spacing(0, 0, 0, 0),
+      textTransform: "uppercase",
+      fontSize: 12,
+      fontWeight: "bold"
+    },
+    title: {
+      margin: theme.spacing(3, 0, 1, 0),
+      textTransform: "uppercase",
+      fontSize: 12,
+      fontWeight: "bold",
+      "&:first-child": {
+        margin: theme.spacing(1, 0, 1, 0)
+      }
+    },
+    buttonDescription: {
+      textTransform: "uppercase",
+      margin: theme.spacing(1, 0, 0, 1)
+    }
+  }),
+  {
+    name: "CicdStatistics"
+  }
+);
+function getDefaultChartFilter(cicdConfiguration) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const toDate = (_b = (_a = cicdConfiguration.defaults) == null ? void 0 : _a.timeTo) != null ? _b : /* @__PURE__ */ new Date();
+  return {
+    fromDate: (_d = (_c = cicdConfiguration.defaults) == null ? void 0 : _c.timeFrom) != null ? _d : DateTime.fromJSDate(toDate).minus({ months: 1 }).toJSDate(),
+    toDate,
+    branch: (_f = (_e = cicdConfiguration.defaults) == null ? void 0 : _e.filterType) != null ? _f : "branch",
+    status: (_h = (_g = cicdConfiguration.defaults) == null ? void 0 : _g.filterStatus) != null ? _h : cicdConfiguration.availableStatuses.filter(
+      (status) => status === "succeeded" || status === "failed"
+    )
+  };
+}
+function isSameChartFilter(a, b) {
+  return a.branch === b.branch && [...a.status].sort().join(" ") === [...b.status].sort().join(" ") && DateTime.fromJSDate(a.fromDate).hasSame(
+    DateTime.fromJSDate(b.fromDate),
+    "day"
+  ) && DateTime.fromJSDate(a.toDate).hasSame(DateTime.fromJSDate(b.toDate), "day");
+}
+function getDefaultViewOptions(cicdConfiguration) {
+  var _a, _b, _c, _d;
+  return {
+    lowercaseNames: (_b = (_a = cicdConfiguration.defaults) == null ? void 0 : _a.lowercaseNames) != null ? _b : false,
+    normalizeTimeRange: (_d = (_c = cicdConfiguration.defaults) == null ? void 0 : _c.normalizeTimeRange) != null ? _d : true,
+    collapsedLimit: 60 * 1e3,
+    // 1m
+    hideLimit: 20 * 1e3,
+    // 20s
+    chartTypes: {
+      succeeded: ["duration"],
+      failed: ["count"],
+      enqueued: ["count"],
+      scheduled: ["count"],
+      running: ["count"],
+      aborted: ["count"],
+      stalled: ["count"],
+      expired: ["count"],
+      unknown: ["count"]
+    }
+  };
+}
+const branchValues = [
+  "master",
+  "branch",
+  {
+    value: "all",
+    tooltip: "NOTE; If the build pipelines are very different between master and branch builds, viewing them combined might not result in a very useful chart"
+  }
+];
+const chartTypeValues = [
+  { value: "duration", text: /* @__PURE__ */ React.createElement(ShowChartIcon, null), tooltip: "Duration" },
+  { value: "count", text: /* @__PURE__ */ React.createElement(BarChartIcon, null), tooltip: "Count per day" }
+];
+function ChartFilters(props) {
+  var _a;
+  const {
+    analysis,
+    cicdConfiguration,
+    initialFetchFilter,
+    currentFetchFilter,
+    onChangeFetchFilter,
+    updateFetchFilter,
+    initialViewOptions,
+    onChangeViewOptions
+  } = props;
+  const classes = useStyles$1();
+  const [internalRef] = useState({ first: true });
+  const [useNowAsToDate, setUseNowAsToDate] = useState(true);
+  const [toDate, setToDate] = useState(initialFetchFilter.toDate);
+  const [fromDate, setFromDate] = useState(initialFetchFilter.fromDate);
+  const [branch, setBranch] = useState(initialFetchFilter.branch);
+  const statusValues = cicdConfiguration.availableStatuses;
+  const [selectedStatus, setSelectedStatus] = useState(
+    initialFetchFilter.status
+  );
+  const [viewOptions, setViewOptions] = useState(initialViewOptions);
+  const setLowercaseNames = useCallback(
+    (lowercaseNames) => {
+      setViewOptions((old) => ({ ...old, lowercaseNames }));
+    },
+    [setViewOptions]
+  );
+  const setNormalizeTimeRange = useCallback(
+    (normalizeTimeRange) => {
+      setViewOptions((old) => ({ ...old, normalizeTimeRange }));
+    },
+    [setViewOptions]
+  );
+  const setHideLimit = useCallback(
+    (value) => {
+      setViewOptions((old) => ({ ...old, hideLimit: value }));
+    },
+    [setViewOptions]
+  );
+  const setCollapseLimit = useCallback(
+    (value) => {
+      setViewOptions((old) => ({ ...old, collapsedLimit: value }));
+    },
+    [setViewOptions]
+  );
+  const setChartType = useCallback(
+    (statusType, chartTypes) => {
+      setViewOptions((old) => ({
+        ...old,
+        chartTypes: { ...old.chartTypes, [statusType]: chartTypes }
+      }));
+    },
+    [setViewOptions]
+  );
+  const setChartTypeSpecific = useMemo(
+    () => Object.fromEntries(
+      statusTypes.map(
+        (status) => [
+          status,
+          (chartTypes) => setChartType(status, chartTypes)
+        ]
+      )
+    ),
+    [setChartType]
+  );
+  useEffect(() => {
+    onChangeViewOptions(viewOptions);
+  }, [onChangeViewOptions, viewOptions]);
+  useEffect(() => {
+    if (internalRef.first) {
+      internalRef.first = false;
+      return;
+    }
+    onChangeFetchFilter({
+      toDate,
+      fromDate,
+      branch,
+      status: selectedStatus
+    });
+  }, [
+    internalRef,
+    toDate,
+    fromDate,
+    branch,
+    selectedStatus,
+    onChangeFetchFilter
+  ]);
+  const toggleUseNowAsDate = useCallback(() => {
+    setUseNowAsToDate(!useNowAsToDate);
+    if (!DateTime.fromJSDate(toDate).hasSame(DateTime.now(), "day")) {
+      setToDate(/* @__PURE__ */ new Date());
+    }
+  }, [useNowAsToDate, toDate]);
+  const hasFetchFilterChanges = useMemo(
+    () => !currentFetchFilter || !isSameChartFilter(
+      {
+        toDate,
+        fromDate,
+        branch,
+        status: selectedStatus
+      },
+      currentFetchFilter
+    ),
+    [toDate, fromDate, branch, selectedStatus, currentFetchFilter]
+  );
+  const updateFilter = useCallback(() => {
+    updateFetchFilter({
+      toDate,
+      fromDate,
+      branch,
+      status: selectedStatus
+    });
+  }, [toDate, fromDate, branch, selectedStatus, updateFetchFilter]);
+  const inrefferedStatuses = (_a = analysis == null ? void 0 : analysis.statuses) != null ? _a : selectedStatus;
+  return /* @__PURE__ */ React.createElement(MuiPickersUtilsProvider, { utils: LuxonUtils }, /* @__PURE__ */ React.createElement(Card, { className: classes.rootCard }, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      action: /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          size: "small",
+          color: "secondary",
+          variant: "contained",
+          onClick: updateFilter,
+          disabled: !hasFetchFilterChanges
+        },
+        "Update"
+      ),
+      title: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.header }, "Fetching options")
+    }
+  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "subtitle2",
+      className: `${classes.title} ${classes.title}`
+    },
+    "Date range"
+  ), /* @__PURE__ */ React.createElement(
+    KeyboardDatePicker,
+    {
+      autoOk: true,
+      variant: "inline",
+      inputVariant: "outlined",
+      label: "From date",
+      format: "yyyy-MM-dd",
+      value: fromDate,
+      InputAdornmentProps: { position: "start" },
+      onChange: (date) => {
+        var _a2;
+        return setFromDate((_a2 = date == null ? void 0 : date.toJSDate()) != null ? _a2 : /* @__PURE__ */ new Date());
+      }
+    }
+  ), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(FormControl, { component: "fieldset" }, /* @__PURE__ */ React.createElement(FormGroup, null, /* @__PURE__ */ React.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React.createElement(
+        Switch,
+        {
+          checked: useNowAsToDate,
+          onChange: toggleUseNowAsDate
+        }
+      ),
+      label: /* @__PURE__ */ React.createElement(Label, null, "To today")
+    }
+  ), useNowAsToDate ? null : /* @__PURE__ */ React.createElement(
+    KeyboardDatePicker,
+    {
+      autoOk: true,
+      variant: "inline",
+      inputVariant: "outlined",
+      label: "To date",
+      format: "yyyy-MM-dd",
+      value: toDate,
+      InputAdornmentProps: { position: "start" },
+      onChange: (date) => {
+        var _a2;
+        return setToDate((_a2 = date == null ? void 0 : date.toJSDate()) != null ? _a2 : /* @__PURE__ */ new Date());
+      }
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "subtitle2",
+      className: `${classes.title} ${classes.title}`
+    },
+    "Branch"
+  ), /* @__PURE__ */ React.createElement(
+    ButtonSwitch,
+    {
+      values: branchValues,
+      selection: branch,
+      onChange: setBranch
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "subtitle2",
+      className: `${classes.title} ${classes.title}`
+    },
+    "Status"
+  ), /* @__PURE__ */ React.createElement(
+    ButtonSwitch,
+    {
+      values: statusValues,
+      multi: true,
+      vertical: true,
+      selection: selectedStatus,
+      onChange: setSelectedStatus
+    }
+  ))), /* @__PURE__ */ React.createElement(Card, { className: classes.rootCard }, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      title: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.header }, "View options")
+    }
+  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+    Toggle,
+    {
+      checked: viewOptions.lowercaseNames,
+      setChecked: setLowercaseNames
+    },
+    /* @__PURE__ */ React.createElement(
+      Tooltip$1,
+      {
+        arrow: true,
+        title: "Lowercasing names can reduce duplications when stage names have changed casing"
+      },
+      /* @__PURE__ */ React.createElement(Label, null, "Lowercase names")
+    )
+  ), /* @__PURE__ */ React.createElement(
+    Toggle,
+    {
+      checked: viewOptions.normalizeTimeRange,
+      setChecked: setNormalizeTimeRange
+    },
+    /* @__PURE__ */ React.createElement(
+      Tooltip$1,
+      {
+        arrow: true,
+        title: "All charts will use the same x-axis. This reduces confusion when stages have been altered over time and only appear in a part of the time range."
+      },
+      /* @__PURE__ */ React.createElement(Label, null, "Normalize time range")
+    )
+  ), /* @__PURE__ */ React.createElement(
+    DurationSlider,
+    {
+      header: "Hide under peak",
+      value: viewOptions.hideLimit,
+      setValue: setHideLimit
+    }
+  ), /* @__PURE__ */ React.createElement(
+    DurationSlider,
+    {
+      header: "Collapse under peak",
+      value: viewOptions.collapsedLimit,
+      setValue: setCollapseLimit
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "subtitle2",
+      className: `${classes.title} ${classes.title}`
+    },
+    "Chart styles"
+  ), inrefferedStatuses.map((status) => /* @__PURE__ */ React.createElement(Grid, { key: status, container: true, spacing: 0 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    ButtonSwitch,
+    {
+      values: chartTypeValues,
+      selection: viewOptions.chartTypes[status],
+      onChange: setChartTypeSpecific[status],
+      multi: true
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, className: classes.buttonDescription }, /* @__PURE__ */ React.createElement("div", null, status)))))));
+}
+
+const stepProgressStyle = {
+  marginTop: 6
+};
+const sentry = Symbol();
+function useAsyncChain(parentState, fn, deps) {
+  const childState = useAsync(
+    async () => !parentState.value ? sentry : fn(parentState.value),
+    [!parentState.error, !parentState.loading, parentState.value, ...deps]
+  );
+  if (!parentState.value) {
+    return parentState;
+  } else if (childState.value === sentry) {
+    return { loading: true };
+  }
+  return childState;
+}
+function renderFallbacks(state, success) {
+  if (state.loading) {
+    return /* @__PURE__ */ React.createElement(ViewProgress, { state });
+  } else if (state.error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, state.error.stack);
+  }
+  return success(state.value);
+}
+function ViewProgress({
+  state
+}) {
+  var _a, _b;
+  const { Progress } = useApp().getComponents();
+  const stateAsSingleProgress = state;
+  const stateAsStepProgress = state;
+  if (!stateAsSingleProgress.progress && !stateAsSingleProgress.progressBuffer && !stateAsStepProgress.steps) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  } else if (stateAsSingleProgress.progress !== void 0) {
+    return /* @__PURE__ */ React.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(
+      LinearProgress,
+      {
+        variant: "buffer",
+        value: ((_a = stateAsSingleProgress.progress) != null ? _a : 0) * 100,
+        valueBuffer: ((_b = stateAsSingleProgress.progressBuffer) != null ? _b : 0) * 100
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(Timeline, null, stateAsStepProgress.steps.map((step, index) => {
+    var _a2, _b2;
+    return /* @__PURE__ */ React.createElement(TimelineItem, { key: index }, /* @__PURE__ */ React.createElement(TimelineOppositeContent, null, step.title), /* @__PURE__ */ React.createElement(TimelineSeparator, null, /* @__PURE__ */ React.createElement(TimelineDot, { color: getDotColor(step) }), index < stateAsStepProgress.steps.length - 1 ? /* @__PURE__ */ React.createElement(TimelineConnector, null) : null), /* @__PURE__ */ React.createElement(TimelineContent, null, !step.progress && !step.progressBuffer ? null : /* @__PURE__ */ React.createElement(
+      LinearProgress,
+      {
+        style: stepProgressStyle,
+        variant: "buffer",
+        value: ((_a2 = step.progress) != null ? _a2 : 0) * 100,
+        valueBuffer: ((_b2 = step.progressBuffer) != null ? _b2 : 0) * 100
+      }
+    )));
+  })));
+}
+function getDotColor(step) {
+  var _a;
+  const progress = (_a = step.progress) != null ? _a : 0;
+  if (progress >= 1) {
+    return "primary";
+  } else if (progress > 0) {
+    return "secondary";
+  }
+  return "grey";
+}
+
+function sortFilterStatusType(statuses) {
+  const statusSet = new Set(statuses);
+  const sorted = ["all", ...statusTypes].filter((status) => {
+    if (statusSet.has(status)) {
+      statusSet.delete(status);
+      return true;
+    }
+    return false;
+  });
+  return [...sorted, ...statusSet];
+}
+
+function EntityPageCicdCharts() {
+  const state = useCicdConfiguration();
+  return renderFallbacks(state, (value) => /* @__PURE__ */ React.createElement(ZoomProvider, null, /* @__PURE__ */ React.createElement(CicdCharts, { cicdConfiguration: value })));
+}
+const useStyles = makeStyles(
+  (theme) => ({
+    pane: {
+      padding: theme.spacing(1, 1, 1, 1)
+    }
+  }),
+  {
+    name: "CicdStatisticsView"
+  }
+);
+function startOfDay(date) {
+  return DateTime.fromJSDate(date).startOf("day").toJSDate();
+}
+function endOfDay(date) {
+  return DateTime.fromJSDate(date).endOf("day").toJSDate();
+}
+function cleanChartFilter(filter) {
+  return {
+    ...filter,
+    status: sortFilterStatusType(filter.status)
+  };
+}
+function CicdCharts(props) {
+  const { cicdConfiguration } = props;
+  const errorApi = useApi(errorApiRef);
+  const { entity } = useEntity();
+  const classes = useStyles();
+  const { resetZoom } = useZoom();
+  const [chartFilter, setChartFilter] = useState(
+    getDefaultChartFilter(cicdConfiguration)
+  );
+  const [fetchedChartData, setFetchedChartData] = useState({
+    abortController: null,
+    chartFilter
+  });
+  const [viewOptions, setViewOptions] = useState(
+    getDefaultViewOptions(cicdConfiguration)
+  );
+  const fetchStatisticsOptions = useMemo(() => {
+    const abortController = new AbortController();
+    fetchedChartData.abortController = abortController;
+    return {
+      abortController,
+      entity,
+      timeFrom: startOfDay(fetchedChartData.chartFilter.fromDate),
+      timeTo: endOfDay(fetchedChartData.chartFilter.toDate),
+      filterStatus: fetchedChartData.chartFilter.status,
+      filterType: fetchedChartData.chartFilter.branch
+    };
+  }, [entity, fetchedChartData]);
+  const statisticsState = useCicdStatistics(fetchStatisticsOptions);
+  const updateFilter = useCallback(() => {
+    var _a;
+    (_a = fetchedChartData.abortController) == null ? void 0 : _a.abort();
+    setFetchedChartData({ abortController: null, chartFilter });
+  }, [fetchedChartData, setFetchedChartData, chartFilter]);
+  const chartableStagesState = useAsyncChain(
+    statisticsState,
+    async (value) => buildsToChartableStages(
+      await cleanupBuildTree(value.builds, {
+        formatStageName: cicdConfiguration.formatStageName,
+        lowerCase: viewOptions.lowercaseNames
+      }),
+      { normalizeTimeRange: viewOptions.normalizeTimeRange }
+    ),
+    [statisticsState, cicdConfiguration, viewOptions]
+  );
+  useEffect(() => {
+    resetZoom();
+  }, [resetZoom, statisticsState.value]);
+  const onFilterChange = useCallback((filter) => {
+    setChartFilter(cleanChartFilter(filter));
+  }, []);
+  const onViewOptionsChange = useCallback(
+    (options) => {
+      setViewOptions(options);
+    },
+    [setViewOptions]
+  );
+  useEffect(() => {
+    var _a;
+    if (!chartableStagesState.error || ((_a = chartableStagesState.error) == null ? void 0 : _a.name) === "AbortError") {
+      return;
+    }
+    errorApi.post(chartableStagesState.error);
+  }, [errorApi, chartableStagesState.error]);
+  return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 2, className: classes.pane }, /* @__PURE__ */ React.createElement(
+    ChartFilters,
+    {
+      analysis: chartableStagesState.value,
+      cicdConfiguration,
+      initialFetchFilter: chartFilter,
+      currentFetchFilter: fetchedChartData.chartFilter,
+      onChangeFetchFilter: onFilterChange,
+      updateFetchFilter: updateFilter,
+      initialViewOptions: viewOptions,
+      onChangeViewOptions: onViewOptionsChange
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, lg: 10, className: classes.pane }, renderFallbacks(chartableStagesState, (chartableStages) => {
+    var _a, _b, _c, _d, _e;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, chartableStages.stages.size > 0 ? null : /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "No data"), !((_b = (_a = statisticsState.value) == null ? void 0 : _a.builds) == null ? void 0 : _b.length) || !((_e = (_d = (_c = chartableStagesState.value) == null ? void 0 : _c.daily) == null ? void 0 : _d.values) == null ? void 0 : _e.length) ? null : /* @__PURE__ */ React.createElement(StatusChart, { analysis: chartableStagesState.value }), /* @__PURE__ */ React.createElement(
+      StageChart,
+      {
+        stage: chartableStages.total,
+        defaultCollapsed: 0,
+        defaultHidden: viewOptions.hideLimit,
+        chartTypes: viewOptions.chartTypes
+      }
+    ), [...chartableStages.stages.entries()].map(([name, stage]) => /* @__PURE__ */ React.createElement(
+      StageChart,
+      {
+        key: name,
+        stage,
+        defaultCollapsed: viewOptions.collapsedLimit,
+        defaultHidden: viewOptions.hideLimit,
+        chartTypes: viewOptions.chartTypes
+      }
+    )));
+  })));
+}
+
+export { EntityPageCicdCharts };
+//# sourceMappingURL=entity-page-CNIrdNBp.esm.js.map