UNPKG

@grafana/ui

Version:
1 lines 10.5 kB
{"version":3,"file":"RefreshPicker.mjs","sources":["../../../../src/components/RefreshPicker/RefreshPicker.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { formatDuration } from 'date-fns';\nimport { PureComponent } from 'react';\n\nimport { SelectableValue, parseDuration } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { ButtonGroup } from '../Button/ButtonGroup';\nimport { ButtonSelect } from '../Dropdown/ButtonSelect';\nimport { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton/ToolbarButton';\n\n// Default intervals used in the refresh picker component\nexport const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];\n\nexport interface Props {\n intervals?: string[];\n onRefresh?: () => void;\n onIntervalChanged: (interval: string) => void;\n value?: string;\n tooltip?: string;\n isLoading?: boolean;\n isLive?: boolean;\n text?: string;\n noIntervalPicker?: boolean;\n showAutoInterval?: boolean;\n width?: string;\n primary?: boolean;\n isOnCanvas?: boolean;\n}\n\nexport class RefreshPicker extends PureComponent<Props> {\n static offOption = {\n label: 'Off',\n value: '',\n ariaLabel: 'Turn off auto refresh',\n };\n static liveOption = {\n label: 'Live',\n value: 'LIVE',\n ariaLabel: 'Turn on live streaming',\n };\n static autoOption = {\n label: 'Auto',\n value: 'auto',\n ariaLabel: 'Select refresh from the query range',\n };\n\n static isLive = (refreshInterval?: string): boolean => refreshInterval === RefreshPicker.liveOption.value;\n\n constructor(props: Props) {\n super(props);\n }\n\n onChangeSelect = (item: SelectableValue<string>) => {\n const { onIntervalChanged } = this.props;\n if (onIntervalChanged && item.value != null) {\n onIntervalChanged(item.value);\n }\n };\n\n getVariant(): ToolbarButtonVariant {\n if (this.props.isLive) {\n return 'primary';\n }\n\n if (this.props.primary) {\n return 'primary';\n }\n\n return this.props.isOnCanvas ? 'canvas' : 'default';\n }\n\n render() {\n const { onRefresh, intervals, tooltip, value, text, isLoading, noIntervalPicker, width, showAutoInterval } =\n this.props;\n\n const currentValue = value || '';\n const variant = this.getVariant();\n const options = intervalsToOptions({ intervals, showAutoInterval });\n const option = options.find(({ value }) => value === currentValue);\n const translatedOffOption = translateOption(RefreshPicker.offOption.value);\n let selectedValue = option || translatedOffOption;\n\n if (selectedValue.label === translatedOffOption.label) {\n selectedValue = { value: '' };\n }\n\n const durationAriaLabel = selectedValue.ariaLabel;\n const ariaLabelDurationSelectedMessage = t(\n 'refresh-picker.aria-label.duration-selected',\n 'Choose refresh time interval with current interval {{durationAriaLabel}} selected',\n { durationAriaLabel }\n );\n const ariaLabelChooseIntervalMessage = t(\n 'refresh-picker.aria-label.choose-interval',\n 'Auto refresh turned off. Choose refresh time interval'\n );\n const ariaLabel = selectedValue.value === '' ? ariaLabelChooseIntervalMessage : ariaLabelDurationSelectedMessage;\n\n const tooltipIntervalSelected = t('refresh-picker.tooltip.interval-selected', 'Set auto refresh interval');\n const tooltipAutoRefreshOff = t('refresh-picker.tooltip.turned-off', 'Auto refresh off');\n const tooltipAutoRefresh = selectedValue.value === '' ? tooltipAutoRefreshOff : tooltipIntervalSelected;\n\n return (\n <ButtonGroup className=\"refresh-picker\">\n <ToolbarButton\n aria-label={text}\n tooltip={tooltip}\n onClick={onRefresh}\n variant={variant}\n icon={isLoading ? 'spinner' : 'sync'}\n style={width ? { width } : undefined}\n data-testid={selectors.components.RefreshPicker.runButtonV2}\n >\n {text}\n </ToolbarButton>\n {!noIntervalPicker && (\n <ButtonSelect\n className={css({\n borderTopLeftRadius: 'unset',\n borderBottomLeftRadius: 'unset',\n })}\n value={selectedValue}\n options={options}\n onChange={this.onChangeSelect}\n variant={variant}\n data-testid={selectors.components.RefreshPicker.intervalButtonV2}\n aria-label={ariaLabel}\n tooltip={tooltipAutoRefresh}\n />\n )}\n </ButtonGroup>\n );\n }\n}\n\nexport function translateOption(option: string) {\n switch (option) {\n case RefreshPicker.liveOption.value:\n return {\n label: t('refresh-picker.live-option.label', 'Live'),\n value: option,\n ariaLabel: t('refresh-picker.live-option.aria-label', 'Turn on live streaming'),\n };\n case RefreshPicker.offOption.value:\n return {\n label: t('refresh-picker.off-option.label', 'Off'),\n value: option,\n ariaLabel: t('refresh-picker.off-option.aria-label', 'Turn off auto refresh'),\n };\n case RefreshPicker.autoOption.value:\n return {\n label: t('refresh-picker.auto-option.label', RefreshPicker.autoOption.label),\n value: option,\n ariaLabel: t('refresh-picker.auto-option.aria-label', RefreshPicker.autoOption.ariaLabel),\n };\n }\n return {\n label: option,\n value: option,\n };\n}\n\nexport function intervalsToOptions({\n intervals = defaultIntervals,\n showAutoInterval = false,\n}: { intervals?: string[]; showAutoInterval?: boolean } = {}): Array<SelectableValue<string>> {\n const options: Array<SelectableValue<string>> = intervals.map((interval) => {\n const duration = parseDuration(interval);\n const ariaLabel = formatDuration(duration);\n\n return {\n label: interval,\n value: interval,\n ariaLabel: ariaLabel,\n };\n });\n\n if (showAutoInterval) {\n options.unshift(translateOption(RefreshPicker.autoOption.value));\n }\n options.unshift(translateOption(RefreshPicker.offOption.value));\n return options;\n}\n"],"names":["value"],"mappings":"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"}