@backstage-community/plugin-cicd-statistics 0.1.37 → 0.1.38

package/dist/components/chart-filters.esm.js

@@ -0,0 +1,379 @@
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+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 Grid from '@material-ui/core/Grid';
+import Switch from '@material-ui/core/Switch';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+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 { DateTime } from 'luxon';
+import LuxonUtils from '@date-io/luxon';
+import { statusTypes } from '../apis/types.esm.js';
+import { ButtonSwitch } from './button-switch.esm.js';
+import { Toggle } from './toggle.esm.js';
+import { DurationSlider } from './duration-slider.esm.js';
+import { Label } from './label.esm.js';
+
+const useStyles = 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) {
+  const toDate = cicdConfiguration.defaults?.timeTo ?? /* @__PURE__ */ new Date();
+  return {
+    fromDate: cicdConfiguration.defaults?.timeFrom ?? DateTime.fromJSDate(toDate).minus({ months: 1 }).toJSDate(),
+    toDate,
+    branch: cicdConfiguration.defaults?.filterType ?? "branch",
+    status: cicdConfiguration.defaults?.filterStatus ?? 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) {
+  return {
+    lowercaseNames: cicdConfiguration.defaults?.lowercaseNames ?? false,
+    normalizeTimeRange: cicdConfiguration.defaults?.normalizeTimeRange ?? 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) {
+  const {
+    analysis,
+    cicdConfiguration,
+    initialFetchFilter,
+    currentFetchFilter,
+    onChangeFetchFilter,
+    updateFetchFilter,
+    initialViewOptions,
+    onChangeViewOptions
+  } = props;
+  const classes = useStyles();
+  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 = analysis?.statuses ?? 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) => setFromDate(date?.toJSDate() ?? /* @__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) => setToDate(date?.toJSDate() ?? /* @__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,
+      {
+        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,
+      {
+        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)))))));
+}
+
+export { ChartFilters, getDefaultChartFilter, getDefaultViewOptions, useStyles };
+//# sourceMappingURL=chart-filters.esm.js.map

package/dist/components/chart-filters.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-filters.esm.js","sources":["../../src/components/chart-filters.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useState, useEffect, useMemo } from 'react';\nimport Button from '@material-ui/core/Button';\nimport Card from '@material-ui/core/Card';\nimport CardHeader from '@material-ui/core/CardHeader';\nimport CardContent from '@material-ui/core/CardContent';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Grid from '@material-ui/core/Grid';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport MuiPickersUtilsProvider from '@material-ui/pickers/MuiPickersUtilsProvider';\nimport { KeyboardDatePicker } from '@material-ui/pickers/DatePicker';\nimport { DateTime } from 'luxon';\nimport LuxonUtils from '@date-io/luxon';\n\nimport {\n  ChartType,\n  ChartTypes,\n  CicdConfiguration,\n  CicdDefaults,\n  FilterBranchType,\n  FilterStatusType,\n  statusTypes,\n} from '../apis/types';\nimport { ChartableStagesAnalysis } from '../charts/types';\nimport { ButtonSwitch, SwitchValue } from './button-switch';\nimport { Toggle } from './toggle';\nimport { DurationSlider } from './duration-slider';\nimport { Label } from './label';\n\nexport const useStyles = makeStyles(\n  theme => ({\n    rootCard: {\n      padding: theme.spacing(0, 0, 0, 0),\n      margin: theme.spacing(0, 0, 2, 0),\n    },\n    updateButton: {\n      margin: theme.spacing(1, 0, 0, 0),\n    },\n    header: {\n      margin: theme.spacing(0, 0, 0, 0),\n      textTransform: 'uppercase',\n      fontSize: 12,\n      fontWeight: 'bold',\n    },\n    title: {\n      margin: theme.spacing(3, 0, 1, 0),\n      textTransform: 'uppercase',\n      fontSize: 12,\n      fontWeight: 'bold',\n      '&:first-child': {\n        margin: theme.spacing(1, 0, 1, 0),\n      },\n    },\n    buttonDescription: {\n      textTransform: 'uppercase',\n      margin: theme.spacing(1, 0, 0, 1),\n    },\n  }),\n  {\n    name: 'CicdStatistics',\n  },\n);\n\nexport type BranchSelection = FilterBranchType | 'all';\nexport type StatusSelection = FilterStatusType;\n\nexport interface ChartFilter {\n  fromDate: Date;\n  toDate: Date;\n  branch: string;\n  status: Array<string>;\n}\n\nexport function getDefaultChartFilter(\n  cicdConfiguration: CicdConfiguration,\n): ChartFilter {\n  const toDate = cicdConfiguration.defaults?.timeTo ?? new Date();\n  return {\n    fromDate:\n      cicdConfiguration.defaults?.timeFrom ??\n      DateTime.fromJSDate(toDate).minus({ months: 1 }).toJSDate(),\n    toDate,\n    branch: cicdConfiguration.defaults?.filterType ?? 'branch',\n    status:\n      cicdConfiguration.defaults?.filterStatus ??\n      cicdConfiguration.availableStatuses.filter(\n        status => status === 'succeeded' || status === 'failed',\n      ),\n  };\n}\n\nfunction isSameChartFilter(a: ChartFilter, b: ChartFilter): boolean {\n  return (\n    a.branch === b.branch &&\n    [...a.status].sort().join(' ') === [...b.status].sort().join(' ') &&\n    DateTime.fromJSDate(a.fromDate).hasSame(\n      DateTime.fromJSDate(b.fromDate),\n      'day',\n    ) &&\n    DateTime.fromJSDate(a.toDate).hasSame(DateTime.fromJSDate(b.toDate), 'day')\n  );\n}\n\nexport type ViewOptions = Pick<\n  CicdDefaults,\n  | 'lowercaseNames'\n  | 'normalizeTimeRange'\n  | 'collapsedLimit'\n  | 'hideLimit'\n  | 'chartTypes'\n>;\n\nexport function getDefaultViewOptions(\n  cicdConfiguration: CicdConfiguration,\n): ViewOptions {\n  return {\n    lowercaseNames: cicdConfiguration.defaults?.lowercaseNames ?? false,\n    normalizeTimeRange: cicdConfiguration.defaults?.normalizeTimeRange ?? true,\n    collapsedLimit: 60 * 1000, // 1m\n    hideLimit: 20 * 1000, // 20s\n    chartTypes: {\n      succeeded: ['duration'],\n      failed: ['count'],\n      enqueued: ['count'],\n      scheduled: ['count'],\n      running: ['count'],\n      aborted: ['count'],\n      stalled: ['count'],\n      expired: ['count'],\n      unknown: ['count'],\n    },\n  };\n}\n\nconst branchValues: Array<SwitchValue<BranchSelection>> = [\n  'master',\n  'branch',\n  {\n    value: 'all',\n    tooltip:\n      'NOTE; If the build pipelines are very different between master and branch ' +\n      'builds, viewing them combined might not result in a very useful chart',\n  },\n];\n\nconst chartTypeValues: Array<SwitchValue<ChartType>> = [\n  { value: 'duration', text: <ShowChartIcon />, tooltip: 'Duration' },\n  { value: 'count', text: <BarChartIcon />, tooltip: 'Count per day' },\n];\n\nexport interface ChartFiltersProps {\n  analysis?: ChartableStagesAnalysis;\n\n  cicdConfiguration: CicdConfiguration;\n  initialFetchFilter: ChartFilter;\n  currentFetchFilter?: ChartFilter;\n  onChangeFetchFilter(filter: ChartFilter): void;\n  updateFetchFilter(filter: ChartFilter): void;\n\n  initialViewOptions: ViewOptions;\n  onChangeViewOptions(filter: ViewOptions): void;\n}\n\ninterface InternalRef {\n  first: boolean;\n}\n\nexport function ChartFilters(props: ChartFiltersProps) {\n  const {\n    analysis,\n    cicdConfiguration,\n    initialFetchFilter,\n    currentFetchFilter,\n    onChangeFetchFilter,\n    updateFetchFilter,\n    initialViewOptions,\n    onChangeViewOptions,\n  } = props;\n\n  const classes = useStyles();\n\n  const [internalRef] = useState<InternalRef>({ first: true });\n\n  const [useNowAsToDate, setUseNowAsToDate] = useState(true);\n  const [toDate, setToDate] = useState(initialFetchFilter.toDate);\n  const [fromDate, setFromDate] = useState(initialFetchFilter.fromDate);\n\n  const [branch, setBranch] = useState(initialFetchFilter.branch);\n\n  const statusValues: ReadonlyArray<StatusSelection> =\n    cicdConfiguration.availableStatuses;\n  const [selectedStatus, setSelectedStatus] = useState(\n    initialFetchFilter.status,\n  );\n\n  const [viewOptions, setViewOptions] = useState(initialViewOptions);\n\n  const setLowercaseNames = useCallback(\n    (lowercaseNames: boolean) => {\n      setViewOptions(old => ({ ...old, lowercaseNames }));\n    },\n    [setViewOptions],\n  );\n\n  const setNormalizeTimeRange = useCallback(\n    (normalizeTimeRange: boolean) => {\n      setViewOptions(old => ({ ...old, normalizeTimeRange }));\n    },\n    [setViewOptions],\n  );\n\n  const setHideLimit = useCallback(\n    (value: number) => {\n      setViewOptions(old => ({ ...old, hideLimit: value }));\n    },\n    [setViewOptions],\n  );\n\n  const setCollapseLimit = useCallback(\n    (value: number) => {\n      setViewOptions(old => ({ ...old, collapsedLimit: value }));\n    },\n    [setViewOptions],\n  );\n\n  const setChartType = useCallback(\n    (statusType: FilterStatusType, chartTypes: ChartTypes) => {\n      setViewOptions(old => ({\n        ...old,\n        chartTypes: { ...old.chartTypes, [statusType]: chartTypes },\n      }));\n    },\n    [setViewOptions],\n  );\n  const setChartTypeSpecific = useMemo(\n    () =>\n      Object.fromEntries(\n        statusTypes.map(\n          status =>\n            [\n              status,\n              (chartTypes: ChartTypes) => setChartType(status, chartTypes),\n            ] as const,\n        ),\n      ),\n    [setChartType],\n  );\n\n  useEffect(() => {\n    onChangeViewOptions(viewOptions);\n  }, [onChangeViewOptions, viewOptions]);\n\n  useEffect(() => {\n    if (internalRef.first) {\n      // Skip calling onChangeFetchFilter first time\n      internalRef.first = false;\n      return;\n    }\n    onChangeFetchFilter({\n      toDate,\n      fromDate,\n      branch,\n      status: selectedStatus,\n    });\n  }, [\n    internalRef,\n    toDate,\n    fromDate,\n    branch,\n    selectedStatus,\n    onChangeFetchFilter,\n  ]);\n\n  const toggleUseNowAsDate = useCallback(() => {\n    setUseNowAsToDate(!useNowAsToDate);\n    if (!DateTime.fromJSDate(toDate).hasSame(DateTime.now(), 'day')) {\n      setToDate(new Date());\n    }\n  }, [useNowAsToDate, toDate]);\n\n  const hasFetchFilterChanges = useMemo(\n    () =>\n      !currentFetchFilter ||\n      !isSameChartFilter(\n        {\n          toDate,\n          fromDate,\n          branch,\n          status: selectedStatus,\n        },\n        currentFetchFilter,\n      ),\n    [toDate, fromDate, branch, selectedStatus, currentFetchFilter],\n  );\n\n  const updateFilter = useCallback(() => {\n    updateFetchFilter({\n      toDate,\n      fromDate,\n      branch,\n      status: selectedStatus,\n    });\n  }, [toDate, fromDate, branch, selectedStatus, updateFetchFilter]);\n\n  const inrefferedStatuses = analysis?.statuses ?? selectedStatus;\n\n  return (\n    <MuiPickersUtilsProvider utils={LuxonUtils}>\n      <Card className={classes.rootCard}>\n        <CardHeader\n          action={\n            <Button\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"contained\"\n              onClick={updateFilter}\n              disabled={!hasFetchFilterChanges}\n            >\n              Update\n            </Button>\n          }\n          title={\n            <Typography variant=\"subtitle2\" className={classes.header}>\n              Fetching options\n            </Typography>\n          }\n        />\n        <CardContent>\n          <Typography\n            variant=\"subtitle2\"\n            className={`${classes.title} ${classes.title}`}\n          >\n            Date range\n          </Typography>\n          <KeyboardDatePicker\n            autoOk\n            variant=\"inline\"\n            inputVariant=\"outlined\"\n            label=\"From date\"\n            format=\"yyyy-MM-dd\"\n            value={fromDate}\n            InputAdornmentProps={{ position: 'start' }}\n            onChange={date => setFromDate(date?.toJSDate() ?? new Date())}\n          />\n          <br />\n          <FormControl component=\"fieldset\">\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Switch\n                    checked={useNowAsToDate}\n                    onChange={toggleUseNowAsDate}\n                  />\n                }\n                label={<Label>To today</Label>}\n              />\n              {useNowAsToDate ? null : (\n                <KeyboardDatePicker\n                  autoOk\n                  variant=\"inline\"\n                  inputVariant=\"outlined\"\n                  label=\"To date\"\n                  format=\"yyyy-MM-dd\"\n                  value={toDate}\n                  InputAdornmentProps={{ position: 'start' }}\n                  onChange={date => setToDate(date?.toJSDate() ?? new Date())}\n                />\n              )}\n            </FormGroup>\n          </FormControl>\n          <Typography\n            variant=\"subtitle2\"\n            className={`${classes.title} ${classes.title}`}\n          >\n            Branch\n          </Typography>\n          <ButtonSwitch<string>\n            values={branchValues}\n            selection={branch}\n            onChange={setBranch}\n          />\n          <Typography\n            variant=\"subtitle2\"\n            className={`${classes.title} ${classes.title}`}\n          >\n            Status\n          </Typography>\n          <ButtonSwitch<string>\n            values={statusValues}\n            multi\n            vertical\n            selection={selectedStatus}\n            onChange={setSelectedStatus}\n          />\n        </CardContent>\n      </Card>\n      <Card className={classes.rootCard}>\n        <CardHeader\n          title={\n            <Typography variant=\"subtitle2\" className={classes.header}>\n              View options\n            </Typography>\n          }\n        />\n        <CardContent>\n          <Toggle\n            checked={viewOptions.lowercaseNames}\n            setChecked={setLowercaseNames}\n          >\n            <Tooltip\n              arrow\n              title={\n                'Lowercasing names can reduce duplications ' +\n                'when stage names have changed casing'\n              }\n            >\n              <Label>Lowercase names</Label>\n            </Tooltip>\n          </Toggle>\n          <Toggle\n            checked={viewOptions.normalizeTimeRange}\n            setChecked={setNormalizeTimeRange}\n          >\n            <Tooltip\n              arrow\n              title={\n                'All charts will use the same x-axis. ' +\n                'This reduces confusion when stages have been altered over time ' +\n                'and only appear in a part of the time range.'\n              }\n            >\n              <Label>Normalize time range</Label>\n            </Tooltip>\n          </Toggle>\n          <DurationSlider\n            header=\"Hide under peak\"\n            value={viewOptions.hideLimit}\n            setValue={setHideLimit}\n          />\n          <DurationSlider\n            header=\"Collapse under peak\"\n            value={viewOptions.collapsedLimit}\n            setValue={setCollapseLimit}\n          />\n          <Typography\n            variant=\"subtitle2\"\n            className={`${classes.title} ${classes.title}`}\n          >\n            Chart styles\n          </Typography>\n          {inrefferedStatuses.map(status => (\n            <Grid key={status} container spacing={0}>\n              <Grid item>\n                <ButtonSwitch<ChartType>\n                  values={chartTypeValues}\n                  selection={viewOptions.chartTypes[status as FilterStatusType]}\n                  onChange={setChartTypeSpecific[status]}\n                  multi\n                />\n              </Grid>\n              <Grid item className={classes.buttonDescription}>\n                <div>{status}</div>\n              </Grid>\n            </Grid>\n          ))}\n        </CardContent>\n      </Card>\n    </MuiPickersUtilsProvider>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/duration-slider.esm.js

@@ -0,0 +1,85 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import Slider from '@material-ui/core/Slider';
+import { debounce } from 'lodash';
+import { formatDurationFromSeconds, formatDuration } from './utils.esm.js';
+import { Label } from './label.esm.js';
+
+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"
+    }
+  ));
+}
+
+export { DurationSlider };
+//# sourceMappingURL=duration-slider.esm.js.map

package/dist/components/duration-slider.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"duration-slider.esm.js","sources":["../../src/components/duration-slider.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport Slider from '@material-ui/core/Slider';\nimport { debounce } from 'lodash';\n\nimport { formatDuration, formatDurationFromSeconds } from './utils';\nimport { Label } from './label';\n\nconst marks = [\n  0,\n  1,\n  2,\n  3,\n  4,\n  5,\n  10,\n  20,\n  30,\n  60,\n  2 * 60,\n  3 * 60,\n  4 * 60,\n  5 * 60,\n  10 * 60,\n  15 * 60,\n  30 * 60,\n  45 * 60,\n  60 * 60,\n].map((value, index) => ({\n  value: index,\n  label: formatDurationFromSeconds(value),\n  seconds: value,\n}));\n\nfunction findMarkIndex(seconds: number): number {\n  if (marks[0].seconds > seconds) {\n    return 0;\n  } else if (marks[marks.length - 1].seconds < seconds) {\n    return marks.length - 1;\n  }\n  for (let i = 0; i < marks.length - 1; ++i) {\n    const a = marks[i];\n    const b = marks[i + 1];\n    if (seconds === a.seconds) {\n      return i;\n    } else if (seconds === b.seconds) {\n      return i + 1;\n    } else if (a.seconds < seconds && b.seconds > seconds) {\n      return seconds - a.seconds < b.seconds - seconds ? i : i - 1;\n    }\n  }\n  return 0; // Won't happen\n}\n\nfunction formatDurationFromIndex(index: number) {\n  return formatDurationFromSeconds(marks[index].seconds);\n}\n\nexport interface DurationSliderProps {\n  header: string;\n  value: number;\n  setValue: (value: number) => void;\n}\n\nexport function DurationSlider(props: DurationSliderProps) {\n  const { header, value, setValue } = props;\n\n  const [curValue, setCurValue] = useState(value);\n\n  const debouncedSetValue = useMemo(() => debounce(setValue, 1000), [setValue]);\n\n  const onChange = useCallback(\n    (_: any, index: number | number[]) => {\n      const millis = marks[index as number].seconds * 1000;\n      setCurValue(millis);\n      debouncedSetValue(millis);\n    },\n    [debouncedSetValue],\n  );\n\n  const indexValue = useMemo(() => findMarkIndex(curValue / 1000), [curValue]);\n\n  return (\n    <>\n      <Label>\n        {header} {formatDuration(curValue)}\n      </Label>\n      <Slider\n        value={indexValue}\n        min={0}\n        step={1}\n        max={marks.length - 1}\n        marks\n        getAriaValueText={formatDurationFromIndex}\n        valueLabelFormat={formatDurationFromIndex}\n        onChange={onChange}\n        valueLabelDisplay=\"auto\"\n        aria-labelledby=\"slider-hide-limit\"\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,KAAQ,GAAA;AAAA,EACZ,CAAA;AAAA,EACA,CAAA;AAAA,EACA,CAAA;AAAA,EACA,CAAA;AAAA,EACA,CAAA;AAAA,EACA,CAAA;AAAA,EACA,EAAA;AAAA,EACA,EAAA;AAAA,EACA,EAAA;AAAA,EACA,EAAA;AAAA,EACA,CAAI,GAAA,EAAA;AAAA,EACJ,CAAI,GAAA,EAAA;AAAA,EACJ,CAAI,GAAA,EAAA;AAAA,EACJ,CAAI,GAAA,EAAA;AAAA,EACJ,EAAK,GAAA,EAAA;AAAA,EACL,EAAK,GAAA,EAAA;AAAA,EACL,EAAK,GAAA,EAAA;AAAA,EACL,EAAK,GAAA,EAAA;AAAA,EACL,EAAK,GAAA,EAAA;AACP,CAAE,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,KAAW,MAAA;AAAA,EACvB,KAAO,EAAA,KAAA;AAAA,EACP,KAAA,EAAO,0BAA0B,KAAK,CAAA;AAAA,EACtC,OAAS,EAAA,KAAA;AACX,CAAE,CAAA,CAAA,CAAA;AAEF,SAAS,cAAc,OAAyB,EAAA;AAC9C,EAAA,IAAI,KAAM,CAAA,CAAC,CAAE,CAAA,OAAA,GAAU,OAAS,EAAA;AAC9B,IAAO,OAAA,CAAA,CAAA;AAAA,aACE,KAAM,CAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAE,UAAU,OAAS,EAAA;AACpD,IAAA,OAAO,MAAM,MAAS,GAAA,CAAA,CAAA;AAAA,GACxB;AACA,EAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,MAAM,MAAS,GAAA,CAAA,EAAG,EAAE,CAAG,EAAA;AACzC,IAAM,MAAA,CAAA,GAAI,MAAM,CAAC,CAAA,CAAA;AACjB,IAAM,MAAA,CAAA,GAAI,KAAM,CAAA,CAAA,GAAI,CAAC,CAAA,CAAA;AACrB,IAAI,IAAA,OAAA,KAAY,EAAE,OAAS,EAAA;AACzB,MAAO,OAAA,CAAA,CAAA;AAAA,KACT,MAAA,IAAW,OAAY,KAAA,CAAA,CAAE,OAAS,EAAA;AAChC,MAAA,OAAO,CAAI,GAAA,CAAA,CAAA;AAAA,eACF,CAAE,CAAA,OAAA,GAAU,OAAW,IAAA,CAAA,CAAE,UAAU,OAAS,EAAA;AACrD,MAAA,OAAO,UAAU,CAAE,CAAA,OAAA,GAAU,EAAE,OAAU,GAAA,OAAA,GAAU,IAAI,CAAI,GAAA,CAAA,CAAA;AAAA,KAC7D;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA;AACT,CAAA;AAEA,SAAS,wBAAwB,KAAe,EAAA;AAC9C,EAAA,OAAO,yBAA0B,CAAA,KAAA,CAAM,KAAK,CAAA,CAAE,OAAO,CAAA,CAAA;AACvD,CAAA;AAQO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAA,MAAM,EAAE,MAAA,EAAQ,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AAEpC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE9C,EAAM,MAAA,iBAAA,GAAoB,QAAQ,MAAM,QAAA,CAAS,UAAU,GAAI,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAE5E,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,GAAQ,KAA6B,KAAA;AACpC,MAAA,MAAM,MAAS,GAAA,KAAA,CAAM,KAAe,CAAA,CAAE,OAAU,GAAA,GAAA,CAAA;AAChD,MAAA,WAAA,CAAY,MAAM,CAAA,CAAA;AAClB,MAAA,iBAAA,CAAkB,MAAM,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,iBAAiB,CAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM,aAAA,CAAc,WAAW,GAAI,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAE3E,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,KACE,EAAA,IAAA,EAAA,MAAA,EAAO,KAAE,cAAe,CAAA,QAAQ,CACnC,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,UAAA;AAAA,MACP,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,GAAA,EAAK,MAAM,MAAS,GAAA,CAAA;AAAA,MACpB,KAAK,EAAA,IAAA;AAAA,MACL,gBAAkB,EAAA,uBAAA;AAAA,MAClB,gBAAkB,EAAA,uBAAA;AAAA,MAClB,QAAA;AAAA,MACA,iBAAkB,EAAA,MAAA;AAAA,MAClB,iBAAgB,EAAA,mBAAA;AAAA,KAAA;AAAA,GAEpB,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/label.esm.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(
+  (theme) => ({
+    label: {
+      fontWeight: "normal",
+      margin: theme.spacing(0)
+    }
+  }),
+  {
+    name: "CicdStatisticsLabel"
+  }
+);
+function Label({ children }) {
+  const classes = useStyles();
+  return /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.label }, children);
+}
+
+export { Label, useStyles };
+//# sourceMappingURL=label.esm.js.map

package/dist/components/label.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.esm.js","sources":["../../src/components/label.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { PropsWithChildren } from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(\n  theme => ({\n    label: {\n      fontWeight: 'normal',\n      margin: theme.spacing(0),\n    },\n  }),\n  {\n    name: 'CicdStatisticsLabel',\n  },\n);\n\nexport function Label({ children }: PropsWithChildren<{}>) {\n  const classes = useStyles();\n\n  return (\n    <Typography variant=\"subtitle2\" className={classes.label}>\n      {children}\n    </Typography>\n  );\n}\n"],"names":[],"mappings":";;;;AAoBO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAU,KAAA,MAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,UAAY,EAAA,QAAA;AAAA,MACZ,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAAA,EACA;AAAA,IACE,IAAM,EAAA,qBAAA;AAAA,GACR;AACF,EAAA;AAEgB,SAAA,KAAA,CAAM,EAAE,QAAA,EAAmC,EAAA;AACzD,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAE1B,EAAA,2CACG,UAAW,EAAA,EAAA,OAAA,EAAQ,aAAY,SAAW,EAAA,OAAA,CAAQ,SAChD,QACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/progress.esm.js

@@ -0,0 +1,78 @@
+import React from 'react';
+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';
+import Alert from '@material-ui/lab/Alert';
+import { useApp } from '@backstage/core-plugin-api';
+
+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
+}) {
+  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: (stateAsSingleProgress.progress ?? 0) * 100,
+        valueBuffer: (stateAsSingleProgress.progressBuffer ?? 0) * 100
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(Timeline, null, stateAsStepProgress.steps.map((step, index) => /* @__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: (step.progress ?? 0) * 100,
+      valueBuffer: (step.progressBuffer ?? 0) * 100
+    }
+  ))))));
+}
+function getDotColor(step) {
+  const progress = step.progress ?? 0;
+  if (progress >= 1) {
+    return "primary";
+  } else if (progress > 0) {
+    return "secondary";
+  }
+  return "grey";
+}
+
+export { ViewProgress, renderFallbacks, useAsyncChain };
+//# sourceMappingURL=progress.esm.js.map

package/dist/components/progress.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.esm.js","sources":["../../src/components/progress.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { CSSProperties, DependencyList } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport Box from '@material-ui/core/Box';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\nimport TimelineDot, { TimelineDotProps } from '@material-ui/lab/TimelineDot';\nimport Alert from '@material-ui/lab/Alert';\nimport { useApp } from '@backstage/core-plugin-api';\n\nconst stepProgressStyle: CSSProperties = {\n  marginTop: 6,\n};\n\n// Matching react-use, only has loading/error/value\ntype AsyncState<T> =\n  | {\n      loading: boolean;\n      error?: undefined;\n      value?: undefined;\n    }\n  | {\n      loading: true;\n      error?: Error | undefined;\n      value?: T;\n    }\n  | {\n      loading: false;\n      error: Error;\n      value?: undefined;\n    }\n  | {\n      loading: false;\n      error?: undefined;\n      value: T;\n    };\n\nexport interface ProgressStep extends ProgessAsSingle {\n  title: string;\n}\nexport interface ProgessAsSteps {\n  steps: Array<ProgressStep>;\n}\nexport interface ProgessAsSingle<T = number> {\n  progress?: T;\n  progressBuffer?: T;\n}\n\nexport type ProgessState<T = number> =\n  | ProgessAsSingle<T>\n  | (T extends number ? ProgessAsSteps : { steps?: undefined });\n\nexport type ProgressAsLoading = ProgessState & {\n  loading: true;\n  error?: undefined;\n  value?: undefined;\n};\nexport type ProgressAsError = ProgessState<undefined> & {\n  loading?: false | undefined;\n  error: Error;\n  value?: undefined;\n};\nexport type ProgressAsValue<T> = ProgessState<undefined> & {\n  loading?: false | undefined;\n  error?: undefined;\n  value: T;\n};\n\n/**\n * An AsyncState but with the addition of progress (decimal 0-1) to allow\n * rendering a progress bar while waiting.\n */\nexport type ProgressType<T> =\n  | ProgressAsLoading\n  | ProgressAsError\n  | ProgressAsValue<T>;\n\nconst sentry = Symbol();\n\n/**\n * Casts an AsyncState or Progress into its non-succeeded sub types\n */\ntype Unsuccessful<S extends ProgressType<any> | AsyncState<any>> =\n  S extends ProgressType<any>\n    ? ProgressAsLoading | ProgressAsError\n    : Omit<AsyncState<any>, 'value'>;\n\n/**\n * Similar to useAsync except it \"waits\" for a dependent (upstream) async state\n * to finish first, otherwise it forwards the dependent pending state.\n *\n * When/if the dependent state has settled successfully, the callback will be\n * invoked for a new layer of async state with the dependent (upstream) success\n * result as argument.\n */\nexport function useAsyncChain<S extends ProgressType<any> | AsyncState<any>, R>(\n  parentState: S,\n  fn: (value: NonNullable<S['value']>) => Promise<R>,\n  deps: DependencyList,\n): Unsuccessful<S> | AsyncState<R> {\n  const childState = useAsync(\n    async () => (!parentState.value ? sentry : fn(parentState.value)),\n    [!parentState.error, !parentState.loading, parentState.value, ...deps],\n  );\n\n  if (!parentState.value) {\n    return parentState as Unsuccessful<S>;\n  } else if (childState.value === sentry) {\n    return { loading: true };\n  }\n  return childState as AsyncState<R>;\n}\n\nexport function renderFallbacks<T>(\n  state: ProgressType<T> | AsyncState<T>,\n  success: (value: T) => JSX.Element,\n): JSX.Element {\n  if (state.loading) {\n    return <ViewProgress state={state} />;\n  } else if (state.error) {\n    return <Alert severity=\"error\">{state.error.stack}</Alert>;\n  }\n\n  return success(state.value!);\n}\n\nexport function ViewProgress({\n  state,\n}: {\n  state: ProgressAsLoading | { loading: boolean };\n}) {\n  const { Progress } = useApp().getComponents();\n\n  const stateAsSingleProgress = state as ProgessAsSingle;\n  const stateAsStepProgress = state as ProgessAsSteps;\n\n  if (\n    !stateAsSingleProgress.progress &&\n    !stateAsSingleProgress.progressBuffer &&\n    !stateAsStepProgress.steps\n  ) {\n    // Simple spinner\n    return <Progress />;\n  } else if (stateAsSingleProgress.progress !== undefined) {\n    // Simple _single_ progress\n    return (\n      <Box sx={{ width: '100%' }}>\n        <LinearProgress\n          variant=\"buffer\"\n          value={(stateAsSingleProgress.progress ?? 0) * 100}\n          valueBuffer={(stateAsSingleProgress.progressBuffer ?? 0) * 100}\n        />\n      </Box>\n    );\n  }\n\n  // Multi-step progresses\n\n  return (\n    <Box sx={{ width: '100%' }}>\n      <Timeline>\n        {stateAsStepProgress.steps.map((step, index) => (\n          <TimelineItem key={index}>\n            <TimelineOppositeContent>{step.title}</TimelineOppositeContent>\n            <TimelineSeparator>\n              <TimelineDot color={getDotColor(step)} />\n              {index < stateAsStepProgress.steps.length - 1 ? (\n                <TimelineConnector />\n              ) : null}\n            </TimelineSeparator>\n            <TimelineContent>\n              {!step.progress && !step.progressBuffer ? null : (\n                <LinearProgress\n                  style={stepProgressStyle}\n                  variant=\"buffer\"\n                  value={(step.progress ?? 0) * 100}\n                  valueBuffer={(step.progressBuffer ?? 0) * 100}\n                />\n              )}\n            </TimelineContent>\n          </TimelineItem>\n        ))}\n      </Timeline>\n    </Box>\n  );\n}\n\nfunction getDotColor(step: ProgressStep): TimelineDotProps['color'] {\n  const progress = step.progress ?? 0;\n\n  if (progress >= 1) {\n    return 'primary';\n  } else if (progress > 0) {\n    return 'secondary';\n  }\n  return 'grey';\n}\n"],"names":[],"mappings":"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"}