@backstage-community/plugin-cicd-statistics 0.4.0 → 0.6.0

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

@@ -1 +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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"}
+{"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 { 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

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
 import Slider from '@material-ui/core/Slider';
 import { debounce } from 'lodash';
 import { formatDurationFromSeconds, formatDuration } from './utils.esm.js';
@@ -64,21 +65,28 @@ function DurationSlider(props) {
     [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"
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Label, { children: [
+      header,
+      " ",
+      formatDuration(curValue)
+    ] }),
+    /* @__PURE__ */ jsx(
+      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 };

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

@@ -1 +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;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;AACX,CAAE,CAAA,CAAA;AAEF,SAAS,cAAc,OAAyB,EAAA;AAC9C,EAAA,IAAI,KAAM,CAAA,CAAC,CAAE,CAAA,OAAA,GAAU,OAAS,EAAA;AAC9B,IAAO,OAAA,CAAA;AAAA,aACE,KAAM,CAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAE,UAAU,OAAS,EAAA;AACpD,IAAA,OAAO,MAAM,MAAS,GAAA,CAAA;AAAA;AAExB,EAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,MAAM,MAAS,GAAA,CAAA,EAAG,EAAE,CAAG,EAAA;AACzC,IAAM,MAAA,CAAA,GAAI,MAAM,CAAC,CAAA;AACjB,IAAM,MAAA,CAAA,GAAI,KAAM,CAAA,CAAA,GAAI,CAAC,CAAA;AACrB,IAAI,IAAA,OAAA,KAAY,EAAE,OAAS,EAAA;AACzB,MAAO,OAAA,CAAA;AAAA,KACT,MAAA,IAAW,OAAY,KAAA,CAAA,CAAE,OAAS,EAAA;AAChC,MAAA,OAAO,CAAI,GAAA,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;AAAA;AAC7D;AAEF,EAAO,OAAA,CAAA;AACT;AAEA,SAAS,wBAAwB,KAAe,EAAA;AAC9C,EAAA,OAAO,yBAA0B,CAAA,KAAA,CAAM,KAAK,CAAA,CAAE,OAAO,CAAA;AACvD;AAQO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAA,MAAM,EAAE,MAAA,EAAQ,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAEpC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,iBAAA,GAAoB,QAAQ,MAAM,QAAA,CAAS,UAAU,GAAI,CAAA,EAAG,CAAC,QAAQ,CAAC,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;AAChD,MAAA,WAAA,CAAY,MAAM,CAAA;AAClB,MAAA,iBAAA,CAAkB,MAAM,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM,aAAA,CAAc,WAAW,GAAI,CAAA,EAAG,CAAC,QAAQ,CAAC,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;AAAA;AAAA,GAEpB,CAAA;AAEJ;;;;"}
+{"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 { 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":"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"}

package/dist/components/label.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -15,7 +15,7 @@ const useStyles = makeStyles(
 );
 function Label({ children }) {
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.label }, children);
+  return /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: classes.label, children });
 }
 
 export { Label, useStyles };

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

@@ -1 +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;AAAA;AACzB,GACF,CAAA;AAAA,EACA;AAAA,IACE,IAAM,EAAA;AAAA;AAEV;AAEgB,SAAA,KAAA,CAAM,EAAE,QAAA,EAAmC,EAAA;AACzD,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,2CACG,UAAW,EAAA,EAAA,OAAA,EAAQ,aAAY,SAAW,EAAA,OAAA,CAAQ,SAChD,QACH,CAAA;AAEJ;;;;"}
+{"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 { 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;AAAA;AACzB,GACF,CAAA;AAAA,EACA;AAAA,IACE,IAAM,EAAA;AAAA;AAEV;AAEgB,SAAA,KAAA,CAAM,EAAE,QAAA,EAAmC,EAAA;AACzD,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,2BACG,UAAW,EAAA,EAAA,OAAA,EAAQ,aAAY,SAAW,EAAA,OAAA,CAAQ,OAChD,QACH,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/progress.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import useAsync from 'react-use/esm/useAsync';
 import Box from '@material-ui/core/Box';
 import LinearProgress from '@material-ui/core/LinearProgress';
@@ -30,9 +30,9 @@ function useAsyncChain(parentState, fn, deps) {
 }
 function renderFallbacks(state, success) {
   if (state.loading) {
-    return /* @__PURE__ */ React.createElement(ViewProgress, { state });
+    return /* @__PURE__ */ jsx(ViewProgress, { state });
   } else if (state.error) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, state.error.stack);
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: state.error.stack });
   }
   return success(state.value);
 }
@@ -43,26 +43,33 @@ function ViewProgress({
   const stateAsSingleProgress = state;
   const stateAsStepProgress = state;
   if (!stateAsSingleProgress.progress && !stateAsSingleProgress.progressBuffer && !stateAsStepProgress.steps) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+    return /* @__PURE__ */ jsx(Progress, {});
   } else if (stateAsSingleProgress.progress !== void 0) {
-    return /* @__PURE__ */ React.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
       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
-    }
-  ))))));
+  return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(Timeline, { children: stateAsStepProgress.steps.map((step, index) => /* @__PURE__ */ jsxs(TimelineItem, { children: [
+    /* @__PURE__ */ jsx(TimelineOppositeContent, { children: step.title }),
+    /* @__PURE__ */ jsxs(TimelineSeparator, { children: [
+      /* @__PURE__ */ jsx(TimelineDot, { color: getDotColor(step) }),
+      index < stateAsStepProgress.steps.length - 1 ? /* @__PURE__ */ jsx(TimelineConnector, {}) : null
+    ] }),
+    /* @__PURE__ */ jsx(TimelineContent, { children: !step.progress && !step.progressBuffer ? null : /* @__PURE__ */ jsx(
+      LinearProgress,
+      {
+        style: stepProgressStyle,
+        variant: "buffer",
+        value: (step.progress ?? 0) * 100,
+        valueBuffer: (step.progressBuffer ?? 0) * 100
+      }
+    ) })
+  ] }, index)) }) });
 }
 function getDotColor(step) {
   const progress = step.progress ?? 0;

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

@@ -1 +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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"}
+{"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 { 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":";;;;;;;;;;;;;;AA8BA,MAAM,iBAAmC,GAAA;AAAA,EACvC,SAAW,EAAA;AACb,CAAA;AAiEA,MAAM,SAAS,MAAO,EAAA;AAkBN,SAAA,aAAA,CACd,WACA,EAAA,EAAA,EACA,IACiC,EAAA;AACjC,EAAA,MAAM,UAAa,GAAA,QAAA;AAAA,IACjB,YAAa,CAAC,WAAA,CAAY,QAAQ,MAAS,GAAA,EAAA,CAAG,YAAY,KAAK,CAAA;AAAA,IAC/D,CAAC,CAAC,WAAA,CAAY,KAAO,EAAA,CAAC,YAAY,OAAS,EAAA,WAAA,CAAY,KAAO,EAAA,GAAG,IAAI;AAAA,GACvE;AAEA,EAAI,IAAA,CAAC,YAAY,KAAO,EAAA;AACtB,IAAO,OAAA,WAAA;AAAA,GACT,MAAA,IAAW,UAAW,CAAA,KAAA,KAAU,MAAQ,EAAA;AACtC,IAAO,OAAA,EAAE,SAAS,IAAK,EAAA;AAAA;AAEzB,EAAO,OAAA,UAAA;AACT;AAEgB,SAAA,eAAA,CACd,OACA,OACa,EAAA;AACb,EAAA,IAAI,MAAM,OAAS,EAAA;AACjB,IAAO,uBAAA,GAAA,CAAC,gBAAa,KAAc,EAAA,CAAA;AAAA,GACrC,MAAA,IAAW,MAAM,KAAO,EAAA;AACtB,IAAA,2BAAQ,KAAM,EAAA,EAAA,QAAA,EAAS,OAAS,EAAA,QAAA,EAAA,KAAA,CAAM,MAAM,KAAM,EAAA,CAAA;AAAA;AAGpD,EAAO,OAAA,OAAA,CAAQ,MAAM,KAAM,CAAA;AAC7B;AAEO,SAAS,YAAa,CAAA;AAAA,EAC3B;AACF,CAEG,EAAA;AACD,EAAA,MAAM,EAAE,QAAA,EAAa,GAAA,MAAA,GAAS,aAAc,EAAA;AAE5C,EAAA,MAAM,qBAAwB,GAAA,KAAA;AAC9B,EAAA,MAAM,mBAAsB,GAAA,KAAA;AAE5B,EACE,IAAA,CAAC,sBAAsB,QACvB,IAAA,CAAC,sBAAsB,cACvB,IAAA,CAAC,oBAAoB,KACrB,EAAA;AAEA,IAAA,2BAAQ,QAAS,EAAA,EAAA,CAAA;AAAA,GACnB,MAAA,IAAW,qBAAsB,CAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAEvD,IAAA,2BACG,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,KAAA,EAAO,QAChB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,QAAA;AAAA,QACR,KAAA,EAAA,CAAQ,qBAAsB,CAAA,QAAA,IAAY,CAAK,IAAA,GAAA;AAAA,QAC/C,WAAA,EAAA,CAAc,qBAAsB,CAAA,cAAA,IAAkB,CAAK,IAAA;AAAA;AAAA,KAE/D,EAAA,CAAA;AAAA;AAMJ,EAAA,2BACG,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,KAAA,EAAO,QAChB,EAAA,QAAA,kBAAA,GAAA,CAAC,QACE,EAAA,EAAA,QAAA,EAAA,mBAAA,CAAoB,MAAM,GAAI,CAAA,CAAC,IAAM,EAAA,KAAA,0BACnC,YACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,uBAAA,EAAA,EAAyB,eAAK,KAAM,EAAA,CAAA;AAAA,yBACpC,iBACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,KAAA,EAAO,WAAY,CAAA,IAAI,CAAG,EAAA,CAAA;AAAA,MACtC,QAAQ,mBAAoB,CAAA,KAAA,CAAM,SAAS,CAC1C,mBAAA,GAAA,CAAC,qBAAkB,CACjB,GAAA;AAAA,KACN,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,mBACE,QAAC,EAAA,CAAA,IAAA,CAAK,YAAY,CAAC,IAAA,CAAK,iBAAiB,IACxC,mBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,iBAAA;AAAA,QACP,OAAQ,EAAA,QAAA;AAAA,QACR,KAAA,EAAA,CAAQ,IAAK,CAAA,QAAA,IAAY,CAAK,IAAA,GAAA;AAAA,QAC9B,WAAA,EAAA,CAAc,IAAK,CAAA,cAAA,IAAkB,CAAK,IAAA;AAAA;AAAA,KAGhD,EAAA;AAAA,GAjBiB,EAAA,EAAA,KAkBnB,CACD,CAAA,EACH,CACF,EAAA,CAAA;AAEJ;AAEA,SAAS,YAAY,IAA+C,EAAA;AAClE,EAAM,MAAA,QAAA,GAAW,KAAK,QAAY,IAAA,CAAA;AAElC,EAAA,IAAI,YAAY,CAAG,EAAA;AACjB,IAAO,OAAA,SAAA;AAAA,GACT,MAAA,IAAW,WAAW,CAAG,EAAA;AACvB,IAAO,OAAA,WAAA;AAAA;AAET,EAAO,OAAA,MAAA;AACT;;;;"}

package/dist/components/toggle.esm.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 
@@ -10,10 +11,10 @@ function Toggle({
   const toggler = useCallback(() => {
     setChecked(!checked);
   }, [checked, setChecked]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     FormControlLabel,
     {
-      control: /* @__PURE__ */ React.createElement(Switch, { checked, onChange: toggler }),
+      control: /* @__PURE__ */ jsx(Switch, { checked, onChange: toggler }),
       label: children
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.esm.js","sources":["../../src/components/toggle.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, PropsWithChildren } from 'react';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Switch from '@material-ui/core/Switch';\n\nexport interface ToggleProps {\n  checked: boolean;\n  setChecked: (checked: boolean) => void;\n}\n\nexport function Toggle({\n  checked,\n  setChecked,\n  children,\n}: PropsWithChildren<ToggleProps>) {\n  const toggler = useCallback(() => {\n    setChecked(!checked);\n  }, [checked, setChecked]);\n\n  return (\n    <FormControlLabel\n      control={<Switch checked={checked} onChange={toggler} />}\n      label={children}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAyBO,SAAS,MAAO,CAAA;AAAA,EACrB,OAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAmC,EAAA;AACjC,EAAM,MAAA,OAAA,GAAU,YAAY,MAAM;AAChC,IAAA,UAAA,CAAW,CAAC,OAAO,CAAA;AAAA,GAClB,EAAA,CAAC,OAAS,EAAA,UAAU,CAAC,CAAA;AAExB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAkB,UAAU,OAAS,EAAA,CAAA;AAAA,MACtD,KAAO,EAAA;AAAA;AAAA,GACT;AAEJ;;;;"}
+{"version":3,"file":"toggle.esm.js","sources":["../../src/components/toggle.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 { useCallback, PropsWithChildren } from 'react';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Switch from '@material-ui/core/Switch';\n\nexport interface ToggleProps {\n  checked: boolean;\n  setChecked: (checked: boolean) => void;\n}\n\nexport function Toggle({\n  checked,\n  setChecked,\n  children,\n}: PropsWithChildren<ToggleProps>) {\n  const toggler = useCallback(() => {\n    setChecked(!checked);\n  }, [checked, setChecked]);\n\n  return (\n    <FormControlLabel\n      control={<Switch checked={checked} onChange={toggler} />}\n      label={children}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAyBO,SAAS,MAAO,CAAA;AAAA,EACrB,OAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAmC,EAAA;AACjC,EAAM,MAAA,OAAA,GAAU,YAAY,MAAM;AAChC,IAAA,UAAA,CAAW,CAAC,OAAO,CAAA;AAAA,GAClB,EAAA,CAAC,OAAS,EAAA,UAAU,CAAC,CAAA;AAExB,EACE,uBAAA,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,OAAS,kBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAkB,UAAU,OAAS,EAAA,CAAA;AAAA,MACtD,KAAO,EAAA;AAAA;AAAA,GACT;AAEJ;;;;"}

package/dist/components/utils.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Duration, DateTime } from 'luxon';
 import humanizeDuration from 'humanize-duration';
 import { capitalize } from 'lodash';
@@ -32,10 +32,10 @@ function formatDateTimeShort(milliseconds) {
   );
 }
 function labelFormatter(epoch) {
-  return /* @__PURE__ */ React.createElement(Typography, { component: "span", style: infoText }, formatDateTimeShort(epoch));
+  return /* @__PURE__ */ jsx(Typography, { component: "span", style: infoText, children: formatDateTimeShort(epoch) });
 }
 function labelFormatterWithoutTime(epoch) {
-  return /* @__PURE__ */ React.createElement(Typography, { component: "span", style: infoText }, formatDateShort(epoch));
+  return /* @__PURE__ */ jsx(Typography, { component: "span", style: infoText, children: formatDateShort(epoch) });
 }
 function tickFormatterX(epoch) {
   return formatDateShort(epoch);
@@ -51,7 +51,12 @@ function tickFormatterY(duration) {
 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)),
+    /* @__PURE__ */ jsxs(Typography, { component: "span", style: infoText, children: [
+      capitalize(name),
+      ":",
+      " ",
+      name.endsWith(" count") ? durationOrCount : formatDuration(durationOrCount)
+    ] }),
     null
   ];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"utils.esm.js","sources":["../../src/components/utils.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 } from 'react';\nimport { DateTime, Duration } from 'luxon';\nimport humanizeDuration from 'humanize-duration';\nimport { capitalize } from 'lodash';\nimport Typography from '@material-ui/core/Typography';\n\nconst infoText: CSSProperties = { color: 'InfoText' };\n\n/**\n * Picks {num} elements from {arr} evenly, from the first to the last\n */\nexport function pickElements<T>(arr: ReadonlyArray<T>, num: number): Array<T> {\n  if (arr.length <= num) {\n    return [...arr];\n  }\n\n  if (num < 2) {\n    return [arr[arr.length / 2]];\n  }\n\n  const step = arr.length / (num - 1);\n  return [\n    ...Array.from(Array(num - 1)).map(\n      (_, index) => arr[Math.round(index * step)],\n    ),\n    arr[arr.length - 1],\n  ];\n}\n\nfunction formatDateShort(milliseconds: number) {\n  if ((milliseconds as any) === 'auto') {\n    // When recharts gets confused (empty data)\n    return '';\n  }\n  return DateTime.fromMillis(milliseconds).toLocaleString(DateTime.DATE_SHORT);\n}\nfunction formatDateTimeShort(milliseconds: number) {\n  if ((milliseconds as any) === 'auto') {\n    // When recharts gets confused (empty data)\n    return '';\n  }\n  return DateTime.fromMillis(milliseconds).toLocaleString(\n    DateTime.DATETIME_SHORT,\n  );\n}\n\nexport function labelFormatter(epoch: number) {\n  return (\n    <Typography component=\"span\" style={infoText}>\n      {formatDateTimeShort(epoch)}\n    </Typography>\n  );\n}\n\nexport function labelFormatterWithoutTime(epoch: number) {\n  return (\n    <Typography component=\"span\" style={infoText}>\n      {formatDateShort(epoch)}\n    </Typography>\n  );\n}\n\nexport function tickFormatterX(epoch: number) {\n  return formatDateShort(epoch);\n}\n\nexport function tickFormatterY(duration: number) {\n  if (duration === 0) {\n    return '0';\n  } else if (duration < 500) {\n    return `${duration} ms`;\n  }\n  return formatDuration(duration)\n    .replace(/second.*/, 'sec')\n    .replace(/minute.*/, 'min')\n    .replace(/hour.*/, 'h')\n    .replace(/day.*/, 'd')\n    .replace(/month.*/, 'm')\n    .replace(/year.*/, 'y');\n}\n\nexport function tooltipValueFormatter(\n  durationOrCount: number,\n  name: string,\n): [any, any] {\n  return [\n    // TODO(Rugvip): Types don't allow returning elements, but it was here before so presumably works\n    <Typography component=\"span\" style={infoText}>\n      {capitalize(name)}:{' '}\n      {name.endsWith(' count')\n        ? durationOrCount\n        : formatDuration(durationOrCount)}\n    </Typography>,\n    null,\n  ];\n}\n\nexport function formatDuration(millis: number) {\n  let rest = Math.round(millis);\n  const days = Math.floor(rest / (1000 * 60 * 60 * 24));\n  rest -= days * (1000 * 60 * 60 * 24);\n  const hours = Math.floor(rest / (1000 * 60 * 60));\n  rest -= hours * (1000 * 60 * 60);\n  const minutes = Math.floor(rest / (1000 * 60));\n  rest -= minutes * (1000 * 60);\n  const seconds = Math.floor(rest / 1000);\n  rest -= seconds * 1000;\n  const milliseconds = rest;\n\n  if (!days && !hours && !minutes) {\n    if (seconds < 1) {\n      return `${milliseconds}ms`;\n    } else if (seconds < 2) {\n      return `${((milliseconds + seconds * 1000) / 1000).toFixed(1)}s`;\n    }\n  }\n\n  const dur = Duration.fromObject({\n    ...(days && { days }),\n    ...(hours && { hours }),\n    ...(minutes && !days && { minutes }),\n    ...(seconds && !days && !hours && { seconds }),\n  });\n\n  return humanizeDuration(dur.toMillis(), { round: true });\n}\n\nexport function formatDurationFromSeconds(seconds: number) {\n  return formatDuration(seconds * 1000);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.esm.js","sources":["../../src/components/utils.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 { CSSProperties } from 'react';\nimport { DateTime, Duration } from 'luxon';\nimport humanizeDuration from 'humanize-duration';\nimport { capitalize } from 'lodash';\nimport Typography from '@material-ui/core/Typography';\n\nconst infoText: CSSProperties = { color: 'InfoText' };\n\n/**\n * Picks {num} elements from {arr} evenly, from the first to the last\n */\nexport function pickElements<T>(arr: ReadonlyArray<T>, num: number): Array<T> {\n  if (arr.length <= num) {\n    return [...arr];\n  }\n\n  if (num < 2) {\n    return [arr[arr.length / 2]];\n  }\n\n  const step = arr.length / (num - 1);\n  return [\n    ...Array.from(Array(num - 1)).map(\n      (_, index) => arr[Math.round(index * step)],\n    ),\n    arr[arr.length - 1],\n  ];\n}\n\nfunction formatDateShort(milliseconds: number) {\n  if ((milliseconds as any) === 'auto') {\n    // When recharts gets confused (empty data)\n    return '';\n  }\n  return DateTime.fromMillis(milliseconds).toLocaleString(DateTime.DATE_SHORT);\n}\nfunction formatDateTimeShort(milliseconds: number) {\n  if ((milliseconds as any) === 'auto') {\n    // When recharts gets confused (empty data)\n    return '';\n  }\n  return DateTime.fromMillis(milliseconds).toLocaleString(\n    DateTime.DATETIME_SHORT,\n  );\n}\n\nexport function labelFormatter(epoch: number) {\n  return (\n    <Typography component=\"span\" style={infoText}>\n      {formatDateTimeShort(epoch)}\n    </Typography>\n  );\n}\n\nexport function labelFormatterWithoutTime(epoch: number) {\n  return (\n    <Typography component=\"span\" style={infoText}>\n      {formatDateShort(epoch)}\n    </Typography>\n  );\n}\n\nexport function tickFormatterX(epoch: number) {\n  return formatDateShort(epoch);\n}\n\nexport function tickFormatterY(duration: number) {\n  if (duration === 0) {\n    return '0';\n  } else if (duration < 500) {\n    return `${duration} ms`;\n  }\n  return formatDuration(duration)\n    .replace(/second.*/, 'sec')\n    .replace(/minute.*/, 'min')\n    .replace(/hour.*/, 'h')\n    .replace(/day.*/, 'd')\n    .replace(/month.*/, 'm')\n    .replace(/year.*/, 'y');\n}\n\nexport function tooltipValueFormatter(\n  durationOrCount: number,\n  name: string,\n): [any, any] {\n  return [\n    // TODO(Rugvip): Types don't allow returning elements, but it was here before so presumably works\n    <Typography component=\"span\" style={infoText}>\n      {capitalize(name)}:{' '}\n      {name.endsWith(' count')\n        ? durationOrCount\n        : formatDuration(durationOrCount)}\n    </Typography>,\n    null,\n  ];\n}\n\nexport function formatDuration(millis: number) {\n  let rest = Math.round(millis);\n  const days = Math.floor(rest / (1000 * 60 * 60 * 24));\n  rest -= days * (1000 * 60 * 60 * 24);\n  const hours = Math.floor(rest / (1000 * 60 * 60));\n  rest -= hours * (1000 * 60 * 60);\n  const minutes = Math.floor(rest / (1000 * 60));\n  rest -= minutes * (1000 * 60);\n  const seconds = Math.floor(rest / 1000);\n  rest -= seconds * 1000;\n  const milliseconds = rest;\n\n  if (!days && !hours && !minutes) {\n    if (seconds < 1) {\n      return `${milliseconds}ms`;\n    } else if (seconds < 2) {\n      return `${((milliseconds + seconds * 1000) / 1000).toFixed(1)}s`;\n    }\n  }\n\n  const dur = Duration.fromObject({\n    ...(days && { days }),\n    ...(hours && { hours }),\n    ...(minutes && !days && { minutes }),\n    ...(seconds && !days && !hours && { seconds }),\n  });\n\n  return humanizeDuration(dur.toMillis(), { round: true });\n}\n\nexport function formatDurationFromSeconds(seconds: number) {\n  return formatDuration(seconds * 1000);\n}\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,QAAA,GAA0B,EAAE,KAAA,EAAO,UAAW,EAAA;AAKpC,SAAA,YAAA,CAAgB,KAAuB,GAAuB,EAAA;AAC5E,EAAI,IAAA,GAAA,CAAI,UAAU,GAAK,EAAA;AACrB,IAAO,OAAA,CAAC,GAAG,GAAG,CAAA;AAAA;AAOhB,EAAM,MAAA,IAAA,GAAO,GAAI,CAAA,MAAA,IAAU,GAAM,GAAA,CAAA,CAAA;AACjC,EAAO,OAAA;AAAA,IACL,GAAG,KAAM,CAAA,IAAA,CAAK,MAAM,GAAM,GAAA,CAAC,CAAC,CAAE,CAAA,GAAA;AAAA,MAC5B,CAAC,GAAG,KAAU,KAAA,GAAA,CAAI,KAAK,KAAM,CAAA,KAAA,GAAQ,IAAI,CAAC;AAAA,KAC5C;AAAA,IACA,GAAA,CAAI,GAAI,CAAA,MAAA,GAAS,CAAC;AAAA,GACpB;AACF;AAEA,SAAS,gBAAgB,YAAsB,EAAA;AAC7C,EAAA,IAAK,iBAAyB,MAAQ,EAAA;AAEpC,IAAO,OAAA,EAAA;AAAA;AAET,EAAA,OAAO,SAAS,UAAW,CAAA,YAAY,CAAE,CAAA,cAAA,CAAe,SAAS,UAAU,CAAA;AAC7E;AACA,SAAS,oBAAoB,YAAsB,EAAA;AACjD,EAAA,IAAK,iBAAyB,MAAQ,EAAA;AAEpC,IAAO,OAAA,EAAA;AAAA;AAET,EAAO,OAAA,QAAA,CAAS,UAAW,CAAA,YAAY,CAAE,CAAA,cAAA;AAAA,IACvC,QAAS,CAAA;AAAA,GACX;AACF;AAEO,SAAS,eAAe,KAAe,EAAA;AAC5C,EACE,uBAAA,GAAA,CAAC,cAAW,SAAU,EAAA,MAAA,EAAO,OAAO,QACjC,EAAA,QAAA,EAAA,mBAAA,CAAoB,KAAK,CAC5B,EAAA,CAAA;AAEJ;AAEO,SAAS,0BAA0B,KAAe,EAAA;AACvD,EACE,uBAAA,GAAA,CAAC,cAAW,SAAU,EAAA,MAAA,EAAO,OAAO,QACjC,EAAA,QAAA,EAAA,eAAA,CAAgB,KAAK,CACxB,EAAA,CAAA;AAEJ;AAEO,SAAS,eAAe,KAAe,EAAA;AAC5C,EAAA,OAAO,gBAAgB,KAAK,CAAA;AAC9B;AAEO,SAAS,eAAe,QAAkB,EAAA;AAC/C,EAAA,IAAI,aAAa,CAAG,EAAA;AAClB,IAAO,OAAA,GAAA;AAAA,GACT,MAAA,IAAW,WAAW,GAAK,EAAA;AACzB,IAAA,OAAO,GAAG,QAAQ,CAAA,GAAA,CAAA;AAAA;AAEpB,EAAO,OAAA,cAAA,CAAe,QAAQ,CAAA,CAC3B,OAAQ,CAAA,UAAA,EAAY,KAAK,CACzB,CAAA,OAAA,CAAQ,UAAY,EAAA,KAAK,CACzB,CAAA,OAAA,CAAQ,UAAU,GAAG,CAAA,CACrB,OAAQ,CAAA,OAAA,EAAS,GAAG,CAAA,CACpB,OAAQ,CAAA,SAAA,EAAW,GAAG,CAAA,CACtB,OAAQ,CAAA,QAAA,EAAU,GAAG,CAAA;AAC1B;AAEgB,SAAA,qBAAA,CACd,iBACA,IACY,EAAA;AACZ,EAAO,OAAA;AAAA;AAAA,oBAEJ,IAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,MAAA,EAAO,OAAO,QACjC,EAAA,QAAA,EAAA;AAAA,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA,MAAE,GAAA;AAAA,MAAE,GAAA;AAAA,MACnB,KAAK,QAAS,CAAA,QAAQ,CACnB,GAAA,eAAA,GACA,eAAe,eAAe;AAAA,KACpC,EAAA,CAAA;AAAA,IACA;AAAA,GACF;AACF;AAEO,SAAS,eAAe,MAAgB,EAAA;AAC7C,EAAI,IAAA,IAAA,GAAO,IAAK,CAAA,KAAA,CAAM,MAAM,CAAA;AAC5B,EAAA,MAAM,OAAO,IAAK,CAAA,KAAA,CAAM,QAAQ,GAAO,GAAA,EAAA,GAAK,KAAK,EAAG,CAAA,CAAA;AACpD,EAAQ,IAAA,IAAA,IAAA,IAAQ,GAAO,GAAA,EAAA,GAAK,EAAK,GAAA,EAAA,CAAA;AACjC,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,IAAQ,IAAA,GAAA,GAAO,KAAK,EAAG,CAAA,CAAA;AAChD,EAAQ,IAAA,IAAA,KAAA,IAAS,MAAO,EAAK,GAAA,EAAA,CAAA;AAC7B,EAAA,MAAM,OAAU,GAAA,IAAA,CAAK,KAAM,CAAA,IAAA,IAAQ,MAAO,EAAG,CAAA,CAAA;AAC7C,EAAA,IAAA,IAAQ,WAAW,GAAO,GAAA,EAAA,CAAA;AAC1B,EAAA,MAAM,OAAU,GAAA,IAAA,CAAK,KAAM,CAAA,IAAA,GAAO,GAAI,CAAA;AACtC,EAAA,IAAA,IAAQ,OAAU,GAAA,GAAA;AAClB,EAAA,MAAM,YAAe,GAAA,IAAA;AAErB,EAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,KAAA,IAAS,CAAC,OAAS,EAAA;AAC/B,IAAA,IAAI,UAAU,CAAG,EAAA;AACf,MAAA,OAAO,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,KACxB,MAAA,IAAW,UAAU,CAAG,EAAA;AACtB,MAAA,OAAO,KAAK,YAAe,GAAA,OAAA,GAAU,OAAQ,GAAM,EAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA;AAC/D;AAGF,EAAM,MAAA,GAAA,GAAM,SAAS,UAAW,CAAA;AAAA,IAC9B,GAAI,IAAQ,IAAA,EAAE,IAAK,EAAA;AAAA,IACnB,GAAI,KAAS,IAAA,EAAE,KAAM,EAAA;AAAA,IACrB,GAAI,OAAA,IAAW,CAAC,IAAA,IAAQ,EAAE,OAAQ,EAAA;AAAA,IAClC,GAAI,OAAW,IAAA,CAAC,QAAQ,CAAC,KAAA,IAAS,EAAE,OAAQ;AAAA,GAC7C,CAAA;AAED,EAAA,OAAO,iBAAiB,GAAI,CAAA,QAAA,IAAY,EAAE,KAAA,EAAO,MAAM,CAAA;AACzD;AAEO,SAAS,0BAA0B,OAAiB,EAAA;AACzD,EAAO,OAAA,cAAA,CAAe,UAAU,GAAI,CAAA;AACtC;;;;"}

package/dist/entity-page.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Alert from '@material-ui/lab/Alert';
@@ -18,7 +19,7 @@ import { sortFilterStatusType } from './utils/api.esm.js';
 
 function EntityPageCicdCharts() {
   const state = useCicdConfiguration();
-  return renderFallbacks(state, (value) => /* @__PURE__ */ React.createElement(ZoomProvider, null, /* @__PURE__ */ React.createElement(CicdCharts, { cicdConfiguration: value })));
+  return renderFallbacks(state, (value) => /* @__PURE__ */ jsx(ZoomProvider, { children: /* @__PURE__ */ jsx(CicdCharts, { cicdConfiguration: value }) }));
 }
 const useStyles = makeStyles(
   (theme) => ({
@@ -104,36 +105,44 @@ function CicdCharts(props) {
     }
     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) => /* @__PURE__ */ React.createElement(React.Fragment, null, chartableStages.stages.size > 0 ? null : /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "No data"), !statisticsState.value?.builds?.length || !chartableStagesState.value?.daily?.values?.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
-    }
-  ))))));
+  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, lg: 2, className: classes.pane, children: /* @__PURE__ */ jsx(
+      ChartFilters,
+      {
+        analysis: chartableStagesState.value,
+        cicdConfiguration,
+        initialFetchFilter: chartFilter,
+        currentFetchFilter: fetchedChartData.chartFilter,
+        onChangeFetchFilter: onFilterChange,
+        updateFetchFilter: updateFilter,
+        initialViewOptions: viewOptions,
+        onChangeViewOptions: onViewOptionsChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, lg: 10, className: classes.pane, children: renderFallbacks(chartableStagesState, (chartableStages) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      chartableStages.stages.size > 0 ? null : /* @__PURE__ */ jsx(Alert, { severity: "info", children: "No data" }),
+      !statisticsState.value?.builds?.length || !chartableStagesState.value?.daily?.values?.length ? null : /* @__PURE__ */ jsx(StatusChart, { analysis: chartableStagesState.value }),
+      /* @__PURE__ */ jsx(
+        StageChart,
+        {
+          stage: chartableStages.total,
+          defaultCollapsed: 0,
+          defaultHidden: viewOptions.hideLimit,
+          chartTypes: viewOptions.chartTypes
+        }
+      ),
+      [...chartableStages.stages.entries()].map(([name, stage]) => /* @__PURE__ */ jsx(
+        StageChart,
+        {
+          stage,
+          defaultCollapsed: viewOptions.collapsedLimit,
+          defaultHidden: viewOptions.hideLimit,
+          chartTypes: viewOptions.chartTypes
+        },
+        name
+      ))
+    ] })) })
+  ] });
 }
 
 export { EntityPageCicdCharts };