{"version":3,"file":"index.cjs","sources":["../../src/themes/stylesFactory.ts","../../src/themes/ThemeContext.tsx","../../src/utils/keyframes.ts","../../src/components/Icon/utils.ts","../../src/components/Icon/Icon.tsx","../../src/utils/tooltipUtils.ts","../../src/components/Portal/Portal.tsx","../../src/components/Tooltip/Tooltip.tsx","../../src/components/FormLabel/FormLabel.tsx","../../src/components/FormField/FormField.tsx","../../src/utils/validate.ts","../../src/components/Forms/Legacy/Input/Input.tsx","../../src/components/Forms/Legacy/Select/IndicatorsContainer.tsx","../../src/components/Forms/Legacy/Select/NoOptionsMessage.tsx","../../src/components/Layout/utils/responsiveness.tsx","../../src/components/Layout/utils/styles.ts","../../src/components/Layout/Box/Box.tsx","../../src/components/ScrollContainer/ScrollIndicators.tsx","../../src/components/ScrollContainer/ScrollContainer.tsx","../../src/utils/useDelayedSwitch.ts","../../src/types/icon.ts","../../src/components/Spinner/Spinner.tsx","../../src/components/transitions/FadeTransition.tsx","../../src/components/transitions/SlideOutTransition.tsx","../../src/components/Select/SingleValue.tsx","../../src/components/Select/resetSelectStyles.ts","../../src/components/Forms/Legacy/Select/SelectOption.tsx","../../src/components/Forms/Legacy/Select/SelectOptionGroup.tsx","../../src/components/Forms/Legacy/Select/Select.tsx","../../src/components/Forms/Legacy/Switch/Switch.tsx","../../src/themes/mixins.ts","../../src/components/Forms/commonStyles.ts","../../src/components/Button/Button.tsx","../../src/components/SecretFormField/SecretFormField.tsx","../../src/utils/reactUtils.ts","../../src/components/Forms/FieldValidationMessage.tsx","../../src/components/Forms/Label.tsx","../../src/components/Forms/Field.tsx","../../src/components/Forms/RadioButtonGroup/RadioButton.tsx","../../src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx","../../src/components/Input/AutoSizeInputContext.ts","../../src/components/Input/Input.tsx","../../src/components/Layout/Stack/Stack.tsx","../../src/components/Select/CustomInput.tsx","../../src/components/Select/DropdownIndicator.tsx","../../src/components/Select/IndicatorsContainer.tsx","../../src/components/Select/InputControl.tsx","../../src/components/IconButton/IconButton.tsx","../../src/components/Select/getSelectStyles.ts","../../src/components/Select/MultiValue.tsx","../../src/components/Select/SelectContainer.tsx","../../src/components/Select/types.ts","../../src/components/Select/SelectMenu.tsx","../../src/components/Select/SelectOptionGroup.tsx","../../src/components/Text/TruncatedText.tsx","../../src/components/Text/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Select/SelectOptionGroupHeader.tsx","../../src/components/Select/ValueContainer.tsx","../../src/components/Select/utils.ts","../../src/components/Select/SelectBase.tsx","../../src/components/Select/Select.tsx","../../src/components/uPlot/config.ts","../../src/options/builder/axis.tsx","../../src/components/FilterPill/FilterPill.tsx","../../src/options/builder/hideSeries.tsx","../../src/options/builder/legend.tsx","../../src/options/builder/tooltip.tsx","../../src/options/builder/text.tsx","../../src/options/builder/stacking.tsx","../../src/options/builder/timeCompare.tsx","../../src/utils/dom.ts","../../src/components/ConfirmButton/ConfirmButton.tsx","../../src/components/ConfirmButton/DeleteButton.tsx","../../src/components/Tooltip/PopoverController.tsx","../../src/components/Tooltip/Popover.tsx","../../src/components/Toggletip/Toggletip.tsx","../../src/components/CustomScrollbar/ScrollIndicators.tsx","../../src/components/CustomScrollbar/CustomScrollbar.tsx","../../src/components/Tabs/Counter.tsx","../../src/components/Tabs/Tab.tsx","../../src/components/Tabs/TabContent.tsx","../../src/components/Tabs/TabsBar.tsx","../../src/components/TabbedContainer/TabbedContainer.tsx","../../src/components/InlineToast/InlineToast.tsx","../../src/components/ClipboardButton/ClipboardButton.tsx","../../src/components/Cascader/optionMappings.ts","../../src/components/Cascader/styles.ts","../../src/components/Cascader/Cascader.tsx","../../src/components/Alert/Alert.tsx","../../src/components/Carousel/Carousel.tsx","../../src/components/ButtonCascader/ButtonCascader.tsx","../../src/components/LoadingPlaceholder/LoadingPlaceholder.tsx","../../src/components/LoadingBar/LoadingBar.tsx","../../src/utils/closePopover.ts","../../src/components/ColorPicker/ColorSwatch.tsx","../../src/components/ColorPicker/NamedColorsGroup.tsx","../../src/components/ColorPicker/NamedColorsPalette.tsx","../../src/components/ColorPicker/ColorInput.tsx","../../src/components/ColorPicker/SpectrumPalette.tsx","../../src/components/ColorPicker/ColorPickerPopover.tsx","../../src/components/Forms/InlineLabel.tsx","../../src/components/Forms/InlineField.tsx","../../src/components/Switch/Switch.tsx","../../src/components/ColorPicker/SeriesColorPickerPopover.tsx","../../src/components/ColorPicker/ColorPicker.tsx","../../src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx","../../src/components/ColorPicker/ColorPickerInput.tsx","../../src/components/EmptySearchResult/EmptySearchResult.tsx","../../src/components/EmptyState/GrotCTA/GrotCTA.tsx","../../src/components/EmptyState/GrotNotFound/GrotNotFound.tsx","../../src/components/EmptyState/EmptyState.tsx","../../src/components/UnitPicker/UnitPicker.tsx","../../src/components/StatsPicker/StatsPicker.tsx","../../src/components/Button/ButtonGroup.tsx","../../src/components/Menu/MenuDivider.tsx","../../src/components/Menu/MenuGroup.tsx","../../src/components/Menu/hooks.ts","../../src/components/Menu/utils.ts","../../src/components/Menu/SubMenu.tsx","../../src/components/Menu/MenuItem.tsx","../../src/components/Menu/Menu.tsx","../../src/components/ToolbarButton/ToolbarButton.tsx","../../src/components/Dropdown/ButtonSelect.tsx","../../src/components/RefreshPicker/RefreshPicker.tsx","../../src/components/Modal/getModalStyles.ts","../../src/utils/useCombinedRefs.ts","../../src/components/FilterInput/FilterInput.tsx","../../src/components/Link/Link.tsx","../../src/components/Link/TextLink.tsx","../../src/utils/measureText.ts","../../src/components/Input/AutoSizeInput.tsx","../../src/components/Forms/Checkbox.tsx","../../src/components/Combobox/MessageRows.tsx","../../src/components/Combobox/getComboboxStyles.ts","../../src/components/Combobox/types.ts","../../src/components/Combobox/utils.ts","../../src/components/Combobox/ComboboxList.tsx","../../src/components/Combobox/SuffixIcon.tsx","../../src/components/Combobox/filter.ts","../../src/components/Combobox/useComboboxFloat.ts","../../src/components/Combobox/useLatestAsyncCall.ts","../../src/components/Combobox/useOptions.ts","../../src/components/Combobox/Combobox.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx","../../src/components/DateTimePickers/TimeZonePicker.tsx","../../src/components/DateTimePickers/options.ts","../../src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx","../../src/utils/featureToggle.ts","../../src/components/DateTimePickers/commonFormat.ts","../../src/components/DateTimePickers/utils.ts","../../src/components/DateTimePickers/WeekStartPicker.tsx","../../src/components/DateTimePickers/utils/adjustDateForReactCalendar.ts","../../src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx","../../src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx","../../src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimeRangeOption.tsx","../../src/components/DateTimePickers/TimeRangePicker/hooks.ts","../../src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx","../../src/components/DateTimePickers/TimeRangePicker/mapper.ts","../../src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx","../../src/components/DateTimePickers/TimeRangeContext.tsx","../../src/components/DateTimePickers/TimeSyncButton.tsx","../../src/components/DateTimePickers/utils/useTimeSync.tsx","../../src/components/DateTimePickers/TimeRangePicker.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimeRangeLabel.tsx","../../src/components/DateTimePickers/TimeOfDayPicker.tsx","../../src/components/DateTimePickers/DatePicker/DatePicker.tsx","../../src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx","../../src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx","../../src/components/List/AbstractList.tsx","../../src/components/List/List.tsx","../../src/components/Pagination/Pagination.tsx","../../src/components/InteractiveTable/Expander/index.tsx","../../src/components/InteractiveTable/utils.ts","../../src/components/InteractiveTable/InteractiveTable.tsx","../../src/utils/tags.ts","../../src/components/TagsInput/TagItem.tsx","../../src/components/TagsInput/TagsInput.tsx","../../src/components/AutoSaveField/EllipsisAnimated.tsx","../../src/components/AutoSaveField/AutoSaveField.tsx","../../src/utils/skeleton.tsx","../../src/components/Tags/Tag.tsx","../../src/components/Tags/TagList.tsx","../../src/components/Modal/ModalHeader.tsx","../../src/components/Modal/Modal.tsx","../../src/components/ConfirmModal/ConfirmContent.tsx","../../src/components/ConfirmModal/ConfirmModal.tsx","../../src/slate-plugins/clear.ts","../../src/slate-plugins/clipboard.ts","../../src/slate-plugins/indentation.ts","../../src/slate-plugins/newline.ts","../../src/slate-plugins/runner.ts","../../src/slate-plugins/selection_shortcuts.ts","../../src/types/completion.ts","../../src/utils/typeahead.ts","../../src/components/Typeahead/TypeaheadInfo.tsx","../../src/components/Typeahead/PartialHighlighter.tsx","../../src/components/Typeahead/TypeaheadItem.tsx","../../src/components/Typeahead/Typeahead.tsx","../../src/utils/fuzzy.ts","../../src/utils/searchFunctions.ts","../../src/utils/slate.ts","../../src/slate-plugins/slate-prism/TOKEN_MARK.ts","../../src/slate-plugins/suggestions.tsx","../../src/components/QueryField/QueryField.tsx","../../src/utils/useAsyncDependency.ts","../../src/components/ErrorBoundary/ErrorWithStack.tsx","../../src/components/Monaco/ReactMonacoEditorLazy.tsx","../../src/components/Monaco/types.ts","../../src/components/Monaco/suggestions.ts","../../src/components/Monaco/CodeEditor.tsx","../../src/components/Monaco/utils.ts","../../src/components/Modal/ModalTabsHeader.tsx","../../src/components/Modal/ModalTabContent.tsx","../../src/components/Modal/ModalsContext.tsx","../../src/components/ToolbarButton/ToolbarButtonRow.tsx","../../src/components/PageLayout/PageToolbar.tsx","../../src/components/SetInterval/SetInterval.tsx","../../src/components/DragHandle/DragHandle.tsx","../../src/components/Drawer/Drawer.tsx","../../src/components/Table/TableCellInspector.tsx","../../src/components/Table/hooks.ts","../../src/components/Table/reducer.ts","../../src/utils/colors.ts","../../src/components/Forms/Legend.tsx","../../src/components/Forms/FieldSet.tsx","../../src/components/Actions/VariablesInputModal.tsx","../../src/components/Actions/ActionButton.tsx","../../src/components/Table/ActionsCell.tsx","../../src/components/FormattedValueDisplay/FormattedValueDisplay.tsx","../../src/components/BarGauge/BarGauge.tsx","../../src/components/DataLinks/DataLinkButton.tsx","../../src/components/VizTooltip/VizTooltipFooter.tsx","../../src/components/VizTooltip/VizTooltipWrapper.tsx","../../src/components/Table/DataLinksActionsTooltip.tsx","../../src/components/Table/Cells/BarGaugeCell.tsx","../../src/utils/table.ts","../../src/components/Table/Cells/DataLinksCell.tsx","../../src/components/Table/types.ts","../../src/components/Table/CellActions.tsx","../../src/components/Table/Cells/DefaultCell.tsx","../../src/components/Table/Cells/GeoCell.tsx","../../src/components/Table/Cells/ImageCell.tsx","../../src/components/Table/Cells/JSONViewCell.tsx","../../src/utils/debug.ts","../../src/utils/logger.ts","../../src/components/uPlot/types.ts","../../src/components/uPlot/internal.ts","../../src/components/uPlot/utils.ts","../../src/components/uPlot/Plot.tsx","../../src/components/uPlot/config/UPlotScaleBuilder.ts","../../src/components/uPlot/config/UPlotAxisBuilder.ts","../../src/components/uPlot/config/gradientFills.ts","../../src/components/uPlot/config/UPlotSeriesBuilder.ts","../../src/components/uPlot/config/UPlotThresholds.ts","../../src/components/uPlot/config/UPlotConfigBuilder.ts","../../src/components/Sparkline/utils.ts","../../src/components/Sparkline/Sparkline.tsx","../../src/components/Table/Cells/SparklineCell.tsx","../../src/components/Table/Cells/FooterCell.tsx","../../src/components/Table/TableRT/FooterRow.tsx","../../src/components/Table/TableRT/RowExpander.tsx","../../src/components/Table/utils.ts","../../src/components/Table/TableRT/FilterList.tsx","../../src/components/Table/TableRT/FilterPopup.tsx","../../src/components/Table/TableRT/Filter.tsx","../../src/components/Table/TableRT/HeaderRow.tsx","../../src/components/PanelChrome/LoadingIndicator.tsx","../../src/utils/DelayRender.tsx","../../src/utils/usePointerDistance.ts","../../src/components/ElementSelectionContext/ElementSelectionContext.tsx","../../src/components/Dropdown/Dropdown.tsx","../../src/components/PanelChrome/PanelMenu.tsx","../../src/components/PanelChrome/HoverWidget.tsx","../../src/components/PanelChrome/TitleItem.tsx","../../src/components/PanelChrome/PanelDescription.tsx","../../src/components/PanelChrome/PanelStatus.tsx","../../src/components/PanelChrome/PanelChrome.tsx","../../src/components/PanelChrome/PanelContext.ts","../../src/components/PanelChrome/types.ts","../../src/components/PanelChrome/index.ts","../../src/components/Table/Cells/TableCell.tsx","../../src/components/Table/TableRT/ExpandedRow.tsx","../../src/components/Table/TableRT/RowsList.tsx","../../src/components/Table/TableRT/styles.ts","../../src/components/Table/TableRT/Table.tsx","../../src/components/TextArea/TextArea.tsx","../../src/components/TableInputCSV/TableInputCSV.tsx","../../src/components/Tabs/VerticalTab.tsx","../../src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx","../../src/components/BigValue/PercentChange.tsx","../../src/components/BigValue/BigValueLayout.tsx","../../src/components/BigValue/BigValue.tsx","../../src/components/Gauge/utils.ts","../../src/components/Gauge/Gauge.tsx","../../src/components/VizTooltip/types.ts","../../src/components/VizTooltip/utils.ts","../../src/components/VizTooltip/VizTooltipContainer.tsx","../../src/components/VizTooltip/VizTooltip.tsx","../../src/components/VizLegend/SeriesIcon.tsx","../../src/components/VizTooltip/SeriesTable.tsx","../../src/utils/squares.ts","../../src/components/VizRepeater/VizRepeater.tsx","../../src/components/VizLayout/VizLayout.tsx","../../src/components/VizLegend/types.ts","../../src/components/List/InlineList.tsx","../../src/components/VizLegend/VizLegendSeriesIcon.tsx","../../src/components/VizLegend/VizLegendStatsList.tsx","../../src/components/VizLegend/VizLegendListItem.tsx","../../src/components/VizLegend/VizLegendList.tsx","../../src/components/VizLegend/VizLegendTableItem.tsx","../../src/components/VizLegend/VizLegendTable.tsx","../../src/components/VizLegend/utils.ts","../../src/components/VizLegend/VizLegend.tsx","../../src/components/Collapse/Collapse.tsx","../../src/components/Collapse/CollapsableSection.tsx","../../src/components/DataLinks/FieldLinkList.tsx","../../src/components/Button/FullWidthButtonContainer.tsx","../../src/components/SingleStatShared/SingleStatBaseOptions.ts","../../src/components/CallToActionCard/CallToActionCard.tsx","../../src/components/ContextMenu/ContextMenu.tsx","../../src/components/ContextMenu/WithContextMenu.tsx","../../src/slate-plugins/slate-prism/options.tsx","../../src/slate-plugins/slate-prism/index.ts","../../src/components/DataLinks/DataLinkSuggestions.tsx","../../src/components/DataLinks/SelectionReference.ts","../../src/components/DataLinks/DataLinkInput.tsx","../../src/components/DataLinks/DataLinkEditor.tsx","../../src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx","../../src/components/Badge/Badge.tsx","../../src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx","../../src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx","../../src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx","../../src/utils/dataLinks.ts","../../src/components/DataLinks/DataLinksContextMenu.tsx","../../src/components/InfoBox/InfoBox.tsx","../../src/components/FeatureBadge/FeatureBadge.tsx","../../src/components/InfoBox/FeatureInfoBox.tsx","../../src/components/JSONFormatter/json_explorer/helpers.ts","../../src/components/JSONFormatter/json_explorer/json_explorer.ts","../../src/components/JSONFormatter/JSONFormatter.tsx","../../src/components/ErrorBoundary/ErrorBoundary.tsx","../../src/components/DataSourceSettings/BasicAuthSettings.tsx","../../src/components/DataSourceSettings/CustomHeadersSettings.tsx","../../src/components/DataSourceSettings/HttpProxySettings.tsx","../../src/components/DataSourceSettings/SecureSocksProxySettings.tsx","../../src/components/Forms/InlineFieldRow.tsx","../../src/components/DataSourceSettings/CertificationKey.tsx","../../src/components/DataSourceSettings/TLSAuthSettings.tsx","../../src/components/DataSourceSettings/DataSourceHttpSettings.tsx","../../src/components/DataSourceSettings/AlertingSettings.tsx","../../src/components/Segment/SegmentSelect.tsx","../../src/components/Segment/styles.ts","../../src/components/Segment/useExpandableLabel.tsx","../../src/components/Segment/Segment.tsx","../../src/components/Segment/SegmentAsync.tsx","../../src/components/Segment/SegmentInput.tsx","../../src/components/Segment/SegmentSection.tsx","../../src/components/Slider/styles.ts","../../src/components/Slider/Slider.tsx","../../src/components/Slider/HandleTooltip.tsx","../../src/components/Slider/RangeSlider.tsx","../../src/components/Forms/Form.tsx","../../src/components/InputControl.tsx","../../src/components/ValuePicker/ValuePicker.tsx","../../src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx","../../src/components/MatchersUI/utils.ts","../../src/components/MatchersUI/FieldNameMatcherEditor.tsx","../../src/components/MatchersUI/FieldNamesMatcherEditor.tsx","../../src/components/MatchersUI/FieldTypeMatcherEditor.tsx","../../src/components/MatchersUI/FieldValueMatcher.tsx","../../src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx","../../src/components/MatchersUI/fieldMatchersUI.ts","../../src/components/Layout/Grid/Grid.tsx","../../src/components/Layout/Space.tsx","../../src/components/Forms/InlineSegmentGroup.tsx","../../src/components/Forms/FieldArray.tsx","../../src/components/Combobox/ValuePill.tsx","../../src/components/Combobox/getMultiComboboxStyles.ts","../../src/components/Combobox/useMeasureMulti.ts","../../src/components/Combobox/useMultiInputAutoSize.tsx","../../src/components/Combobox/MultiCombobox.tsx","../../src/components/Layout/Layout.tsx","../../src/components/Forms/RadioButtonList/RadioButtonDot.tsx","../../src/components/Forms/RadioButtonList/RadioButtonList.tsx","../../src/components/SecretInput/SecretInput.tsx","../../src/components/SecretTextArea/SecretTextArea.tsx","../../src/utils/file.ts","../../src/components/FileUpload/FileUpload.tsx","../../src/components/FileDropzone/FileListItem.tsx","../../src/components/FileDropzone/FileDropzone.tsx","../../src/components/DateTimePickers/TimeRangeInput.tsx","../../src/components/DateTimePickers/RelativeTimeRangePicker/utils.ts","../../src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx","../../src/components/Card/CardContainer.tsx","../../src/components/Card/Card.tsx","../../src/components/PluginSignatureBadge/PluginSignatureBadge.tsx","../../src/components/UsersIndicator/UserIcon.tsx","../../src/components/UsersIndicator/UsersIndicator.tsx","../../src/components/UsersIndicator/Avatar.tsx","../../src/components/Divider/Divider.tsx","../../src/components/Splitter/useSplitter.ts","../../src/components/uPlot/PlotLegend.tsx","../../src/components/uPlot/geometries/XYCanvas.tsx","../../src/components/uPlot/geometries/Marker.tsx","../../src/components/uPlot/geometries/EventsCanvas.tsx","../../src/components/uPlot/plugins/CloseButton.tsx","../../src/components/uPlot/plugins/TooltipPlugin2.tsx","../../src/components/uPlot/plugins/EventBusPlugin.tsx","../../src/components/uPlot/plugins/KeyboardPlugin.tsx","../../src/components/BrowserLabel/Label.tsx","../../src/components/PanelContainer/PanelContainer.tsx","../../src/graveyard/Graph/GraphContextMenu.tsx","../../src/graveyard/Graph/utils.ts","../../src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.tsx","../../src/graveyard/Graph/GraphTooltip/SingleModeGraphTooltip.tsx","../../src/graveyard/Graph/GraphTooltip/GraphTooltip.tsx","../../src/graveyard/Graph/Graph.tsx","../../src/graveyard/Graph/GraphWithLegend.tsx","../../src/graveyard/Graph/GraphSeriesToggler.tsx","../../src/graveyard/GraphNG/nullInsertThreshold.ts","../../src/graveyard/GraphNG/nullToUndefThreshold.ts","../../src/graveyard/GraphNG/utils.ts","../../src/graveyard/GraphNG/GraphNG.tsx","../../src/graveyard/TimeSeries/utils.ts","../../src/graveyard/TimeSeries/TimeSeries.tsx","../../src/graveyard/GraphNG/hooks.ts","../../src/graveyard/uPlot/plugins/ZoomPlugin.tsx","../../src/graveyard/uPlot/plugins/TooltipPlugin.tsx","../../src/utils/scrollbar.ts","../../src/utils/useForceUpdate.ts","../../src/utils/nodeGraph.ts","../../src/utils/logOptions.ts","../../src/themes/getTheme.ts","../../src/themes/GlobalStyles/accessibility.ts","../../src/themes/GlobalStyles/alerting.ts","../../src/themes/GlobalStyles/card.ts","../../src/themes/GlobalStyles/code.ts","../../src/themes/GlobalStyles/dashboardGrid.ts","../../src/themes/GlobalStyles/dashdiff.ts","../../src/themes/GlobalStyles/elements.ts","../../src/themes/GlobalStyles/extra.ts","../../src/themes/GlobalStyles/filterTable.ts","../../src/themes/GlobalStyles/fonts.ts","../../src/themes/GlobalStyles/forms.ts","../../src/themes/GlobalStyles/hacks.ts","../../src/themes/GlobalStyles/jsonFormatter.ts","../../src/themes/GlobalStyles/legacySelect.ts","../../src/themes/GlobalStyles/markdownStyles.ts","../../src/themes/GlobalStyles/page.ts","../../src/themes/GlobalStyles/queryEditor.ts","../../src/themes/GlobalStyles/skeletonStyles.ts","../../src/themes/GlobalStyles/slate.ts","../../src/themes/GlobalStyles/uPlot.ts","../../src/themes/GlobalStyles/utilityClasses.ts","../../src/themes/GlobalStyles/GlobalStyles.tsx","../../src/slate-plugins/braces.ts","../../src/index.ts"],"sourcesContent":["import memoize from 'micro-memoize';\n\n/**\n * @public\n * @deprecated use useStyles hook\n * Creates memoized version of styles creator\n * @param stylesCreator function accepting dependencies based on which styles are created\n */\nexport function stylesFactory ReturnType>(stylesCreator: ResultFn) {\n return memoize(stylesCreator);\n}\n","import hoistNonReactStatics from 'hoist-non-react-statics';\nimport memoize from 'micro-memoize';\nimport { useContext } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme, GrafanaTheme2, ThemeContext } from '@grafana/data';\n\nimport { Themeable, Themeable2 } from '../types/theme';\n\nimport { stylesFactory } from './stylesFactory';\n\ntype Omit = Pick>;\ntype Subtract = Omit;\n\n/**\n * Mock used in tests\n */\nlet ThemeContextMock: React.Context | null = null;\n\n// Used by useStyles()\nexport const memoizedStyleCreators = new WeakMap();\n\n/** @deprecated use withTheme2 */\n/** @public */\nexport const withTheme =

(Component: React.ComponentType

) => {\n const WithTheme: React.FunctionComponent> = (props) => {\n /**\n * If theme context is mocked, let's use it instead of the original context\n * This is used in tests when mocking theme using mockThemeContext function defined below\n */\n const ContextComponent = ThemeContextMock || ThemeContext;\n return (\n // @ts-ignore\n {(theme) => }\n );\n };\n\n WithTheme.displayName = `WithTheme(${Component.displayName})`;\n hoistNonReactStatics(WithTheme, Component);\n type Hoisted = typeof WithTheme & S;\n return WithTheme as Hoisted;\n};\n\n/** @alpha */\nexport const withTheme2 =

(Component: React.ComponentType

) => {\n const WithTheme: React.FunctionComponent> = (props) => {\n /**\n * If theme context is mocked, let's use it instead of the original context\n * This is used in tests when mocking theme using mockThemeContext function defined below\n */\n const ContextComponent = ThemeContextMock || ThemeContext;\n return (\n // @ts-ignore\n {(theme) => }\n );\n };\n\n WithTheme.displayName = `WithTheme(${Component.displayName})`;\n hoistNonReactStatics(WithTheme, Component);\n type Hoisted = typeof WithTheme & S;\n return WithTheme as Hoisted;\n};\n\n/** @deprecated use useTheme2 */\n/** @public */\nexport function useTheme(): GrafanaTheme {\n return useContext(ThemeContextMock || ThemeContext).v1;\n}\n\n/** @public */\nexport function useTheme2(): GrafanaTheme2 {\n return useContext(ThemeContextMock || ThemeContext);\n}\n\n/**\n * Hook for using memoized styles with access to the theme.\n *\n * NOTE: For memoization to work, you need to ensure that the function\n * you pass in doesn't change, or only if it needs to. (i.e. declare\n * your style creator outside of a function component or use `useCallback()`.)\n * */\n/** @deprecated use useStyles2 */\n/** @public */\nexport function useStyles(getStyles: (theme: GrafanaTheme) => T) {\n const theme = useTheme();\n\n let memoizedStyleCreator: typeof getStyles = memoizedStyleCreators.get(getStyles);\n\n if (!memoizedStyleCreator) {\n memoizedStyleCreator = stylesFactory(getStyles);\n memoizedStyleCreators.set(getStyles, memoizedStyleCreator);\n }\n\n return memoizedStyleCreator(theme);\n}\n\n/**\n * Hook for using memoized styles with access to the theme. Pass additional\n * arguments to the getStyles function as additional arguments to this hook.\n *\n * Prefer using primitive values (boolean, number, string, etc) for\n * additional arguments for better performance\n *\n * ```\n * const getStyles = (theme, isDisabled, isOdd) => {css(...)}\n * [...]\n * const styles = useStyles2(getStyles, true, Boolean(index % 2))\n * ```\n *\n * NOTE: For memoization to work, ensure that all arguments don't change\n * across renders (or only change if they need to)\n *\n * @public\n * */\nexport function useStyles2(\n getStyles: (theme: GrafanaTheme2, ...args: T) => CSSReturnValue,\n ...additionalArguments: T\n): CSSReturnValue {\n const theme = useTheme2();\n\n // Grafana ui can be bundled and used in older versions of Grafana where the theme doesn't have elevated background\n // This can be removed post G12\n if (!theme.colors.background.elevated) {\n theme.colors.background.elevated =\n theme.colors.mode === 'light' ? theme.colors.background.primary : theme.colors.background.secondary;\n }\n\n let memoizedStyleCreator: typeof getStyles = memoizedStyleCreators.get(getStyles);\n\n if (!memoizedStyleCreator) {\n memoizedStyleCreator = memoize(getStyles, { maxSize: 10 }); // each getStyles function will memoize 10 different sets of props\n memoizedStyleCreators.set(getStyles, memoizedStyleCreator);\n }\n\n return memoizedStyleCreator(theme, ...additionalArguments);\n}\n\n/**\n * Enables theme context mocking\n */\n/** @public */\nexport const mockThemeContext = (theme: Partial) => {\n ThemeContextMock = React.createContext(theme as GrafanaTheme2);\n\n return () => {\n ThemeContextMock = null;\n };\n};\n","import { keyframes } from '@emotion/css';\n\nexport const spin = keyframes({\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(359deg)',\n },\n});\n","import { IconName, IconSize, IconType } from '../../types/icon';\n\nconst alwaysMonoIcons: IconName[] = [\n 'grafana',\n 'favorite',\n 'heart-break',\n 'heart',\n 'panel-add',\n 'library-panel',\n 'circle-mono',\n];\n\nexport function getIconSubDir(name: IconName, type: IconType): string {\n if (name?.startsWith('gf-')) {\n return 'custom';\n } else if (alwaysMonoIcons.includes(name)) {\n return 'mono';\n } else if (type === 'default') {\n return 'unicons';\n } else if (type === 'solid') {\n return 'solid';\n } else {\n return 'mono';\n }\n}\n\n/* Transform string with px to number and add 2 pxs as path in svg is 2px smaller */\nexport function getSvgSize(size: IconSize) {\n switch (size) {\n case 'xs':\n return 12;\n case 'sm':\n return 14;\n case 'md':\n return 16;\n case 'lg':\n return 18;\n case 'xl':\n return 24;\n case 'xxl':\n return 36;\n case 'xxxl':\n return 48;\n }\n}\n\nlet iconRoot: string | undefined;\n\nexport function getIconRoot(): string {\n if (iconRoot) {\n return iconRoot;\n }\n\n const grafanaPublicPath = typeof window !== 'undefined' && window.__grafana_public_path__;\n if (grafanaPublicPath) {\n iconRoot = grafanaPublicPath + 'build/img/icons/';\n } else {\n iconRoot = 'public/build/img/icons/';\n }\n\n return iconRoot;\n}\n\nexport function getIconPath(name: IconName, type: IconType = 'default'): string {\n const iconRoot = getIconRoot();\n const subDir = getIconSubDir(name, type);\n return `${iconRoot}${subDir}/${name}.svg`;\n}\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2, isIconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName, IconType, IconSize } from '../../types/icon';\nimport { spin } from '../../utils/keyframes';\n\nimport { getIconPath, getSvgSize } from './utils';\n\nexport interface IconProps extends Omit, 'onLoad' | 'onError' | 'ref'> {\n name: IconName;\n size?: IconSize;\n type?: IconType;\n /**\n * Give your icon a semantic meaning. The icon will be hidden from screen readers, unless this prop or an aria-label is provided.\n */\n title?: string;\n}\n\nconst getIconStyles = (theme: GrafanaTheme2) => {\n return {\n icon: css({\n display: 'inline-block',\n fill: 'currentColor',\n flexShrink: 0,\n label: 'Icon',\n // line-height: 0; is needed for correct icon alignment in Safari\n lineHeight: 0,\n verticalAlign: 'middle',\n }),\n orange: css({\n fill: theme.v1.palette.orange,\n }),\n spin: css({\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n animation: `${spin} 2s infinite linear`,\n },\n }),\n };\n};\n\nexport const Icon = React.memo(\n React.forwardRef(\n ({ size = 'md', type = 'default', name, className, style, title = '', ...rest }, ref) => {\n const styles = useStyles2(getIconStyles);\n\n if (!isIconName(name)) {\n console.warn('Icon component passed an invalid icon name', name);\n }\n\n // handle the deprecated 'fa fa-spinner'\n const iconName: IconName = name === 'fa fa-spinner' ? 'spinner' : name;\n\n const svgSize = getSvgSize(size);\n const svgHgt = svgSize;\n const svgWid = name.startsWith('gf-bar-align') ? 16 : name.startsWith('gf-interp') ? 30 : svgSize;\n const svgPath = getIconPath(iconName, type);\n\n const composedClassName = cx(\n styles.icon,\n className,\n type === 'mono' ? { [styles.orange]: name === 'favorite' } : '',\n {\n [styles.spin]: iconName === 'spinner',\n }\n );\n\n return (\n \n }\n {...rest}\n />\n );\n }\n )\n);\n\nIcon.displayName = 'Icon';\n","import { css } from '@emotion/css';\nimport { Placement } from '@floating-ui/react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { TooltipPlacement } from '../components/Tooltip/types';\n\nexport function getPlacement(placement?: TooltipPlacement): Placement {\n switch (placement) {\n case 'auto':\n return 'bottom';\n case 'auto-start':\n return 'bottom-start';\n case 'auto-end':\n return 'bottom-end';\n default:\n return placement ?? 'bottom';\n }\n}\n\nexport function buildTooltipTheme(\n theme: GrafanaTheme2,\n tooltipBg: string,\n toggletipBorder: string,\n tooltipText: string,\n tooltipPadding: { topBottom: number; rightLeft: number }\n) {\n return {\n arrow: css({\n fill: tooltipBg,\n }),\n container: css({\n backgroundColor: tooltipBg,\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${toggletipBorder}`,\n boxShadow: theme.shadows.z2,\n color: tooltipText,\n fontSize: theme.typography.bodySmall.fontSize,\n padding: theme.spacing(tooltipPadding.topBottom, tooltipPadding.rightLeft),\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: 'opacity 0.3s',\n },\n zIndex: theme.zIndex.tooltip,\n maxWidth: '400px',\n overflowWrap: 'break-word',\n\n \"&[data-popper-interactive='false']\": {\n pointerEvents: 'none',\n },\n }),\n headerClose: css({\n color: theme.colors.text.secondary,\n position: 'absolute',\n right: theme.spacing(1),\n top: theme.spacing(1.5),\n backgroundColor: 'transparent',\n border: 0,\n }),\n header: css({\n paddingTop: theme.spacing(1),\n paddingBottom: theme.spacing(2),\n }),\n body: css({\n paddingTop: theme.spacing(1),\n paddingBottom: theme.spacing(1),\n }),\n footer: css({\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(1),\n }),\n };\n}\n","import { css } from '@emotion/css';\nimport { PropsWithChildren, useLayoutEffect, useRef } from 'react';\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\n\ninterface Props {\n className?: string;\n root?: HTMLElement;\n // the zIndex of the node; defaults to theme.zIndex.portal\n zIndex?: number;\n forwardedRef?: React.ForwardedRef;\n}\n\nexport function Portal(props: PropsWithChildren) {\n const { children, className, root, forwardedRef } = props;\n const theme = useTheme2();\n const node = useRef(null);\n const portalRoot = root ?? getPortalContainer();\n\n if (!node.current) {\n node.current = document.createElement('div');\n if (className) {\n node.current.className = className;\n }\n node.current.style.position = 'relative';\n node.current.style.zIndex = `${props.zIndex ?? theme.zIndex.portal}`;\n }\n\n useLayoutEffect(() => {\n if (node.current) {\n portalRoot.appendChild(node.current);\n }\n\n return () => {\n if (node.current) {\n portalRoot.removeChild(node.current);\n }\n };\n }, [portalRoot]);\n\n return ReactDOM.createPortal(

{children}
, node.current);\n}\n\n/** @internal */\nexport function getPortalContainer() {\n return window.document.getElementById('grafana-portal-container') ?? document.body;\n}\n\n/** @internal */\nexport function PortalContainer() {\n const styles = useStyles2(getStyles);\n return (\n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n grafanaPortalContainer: css({\n position: 'fixed',\n top: 0,\n width: '100%',\n zIndex: theme.zIndex.portal,\n }),\n };\n};\n\nexport const RefForwardingPortal = React.forwardRef((props, ref) => {\n return ;\n});\n\nRefForwardingPortal.displayName = 'RefForwardingPortal';\n","import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n offset,\n shift,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n safePolygon,\n} from '@floating-ui/react';\nimport { forwardRef, cloneElement, isValidElement, useCallback, useId, useRef, useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { buildTooltipTheme, getPlacement } from '../../utils/tooltipUtils';\nimport { Portal } from '../Portal/Portal';\n\nimport { PopoverContent, TooltipPlacement } from './types';\n\nexport interface TooltipProps {\n theme?: 'info' | 'error' | 'info-alt';\n show?: boolean;\n placement?: TooltipPlacement;\n content: PopoverContent;\n children: JSX.Element;\n /**\n * Set to true if you want the tooltip to stay long enough so the user can move mouse over content to select text or click a link\n */\n interactive?: boolean;\n}\n\nexport const Tooltip = forwardRef(\n ({ children, theme, interactive, show, placement, content }, forwardedRef) => {\n const arrowRef = useRef(null);\n const [controlledVisible, setControlledVisible] = useState(show);\n const isOpen = show ?? controlledVisible;\n\n // the order of middleware is important!\n // `arrow` should almost always be at the end\n // see https://floating-ui.com/docs/arrow#order\n const middleware = [\n offset(8),\n flip({\n fallbackAxisSideDirection: 'end',\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n arrow({\n element: arrowRef,\n }),\n ];\n\n const { context, refs, floatingStyles } = useFloating({\n open: isOpen,\n placement: getPlacement(placement),\n onOpenChange: setControlledVisible,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n const tooltipId = useId();\n\n const hover = useHover(context, {\n handleClose: interactive ? safePolygon() : undefined,\n move: false,\n });\n const focus = useFocus(context);\n const dismiss = useDismiss(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, hover, focus]);\n\n const contentIsFunction = typeof content === 'function';\n\n const styles = useStyles2(getStyles);\n const style = styles[theme ?? 'info'];\n\n const handleRef = useCallback(\n (ref: HTMLElement | null) => {\n refs.setReference(ref);\n\n if (typeof forwardedRef === 'function') {\n forwardedRef(ref);\n } else if (forwardedRef) {\n forwardedRef.current = ref;\n }\n },\n [forwardedRef, refs]\n );\n\n // if the child has a matching aria-label, this should take precedence over the tooltip content\n // otherwise we end up double announcing things in e.g. IconButton\n const childHasMatchingAriaLabel = 'aria-label' in children.props && children.props['aria-label'] === content;\n\n return (\n <>\n {cloneElement(children, {\n ref: handleRef,\n tabIndex: 0, // tooltip trigger should be keyboard focusable\n 'aria-describedby': !childHasMatchingAriaLabel && isOpen ? tooltipId : undefined,\n ...getReferenceProps(),\n })}\n {isOpen && (\n \n
\n \n \n {typeof content === 'string' && content}\n {isValidElement(content) && cloneElement(content)}\n {contentIsFunction && content({})}\n
\n \n \n )}\n \n );\n }\n);\n\nTooltip.displayName = 'Tooltip';\n\nexport const getStyles = (theme: GrafanaTheme2) => {\n const info = buildTooltipTheme(\n theme,\n theme.components.tooltip.background,\n theme.components.tooltip.background,\n theme.components.tooltip.text,\n { topBottom: 0.5, rightLeft: 1 }\n );\n const error = buildTooltipTheme(\n theme,\n theme.colors.error.main,\n theme.colors.error.main,\n theme.colors.error.contrastText,\n { topBottom: 0.5, rightLeft: 1 }\n );\n\n return {\n info,\n ['info-alt']: info,\n error,\n };\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\n\ninterface Props {\n children: ReactNode;\n className?: string;\n htmlFor?: string;\n isFocused?: boolean;\n isInvalid?: boolean;\n tooltip?: PopoverContent;\n width?: number | 'auto';\n /** Make tooltip interactive */\n interactive?: boolean;\n}\n\nexport const FormLabel = ({\n children,\n isFocused,\n isInvalid,\n className,\n htmlFor,\n tooltip,\n width,\n interactive,\n ...rest\n}: Props) => {\n const classes = classNames(className, `gf-form-label width-${width ? width : '10'}`, {\n 'gf-form-label--is-focused': isFocused,\n 'gf-form-label--is-invalid': isInvalid,\n });\n\n return (\n \n );\n};\n\nexport const InlineFormLabel = FormLabel;\n","import { css, cx } from '@emotion/css';\nimport { InputHTMLAttributes, useId } from 'react';\nimport * as React from 'react';\n\nimport { InlineFormLabel } from '../FormLabel/FormLabel';\nimport { Field } from '../Forms/Field';\nimport { InlineField } from '../Forms/InlineField';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport interface Props extends InputHTMLAttributes {\n label: string;\n tooltip?: PopoverContent;\n labelWidth?: number;\n // If null no width will be specified not even default one\n inputWidth?: number | null;\n inputEl?: React.ReactNode;\n /** Make tooltip interactive */\n interactive?: boolean;\n}\n\n/**\n * Default form field including label used in Grafana UI. Default input element is simple . You can also pass\n * custom inputEl if required in which case inputWidth and inputProps are ignored.\n *\n * For inline fields, use {@link InlineField}, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-inlinefield--basic See Storybook}.\n * @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.\n */\nexport const FormField = ({\n label,\n tooltip,\n labelWidth = 6,\n inputWidth = 12,\n inputEl,\n className,\n interactive,\n ...inputProps\n}: Props) => {\n const styles = getStyles();\n const id = useId();\n return (\n
\n \n {label}\n \n {inputEl || (\n \n )}\n
\n );\n};\n\nFormField.displayName = 'FormField';\n\nconst getStyles = () => {\n return {\n formField: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n textAlign: 'left',\n position: 'relative',\n }),\n };\n};\n","import { ValidationRule, ValidationEvents } from '../types/input';\n\nexport enum EventsWithValidation {\n onBlur = 'onBlur',\n onFocus = 'onFocus',\n onChange = 'onChange',\n}\n\nexport const validate = (value: string, validationRules: ValidationRule[]) => {\n const errors = validationRules.reduce((acc, currRule) => {\n if (!currRule.rule(value)) {\n return acc.concat(currRule.errorMessage);\n }\n return acc;\n }, []);\n return errors.length > 0 ? errors : null;\n};\n\nexport const hasValidationEvent = (event: EventsWithValidation, validationEvents: ValidationEvents | undefined) => {\n return validationEvents && validationEvents[event];\n};\n\nexport const regexValidation = (pattern: string | RegExp, errorMessage?: string): ValidationRule => {\n return {\n rule: (valueToValidate: string) => {\n return !!valueToValidate.match(pattern);\n },\n errorMessage: errorMessage || 'Value is not valid',\n };\n};\n","import classNames from 'classnames';\nimport { PureComponent, ChangeEvent } from 'react';\nimport * as React from 'react';\n\nimport { ValidationEvents, ValidationRule } from '../../../../types/input';\nimport { validate, EventsWithValidation, hasValidationEvent } from '../../../../utils/validate';\n\n/** @deprecated Please use the `Input` component, which does not require this enum. */\nexport enum LegacyInputStatus {\n Invalid = 'invalid',\n Valid = 'valid',\n}\n\nexport interface Props extends React.HTMLProps {\n validationEvents?: ValidationEvents;\n hideErrorMessage?: boolean;\n inputRef?: React.LegacyRef;\n\n // Override event props and append status as argument\n onBlur?: (event: React.FocusEvent, status?: LegacyInputStatus) => void;\n onFocus?: (event: React.FocusEvent, status?: LegacyInputStatus) => void;\n onChange?: (event: React.ChangeEvent, status?: LegacyInputStatus) => void;\n}\n\ninterface State {\n error: string | null;\n}\n\n/** @deprecated Please use the `Input` component. {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-input--simple See Storybook for example.} */\nexport class Input extends PureComponent {\n static defaultProps = {\n className: '',\n };\n\n state: State = {\n error: null,\n };\n\n get status() {\n return this.state.error ? LegacyInputStatus.Invalid : LegacyInputStatus.Valid;\n }\n\n get isInvalid() {\n return this.status === LegacyInputStatus.Invalid;\n }\n\n validatorAsync = (validationRules: ValidationRule[]) => {\n return (evt: ChangeEvent) => {\n const errors = validate(evt.target.value, validationRules);\n this.setState((prevState) => {\n return { ...prevState, error: errors ? errors[0] : null };\n });\n };\n };\n\n populateEventPropsWithStatus = (restProps: any, validationEvents: ValidationEvents | undefined) => {\n const inputElementProps = { ...restProps };\n if (!validationEvents) {\n return inputElementProps;\n }\n Object.keys(EventsWithValidation).forEach((eventName) => {\n if (hasValidationEvent(eventName as EventsWithValidation, validationEvents) || restProps[eventName]) {\n inputElementProps[eventName] = async (evt: ChangeEvent) => {\n evt.persist(); // Needed for async. https://reactjs.org/docs/events.html#event-pooling\n if (hasValidationEvent(eventName as EventsWithValidation, validationEvents)) {\n await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]);\n }\n if (restProps[eventName]) {\n restProps[eventName].apply(null, [evt, this.status]);\n }\n };\n }\n });\n return inputElementProps;\n };\n\n render() {\n const { validationEvents, className, hideErrorMessage, inputRef, ...restProps } = this.props;\n const { error } = this.state;\n const inputClassName = classNames('gf-form-input', { invalid: this.isInvalid }, className);\n const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);\n\n return (\n
\n \n {error && !hideErrorMessage && {error}}\n
\n );\n }\n}\n","import { components, IndicatorsContainerProps } from 'react-select';\n\nimport { SelectableValue } from '@grafana/data';\n\nimport { Icon } from '../../../Icon/Icon';\nimport { Select } from '../../../Select/Select';\n\n/** @deprecated Please use the {@link Select} component*/\nexport const IndicatorsContainer = (props: IndicatorsContainerProps>) => {\n const isOpen = props.selectProps.menuIsOpen;\n return (\n \n \n \n );\n};\n\nexport default IndicatorsContainer;\n","import { components, NoticeProps, GroupBase } from 'react-select';\n\nimport { SelectableValue } from '@grafana/data';\n\nimport { Select } from '../../../Select/Select';\n\nexport type Props = NoticeProps, boolean, GroupBase>>;\n\n/** @deprecated Please use the {@link Select} component*/\nexport const NoOptionsMessage = (props: Props) => {\n const { children } = props;\n return (\n \n
\n
{children}
\n
\n \n );\n};\n\nexport default NoOptionsMessage;\n","import { CSSInterpolation } from '@emotion/serialize';\n\nimport { GrafanaTheme2, ThemeBreakpointsKey } from '@grafana/data';\n\n/**\n * Type that represents a prop that can be responsive.\n *\n * @example To turn a prop like `margin: number` responsive, change it to `margin: ResponsiveProp`.\n */\nexport type ResponsiveProp = T | Responsive;\n\ntype Responsive = {\n xs: T;\n sm?: T;\n md?: T;\n lg?: T;\n xl?: T;\n xxl?: T;\n};\n\nfunction breakpointCSS(\n theme: GrafanaTheme2,\n prop: Responsive,\n getCSS: (val: T) => CSSInterpolation,\n key: ThemeBreakpointsKey\n) {\n const value = prop[key];\n if (value !== undefined && value !== null) {\n return {\n [theme.breakpoints.up(key)]: getCSS(value),\n };\n }\n return;\n}\n/**\n * Function that converts a ResponsiveProp object into CSS\n *\n * @param theme Grafana theme object\n * @param prop Prop as it is passed to the component\n * @param getCSS Function that returns the css block for the prop\n * @returns The CSS block repeated for each breakpoint\n *\n * @example To get the responsive css equivalent of `margin && { margin }`, you can write `getResponsiveStyle(theme, margin, (val) => { margin: val })`\n */\nexport function getResponsiveStyle(\n theme: GrafanaTheme2,\n prop: ResponsiveProp | undefined,\n getCSS: (val: T) => CSSInterpolation\n): CSSInterpolation {\n if (prop === undefined || prop === null) {\n return null;\n }\n if (typeof prop !== 'object' || !('xs' in prop)) {\n return getCSS(prop);\n }\n\n return [\n breakpointCSS(theme, prop, getCSS, 'xs'),\n breakpointCSS(theme, prop, getCSS, 'sm'),\n breakpointCSS(theme, prop, getCSS, 'md'),\n breakpointCSS(theme, prop, getCSS, 'lg'),\n breakpointCSS(theme, prop, getCSS, 'xl'),\n breakpointCSS(theme, prop, getCSS, 'xxl'),\n ];\n}\n","import { css } from '@emotion/css';\nimport { Property } from 'csstype';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { getResponsiveStyle, ResponsiveProp } from './responsiveness';\n\nexport interface SizeProps {\n minWidth?: ResponsiveProp>;\n maxWidth?: ResponsiveProp>;\n width?: ResponsiveProp>;\n\n minHeight?: ResponsiveProp>;\n maxHeight?: ResponsiveProp>;\n height?: ResponsiveProp>;\n}\nexport const getSizeStyles = (\n theme: GrafanaTheme2,\n width: SizeProps['width'],\n minWidth: SizeProps['minWidth'],\n maxWidth: SizeProps['maxWidth'],\n height: SizeProps['height'],\n minHeight: SizeProps['minHeight'],\n maxHeight: SizeProps['maxHeight']\n) => {\n return css([\n getResponsiveStyle(theme, width, (val) => ({\n width: theme.spacing(val),\n })),\n getResponsiveStyle(theme, minWidth, (val) => ({\n minWidth: theme.spacing(val),\n })),\n getResponsiveStyle(theme, maxWidth, (val) => ({\n maxWidth: theme.spacing(val),\n })),\n getResponsiveStyle(theme, height, (val) => ({\n height: theme.spacing(val),\n })),\n getResponsiveStyle(theme, minHeight, (val) => ({\n minHeight: theme.spacing(val),\n })),\n getResponsiveStyle(theme, maxHeight, (val) => ({\n maxHeight: theme.spacing(val),\n })),\n ]);\n};\n","import { css, cx } from '@emotion/css';\nimport { Property } from 'csstype';\nimport { ElementType, forwardRef, PropsWithChildren } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { AlignItems, Direction, FlexProps, JustifyContent } from '../types';\nimport { ResponsiveProp, getResponsiveStyle } from '../utils/responsiveness';\nimport { getSizeStyles, SizeProps } from '../utils/styles';\n\ntype Display = 'flex' | 'block' | 'inline' | 'inline-block' | 'none';\nexport type BackgroundColor = keyof GrafanaTheme2['colors']['background'] | 'error' | 'success' | 'warning' | 'info';\nexport type BorderStyle = 'solid' | 'dashed';\nexport type BorderColor = keyof GrafanaTheme2['colors']['border'] | 'error' | 'success' | 'warning' | 'info';\nexport type BorderRadius = keyof ThemeShape['radius'];\nexport type BoxShadow = keyof ThemeShadows;\n\nexport interface BoxProps extends FlexProps, SizeProps, Omit, 'className' | 'style'> {\n // Margin props\n /** Sets the property `margin` */\n margin?: ResponsiveProp;\n /** Sets the properties `margin-top` and `margin-bottom`. Higher priority than margin. */\n marginX?: ResponsiveProp;\n /** Sets the properties `margin-left` and `margin-right`. Higher priority than margin. */\n marginY?: ResponsiveProp;\n /** Sets the property `margin-top`. Higher priority than margin and marginY. */\n marginTop?: ResponsiveProp;\n /** Sets the property `margin-bottom`. Higher priority than margin and marginXY */\n marginBottom?: ResponsiveProp;\n /** Sets the property `margin-left`. Higher priority than margin and marginX. */\n marginLeft?: ResponsiveProp;\n /** Sets the property `margin-right`. Higher priority than margin and marginX. */\n marginRight?: ResponsiveProp;\n\n // Padding props\n /** Sets the property `padding` */\n padding?: ResponsiveProp;\n /** Sets the properties `padding-top` and `padding-bottom`. Higher priority than padding. */\n paddingX?: ResponsiveProp;\n /** Sets the properties `padding-left` and `padding-right`. Higher priority than padding. */\n paddingY?: ResponsiveProp;\n /** Sets the property `padding-top`. Higher priority than padding and paddingY. */\n paddingTop?: ResponsiveProp;\n /** Sets the property `padding-bottom`. Higher priority than padding and paddingY. */\n paddingBottom?: ResponsiveProp;\n /** Sets the property `padding-left`. Higher priority than padding and paddingX. */\n paddingLeft?: ResponsiveProp;\n /** Sets the property `padding-right`. Higher priority than padding and paddingX. */\n paddingRight?: ResponsiveProp;\n\n // Border Props\n borderStyle?: ResponsiveProp;\n borderColor?: ResponsiveProp;\n borderRadius?: ResponsiveProp;\n\n // Flex Props\n alignItems?: ResponsiveProp;\n direction?: ResponsiveProp;\n justifyContent?: ResponsiveProp;\n gap?: ResponsiveProp;\n\n // Other props\n backgroundColor?: ResponsiveProp;\n display?: ResponsiveProp;\n boxShadow?: ResponsiveProp;\n /** Sets the HTML element that will be rendered as a Box. Defaults to 'div' */\n element?: ElementType;\n position?: ResponsiveProp;\n}\n\nexport const Box = forwardRef>((props, ref) => {\n const {\n children,\n margin,\n marginX,\n marginY,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n display,\n backgroundColor,\n grow,\n shrink,\n basis,\n flex,\n borderColor,\n borderStyle,\n borderRadius,\n direction,\n justifyContent,\n alignItems,\n boxShadow,\n element,\n gap,\n width,\n minWidth,\n maxWidth,\n height,\n minHeight,\n maxHeight,\n position,\n ...rest\n } = props;\n const styles = useStyles2(\n getStyles,\n margin,\n marginX,\n marginY,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n display,\n backgroundColor,\n grow,\n shrink,\n basis,\n flex,\n borderColor,\n borderStyle,\n borderRadius,\n direction,\n justifyContent,\n alignItems,\n boxShadow,\n gap,\n position\n );\n const sizeStyles = useStyles2(getSizeStyles, width, minWidth, maxWidth, height, minHeight, maxHeight);\n const Element = element ?? 'div';\n\n return (\n \n {children}\n \n );\n});\n\nBox.displayName = 'Box';\n\nconst customBorderColor = (color: BorderColor, theme: GrafanaTheme2) => {\n switch (color) {\n case 'error':\n case 'success':\n case 'info':\n case 'warning':\n return theme.colors[color].borderTransparent;\n default:\n return color ? theme.colors.border[color] : undefined;\n }\n};\n\nconst customBackgroundColor = (color: BackgroundColor, theme: GrafanaTheme2) => {\n switch (color) {\n case 'error':\n case 'success':\n case 'info':\n case 'warning':\n return theme.colors[color].transparent;\n default:\n return color ? theme.colors.background[color] : undefined;\n }\n};\n\nconst getStyles = (\n theme: GrafanaTheme2,\n margin: BoxProps['margin'],\n marginX: BoxProps['marginX'],\n marginY: BoxProps['marginY'],\n marginTop: BoxProps['marginTop'],\n marginBottom: BoxProps['marginBottom'],\n marginLeft: BoxProps['marginLeft'],\n marginRight: BoxProps['marginRight'],\n padding: BoxProps['padding'],\n paddingX: BoxProps['paddingX'],\n paddingY: BoxProps['paddingY'],\n paddingTop: BoxProps['paddingTop'],\n paddingBottom: BoxProps['paddingBottom'],\n paddingLeft: BoxProps['paddingLeft'],\n paddingRight: BoxProps['paddingRight'],\n display: BoxProps['display'],\n backgroundColor: BoxProps['backgroundColor'],\n grow: BoxProps['grow'],\n shrink: BoxProps['shrink'],\n basis: BoxProps['basis'],\n flex: BoxProps['flex'],\n borderColor: BoxProps['borderColor'],\n borderStyle: BoxProps['borderStyle'],\n borderRadius: BoxProps['borderRadius'],\n direction: BoxProps['direction'],\n justifyContent: BoxProps['justifyContent'],\n alignItems: BoxProps['alignItems'],\n boxShadow: BoxProps['boxShadow'],\n gap: BoxProps['gap'],\n position: BoxProps['position']\n) => {\n return {\n root: css([\n getResponsiveStyle(theme, margin, (val) => ({\n margin: theme.spacing(val),\n })),\n getResponsiveStyle(theme, marginX, (val) => ({\n marginLeft: theme.spacing(val),\n marginRight: theme.spacing(val),\n })),\n getResponsiveStyle(theme, marginY, (val) => ({\n marginTop: theme.spacing(val),\n marginBottom: theme.spacing(val),\n })),\n getResponsiveStyle(theme, marginTop, (val) => ({\n marginTop: theme.spacing(val),\n })),\n getResponsiveStyle(theme, marginBottom, (val) => ({\n marginBottom: theme.spacing(val),\n })),\n getResponsiveStyle(theme, marginLeft, (val) => ({\n marginLeft: theme.spacing(val),\n })),\n getResponsiveStyle(theme, marginRight, (val) => ({\n marginRight: theme.spacing(val),\n })),\n getResponsiveStyle(theme, padding, (val) => ({\n padding: theme.spacing(val),\n })),\n getResponsiveStyle(theme, paddingX, (val) => ({\n paddingLeft: theme.spacing(val),\n paddingRight: theme.spacing(val),\n })),\n getResponsiveStyle(theme, paddingY, (val) => ({\n paddingTop: theme.spacing(val),\n paddingBottom: theme.spacing(val),\n })),\n getResponsiveStyle(theme, paddingTop, (val) => ({\n paddingTop: theme.spacing(val),\n })),\n getResponsiveStyle(theme, paddingBottom, (val) => ({\n paddingBottom: theme.spacing(val),\n })),\n getResponsiveStyle(theme, paddingLeft, (val) => ({\n paddingLeft: theme.spacing(val),\n })),\n getResponsiveStyle(theme, paddingRight, (val) => ({\n paddingRight: theme.spacing(val),\n })),\n getResponsiveStyle(theme, display, (val) => ({\n display: val,\n })),\n getResponsiveStyle(theme, backgroundColor, (val) => ({\n backgroundColor: customBackgroundColor(val, theme),\n })),\n getResponsiveStyle(theme, direction, (val) => ({\n flexDirection: val,\n })),\n getResponsiveStyle(theme, grow, (val) => ({\n flexGrow: val,\n })),\n getResponsiveStyle(theme, shrink, (val) => ({\n flexShrink: val,\n })),\n getResponsiveStyle(theme, basis, (val) => ({\n flexBasis: val,\n })),\n getResponsiveStyle(theme, flex, (val) => ({\n flex: val,\n })),\n getResponsiveStyle(theme, borderStyle, (val) => ({\n borderStyle: val,\n })),\n getResponsiveStyle(theme, borderColor, (val) => ({\n borderColor: customBorderColor(val, theme),\n })),\n (borderStyle || borderColor) && {\n borderWidth: '1px',\n },\n getResponsiveStyle(theme, justifyContent, (val) => ({\n justifyContent: val,\n })),\n getResponsiveStyle(theme, alignItems, (val) => ({\n alignItems: val,\n })),\n getResponsiveStyle(theme, borderRadius, (val) => ({\n borderRadius: theme.shape.radius[val],\n })),\n getResponsiveStyle(theme, boxShadow, (val) => ({\n boxShadow: theme.shadows[val],\n })),\n getResponsiveStyle(theme, gap, (val) => ({\n gap: theme.spacing(val),\n })),\n getResponsiveStyle(theme, position, (val) => ({\n position: val,\n })),\n ]),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {\n const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false);\n const [showScrollBottomIndicator, setShowBottomScrollIndicator] = useState(false);\n const scrollTopMarker = useRef(null);\n const scrollBottomMarker = useRef(null);\n const styles = useStyles2(getStyles);\n\n // Here we observe the top and bottom markers to determine if we should show the scroll indicators\n useEffect(() => {\n const intersectionObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === scrollTopMarker.current) {\n setShowTopScrollIndicator(!entry.isIntersecting);\n } else if (entry.target === scrollBottomMarker.current) {\n setShowBottomScrollIndicator(!entry.isIntersecting);\n }\n });\n });\n [scrollTopMarker, scrollBottomMarker].forEach((ref) => {\n if (ref.current) {\n intersectionObserver.observe(ref.current);\n }\n });\n return () => intersectionObserver.disconnect();\n }, []);\n\n return (\n <>\n \n
\n
\n {children}\n
\n
\n \n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n // we specifically don't want a theme color here\n // this gradient is more like a shadow\n const scrollGradientColor = `rgba(0, 0, 0, ${theme.isDark ? 0.25 : 0.08})`;\n return {\n scrollContent: css({\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n position: 'relative',\n }),\n scrollIndicator: css({\n height: `max(5%, ${theme.spacing(3)})`,\n left: 0,\n opacity: 0,\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: theme.transitions.create('opacity'),\n },\n zIndex: 1,\n }),\n scrollTopIndicator: css({\n background: `linear-gradient(0deg, transparent, ${scrollGradientColor})`,\n top: 0,\n }),\n scrollBottomIndicator: css({\n background: `linear-gradient(180deg, transparent, ${scrollGradientColor})`,\n bottom: 0,\n }),\n scrollIndicatorVisible: css({\n opacity: 1,\n }),\n scrollMarker: css({\n height: '1px',\n left: 0,\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n }),\n scrollTopMarker: css({\n top: 0,\n }),\n scrollBottomMarker: css({\n bottom: 0,\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { Property } from 'csstype';\nimport { forwardRef, PropsWithChildren, UIEventHandler } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Box, BoxProps } from '../Layout/Box/Box';\n\nimport { ScrollIndicators } from './ScrollIndicators';\n\ninterface Props extends Omit {\n showScrollIndicators?: boolean;\n onScroll?: UIEventHandler;\n overflowX?: Property.OverflowX;\n overflowY?: Property.OverflowY;\n scrollbarWidth?: Property.ScrollbarWidth;\n}\n\nexport const ScrollContainer = forwardRef>(\n (\n {\n children,\n showScrollIndicators = false,\n onScroll,\n overflowX = 'auto',\n overflowY = 'auto',\n scrollbarWidth = 'thin',\n ...rest\n },\n ref\n ) => {\n const styles = useStyles2(getStyles, scrollbarWidth, overflowY, overflowX);\n const defaults: Partial = {\n maxHeight: '100%',\n minHeight: 0,\n minWidth: 0,\n };\n const boxProps = { ...defaults, ...rest };\n\n return (\n \n {/* scrollable containers need tabindex set so keyboard users can focus them to scroll */}\n {/* see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/a7d1a12a6198d546c4a06477b385b4fde03b762e/docs/rules/no-noninteractive-tabindex.md#:~:text=If%20you%20know,scroll%20containers%22. */}\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n
\n {showScrollIndicators ? {children} : children}\n
\n \n );\n }\n);\nScrollContainer.displayName = 'ScrollContainer';\n\nconst getStyles = (\n theme: GrafanaTheme2,\n scrollbarWidth: Props['scrollbarWidth'],\n overflowY: Props['overflowY'],\n overflowX: Props['overflowX']\n) => ({\n scroller: css({\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n overflowX,\n overflowY,\n scrollbarWidth,\n }),\n});\n","import { useEffect, useRef, useState } from 'react';\n\ntype DelayOptions = {\n // Minimal amount of time the switch will be on.\n duration?: number;\n // Delay after which switch will turn on.\n delay?: number;\n};\n\n/**\n * Hook that delays changing of boolean switch to prevent too much time spent in \"on\" state. It is kind of a throttle\n * but you can specify different time for on and off throttling so this only allows a boolean values and also prefers\n * to stay \"off\" so turning \"on\" is always delayed while turning \"off\" is throttled.\n *\n * This is useful for showing loading elements to prevent it flashing too much in case of quick loading time or\n * prevent it flash if loaded state comes right after switch to loading.\n */\nexport function useDelayedSwitch(value: boolean, options: DelayOptions = {}): boolean {\n const { duration = 250, delay = 250 } = options;\n\n const [delayedValue, setDelayedValue] = useState(value);\n const onStartTime = useRef();\n\n useEffect(() => {\n let timeout: ReturnType | undefined;\n if (value) {\n // If toggling to \"on\" state we always setTimeout no matter how long we have been \"off\".\n timeout = setTimeout(() => {\n onStartTime.current = new Date();\n setDelayedValue(value);\n }, delay);\n } else {\n // If toggling to \"off\" state we check how much time we were already \"on\".\n const timeSpent = onStartTime.current ? Date.now() - onStartTime.current.valueOf() : 0;\n const turnOff = () => {\n onStartTime.current = undefined;\n setDelayedValue(value);\n };\n if (timeSpent >= duration) {\n // We already spent enough time \"on\" so change right away.\n turnOff();\n } else {\n timeout = setTimeout(turnOff, duration - timeSpent);\n }\n }\n return () => {\n if (timeout) {\n clearTimeout(timeout);\n timeout = undefined;\n }\n };\n }, [value, duration, delay]);\n\n return delayedValue;\n}\n","import { availableIconsIndex, Field, FieldType, IconName } from '@grafana/data';\n\nimport { ComponentSize } from './size';\n\n// Exported from here for backwards compatibility\nexport type { IconName } from '@grafana/data';\nexport { toIconName } from '@grafana/data';\n\nexport type IconType = 'mono' | 'default' | 'solid';\nexport type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';\nexport const isIconSize = (value: string): value is IconSize => {\n return ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'].includes(value);\n};\n\n// function remains for backwards compatibility\nexport const getAvailableIcons = () => Object.keys(availableIconsIndex);\n\n/**\n * Get the icon for a given field\n */\nexport function getFieldTypeIcon(field?: Field): IconName {\n return getFieldTypeIconName(field?.type);\n}\n\n/** Get an icon for a given field type */\nexport function getFieldTypeIconName(type?: FieldType): IconName {\n if (type) {\n switch (type) {\n case FieldType.time:\n return 'clock-nine';\n case FieldType.string:\n return 'font';\n case FieldType.number:\n return 'calculator-alt';\n case FieldType.boolean:\n return 'toggle-on';\n case FieldType.trace:\n return 'info-circle';\n case FieldType.enum:\n return 'list-ol';\n case FieldType.geo:\n return 'map-marker';\n case FieldType.other:\n return 'brackets-curly';\n }\n }\n return 'question-circle';\n}\n","import { cx, css } from '@emotion/css';\nimport * as React from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconSize, isIconSize } from '../../types/icon';\nimport { spin } from '../../utils/keyframes';\nimport { Icon } from '../Icon/Icon';\nimport { getIconRoot, getIconSubDir } from '../Icon/utils';\n\nexport interface Props {\n className?: string;\n style?: React.CSSProperties;\n iconClassName?: string;\n inline?: boolean;\n size?: IconSize;\n}\n\n/**\n * @deprecated\n * use a predefined size, e.g. 'md' or 'lg' instead\n */\ninterface PropsWithDeprecatedSize extends Omit {\n size?: number | string;\n}\n\n/**\n * @public\n */\nexport const Spinner = ({\n className,\n inline = false,\n iconClassName,\n style,\n size = 'md',\n}: Props | PropsWithDeprecatedSize) => {\n const styles = useStyles2(getStyles);\n\n const deprecatedStyles = useStyles2(getDeprecatedStyles, size);\n const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n const iconName = prefersReducedMotion ? 'hourglass' : 'spinner';\n\n // this entire if statement is handling the deprecated size prop\n // TODO remove once we fully remove the deprecated type\n if (typeof size !== 'string' || !isIconSize(size)) {\n const iconRoot = getIconRoot();\n const subDir = getIconSubDir(iconName, 'default');\n const svgPath = `${iconRoot}${subDir}/${iconName}.svg`;\n return (\n \n \n
\n );\n }\n\n return (\n \n \n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n inline: css({\n display: 'inline-block',\n lineHeight: 0,\n }),\n spin: css({\n [theme.transitions.handleMotion('no-preference')]: {\n animation: `${spin} 2s infinite linear`,\n },\n }),\n});\n\n// TODO remove once we fully remove the deprecated type\nconst getDeprecatedStyles = (theme: GrafanaTheme2, size: number | string) => ({\n wrapper: css({\n fontSize: typeof size === 'string' ? size : `${size}px`,\n }),\n icon: css({\n display: 'inline-block',\n fill: 'currentColor',\n flexShrink: 0,\n label: 'Icon',\n // line-height: 0; is needed for correct icon alignment in Safari\n lineHeight: 0,\n verticalAlign: 'middle',\n }),\n});\n","import { css } from '@emotion/css';\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\ntype Props = {\n children: React.ReactElement;\n visible: boolean;\n duration?: number;\n};\n\nexport function FadeTransition(props: Props) {\n const { visible, children, duration = 250 } = props;\n const styles = useStyles2(getStyles, duration);\n const transitionRef = useRef(null);\n\n return (\n \n {React.cloneElement(children, { ref: transitionRef })}\n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, duration: number) => ({\n enter: css({\n label: 'enter',\n opacity: 0,\n }),\n enterActive: css({\n label: 'enterActive',\n opacity: 1,\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: `opacity ${duration}ms ease-out`,\n },\n }),\n exit: css({\n label: 'exit',\n opacity: 1,\n }),\n exitActive: css({\n label: 'exitActive',\n opacity: 0,\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: `opacity ${duration}ms ease-out`,\n },\n }),\n});\n","import { css } from '@emotion/css';\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\ntype Props = {\n children: React.ReactElement;\n visible: boolean;\n size: number;\n\n duration?: number;\n horizontal?: boolean;\n};\n\nexport function SlideOutTransition(props: Props) {\n const { visible, children, duration = 250, horizontal, size } = props;\n const styles = useStyles2(getStyles, duration, horizontal ? 'width' : 'height', size);\n const transitionRef = useRef(null);\n\n return (\n \n {React.cloneElement(children, { ref: transitionRef })}\n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, duration: number, measurement: 'width' | 'height', size: number) => ({\n enter: css({\n label: 'enter',\n [`${measurement}`]: 0,\n opacity: 0,\n }),\n enterActive: css({\n label: 'enterActive',\n [`${measurement}`]: `${size}px`,\n opacity: 1,\n [theme.transitions.handleMotion('no-preference')]: {\n transition: `opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out`,\n },\n [theme.transitions.handleMotion('reduce')]: {\n transition: `opacity ${duration}ms ease-out`,\n },\n }),\n exit: css({\n label: 'exit',\n [`${measurement}`]: `${size}px`,\n opacity: 1,\n }),\n exitActive: css({\n label: 'exitActive',\n opacity: 0,\n [`${measurement}`]: 0,\n [theme.transitions.handleMotion('no-preference')]: {\n transition: `opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out`,\n },\n [theme.transitions.handleMotion('reduce')]: {\n transition: `opacity ${duration}ms ease-out`,\n },\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport { components, GroupBase, SingleValueProps } from 'react-select';\n\nimport { GrafanaTheme2, SelectableValue, toIconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { useDelayedSwitch } from '../../utils/useDelayedSwitch';\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport { FadeTransition } from '../transitions/FadeTransition';\nimport { SlideOutTransition } from '../transitions/SlideOutTransition';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n singleValue: css({\n label: 'singleValue',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n boxSizing: 'border-box',\n maxWidth: '100%',\n gridArea: '1 / 1 / 2 / 3',\n }),\n spinnerWrapper: css({\n width: '16px',\n height: '16px',\n display: 'inline-block',\n marginRight: '10px',\n position: 'relative',\n verticalAlign: 'middle',\n overflow: 'hidden',\n }),\n spinnerIcon: css({\n width: '100%',\n height: '100%',\n position: 'absolute',\n }),\n optionIcon: css({\n marginRight: theme.spacing(1),\n color: theme.colors.text.secondary,\n }),\n disabled: css({\n color: theme.colors.text.disabled,\n }),\n isOpen: css({\n color: theme.colors.text.disabled,\n }),\n };\n};\n\ntype StylesType = ReturnType;\n\nexport type Props = SingleValueProps, boolean, GroupBase>>;\n\nexport const SingleValue = (props: Props) => {\n const { children, data, isDisabled } = props;\n const styles = useStyles2(getStyles);\n const loading = useDelayedSwitch(data.loading || false, { delay: 250, duration: 750 });\n const icon = data.icon ? toIconName(data.icon) : undefined;\n\n return (\n \n {data.imgUrl ? (\n \n ) : (\n <>\n \n
\n \n
\n \n {icon && }\n \n )}\n\n {!data.hideText && children}\n \n );\n};\n\nconst FadeWithImage = (props: { loading: boolean; imgUrl: string; styles: StylesType; alt?: string }) => {\n return (\n
\n \n \n \n \n {props.alt}\n \n
\n );\n};\n","import { useMemo } from 'react';\nimport { CSSObjectWithLabel } from 'react-select';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport default function resetSelectStyles(theme: GrafanaTheme2) {\n return {\n clearIndicator: () => ({}),\n container: () => ({}),\n control: () => ({}),\n dropdownIndicator: () => ({}),\n group: () => ({}),\n groupHeading: () => ({}),\n indicatorsContainer: () => ({}),\n indicatorSeparator: () => ({}),\n input: function (originalStyles: CSSObjectWithLabel) {\n return {\n ...originalStyles,\n color: 'inherit',\n margin: 0,\n padding: 0,\n // Set an explicit z-index here to ensure this element always overlays the singleValue\n zIndex: 1,\n overflow: 'hidden',\n };\n },\n loadingIndicator: () => ({}),\n loadingMessage: () => ({}),\n menu: () => ({}),\n menuList: ({ maxHeight }: { maxHeight: number }) => ({\n maxHeight,\n }),\n multiValue: () => ({}),\n multiValueLabel: () => ({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }),\n multiValueRemove: () => ({}),\n noOptionsMessage: () => ({}),\n option: () => ({}),\n placeholder: (originalStyles: CSSObjectWithLabel) => ({\n ...originalStyles,\n color: theme.colors.text.secondary,\n }),\n singleValue: () => ({}),\n valueContainer: () => ({}),\n };\n}\n\nexport function useCustomSelectStyles(theme: GrafanaTheme2, width: number | string | undefined) {\n return useMemo(() => {\n return {\n ...resetSelectStyles(theme),\n menuPortal: (base: any) => {\n // Would like to correct top position when menu is placed bottom, but have props are not sent to this style function.\n // Only state is. https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/Menu.tsx#L605\n return {\n ...base,\n zIndex: theme.zIndex.portal,\n };\n },\n //These are required for the menu positioning to function\n menu: ({ top, bottom, position }: any) => {\n return {\n top,\n bottom,\n position,\n minWidth: '100%',\n zIndex: theme.zIndex.dropdown,\n };\n },\n container: () => ({\n width: width ? theme.spacing(width) : '100%',\n display: width === 'auto' ? 'inline-flex' : 'flex',\n }),\n option: (provided: any, state: any) => ({\n ...provided,\n opacity: state.isDisabled ? 0.5 : 1,\n }),\n };\n }, [theme, width]);\n}\n","import { components, OptionProps } from 'react-select';\n\nimport { Icon } from '../../../Icon/Icon';\n\n// https://github.com/JedWatson/react-select/issues/3038\nexport interface ExtendedOptionProps extends OptionProps {\n data: {\n description?: string;\n imgUrl?: string;\n };\n}\n\nexport const SelectOption = (props: ExtendedOptionProps) => {\n const { children, isSelected, data } = props;\n\n return (\n \n
\n {data.imgUrl && \"\"}\n
\n
{children}
\n {data.description &&
{data.description}
}\n
\n {isSelected && }\n
\n \n );\n};\n\nexport default SelectOption;\n","import { css } from '@emotion/css';\nimport { PureComponent } from 'react';\nimport { GroupProps } from 'react-select';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { withTheme2 } from '../../../../themes/ThemeContext';\nimport { stylesFactory } from '../../../../themes/stylesFactory';\nimport { Themeable2 } from '../../../../types/theme';\nimport { Icon } from '../../../Icon/Icon';\n\ninterface ExtendedGroupProps extends Omit, 'theme'>, Themeable2 {\n data: {\n label: string;\n expanded: boolean;\n options: any[];\n };\n}\n\ninterface State {\n expanded: boolean;\n}\n\nconst getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme2) => {\n return {\n header: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n justifyItems: 'center',\n cursor: 'pointer',\n padding: '7px 10px',\n width: '100%',\n borderBottom: `1px solid ${theme.colors.background.secondary}`,\n\n '&:hover': {\n color: theme.colors.text.maxContrast,\n },\n }),\n label: css({\n flexGrow: 1,\n }),\n icon: css({\n paddingRight: '2px',\n }),\n };\n});\n\nclass UnthemedSelectOptionGroup extends PureComponent {\n state = {\n expanded: false,\n };\n\n componentDidMount() {\n if (this.props.data.expanded) {\n this.setState({ expanded: true });\n } else if (this.props.selectProps && this.props.selectProps.value) {\n const { value } = this.props.selectProps.value;\n\n if (value && this.props.options.some((option) => option.value === value)) {\n this.setState({ expanded: true });\n }\n }\n }\n\n componentDidUpdate(nextProps: ExtendedGroupProps) {\n if (nextProps.selectProps.inputValue !== '') {\n this.setState({ expanded: true });\n }\n }\n\n onToggleChildren = () => {\n this.setState((prevState) => ({\n expanded: !prevState.expanded,\n }));\n };\n\n render() {\n const { children, label, theme } = this.props;\n const { expanded } = this.state;\n const styles = getSelectOptionGroupStyles(theme);\n\n return (\n
\n {/*React Select doesn't support focusable option group headers, this will be skipped when using\n the keyboard */}\n
\n {label}\n \n
\n {expanded && children}\n
\n );\n }\n}\n\nexport const SelectOptionGroup = withTheme2(UnthemedSelectOptionGroup);\n","// Libraries\nimport classNames from 'classnames';\nimport { PureComponent } from 'react';\nimport * as React from 'react';\nimport { default as ReactSelect, components, MenuListProps } from 'react-select';\nimport { default as ReactAsyncSelect } from 'react-select/async';\nimport Creatable from 'react-select/creatable';\n\n// Components\nimport { SelectableValue, ThemeContext } from '@grafana/data';\n\nimport { ScrollContainer } from '../../../ScrollContainer/ScrollContainer';\nimport { SingleValue } from '../../../Select/SingleValue';\nimport resetSelectStyles from '../../../Select/resetSelectStyles';\nimport { SelectCommonProps, SelectAsyncProps } from '../../../Select/types';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { PopoverContent } from '../../../Tooltip/types';\n\nimport IndicatorsContainer from './IndicatorsContainer';\nimport NoOptionsMessage from './NoOptionsMessage';\nimport { SelectOption } from './SelectOption';\nimport { SelectOptionGroup } from './SelectOptionGroup';\n\n/**\n * Changes in new selects:\n * - noOptionsMessage & loadingMessage is of string type\n * - isDisabled is renamed to disabled\n */\ntype LegacyCommonProps = Omit, 'noOptionsMessage' | 'disabled' | 'value' | 'loadingMessage'>;\n\ninterface AsyncProps extends LegacyCommonProps, Omit, 'loadingMessage'> {\n loadingMessage?: () => string;\n noOptionsMessage?: () => string;\n tooltipContent?: PopoverContent;\n isDisabled?: boolean;\n value?: SelectableValue;\n}\n\nexport interface LegacySelectProps extends LegacyCommonProps {\n tooltipContent?: PopoverContent;\n noOptionsMessage?: () => string;\n isDisabled?: boolean;\n value?: SelectableValue;\n}\n\nexport const MenuList = (props: MenuListProps) => {\n return (\n \n \n {props.children}\n \n \n );\n};\n\n/** @deprecated Please use the `Select` component, as seen {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--basic in Storybook}. */\nexport class Select extends PureComponent> {\n declare context: React.ContextType;\n static contextType = ThemeContext;\n\n static defaultProps: Partial> = {\n className: '',\n isDisabled: false,\n isSearchable: true,\n isClearable: false,\n isMulti: false,\n openMenuOnFocus: false,\n autoFocus: false,\n isLoading: false,\n backspaceRemovesValue: true,\n maxMenuHeight: 300,\n tabSelectsValue: true,\n allowCustomValue: false,\n components: {\n Option: SelectOption,\n SingleValue,\n IndicatorsContainer,\n MenuList,\n Group: SelectOptionGroup,\n },\n };\n\n render() {\n const {\n defaultValue,\n getOptionLabel,\n getOptionValue,\n onChange,\n options,\n placeholder,\n width,\n value,\n className,\n isDisabled,\n isLoading,\n isSearchable,\n isClearable,\n backspaceRemovesValue,\n isMulti,\n autoFocus,\n openMenuOnFocus,\n onBlur,\n maxMenuHeight,\n noOptionsMessage,\n isOpen,\n components,\n tooltipContent,\n tabSelectsValue,\n onCloseMenu,\n onOpenMenu,\n allowCustomValue,\n formatCreateLabel,\n 'aria-label': ariaLabel,\n } = this.props;\n\n let widthClass = '';\n if (width) {\n widthClass = 'width-' + width;\n }\n\n let SelectComponent = ReactSelect;\n const creatableOptions: any = {};\n\n if (allowCustomValue) {\n SelectComponent = Creatable;\n creatableOptions.formatCreateLabel = formatCreateLabel ?? ((input: string) => input);\n }\n\n const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);\n const selectComponents = { ...Select.defaultProps.components, ...components };\n return (\n \n {(onOpenMenuInternal, onCloseMenuInternal) => {\n return (\n \n );\n }}\n \n );\n }\n}\n\n/** @deprecated Please use the `Select` component with async functionality, as seen {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--basic-select-async in Storybook}. */\nexport class AsyncSelect extends PureComponent> {\n static contextType = ThemeContext;\n\n static defaultProps: Partial> = {\n className: '',\n components: {},\n loadingMessage: () => 'Loading...',\n isDisabled: false,\n isClearable: false,\n isMulti: false,\n isSearchable: true,\n backspaceRemovesValue: true,\n autoFocus: false,\n openMenuOnFocus: false,\n maxMenuHeight: 300,\n };\n\n render() {\n const {\n defaultValue,\n getOptionLabel,\n getOptionValue,\n onChange,\n placeholder,\n width,\n value,\n className,\n loadOptions,\n defaultOptions,\n isLoading,\n loadingMessage,\n noOptionsMessage,\n isDisabled,\n isSearchable,\n isClearable,\n backspaceRemovesValue,\n autoFocus,\n onBlur,\n openMenuOnFocus,\n maxMenuHeight,\n isMulti,\n tooltipContent,\n onCloseMenu,\n onOpenMenu,\n isOpen,\n } = this.props;\n\n let widthClass = '';\n if (width) {\n widthClass = 'width-' + width;\n }\n\n const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);\n\n return (\n \n {(onOpenMenuInternal, onCloseMenuInternal) => {\n return (\n \n );\n }}\n \n );\n }\n}\n\nexport interface TooltipWrapperProps {\n children: (onOpenMenu: () => void, onCloseMenu: () => void) => React.ReactNode;\n onOpenMenu?: () => void;\n onCloseMenu?: () => void;\n isOpen?: boolean;\n tooltipContent?: PopoverContent;\n}\n\nexport interface TooltipWrapperState {\n isOpenInternal: boolean;\n}\n\nexport class WrapInTooltip extends PureComponent {\n state: TooltipWrapperState = {\n isOpenInternal: false,\n };\n\n onOpenMenu = () => {\n const { onOpenMenu } = this.props;\n if (onOpenMenu) {\n onOpenMenu();\n }\n this.setState({ isOpenInternal: true });\n };\n\n onCloseMenu = () => {\n const { onCloseMenu } = this.props;\n if (onCloseMenu) {\n onCloseMenu();\n }\n this.setState({ isOpenInternal: false });\n };\n\n render() {\n const { children, isOpen, tooltipContent } = this.props;\n const { isOpenInternal } = this.state;\n\n let showTooltip: boolean | undefined = undefined;\n\n if (isOpenInternal || isOpen) {\n showTooltip = false;\n }\n\n if (tooltipContent) {\n return (\n \n
\n {/* div needed for tooltip */}\n {children(this.onOpenMenu, this.onCloseMenu)}\n
\n \n );\n } else {\n return
{children(this.onOpenMenu, this.onCloseMenu)}
;\n }\n }\n}\n\nexport default Select;\n","import { css, cx } from '@emotion/css';\nimport { Placement } from '@popperjs/core';\nimport { uniqueId } from 'lodash';\nimport { PureComponent } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { withTheme2 } from '../../../../themes/ThemeContext';\nimport { Themeable2 } from '../../../../types/theme';\nimport { Icon } from '../../../Icon/Icon';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\nexport interface Props extends Themeable2 {\n label: string;\n checked: boolean;\n disabled?: boolean;\n className?: string;\n labelClass?: string;\n switchClass?: string;\n tooltip?: string;\n tooltipPlacement?: Placement;\n transparent?: boolean;\n onChange: (event: React.SyntheticEvent) => void;\n}\n\nexport interface State {\n id: string;\n}\n\n/** @deprecated Please use the `Switch` component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-switch--controlled as seen in Storybook} */\nclass UnthemedSwitch extends PureComponent {\n state = {\n id: uniqueId(),\n };\n\n internalOnChange = (event: React.FormEvent) => {\n event.stopPropagation();\n this.props.onChange(event);\n };\n\n render() {\n const {\n labelClass = '',\n switchClass = '',\n label,\n checked,\n disabled,\n transparent,\n className,\n theme,\n tooltip,\n tooltipPlacement,\n } = this.props;\n const styles = getStyles(theme);\n\n const labelId = this.state.id;\n const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;\n const switchClassName = cx(styles.switch, switchClass, {\n [styles.switchTransparent]: transparent,\n });\n\n return (\n
\n \n
\n );\n }\n}\n\nexport const Switch = withTheme2(UnthemedSwitch);\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const slider = css({\n background: theme.v1.palette.gray1,\n borderRadius: theme.shape.radius.pill,\n height: '16px',\n width: '32px',\n display: 'block',\n position: 'relative',\n\n '&::before': {\n position: 'absolute',\n content: \"''\",\n height: '12px',\n width: '12px',\n left: '2px',\n top: '2px',\n background: theme.components.input.background,\n transition: '0.4s',\n borderRadius: theme.shape.radius.circle,\n boxShadow: theme.shadows.z1,\n },\n });\n return {\n container: css({\n display: 'flex',\n flexShrink: 0,\n }),\n labelContainer: css({\n display: 'flex',\n cursor: 'pointer',\n marginRight: theme.spacing(0.5),\n }),\n switch: css({\n display: 'flex',\n position: 'relative',\n width: '56px',\n height: theme.spacing(4),\n background: theme.components.input.background,\n border: `1px solid ${theme.components.input.borderColor}`,\n borderRadius: theme.shape.radius.default,\n alignItems: 'center',\n justifyContent: 'center',\n input: {\n opacity: 0,\n width: 0,\n height: 0,\n },\n [`input:checked + .${slider}`]: {\n background: theme.colors.primary.main,\n },\n\n [`input:checked + .${slider}::before`]: {\n transform: 'translateX(16px)',\n },\n }),\n switchTransparent: css({\n background: 'transparent',\n border: 0,\n width: '40px',\n }),\n slider,\n };\n};\n","import tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';\n\nexport function cardChrome(theme: GrafanaTheme2): string {\n return `\n background: ${theme.colors.background.secondary};\n &:hover {\n background: ${hoverColor(theme.colors.background.secondary, theme)};\n }\n box-shadow: ${theme.components.panel.boxShadow};\n border-radius: ${theme.shape.radius.default};\n`;\n}\n\nexport function hoverColor(color: string, theme: GrafanaTheme2): string {\n return theme.isDark ? tinycolor(color).brighten(2).toString() : tinycolor(color).darken(2).toString();\n}\n\nexport function listItem(theme: GrafanaTheme2): string {\n return `\n background: ${theme.colors.background.secondary};\n &:hover {\n background: ${hoverColor(theme.colors.background.secondary, theme)};\n }\n box-shadow: ${theme.components.panel.boxShadow};\n border-radius: ${theme.shape.radius.default};\n`;\n}\n\nexport function listItemSelected(theme: GrafanaTheme2): string {\n return `\n background: ${hoverColor(theme.colors.background.secondary, theme)};\n color: ${theme.colors.text.maxContrast};\n`;\n}\n\nexport function mediaUp(breakpoint: string) {\n return `only screen and (min-width: ${breakpoint})`;\n}\n\nconst isGrafanaTheme2 = (theme: GrafanaTheme | GrafanaTheme2): theme is GrafanaTheme2 => theme.hasOwnProperty('v1');\nexport const focusCss = (theme: GrafanaTheme | GrafanaTheme2) => {\n const isTheme2 = isGrafanaTheme2(theme);\n const firstColor = isTheme2 ? theme.colors.background.canvas : theme.colors.bodyBg;\n const secondColor = isTheme2 ? theme.colors.primary.main : theme.colors.formFocusOutline;\n\n return `\n outline: 2px dotted transparent;\n outline-offset: 2px;\n box-shadow: 0 0 0 2px ${firstColor}, 0 0 0px 4px ${secondColor};\n transition-property: outline, outline-offset, box-shadow;\n transition-duration: 0.2s;\n transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);`;\n};\n\nexport function getMouseFocusStyles(theme: GrafanaTheme | GrafanaTheme2) {\n return {\n outline: 'none',\n boxShadow: `none`,\n };\n}\n\nexport function getFocusStyles(theme: GrafanaTheme2) {\n return {\n outline: '2px dotted transparent',\n outlineOffset: '2px',\n boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n transitionDuration: '0.2s',\n transitionProperty: 'outline, outline-offset, box-shadow',\n };\n}\n\n// max-width is set up based on .grafana-tooltip class that's used in dashboard\nexport const getTooltipContainerStyles = (theme: GrafanaTheme2) => ({\n overflow: 'hidden',\n background: theme.colors.background.elevated,\n boxShadow: theme.shadows.z2,\n maxWidth: '800px',\n padding: theme.spacing(1),\n borderRadius: theme.shape.radius.default,\n zIndex: theme.zIndex.tooltip,\n});\n\ninterface ExternalRadiusAdditionalOptions {\n selfBorderWidth?: number;\n childBorderRadius?: number;\n}\n/**\n * Calculates a border radius for an element, based on border radius of its child.\n *\n * @param theme\n * @param offset - The distance to offset from the child element, should be >= 0.\n * @param additionalOptions\n * @param additionalOptions.selfBorderWidth - The border width of the element itself (default: 1)\n * @param additionalOptions.childBorderRadius - The border radius of the child element (default: theme default radius)\n * @returns A CSS calc() expression that returns the relative external radius value\n */\nexport const getExternalRadius = (\n theme: GrafanaTheme2,\n offset: number,\n additionalOptions: ExternalRadiusAdditionalOptions = {}\n) => {\n const { selfBorderWidth = 1, childBorderRadius } = additionalOptions;\n\n const childBorderRadiusPx = childBorderRadius !== undefined ? `${childBorderRadius}px` : theme.shape.radius.default;\n return `calc(max(0px, ${childBorderRadiusPx} + ${offset}px + ${selfBorderWidth}px))`;\n};\n\ninterface InternalRadiusAdditionalOptions {\n parentBorderWidth?: number;\n parentBorderRadius?: number;\n}\n\n/**\n * Calculates a border radius for an element, based on border radius of its parent.\n *\n * @param theme\n * @param offset - The distance to offset from the parent element, should be >= 0.\n * @param additionalOptions\n * @param additionalOptions.parentBorderWidth - The border width of the parent element (default: 1)\n * @param additionalOptions.parentBorderRadius - The border radius of the parent element (default: theme default radius)\n * @returns A CSS calc() expression that returns the relative internal radius value\n */\nexport const getInternalRadius = (\n theme: GrafanaTheme2,\n offset: number,\n additionalOptions: InternalRadiusAdditionalOptions = {}\n) => {\n const { parentBorderWidth = 1, parentBorderRadius } = additionalOptions;\n\n const parentBorderRadiusPx =\n parentBorderRadius !== undefined ? `${parentBorderRadius}px` : theme.shape.radius.default;\n return `calc(max(0px, ${parentBorderRadiusPx} - ${offset}px - ${parentBorderWidth}px))`;\n};\n","import { css, cx } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { getFocusStyles } from '../../themes/mixins';\nimport { ComponentSize } from '../../types/size';\n\nexport const getFocusStyle = (theme: GrafanaTheme2) =>\n css({\n '&:focus': getFocusStyles(theme),\n });\n\nexport const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => {\n const borderColor = invalid ? theme.colors.error.border : theme.components.input.borderColor;\n const borderColorHover = invalid ? theme.colors.error.shade : theme.components.input.borderHover;\n const background = theme.components.input.background;\n const textColor = theme.components.input.text;\n\n // Cannot use our normal borders for this color for some reason due the alpha values in them.\n // Need to colors without alpha channel\n const autoFillBorder = theme.isDark ? '#2e2f35' : '#bab4ca';\n\n return cx(\n inputPadding(theme),\n css({\n background,\n lineHeight: theme.typography.body.lineHeight,\n fontSize: theme.typography.size.md,\n color: textColor,\n border: `1px solid ${borderColor}`,\n\n '&:-webkit-autofill, &:-webkit-autofill:hover': {\n /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */\n boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important`,\n WebkitTextFillColor: `${textColor} !important`,\n borderColor: autoFillBorder,\n },\n\n '&:-webkit-autofill:focus': {\n /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */\n boxShadow: `0 0 0 2px ${theme.colors.background.primary}, 0 0 0px 4px ${theme.colors.primary.main}, inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important`,\n WebkitTextFillColor: `${textColor} !important`,\n },\n\n '&:hover': {\n borderColor: borderColorHover,\n },\n\n '&:focus': {\n outline: 'none',\n },\n\n '&:disabled': {\n backgroundColor: theme.colors.action.disabledBackground,\n color: theme.colors.action.disabledText,\n border: `1px solid ${theme.colors.action.disabledBackground}`,\n\n '&:hover': {\n borderColor,\n },\n },\n\n '&::placeholder': {\n color: theme.colors.text.disabled,\n opacity: 1,\n },\n })\n );\n};\n\nexport const inputPadding = (theme: GrafanaTheme2) => {\n return css({\n padding: theme.spacing(0, 1, 0, 1),\n });\n};\n\nexport const inputSizes = () => {\n return {\n sm: css({\n width: inputSizesPixels('sm'),\n }),\n md: css({\n width: inputSizesPixels('md'),\n }),\n lg: css({\n width: inputSizesPixels('lg'),\n }),\n auto: css({\n width: inputSizesPixels('auto'),\n }),\n };\n};\n\nexport const inputSizesPixels = (size: string) => {\n switch (size) {\n case 'sm':\n return '200px';\n case 'md':\n return '320px';\n case 'lg':\n return '580px';\n case 'auto':\n default:\n return 'auto';\n }\n};\n\nexport function getPropertiesForButtonSize(size: ComponentSize, theme: GrafanaTheme2) {\n switch (size) {\n case 'sm':\n return {\n padding: 1,\n fontSize: theme.typography.size.sm,\n height: theme.components.height.sm,\n };\n\n case 'lg':\n return {\n padding: 3,\n fontSize: theme.typography.size.lg,\n height: theme.components.height.lg,\n };\n case 'md':\n default:\n return {\n padding: 2,\n fontSize: theme.typography.size.md,\n height: theme.components.height.md,\n };\n }\n}\n","import { css, cx } from '@emotion/css';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, ThemeRichColor } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { IconName, IconSize, IconType } from '../../types/icon';\nimport { ComponentSize } from '../../types/size';\nimport { getPropertiesForButtonSize } from '../Forms/commonStyles';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent, TooltipPlacement } from '../Tooltip/types';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'success';\nexport const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive'];\nexport type ButtonFill = 'solid' | 'outline' | 'text';\nexport const allButtonFills: ButtonFill[] = ['solid', 'outline', 'text'];\n\ntype BaseProps = {\n size?: ComponentSize;\n variant?: ButtonVariant;\n fill?: ButtonFill;\n icon?: IconName | React.ReactElement;\n className?: string;\n fullWidth?: boolean;\n type?: string;\n tooltip?: PopoverContent;\n tooltipPlacement?: TooltipPlacement;\n /** Position of the icon */\n iconPlacement?: 'left' | 'right';\n};\n\n// either aria-label or tooltip is required for buttons without children\ntype NoChildrenAriaLabel = BaseProps & {\n children?: never;\n 'aria-label': string;\n};\ntype NoChildrenTooltip = BaseProps & {\n children?: never;\n tooltip: PopoverContent;\n tooltipPlacement?: TooltipPlacement;\n};\n\ntype BasePropsWithChildren = BaseProps & {\n children: React.ReactNode;\n};\n\ntype CommonProps = BasePropsWithChildren | NoChildrenTooltip | NoChildrenAriaLabel;\n\nexport type ButtonProps = CommonProps & ButtonHTMLAttributes;\n\nexport const Button = React.forwardRef(\n (\n {\n 'aria-label': ariaLabel,\n variant = 'primary',\n size = 'md',\n fill = 'solid',\n icon,\n fullWidth,\n children,\n className,\n type = 'button',\n tooltip,\n disabled,\n tooltipPlacement,\n iconPlacement = 'left',\n onClick,\n ...otherProps\n },\n ref\n ) => {\n const theme = useTheme2();\n const styles = getButtonStyles({\n theme,\n size,\n variant,\n fill,\n fullWidth,\n iconOnly: !children,\n });\n\n const buttonStyles = cx(\n styles.button,\n {\n [styles.disabled]: disabled,\n },\n className\n );\n\n const hasTooltip = Boolean(tooltip);\n\n const iconComponent = icon && ;\n\n // In order to standardise Button please always consider using IconButton when you need a button with an icon only\n // When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632\n const button = (\n \n {iconPlacement === 'left' && iconComponent}\n {children && {children}}\n {iconPlacement === 'right' && iconComponent}\n \n );\n\n if (tooltip) {\n return (\n \n {button}\n \n );\n }\n\n return button;\n }\n);\n\nButton.displayName = 'Button';\n\nexport type ButtonLinkProps = ButtonProps & Omit, 'aria-label'>;\n\nexport const LinkButton = React.forwardRef(\n (\n {\n 'aria-label': ariaLabel,\n variant = 'primary',\n size = 'md',\n fill = 'solid',\n icon,\n fullWidth,\n children,\n className,\n onBlur,\n onFocus,\n disabled,\n tooltip,\n tooltipPlacement,\n ...otherProps\n },\n ref\n ) => {\n const theme = useTheme2();\n const styles = getButtonStyles({\n theme,\n fullWidth,\n size,\n variant,\n fill,\n iconOnly: !children,\n });\n\n const linkButtonStyles = cx(\n styles.button,\n {\n [css(styles.disabled, {\n pointerEvents: 'none',\n })]: disabled,\n },\n className\n );\n\n // When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632\n const button = (\n \n \n {children && {children}}\n \n );\n\n if (tooltip) {\n return (\n \n {button}\n \n );\n }\n\n return button;\n }\n);\n\nLinkButton.displayName = 'LinkButton';\n\ninterface IconRendererProps {\n icon?: IconName | React.ReactElement<{ className?: string; size?: IconSize }>;\n size?: IconSize;\n className?: string;\n iconType?: IconType;\n}\nexport const IconRenderer = ({ icon, size, className, iconType }: IconRendererProps) => {\n if (!icon) {\n return null;\n }\n if (React.isValidElement(icon)) {\n return React.cloneElement(icon, {\n className,\n size,\n });\n }\n return ;\n};\n\nexport interface StyleProps {\n size: ComponentSize;\n variant: ButtonVariant;\n fill?: ButtonFill;\n iconOnly?: boolean;\n theme: GrafanaTheme2;\n fullWidth?: boolean;\n narrow?: boolean;\n}\n\nexport const getButtonStyles = (props: StyleProps) => {\n const { theme, variant, fill = 'solid', size, iconOnly, fullWidth } = props;\n const { height, padding, fontSize } = getPropertiesForButtonSize(size, theme);\n const variantStyles = getPropertiesForVariant(theme, variant, fill);\n const disabledStyles = getPropertiesForDisabled(theme, variant, fill);\n const focusStyle = getFocusStyles(theme);\n const paddingMinusBorder = theme.spacing.gridSize * padding - 1;\n\n return {\n button: css({\n label: 'button',\n display: 'inline-flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n fontSize: fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n fontFamily: theme.typography.fontFamily,\n padding: `0 ${paddingMinusBorder}px`,\n height: theme.spacing(height),\n // Deduct border from line-height for perfect vertical centering on windows and linux\n lineHeight: `${theme.spacing.gridSize * height - 2}px`,\n verticalAlign: 'middle',\n cursor: 'pointer',\n borderRadius: theme.shape.radius.default,\n '&:focus': focusStyle,\n '&:focus-visible': focusStyle,\n '&:focus:not(:focus-visible)': getMouseFocusStyles(theme),\n ...(fullWidth && {\n flexGrow: 1,\n justifyContent: 'center',\n }),\n ...variantStyles,\n ':disabled': disabledStyles,\n '&[disabled]': disabledStyles,\n }),\n disabled: css(disabledStyles, {\n '&:hover': css(disabledStyles),\n }),\n img: css({\n width: '16px',\n height: '16px',\n margin: theme.spacing(0, 1, 0, 0.5),\n }),\n icon: iconOnly\n ? css({\n // Important not to set margin bottom here as it would override internal icon bottom margin\n marginRight: theme.spacing(-padding / 2),\n marginLeft: theme.spacing(-padding / 2),\n })\n : undefined,\n content: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n height: '100%',\n }),\n };\n};\n\nfunction getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fill: ButtonFill) {\n let outlineBorderColor = color.border;\n let borderColor = 'transparent';\n let hoverBorderColor = 'transparent';\n\n // Secondary button has some special rules as we lack theem color token to\n // specify border color for normal button vs border color for outline button\n if (color.name === 'secondary') {\n borderColor = color.border;\n hoverBorderColor = theme.colors.emphasize(color.border, 0.25);\n outlineBorderColor = theme.colors.border.strong;\n }\n\n if (fill === 'outline') {\n return {\n background: 'transparent',\n color: color.text,\n border: `1px solid ${outlineBorderColor}`,\n transition: theme.transitions.create(['background-color', 'border-color', 'color'], {\n duration: theme.transitions.duration.short,\n }),\n\n '&:hover': {\n background: color.transparent,\n borderColor: theme.colors.emphasize(outlineBorderColor, 0.25),\n color: color.text,\n },\n };\n }\n\n if (fill === 'text') {\n return {\n background: 'transparent',\n color: color.text,\n border: '1px solid transparent',\n transition: theme.transitions.create(['background-color', 'color'], {\n duration: theme.transitions.duration.short,\n }),\n\n '&:focus': {\n outline: 'none',\n textDecoration: 'none',\n },\n\n '&:hover': {\n background: color.transparent,\n textDecoration: 'none',\n },\n };\n }\n\n return {\n background: color.main,\n color: color.contrastText,\n border: `1px solid ${borderColor}`,\n transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {\n duration: theme.transitions.duration.short,\n }),\n\n '&:hover': {\n background: color.shade,\n color: color.contrastText,\n boxShadow: theme.shadows.z1,\n borderColor: hoverBorderColor,\n },\n };\n}\n\nfunction getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {\n const disabledStyles = {\n cursor: 'not-allowed',\n boxShadow: 'none',\n color: theme.colors.text.disabled,\n transition: 'none',\n };\n\n if (fill === 'text') {\n return {\n ...disabledStyles,\n background: 'transparent',\n border: `1px solid transparent`,\n };\n }\n\n if (fill === 'outline') {\n return {\n ...disabledStyles,\n background: 'transparent',\n border: `1px solid ${theme.colors.border.weak}`,\n };\n }\n\n return {\n ...disabledStyles,\n background: theme.colors.action.disabledBackground,\n border: `1px solid transparent`,\n };\n}\n\nexport function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {\n switch (variant) {\n case 'secondary':\n // The seconday button has some special handling as it's outline border is it's default color border\n return getButtonVariantStyles(theme, theme.colors.secondary, fill);\n\n case 'destructive':\n return getButtonVariantStyles(theme, theme.colors.error, fill);\n\n case 'success':\n return getButtonVariantStyles(theme, theme.colors.success, fill);\n\n case 'primary':\n default:\n return getButtonVariantStyles(theme, theme.colors.primary, fill);\n }\n}\n\nexport const clearButtonStyles = (theme: GrafanaTheme2) => {\n return css({\n background: 'transparent',\n color: theme.colors.text.primary,\n border: 'none',\n padding: 0,\n });\n};\n\nexport const clearLinkButtonStyles = (theme: GrafanaTheme2) => {\n return css({\n background: 'transparent',\n border: 'none',\n padding: 0,\n fontFamily: 'inherit',\n color: 'inherit',\n height: '100%',\n cursor: 'context-menu',\n '&:hover': {\n background: 'transparent',\n color: 'inherit',\n },\n });\n};\n","import { omit } from 'lodash';\nimport { InputHTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { Trans } from '@grafana/i18n';\n\nimport { Button } from '../Button/Button';\nimport { FormField } from '../FormField/FormField';\nimport { Field } from '../Forms/Field';\nimport { SecretInput } from '../SecretInput';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport interface Props extends Omit, 'onReset'> {\n // Function to use when reset is clicked. Means you have to reset the input value yourself as this is uncontrolled\n // component (or do something else if required).\n onReset: (event: React.SyntheticEvent) => void;\n isConfigured: boolean;\n\n label?: string;\n tooltip?: PopoverContent;\n labelWidth?: number;\n inputWidth?: number;\n // Placeholder of the input field when in non configured state.\n placeholder?: string;\n interactive?: boolean;\n}\n\n/**\n * Form field that has 2 states configured and not configured. If configured it will not show its contents and adds\n * a reset button that will clear the input and makes it accessible. In non configured state it behaves like normal\n * form field. This is used for passwords or anything that is encrypted on the server and is later returned encrypted\n * to the user (like datasource passwords).\n *\n * @deprecated Please use the {@link SecretInput} component with a {@link Field} instead, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-secretinput--basic as seen in Storybook}\n */\nexport const SecretFormField = ({\n label = 'Password',\n labelWidth,\n inputWidth = 12,\n onReset,\n isConfigured,\n tooltip,\n placeholder = 'Password',\n interactive,\n ...inputProps\n}: Props) => {\n return (\n \n \n \n \n ) : (\n \n )\n }\n />\n );\n};\n\nSecretFormField.displayName = 'SecretFormField';\n","import { ReactElement } from 'react';\nimport * as React from 'react';\n\n/** Returns the ID value of the first, and only, child element */\nexport function getChildId(children: ReactElement): string | undefined {\n let inputId: unknown;\n\n // Get the first, and only, child to retrieve form input's id\n const child = React.Children.only(children);\n\n // Retrieve input's id to apply on the label for correct click interaction\n // For some components (like Select), we want to get the ID from a different prop\n if ('id' in child?.props) {\n inputId = child.props.id;\n } else if ('inputId' in child.props) {\n inputId = child?.props.inputId;\n }\n\n return typeof inputId === 'string' ? inputId : undefined;\n}\n\n/**\n * Given react node or function returns element accordingly\n *\n * @param itemToRender\n * @param props props to be passed to the function if item provided as such\n */\nexport function renderOrCallToRender(\n itemToRender: ((props: TProps) => React.ReactNode) | React.ReactNode,\n props?: TProps\n): React.ReactNode {\n if (React.isValidElement(itemToRender) || typeof itemToRender === 'string' || typeof itemToRender === 'number') {\n return itemToRender;\n }\n\n if (typeof itemToRender === 'function' && props) {\n return itemToRender(props);\n }\n\n throw new Error(`${itemToRender} is not a React element nor a function that returns React element`);\n}\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nexport interface FieldValidationMessageProps {\n /** Override component style */\n className?: string;\n horizontal?: boolean;\n}\n\nexport const FieldValidationMessage = ({\n children,\n horizontal,\n className,\n}: React.PropsWithChildren) => {\n const styles = useStyles2(getFieldValidationMessageStyles);\n const cssName = cx(horizontal ? styles.horizontal : styles.vertical, className);\n\n return (\n
\n \n {children}\n
\n );\n};\n\nexport const getFieldValidationMessageStyles = (theme: GrafanaTheme2) => {\n const baseStyle = `\n font-size: ${theme.typography.size.sm};\n font-weight: ${theme.typography.fontWeightMedium};\n padding: ${theme.spacing(0.5, 1)};\n color: ${theme.colors.error.contrastText};\n background: ${theme.colors.error.main};\n border-radius: ${theme.shape.radius.default};\n position: relative;\n display: inline-block;\n align-self: flex-start;\n\n a {\n color: ${theme.colors.error.contrastText};\n text-decoration: underline;\n }\n\n a:hover {\n text-decoration: none;\n }\n `;\n\n return {\n vertical: css(baseStyle, {\n margin: theme.spacing(0.5, 0, 0, 0),\n\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n left: '9px',\n top: '-5px',\n width: 0,\n height: 0,\n borderWidth: '0 4px 5px 4px',\n borderColor: `transparent transparent ${theme.colors.error.main} transparent`,\n borderStyle: 'solid',\n },\n }),\n horizontal: css(baseStyle, {\n marginLeft: '10px',\n\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n left: '-5px',\n top: '9px',\n width: 0,\n height: 0,\n borderWidth: '4px 5px 4px 0',\n borderColor: 'transparent #e02f44 transparent transparent',\n borderStyle: 'solid',\n },\n }),\n fieldValidationMessageIcon: css({\n marginRight: theme.spacing(),\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nexport interface LabelProps extends React.LabelHTMLAttributes {\n children: React.ReactNode;\n description?: React.ReactNode;\n category?: React.ReactNode[];\n}\n\nexport const Label = ({ children, description, className, category, ...labelProps }: LabelProps) => {\n const styles = useStyles2(getLabelStyles);\n const categories = category?.map((c, i) => {\n return (\n \n {c}\n \n \n );\n });\n\n return (\n
\n \n
\n );\n};\n\nexport const getLabelStyles = (theme: GrafanaTheme2) => ({\n label: css({\n label: 'Label',\n fontSize: theme.typography.size.sm,\n fontWeight: theme.typography.fontWeightMedium,\n lineHeight: 1.25,\n marginBottom: theme.spacing(0.5),\n color: theme.colors.text.primary,\n maxWidth: '480px',\n }),\n labelContent: css({\n display: 'flex',\n alignItems: 'center',\n }),\n description: css({\n label: 'Label-description',\n color: theme.colors.text.secondary,\n fontSize: theme.typography.size.sm,\n fontWeight: theme.typography.fontWeightRegular,\n marginTop: theme.spacing(0.25),\n display: 'block',\n }),\n categories: css({\n label: 'Label-categories',\n display: 'inline-flex',\n alignItems: 'center',\n }),\n chevron: css({\n margin: theme.spacing(0, 0.25),\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport { HTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getChildId } from '../../utils/reactUtils';\n\nimport { FieldValidationMessage } from './FieldValidationMessage';\nimport { Label } from './Label';\n\nexport interface FieldProps extends HTMLAttributes {\n /** Form input element, i.e Input or Switch */\n children: React.ReactElement;\n /** Label for the field */\n label?: React.ReactNode;\n /** Description of the field */\n description?: React.ReactNode;\n /** Indicates if field is in invalid state */\n invalid?: boolean;\n /** Indicates if field is in loading state */\n loading?: boolean;\n /** Indicates if field is disabled */\n disabled?: boolean;\n /** Indicates if field is required */\n required?: boolean;\n /** Error message to display */\n error?: React.ReactNode;\n /** Indicates horizontal layout of the field */\n horizontal?: boolean;\n /** make validation message overflow horizontally. Prevents pushing out adjacent inline components */\n validationMessageHorizontalOverflow?: boolean;\n\n className?: string;\n /**\n * A unique id that associates the label of the Field component with the control with the unique id.\n * If the `htmlFor` property is missing the `htmlFor` will be inferred from the `id` or `inputId` property of the first child.\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for\n */\n htmlFor?: string;\n /** Remove the bottom margin */\n noMargin?: boolean;\n}\n\nexport const Field = React.forwardRef(\n (\n {\n label,\n description,\n horizontal,\n invalid,\n loading,\n disabled,\n required,\n error,\n children,\n className,\n validationMessageHorizontalOverflow,\n htmlFor,\n noMargin,\n ...otherProps\n }: FieldProps,\n ref\n ) => {\n const styles = useStyles2(getFieldStyles, noMargin);\n const inputId = htmlFor ?? getChildId(children);\n\n const labelElement =\n typeof label === 'string' ? (\n \n ) : (\n label\n );\n\n const childProps = deleteUndefinedProps({ invalid, disabled, loading });\n return (\n
\n {labelElement}\n
\n
{React.cloneElement(children, childProps)}
\n {invalid && error && !horizontal && (\n \n {error}\n
\n )}\n
\n\n {invalid && error && horizontal && (\n \n {error}\n \n )}\n \n );\n }\n);\n\nField.displayName = 'Field';\n\nfunction deleteUndefinedProps(obj: T): Partial {\n for (const key in obj) {\n if (obj[key] === undefined) {\n delete obj[key];\n }\n }\n\n return obj;\n}\n\nexport const getFieldStyles = (theme: GrafanaTheme2, noMargin?: boolean) => ({\n field: css({\n display: 'flex',\n flexDirection: 'column',\n marginBottom: theme.spacing(noMargin ? 0 : 2),\n }),\n fieldHorizontal: css({\n flexDirection: 'row',\n justifyContent: 'space-between',\n flexWrap: 'wrap',\n }),\n fieldValidationWrapper: css({\n marginTop: theme.spacing(0.5),\n }),\n fieldValidationWrapperHorizontal: css({\n flex: '1 1 100%',\n }),\n validationMessageHorizontalOverflow: css({\n width: 0,\n overflowX: 'visible',\n\n '& > *': {\n whiteSpace: 'nowrap',\n },\n }),\n});\n","import { css } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { StringSelector, selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { getFocusStyles, getInternalRadius, getMouseFocusStyles } from '../../../themes/mixins';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { getPropertiesForButtonSize } from '../commonStyles';\n\nexport const RADIO_GROUP_PADDING = 2;\nexport type RadioButtonSize = 'sm' | 'md';\n\nexport interface RadioButtonProps {\n size?: RadioButtonSize;\n disabled?: boolean;\n name?: string;\n description?: string;\n active: boolean;\n id: string;\n onChange: () => void;\n onClick: () => void;\n fullWidth?: boolean;\n 'aria-label'?: StringSelector;\n children?: React.ReactNode;\n}\n\nexport const RadioButton = React.forwardRef(\n (\n {\n children,\n active = false,\n disabled = false,\n size = 'md',\n onChange,\n onClick,\n id,\n name = undefined,\n description,\n fullWidth,\n 'aria-label': ariaLabel,\n },\n ref\n ) => {\n const styles = useStyles2(getRadioButtonStyles, size, fullWidth);\n\n const inputRadioButton = (\n \n );\n return description ? (\n
\n \n {inputRadioButton}\n \n \n
\n ) : (\n
\n {inputRadioButton}\n \n
\n );\n }\n);\n\nRadioButton.displayName = 'RadioButton';\n\nconst getRadioButtonStyles = (theme: GrafanaTheme2, size: RadioButtonSize, fullWidth?: boolean) => {\n const { fontSize, height, padding } = getPropertiesForButtonSize(size, theme);\n\n const textColor = theme.colors.text.secondary;\n const textColorHover = theme.colors.text.primary;\n // remove the group inner padding (set on RadioButtonGroup)\n const labelHeight = height * theme.spacing.gridSize - 4 - 2;\n\n return {\n radioOption: css({\n display: 'flex',\n justifyContent: 'space-between',\n position: 'relative',\n flex: fullWidth ? `1 0 0` : 'none',\n textAlign: 'center',\n }),\n radio: css({\n position: 'absolute',\n opacity: 0,\n zIndex: 2,\n width: '100% !important',\n height: '100%',\n cursor: 'pointer',\n\n '&:checked + label': {\n color: theme.colors.text.primary,\n fontWeight: theme.typography.fontWeightMedium,\n background: theme.colors.action.selected,\n zIndex: 1,\n },\n\n '&:focus + label, &:focus-visible + label': getFocusStyles(theme),\n\n '&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme),\n\n '&:disabled + label': {\n color: theme.colors.text.disabled,\n cursor: 'not-allowed',\n },\n }),\n radioLabel: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize,\n height: `${labelHeight}px`,\n // Deduct border from line-height for perfect vertical centering on windows and linux\n lineHeight: `${labelHeight}px`,\n color: textColor,\n padding: theme.spacing(0, padding),\n borderRadius: getInternalRadius(theme, RADIO_GROUP_PADDING),\n background: theme.colors.background.primary,\n cursor: 'pointer',\n userSelect: 'none',\n whiteSpace: 'nowrap',\n flexGrow: 1,\n\n '&:hover': {\n color: textColorHover,\n },\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { GrafanaTheme2, SelectableValue, toIconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Icon } from '../../Icon/Icon';\n\nimport { RadioButtonSize, RadioButton, RADIO_GROUP_PADDING } from './RadioButton';\nexport interface RadioButtonGroupProps {\n value?: T;\n id?: string;\n disabled?: boolean;\n disabledOptions?: T[];\n options: Array>;\n onChange?: (value: T) => void;\n onClick?: (value: T) => void;\n size?: RadioButtonSize;\n fullWidth?: boolean;\n className?: string;\n autoFocus?: boolean;\n ['aria-label']?: string;\n invalid?: boolean;\n}\n\nexport function RadioButtonGroup({\n options,\n value,\n onChange,\n onClick,\n disabled,\n disabledOptions,\n size = 'md',\n id,\n className,\n fullWidth = false,\n autoFocus = false,\n 'aria-label': ariaLabel,\n invalid = false,\n}: RadioButtonGroupProps) {\n const handleOnChange = useCallback(\n (option: SelectableValue) => {\n return () => {\n if (onChange) {\n onChange(option.value);\n }\n };\n },\n [onChange]\n );\n const handleOnClick = useCallback(\n (option: SelectableValue) => {\n return () => {\n if (onClick) {\n onClick(option.value);\n }\n };\n },\n [onClick]\n );\n\n const internalId = id ?? uniqueId('radiogroup-');\n const groupName = useRef(internalId);\n const styles = useStyles2(getStyles);\n\n const activeButtonRef = useRef(null);\n useEffect(() => {\n if (autoFocus && activeButtonRef.current) {\n activeButtonRef.current.focus();\n }\n }, [autoFocus]);\n\n return (\n \n {options.map((opt, i) => {\n const isItemDisabled = disabledOptions && opt.value && disabledOptions.includes(opt.value);\n const icon = opt.icon ? toIconName(opt.icon) : undefined;\n const hasNonIconPart = Boolean(opt.imgUrl || opt.label || opt.component);\n\n return (\n \n {icon && }\n {opt.imgUrl && {opt.label}}\n {opt.label} {opt.component ? : null}\n \n );\n })}\n \n );\n}\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n radioGroup: css({\n backgroundColor: theme.colors.background.primary,\n display: 'inline-flex',\n flexDirection: 'row',\n flexWrap: 'nowrap',\n border: `1px solid ${theme.components.input.borderColor}`,\n borderRadius: theme.shape.radius.default,\n padding: RADIO_GROUP_PADDING,\n '&:hover': {\n borderColor: theme.components.input.borderHover,\n },\n }),\n fullWidth: css({\n display: 'flex',\n flexGrow: 1,\n }),\n icon: css({\n marginRight: '6px',\n }),\n img: css({\n width: theme.spacing(2),\n height: theme.spacing(2),\n marginRight: theme.spacing(1),\n }),\n invalid: css({\n border: `1px solid ${theme.colors.error.border}`,\n }),\n };\n};\n","import React from 'react';\n\n// Used to tell Input to increase the width properly of the input to fit the text.\n// See comment in Input.tsx for more details\nexport const AutoSizeInputContext = React.createContext(false);\nAutoSizeInputContext.displayName = 'AutoSizeInputContext';\n","import { css, cx } from '@emotion/css';\nimport { forwardRef, HTMLProps, ReactNode, useContext } from 'react';\nimport { useMeasure } from 'react-use';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { stylesFactory } from '../../themes/stylesFactory';\nimport { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles';\nimport { Spinner } from '../Spinner/Spinner';\n\nimport { AutoSizeInputContext } from './AutoSizeInputContext';\n\nexport interface Props extends Omit, 'prefix' | 'size'> {\n /** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/\n width?: number;\n /** Show an invalid state around the input */\n invalid?: boolean;\n /** Show an icon as a prefix in the input */\n prefix?: ReactNode;\n /** Show an icon as a suffix in the input */\n suffix?: ReactNode;\n /** Show a loading indicator as a suffix in the input */\n loading?: boolean;\n /** Add a component as an addon before the input */\n addonBefore?: ReactNode;\n /** Add a component as an addon after the input */\n addonAfter?: ReactNode;\n}\n\ninterface StyleDeps {\n theme: GrafanaTheme2;\n invalid?: boolean;\n width?: number;\n}\n\nexport const Input = forwardRef((props, ref) => {\n const {\n className,\n addonAfter,\n addonBefore,\n prefix,\n suffix: suffixProp,\n invalid,\n loading,\n width = 0,\n ...restProps\n } = props;\n /**\n * Prefix & suffix are positioned absolutely within inputWrapper. We use client rects below to apply correct padding to the input\n * when prefix/suffix is larger than default (28px = 16px(icon) + 12px(left/right paddings)).\n * Thanks to that prefix/suffix do not overflow the input element itself.\n */\n const [prefixRef, prefixRect] = useMeasure();\n const [suffixRef, suffixRect] = useMeasure();\n\n // Yes, this is gross - When Input is being wrapped by AutoSizeInput, add the suffix/prefix width to the overall width\n // so the text content is not clipped. The intention is to make all the input's text appear without overflow/clipping,\n // which isn't normally how width is used in this component.\n // This behaviour is not controlled via a prop so we can limit API surface, and remove this as a 'breaking change' later\n // if a better solution is found.\n const isInAutoSizeInput = useContext(AutoSizeInputContext);\n const accessoriesWidth = (prefixRect.width || 0) + (suffixRect.width || 0);\n const autoSizeWidth = isInAutoSizeInput && width ? width + accessoriesWidth / 8 : undefined;\n\n const theme = useTheme2();\n\n // Don't pass the width prop, as this causes an unnecessary amount of Emotion calls when auto sizing\n const styles = getInputStyles({ theme, invalid: !!invalid, width: autoSizeWidth ? undefined : width });\n\n const suffix = suffixProp || (loading && );\n\n return (\n \n {!!addonBefore &&
{addonBefore}
}\n
\n {prefix && (\n
\n {prefix}\n
\n )}\n\n \n\n {suffix && (\n
\n {suffix}\n
\n )}\n
\n {!!addonAfter &&
{addonAfter}
}\n \n );\n});\n\nInput.displayName = 'Input';\n\nexport const getInputStyles = stylesFactory(({ theme, invalid = false, width }: StyleDeps) => {\n const prefixSuffixStaticWidth = '28px';\n const prefixSuffix = css({\n position: 'absolute',\n top: 0,\n zIndex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexGrow: 0,\n flexShrink: 0,\n fontSize: theme.typography.size.md,\n height: '100%',\n /* Min width specified for prefix/suffix classes used outside React component*/\n minWidth: prefixSuffixStaticWidth,\n color: theme.colors.text.secondary,\n });\n\n return {\n // Wraps inputWrapper and addons\n wrapper: cx(\n css({\n label: 'input-wrapper',\n display: 'flex',\n width: width ? theme.spacing(width) : '100%',\n height: theme.spacing(theme.components.height.md),\n borderRadius: theme.shape.radius.default,\n '&:hover': {\n '> .prefix, .suffix, .input': {\n borderColor: invalid ? theme.colors.error.border : theme.colors.primary.border,\n },\n\n // only show number buttons on hover\n \"input[type='number']\": {\n appearance: 'textfield',\n },\n\n \"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button\": {\n // Need type assertion here due to the use of !important\n // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978\n // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n WebkitAppearance: 'inner-spin-button !important' as 'inner-spin-button',\n opacity: 1,\n },\n },\n })\n ),\n // Wraps input and prefix/suffix\n inputWrapper: css({\n label: 'input-inputWrapper',\n position: 'relative',\n flexGrow: 1,\n /* we want input to be above addons, especially for focused state */\n zIndex: 1,\n\n /* when input rendered with addon before only*/\n '&:not(:first-child):last-child': {\n '> input': {\n borderLeft: 'none',\n borderTopLeftRadius: 'unset',\n borderBottomLeftRadius: 'unset',\n },\n },\n\n /* when input rendered with addon after only*/\n '&:first-child:not(:last-child)': {\n '> input': {\n borderRight: 'none',\n borderTopRightRadius: 'unset',\n borderBottomRightRadius: 'unset',\n },\n },\n\n /* when rendered with addon before and after */\n '&:not(:first-child):not(:last-child)': {\n '> input': {\n borderRight: 'none',\n borderTopRightRadius: 'unset',\n borderBottomRightRadius: 'unset',\n borderTopLeftRadius: 'unset',\n borderBottomLeftRadius: 'unset',\n },\n },\n\n input: {\n /* paddings specified for classes used outside React component */\n '&:not(:first-child)': {\n paddingLeft: prefixSuffixStaticWidth,\n },\n '&:not(:last-child)': {\n paddingRight: prefixSuffixStaticWidth,\n },\n '&[readonly]': {\n cursor: 'default',\n },\n },\n }),\n\n input: cx(\n getFocusStyle(theme),\n sharedInputStyle(theme, invalid),\n css({\n label: 'input-input',\n position: 'relative',\n zIndex: 0,\n flexGrow: 1,\n borderRadius: theme.shape.radius.default,\n height: '100%',\n width: '100%',\n })\n ),\n inputDisabled: css({\n backgroundColor: theme.colors.action.disabledBackground,\n color: theme.colors.action.disabledText,\n border: `1px solid ${theme.colors.action.disabledBackground}`,\n '&:focus': {\n boxShadow: 'none',\n },\n }),\n addon: css({\n label: 'input-addon',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexGrow: 0,\n flexShrink: 0,\n position: 'relative',\n\n '&:first-child': {\n borderTopRightRadius: 'unset',\n borderBottomRightRadius: 'unset',\n '> :last-child': {\n borderTopRightRadius: 'unset',\n borderBottomRightRadius: 'unset',\n },\n },\n\n '&:last-child': {\n borderTopLeftRadius: 'unset',\n borderBottomLeftRadius: 'unset',\n '> :first-child': {\n borderTopLeftRadius: 'unset',\n borderBottomLeftRadius: 'unset',\n },\n },\n '> *:focus': {\n /* we want anything that has focus and is an addon to be above input */\n zIndex: 2,\n },\n }),\n prefix: cx(\n prefixSuffix,\n css({\n label: 'input-prefix',\n paddingLeft: theme.spacing(1),\n paddingRight: theme.spacing(0.5),\n borderRight: 'none',\n borderTopRightRadius: 'unset',\n borderBottomRightRadius: 'unset',\n })\n ),\n suffix: cx(\n prefixSuffix,\n css({\n label: 'input-suffix',\n paddingLeft: theme.spacing(1),\n paddingRight: theme.spacing(1),\n borderLeft: 'none',\n borderTopLeftRadius: 'unset',\n borderBottomLeftRadius: 'unset',\n right: 0,\n })\n ),\n loadingIndicator: css({\n '& + *': {\n marginLeft: theme.spacing(0.5),\n },\n }),\n };\n});\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { AlignItems, Direction, FlexProps, JustifyContent, Wrap } from '../types';\nimport { ResponsiveProp, getResponsiveStyle } from '../utils/responsiveness';\nimport { getSizeStyles, SizeProps } from '../utils/styles';\n\ninterface StackProps extends FlexProps, SizeProps, Omit, 'className' | 'style'> {\n gap?: ResponsiveProp;\n rowGap?: ResponsiveProp;\n columnGap?: ResponsiveProp;\n alignItems?: ResponsiveProp;\n justifyContent?: ResponsiveProp;\n direction?: ResponsiveProp;\n wrap?: ResponsiveProp;\n children?: React.ReactNode;\n}\n\nexport const Stack = React.forwardRef((props, ref) => {\n const {\n gap = 1,\n rowGap,\n columnGap,\n alignItems,\n justifyContent,\n direction,\n wrap,\n children,\n grow,\n shrink,\n basis,\n flex,\n width,\n minWidth,\n maxWidth,\n height,\n minHeight,\n maxHeight,\n ...rest\n } = props;\n const styles = useStyles2(\n getStyles,\n gap,\n rowGap,\n columnGap,\n alignItems,\n justifyContent,\n direction,\n wrap,\n grow,\n shrink,\n basis,\n flex\n );\n const sizeStyles = useStyles2(getSizeStyles, width, minWidth, maxWidth, height, minHeight, maxHeight);\n return (\n
\n {children}\n
\n );\n});\n\nStack.displayName = 'Stack';\n\nconst getStyles = (\n theme: GrafanaTheme2,\n gap: StackProps['gap'],\n rowGap: StackProps['rowGap'],\n columnGap: StackProps['columnGap'],\n alignItems: StackProps['alignItems'],\n justifyContent: StackProps['justifyContent'],\n direction: StackProps['direction'],\n wrap: StackProps['wrap'],\n grow: StackProps['grow'],\n shrink: StackProps['shrink'],\n basis: StackProps['basis'],\n flex: StackProps['flex']\n) => {\n return {\n flex: css([\n {\n display: 'flex',\n },\n getResponsiveStyle(theme, direction, (val) => ({\n flexDirection: val,\n })),\n getResponsiveStyle(theme, wrap, (val) => ({\n flexWrap: typeof val === 'boolean' ? (val ? 'wrap' : 'nowrap') : val,\n })),\n getResponsiveStyle(theme, alignItems, (val) => ({\n alignItems: val,\n })),\n getResponsiveStyle(theme, justifyContent, (val) => ({\n justifyContent: val,\n })),\n getResponsiveStyle(theme, gap, (val) => ({\n gap: theme.spacing(val),\n })),\n getResponsiveStyle(theme, rowGap, (val) => ({\n rowGap: theme.spacing(val),\n })),\n getResponsiveStyle(theme, columnGap, (val) => ({\n columnGap: theme.spacing(val),\n })),\n getResponsiveStyle(theme, grow, (val) => ({\n flexGrow: val,\n })),\n getResponsiveStyle(theme, shrink, (val) => ({\n flexShrink: val,\n })),\n getResponsiveStyle(theme, basis, (val) => ({\n flexBasis: val,\n })),\n getResponsiveStyle(theme, flex, (val) => ({\n flex: val,\n })),\n ]),\n };\n};\n","import { components, InputProps } from 'react-select';\n\n/**\n * Custom input component for react-select to add data-testid attribute\n */\nexport const CustomInput = (props: InputProps) => {\n let testId;\n\n if ('data-testid' in props.selectProps && props.selectProps['data-testid']) {\n testId = props.selectProps['data-testid'] + '-input';\n }\n\n return ;\n};\n","import { DropdownIndicatorProps } from 'react-select';\n\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\n\nexport function DropdownIndicator({ selectProps }: DropdownIndicatorProps) {\n const isOpen = selectProps.menuIsOpen;\n const icon = isOpen ? 'search' : 'angle-down';\n const size = 'md';\n\n if (selectProps.isLoading) {\n return ;\n }\n\n return ;\n}\n","import { cx, css } from '@emotion/css';\nimport { forwardRef } from 'react';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { getInputStyles } from '../Input/Input';\n\nexport const IndicatorsContainer = forwardRef((props, ref) => {\n const { children } = props;\n const theme = useTheme2();\n const styles = getInputStyles({ theme, invalid: false });\n\n return (\n \n {children}\n \n );\n});\n\nIndicatorsContainer.displayName = 'IndicatorsContainer';\n","import { css, cx } from '@emotion/css';\nimport { forwardRef } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { inputPadding } from '../Forms/commonStyles';\nimport { getInputStyles } from '../Input/Input';\n\ninterface InputControlProps {\n /** Show an icon as a prefix in the input */\n prefix?: JSX.Element | string | null;\n focused: boolean;\n invalid: boolean;\n disabled: boolean;\n innerProps: JSX.IntrinsicElements['div'];\n}\n\nexport const InputControl = forwardRef>(\n function InputControl({ focused, invalid, disabled, children, innerProps, prefix, ...otherProps }, ref) {\n const styles = useStyles2(getInputControlStyles, invalid, !!prefix);\n\n return (\n
\n {prefix &&
{prefix}
}\n {children}\n
\n );\n }\n);\n\nconst getInputControlStyles = (theme: GrafanaTheme2, invalid: boolean, withPrefix: boolean) => {\n const styles = getInputStyles({ theme, invalid });\n\n return {\n input: cx(\n inputPadding(theme),\n css({\n width: '100%',\n maxWidth: '100%',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n paddingRight: 0,\n position: 'relative',\n boxSizing: 'border-box',\n }),\n withPrefix &&\n css({\n paddingLeft: 0,\n })\n ),\n prefix: cx(\n styles.prefix,\n css({\n position: 'relative',\n })\n ),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, colorManipulator, deprecationWarning } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { IconName, IconSize, IconType } from '../../types/icon';\nimport { ComponentSize } from '../../types/size';\nimport { IconRenderer } from '../Button/Button';\nimport { getSvgSize } from '../Icon/utils';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent, TooltipPlacement } from '../Tooltip/types';\n\nexport type IconButtonVariant = 'primary' | 'secondary' | 'destructive';\n\ntype LimitedIconSize = ComponentSize | 'xl';\n\ninterface BaseProps extends Omit, 'aria-label'> {\n /** Name of the icon **/\n name: IconName;\n /** Icon size - sizes xxl and xxxl are deprecated and when used being decreased to xl*/\n size?: IconSize;\n /** Type of the icon - mono or default */\n iconType?: IconType;\n /** Variant to change the color of the Icon */\n variant?: IconButtonVariant;\n}\n\nexport interface BasePropsWithTooltip extends BaseProps {\n /** Tooltip content to display on hover and as the aria-label */\n tooltip: PopoverContent;\n /** Position of the tooltip */\n tooltipPlacement?: TooltipPlacement;\n}\n\ninterface BasePropsWithAriaLabel extends BaseProps {\n /** @deprecated use aria-label instead*/\n ariaLabel?: string;\n /** Text available only for screen readers. No tooltip will be set in this case. */\n ['aria-label']: string;\n}\n\nexport type Props = BasePropsWithTooltip | BasePropsWithAriaLabel;\n\nexport const IconButton = React.forwardRef((props, ref) => {\n const { size = 'md', variant = 'secondary' } = props;\n let limitedIconSize: LimitedIconSize;\n\n // very large icons (xl to xxxl) are unified to size xl\n if (size === 'xxl' || size === 'xxxl') {\n deprecationWarning('IconButton', 'size=\"xxl\" and size=\"xxxl\"', 'size=\"xl\"');\n limitedIconSize = 'xl';\n } else {\n limitedIconSize = size;\n }\n\n const styles = useStyles2(getStyles, limitedIconSize, variant);\n\n let ariaLabel: string | undefined;\n let buttonRef: typeof ref | undefined;\n\n if ('tooltip' in props) {\n const { tooltip } = props;\n ariaLabel = typeof tooltip === 'string' ? tooltip : undefined;\n } else if ('ariaLabel' in props || 'aria-label' in props) {\n const { ariaLabel: deprecatedAriaLabel, ['aria-label']: ariaLabelProp } = props;\n ariaLabel = ariaLabelProp || deprecatedAriaLabel;\n buttonRef = ref;\n }\n\n // When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632\n if ('tooltip' in props) {\n const { name, iconType, className, tooltip, tooltipPlacement, ...restProps } = props;\n return (\n \n \n \n \n \n );\n } else {\n const { name, iconType, className, ...restProps } = props;\n return (\n \n \n \n );\n }\n});\n\nIconButton.displayName = 'IconButton';\n\nconst getStyles = (theme: GrafanaTheme2, size: IconSize, variant: IconButtonVariant) => {\n // overall size of the IconButton on hover\n // theme.spacing.gridSize originates from 2*4px for padding and letting the IconSize generally decide on the hoverSize\n const hoverSize = getSvgSize(size) + theme.spacing.gridSize;\n\n let iconColor = theme.colors.text.primary;\n\n if (variant === 'primary') {\n iconColor = theme.colors.primary.text;\n } else if (variant === 'destructive') {\n iconColor = theme.colors.error.text;\n }\n\n return {\n button: css({\n zIndex: 0,\n position: 'relative',\n margin: `0 ${theme.spacing.x0_5} 0 0`,\n boxShadow: 'none',\n border: 'none',\n display: 'inline-flex',\n background: 'transparent',\n justifyContent: 'center',\n alignItems: 'center',\n padding: 0,\n color: iconColor,\n\n '&[disabled], &:disabled': {\n cursor: 'not-allowed',\n color: theme.colors.action.disabledText,\n opacity: 0.65,\n },\n\n '&:before': {\n zIndex: -1,\n position: 'absolute',\n opacity: 0,\n width: `${hoverSize}px`,\n height: `${hoverSize}px`,\n borderRadius: theme.shape.radius.default,\n content: '\"\"',\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transitionDuration: '0.2s',\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\n transitionProperty: 'opacity',\n },\n },\n\n '&:focus, &:focus-visible': getFocusStyles(theme),\n\n '&:focus:not(:focus-visible)': getMouseFocusStyles(theme),\n\n '&:hover': {\n '&:before': {\n backgroundColor:\n variant === 'secondary' ? theme.colors.action.hover : colorManipulator.alpha(iconColor, 0.12),\n opacity: 1,\n },\n },\n }),\n icon: css({\n verticalAlign: 'baseline',\n }),\n };\n};\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { stylesFactory } from '../../themes/stylesFactory';\n\nexport const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {\n return {\n menu: css({\n label: 'grafana-select-menu',\n background: theme.components.dropdown.background,\n borderRadius: theme.shape.radius.default,\n boxShadow: theme.shadows.z3,\n position: 'relative',\n minWidth: '100%',\n overflow: 'hidden',\n zIndex: 1,\n }),\n option: css({\n label: 'grafana-select-option',\n padding: '8px',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'row',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n borderLeft: '2px solid transparent',\n borderRadius: theme.shape.radius.default,\n\n '&:hover': {\n background: theme.colors.action.hover,\n '@media (forced-colors: active), (prefers-contrast: more)': {\n border: `1px solid ${theme.colors.primary.border}`,\n },\n },\n }),\n optionIcon: css({\n marginRight: theme.spacing(1),\n }),\n optionImage: css({\n label: 'grafana-select-option-image',\n width: '16px',\n marginRight: '10px',\n }),\n optionDescription: css({\n label: 'grafana-select-option-description',\n fontWeight: 'normal',\n fontSize: theme.typography.size.sm,\n color: theme.colors.text.secondary,\n whiteSpace: 'normal',\n lineHeight: theme.typography.body.lineHeight,\n }),\n optionBody: css({\n label: 'grafana-select-option-body',\n display: 'flex',\n fontWeight: theme.typography.fontWeightMedium,\n flexDirection: 'column',\n flexGrow: 1,\n }),\n optionFocused: css({\n label: 'grafana-select-option-focused',\n background: theme.colors.action.focus,\n '@media (forced-colors: active), (prefers-contrast: more)': {\n border: `1px solid ${theme.colors.primary.border}`,\n },\n }),\n optionSelected: css({\n background: theme.colors.action.selected,\n '&::before': {\n backgroundImage: theme.colors.gradients.brandVertical,\n borderRadius: theme.shape.radius.default,\n content: '\" \"',\n display: 'block',\n height: '100%',\n position: 'absolute',\n transform: 'translateX(-50%)',\n width: theme.spacing(0.5),\n left: 0,\n },\n }),\n optionDisabled: css({\n label: 'grafana-select-option-disabled',\n backgroundColor: theme.colors.action.disabledBackground,\n color: theme.colors.action.disabledText,\n cursor: 'not-allowed',\n }),\n singleValue: css({\n label: 'grafana-select-single-value',\n color: theme.components.input.text,\n gridArea: '1 / 1 / 2 / 3',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n boxSizing: 'border-box',\n maxWidth: '100%',\n }),\n valueContainer: css({\n label: 'grafana-select-value-container',\n alignItems: 'center',\n display: 'grid',\n position: 'relative',\n boxSizing: 'border-box',\n flex: '1 1 0%',\n outline: 'none',\n overflow: 'hidden',\n }),\n valueContainerMulti: css({\n label: 'grafana-select-value-container-multi',\n flexWrap: 'wrap',\n display: 'flex',\n }),\n valueContainerMultiNoWrap: css({\n display: 'grid',\n gridAutoFlow: 'column',\n }),\n loadingMessage: css({\n label: 'grafana-select-loading-message',\n padding: theme.spacing(1),\n textAlign: 'center',\n width: '100%',\n }),\n multiValueContainer: css({\n label: 'grafana-select-multi-value-container',\n display: 'flex',\n alignItems: 'center',\n lineHeight: 1,\n background: theme.colors.background.secondary,\n borderRadius: theme.shape.radius.default,\n margin: theme.spacing(0.25, 1, 0.25, 0),\n padding: theme.spacing(0.25, 0, 0.25, 1),\n color: theme.colors.text.primary,\n fontSize: theme.typography.size.sm,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n\n '&:hover': {\n background: theme.colors.emphasize(theme.colors.background.secondary),\n },\n }),\n multiValueRemove: css({\n label: 'grafana-select-multi-value-remove',\n margin: theme.spacing(0, 0.5),\n cursor: 'pointer',\n svg: {\n marginBottom: 0,\n },\n }),\n singleValueRemove: css({\n cursor: 'pointer',\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n groupHeader: css({\n padding: theme.spacing(1, 1, 1, 0.75),\n borderLeft: '2px solid transparent',\n }),\n group: css({\n '&:not(:first-child)': {\n borderTop: `1px solid ${theme.colors.border.weak}`,\n },\n // ensure there's a bottom border if there are options following the group\n ':has(+ [role=\"option\"])': {\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n },\n }),\n toggleAllButton: css({\n width: '100%',\n border: 0,\n padding: 0,\n textAlign: 'left',\n }),\n };\n});\n","import * as React from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { IconButton, Props as IconButtonProps } from '../IconButton/IconButton';\n\nimport { getSelectStyles } from './getSelectStyles';\n\ninterface MultiValueContainerProps {\n innerProps: JSX.IntrinsicElements['div'];\n}\n\nexport const MultiValueContainer = ({ innerProps, children }: React.PropsWithChildren) => {\n const theme = useTheme2();\n const styles = getSelectStyles(theme);\n\n return (\n
\n {children}\n
\n );\n};\n\nexport type MultiValueRemoveProps = {\n innerProps: IconButtonProps;\n};\n\nexport const MultiValueRemove = ({ children, innerProps }: React.PropsWithChildren) => {\n const theme = useTheme2();\n const styles = getSelectStyles(theme);\n return (\n \n );\n};\n","import { css, cx } from '@emotion/css';\nimport { components, ContainerProps as BaseContainerProps, GroupBase } from 'react-select';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { sharedInputStyle } from '../Forms/commonStyles';\nimport { getInputStyles } from '../Input/Input';\n\nimport { CustomComponentProps } from './types';\n\n// prettier-ignore\nexport type SelectContainerProps> =\n BaseContainerProps & CustomComponentProps;\n\nexport const SelectContainer = >(\n props: SelectContainerProps\n) => {\n const {\n isDisabled,\n isFocused,\n children,\n selectProps: { invalid = false },\n } = props;\n\n const styles = useStyles2(getSelectContainerStyles, isFocused, isDisabled, invalid);\n\n return (\n \n {children}\n \n );\n};\n\nconst getSelectContainerStyles = (theme: GrafanaTheme2, focused: boolean, disabled: boolean, invalid: boolean) => {\n const styles = getInputStyles({ theme, invalid });\n\n return {\n wrapper: cx(\n styles.wrapper,\n sharedInputStyle(theme, invalid),\n focused && css(getFocusStyles(theme)),\n disabled && styles.inputDisabled,\n css({\n position: 'relative',\n boxSizing: 'border-box',\n /* The display property is set by the styles prop in SelectBase because it's dependant on the width prop */\n flexDirection: 'row',\n flexWrap: 'wrap',\n alignItems: 'stretch',\n justifyContent: 'space-between',\n minHeight: theme.spacing(theme.components.height.md),\n height: 'auto',\n maxWidth: '100%',\n\n /* Input padding is applied to the InputControl so the menu is aligned correctly */\n padding: 0,\n cursor: disabled ? 'not-allowed' : 'pointer',\n })\n ),\n };\n};\n","import * as React from 'react';\nimport {\n ActionMeta as SelectActionMeta,\n CommonProps as ReactSelectCommonProps,\n GroupBase,\n OptionsOrGroups,\n} from 'react-select';\n\nimport { SelectableValue } from '@grafana/data';\n\nexport type SelectValue = T | SelectableValue | T[] | Array>;\nexport type ActionMeta = SelectActionMeta<{}>;\nexport type InputActionMeta = {\n action: 'set-value' | 'input-change' | 'input-blur' | 'menu-close';\n};\nexport type LoadOptionsCallback = (options: Array>) => void;\n\nexport enum ToggleAllState {\n allSelected = 'allSelected',\n indeterminate = 'indeterminate',\n noneSelected = 'noneSelected',\n}\n\nexport interface SelectCommonProps {\n /** Aria label applied to the input field */\n ['aria-label']?: string;\n ['data-testid']?: string;\n allowCreateWhileLoading?: boolean;\n allowCustomValue?: boolean;\n /** Focus is set to the Select when rendered*/\n autoFocus?: boolean;\n backspaceRemovesValue?: boolean;\n blurInputOnSelect?: boolean;\n captureMenuScroll?: boolean;\n className?: string;\n closeMenuOnSelect?: boolean;\n /** Used for custom components. For more information, see `react-select` */\n components?: any;\n /** Sets the position of the createOption element in your options list. Defaults to 'last' */\n createOptionPosition?: 'first' | 'last';\n defaultValue?: any;\n disabled?: boolean;\n filterOption?: (option: SelectableValue, searchQuery: string) => boolean;\n formatOptionLabel?: (item: SelectableValue, formatOptionMeta: FormatOptionLabelMeta) => React.ReactNode;\n /** Function for formatting the text that is displayed when creating a new value*/\n formatCreateLabel?: (input: string) => React.ReactNode;\n getOptionLabel?: (item: SelectableValue) => React.ReactNode;\n getOptionValue?: (item: SelectableValue) => T | undefined;\n hideSelectedOptions?: boolean;\n inputValue?: string;\n invalid?: boolean;\n isClearable?: boolean;\n /** The id to set on the SelectContainer component. To set the id for a label (with htmlFor), @see inputId instead */\n id?: string;\n isLoading?: boolean;\n isMulti?: boolean;\n /** The id of the search input. Use this to set a matching label with htmlFor */\n inputId?: string;\n isOpen?: boolean;\n /** Disables the possibility to type into the input*/\n isSearchable?: boolean;\n showAllSelectedWhenOpen?: boolean;\n maxMenuHeight?: number;\n minMenuHeight?: number;\n maxVisibleValues?: number;\n menuPlacement?: 'auto' | 'bottom' | 'top';\n menuPosition?: 'fixed' | 'absolute';\n /**\n * Setting to false will prevent the menu from portalling to the body.\n */\n menuShouldPortal?: boolean;\n /** The message to display when no options could be found */\n noOptionsMessage?: string;\n onBlur?: () => void;\n onChange: (value: SelectableValue, actionMeta: ActionMeta) => {} | void;\n onCloseMenu?: () => void;\n /** allowCustomValue must be enabled. Function decides what to do with that custom value. */\n onCreateOption?: (value: string) => void;\n onInputChange?: (value: string, actionMeta: InputActionMeta) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n /** Callback which fires when the user scrolls to the bottom of the menu */\n onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;\n /** Callback which fires when the user scrolls to the top of the menu */\n onMenuScrollToTop?: (event: WheelEvent | TouchEvent) => void;\n onOpenMenu?: () => void;\n onFocus?: () => void;\n toggleAllOptions?: {\n enabled: boolean;\n optionsFilter?: (v: SelectableValue) => boolean;\n determineToggleAllState?: (\n selectedValues: Array>,\n options: Array>\n ) => ToggleAllState;\n };\n openMenuOnFocus?: boolean;\n options?: Array>;\n placeholder?: string;\n /** item to be rendered in front of the input */\n prefix?: JSX.Element | string | null;\n /** Use a custom element to control Select. A proper ref to the renderControl is needed if 'portal' isn't set to null*/\n renderControl?: ControlComponent;\n tabSelectsValue?: boolean;\n value?: T | SelectValue | null;\n /** Will wrap the MenuList in a react-window FixedSizeVirtualList for improved performance, does not support options with \"description\" properties */\n virtualized?: boolean;\n /** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/\n width?: number | 'auto';\n isOptionDisabled?: (option: SelectableValue) => boolean;\n /** allowCustomValue must be enabled. Determines whether the \"create new\" option should be displayed based on the current input value, select value and options array. */\n isValidNewOption?: (\n inputValue: string,\n value: SelectableValue | null,\n options: OptionsOrGroups, GroupBase>>\n ) => boolean;\n /** Message to display isLoading=true*/\n loadingMessage?: string;\n /** Disables wrapping of multi value values when closed */\n noMultiValueWrap?: boolean;\n /** Use a custom ref because generic component as output of React.forwardRef is not directly possible */\n selectRef?: React.Ref;\n}\n\nexport interface SelectAsyncProps {\n /** When specified as boolean the loadOptions will execute when component is mounted */\n defaultOptions?: boolean | Array>;\n\n /** Asynchronously load select options */\n loadOptions?: (query: string, cb?: LoadOptionsCallback) => Promise>> | void;\n\n /** If cacheOptions is true, then the loaded data will be cached. The cache will remain until cacheOptions changes value. */\n cacheOptions?: boolean;\n /** Message to display when options are loading */\n loadingMessage?: string;\n}\n\n/** The VirtualizedSelect component uses a slightly different SelectableValue, description and other props are not supported */\nexport interface VirtualizedSelectProps extends Omit, 'virtualized'> {\n options?: Array, 'label' | 'value'>>;\n}\n\n/** The AsyncVirtualizedSelect component uses a slightly different SelectableValue, description and other props are not supported */\nexport interface VirtualizedSelectAsyncProps\n extends Omit, 'virtualized'>,\n SelectAsyncProps {}\n\nexport interface MultiSelectCommonProps extends Omit, 'onChange' | 'isMulti' | 'value'> {\n value?: Array> | T[];\n onChange: (item: Array>, actionMeta: ActionMeta) => {} | void;\n}\n\n// This is the type of *our* SelectBase component, not ReactSelect's prop, although\n// they should be mostly compatible.\nexport interface SelectBaseProps extends SelectCommonProps, SelectAsyncProps {\n invalid?: boolean;\n}\n\n// This is used for the `renderControl` prop on *our* SelectBase component\nexport interface CustomControlProps {\n ref: React.Ref;\n isOpen: boolean;\n /** Currently selected value */\n value?: SelectableValue;\n /** onClick will be automatically passed to custom control allowing menu toggle */\n onClick: () => void;\n /** onBlur will be automatically passed to custom control closing the menu on element blur */\n onBlur: () => void;\n disabled: boolean;\n invalid: boolean;\n}\n\nexport type ControlComponent = React.ComponentType>;\n\nexport interface SelectableOptGroup {\n label: string;\n options: Array>;\n\n [key: string]: any;\n}\n\nexport type SelectOptions =\n | SelectableValue\n | Array | SelectableOptGroup | Array>>;\n\nexport type FormatOptionLabelMeta = { context: string; inputValue: string; selectValue: Array> };\n\n// This is the type of `selectProps` our custom components (like SelectContainer, etc) recieve\n// It's slightly different to the base react select props because we pass in additional props directly to\n// react select\nexport type ReactSelectProps> = ReactSelectCommonProps<\n Option,\n IsMulti,\n Group\n>['selectProps'] &\n SelectCommonProps\n ) : undefined;\n}\n","import { css, cx } from '@emotion/css';\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n} from '@floating-ui/react';\nimport { Placement } from '@popperjs/core';\nimport { memo, cloneElement, isValidElement, useRef, useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { buildTooltipTheme, getPlacement } from '../../utils/tooltipUtils';\nimport { IconButton } from '../IconButton/IconButton';\n\nimport { ToggletipContent } from './types';\n\nexport interface ToggletipProps {\n /** The theme used to display the toggletip */\n theme?: 'info' | 'error';\n /** The title to be displayed on the header */\n title?: JSX.Element | string;\n /** determine whether to show or not the close button **/\n closeButton?: boolean;\n /** Callback function to be called when the toggletip is closed */\n onClose?: () => void;\n /** The preferred placement of the toggletip */\n placement?: Placement;\n /** The text or component that houses the content of the toggleltip */\n content: ToggletipContent;\n /** The text or component to be displayed on the toggletip's bottom */\n footer?: JSX.Element | string;\n /** The UI control users interact with to display toggletips */\n children: JSX.Element;\n /** Determine whether the toggletip should fit its content or not */\n fitContent?: boolean;\n /** Determine whether the toggletip should be shown or not */\n show?: boolean;\n /** Callback function to be called when the toggletip is opened */\n onOpen?: () => void;\n}\n\nexport const Toggletip = memo(\n ({\n children,\n theme = 'info',\n placement = 'auto',\n content,\n title,\n closeButton = true,\n onClose,\n footer,\n fitContent = false,\n onOpen,\n show,\n }: ToggletipProps) => {\n const arrowRef = useRef(null);\n const grafanaTheme = useTheme2();\n const styles = useStyles2(getStyles);\n const style = styles[theme];\n const [controlledVisible, setControlledVisible] = useState(show);\n const isOpen = show ?? controlledVisible;\n\n // the order of middleware is important!\n // `arrow` should almost always be at the end\n // see https://floating-ui.com/docs/arrow#order\n const middleware = [\n offset(8),\n flip({\n fallbackAxisSideDirection: 'end',\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n arrow({\n element: arrowRef,\n }),\n ];\n\n const { context, refs, floatingStyles } = useFloating({\n open: isOpen,\n placement: getPlacement(placement),\n onOpenChange: (open) => {\n if (show === undefined) {\n setControlledVisible(open);\n }\n if (!open) {\n onClose?.();\n } else {\n onOpen?.();\n }\n },\n middleware,\n whileElementsMounted: autoUpdate,\n strategy: 'fixed',\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);\n\n return (\n <>\n {cloneElement(children, {\n ref: refs.setReference,\n tabIndex: 0,\n 'aria-expanded': isOpen,\n ...getReferenceProps(),\n })}\n {isOpen && (\n \n \n \n {Boolean(title) &&
{title}
}\n {closeButton && (\n
\n {\n setControlledVisible(false);\n onClose?.();\n }}\n />\n
\n )}\n
\n {(typeof content === 'string' || isValidElement(content)) && content}\n {typeof content === 'function' && content({})}\n
\n {Boolean(footer) &&
{footer}
}\n \n \n )}\n \n );\n }\n);\n\nToggletip.displayName = 'Toggletip';\n\nexport const getStyles = (theme: GrafanaTheme2) => {\n const info = buildTooltipTheme(\n theme,\n theme.colors.background.primary,\n theme.colors.border.weak,\n theme.components.tooltip.text,\n { topBottom: 2, rightLeft: 2 }\n );\n const error = buildTooltipTheme(\n theme,\n theme.colors.error.main,\n theme.colors.error.main,\n theme.colors.error.contrastText,\n { topBottom: 2, rightLeft: 2 }\n );\n\n return {\n info,\n error,\n fitContent: css({\n maxWidth: 'fit-content',\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {\n const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false);\n const [showScrollBottomIndicator, setShowBottomScrollIndicator] = useState(false);\n const scrollTopMarker = useRef(null);\n const scrollBottomMarker = useRef(null);\n const styles = useStyles2(getStyles);\n\n // Here we observe the top and bottom markers to determine if we should show the scroll indicators\n useEffect(() => {\n const intersectionObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === scrollTopMarker.current) {\n setShowTopScrollIndicator(!entry.isIntersecting);\n } else if (entry.target === scrollBottomMarker.current) {\n setShowBottomScrollIndicator(!entry.isIntersecting);\n }\n });\n });\n [scrollTopMarker, scrollBottomMarker].forEach((ref) => {\n if (ref.current) {\n intersectionObserver.observe(ref.current);\n }\n });\n return () => intersectionObserver.disconnect();\n }, []);\n\n return (\n <>\n \n
\n
\n {children}\n
\n
\n \n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n scrollContent: css({\n flex: 1,\n position: 'relative',\n }),\n scrollIndicator: css({\n height: theme.spacing(6),\n left: 0,\n opacity: 0,\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: theme.transitions.create('opacity'),\n },\n zIndex: 1,\n }),\n scrollTopIndicator: css({\n background: `linear-gradient(0deg, transparent, ${theme.colors.background.canvas})`,\n top: 0,\n }),\n scrollBottomIndicator: css({\n background: `linear-gradient(180deg, transparent, ${theme.colors.background.canvas})`,\n bottom: 0,\n }),\n scrollIndicatorVisible: css({\n opacity: 1,\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { RefCallback, useCallback, useEffect, useRef } from 'react';\nimport * as React from 'react';\nimport Scrollbars, { positionValues } from 'react-custom-scrollbars-2';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { ScrollIndicators } from './ScrollIndicators';\n\nexport type ScrollbarPosition = positionValues;\n\ninterface Props {\n className?: string;\n testId?: string;\n autoHide?: boolean;\n autoHideTimeout?: number;\n autoHeightMax?: string;\n hideTracksWhenNotNeeded?: boolean;\n hideHorizontalTrack?: boolean;\n hideVerticalTrack?: boolean;\n scrollRefCallback?: RefCallback;\n scrollTop?: number;\n setScrollTop?: (position: ScrollbarPosition) => void;\n showScrollIndicators?: boolean;\n autoHeightMin?: number | string;\n updateAfterMountMs?: number;\n onScroll?: React.UIEventHandler;\n divId?: string;\n}\n\n/**\n * Wraps component into component from `react-custom-scrollbars`\n * @deprecated Use `ScrollContainer` from `@grafana/ui` instead. It uses native scrollbars and has a simpler API.\n */\nexport const CustomScrollbar = ({\n autoHide = false,\n autoHideTimeout = 200,\n setScrollTop,\n className,\n testId,\n autoHeightMin = '0',\n autoHeightMax = '100%',\n hideTracksWhenNotNeeded = false,\n hideHorizontalTrack,\n hideVerticalTrack,\n scrollRefCallback,\n showScrollIndicators = false,\n updateAfterMountMs,\n scrollTop,\n onScroll,\n children,\n divId,\n}: React.PropsWithChildren) => {\n const ref = useRef void }>(null);\n const styles = useStyles2(getStyles);\n\n useEffect(() => {\n if (ref.current && scrollRefCallback) {\n scrollRefCallback(ref.current.view);\n }\n }, [ref, scrollRefCallback]);\n\n useScrollTop(ref.current, scrollTop);\n\n /**\n * Special logic for doing a update a few milliseconds after mount to check for\n * updated height due to dynamic content\n */\n useEffect(() => {\n if (!updateAfterMountMs) {\n return;\n }\n setTimeout(() => {\n const scrollbar = ref.current;\n if (scrollbar?.update) {\n scrollbar.update();\n }\n }, updateAfterMountMs);\n }, [updateAfterMountMs]);\n\n function renderTrack(className: string, hideTrack: boolean | undefined, passedProps: JSX.IntrinsicElements['div']) {\n if (passedProps.style && hideTrack) {\n passedProps.style.display = 'none';\n }\n\n return
;\n }\n\n const renderTrackHorizontal = useCallback(\n (passedProps: JSX.IntrinsicElements['div']) => {\n return renderTrack('track-horizontal', hideHorizontalTrack, passedProps);\n },\n [hideHorizontalTrack]\n );\n\n const renderTrackVertical = useCallback(\n (passedProps: JSX.IntrinsicElements['div']) => {\n return renderTrack('track-vertical', hideVerticalTrack, passedProps);\n },\n [hideVerticalTrack]\n );\n\n const renderThumbHorizontal = useCallback((passedProps: JSX.IntrinsicElements['div']) => {\n return
;\n }, []);\n\n const renderThumbVertical = useCallback((passedProps: JSX.IntrinsicElements['div']) => {\n return
;\n }, []);\n\n const renderView = useCallback(\n (passedProps: JSX.IntrinsicElements['div']) => {\n // fixes issues of visibility on safari and ios devices\n if (passedProps.style && passedProps.style['WebkitOverflowScrolling'] === 'touch') {\n passedProps.style['WebkitOverflowScrolling'] = 'auto';\n }\n\n return
;\n },\n [divId]\n );\n\n const onScrollStop = useCallback(() => {\n ref.current && setScrollTop && setScrollTop(ref.current.getValues());\n }, [setScrollTop]);\n\n return (\n \n {showScrollIndicators ? {children} : children}\n \n );\n};\n\nexport default CustomScrollbar;\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n customScrollbar: css({\n // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to\n // make scroll working it should fit outer container size (scroll appears only when inner container size is\n // greater than outer one).\n display: 'flex',\n flexGrow: 1,\n '.scrollbar-view': {\n display: 'flex',\n flexGrow: 1,\n flexDirection: 'column',\n },\n '.track-vertical': {\n borderRadius: theme.shape.borderRadius(2),\n width: `${theme.spacing(1)} !important`,\n right: 0,\n bottom: theme.spacing(0.25),\n top: theme.spacing(0.25),\n },\n '.track-horizontal': {\n borderRadius: theme.shape.borderRadius(2),\n height: `${theme.spacing(1)} !important`,\n right: theme.spacing(0.25),\n bottom: theme.spacing(0.25),\n left: theme.spacing(0.25),\n },\n '.thumb-vertical': {\n background: theme.colors.action.focus,\n borderRadius: theme.shape.borderRadius(2),\n opacity: 0,\n },\n '.thumb-horizontal': {\n background: theme.colors.action.focus,\n borderRadius: theme.shape.borderRadius(2),\n opacity: 0,\n },\n '&:hover': {\n '.thumb-vertical, .thumb-horizontal': {\n opacity: 1,\n transition: 'opacity 0.3s ease-in-out',\n },\n },\n }),\n // override the scroll container position so that the scroll indicators\n // are positioned at the top and bottom correctly.\n // react-custom-scrollbars doesn't provide any way for us to hook in nicely,\n // so we have to override with !important. feelsbad.\n scrollbarWithScrollIndicators: css({\n '.scrollbar-view': {\n // Need type assertion here due to the use of !important\n // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978\n // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n position: 'static !important' as 'static',\n },\n }),\n };\n};\n\n/**\n * Calling scrollTop on a scrollbar ref in a useEffect can race with internal state in react-custom-scrollbars-2, causing scrollTop to get called on a stale reference, which prevents the element from scrolling as desired.\n * Adding the reference to the useEffect dependency array not notify react that the reference has changed (and is an eslint violation), so we create a custom hook so updates to the reference trigger another render, fixing the race condition bug.\n *\n * @param scrollBar\n * @param scrollTop\n */\nfunction useScrollTop(\n scrollBar: (Scrollbars & { view: HTMLDivElement; update: () => void }) | null,\n scrollTop?: number\n) {\n useEffect(() => {\n if (scrollBar && scrollTop != null) {\n scrollBar.scrollTop(scrollTop);\n }\n }, [scrollTop, scrollBar]);\n}\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2, locale } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\ntype CounterVariant = 'primary' | 'secondary';\nexport interface CounterProps {\n value: number;\n variant?: CounterVariant;\n}\n\nexport const Counter = ({ value, variant = 'secondary' }: CounterProps) => {\n const styles = useStyles2(getStyles, variant);\n\n return {locale(value, 0).text};\n};\n\nconst getStyles = (theme: GrafanaTheme2, variant: CounterVariant) => ({\n counter: css({\n label: 'counter',\n marginLeft: theme.spacing(1),\n borderRadius: theme.spacing(3),\n backgroundColor: variant === 'primary' ? theme.colors.primary.main : theme.colors.action.hover,\n padding: theme.spacing(0.25, 1),\n color: theme.colors.text.secondary,\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.size.sm,\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport { HTMLProps } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, NavModelItem } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { IconName } from '../../types/icon';\nimport { clearButtonStyles } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport { Counter } from './Counter';\n\nexport interface TabProps extends HTMLProps {\n label: string;\n active?: boolean;\n /** When provided, it is possible to use the tab as a hyperlink. Use in cases where the tabs update location. */\n href?: string;\n icon?: IconName;\n onChangeTab?: (event: React.MouseEvent) => void;\n /** A number rendered next to the text. Usually used to display the number of items in a tab's view. */\n counter?: number | null;\n /** Extra content, displayed after the tab label and counter */\n suffix?: NavModelItem['tabSuffix'];\n truncate?: boolean;\n tooltip?: string;\n /** When true, the tab will be disabled and not clickable */\n disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef(\n (\n {\n label,\n active,\n icon,\n onChangeTab,\n counter,\n suffix: Suffix,\n className,\n href,\n truncate,\n tooltip,\n disabled,\n ...otherProps\n },\n ref\n ) => {\n const tabsStyles = useStyles2(getStyles);\n const clearStyles = useStyles2(clearButtonStyles);\n\n const content = () => (\n <>\n {icon && }\n {label}\n {typeof counter === 'number' && }\n {Suffix && }\n \n );\n\n const linkClass = cx(\n clearStyles,\n tabsStyles.link,\n active ? tabsStyles.activeStyle : tabsStyles.notActive,\n truncate && tabsStyles.linkTruncate,\n disabled && tabsStyles.disabled\n );\n\n const commonProps = {\n className: linkClass,\n 'data-testid': selectors.components.Tab.title(label),\n ...otherProps,\n onClick: disabled ? undefined : onChangeTab,\n role: 'tab',\n 'aria-selected': active,\n 'aria-disabled': disabled,\n tabIndex: disabled ? -1 : undefined,\n title: !!tooltip ? undefined : otherProps.title, // If tooltip is provided, don't set the title on the link or button, it looks weird\n };\n\n let tab = null;\n\n if (href) {\n tab = (\n
\n }\n >\n {content()}\n \n
\n );\n } else {\n tab = (\n
\n }\n >\n {content()}\n \n
\n );\n }\n\n if (tooltip) {\n return {tab};\n }\n\n return tab;\n }\n);\n\nTab.displayName = 'Tab';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n item: css({\n listStyle: 'none',\n position: 'relative',\n display: 'flex',\n whiteSpace: 'nowrap',\n padding: theme.spacing(0, 0.5),\n }),\n itemTruncate: css({\n maxWidth: theme.spacing(40),\n }),\n link: css({\n color: theme.colors.text.secondary,\n padding: theme.spacing(1, 1.5, 1),\n borderRadius: theme.shape.radius.default,\n\n display: 'block',\n height: '100%',\n\n svg: {\n marginRight: theme.spacing(1),\n },\n\n '&:focus-visible': getFocusStyles(theme),\n\n '&::before': {\n display: 'block',\n content: '\" \"',\n position: 'absolute',\n left: 0,\n right: 0,\n height: '2px',\n borderRadius: theme.shape.radius.default,\n bottom: 0,\n },\n }),\n linkTruncate: css({\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n wordBreak: 'break-word',\n overflow: 'hidden',\n }),\n notActive: css({\n 'a:hover, &:hover, &:focus': {\n color: theme.colors.text.primary,\n\n '&::before': {\n backgroundColor: theme.colors.action.hover,\n },\n },\n }),\n activeStyle: css({\n label: 'activeTabStyle',\n color: theme.colors.text.primary,\n overflow: 'hidden',\n\n '&::before': {\n backgroundImage: theme.colors.gradients.brandHorizontal,\n },\n }),\n suffix: css({\n marginLeft: theme.spacing(1),\n }),\n disabled: css({\n color: theme.colors.text.disabled,\n cursor: 'not-allowed',\n\n '&:hover, &:focus': {\n color: theme.colors.text.disabled,\n\n '&::before': {\n backgroundColor: 'transparent',\n },\n },\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\ninterface Props extends HTMLAttributes {\n children: ReactNode;\n}\n\nexport const TabContent = ({ children, className, ...restProps }: Props) => {\n const styles = useStyles2(getTabContentStyle);\n\n return (\n
\n {children}\n
\n );\n};\n\nconst getTabContentStyle = (theme: GrafanaTheme2) => ({\n tabContent: css({\n background: theme.colors.background.primary,\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport { forwardRef, ReactNode } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface Props {\n /** Children should be a single or an array of */\n children: ReactNode;\n className?: string;\n /** For hiding the bottom border (on PageHeader for example) */\n hideBorder?: boolean;\n}\n\nexport const TabsBar = forwardRef(({ children, className, hideBorder = false }, ref) => {\n const styles = useStyles2(getStyles);\n\n return (\n
\n
\n {children}\n
\n
\n );\n});\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n tabsWrapper: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n overflowX: 'auto',\n }),\n noBorder: css({\n borderBottom: 0,\n }),\n tabs: css({\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n }),\n});\n\nTabsBar.displayName = 'TabsBar';\n","import { css } from '@emotion/css';\nimport { useState } from 'react';\nimport * as React from 'react';\n\nimport { SelectableValue, GrafanaTheme2 } from '@grafana/data';\n\nimport { IconButton } from '../../components/IconButton/IconButton';\nimport { Tab } from '../../components/Tabs/Tab';\nimport { TabContent } from '../../components/Tabs/TabContent';\nimport { TabsBar } from '../../components/Tabs/TabsBar';\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { Box } from '../Layout/Box/Box';\nimport { ScrollContainer } from '../ScrollContainer/ScrollContainer';\n\nexport interface TabConfig {\n label: string;\n value: string;\n content: React.ReactNode;\n icon: IconName;\n}\n\nexport interface TabbedContainerProps {\n tabs: TabConfig[];\n defaultTab?: string;\n closeIconTooltip?: string;\n onClose: () => void;\n testId?: string;\n}\n\nexport function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose, testId }: TabbedContainerProps) {\n const [activeTab, setActiveTab] = useState(tabs.some((tab) => tab.value === defaultTab) ? defaultTab : tabs[0].value);\n const styles = useStyles2(getStyles);\n\n const onSelectTab = (item: SelectableValue) => {\n setActiveTab(item.value!);\n };\n\n return (\n
\n \n {tabs.map((t) => (\n onSelectTab(t)}\n icon={t.icon}\n />\n ))}\n \n \n \n \n \n {tabs.find((t) => t.value === activeTab)?.content}\n \n
\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n container: css({\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n flex: '1 1 0',\n minHeight: 0,\n }),\n tabContent: css({\n padding: theme.spacing(2),\n backgroundColor: theme.colors.background.primary,\n flex: 1,\n }),\n tabs: css({\n paddingTop: theme.spacing(0.5),\n borderColor: theme.colors.border.weak,\n ul: {\n marginLeft: theme.spacing(2),\n },\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport { autoUpdate, flip, offset, shift, Side, useFloating, useTransitionStyles } from '@floating-ui/react';\nimport { useLayoutEffect } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { Icon } from '../Icon/Icon';\nimport { Portal } from '../Portal/Portal';\n\nexport interface InlineToastProps {\n children: React.ReactNode;\n suffixIcon?: IconName;\n referenceElement: HTMLElement | null;\n placement: Side;\n /**\n * @deprecated\n * Placement to use if there is not enough space to show the full toast with the original placement\n * This is now done automatically.\n */\n alternativePlacement?: Side;\n}\n\nexport function InlineToast({ referenceElement, children, suffixIcon, placement }: InlineToastProps) {\n const styles = useStyles2(getStyles);\n const theme = useTheme2();\n\n // the order of middleware is important!\n // `arrow` should almost always be at the end\n // see https://floating-ui.com/docs/arrow#order\n const middleware = [\n offset(8),\n flip({\n fallbackAxisSideDirection: 'end',\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n ];\n\n const { context, refs, floatingStyles } = useFloating({\n open: true,\n placement,\n middleware,\n whileElementsMounted: autoUpdate,\n strategy: 'fixed',\n });\n\n useLayoutEffect(() => {\n refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const { styles: placementStyles } = useTransitionStyles(context, {\n initial: ({ side }) => {\n return {\n opacity: 0,\n transform: getInitialTransform(side, theme),\n };\n },\n duration: theme.transitions.duration.shortest,\n });\n\n return (\n \n
\n \n {children && {children}}\n {suffixIcon && }\n \n
\n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n root: css({\n ...theme.typography.bodySmall,\n willChange: 'transform',\n background: theme.components.tooltip.background,\n color: theme.components.tooltip.text,\n padding: theme.spacing(0.5, 1.5), // get's an extra .5 of vertical padding to account for the rounded corners\n borderRadius: theme.shape.radius.pill,\n display: 'inline-flex',\n gap: theme.spacing(0.5),\n alignItems: 'center',\n }),\n };\n};\n\nconst getInitialTransform = (placement: InlineToastProps['placement'], theme: GrafanaTheme2) => {\n const gap = 1;\n\n switch (placement) {\n case 'top':\n return `translateY(${theme.spacing(gap)})`;\n case 'bottom':\n return `translateY(-${theme.spacing(gap)})`;\n case 'left':\n return `translateX(${theme.spacing(gap)})`;\n case 'right':\n return `translateX(-${theme.spacing(gap)})`;\n }\n};\n","import { css, cx } from '@emotion/css';\nimport { useCallback, useRef, useState, useEffect } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { InlineToast } from '../InlineToast/InlineToast';\n\nexport type Props = ButtonProps & {\n /** A function that returns text to be copied */\n getText(): string;\n /** Callback when the text has been successfully copied */\n onClipboardCopy?(copiedText: string): void;\n /** Callback when there was an error copying the text */\n onClipboardError?(copiedText: string, error: unknown): void;\n};\n\nconst SHOW_SUCCESS_DURATION = 2 * 1000;\n\nexport function ClipboardButton({\n onClipboardCopy,\n onClipboardError,\n children,\n getText,\n icon,\n variant,\n ...buttonProps\n}: Props) {\n const styles = useStyles2(getStyles);\n const [showCopySuccess, setShowCopySuccess] = useState(false);\n\n useEffect(() => {\n let timeoutId: ReturnType;\n\n if (showCopySuccess) {\n timeoutId = setTimeout(() => {\n setShowCopySuccess(false);\n }, SHOW_SUCCESS_DURATION);\n }\n\n return () => {\n window.clearTimeout(timeoutId);\n };\n }, [showCopySuccess]);\n\n const buttonRef = useRef(null);\n const copyTextCallback = useCallback(async () => {\n const textToCopy = getText();\n\n try {\n await copyText(textToCopy, buttonRef);\n setShowCopySuccess(true);\n onClipboardCopy?.(textToCopy);\n } catch (e) {\n onClipboardError?.(textToCopy, e);\n }\n }, [getText, onClipboardCopy, onClipboardError]);\n\n const copiedText = t('clipboard-button.inline-toast.success', 'Copied');\n return (\n <>\n {showCopySuccess && (\n \n {copiedText}\n \n )}\n\n \n {children}\n\n {showCopySuccess && (\n
\n \n
\n )}\n \n \n );\n}\n\nconst copyText = async (text: string, buttonRef: React.MutableRefObject) => {\n if (navigator.clipboard && window.isSecureContext) {\n return navigator.clipboard.writeText(text);\n } else {\n // Use a fallback method for browsers/contexts that don't support the Clipboard API.\n // See https://web.dev/async-clipboard/#feature-detection.\n // Use textarea so the user can copy multi-line content.\n const textarea = document.createElement('textarea');\n // Normally we'd append this to the body. However if we're inside a focus manager\n // from react-aria, we can't focus anything outside of the managed area.\n // Instead, let's append it to the button. Then we're guaranteed to be able to focus + copy.\n buttonRef.current?.appendChild(textarea);\n textarea.value = text;\n textarea.focus();\n textarea.select();\n document.execCommand('copy');\n textarea.remove();\n }\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n button: css({\n position: 'relative',\n }),\n successButton: css({\n '> *': css({\n visibility: 'hidden',\n }),\n }),\n successOverlay: css({\n position: 'absolute',\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n visibility: 'visible', // re-visible the overlay\n }),\n };\n};\n","import { BaseOptionType as RCCascaderOption, CascaderProps } from 'rc-cascader';\n\nimport { CascaderOption } from './Cascader';\n\ntype onChangeType = ((values: string[], options: CascaderOption[]) => void) | undefined;\n\nexport const onChangeCascader =\n (onChanged: onChangeType): CascaderProps['onChange'] =>\n (values, options) => {\n if (onChanged) {\n // map values to strings for backwards compatibility with Cascader components\n onChanged(\n values.map((value) => String(value)),\n fromRCOptions(options)\n );\n }\n };\n\ntype onLoadDataType = ((options: CascaderOption[]) => void) | undefined;\n\nexport const onLoadDataCascader = (onLoadData: onLoadDataType) => (options: RCCascaderOption[]) => {\n if (onLoadData) {\n onLoadData(fromRCOptions(options));\n }\n};\n\nconst fromRCOptions = (options: RCCascaderOption[]): CascaderOption[] => {\n return options.map(fromRCOption);\n};\n\nconst fromRCOption = (option: RCCascaderOption): CascaderOption => {\n const value = option.value ? String(option.value) : '';\n return {\n value,\n label: typeof option.label === 'string' ? option.label : value,\n };\n};\n","import { css, keyframes } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { getIconPath } from '../Icon/utils';\n\nconst slideUpIn = keyframes({\n '0%': {\n opacity: 0,\n transformOrigin: '0% 0%',\n transform: 'scaleY(0.8)',\n },\n\n '100%': {\n opacity: 1,\n transformOrigin: '0% 0%',\n transform: 'scaleY(1)',\n },\n});\n\nconst slideUpOut = keyframes({\n '0%': {\n opacity: 1,\n transformOrigin: '0% 0%',\n transform: 'scaleY(1)',\n },\n\n '100%': {\n opacity: 0,\n transformOrigin: '0% 0%',\n transform: 'scaleY(0.8)',\n },\n});\n\nconst slideDownIn = keyframes({\n '0%': {\n opacity: 0,\n transformOrigin: '0% 100%',\n transform: 'scaleY(0.8)',\n },\n\n '100%': {\n opacity: 1,\n transformOrigin: '0% 100%',\n transform: 'scaleY(1)',\n },\n});\n\nconst slideDownOut = keyframes({\n '0%': {\n opacity: 1,\n transformOrigin: '0% 100%',\n transform: 'scaleY(1)',\n },\n\n '100%': {\n opacity: 0,\n transformOrigin: '0% 100%',\n transform: 'scaleY(0.8)',\n },\n});\n\nexport const getCascaderStyles = (theme: GrafanaTheme2) => {\n const iconPath = getIconPath('angle-right');\n return {\n dropdown: css({\n '&.rc-cascader-dropdown': {\n position: 'absolute',\n // Required, otherwise the portal that the popup is shown in will render under other components\n zIndex: 9999,\n\n '&-hidden': {\n display: 'none',\n },\n },\n '.rc-cascader': {\n '&-menus': {\n overflow: 'hidden',\n background: theme.colors.background.elevated,\n border: `none`,\n borderRadius: theme.shape.radius.default,\n boxShadow: theme.shadows.z3,\n whiteSpace: 'nowrap',\n\n '&.slide-up-enter, &.slide-up-appear': {\n animationDuration: '0.3s',\n animationFillMode: 'both',\n transformOrigin: '0 0',\n opacity: 0,\n animationTimingFunction: 'cubic-bezier(0.08, 0.82, 0.17, 1)',\n animationPlayState: 'paused',\n },\n\n '&.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement, &.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement':\n {\n '&-bottomLeft': {\n animationName: slideUpIn,\n animationPlayState: 'running',\n },\n\n '&-topLeft': {\n animationName: slideDownIn,\n animationPlayState: 'running',\n },\n },\n\n '&.slide-up-leave': {\n animationDuration: '0.3s',\n animationFillMode: 'both',\n transformOrigin: '0 0',\n opacity: 1,\n animationTimingFunction: 'cubic-bezier(0.6, 0.04, 0.98, 0.34)',\n animationPlayState: 'paused',\n\n '&.slide-up-leave-active.rc-cascader-menus-placement': {\n '&-bottomLeft': {\n animationName: slideUpOut,\n animationPlayState: 'running',\n },\n\n '&-topLeft': {\n animationName: slideDownOut,\n animationPlayState: 'running',\n },\n },\n },\n },\n\n '&-menu': {\n display: 'inline-block',\n maxWidth: '50vw',\n height: '192px',\n listStyle: 'none',\n margin: 0,\n padding: theme.spacing(0.5),\n borderRight: `1px solid ${theme.colors.border.weak}`,\n overflow: 'auto',\n\n '&:last-child': {\n borderRight: 0,\n },\n\n '&-item': {\n height: theme.spacing(4),\n lineHeight: theme.spacing(4),\n padding: theme.spacing(0, 4, 0, 2),\n borderRadius: theme.shape.radius.default,\n cursor: 'pointer',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n transition: 'all 0.3s ease',\n position: 'relative',\n\n '&:hover': {\n background: theme.colors.action.hover,\n },\n\n '&-disabled': {\n cursor: 'not-allowed',\n color: theme.colors.text.disabled,\n\n '&:hover': {\n background: 'transparent',\n },\n\n '&:after': {\n position: 'absolute',\n right: '12px',\n content: \"'loading'\",\n color: theme.colors.text.disabled,\n fontStyle: 'italic',\n },\n },\n\n '&-active': {\n color: theme.colors.text.maxContrast,\n background: theme.colors.background.secondary,\n\n '&:hover': {\n background: theme.colors.action.hover,\n },\n },\n\n '&-expand': {\n position: 'relative',\n\n '&:after': {\n background: theme.colors.text.primary,\n content: \"''\",\n height: theme.spacing(3),\n mask: `url(${iconPath})`,\n maskType: 'luminance',\n position: 'absolute',\n right: 0,\n top: theme.spacing(0.5),\n width: theme.spacing(3),\n },\n },\n },\n },\n },\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport memoize from 'micro-memoize';\nimport RCCascader from 'rc-cascader';\nimport { PureComponent } from 'react';\nimport * as React from 'react';\n\nimport { SelectableValue } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { withTheme2 } from '../../themes/ThemeContext';\nimport { Themeable2 } from '../../types/theme';\nimport { Icon } from '../Icon/Icon';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { Select } from '../Select/Select';\n\nimport { onChangeCascader } from './optionMappings';\nimport { getCascaderStyles } from './styles';\n\nexport interface CascaderProps extends Themeable2 {\n /** The separator between levels in the search */\n separator?: string;\n placeholder?: string;\n /** As the onSelect handler reports only the leaf node selected, the leaf nodes should have unique value. */\n options: CascaderOption[];\n /** Changes the value for every selection, including branch nodes. Defaults to true. */\n changeOnSelect?: boolean;\n onSelect(val: string): void;\n /** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/\n width?: number;\n /** Single string that needs to be the same as value of the last item in the selection chain. */\n initialValue?: string;\n allowCustomValue?: boolean;\n /** A function for formatting the message for custom value creation. Only applies when allowCustomValue is set to true*/\n formatCreateLabel?: (val: string) => string;\n /** If true all levels are shown in the input by simple concatenating the labels */\n displayAllSelectedLevels?: boolean;\n onBlur?: () => void;\n /** When mounted focus automatically on the input */\n autoFocus?: boolean;\n /** Keep the dropdown open all the time, useful in case whole cascader visibility is controlled by the parent */\n alwaysOpen?: boolean;\n /** Don't show what is selected in the cascader input/search. Useful when input is used just as search and the\n cascader is hidden after selection. */\n hideActiveLevelLabel?: boolean;\n disabled?: boolean;\n /** ID for the underlying Select/Cascader component */\n id?: string;\n /** Whether you can clear the selected value or not */\n isClearable?: boolean;\n}\n\ninterface CascaderState {\n isSearching: boolean;\n focusCascade: boolean;\n //Array for cascade navigation\n rcValue: SelectableValue;\n activeLabel: string;\n inputValue: string;\n}\n\nexport interface CascaderOption {\n /**\n * The value used under the hood\n */\n value: string;\n /**\n * The label to display in the UI\n */\n label: string;\n /** Items will be just flattened into the main list of items recursively. */\n items?: CascaderOption[];\n disabled?: boolean;\n /** Avoid using */\n title?: string;\n /** Children will be shown in a submenu. Use 'items' instead, as 'children' exist to ensure backwards compatibility.*/\n children?: CascaderOption[];\n}\n\nconst disableDivFocus = css({\n '&:focus': {\n outline: 'none',\n },\n});\n\nconst DEFAULT_SEPARATOR = ' / ';\n\nclass UnthemedCascader extends PureComponent {\n constructor(props: CascaderProps) {\n super(props);\n const searchableOptions = this.getSearchableOptions(props.options);\n const { rcValue, activeLabel } = this.setInitialValue(searchableOptions, props.initialValue);\n this.state = {\n isSearching: false,\n focusCascade: false,\n rcValue,\n activeLabel,\n inputValue: '',\n };\n }\n\n static defaultProps = { changeOnSelect: true };\n\n flattenOptions = (options: CascaderOption[], optionPath: CascaderOption[] = []) => {\n let selectOptions: Array> = [];\n for (const option of options) {\n const cpy = [...optionPath];\n cpy.push(option);\n if (!option.items || option.items.length === 0) {\n selectOptions.push({\n singleLabel: cpy[cpy.length - 1].label,\n label: cpy.map((o) => o.label).join(this.props.separator || DEFAULT_SEPARATOR),\n value: cpy.map((o) => o.value),\n });\n } else {\n selectOptions = [...selectOptions, ...this.flattenOptions(option.items, cpy)];\n }\n }\n return selectOptions;\n };\n\n getSearchableOptions = memoize((options: CascaderOption[]) => this.flattenOptions(options));\n\n setInitialValue(searchableOptions: Array>, initValue?: string) {\n if (!initValue) {\n return { rcValue: [], activeLabel: '' };\n }\n for (const option of searchableOptions) {\n const optionPath = option.value || [];\n\n if (optionPath[optionPath.length - 1] === initValue) {\n return {\n rcValue: optionPath,\n activeLabel: this.props.displayAllSelectedLevels ? option.label : option.singleLabel || '',\n };\n }\n }\n if (this.props.allowCustomValue) {\n return { rcValue: [], activeLabel: initValue };\n }\n return { rcValue: [], activeLabel: '' };\n }\n\n //For rc-cascader\n onChange = (value: string[], selectedOptions: CascaderOption[]) => {\n const activeLabel = this.props.hideActiveLevelLabel\n ? ''\n : this.props.displayAllSelectedLevels\n ? selectedOptions.map((option) => option.label).join(this.props.separator || DEFAULT_SEPARATOR)\n : selectedOptions[selectedOptions.length - 1].label;\n const state: CascaderState = {\n rcValue: { value, label: activeLabel },\n focusCascade: true,\n activeLabel,\n isSearching: false,\n inputValue: activeLabel,\n };\n this.setState(state);\n this.props.onSelect(selectedOptions[selectedOptions.length - 1].value);\n };\n\n //For select\n onSelect = (obj: SelectableValue) => {\n const valueArray = obj.value || [];\n const activeLabel = this.props.displayAllSelectedLevels ? obj.label : obj.singleLabel || '';\n const state: CascaderState = {\n activeLabel: activeLabel,\n inputValue: activeLabel,\n rcValue: { value: valueArray, label: activeLabel },\n isSearching: false,\n focusCascade: false,\n };\n this.setState(state);\n this.props.onSelect(valueArray[valueArray.length - 1]);\n };\n\n onCreateOption = (value: string) => {\n this.setState({\n activeLabel: value,\n inputValue: value,\n rcValue: [],\n isSearching: false,\n });\n this.props.onSelect(value);\n };\n\n onBlur = () => {\n this.setState({\n isSearching: false,\n focusCascade: false,\n });\n\n if (this.state.activeLabel === '') {\n this.setState({\n rcValue: [],\n });\n }\n this.props.onBlur?.();\n };\n\n onBlurCascade = () => {\n this.setState({\n focusCascade: false,\n });\n\n this.props.onBlur?.();\n };\n\n onInputKeyDown = (e: React.KeyboardEvent) => {\n if (['ArrowDown', 'ArrowUp', 'Enter', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {\n return;\n }\n const { activeLabel } = this.state;\n this.setState({\n focusCascade: false,\n isSearching: true,\n inputValue: activeLabel,\n });\n };\n\n onSelectInputChange = (value: string) => {\n this.setState({\n inputValue: value,\n });\n };\n\n render() {\n const {\n allowCustomValue,\n formatCreateLabel,\n placeholder,\n width,\n changeOnSelect,\n options,\n disabled,\n id,\n isClearable,\n theme,\n } = this.props;\n const { focusCascade, isSearching, rcValue, activeLabel, inputValue } = this.state;\n\n const searchableOptions = this.getSearchableOptions(options);\n const styles = getCascaderStyles(theme);\n\n return (\n
\n {isSearching ? (\n \n ) : (\n \n
\n {}}\n suffix={\n \n {isClearable && activeLabel !== '' && (\n {\n e.preventDefault();\n e.stopPropagation();\n this.setState({ rcValue: [], activeLabel: '', inputValue: '' });\n this.props.onSelect('');\n }}\n />\n )}\n \n \n }\n disabled={disabled}\n id={id}\n />\n
\n \n )}\n
\n );\n }\n}\n\nexport const Cascader = withTheme2(UnthemedCascader);\n","import { css, cx } from '@emotion/css';\nimport { AriaRole, HTMLAttributes, ReactNode } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Box } from '../Layout/Box/Box';\nimport { Text } from '../Text/Text';\nexport type AlertVariant = 'success' | 'warning' | 'error' | 'info';\n\nexport interface Props extends HTMLAttributes {\n title: string;\n /** On click handler for alert button, mostly used for dismissing the alert */\n onRemove?: (event: React.MouseEvent) => void;\n severity?: AlertVariant;\n children?: ReactNode;\n elevated?: boolean;\n buttonContent?: React.ReactNode | string;\n bottomSpacing?: number;\n topSpacing?: number;\n}\n\nexport const Alert = React.forwardRef(\n (\n {\n title,\n onRemove,\n children,\n buttonContent,\n elevated,\n bottomSpacing,\n topSpacing,\n className,\n severity = 'error',\n ...restProps\n },\n ref\n ) => {\n const theme = useTheme2();\n const hasTitle = Boolean(title);\n const styles = getStyles(theme, severity, hasTitle, elevated, bottomSpacing, topSpacing);\n const rolesBySeverity: Record = {\n error: 'alert',\n warning: 'alert',\n info: 'status',\n success: 'status',\n };\n const role = restProps['role'] || rolesBySeverity[severity];\n const ariaLabel = restProps['aria-label'] || title;\n\n const closeLabel = t('grafana-ui.alert.close-button', 'Close alert');\n\n return (\n
\n \n \n
\n \n
\n \n\n \n \n {title}\n \n {children &&
{children}
}\n \n {/* If onRemove is specified, giving preference to onRemove */}\n {onRemove && !buttonContent && (\n
\n \n
\n )}\n\n {onRemove && buttonContent && (\n \n \n \n )}\n \n
\n );\n }\n);\n\nAlert.displayName = 'Alert';\n\nexport const getIconFromSeverity = (severity: AlertVariant): IconName => {\n switch (severity) {\n case 'error':\n return 'exclamation-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'info':\n return 'info-circle';\n case 'success':\n return 'check';\n }\n};\n\nconst getStyles = (\n theme: GrafanaTheme2,\n severity: AlertVariant,\n hasTitle: boolean,\n elevated?: boolean,\n bottomSpacing?: number,\n topSpacing?: number\n) => {\n const color = theme.colors[severity];\n\n return {\n wrapper: css({\n flexGrow: 1,\n marginBottom: theme.spacing(bottomSpacing ?? 2),\n marginTop: theme.spacing(topSpacing ?? 0),\n position: 'relative',\n\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n background: theme.colors.background.primary,\n zIndex: -1,\n },\n }),\n icon: css({\n color: color.text,\n position: 'relative',\n top: '-1px',\n }),\n content: css({\n color: theme.colors.text.primary,\n paddingTop: hasTitle ? theme.spacing(0.5) : 0,\n maxHeight: '50vh',\n overflowY: 'auto',\n }),\n close: css({\n position: 'relative',\n color: theme.colors.text.secondary,\n background: 'none',\n display: 'flex',\n top: '-6px',\n right: '-14px',\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useOverlay } from '@react-aria/overlays';\nimport { useState, useEffect, useRef, useId } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Alert } from '../Alert/Alert';\nimport { clearButtonStyles } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\n\n// Define the image item interface\nexport interface CarouselImage {\n path: string;\n name: string;\n}\n\nexport interface CarouselProps {\n images: CarouselImage[];\n}\n\nexport const Carousel: React.FC = ({ images }) => {\n const [selectedIndex, setSelectedIndex] = useState(null);\n const [imageErrors, setImageErrors] = useState>({});\n const [validImages, setValidImages] = useState(images);\n const id = useId();\n\n const styles = useStyles2(getStyles);\n const resetButtonStyles = useStyles2(clearButtonStyles);\n\n const handleImageError = (path: string) => {\n setImageErrors((prev) => ({\n ...prev,\n [path]: true,\n }));\n };\n\n useEffect(() => {\n const filteredImages = images.filter((image) => !imageErrors[image.path]);\n setValidImages(filteredImages);\n }, [imageErrors, images]);\n\n const openPreview = (index: number) => {\n setSelectedIndex(index);\n };\n\n const closePreview = () => {\n setSelectedIndex(null);\n };\n\n const goToNext = () => {\n if (selectedIndex !== null && validImages.length > 0) {\n setSelectedIndex((selectedIndex + 1) % validImages.length);\n }\n };\n\n const goToPrevious = () => {\n if (selectedIndex !== null && validImages.length > 0) {\n setSelectedIndex((selectedIndex - 1 + validImages.length) % validImages.length);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (selectedIndex === null) {\n return;\n }\n\n switch (event.key) {\n case 'ArrowRight':\n goToNext();\n break;\n case 'ArrowLeft':\n goToPrevious();\n break;\n case 'Escape':\n closePreview();\n break;\n default:\n break;\n }\n };\n\n const ref = useRef(null);\n\n const { overlayProps, underlayProps } = useOverlay({ isOpen: selectedIndex !== null, onClose: closePreview }, ref);\n const { dialogProps } = useDialog({}, ref);\n\n if (validImages.length === 0) {\n return (\n \n );\n }\n\n return (\n <>\n
\n {validImages.map((image, index) => {\n const imageNameId = `${id}-carousel-image-${index}`;\n return (\n openPreview(index)}\n className={cx(resetButtonStyles, styles.imageButton)}\n >\n \"\" handleImageError(image.path)} />\n

{image.name}

\n \n );\n })}\n
\n\n {selectedIndex !== null && (\n \n
\n \n {/* convenience method for keyboard users */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n \n \n\n \n\n
\n handleImageError(validImages[selectedIndex].path)}\n />\n
\n\n \n
\n \n \n )}\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n imageButton: css({\n textAlign: 'left',\n }),\n imageContainer: css({\n display: 'flex',\n justifyContent: 'center',\n flex: 1,\n }),\n imagePreview: css({\n maxWidth: '100%',\n maxHeight: '80vh',\n objectFit: 'contain',\n }),\n imageGrid: css({\n display: 'grid',\n gridTemplateColumns: `repeat(auto-fill, minmax(200px, 1fr))`,\n gap: theme.spacing(2),\n marginBottom: '20px',\n\n '& img': {\n width: '100%',\n height: '150px',\n objectFit: 'cover',\n border: theme.colors.border.strong,\n borderRadius: theme.shape.radius.default,\n boxShadow: theme.shadows.z1,\n },\n '& p': {\n margin: theme.spacing(0.5, 0),\n fontWeight: theme.typography.fontWeightMedium,\n color: theme.colors.text.primary,\n },\n }),\n underlay: css({\n position: 'fixed',\n zIndex: theme.zIndex.modalBackdrop,\n inset: 0,\n backgroundColor: theme.components.overlay.background,\n }),\n overlay: css({\n alignItems: 'center',\n display: 'flex',\n gap: theme.spacing(1),\n height: 'fit-content',\n marginBottom: 'auto',\n marginTop: 'auto',\n padding: theme.spacing(2),\n position: 'fixed',\n inset: 0,\n zIndex: theme.zIndex.modal,\n }),\n closeButton: css({\n color: theme.colors.text.primary,\n position: 'fixed',\n top: theme.spacing(2),\n right: theme.spacing(2),\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport RCCascader, { FieldNames } from 'rc-cascader';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { CascaderOption } from '../Cascader/Cascader';\nimport { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';\nimport { getCascaderStyles } from '../Cascader/styles';\nimport { Icon } from '../Icon/Icon';\n\nexport interface ButtonCascaderProps {\n options: CascaderOption[];\n children: string;\n icon?: IconName;\n disabled?: boolean;\n value?: string[];\n fieldNames?: FieldNames;\n loadData?: (selectedOptions: CascaderOption[]) => void;\n onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;\n onPopupVisibleChange?: (visible: boolean) => void;\n className?: string;\n variant?: ButtonProps['variant'];\n buttonProps?: Omit;\n hideDownIcon?: boolean;\n}\n\nexport const ButtonCascader = (props: ButtonCascaderProps) => {\n const { onChange, className, loadData, icon, buttonProps, hideDownIcon, variant, disabled, ...rest } = props;\n const styles = useStyles2(getStyles);\n const cascaderStyles = useStyles2(getCascaderStyles);\n\n // Weird way to do this bit it goes around a styling issue in Button where even null/undefined child triggers\n // styling change which messes up the look if there is only single icon content.\n let content: React.ReactNode = props.children;\n if (!hideDownIcon) {\n content = [props.children, ];\n }\n\n return (\n \n \n \n );\n};\n\nButtonCascader.displayName = 'ButtonCascader';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n popup: css({\n label: 'popup',\n zIndex: theme.zIndex.dropdown,\n }),\n icons: {\n right: css({\n margin: '1px 0 0 4px',\n }),\n left: css({\n margin: '-1px 4px 0 0',\n }),\n },\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { HTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Spinner } from '../Spinner/Spinner';\n\n/**\n * @public\n */\nexport interface LoadingPlaceholderProps extends HTMLAttributes {\n text: React.ReactNode;\n}\n\n/**\n * @public\n */\nexport const LoadingPlaceholder = ({ text, className, ...rest }: LoadingPlaceholderProps) => {\n const styles = useStyles2(getStyles);\n return (\n
\n {text} \n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n marginBottom: theme.spacing(4),\n }),\n };\n};\n","import { css, keyframes } from '@emotion/css';\nimport { CSSProperties } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface LoadingBarProps {\n width: number;\n delay?: number;\n ariaLabel?: string;\n}\n\nconst BAR_WIDTH = 28;\nconst MILLISECONDS_PER_PIXEL = 2.4;\nconst MIN_DURATION_MS = 500;\nconst MAX_DURATION_MS = 4000;\nconst DEFAULT_ANIMATION_DELAY = 300;\nconst MAX_TRANSLATE_X = (100 / BAR_WIDTH) * 100;\n\nexport function LoadingBar({ width, delay = DEFAULT_ANIMATION_DELAY, ariaLabel = 'Loading bar' }: LoadingBarProps) {\n const durationMs = Math.min(Math.max(Math.round(width * MILLISECONDS_PER_PIXEL), MIN_DURATION_MS), MAX_DURATION_MS);\n const styles = useStyles2(getStyles, delay, durationMs);\n const containerStyles: CSSProperties = {\n overflow: 'hidden',\n };\n\n return (\n
\n
\n
\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, delay: number, duration: number) => {\n const animation = keyframes({\n '0%': {\n transform: 'translateX(-100%)',\n },\n // this gives us a delay between iterations\n '85%, 100%': {\n transform: `translateX(${MAX_TRANSLATE_X}%)`,\n },\n });\n\n return {\n bar: css({\n width: BAR_WIDTH + '%',\n height: 1,\n background: `linear-gradient(90deg, transparent 0%, ${theme.colors.primary.main} 80.75%, transparent 100%)`,\n transform: 'translateX(-100%)',\n willChange: 'transform',\n [theme.transitions.handleMotion('no-preference')]: {\n animationName: animation,\n // an initial delay to prevent the loader from showing if the response is faster than the delay\n animationDelay: `${delay}ms`,\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n animationDuration: `${duration}ms`,\n },\n [theme.transitions.handleMotion('reduce')]: {\n animationName: animation,\n // an initial delay to prevent the loader from showing if the response is faster than the delay\n animationDelay: `${delay}ms`,\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n animationDuration: `${4 * duration}ms`,\n },\n }),\n };\n};\n","export const closePopover = (event: React.KeyboardEvent, hidePopper: () => void) => {\n if (event.key === 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {\n return;\n }\n\n event.stopPropagation();\n\n if (event.key === 'Escape') {\n hidePopper();\n }\n\n return;\n};\n","import { css } from '@emotion/css';\nimport { useFocusRing } from '@react-aria/focus';\nimport * as React from 'react';\nimport tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\n\n/** @internal */\nexport enum ColorSwatchVariant {\n Small = 'small',\n Large = 'large',\n}\n\n/** @internal */\nexport interface Props extends React.HTMLAttributes {\n color: string;\n label?: string;\n variant?: ColorSwatchVariant;\n isSelected?: boolean;\n}\n\n/** @internal */\nexport const ColorSwatch = React.forwardRef(\n ({ color, label, variant = ColorSwatchVariant.Small, isSelected, 'aria-label': ariaLabel, ...otherProps }, ref) => {\n const theme = useTheme2();\n const { isFocusVisible, focusProps } = useFocusRing();\n const styles = getStyles(theme, variant, color, isFocusVisible, isSelected);\n const hasLabel = !!label;\n const colorLabel = ariaLabel || label;\n return (\n
\n {hasLabel && {label}}\n \n
\n );\n }\n);\n\nconst getStyles = (\n theme: GrafanaTheme2,\n variant: ColorSwatchVariant,\n color: string,\n isFocusVisible: boolean,\n isSelected?: boolean\n) => {\n const tc = tinycolor(color);\n const isSmall = variant === ColorSwatchVariant.Small;\n const swatchSize = isSmall ? '16px' : '32px';\n let border = 'none';\n\n if (tc.getAlpha() < 0.1) {\n border = `2px solid ${theme.colors.border.medium}`;\n }\n\n return {\n wrapper: css({\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n }),\n label: css({\n marginRight: theme.spacing(1),\n }),\n swatch: css({\n width: swatchSize,\n height: swatchSize,\n background: `${color}`,\n border,\n borderRadius: theme.shape.radius.circle,\n outlineOffset: '1px',\n outline: isFocusVisible ? `2px solid ${theme.colors.primary.main}` : 'none',\n boxShadow: isSelected\n ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px ${theme.colors.getContrastText(color)}`\n : 'none',\n [theme.transitions.handleMotion('no-preference')]: {\n transition: theme.transitions.create(['transform'], {\n duration: theme.transitions.duration.short,\n }),\n },\n '&:hover': {\n transform: 'scale(1.1)',\n },\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n },\n }),\n };\n};\n\nColorSwatch.displayName = 'ColorSwatch';\n","import { css } from '@emotion/css';\nimport { Property } from 'csstype';\nimport { upperFirst } from 'lodash';\nimport { useMemo } from 'react';\n\nimport { GrafanaTheme2, ThemeVizHue } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { ColorSwatch, ColorSwatchVariant } from './ColorSwatch';\n\ninterface NamedColorsGroupProps {\n hue: ThemeVizHue;\n selectedColor?: Property.Color;\n onColorSelect: (colorName: string) => void;\n key?: string;\n}\n\nconst NamedColorsGroup = ({ hue, selectedColor, onColorSelect, ...otherProps }: NamedColorsGroupProps) => {\n const label = upperFirst(hue.name);\n const styles = useStyles2(getStyles);\n const reversedShades = useMemo(() => {\n return [...hue.shades].reverse();\n }, [hue.shades]);\n\n return (\n
\n
{label}
\n
\n {reversedShades.map((shade) => (\n onColorSelect(shade.name)}\n />\n ))}\n
\n
\n );\n};\n\nexport default NamedColorsGroup;\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n colorRow: css({\n display: 'grid',\n gridTemplateColumns: '25% 1fr',\n gridColumnGap: theme.spacing(2),\n padding: theme.spacing(0.5, 0),\n\n '&:hover': {\n background: theme.colors.background.secondary,\n },\n }),\n colorLabel: css({\n paddingLeft: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n }),\n swatchRow: css({\n display: 'flex',\n gap: theme.spacing(1),\n alignItems: 'center',\n justifyContent: 'space-around',\n flexDirection: 'row',\n }),\n };\n};\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\n\nimport { ColorSwatch } from './ColorSwatch';\nimport NamedColorsGroup from './NamedColorsGroup';\n\nexport interface NamedColorsPaletteProps {\n color?: string;\n onChange: (colorName: string) => void;\n}\n\nexport const NamedColorsPalette = ({ color, onChange }: NamedColorsPaletteProps) => {\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n\n const swatches: JSX.Element[] = [];\n for (const hue of theme.visualization.hues) {\n swatches.push();\n }\n\n return (\n <>\n
{swatches}
\n
\n onChange('transparent')}\n />\n onChange('text')}\n />\n
\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n display: 'flex',\n flexDirection: 'column',\n }),\n extraColors: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-around',\n gap: theme.spacing(1),\n padding: theme.spacing(1, 0),\n }),\n swatches: css({\n display: 'grid',\n flexGrow: 1,\n }),\n };\n};\n","import { cx, css } from '@emotion/css';\nimport { debounce } from 'lodash';\nimport { forwardRef, useState, useEffect, useMemo } from 'react';\nimport * as React from 'react';\nimport tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Input, Props as InputProps } from '../Input/Input';\n\nimport { ColorPickerProps } from './ColorPickerPopover';\n\ninterface ColorInputProps extends ColorPickerProps, Omit {\n isClearable?: boolean;\n buttonAriaLabel?: string;\n}\n\nconst ColorInput = forwardRef(\n ({ color, onChange, isClearable = false, onClick, onBlur, disabled, buttonAriaLabel, ...inputProps }, ref) => {\n const [value, setValue] = useState(color);\n const [previousColor, setPreviousColor] = useState(color);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const updateColor = useMemo(() => debounce(onChange, 100), []);\n\n useEffect(() => {\n const newColor = tinycolor(color);\n if (newColor.isValid() && color !== previousColor) {\n setValue(newColor.toString());\n setPreviousColor(color);\n }\n }, [color, previousColor]);\n\n const onChangeColor = (event: React.SyntheticEvent) => {\n const { value: colorValue } = event.currentTarget;\n\n setValue(colorValue);\n if (colorValue === '' && isClearable) {\n updateColor(colorValue);\n return;\n }\n const newColor = tinycolor(colorValue);\n\n if (newColor.isValid()) {\n updateColor(newColor.toString());\n }\n };\n\n const onBlurInput = (event: React.FocusEvent) => {\n const newColor = tinycolor(value);\n\n if (!newColor.isValid()) {\n setValue(color);\n }\n\n onBlur?.(event);\n };\n\n return (\n }\n ref={ref}\n />\n );\n }\n);\n\nColorInput.displayName = 'ColorInput';\n\nexport default ColorInput;\n\ninterface ColorPreviewProps {\n color: string;\n onClick?: React.MouseEventHandler;\n disabled?: boolean;\n ariaLabel?: string;\n}\n\nconst ColorPreview = ({ color, onClick, disabled, ariaLabel }: ColorPreviewProps) => {\n const styles = useStyles2(getColorPreviewStyles);\n\n return (\n \n );\n};\n\nconst getColorPreviewStyles = (theme: GrafanaTheme2) =>\n css({\n height: '100%',\n width: `${theme.spacing.gridSize * 4}px`,\n borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`,\n border: `1px solid ${theme.colors.border.medium}`,\n });\n","import { css } from '@emotion/css';\nimport { useMemo, useState } from 'react';\nimport { RgbaStringColorPicker } from 'react-colorful';\nimport { useThrottleFn } from 'react-use';\nimport tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme2, colorManipulator } from '@grafana/data';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\n\nimport ColorInput from './ColorInput';\n\nexport interface SpectrumPaletteProps {\n color: string;\n onChange: (color: string) => void;\n}\n\nconst SpectrumPalette = ({ color, onChange }: SpectrumPaletteProps) => {\n const [currentColor, setColor] = useState(color);\n\n useThrottleFn(\n (c) => {\n onChange(colorManipulator.asHexString(theme.visualization.getColorByName(c)));\n },\n 500,\n [currentColor]\n );\n\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n\n const rgbaString = useMemo(() => {\n return currentColor.startsWith('rgba')\n ? currentColor\n : tinycolor(theme.visualization.getColorByName(color)).toRgbString();\n }, [currentColor, theme, color]);\n\n return (\n
\n \n \n
\n );\n};\n\nexport const getStyles = (theme: GrafanaTheme2) => ({\n wrapper: css({\n flexGrow: 1,\n }),\n root: css({\n '&.react-colorful': {\n width: 'auto',\n },\n\n '.react-colorful': {\n '&__saturation': {\n borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,\n },\n '&__alpha': {\n borderRadius: `0 0 ${theme.shape.radius.default} ${theme.shape.radius.default}`,\n },\n '&__alpha, &__hue': {\n height: theme.spacing(2),\n position: 'relative',\n },\n '&__pointer': {\n height: theme.spacing(2),\n width: theme.spacing(2),\n },\n },\n }),\n colorInput: css({\n marginTop: theme.spacing(2),\n }),\n});\n\nexport default SpectrumPalette;\n","import { css } from '@emotion/css';\nimport { FocusScope } from '@react-aria/focus';\nimport { Component } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, colorManipulator } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { withTheme2 } from '../../themes/ThemeContext';\nimport { stylesFactory } from '../../themes/stylesFactory';\nimport { Themeable2 } from '../../types/theme';\nimport { Tab } from '../Tabs/Tab';\nimport { TabsBar } from '../Tabs/TabsBar';\nimport { PopoverContentProps } from '../Tooltip/types';\n\nimport { NamedColorsPalette } from './NamedColorsPalette';\nimport SpectrumPalette from './SpectrumPalette';\n\nexport type ColorPickerChangeHandler = (color: string) => void;\n\nexport interface ColorPickerProps extends Themeable2 {\n color: string;\n onChange: ColorPickerChangeHandler;\n enableNamedColors?: boolean;\n id?: string;\n}\n\nexport interface Props extends ColorPickerProps, PopoverContentProps {\n customPickers?: T;\n}\n\ntype PickerType = 'palette' | 'spectrum';\n\nexport interface CustomPickersDescriptor {\n [key: string]: {\n tabComponent: React.ComponentType;\n name: string;\n };\n}\n\ninterface State {\n activePicker: PickerType | keyof T;\n}\n\nclass UnThemedColorPickerPopover extends Component, State> {\n constructor(props: Props) {\n super(props);\n this.state = {\n activePicker: 'palette',\n };\n }\n\n handleChange = (color: string) => {\n const { onChange, enableNamedColors, theme } = this.props;\n if (enableNamedColors) {\n return onChange(color);\n }\n onChange(colorManipulator.asHexString(theme.visualization.getColorByName(color)));\n };\n\n onTabChange = (tab: PickerType | keyof T) => {\n return () => this.setState({ activePicker: tab });\n };\n\n renderPicker = () => {\n const { activePicker } = this.state;\n const { color } = this.props;\n\n switch (activePicker) {\n case 'spectrum':\n return ;\n case 'palette':\n return ;\n default:\n return this.renderCustomPicker(activePicker);\n }\n };\n\n renderCustomPicker = (tabKey: keyof T) => {\n const { customPickers, color, theme } = this.props;\n if (!customPickers) {\n return null;\n }\n\n return React.createElement(customPickers[tabKey].tabComponent, {\n color,\n theme,\n onChange: this.handleChange,\n });\n };\n\n renderCustomPickerTabs = () => {\n const { customPickers } = this.props;\n\n if (!customPickers) {\n return null;\n }\n\n return (\n <>\n {Object.keys(customPickers).map((key) => {\n return ;\n })}\n \n );\n };\n\n render() {\n const { theme } = this.props;\n const { activePicker } = this.state;\n\n const styles = getStyles(theme);\n\n return (\n \n {/*\n tabIndex=-1 is needed here to support highlighting text within the picker when using FocusScope\n see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668\n */}\n
\n \n \n \n {this.renderCustomPickerTabs()}\n \n
{this.renderPicker()}
\n
\n \n );\n }\n}\n\nexport const ColorPickerPopover = withTheme2(UnThemedColorPickerPopover);\nColorPickerPopover.displayName = 'ColorPickerPopover';\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2) => {\n return {\n colorPickerPopover: css({\n borderRadius: theme.shape.radius.default,\n boxShadow: theme.shadows.z3,\n background: theme.colors.background.elevated,\n padding: theme.spacing(0.5),\n border: `1px solid ${theme.colors.border.weak}`,\n }),\n colorPickerPopoverContent: css({\n width: '246px',\n fontSize: theme.typography.bodySmall.fontSize,\n minHeight: '184px',\n height: '290px',\n padding: theme.spacing(1),\n display: 'flex',\n flexDirection: 'column',\n }),\n colorPickerPopoverTabs: css({\n display: 'flex',\n width: '100%',\n borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,\n }),\n };\n});\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\n\nimport { LabelProps } from './Label';\n\nexport interface Props extends Omit {\n /** Content for the labels tooltip. If provided, an info icon with the tooltip content\n * will be displayed */\n tooltip?: PopoverContent;\n /** Custom width for the label */\n width?: number | 'auto';\n /** Make labels's background transparent */\n transparent?: boolean;\n /** Make tooltip interactive */\n interactive?: boolean;\n /** @beta */\n /** Controls which element the InlineLabel should be rendered into */\n as?: React.ElementType;\n}\n\nexport const InlineLabel = ({\n children,\n className,\n tooltip,\n width,\n transparent,\n interactive,\n as: Component = 'label',\n ...rest\n}: Props) => {\n const styles = useStyles2(getInlineLabelStyles, transparent, width);\n\n return (\n \n {children}\n {tooltip && (\n \n \n \n )}\n \n );\n};\n\nexport const getInlineLabelStyles = (theme: GrafanaTheme2, transparent = false, width?: number | 'auto') => {\n return {\n label: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flexShrink: 0,\n padding: theme.spacing(0, 1),\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.size.sm,\n backgroundColor: transparent ? 'transparent' : theme.colors.background.secondary,\n height: theme.spacing(theme.components.height.md),\n lineHeight: theme.spacing(theme.components.height.md),\n marginRight: theme.spacing(0.5),\n borderRadius: theme.shape.radius.default,\n border: 'none',\n width: width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%',\n color: theme.colors.text.primary,\n }),\n icon: css({\n color: theme.colors.text.secondary,\n marginLeft: '10px',\n\n ':hover': {\n color: theme.colors.text.primary,\n },\n }),\n };\n};\n","import { cx, css } from '@emotion/css';\nimport { cloneElement, ReactNode } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { getChildId } from '../../utils/reactUtils';\nimport { PopoverContent } from '../Tooltip/types';\n\nimport { FieldProps } from './Field';\nimport { FieldValidationMessage } from './FieldValidationMessage';\nimport { InlineLabel } from './InlineLabel';\n\nexport interface Props extends Omit {\n /** Content for the label's tooltip */\n tooltip?: PopoverContent;\n /** Custom width for the label as a multiple of 8px */\n labelWidth?: number | 'auto';\n /** Make the field's child to fill the width of the row. Equivalent to setting `flex-grow:1` on the field */\n grow?: boolean;\n /** Make the field's child shrink with width of the row. Equivalent to setting `flex-shrink:1` on the field */\n shrink?: boolean;\n /** Make field's background transparent */\n transparent?: boolean;\n /** Error message to display */\n error?: ReactNode;\n htmlFor?: string;\n /** Make tooltip interactive */\n interactive?: boolean;\n}\n\nexport const InlineField = ({\n children,\n label,\n tooltip,\n labelWidth = 'auto',\n invalid,\n loading,\n disabled,\n required,\n className,\n htmlFor,\n grow,\n shrink,\n error,\n transparent,\n interactive,\n validationMessageHorizontalOverflow,\n ...htmlProps\n}: Props) => {\n const theme = useTheme2();\n const styles = getStyles(theme, grow, shrink);\n const inputId = htmlFor ?? getChildId(children);\n\n const labelElement =\n typeof label === 'string' ? (\n \n {`${label}${required ? ' *' : ''}`}\n \n ) : (\n label\n );\n\n return (\n
\n {labelElement}\n
\n {cloneElement(children, { invalid, disabled, loading })}\n {invalid && error && (\n \n {error}\n
\n )}\n
\n
\n );\n};\n\nInlineField.displayName = 'InlineField';\n\nconst getStyles = (theme: GrafanaTheme2, grow?: boolean, shrink?: boolean) => {\n return {\n container: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n textAlign: 'left',\n position: 'relative',\n flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,\n margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`,\n }),\n childContainer: css({\n flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,\n }),\n fieldValidationWrapper: css({\n marginTop: theme.spacing(0.5),\n }),\n validationMessageHorizontalOverflow: css({\n width: 0,\n overflowX: 'visible',\n\n '& > *': {\n whiteSpace: 'nowrap',\n },\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { forwardRef, HTMLProps, useRef } from 'react';\n\nimport { GrafanaTheme2, deprecationWarning } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { Icon } from '../Icon/Icon';\n\nexport interface Props extends Omit, 'value'> {\n value?: boolean;\n /** Show an invalid state around the input */\n invalid?: boolean;\n}\n\nexport const Switch = forwardRef(\n ({ value, checked, onChange, id, label, disabled, invalid = false, ...inputProps }, ref) => {\n if (checked) {\n deprecationWarning('Switch', 'checked prop', 'value');\n }\n\n const styles = useStyles2(getSwitchStyles);\n const switchIdRef = useRef(id ? id : uniqueId('switch-'));\n\n return (\n
\n {\n !disabled && onChange?.(event);\n }}\n id={switchIdRef.current}\n {...inputProps}\n ref={ref}\n />\n \n
\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport interface InlineSwitchProps extends Props {\n /** Label to show next to the switch */\n showLabel?: boolean;\n /** Make inline switch's background and border transparent */\n transparent?: boolean;\n}\n\nexport const InlineSwitch = forwardRef(\n ({ transparent, className, showLabel, label, value, id, invalid, ...props }, ref) => {\n const styles = useStyles2(getSwitchStyles, transparent);\n\n return (\n \n {showLabel && (\n \n {label}\n \n )}\n \n
\n );\n }\n);\n\nInlineSwitch.displayName = 'Switch';\n\nconst getSwitchStyles = (theme: GrafanaTheme2, transparent?: boolean) => ({\n switch: css({\n width: theme.spacing(4),\n height: theme.spacing(2),\n position: 'relative',\n lineHeight: 1,\n\n input: {\n height: '100%',\n width: '100% !important',\n opacity: 0,\n zIndex: -1000,\n position: 'absolute',\n\n '&:checked + label': {\n background: theme.colors.primary.main,\n borderColor: theme.colors.primary.main,\n\n '&:hover': {\n background: theme.colors.primary.shade,\n },\n\n svg: {\n transform: `translate3d(${theme.spacing(2.25)}, -50%, 0)`,\n background: theme.colors.primary.contrastText,\n color: theme.colors.primary.main,\n },\n },\n\n '&:disabled + label': {\n background: theme.colors.action.disabledBackground,\n borderColor: theme.colors.border.weak,\n cursor: 'not-allowed',\n\n svg: {\n background: theme.colors.text.disabled,\n },\n },\n\n '&:disabled:checked + label': {\n background: theme.colors.primary.transparent,\n\n svg: {\n color: theme.colors.primary.contrastText,\n },\n },\n\n '&:focus + label, &:focus-visible + label': getFocusStyles(theme),\n\n '&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme),\n },\n\n label: {\n width: '100%',\n height: '100%',\n cursor: 'pointer',\n borderRadius: theme.shape.radius.pill,\n background: theme.components.input.background,\n border: `1px solid ${theme.components.input.borderColor}`,\n transition: 'all 0.3s ease',\n\n '&:hover': {\n borderColor: theme.components.input.borderHover,\n },\n\n svg: {\n position: 'absolute',\n display: 'block',\n color: 'transparent',\n width: theme.spacing(1.5),\n height: theme.spacing(1.5),\n borderRadius: theme.shape.radius.circle,\n background: theme.colors.text.secondary,\n boxShadow: theme.shadows.z1,\n left: 0,\n top: '50%',\n transform: `translate3d(${theme.spacing(0.25)}, -50%, 0)`,\n transition: 'transform 0.2s cubic-bezier(0.19, 1, 0.22, 1)',\n\n '@media (forced-colors: active)': {\n border: `1px solid ${theme.colors.primary.contrastText}`,\n },\n },\n },\n }),\n inlineContainer: css({\n padding: theme.spacing(0, 1),\n height: theme.spacing(theme.components.height.md),\n display: 'inline-flex',\n alignItems: 'center',\n background: transparent ? 'transparent' : theme.components.input.background,\n border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderColor}`,\n borderRadius: theme.shape.radius.default,\n\n '&:hover': {\n border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderHover}`,\n\n '.inline-switch-label': {\n color: theme.colors.text.primary,\n },\n },\n }),\n disabled: css({\n backgroundColor: transparent ? 'transparent' : 'rgba(204, 204, 220, 0.04)',\n color: 'rgba(204, 204, 220, 0.6)',\n border: `1px solid ${transparent ? 'transparent' : 'rgba(204, 204, 220, 0.04)'}`,\n }),\n inlineLabel: css({\n cursor: 'pointer',\n paddingRight: theme.spacing(1),\n color: theme.colors.text.secondary,\n whiteSpace: 'nowrap',\n }),\n inlineLabelEnabled: css({\n color: theme.colors.text.primary,\n }),\n invalid: css({\n 'input + label, input:checked + label, input:hover + label': {\n border: `1px solid ${theme.colors.error.border}`,\n },\n }),\n});\n","import { t } from '@grafana/i18n';\n\nimport { withTheme2 } from '../../themes/ThemeContext';\nimport { InlineField } from '../Forms/InlineField';\nimport { InlineSwitch } from '../Switch/Switch';\nimport { PopoverContentProps } from '../Tooltip/types';\n\nimport { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';\n\nexport interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopoverContentProps {\n yaxis?: number;\n onToggleAxis?: () => void;\n}\n\nexport const SeriesColorPickerPopover = (props: SeriesColorPickerPopoverProps) => {\n const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;\n const yAxisLabel = t('grafana-ui.series-color-picker-popover.y-axis-usage', 'Use right y-axis');\n const customPickers = onToggleAxis\n ? {\n yaxis: {\n name: 'Y-Axis',\n tabComponent() {\n return (\n \n \n \n );\n },\n },\n }\n : undefined;\n return ;\n};\n\n// This component is to enable SeriesColorPickerPopover usage via series-color-picker-popover directive\nexport const SeriesColorPickerPopoverWithTheme = withTheme2(SeriesColorPickerPopover);\n","import { css } from '@emotion/css';\nimport { Component, createRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { withTheme2 } from '../../themes/ThemeContext';\nimport { stylesFactory } from '../../themes/stylesFactory';\nimport { closePopover } from '../../utils/closePopover';\nimport { Popover } from '../Tooltip/Popover';\nimport { PopoverController } from '../Tooltip/PopoverController';\n\nimport { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';\nimport { ColorSwatch } from './ColorSwatch';\nimport { SeriesColorPickerPopover } from './SeriesColorPickerPopover';\n\n/**\n * If you need custom trigger for the color picker you can do that with a render prop pattern and supply a function\n * as a child. You will get show/hide function which you can map to desired interaction (like onClick or onMouseLeave)\n * and a ref which needs to be passed to an HTMLElement for correct positioning. If you want to use class or functional\n * component as a custom trigger you will need to forward the reference to first HTMLElement child.\n */\ntype ColorPickerTriggerRenderer = (props: {\n // This should be a React.RefObject but due to how object refs are defined you cannot downcast from that\n // to a specific type like React.RefObject even though it would be fine in runtime.\n ref: React.RefObject;\n showColorPicker: () => void;\n hideColorPicker: () => void;\n}) => React.ReactNode;\n\nexport const colorPickerFactory = (\n popover: React.ComponentType>,\n displayName = 'ColorPicker'\n) => {\n return class ColorPicker extends Component {\n static displayName = displayName;\n pickerTriggerRef = createRef();\n\n render() {\n const { theme, children, onChange, color, id } = this.props;\n const styles = getStyles(theme);\n const popoverElement = React.createElement(popover, {\n ...{ ...this.props, children: null },\n onChange,\n });\n return (\n \n {(showPopper, hidePopper, popperProps) => {\n return (\n <>\n {this.pickerTriggerRef.current && (\n closePopover(event, hidePopper)}\n />\n )}\n\n {children ? (\n children({\n ref: this.pickerTriggerRef,\n showColorPicker: showPopper,\n hideColorPicker: hidePopper,\n })\n ) : (\n \n )}\n \n );\n }}\n \n );\n }\n };\n};\n\nexport const ColorPicker = withTheme2(colorPickerFactory(ColorPickerPopover, 'ColorPicker'));\nexport const SeriesColorPicker = withTheme2(colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker'));\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2) => {\n return {\n colorPicker: css({\n position: 'absolute',\n zIndex: theme.zIndex.tooltip,\n color: theme.colors.text.primary,\n maxWidth: '400px',\n fontSize: theme.typography.size.sm,\n maxHeight: '100vh',\n overflow: 'auto',\n }),\n };\n});\n","import { useCallback, useEffect, useRef } from 'react';\nimport * as React from 'react';\n\nexport interface Props {\n /** Callback to trigger when clicking outside of current element occurs. */\n onClick: () => void;\n /** Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true. */\n includeButtonPress?: boolean;\n /** Object to attach the click event listener to. */\n parent?: Window | Document;\n /** https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Defaults to false. */\n useCapture?: boolean;\n children: React.ReactNode;\n}\n\nexport function ClickOutsideWrapper({\n includeButtonPress = true,\n parent = window,\n useCapture = false,\n onClick,\n children,\n}: Props) {\n const wrapperRef = useRef(null);\n const onOutsideClick = useCallback(\n (event: Event) => {\n const domNode = wrapperRef.current;\n\n if (!domNode || (event.target instanceof Node && !domNode.contains(event.target))) {\n onClick();\n }\n },\n [onClick]\n );\n\n useEffect(() => {\n parent.addEventListener('click', onOutsideClick, useCapture);\n if (includeButtonPress) {\n // Use keyup since keydown already has an event listener on window\n parent.addEventListener('keyup', onOutsideClick, useCapture);\n }\n\n return () => {\n parent.removeEventListener('click', onOutsideClick, useCapture);\n if (includeButtonPress) {\n parent.removeEventListener('keyup', onOutsideClick, useCapture);\n }\n };\n }, [includeButtonPress, onOutsideClick, parent, useCapture]);\n\n return
{children}
;\n}\n","import { css, cx } from '@emotion/css';\nimport { useState, forwardRef, FocusEvent } from 'react';\nimport { RgbaStringColorPicker } from 'react-colorful';\nimport { useThrottleFn } from 'react-use';\n\nimport { colorManipulator, GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';\nimport { Props as InputProps } from '../Input/Input';\n\nimport ColorInput from './ColorInput';\nimport { getStyles as getPaletteStyles } from './SpectrumPalette';\n\nexport interface ColorPickerInputProps extends Omit {\n value?: string;\n onChange: (color: string) => void;\n /** Format for returning the color in onChange callback, defaults to 'rgb' */\n returnColorAs?: 'rgb' | 'hex';\n}\n\nexport const ColorPickerInput = forwardRef(\n ({ value = '', onChange, returnColorAs = 'rgb', ...inputProps }, ref) => {\n const [currentColor, setColor] = useState(value);\n const [isOpen, setIsOpen] = useState(false);\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n const paletteStyles = useStyles2(getPaletteStyles);\n\n useThrottleFn(\n (c) => {\n if (c === value) {\n return;\n }\n // Default to an empty string if no color value is available\n if (!c) {\n onChange('');\n return;\n }\n const color = theme.visualization.getColorByName(c);\n if (returnColorAs === 'rgb') {\n onChange(colorManipulator.asRgbString(color));\n } else {\n onChange(colorManipulator.asHexString(color));\n }\n },\n 500,\n [currentColor]\n );\n\n const handleBlur = (evt: FocusEvent) => {\n // Unless the user clicked inside the color picker, close it on blur\n const isClickInPopover = document.querySelector('[data-testid=\"color-popover\"]')?.contains(evt.relatedTarget);\n if (!isClickInPopover) {\n setIsOpen(false);\n }\n };\n\n return (\n setIsOpen(false)}>\n
\n {isOpen && !inputProps.disabled && (\n \n )}\n setIsOpen(true)}\n onBlur={(e) => handleBlur(e)}\n ref={ref}\n isClearable\n />\n
\n \n );\n }\n);\n\nColorPickerInput.displayName = 'ColorPickerInput';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n wrapper: css({\n position: 'relative',\n }),\n picker: css({\n '&.react-colorful': {\n position: 'absolute',\n width: '100%',\n zIndex: 11,\n bottom: '36px',\n },\n }),\n inner: css({\n position: 'absolute',\n }),\n };\n};\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface Props {\n children: JSX.Element | string;\n}\n\n/** @deprecated Use instead */\nconst EmptySearchResult = ({ children }: Props) => {\n const styles = useStyles2(getStyles);\n return
{children}
;\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n borderLeft: `3px solid ${theme.colors.info.main}`,\n backgroundColor: `${theme.colors.background.secondary}`,\n padding: theme.spacing(2),\n minWidth: '350px',\n borderRadius: theme.shape.radius.default,\n marginBottom: theme.spacing(4),\n }),\n };\n};\nexport { EmptySearchResult };\n","import { css } from '@emotion/css';\nimport { SVGProps } from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nimport grotCTASvg from './grot-cta.svg';\n\nexport interface Props {\n width?: SVGProps['width'];\n height?: SVGProps['height'];\n}\n\nexport const GrotCTA = ({ width = 'auto', height }: Props) => {\n const styles = useStyles2(getStyles);\n\n return ;\n};\n\nGrotCTA.displayName = 'GrotCTA';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n svg: css({\n '#grot-cta-cactus-1, #grot-cta-cactus-2': {\n fill: theme.isDark ? '#58558c' : '#c9c5f4',\n },\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { SVGProps, useEffect, useRef } from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nimport notFoundSvg from './grot-not-found.svg';\n\nconst MIN_ARM_ROTATION = -20;\nconst MAX_ARM_ROTATION = 5;\nconst MIN_ARM_TRANSLATION = -5;\nconst MAX_ARM_TRANSLATION = 5;\n\nexport interface Props {\n width?: SVGProps['width'];\n height?: SVGProps['height'];\n}\n\nexport const GrotNotFound = ({ width = 'auto', height }: Props) => {\n const svgRef = useRef(null);\n const styles = useStyles2(getStyles);\n\n useEffect(() => {\n const handleMouseMove = (event: MouseEvent) => {\n // don't apply animation if reduced motion preference is set\n if (window.matchMedia('(prefers-reduced-motion: reduce').matches) {\n return;\n }\n\n const grotArm = svgRef.current?.querySelector('#grot-not-found-arm');\n const grotMagnifier = svgRef.current?.querySelector('#grot-not-found-magnifier');\n\n const { clientX, clientY } = event;\n const { innerWidth, innerHeight } = window;\n const heightRatio = clientY / innerHeight;\n const widthRatio = clientX / innerWidth;\n const rotation = getIntermediateValue(heightRatio, MIN_ARM_ROTATION, MAX_ARM_ROTATION);\n const translation = getIntermediateValue(widthRatio, MIN_ARM_TRANSLATION, MAX_ARM_TRANSLATION);\n\n window.requestAnimationFrame(() => {\n grotArm?.setAttribute('style', `transform: rotate(${rotation}deg) translateX(${translation}%)`);\n grotMagnifier?.setAttribute('style', `transform: rotate(${rotation}deg) translateX(${translation}%)`);\n });\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n };\n }, []);\n\n return ;\n};\n\nGrotNotFound.displayName = 'GrotNotFound';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n svg: css({\n '#grot-not-found-arm, #grot-not-found-magnifier': {\n transformOrigin: 'center',\n },\n }),\n };\n};\n\n/**\n * Given a start value, end value, and a ratio, return the intermediate value\n * Works with negative and inverted start/end values\n */\nconst getIntermediateValue = (ratio: number, start: number, end: number) => {\n const value = ratio * (end - start) + start;\n return value;\n};\n","import { css } from '@emotion/css';\nimport { AriaRole, ReactNode } from 'react';\nimport * as React from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Box } from '../Layout/Box/Box';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { Text } from '../Text/Text';\n\nimport { GrotCTA } from './GrotCTA/GrotCTA';\nimport { GrotNotFound } from './GrotNotFound/GrotNotFound';\nimport GrotCompleted from './grot-completed.svg';\n\ninterface Props {\n /**\n * Provide a button to render below the message\n */\n button?: ReactNode;\n hideImage?: boolean;\n /**\n * Override the default image for the variant\n */\n image?: ReactNode;\n /**\n * Message to display to the user\n */\n message: string;\n /**\n * Which variant to use. Affects the default image shown.\n */\n variant: 'call-to-action' | 'not-found' | 'completed';\n /**\n * Use to set `alert` when needed. See documentation for the use case\n */\n role?: AriaRole;\n}\n\nexport const EmptyState = ({\n button,\n children,\n image,\n message,\n hideImage = false,\n variant,\n role,\n}: React.PropsWithChildren) => {\n const styles = useStyles2(getStyles);\n const imageToShow = image ?? getDefaultImageForVariant(variant);\n\n return (\n \n
\n {!hideImage && imageToShow}\n \n \n {message}\n \n {children && (\n \n {children}\n \n )}\n \n {button}\n
\n \n );\n};\n\nfunction getDefaultImageForVariant(variant: Props['variant']) {\n switch (variant) {\n case 'call-to-action': {\n return ;\n }\n case 'not-found': {\n return ;\n }\n case 'completed': {\n return ;\n }\n default: {\n throw new Error(`Unknown variant: ${variant}`);\n }\n }\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n container: css({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: theme.spacing(4),\n maxWidth: '600px',\n }),\n});\n","import { PureComponent } from 'react';\n\nimport { getValueFormats, SelectableValue } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { Cascader, CascaderOption } from '../Cascader/Cascader';\n\nexport interface UnitPickerProps {\n onChange: (item?: string) => void;\n value?: string;\n width?: number;\n id?: string;\n}\n\nfunction formatCreateLabel(input: string) {\n return `Custom unit: ${input}`;\n}\n\nexport class UnitPicker extends PureComponent {\n onChange = (value: SelectableValue) => {\n this.props.onChange(value.value);\n };\n\n render() {\n const { value, width, id } = this.props;\n\n // Set the current selection\n let current: SelectableValue | undefined = undefined;\n\n // All units\n const unitGroups = getValueFormats();\n\n // Need to transform the data structure to work well with Select\n const groupOptions: CascaderOption[] = unitGroups.map((group) => {\n const options = group.submenu.map((unit) => {\n const sel = {\n label: unit.text,\n value: unit.value,\n };\n if (unit.value === value) {\n current = sel;\n }\n return sel;\n });\n\n return {\n label: group.text,\n value: group.text,\n items: options,\n };\n });\n\n // Show the custom unit\n if (value && !current) {\n current = { value, label: value };\n }\n\n return (\n \n );\n }\n}\n","import { difference } from 'lodash';\nimport { PureComponent } from 'react';\n\nimport { fieldReducers, SelectableValue, FieldReducerInfo } from '@grafana/data';\n\nimport { Select } from '../Select/Select';\n\nexport interface Props {\n placeholder?: string;\n onChange: (stats: string[]) => void;\n stats: string[];\n allowMultiple?: boolean;\n defaultStat?: string;\n className?: string;\n width?: number;\n menuPlacement?: 'auto' | 'bottom' | 'top';\n inputId?: string;\n filterOptions?: (ext: FieldReducerInfo) => boolean;\n}\n\nexport class StatsPicker extends PureComponent {\n static defaultProps: Partial = {\n allowMultiple: false,\n };\n\n componentDidMount() {\n this.checkInput();\n }\n\n componentDidUpdate(prevProps: Props) {\n this.checkInput();\n }\n\n checkInput = () => {\n const { stats, allowMultiple, defaultStat, onChange } = this.props;\n\n const current = fieldReducers.list(stats);\n if (current.length !== stats.length) {\n const found = current.map((v) => v.id);\n const notFound = difference(stats, found);\n console.warn('Unknown stats', notFound, stats);\n onChange(current.map((stat) => stat.id));\n }\n\n // Make sure there is only one\n if (!allowMultiple && stats.length > 1) {\n console.warn('Removing extra stat', stats);\n onChange([stats[0]]);\n }\n\n // Set the reducer from callback\n if (defaultStat && stats.length < 1) {\n onChange([defaultStat]);\n }\n };\n\n onSelectionChange = (item: SelectableValue) => {\n const { onChange } = this.props;\n if (Array.isArray(item)) {\n onChange(item.map((v) => v.value));\n } else {\n onChange(item && item.value ? [item.value] : []);\n }\n };\n\n render() {\n const { stats, allowMultiple, defaultStat, placeholder, className, menuPlacement, width, inputId, filterOptions } =\n this.props;\n\n const select = fieldReducers.selectOptions(stats, filterOptions);\n return (\n \n );\n }\n}\n","import { css, cx } from '@emotion/css';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface Props extends HTMLAttributes {\n className?: string;\n}\n\nexport const ButtonGroup = forwardRef(({ className, children, ...rest }, ref) => {\n const styles = useStyles2(getStyles);\n\n return (\n
\n {children}\n
\n );\n});\n\nButtonGroup.displayName = 'ButtonGroup';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n wrapper: css({\n display: 'flex',\n borderRadius: theme.shape.radius.default,\n\n '> .button-group:not(:first-child) > button, > button:not(:first-child)': {\n borderTopLeftRadius: 'unset',\n borderBottomLeftRadius: 'unset',\n borderLeft: `1px solid rgba(255, 255, 255, 0.12)`,\n },\n\n '> .button-group:not(:last-child) > button, > button:not(:last-child)': {\n borderTopRightRadius: 'unset',\n borderBottomRightRadius: 'unset',\n borderRight: `1px solid rgba(0, 0, 0, 0.12)`,\n },\n }),\n});\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport function MenuDivider() {\n const styles = useStyles2(getStyles);\n return
;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n divider: css({\n height: 1,\n backgroundColor: theme.colors.border.weak,\n margin: theme.spacing(0.5, 0),\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { MenuItemProps } from './MenuItem';\n\n/** @internal */\nexport interface MenuItemsGroup {\n /** Label for the menu items group */\n label?: string;\n /** Aria label for accessibility support */\n ariaLabel?: string;\n /** Items of the group */\n items: Array>;\n}\n\n/** @internal */\nexport interface MenuGroupProps extends Partial {\n /** special children prop to pass children elements */\n children: React.ReactNode;\n}\n\n/** @internal */\nexport const MenuGroup = ({ label, ariaLabel, children }: MenuGroupProps) => {\n const styles = useStyles2(getStyles);\n const labelID = `group-label-${uniqueId()}`;\n\n return (\n
\n {label && (\n \n )}\n {children}\n
\n );\n};\nMenuGroup.displayName = 'MenuGroup';\n\n/** @internal */\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n groupLabel: css({\n color: theme.colors.text.secondary,\n fontSize: theme.typography.size.sm,\n padding: theme.spacing(0.5, 1),\n }),\n };\n};\n","import { RefObject, useEffect, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nconst modulo = (a: number, n: number) => ((a % n) + n) % n;\nconst UNFOCUSED = -1;\n\n/** @internal */\nexport interface UseMenuFocusProps {\n localRef: RefObject;\n isMenuOpen?: boolean;\n close?: () => void;\n onOpen?: (focusOnItem: (itemId: number) => void) => void;\n onClose?: () => void;\n onKeyDown?: React.KeyboardEventHandler;\n}\n\n/** @internal */\nexport type UseMenuFocusReturn = [(event: React.KeyboardEvent) => void];\n\n/** @internal */\nexport const useMenuFocus = ({\n localRef,\n isMenuOpen,\n close,\n onOpen,\n onClose,\n onKeyDown,\n}: UseMenuFocusProps): UseMenuFocusReturn => {\n const [focusedItem, setFocusedItem] = useState(UNFOCUSED);\n\n useEffect(() => {\n if (isMenuOpen) {\n setFocusedItem(0);\n }\n }, [isMenuOpen]);\n\n useEffect(() => {\n const menuItems = localRef?.current?.querySelectorAll(\n '[data-role=\"menuitem\"]:not([data-disabled])'\n );\n menuItems?.[focusedItem]?.focus();\n menuItems?.forEach((menuItem, i) => {\n menuItem.tabIndex = i === focusedItem ? 0 : -1;\n });\n }, [localRef, focusedItem]);\n\n useEffectOnce(() => {\n onOpen?.(setFocusedItem);\n });\n\n const handleKeys = (event: React.KeyboardEvent) => {\n const menuItems = localRef?.current?.querySelectorAll(\n '[data-role=\"menuitem\"]:not([data-disabled])'\n );\n const menuItemsCount = menuItems?.length ?? 0;\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n event.stopPropagation();\n setFocusedItem(modulo(focusedItem - 1, menuItemsCount));\n break;\n case 'ArrowDown':\n event.preventDefault();\n event.stopPropagation();\n setFocusedItem(modulo(focusedItem + 1, menuItemsCount));\n break;\n case 'ArrowLeft':\n event.preventDefault();\n event.stopPropagation();\n setFocusedItem(UNFOCUSED);\n close?.();\n break;\n case 'Home':\n event.preventDefault();\n event.stopPropagation();\n setFocusedItem(0);\n break;\n case 'End':\n event.preventDefault();\n event.stopPropagation();\n setFocusedItem(menuItemsCount - 1);\n break;\n case 'Enter':\n event.preventDefault();\n event.stopPropagation();\n menuItems?.[focusedItem]?.click();\n break;\n case 'Escape':\n onClose?.();\n break;\n case 'Tab':\n event.preventDefault();\n onClose?.();\n break;\n default:\n break;\n }\n\n // Forward event to parent\n onKeyDown?.(event);\n };\n\n return [handleKeys];\n};\n","/**\n * Returns whether the provided element overflows the viewport bounds\n *\n * @param element The element we want to know about\n */\nexport const isElementOverflowing = (element: HTMLElement | null) => {\n if (!element) {\n return false;\n }\n\n const wrapperPos = element.parentElement!.getBoundingClientRect();\n const pos = element.getBoundingClientRect();\n\n return pos.width !== 0 && wrapperPos.right + pos.width + 10 > window.innerWidth;\n};\n","import { css, cx } from '@emotion/css';\nimport { memo, CSSProperties, ReactElement, useEffect, useRef, useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nimport { MenuItemProps } from './MenuItem';\nimport { useMenuFocus } from './hooks';\nimport { isElementOverflowing } from './utils';\n\n/** @internal */\nexport interface SubMenuProps {\n /** List of menu items of the subMenu */\n items?: Array>;\n /** Open */\n isOpen: boolean;\n /** Closes the subMenu */\n close: () => void;\n /** Custom style */\n customStyle?: CSSProperties;\n}\n\n/** @internal */\nexport const SubMenu = memo(({ items, isOpen, close, customStyle }: SubMenuProps) => {\n const styles = useStyles2(getStyles);\n const localRef = useRef(null);\n const [handleKeys] = useMenuFocus({\n localRef,\n isMenuOpen: isOpen,\n close,\n });\n\n const [pushLeft, setPushLeft] = useState(false);\n useEffect(() => {\n if (isOpen && localRef.current) {\n setPushLeft(isElementOverflowing(localRef.current));\n }\n }, [isOpen]);\n\n return (\n <>\n
\n \n
\n {isOpen && (\n \n
\n {items}\n
\n
\n )}\n \n );\n});\n\nSubMenu.displayName = 'SubMenu';\n\n/** @internal */\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n iconWrapper: css({\n display: 'flex',\n flex: 1,\n justifyContent: 'end',\n }),\n icon: css({\n opacity: 0.7,\n marginLeft: theme.spacing(1),\n color: theme.colors.text.secondary,\n }),\n itemsWrapper: css({\n background: theme.colors.background.elevated,\n padding: theme.spacing(0.5),\n boxShadow: theme.shadows.z3,\n display: 'inline-block',\n borderRadius: theme.shape.radius.default,\n }),\n pushLeft: css({\n right: '100%',\n left: 'unset',\n }),\n subMenu: css({\n position: 'absolute',\n top: 0,\n left: '100%',\n zIndex: theme.zIndex.dropdown,\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { ReactElement, useCallback, useState, useRef, useImperativeHandle, CSSProperties, AriaRole } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, LinkTarget } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { IconName } from '../../types/icon';\nimport { Icon } from '../Icon/Icon';\nimport { Stack } from '../Layout/Stack/Stack';\n\nimport { SubMenu } from './SubMenu';\n\n/** @internal */\nexport type MenuItemElement = HTMLAnchorElement & HTMLButtonElement & HTMLDivElement;\n\n/** @internal */\nexport interface MenuItemProps {\n /** Label of the menu item */\n label: string;\n /** Description of item */\n description?: string;\n /** Aria label for accessibility support */\n ariaLabel?: string;\n /** Aria checked for accessibility support */\n ariaChecked?: boolean;\n /** Target of the menu item (i.e. new window) */\n target?: LinkTarget;\n /** Icon of the menu item */\n icon?: IconName;\n /** Role of the menu item */\n role?: AriaRole;\n /** Url of the menu item */\n url?: string;\n /** Handler for the click behaviour */\n onClick?: (event: React.MouseEvent, payload?: T) => void;\n /** Custom MenuItem styles*/\n className?: string;\n /** Active */\n active?: boolean;\n /** Disabled */\n disabled?: boolean;\n /** Show in destructive style (error color) */\n destructive?: boolean;\n tabIndex?: number;\n /** List of menu items for the subMenu */\n childItems?: Array>;\n /** Custom style for SubMenu */\n customSubMenuContainerStyles?: CSSProperties;\n /** Shortcut key combination */\n shortcut?: string;\n /** Test id for e2e tests and fullstory*/\n testId?: string;\n /* Optional component that will be shown together with other options. Does not get passed any props. */\n component?: React.ComponentType;\n}\n\n/** @internal */\nexport const MenuItem = React.memo(\n React.forwardRef((props, ref) => {\n const {\n url,\n icon,\n label,\n description,\n ariaLabel,\n ariaChecked,\n target,\n onClick,\n className,\n active,\n disabled,\n destructive,\n childItems,\n role,\n tabIndex = -1,\n customSubMenuContainerStyles,\n shortcut,\n testId,\n } = props;\n const styles = useStyles2(getStyles);\n const [isActive, setIsActive] = useState(active);\n const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);\n const onMouseEnter = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setIsSubMenuOpen(true);\n setIsActive(true);\n }, [disabled]);\n const onMouseLeave = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setIsSubMenuOpen(false);\n setIsActive(false);\n }, [disabled]);\n\n const hasSubMenu = childItems && childItems.length > 0;\n const ItemElement = hasSubMenu ? 'div' : url === undefined ? 'button' : 'a';\n const itemStyle = cx(\n {\n [styles.item]: true,\n [styles.active]: isActive,\n [styles.disabled]: disabled,\n [styles.destructive]: destructive && !disabled,\n },\n className\n );\n\n const disabledProps = {\n [ItemElement === 'button' ? 'disabled' : 'aria-disabled']: disabled,\n ...(ItemElement === 'a' && disabled && { href: undefined, onClick: undefined }),\n ...(disabled && {\n tabIndex: -1,\n ['data-disabled']: disabled, // used to identify disabled items in Menu.tsx\n }),\n };\n\n const localRef = useRef(null);\n useImperativeHandle(ref, () => localRef.current!);\n\n const handleKeys = (event: React.KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n event.stopPropagation();\n if (hasSubMenu) {\n setIsSubMenuOpen(true);\n setIsActive(true);\n }\n break;\n default:\n break;\n }\n };\n\n const closeSubMenu = () => {\n setIsSubMenuOpen(false);\n setIsActive(false);\n localRef?.current?.focus();\n };\n\n const hasShortcut = Boolean(shortcut && shortcut.length > 0);\n\n return (\n {\n if (hasSubMenu && !isSubMenuOpen) {\n event.preventDefault();\n event.stopPropagation();\n }\n onClick?.(event);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onKeyDown={handleKeys}\n // If there's no URL, then set either the role from the props, or fallback to menuitem\n // If there IS a URL, then use the role from props - which will result in this either being a\n // link (default role of an anchor), or whatever the user of this component specified\n role={!url ? role || 'menuitem' : role}\n data-role=\"menuitem\" // used to identify menuitem in Menu.tsx\n ref={localRef}\n data-testid={testId}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n tabIndex={tabIndex}\n {...disabledProps}\n >\n \n {icon && }\n {label}\n
\n {hasShortcut && (\n
\n \n {shortcut}\n
\n )}\n {hasSubMenu && (\n \n )}\n
\n \n {description && (\n \n {description}\n
\n )}\n {props.component ? : null}\n \n );\n })\n);\n\nMenuItem.displayName = 'MenuItem';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n item: css({\n background: 'none',\n cursor: 'pointer',\n whiteSpace: 'nowrap',\n color: theme.colors.text.primary,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'stretch',\n justifyContent: 'center',\n padding: theme.spacing(0.5, 1.5),\n minHeight: theme.spacing(4),\n borderRadius: theme.shape.radius.default,\n margin: 0,\n border: 'none',\n width: '100%',\n position: 'relative',\n\n '&:hover, &:focus-visible': {\n background: theme.colors.action.hover,\n color: theme.colors.text.primary,\n textDecoration: 'none',\n },\n\n '&:focus-visible': getFocusStyles(theme),\n }),\n active: css({\n background: theme.colors.action.hover,\n }),\n destructive: css({\n color: theme.colors.error.text,\n\n svg: {\n color: theme.colors.error.text,\n },\n\n '&:hover, &:focus, &:focus-visible': {\n background: theme.colors.error.main,\n color: theme.colors.error.contrastText,\n\n svg: {\n color: theme.colors.error.contrastText,\n },\n },\n }),\n disabled: css({\n color: theme.colors.action.disabledText,\n label: 'menu-item-disabled',\n '&:hover, &:focus, &:focus-visible': {\n cursor: 'not-allowed',\n background: 'none',\n color: theme.colors.action.disabledText,\n },\n }),\n icon: css({\n opacity: 0.7,\n color: theme.colors.text.secondary,\n }),\n rightWrapper: css({\n display: 'flex',\n alignItems: 'center',\n marginLeft: 'auto',\n }),\n withShortcut: css({\n minWidth: theme.spacing(10.5),\n }),\n shortcut: css({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n marginLeft: theme.spacing(2),\n color: theme.colors.text.secondary,\n }),\n description: css({\n ...theme.typography.bodySmall,\n color: theme.colors.text.secondary,\n textAlign: 'start',\n }),\n descriptionWithIcon: css({\n marginLeft: theme.spacing(3),\n }),\n ellipsis: css({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { useImperativeHandle, useRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Box } from '../Layout/Box/Box';\n\nimport { MenuDivider } from './MenuDivider';\nimport { MenuGroup } from './MenuGroup';\nimport { MenuItem } from './MenuItem';\nimport { useMenuFocus } from './hooks';\n\nexport interface MenuProps extends React.HTMLAttributes {\n /** React element rendered at the top of the menu */\n header?: React.ReactNode;\n children: React.ReactNode;\n ariaLabel?: string;\n onOpen?: (focusOnItem: (itemId: number) => void) => void;\n onClose?: () => void;\n onKeyDown?: React.KeyboardEventHandler;\n}\n\nconst MenuComp = React.forwardRef(\n ({ header, children, ariaLabel, onOpen, onClose, onKeyDown, ...otherProps }, forwardedRef) => {\n const styles = useStyles2(getStyles);\n\n const localRef = useRef(null);\n useImperativeHandle(forwardedRef, () => localRef.current!);\n\n const [handleKeys] = useMenuFocus({ isMenuOpen: true, localRef, onOpen, onClose, onKeyDown });\n\n return (\n \n {header && (\n 0 && styles.headerBorder\n )}\n >\n {header}\n
\n )}\n {children}\n \n );\n }\n);\n\nMenuComp.displayName = 'Menu';\n\nexport const Menu = Object.assign(MenuComp, {\n Item: MenuItem,\n Divider: MenuDivider,\n Group: MenuGroup,\n});\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n header: css({\n padding: theme.spacing(0.5, 0.5, 1, 0.5),\n }),\n headerBorder: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n marginBottom: theme.spacing(0.5),\n }),\n };\n};\n","import { cx, css } from '@emotion/css';\nimport { forwardRef, ButtonHTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, IconName, isIconName } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles, mediaUp } from '../../themes/mixins';\nimport { IconSize } from '../../types/icon';\nimport { getPropertiesForVariant } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\ntype CommonProps = {\n /** Icon name */\n icon?: IconName | React.ReactNode;\n /** Icon size */\n iconSize?: IconSize;\n /** Tooltip */\n tooltip?: string;\n /** For image icons */\n imgSrc?: string;\n /** Alt text for imgSrc */\n imgAlt?: string;\n /** if true or false will show angle-down/up */\n isOpen?: boolean;\n /** Controls flex-grow: 1 */\n fullWidth?: boolean;\n /** reduces padding to xs */\n narrow?: boolean;\n /** variant */\n variant?: ToolbarButtonVariant;\n /** Hide any children and only show icon */\n iconOnly?: boolean;\n /** Show highlight dot */\n isHighlighted?: boolean;\n};\n\nexport type ToolbarButtonProps = CommonProps & ButtonHTMLAttributes;\n\nexport type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active' | 'canvas';\n\nexport const ToolbarButton = forwardRef(\n (\n {\n tooltip,\n icon,\n iconSize,\n className,\n children,\n imgSrc,\n imgAlt,\n fullWidth,\n isOpen,\n narrow,\n variant = 'default',\n iconOnly,\n 'aria-label': ariaLabel,\n isHighlighted,\n ...rest\n },\n ref\n ) => {\n const styles = useStyles2(getStyles);\n\n const buttonStyles = cx(\n {\n [styles.button]: true,\n [styles.buttonFullWidth]: fullWidth,\n [styles.narrow]: narrow,\n },\n styles[variant],\n className\n );\n\n const contentStyles = cx({\n [styles.content]: true,\n [styles.contentWithIcon]: !!icon,\n [styles.contentWithRightIcon]: isOpen !== undefined,\n });\n\n const body = (\n \n {renderIcon(icon, iconSize)}\n {imgSrc && {imgAlt}\n {children && !iconOnly &&
{children}
}\n {isOpen === false && }\n {isOpen === true && }\n {isHighlighted &&
}\n \n );\n\n return tooltip ? (\n \n {body}\n \n ) : (\n body\n );\n }\n);\n\nToolbarButton.displayName = 'ToolbarButton';\n\nfunction getButtonAriaLabel(ariaLabel: string | undefined, tooltip: string | undefined) {\n return ariaLabel ? ariaLabel : tooltip ? selectors.components.PageToolbar.item(tooltip) : undefined;\n}\n\nfunction renderIcon(icon: IconName | React.ReactNode, iconSize?: IconSize) {\n if (!icon) {\n return null;\n }\n\n if (isIconName(icon)) {\n return ;\n }\n\n return icon;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const primaryVariant = getPropertiesForVariant(theme, 'primary', 'solid');\n const destructiveVariant = getPropertiesForVariant(theme, 'destructive', 'solid');\n\n const defaultOld = css({\n color: theme.colors.text.primary,\n background: theme.colors.secondary.main,\n\n '&:hover': {\n color: theme.colors.text.primary,\n background: theme.colors.secondary.shade,\n border: `1px solid ${theme.colors.border.medium}`,\n },\n });\n\n return {\n button: css({\n label: 'toolbar-button',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n height: theme.spacing(theme.components.height.md),\n padding: theme.spacing(0, 1),\n borderRadius: theme.shape.radius.default,\n lineHeight: `${theme.components.height.md * theme.spacing.gridSize - 2}px`,\n fontWeight: theme.typography.fontWeightMedium,\n border: `1px solid ${theme.colors.secondary.border}`,\n whiteSpace: 'nowrap',\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: theme.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {\n duration: theme.transitions.duration.short,\n }),\n },\n\n [theme.breakpoints.down('md')]: {\n width: 'auto !important',\n },\n\n '&:focus, &:focus-visible': {\n ...getFocusStyles(theme),\n zIndex: 1,\n },\n\n '&:focus:not(:focus-visible)': getMouseFocusStyles(theme),\n\n '&[disabled], &:disabled': {\n cursor: 'not-allowed',\n opacity: theme.colors.action.disabledOpacity,\n background: theme.colors.action.disabledBackground,\n boxShadow: 'none',\n\n '&:hover': {\n color: theme.colors.text.disabled,\n background: theme.colors.action.disabledBackground,\n boxShadow: 'none',\n },\n },\n }),\n default: css({\n color: theme.colors.text.secondary,\n background: 'transparent',\n border: `1px solid transparent`,\n\n '&:hover': {\n color: theme.colors.text.primary,\n background: theme.colors.action.hover,\n },\n }),\n canvas: defaultOld,\n active: cx(\n defaultOld,\n css({\n '&::before': {\n display: 'block',\n content: '\" \"',\n position: 'absolute',\n left: 0,\n right: 0,\n height: '2px',\n bottom: 0,\n borderRadius: theme.shape.radius.default,\n backgroundImage: theme.colors.gradients.brandHorizontal,\n },\n })\n ),\n primary: css(primaryVariant),\n destructive: css(destructiveVariant),\n narrow: css({\n padding: theme.spacing(0, 0.5),\n }),\n img: css({\n width: '16px',\n height: '16px',\n marginRight: theme.spacing(1),\n }),\n buttonFullWidth: css({\n flexGrow: 1,\n }),\n content: css({\n display: 'flex',\n flexGrow: 1,\n }),\n contentWithIcon: css({\n display: 'none',\n paddingLeft: theme.spacing(1),\n\n [`@media ${mediaUp(theme.v1.breakpoints.md)}`]: {\n display: 'block',\n },\n }),\n contentWithRightIcon: css({\n paddingRight: theme.spacing(0.5),\n }),\n highlight: css({\n backgroundColor: theme.colors.success.main,\n borderRadius: theme.shape.radius.circle,\n width: '6px',\n height: '6px',\n position: 'absolute',\n top: '-3px',\n right: '-3px',\n zIndex: 1,\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport {\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n} from '@floating-ui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { memo, HTMLAttributes, useState } from 'react';\n\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Menu } from '../Menu/Menu';\nimport { MenuItem } from '../Menu/MenuItem';\nimport { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton/ToolbarButton';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport interface Props extends HTMLAttributes {\n className?: string;\n options: Array>;\n value?: SelectableValue;\n onChange: (item: SelectableValue) => void;\n /** @deprecated use tooltip instead, tooltipContent is not being processed in ToolbarButton*/\n tooltipContent?: PopoverContent;\n narrow?: boolean;\n variant?: ToolbarButtonVariant;\n tooltip?: string;\n}\n\n/**\n * @deprecated Use Combobox or Dropdown instead\n */\nconst ButtonSelectComponent = (props: Props) => {\n const { className, options, value, onChange, narrow, variant, ...restProps } = props;\n const styles = useStyles2(getStyles);\n const [isOpen, setIsOpen] = useState(false);\n\n // the order of middleware is important!\n const middleware = [\n offset(0),\n flip({\n fallbackAxisSideDirection: 'end',\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n ];\n\n const { context, refs, floatingStyles } = useFloating({\n open: isOpen,\n placement: 'bottom-end',\n onOpenChange: setIsOpen,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);\n\n const onChangeInternal = (item: SelectableValue) => {\n onChange(item);\n setIsOpen(false);\n };\n\n return (\n
\n \n {value?.label || (value?.value != null ? String(value?.value) : null)}\n \n {isOpen && (\n
\n \n {/*\n tabIndex=-1 is needed here to support highlighting text within the menu when using FocusScope\n see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668\n */}\n setIsOpen(false)}>\n {options.map((item) => (\n onChangeInternal(item)}\n active={item.value === value?.value}\n ariaChecked={item.value === value?.value}\n ariaLabel={item.ariaLabel || item.label}\n disabled={item.isDisabled}\n component={item.component}\n role=\"menuitemradio\"\n />\n ))}\n \n \n
\n )}\n
\n );\n};\n\nButtonSelectComponent.displayName = 'ButtonSelect';\n\n// needed to properly forward the generic type through React.memo\n// see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623\n// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\nexport const ButtonSelect = memo(ButtonSelectComponent) as typeof ButtonSelectComponent;\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n wrapper: css({\n position: 'relative',\n display: 'inline-flex',\n }),\n menuWrapper: css({\n zIndex: theme.zIndex.dropdown,\n maxHeight: '100vh',\n overflow: 'auto',\n }),\n };\n};\n","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 {\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) => {\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 \n \n {text}\n \n {!noIntervalPicker && (\n \n )}\n \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> {\n const options: Array> = 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","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport const getModalStyles = (theme: GrafanaTheme2) => {\n const borderRadius = theme.shape.radius.default;\n\n return {\n modal: css({\n position: 'fixed',\n zIndex: theme.zIndex.modal,\n background: theme.colors.background.primary,\n boxShadow: theme.shadows.z3,\n borderRadius,\n border: `1px solid ${theme.colors.border.weak}`,\n backgroundClip: 'padding-box',\n outline: 'none',\n width: '750px',\n maxWidth: '100%',\n left: 0,\n right: 0,\n marginLeft: 'auto',\n marginRight: 'auto',\n top: '10%',\n maxHeight: '80%',\n display: 'flex',\n flexDirection: 'column',\n // Centre the modal vertically on smaller height screens\n // this allows us to fill the full height for maximum usability\n ['@media (max-height: 750px)']: {\n maxHeight: '100%',\n top: '50%',\n transform: 'translateY(-50%)',\n },\n }),\n modalBackdrop: css({\n position: 'fixed',\n zIndex: theme.zIndex.modalBackdrop,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n backgroundColor: theme.components.overlay.background,\n }),\n modalHeader: css({\n label: 'modalHeader',\n display: 'flex',\n alignItems: 'center',\n minHeight: '42px',\n margin: theme.spacing(1, 2, 0, 2),\n }),\n modalHeaderWithTabs: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n modalHeaderTitle: css({\n fontSize: theme.typography.size.lg,\n margin: theme.spacing(0, 4, 0, 1),\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n top: '2px',\n }),\n modalHeaderIcon: css({\n marginRight: theme.spacing(2),\n fontSize: 'inherit',\n '&:before': {\n verticalAlign: 'baseline',\n },\n }),\n modalHeaderClose: css({\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n color: theme.colors.text.secondary,\n flexGrow: 1,\n justifyContent: 'flex-end',\n }),\n modalContent: css({\n overflow: 'auto',\n padding: theme.spacing(3),\n width: '100%',\n }),\n modalButtonRow: css({\n paddingTop: theme.spacing(3),\n }),\n };\n};\n","import * as React from 'react';\n\nexport function useCombinedRefs(\n ...refs: Array | React.ForwardedRef | ((instance: T | null) => void)>\n) {\n const targetRef = React.useRef(null);\n\n React.useEffect(() => {\n refs.forEach((ref) => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(targetRef.current);\n } else {\n ref.current = targetRef.current;\n }\n });\n }, [refs]);\n\n return targetRef;\n}\n","import { forwardRef, useRef, HTMLProps } from 'react';\n\nimport { escapeStringForRegex, unEscapeStringFromRegex } from '@grafana/data';\nimport { Trans } from '@grafana/i18n';\n\nimport { useCombinedRefs } from '../../utils/useCombinedRefs';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Input } from '../Input/Input';\n\nexport interface Props extends Omit, 'onChange'> {\n value: string | undefined;\n width?: number;\n onChange: (value: string) => void;\n escapeRegex?: boolean;\n}\n\nexport const FilterInput = forwardRef(\n ({ value, width, onChange, escapeRegex = true, ...restProps }, ref) => {\n const innerRef = useRef(null);\n const combinedRef = useCombinedRefs(ref, innerRef);\n\n const suffix =\n value !== '' ? (\n {\n innerRef.current?.focus();\n onChange('');\n e.stopPropagation();\n }}\n >\n Clear\n \n ) : null;\n\n return (\n }\n suffix={suffix}\n width={width}\n type=\"text\"\n value={escapeRegex ? unEscapeStringFromRegex(value ?? '') : value}\n onChange={(event) =>\n onChange(escapeRegex ? escapeStringForRegex(event.currentTarget.value) : event.currentTarget.value)\n }\n {...restProps}\n ref={combinedRef}\n />\n );\n }\n);\n\nFilterInput.displayName = 'FilterInput';\n","import { AnchorHTMLAttributes, forwardRef } from 'react';\nimport { Link as RouterLink } from 'react-router-dom-v5-compat';\n\nimport { locationUtil, textUtil } from '@grafana/data';\n\nexport interface Props extends AnchorHTMLAttributes {}\n\n/**\n * @alpha\n */\nexport const Link = forwardRef(({ href, children, ...rest }, ref) => {\n const validUrl = locationUtil.stripBaseFromUrl(textUtil.sanitizeUrl(href ?? ''));\n\n return (\n \n {children}\n \n );\n});\n\nLink.displayName = 'Link';\n","import { css } from '@emotion/css';\nimport { AnchorHTMLAttributes, forwardRef } from 'react';\n\nimport { GrafanaTheme2, locationUtil, textUtil, ThemeTypographyVariantTypes } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { IconName, IconSize } from '../../types/icon';\nimport { Icon } from '../Icon/Icon';\nimport { customWeight } from '../Text/utils';\n\nimport { Link } from './Link';\n\ntype TextLinkVariants = keyof Omit;\n\ninterface TextLinkProps extends Omit, 'target' | 'rel'> {\n /** url to which redirect the user, external or internal */\n href: string;\n /** Color to use for text */\n color?: keyof GrafanaTheme2['colors']['text'];\n /** Specify if the link will redirect users to a page in or out Grafana */\n external?: boolean;\n /** True when the link will be displayed inline with surrounding text, false if it will be displayed as a block. Depending on this prop correspondant default styles will be applied */\n inline?: boolean;\n /** The default variant is 'body'. To fit another styles set the correspondent variant as it is necessary also to adjust the icon size. `code` is excluded, as it is not fit for links. */\n variant?: TextLinkVariants;\n /** Override the default weight for the used variant */\n weight?: 'light' | 'regular' | 'medium' | 'bold';\n /** Set the icon to be shown. An external link will show the 'external-link-alt' icon as default.*/\n icon?: IconName;\n children: React.ReactNode;\n}\n\nconst svgSizes: {\n [key in TextLinkVariants]: IconSize;\n} = {\n h1: 'xl',\n h2: 'xl',\n h3: 'lg',\n h4: 'lg',\n h5: 'md',\n h6: 'md',\n body: 'md',\n bodySmall: 'xs',\n};\n\nexport const TextLink = forwardRef(\n (\n { href, color = 'link', external = false, inline = true, variant = 'body', weight, icon, children, ...rest },\n ref\n ) => {\n const validUrl = textUtil.sanitizeUrl(href ?? '');\n\n const theme = useTheme2();\n const styles = getLinkStyles(theme, inline, variant, weight, color);\n const externalIcon = icon || 'external-link-alt';\n\n if (external) {\n return (\n \n {children}\n \n \n );\n }\n\n const strippedUrl = locationUtil.stripBaseFromUrl(validUrl);\n\n return (\n \n {children}\n {icon && }\n \n );\n }\n);\n\nTextLink.displayName = 'TextLink';\n\nexport const getLinkStyles = (\n theme: GrafanaTheme2,\n inline: boolean,\n variant?: keyof ThemeTypographyVariantTypes,\n weight?: TextLinkProps['weight'],\n color?: TextLinkProps['color']\n) => {\n return css([\n variant && {\n ...theme.typography[variant],\n },\n weight && {\n fontWeight: customWeight(weight, theme),\n },\n color && {\n color: theme.colors.text[color],\n },\n {\n alignItems: 'center',\n gap: '0.25em',\n display: 'inline-flex',\n textDecoration: 'none',\n '&:hover': {\n textDecoration: 'underline',\n color: theme.colors.text.link,\n },\n },\n inline && {\n textDecoration: 'underline',\n '&:hover': {\n textDecoration: 'none',\n },\n },\n ]);\n};\n","let _context: CanvasRenderingContext2D;\nconst cache = new Map();\nconst cacheLimit = 500;\nlet ctxFontStyle = '';\n\n/**\n * @internal\n */\nexport function getCanvasContext() {\n if (!_context) {\n _context = document.createElement('canvas').getContext('2d')!;\n }\n return _context;\n}\n\n/**\n * @beta\n */\nexport function measureText(text: string, fontSize: number, fontWeight = 400): TextMetrics {\n const fontStyle = `${fontWeight} ${fontSize}px 'Inter'`;\n const cacheKey = text + fontStyle;\n const fromCache = cache.get(cacheKey);\n\n if (fromCache) {\n return fromCache;\n }\n\n const context = getCanvasContext();\n\n if (ctxFontStyle !== fontStyle) {\n context.font = ctxFontStyle = fontStyle;\n }\n\n const metrics = context.measureText(text);\n\n if (cache.size === cacheLimit) {\n cache.clear();\n }\n\n cache.set(cacheKey, metrics);\n\n return metrics;\n}\n\n/**\n * @beta\n */\nexport function calculateFontSize(\n text: string,\n width: number,\n height: number,\n lineHeight: number,\n maxSize?: number,\n fontWeight?: number\n) {\n // calculate width in 14px\n const textSize = measureText(text, 14, fontWeight);\n // how much bigger than 14px can we make it while staying within our width constraints\n const fontSizeBasedOnWidth = (width / (textSize.width + 2)) * 14;\n const fontSizeBasedOnHeight = height / lineHeight;\n\n // final fontSize\n const optimalSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n return Math.min(optimalSize, maxSize ?? optimalSize);\n}\n","import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport * as React from 'react';\n\nimport { measureText } from '../../utils/measureText';\n\nimport { AutoSizeInputContext } from './AutoSizeInputContext';\nimport { Input, Props as InputProps } from './Input';\n\nexport interface Props extends InputProps {\n /** Sets the min-width to a multiple of 8px. Default value is 10*/\n minWidth?: number;\n /** Sets the max-width to a multiple of 8px.*/\n maxWidth?: number;\n /** onChange function that will be run on onBlur and onKeyPress with enter\n * @deprecated Use `onChange` instead and manage the value in the parent as a controlled input\n */\n onCommitChange?: (event: React.FormEvent) => void;\n\n /** @deprecated Use `value` and `onChange` instead to manage the value in the parent as a controlled input */\n defaultValue?: string | number | readonly string[];\n}\n\nexport const AutoSizeInput = React.forwardRef((props, ref) => {\n const {\n defaultValue = '',\n minWidth = 10,\n maxWidth,\n onCommitChange,\n onChange,\n onKeyDown,\n onBlur,\n value: controlledValue,\n placeholder,\n ...restProps\n } = props;\n const [inputState, setInputValue] = useControlledState(controlledValue, onChange);\n\n // This must use ?? instead of || so the default value is not used when the value is an empty string\n // typically from the user clearing the input\n const inputValue = inputState ?? defaultValue;\n\n // Update input width when `value`, `minWidth`, or `maxWidth` change\n const inputWidth = useMemo(() => {\n const displayValue = inputValue || placeholder || '';\n const valueString = typeof displayValue === 'string' ? displayValue : displayValue.toString();\n\n return getWidthFor(valueString, minWidth, maxWidth);\n }, [placeholder, inputValue, minWidth, maxWidth]);\n\n return (\n \n {\n if (onChange) {\n onChange(event);\n }\n\n setInputValue(event.currentTarget.value);\n }}\n width={inputWidth}\n onBlur={(event) => {\n if (onBlur) {\n onBlur(event);\n } else if (onCommitChange) {\n onCommitChange(event);\n }\n }}\n onKeyDown={(event) => {\n if (onKeyDown) {\n onKeyDown(event);\n } else if (event.key === 'Enter' && onCommitChange) {\n onCommitChange(event);\n }\n }}\n />\n \n );\n});\n\nfunction getWidthFor(value: string, minWidth: number, maxWidth: number | undefined): number {\n if (!value) {\n return minWidth;\n }\n\n const extraSpace = 3;\n const realWidth = measureText(value.toString(), 14).width / 8 + extraSpace;\n\n if (minWidth && realWidth < minWidth) {\n return minWidth;\n }\n\n if (maxWidth && realWidth > maxWidth) {\n return maxWidth;\n }\n\n return realWidth;\n}\n\nAutoSizeInput.displayName = 'AutoSizeInput';\n\n/**\n * Hook to abstract away state management for controlled and uncontrolled inputs.\n * If the initial value is not undefined, then the value will be controlled by the parent\n * for the lifetime of the component and calls to setState will be ignored.\n */\nfunction useControlledState(controlledValue: T, onChange: Function | undefined): [T, (newValue: T) => void] {\n const isControlledNow = controlledValue !== undefined && onChange !== undefined;\n const isControlledRef = useRef(isControlledNow); // set the initial value - we never change this\n\n const hasLoggedControlledWarning = useRef(false);\n if (isControlledNow !== isControlledRef.current && !hasLoggedControlledWarning.current) {\n console.warn(\n 'An AutoSizeInput is changing from an uncontrolled to a controlled input. If you want to control the input, the empty value should be an empty string.'\n );\n hasLoggedControlledWarning.current = true;\n }\n\n const [internalValue, setInternalValue] = React.useState(controlledValue);\n\n useEffect(() => {\n if (!isControlledRef.current) {\n setInternalValue(controlledValue);\n }\n }, [controlledValue]);\n\n const handleChange = useCallback((newValue: T) => {\n if (!isControlledRef.current) {\n setInternalValue(newValue);\n }\n }, []);\n\n const value = isControlledRef.current ? controlledValue : internalValue;\n\n return [value, handleChange];\n}\n","import { css, cx } from '@emotion/css';\nimport { HTMLProps, useCallback } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\n\nimport { getLabelStyles } from './Label';\n\nexport interface CheckboxProps extends Omit, 'value'> {\n /** Label to display next to checkbox */\n label?: string;\n /** Description to display under the label */\n description?: string | React.ReactElement;\n /** Current value of the checkbox */\n value?: boolean;\n /** htmlValue allows to specify the input \"value\" attribute */\n htmlValue?: string | number;\n /** Sets the checkbox into a \"mixed\" state. This is only a visual change and does not affect the value. */\n indeterminate?: boolean;\n /** Show an invalid state around the input */\n invalid?: boolean;\n}\n\nexport const Checkbox = React.forwardRef(\n (\n { label, description, value, htmlValue, onChange, disabled, className, indeterminate, invalid, ...inputProps },\n ref\n ) => {\n const handleOnChange = useCallback(\n (e: React.ChangeEvent) => {\n if (onChange) {\n onChange(e);\n }\n },\n [onChange]\n );\n const styles = useStyles2(getCheckboxStyles, invalid);\n\n const ariaChecked = indeterminate ? 'mixed' : undefined;\n\n return (\n \n );\n }\n);\n\nexport const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => {\n const labelStyles = getLabelStyles(theme);\n const checkboxSize = 2;\n const labelPadding = 1;\n\n const getBorderColor = (color: string) => {\n return invalid ? theme.colors.error.border : color;\n };\n\n return {\n wrapper: css({\n display: 'inline-grid',\n alignItems: 'center',\n columnGap: theme.spacing(labelPadding),\n // gridAutoRows is needed to prevent https://github.com/grafana/grafana/issues/68570 in safari\n gridAutoRows: 'max-content',\n position: 'relative',\n verticalAlign: 'middle',\n }),\n input: css({\n position: 'absolute',\n zIndex: 1,\n top: 0,\n left: 0,\n width: '100% !important', // global styles unset this\n height: '100%',\n opacity: 0,\n\n '&:focus + span, &:focus-visible + span': getFocusStyles(theme),\n\n '&:focus:not(:focus-visible) + span': getMouseFocusStyles(theme),\n\n /**\n * Using adjacent sibling selector to style checked state.\n * Primarily to limit the classes necessary to use when these classes will be used\n * for angular components styling\n * */\n '&:checked + span': {\n background: theme.colors.primary.main,\n border: `1px solid ${getBorderColor(theme.colors.primary.main)}`,\n\n '&:hover': {\n background: theme.colors.primary.shade,\n },\n\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n zIndex: 2,\n left: theme.spacing(0.5),\n top: 0,\n width: theme.spacing(0.75),\n height: theme.spacing(1.5),\n border: `solid ${theme.colors.primary.contrastText}`,\n borderWidth: '0 3px 3px 0',\n transform: 'rotate(45deg)',\n },\n },\n\n '&:disabled + span': {\n backgroundColor: theme.colors.action.disabledBackground,\n cursor: 'not-allowed',\n border: `1px solid ${getBorderColor(theme.colors.action.disabledBackground)}`,\n\n '&:hover': {\n backgroundColor: theme.colors.action.disabledBackground,\n },\n\n '&:after': {\n borderColor: theme.colors.action.disabledText,\n },\n },\n }),\n\n inputIndeterminate: css({\n \"&[aria-checked='mixed'] + span\": {\n border: `1px solid ${getBorderColor(theme.colors.primary.main)}`,\n background: theme.colors.primary.main,\n\n '&:hover': {\n background: theme.colors.primary.shade,\n },\n\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n zIndex: 2,\n left: '2px',\n right: '2px',\n top: 'calc(50% - 1.5px)',\n height: '3px',\n border: `1.5px solid ${theme.colors.primary.contrastText}`,\n backgroundColor: theme.colors.primary.contrastText,\n width: 'auto',\n transform: 'none',\n },\n },\n \"&:disabled[aria-checked='mixed'] + span\": {\n backgroundColor: theme.colors.action.disabledBackground,\n border: `1px solid ${getBorderColor(theme.colors.error.transparent)}`,\n\n '&:after': {\n borderColor: theme.colors.action.disabledText,\n },\n },\n }),\n\n checkboxWrapper: css({\n display: 'flex',\n alignItems: 'center',\n gridColumnStart: 1,\n gridRowStart: 1,\n }),\n checkmark: css({\n position: 'relative' /* Checkbox should be layered on top of the invisible input so it recieves :hover */,\n zIndex: 2,\n display: 'inline-block',\n width: theme.spacing(checkboxSize),\n height: theme.spacing(checkboxSize),\n borderRadius: theme.shape.radius.default,\n background: theme.components.input.background,\n border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`,\n\n '&:hover': {\n cursor: 'pointer',\n borderColor: getBorderColor(theme.components.input.borderHover),\n },\n }),\n label: cx(\n labelStyles.label,\n css({\n gridColumnStart: 2,\n gridRowStart: 1,\n position: 'relative',\n zIndex: 2,\n cursor: 'pointer',\n maxWidth: 'fit-content',\n lineHeight: theme.typography.bodySmall.lineHeight,\n marginBottom: 0,\n })\n ),\n description: cx(\n labelStyles.description,\n css({\n gridColumnStart: 2,\n gridRowStart: 2,\n lineHeight: theme.typography.bodySmall.lineHeight,\n marginTop: 0 /* The margin effectively comes from the top: -2px on the label above it */,\n // Enable interacting with description when checkbox is disabled\n zIndex: 1,\n })\n ),\n };\n};\n\nCheckbox.displayName = 'Checkbox';\n","import { ReactNode } from 'react';\n\nimport { Trans } from '@grafana/i18n';\n\nimport { Icon } from '../Icon/Icon';\nimport { Box } from '../Layout/Box/Box';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { Text } from '../Text/Text';\n\nexport const AsyncError = () => (\n \n \n \n \n An error occurred while loading options.\n \n);\n\nexport const NotFoundError = () => (\n \n No options found.\n \n);\n\nconst MessageRow = ({ children }: { children: ReactNode }) => {\n return (\n \n \n {children}\n \n \n );\n};\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\n// We need a px font size to accurately measure the width of items.\n// This should be in sync with the body font size in the theme.\nexport const MENU_ITEM_FONT_SIZE = 14;\nexport const MENU_ITEM_DESCRIPTION_FONT_SIZE = 12;\nexport const MENU_ITEM_FONT_WEIGHT = 500;\nexport const MENU_ITEM_PADDING = 8;\nexport const MENU_ITEM_GAP = 2;\nexport const MENU_ITEM_LINE_HEIGHT = 1.5;\n\n// Used with Downshift to get the height of each item\nexport const MENU_OPTION_HEIGHT = MENU_ITEM_GAP + MENU_ITEM_PADDING * 2 + MENU_ITEM_FONT_SIZE * MENU_ITEM_LINE_HEIGHT;\nexport const MENU_OPTION_HEIGHT_DESCRIPTION =\n MENU_OPTION_HEIGHT + MENU_ITEM_DESCRIPTION_FONT_SIZE * MENU_ITEM_LINE_HEIGHT;\nexport const POPOVER_MAX_HEIGHT = MENU_OPTION_HEIGHT * 8.5;\n\nexport const getComboboxStyles = (theme: GrafanaTheme2) => {\n return {\n menuClosed: css({\n display: 'none',\n }),\n menu: css({\n label: 'combobox-menu',\n background: theme.components.dropdown.background,\n boxShadow: theme.shadows.z3,\n zIndex: theme.zIndex.dropdown,\n position: 'relative',\n borderRadius: theme.shape.radius.default,\n overflow: 'hidden',\n }),\n menuUlContainer: css({\n label: 'combobox-menu-ul-container',\n listStyle: 'none',\n }),\n\n // The wrapper around the group header and option, not the option itself.\n // Should not contain visual styling itself.\n listItem: css({\n label: 'list-item',\n position: 'absolute',\n width: '100%',\n }),\n\n optionGroupHeader: css({\n label: 'combobox-new-option-group',\n borderTop: `1px solid ${theme.colors.border.weak}`,\n }),\n\n optionFirstGroupHeader: css({\n borderTop: 'none',\n }),\n\n optionGroupLabel: css({\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n letterSpacing: 0,\n color: theme.colors.text.secondary,\n fontSize: theme.typography.bodySmall.fontSize,\n fontWeight: theme.typography.fontWeightLight,\n padding: MENU_ITEM_PADDING,\n }),\n\n option: css({\n label: 'combobox-option',\n position: 'relative', // for the selection gradient to grab to\n display: 'flex',\n width: '100%',\n gap: theme.spacing(1),\n alignItems: 'center',\n padding: MENU_ITEM_PADDING,\n marginBottom: MENU_ITEM_GAP,\n borderRadius: theme.shape.radius.default,\n fontWeight: theme.typography.fontWeightMedium,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n cursor: 'pointer',\n '&:hover': {\n background: theme.colors.action.hover,\n '@media (forced-colors: active), (prefers-contrast: more)': {\n border: `1px solid ${theme.colors.primary.border}`,\n },\n },\n }),\n\n optionAccessory: css({\n label: 'combobox-option-accessory',\n height: MENU_ITEM_FONT_SIZE * MENU_ITEM_LINE_HEIGHT, // Ensure the accessory doesn't make the option too tall\n }),\n\n optionBody: css({\n label: 'combobox-option-body',\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n overflow: 'hidden',\n }),\n\n optionLabel: css({\n label: 'combobox-option-label',\n fontSize: MENU_ITEM_FONT_SIZE,\n fontWeight: MENU_ITEM_FONT_WEIGHT,\n lineHeight: MENU_ITEM_LINE_HEIGHT,\n letterSpacing: 0,\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }),\n\n optionDescription: css({\n label: 'combobox-option-description',\n color: theme.colors.text.secondary,\n fontSize: MENU_ITEM_DESCRIPTION_FONT_SIZE,\n fontWeight: theme.typography.fontWeightRegular,\n lineHeight: MENU_ITEM_LINE_HEIGHT,\n letterSpacing: 0,\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }),\n\n optionFocused: css({\n label: 'combobox-option-focused',\n // top: 0,\n background: theme.colors.action.focus,\n '@media (forced-colors: active), (prefers-contrast: more)': {\n border: `1px solid ${theme.colors.primary.border}`,\n },\n }),\n optionSelected: css({\n background: theme.colors.action.selected,\n '&::before': {\n backgroundImage: theme.colors.gradients.brandVertical,\n borderRadius: theme.shape.radius.default,\n content: '\" \"',\n display: 'block',\n height: '100%',\n position: 'absolute',\n width: theme.spacing(0.5),\n left: 0,\n top: 0,\n },\n }),\n optionInfo: css({\n label: 'combobox-option-info',\n color: theme.colors.text.disabled,\n cursor: 'not-allowed',\n pointerEvents: 'none',\n '&:hover': {\n background: 'transparent',\n },\n }),\n clear: css({\n label: 'combobox-clear',\n cursor: 'pointer',\n pointerEvents: 'auto',\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n input: css({\n label: 'combobox-input',\n '> div > div:last-child': {\n pointerEvents: 'none',\n },\n '& input': {\n cursor: 'pointer',\n },\n '& input:focus': {\n cursor: 'text',\n },\n }),\n adaptToParent: css({\n label: 'combobox-adapt-to-parent',\n maxWidth: '100%',\n '[class*=\"input-wrapper-combobox-input\"]': {\n maxWidth: '100%',\n },\n }),\n };\n};\n","export const ALL_OPTION_VALUE = '__GRAFANA_INTERNAL_MULTICOMBOBOX_ALL_OPTION__';\n\nexport type ComboboxOption = {\n label?: string;\n value: T;\n description?: string;\n group?: string;\n infoOption?: boolean;\n};\n","import { ComboboxOption } from './types';\n\nexport const isNewGroup = (option: ComboboxOption, prevOption?: ComboboxOption) => {\n const currentGroup = option.group;\n\n if (!currentGroup) {\n return prevOption?.group ? true : false;\n }\n\n if (!prevOption) {\n return true;\n }\n\n return prevOption.group !== currentGroup;\n};\n","import { cx } from '@emotion/css';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport type { UseComboboxPropGetters } from 'downshift';\nimport { useCallback } from 'react';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Checkbox } from '../Forms/Checkbox';\nimport { ScrollContainer } from '../ScrollContainer/ScrollContainer';\n\nimport { AsyncError, NotFoundError } from './MessageRows';\nimport { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles';\nimport { ALL_OPTION_VALUE, ComboboxOption } from './types';\nimport { isNewGroup } from './utils';\n\nexport const VIRTUAL_OVERSCAN_ITEMS = 4;\n\ninterface ComboboxListProps {\n options: Array>;\n highlightedIndex: number | null;\n selectedItems?: Array>;\n scrollRef: React.RefObject;\n getItemProps: UseComboboxPropGetters>['getItemProps'];\n enableAllOption?: boolean;\n isMultiSelect?: boolean;\n error?: boolean;\n}\n\nexport const ComboboxList = ({\n options,\n highlightedIndex,\n selectedItems = [],\n scrollRef,\n getItemProps,\n enableAllOption,\n isMultiSelect = false,\n error = false,\n}: ComboboxListProps) => {\n const styles = useStyles2(getComboboxStyles);\n\n const estimateSize = useCallback(\n (index: number) => {\n const firstGroupItem = isNewGroup(options[index], index > 0 ? options[index - 1] : undefined);\n const hasDescription = 'description' in options[index];\n const hasGroup = 'group' in options[index];\n\n let itemHeight = MENU_OPTION_HEIGHT;\n if (hasDescription) {\n itemHeight = MENU_OPTION_HEIGHT_DESCRIPTION;\n }\n if (firstGroupItem && hasGroup) {\n itemHeight += MENU_OPTION_HEIGHT;\n }\n return itemHeight;\n },\n [options]\n );\n\n const rowVirtualizer = useVirtualizer({\n count: options.length,\n getScrollElement: () => scrollRef.current,\n estimateSize,\n overscan: VIRTUAL_OVERSCAN_ITEMS,\n });\n\n const isOptionSelected = useCallback(\n (item: ComboboxOption) => selectedItems.some((opt) => opt.value === item.value),\n [selectedItems]\n );\n\n const allItemsSelected = enableAllOption && options.length > 1 && selectedItems.length === options.length - 1;\n\n return (\n \n
\n {rowVirtualizer.getVirtualItems().map((virtualRow, index, allVirtualRows) => {\n const item = options[virtualRow.index];\n const startingNewGroup = isNewGroup(item, options[virtualRow.index - 1]);\n\n // Find the item that renders the group header. It can be this same item if this is rendering it.\n const groupHeaderIndex = allVirtualRows.find((row) => {\n const rowItem = options[row.index];\n return rowItem.group === item.group;\n });\n const groupHeaderItem = groupHeaderIndex && options[groupHeaderIndex.index];\n\n const itemId = `combobox-option-${item.value}`;\n // If we're rendering the group header, this is the ID for it. Otherwise its used on\n // the option for aria-describedby.\n const groupHeaderId = groupHeaderItem ? `combobox-option-group-${groupHeaderItem.value}` : undefined;\n\n return (\n // Wrapping div should have no styling other than virtual list positioning.\n // It's children (header and option) should appear as flat list items.\n \n {/* Group header */}\n {startingNewGroup && (\n \n {item.group}\n
\n )}\n\n {/* Option */}\n \n {isMultiSelect && (\n
\n {!item.infoOption && (\n 0 && !allItemsSelected}\n aria-labelledby={itemId}\n onClick={(e) => {\n e.stopPropagation();\n }}\n data-testid={`${itemId}-checkbox`}\n />\n )}\n
\n )}\n\n
\n
{item.label ?? item.value}
\n\n {item.description &&
{item.description}
}\n
\n
\n
\n );\n })}\n
\n\n
\n {error && }\n {options.length === 0 && !error && }\n
\n \n );\n};\n","import { Icon } from '../Icon/Icon';\n\ninterface Props {\n isLoading: boolean;\n isOpen: boolean;\n}\n\nexport const SuffixIcon = ({ isLoading, isOpen }: Props) => {\n const suffixIcon = isLoading\n ? 'spinner'\n : // If it's loading, show loading icon. Otherwise, icon indicating menu state\n isOpen\n ? 'search'\n : 'angle-down';\n\n return ;\n};\n","import { fuzzySearch } from '@grafana/data';\n\nimport { ComboboxOption } from './types';\n\nexport function itemToString(item?: ComboboxOption | null) {\n if (item == null) {\n return '';\n }\n return item.label ?? item.value.toString();\n}\n\nexport function fuzzyFind(\n options: Array>,\n haystack: string[],\n needle: string\n) {\n const indices = fuzzySearch(haystack, needle);\n return indices.map((idx) => options[idx]);\n}\n","import { autoUpdate, autoPlacement, size, useFloating } from '@floating-ui/react';\nimport { useMemo, useRef, useState } from 'react';\n\nimport { measureText } from '../../utils/measureText';\n\nimport {\n MENU_ITEM_FONT_SIZE,\n MENU_ITEM_FONT_WEIGHT,\n MENU_ITEM_PADDING,\n MENU_OPTION_HEIGHT,\n POPOVER_MAX_HEIGHT,\n} from './getComboboxStyles';\nimport { ComboboxOption } from './types';\n\n// Only consider the first n items when calculating the width of the popover.\nconst WIDTH_CALCULATION_LIMIT_ITEMS = 100_000;\n\n// Clearance around the popover to prevent it from being too close to the edge of the viewport\nconst POPOVER_PADDING = 16;\n\nconst SCROLL_CONTAINER_PADDING = 8;\n\nexport const useComboboxFloat = (items: Array>, isOpen: boolean) => {\n const inputRef = useRef(null);\n const floatingRef = useRef(null);\n const scrollRef = useRef(null);\n const [popoverMaxSize, setPopoverMaxSize] = useState<{ width: number; height: number }>({\n width: 0,\n height: 0,\n }); // set initial values to prevent infinite size, briefly removing the list virtualization\n\n const scrollbarWidth = useMemo(() => getScrollbarWidth(), []);\n\n // the order of middleware is important!\n const middleware = [\n autoPlacement({\n // see https://floating-ui.com/docs/autoplacement\n allowedPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],\n boundary: document.body,\n crossAxis: true,\n }),\n size({\n apply({ availableWidth, availableHeight }) {\n const preferredMaxWidth = availableWidth - POPOVER_PADDING;\n const preferredMaxHeight = availableHeight - POPOVER_PADDING;\n\n const width = Math.max(preferredMaxWidth, 0);\n const height = Math.min(Math.max(preferredMaxHeight, MENU_OPTION_HEIGHT * 6), POPOVER_MAX_HEIGHT);\n\n setPopoverMaxSize({ width, height });\n },\n }),\n ];\n const elements = { reference: inputRef.current, floating: floatingRef.current };\n const { floatingStyles } = useFloating({\n strategy: 'fixed',\n open: isOpen,\n placement: 'bottom-start',\n middleware,\n elements,\n whileElementsMounted: autoUpdate,\n });\n\n const longestItemWidth = useMemo(() => {\n let longestItem = '';\n const itemsToLookAt = Math.min(items.length, WIDTH_CALCULATION_LIMIT_ITEMS);\n\n for (let i = 0; i < itemsToLookAt; i++) {\n const itemLabel = items[i].label ?? items[i].value.toString();\n longestItem = itemLabel.length > longestItem.length ? itemLabel : longestItem;\n }\n\n const size = measureText(longestItem, MENU_ITEM_FONT_SIZE, MENU_ITEM_FONT_WEIGHT).width;\n\n return size + SCROLL_CONTAINER_PADDING + MENU_ITEM_PADDING * 2 + scrollbarWidth;\n }, [items, scrollbarWidth]);\n\n const floatStyles = {\n ...floatingStyles,\n width: longestItemWidth,\n maxWidth: popoverMaxSize.width,\n minWidth: inputRef.current?.offsetWidth,\n\n maxHeight: popoverMaxSize.height,\n };\n\n return { inputRef, floatingRef, scrollRef, floatStyles };\n};\n\n// Creates a temporary div with a scrolling inner div to calculate the width of the scrollbar\nfunction getScrollbarWidth(): number {\n const outer = document.createElement('div');\n outer.style.visibility = 'hidden';\n outer.style.overflow = 'scroll';\n document.body.appendChild(outer);\n\n const inner = document.createElement('div');\n outer.appendChild(inner);\n\n const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;\n\n outer.parentNode?.removeChild(outer);\n\n return scrollbarWidth;\n}\n","import { useCallback, useRef } from 'react';\n\ntype AsyncFn = (value: T) => Promise;\n\n/**\n * Wraps an async function to ensure that only the latest call is resolved.\n * Used to prevent a faster call being overwritten by an earlier slower call.\n */\nexport function useLatestAsyncCall(fn: AsyncFn): AsyncFn {\n const latestValueCount = useRef(0);\n\n const wrappedFn = useCallback(\n (value: T) => {\n latestValueCount.current++;\n const requestCount = latestValueCount.current;\n\n return new Promise((resolve, reject) => {\n fn(value)\n .then((result) => {\n // Only resolve if the value is still the latest\n if (requestCount === latestValueCount.current) {\n resolve(result);\n } else {\n reject(new StaleResultError());\n }\n })\n .catch(reject);\n });\n },\n [fn]\n );\n\n return wrappedFn;\n}\n\nexport class StaleResultError extends Error {\n constructor() {\n super('This result is stale and is discarded');\n this.name = 'StaleResultError';\n Object.setPrototypeOf(this, new.target.prototype); // Necessary for instanceof to work correctly\n }\n}\n","/* Spreading unbound arrays can be very slow or even crash the browser if used for arguments */\n/* eslint no-restricted-syntax: [\"error\", \"SpreadElement\"] */\n\nimport { debounce } from 'lodash';\nimport { useState, useCallback, useMemo } from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { fuzzyFind, itemToString } from './filter';\nimport { ComboboxOption } from './types';\nimport { StaleResultError, useLatestAsyncCall } from './useLatestAsyncCall';\n\ntype AsyncOptions =\n | Array>\n | ((inputValue: string) => Promise>>);\n\nconst asyncNoop = () => Promise.resolve([]);\n\n/**\n * Abstracts away sync/async options for combobox components.\n * It also filters options based on the user's input.\n *\n * Returns:\n * - options either filtered by user's input, or from async options fn\n * - function to call when user types (to filter, or call async fn)\n * - loading and error states\n */\nexport function useOptions(rawOptions: AsyncOptions, createCustomValue: boolean) {\n const isAsync = typeof rawOptions === 'function';\n\n const loadOptions = useLatestAsyncCall(isAsync ? rawOptions : asyncNoop);\n\n const debouncedLoadOptions = useMemo(\n () =>\n debounce((searchTerm: string) => {\n return loadOptions(searchTerm)\n .then((options) => {\n setAsyncOptions(options);\n setAsyncLoading(false);\n setAsyncError(false);\n })\n .catch((error) => {\n if (!(error instanceof StaleResultError)) {\n setAsyncError(true);\n setAsyncLoading(false);\n\n if (error) {\n console.error('Error loading async options for Combobox', error);\n }\n }\n });\n }, 200),\n [loadOptions]\n );\n\n const [asyncOptions, setAsyncOptions] = useState>>([]);\n const [asyncLoading, setAsyncLoading] = useState(false);\n const [asyncError, setAsyncError] = useState(false);\n\n // This hook keeps its own inputValue state (rather than accepting it as an arg) because it needs to be\n // told it for async options loading anyway.\n const [userTypedSearch, setUserTypedSearch] = useState('');\n\n const addCustomValue = useCallback(\n (opts: Array>) => {\n let currentOptions: Array> = opts;\n if (createCustomValue && userTypedSearch) {\n // Since the label of a normal option does not have to match its value and a custom option has the same value and label,\n // we just focus on the value to check if the option already exists\n const customValueExists = opts.some((opt) => opt.value === userTypedSearch);\n if (!customValueExists) {\n // Make sure to clone the array first to avoid mutating the original array!\n currentOptions = currentOptions.slice();\n currentOptions.unshift({\n label: userTypedSearch,\n value: userTypedSearch as T,\n description: t('combobox.custom-value.description', 'Use custom value'),\n });\n }\n }\n return currentOptions;\n },\n [createCustomValue, userTypedSearch]\n );\n\n const updateOptions = useCallback(\n (inputValue: string) => {\n setUserTypedSearch(inputValue);\n if (isAsync) {\n setAsyncLoading(true);\n debouncedLoadOptions(inputValue);\n }\n },\n [debouncedLoadOptions, isAsync]\n );\n\n const stringifiedOptions = useMemo(() => {\n return isAsync ? [] : rawOptions.map(itemToString);\n }, [isAsync, rawOptions]);\n\n // Create a list of options filtered by the current search.\n // If async, just returns the async options.\n const filteredOptions = useMemo(() => {\n if (isAsync) {\n return asyncOptions;\n }\n\n return fuzzyFind(rawOptions, stringifiedOptions, userTypedSearch);\n }, [asyncOptions, isAsync, rawOptions, stringifiedOptions, userTypedSearch]);\n\n const [finalOptions, groupStartIndices] = useMemo(() => {\n const { options, groupStartIndices } = sortByGroup(filteredOptions);\n\n return [addCustomValue(options), groupStartIndices];\n }, [filteredOptions, addCustomValue]);\n\n return { options: finalOptions, groupStartIndices, updateOptions, asyncLoading, asyncError };\n}\n\n/**\n * Sorts options by group and returns the sorted options and the starting index of each group\n */\nexport function sortByGroup(options: Array>) {\n // Group options by their group\n const groupedOptions = new Map>>();\n const groupStartIndices = new Map();\n\n for (const option of options) {\n const group = option.group;\n const existing = groupedOptions.get(group);\n if (existing) {\n existing.push(option);\n } else {\n groupedOptions.set(group, [option]);\n }\n }\n\n // If we only have one group (either the undefined group, or a single group), return the original array\n if (groupedOptions.size <= 1) {\n if (options[0]?.group) {\n groupStartIndices.set(options[0]?.group, 0);\n }\n\n return {\n options,\n groupStartIndices,\n };\n }\n\n // 'Preallocate' result array with same size as input - very minor optimization\n const result: Array> = new Array(options.length);\n\n let currentIndex = 0;\n\n // Fill result array with grouped and undefined grouped options\n for (const [group, groupOptions] of groupedOptions) {\n if (group) {\n groupStartIndices.set(group, currentIndex);\n }\n for (const option of groupOptions) {\n result[currentIndex++] = option;\n }\n }\n\n return {\n options: result,\n groupStartIndices,\n };\n}\n","import { cx } from '@emotion/css';\nimport { useVirtualizer, type Range } from '@tanstack/react-virtual';\nimport { useCombobox } from 'downshift';\nimport React, { useCallback, useId, useMemo } from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\nimport { AutoSizeInput } from '../Input/AutoSizeInput';\nimport { Input, Props as InputProps } from '../Input/Input';\nimport { Portal } from '../Portal/Portal';\n\nimport { ComboboxList } from './ComboboxList';\nimport { SuffixIcon } from './SuffixIcon';\nimport { itemToString } from './filter';\nimport { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles';\nimport { ComboboxOption } from './types';\nimport { useComboboxFloat } from './useComboboxFloat';\nimport { useOptions } from './useOptions';\nimport { isNewGroup } from './utils';\n\n// TODO: It would be great if ComboboxOption[\"label\"] was more generic so that if consumers do pass it in (for async),\n// then the onChange handler emits ComboboxOption with the label as non-undefined.\n\ninterface ComboboxStaticProps\n extends Pick<\n InputProps,\n 'placeholder' | 'autoFocus' | 'id' | 'aria-labelledby' | 'disabled' | 'loading' | 'invalid'\n > {\n /**\n * Allows the user to set a value which is not in the list of options.\n */\n createCustomValue?: boolean;\n /**\n * Custom container for rendering the dropdown menu via Portal\n */\n portalContainer?: HTMLElement;\n\n /**\n * An array of options, or a function that returns a promise resolving to an array of options.\n * If a function, it will be called when the menu is opened and on keypress with the current search query.\n */\n options: Array> | ((inputValue: string) => Promise>>);\n\n /**\n * Current selected value. Most consumers should pass a scalar value (string | number). However, sometimes with Async\n * it may be better to pass in an Option with a label to display.\n */\n value?: T | ComboboxOption | null;\n\n /**\n * Defaults to full width of container. Number is a multiple of the spacing unit. 'auto' will size the input to the content.\n * */\n width?: number | 'auto';\n\n ['data-testid']?: string;\n\n /**\n * Called when the input loses focus.\n */\n onBlur?: () => void;\n}\n\ninterface ClearableProps {\n /**\n * An `X` appears in the UI, which clears the input and sets the value to `null`. Do not use if you have no `null` case.\n */\n isClearable: true;\n\n /**\n * onChange handler is called with the newly selected option.\n */\n onChange: (option: ComboboxOption | null) => void;\n}\n\ninterface NotClearableProps {\n /**\n * An `X` appears in the UI, which clears the input and sets the value to `null`. Do not use if you have no `null` case.\n */\n isClearable?: false;\n\n /**\n * onChange handler is called with the newly selected option.\n */\n onChange: (option: ComboboxOption) => void;\n}\n\nexport type ComboboxBaseProps = (ClearableProps | NotClearableProps) &\n ComboboxStaticProps;\n\nexport type AutoSizeConditionals =\n | {\n width: 'auto';\n /**\n * Needs to be set when width is 'auto' to prevent the input from shrinking too much\n */\n minWidth: number;\n /**\n * Recommended to set when width is 'auto' to prevent the input from growing too much.\n */\n maxWidth?: number;\n }\n | {\n width?: number;\n minWidth?: never;\n maxWidth?: never;\n };\n\nexport type ComboboxProps = ComboboxBaseProps & AutoSizeConditionals;\n\nconst noop = () => {};\n\nexport const VIRTUAL_OVERSCAN_ITEMS = 4;\n\n/**\n * A performant Select replacement.\n *\n * @alpha\n */\nexport const Combobox = (props: ComboboxProps) => {\n const {\n options: allOptions,\n onChange,\n value: valueProp,\n placeholder: placeholderProp,\n isClearable, // this should be default false, but TS can't infer the conditional type if you do\n createCustomValue = false,\n id,\n width,\n minWidth,\n maxWidth,\n 'aria-labelledby': ariaLabelledBy,\n 'data-testid': dataTestId,\n autoFocus,\n onBlur,\n disabled,\n portalContainer,\n invalid,\n } = props;\n\n // Value can be an actual scalar Value (string or number), or an Option (value + label), so\n // get a consistent Value from it\n const value = typeof valueProp === 'object' ? valueProp?.value : valueProp;\n const baseId = useId().replace(/:/g, '--');\n\n const {\n options: filteredOptions,\n groupStartIndices,\n updateOptions,\n asyncLoading,\n asyncError,\n } = useOptions(props.options, createCustomValue);\n const isAsync = typeof allOptions === 'function';\n\n const selectedItemIndex = useMemo(() => {\n if (isAsync) {\n return null;\n }\n\n if (valueProp === undefined || valueProp === null) {\n return null;\n }\n\n const index = allOptions.findIndex((option) => option.value === value);\n if (index === -1) {\n return null;\n }\n\n return index;\n }, [valueProp, allOptions, value, isAsync]);\n\n const selectedItem = useMemo(() => {\n if (valueProp === undefined || valueProp === null) {\n return null;\n }\n\n if (selectedItemIndex !== null && !isAsync) {\n return allOptions[selectedItemIndex];\n }\n\n return typeof valueProp === 'object' ? valueProp : { value: valueProp, label: valueProp.toString() };\n }, [selectedItemIndex, isAsync, valueProp, allOptions]);\n\n const menuId = `${baseId}-downshift-menu`;\n const labelId = `${baseId}-downshift-label`;\n\n const styles = useStyles2(getComboboxStyles);\n\n // Injects the group header for the first rendered item into the range to render.\n // Accepts the range that useVirtualizer wants to render, and then returns indexes\n // to actually render.\n const rangeExtractor = useCallback(\n (range: Range) => {\n const startIndex = Math.max(0, range.startIndex - range.overscan);\n const endIndex = Math.min(filteredOptions.length - 1, range.endIndex + range.overscan);\n const rangeToReturn = Array.from({ length: endIndex - startIndex + 1 }, (_, i) => startIndex + i);\n\n // If the first item doesn't have a group, no need to find a header for it\n const firstDisplayedOption = filteredOptions[rangeToReturn[0]];\n if (firstDisplayedOption?.group) {\n const groupStartIndex = groupStartIndices.get(firstDisplayedOption.group);\n if (groupStartIndex !== undefined && groupStartIndex < rangeToReturn[0]) {\n rangeToReturn.unshift(groupStartIndex);\n }\n }\n\n return rangeToReturn;\n },\n [filteredOptions, groupStartIndices]\n );\n\n const rowVirtualizer = useVirtualizer({\n count: filteredOptions.length,\n getScrollElement: () => scrollRef.current,\n estimateSize: (index: number) => {\n const firstGroupItem = isNewGroup(filteredOptions[index], index > 0 ? filteredOptions[index - 1] : undefined);\n const hasDescription = 'description' in filteredOptions[index];\n const hasGroup = 'group' in filteredOptions[index];\n\n let itemHeight = MENU_OPTION_HEIGHT;\n if (hasDescription) {\n itemHeight = MENU_OPTION_HEIGHT_DESCRIPTION;\n }\n if (firstGroupItem && hasGroup) {\n itemHeight += MENU_OPTION_HEIGHT;\n }\n return itemHeight;\n },\n overscan: VIRTUAL_OVERSCAN_ITEMS,\n rangeExtractor,\n });\n\n const {\n isOpen,\n highlightedIndex,\n\n getInputProps,\n getMenuProps,\n getItemProps,\n\n selectItem,\n } = useCombobox({\n menuId,\n labelId,\n inputId: id,\n items: filteredOptions,\n itemToString,\n selectedItem,\n\n // Don't change downshift state in the onBlahChange handlers. Instead, use the stateReducer to make changes.\n // Downshift calls change handlers on the render after so you can get sync/flickering issues if you change its state\n // in them.\n // Instead, stateReducer is called in the same tick as state changes, before that state is committed and rendered.\n\n onSelectedItemChange: ({ selectedItem }) => {\n // `selectedItem` type is `ComboboxOption | null`\n // It can be null when `selectItem()` is called with null, and we never do that unless `isClearable` is true.\n // So, when `isClearable` is false, `selectedItem` is always non-null. However, the types don't reflect that,\n // which is why the conditions are needed.\n //\n // this is an else if because TS can't infer the correct onChange types from\n // (isClearable || selectedItem !== null)\n if (isClearable) {\n // onChange argument type allows null\n onChange(selectedItem);\n } else if (selectedItem !== null) {\n // onChange argument type *does not* allow null\n onChange(selectedItem);\n }\n },\n\n defaultHighlightedIndex: selectedItemIndex ?? 0,\n\n scrollIntoView: () => {},\n\n onIsOpenChange: ({ isOpen, inputValue }) => {\n if (isOpen && inputValue === '') {\n updateOptions(inputValue);\n }\n },\n\n onHighlightedIndexChange: ({ highlightedIndex, type }) => {\n if (type !== useCombobox.stateChangeTypes.MenuMouseLeave) {\n rowVirtualizer.scrollToIndex(highlightedIndex);\n }\n },\n onStateChange: ({ inputValue: newInputValue, type, selectedItem: newSelectedItem }) => {\n switch (type) {\n case useCombobox.stateChangeTypes.InputChange:\n updateOptions(newInputValue ?? '');\n\n break;\n default:\n break;\n }\n },\n stateReducer(state, actionAndChanges) {\n let { changes } = actionAndChanges;\n const menuBeingOpened = state.isOpen === false && changes.isOpen === true;\n const menuBeingClosed = state.isOpen === true && changes.isOpen === false;\n\n // Reset the input value when the menu is opened. If the menu is opened due to an input change\n // then make sure we keep that.\n // This will trigger onInputValueChange to load async options\n if (menuBeingOpened && changes.inputValue === state.inputValue) {\n changes = {\n ...changes,\n inputValue: '',\n };\n }\n\n if (menuBeingClosed) {\n // Flush the selected item to the input when the menu is closed\n if (changes.selectedItem) {\n changes = {\n ...changes,\n inputValue: itemToString(changes.selectedItem),\n };\n } else if (changes.inputValue !== '') {\n // Otherwise if no selected value, clear any search from the input\n changes = {\n ...changes,\n inputValue: '',\n };\n }\n }\n\n return changes;\n },\n });\n\n const { inputRef, floatingRef, floatStyles, scrollRef } = useComboboxFloat(filteredOptions, isOpen);\n\n const isAutoSize = width === 'auto';\n const InputComponent = isAutoSize ? AutoSizeInput : Input;\n const placeholder = (isOpen ? itemToString(selectedItem) : null) || placeholderProp;\n\n const loading = props.loading || asyncLoading;\n\n const inputSuffix = (\n <>\n {value !== undefined && value === selectedItem?.value && isClearable && (\n {\n selectItem(null);\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n selectItem(null);\n }\n }}\n />\n )}\n\n \n \n );\n\n const { Wrapper, wrapperProps } = isAutoSize\n ? {\n Wrapper: 'div',\n wrapperProps: { className: styles.adaptToParent },\n }\n : { Wrapper: React.Fragment };\n\n return (\n \n \n \n \n {isOpen && (\n \n )}\n
\n \n \n );\n};\n","import { css } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\ninterface Props {\n label: string | undefined;\n children?: React.ReactNode;\n}\n\nexport const TimeZoneGroup = (props: Props) => {\n const { children, label } = props;\n const styles = useStyles2(getStyles);\n\n if (!label) {\n return
{children}
;\n }\n\n return (\n
\n
\n {label}\n
\n {children}\n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n header: css({\n padding: '7px 10px',\n width: '100%',\n borderTop: `1px solid ${theme.colors.border.weak}`,\n textTransform: 'capitalize',\n }),\n label: css({\n fontSize: theme.typography.size.sm,\n color: theme.colors.text.secondary,\n fontWeight: theme.typography.fontWeightMedium,\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { isString } from 'lodash';\n\nimport { GrafanaTheme2, TimeZone, dateTimeFormat } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\ninterface Props {\n timestamp: number;\n timeZone: TimeZone | undefined;\n className?: string;\n}\n\nexport const TimeZoneOffset = (props: Props) => {\n const { timestamp, timeZone, className } = props;\n const styles = useStyles2(getStyles);\n\n if (!isString(timeZone)) {\n return null;\n }\n\n return (\n <>\n {formatUtcOffset(timestamp, timeZone)}\n \n );\n};\n\nexport const formatUtcOffset = (timestamp: number, timeZone: TimeZone): string => {\n const offset = dateTimeFormat(timestamp, {\n timeZone,\n format: 'Z',\n });\n\n return `UTC${offset}`;\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const textBase = css({\n fontWeight: 'normal',\n fontSize: theme.typography.size.sm,\n color: theme.colors.text.secondary,\n whiteSpace: 'normal',\n });\n\n return {\n offset: css(textBase, {\n color: theme.colors.text.primary,\n background: theme.colors.background.secondary,\n padding: '2px 5px',\n borderRadius: theme.shape.radius.default,\n marginLeft: '4px',\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport { GrafanaTheme2, TimeZoneInfo } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\ninterface Props {\n info?: TimeZoneInfo;\n}\n\nexport const TimeZoneDescription = ({ info }: Props) => {\n const styles = useStyles2(getStyles);\n const description = useDescription(info);\n\n if (!info) {\n return null;\n }\n\n return
{description}
;\n};\n\nconst useDescription = (info?: TimeZoneInfo): string => {\n return useMemo(() => {\n const parts: string[] = [];\n\n if (!info) {\n return '';\n }\n\n if (info.name === 'Europe/Simferopol') {\n // See https://github.com/grafana/grafana/issues/72031\n return 'Ukraine, EEST';\n }\n\n if (info.countries.length > 0) {\n const country = info.countries[0];\n parts.push(country.name);\n }\n\n if (info.abbreviation) {\n parts.push(info.abbreviation);\n }\n\n return parts.join(', ');\n }, [info]);\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n description: css({\n fontWeight: 'normal',\n fontSize: theme.typography.size.sm,\n color: theme.colors.text.secondary,\n whiteSpace: 'normal',\n textOverflow: 'ellipsis',\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { ReactNode } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\ninterface Props {\n title: string | ReactNode;\n}\n\nexport const TimeZoneTitle = ({ title }: Props) => {\n const styles = useStyles2(getStyles);\n\n if (!title) {\n return null;\n }\n\n return {title};\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n title: css({\n fontWeight: theme.typography.fontWeightRegular,\n textOverflow: 'ellipsis',\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { isString } from 'lodash';\nimport { PropsWithChildren, RefCallback } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Icon } from '../../Icon/Icon';\n\nimport { TimeZoneDescription } from './TimeZoneDescription';\nimport { TimeZoneOffset } from './TimeZoneOffset';\nimport { TimeZoneTitle } from './TimeZoneTitle';\n\ninterface Props {\n isFocused: boolean;\n isSelected: boolean;\n innerProps: JSX.IntrinsicElements['div'];\n innerRef: RefCallback;\n data: SelectableZone;\n}\n\nconst offsetClassName = 'tz-utc-offset';\n\nexport interface SelectableZone extends SelectableValue {\n searchIndex: string;\n}\n\nexport const WideTimeZoneOption = (props: PropsWithChildren) => {\n const { children, innerProps, innerRef, data, isSelected, isFocused } = props;\n const styles = useStyles2(getStyles);\n const timestamp = Date.now();\n const containerStyles = cx(styles.container, isFocused && styles.containerFocused);\n\n if (!isString(data.value)) {\n return null;\n }\n\n const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);\n\n return (\n
\n
\n
\n \n
\n \n
\n
\n \n {isSelected && (\n \n \n \n )}\n
\n
\n
\n );\n};\n\nexport const CompactTimeZoneOption = (props: React.PropsWithChildren) => {\n const { children, innerProps, innerRef, data, isSelected, isFocused } = props;\n const styles = useStyles2(getStyles);\n const timestamp = Date.now();\n const containerStyles = cx(styles.container, isFocused && styles.containerFocused);\n\n if (!isString(data.value)) {\n return null;\n }\n\n const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);\n\n return (\n
\n
\n
\n
\n \n
\n
\n {isSelected && (\n \n \n \n )}\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n container: css({\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'row',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n padding: '6px 8px 4px',\n\n '&:hover': {\n background: theme.colors.action.hover,\n },\n }),\n containerFocused: css({\n background: theme.colors.action.hover,\n }),\n body: css({\n display: 'flex',\n fontWeight: theme.typography.fontWeightMedium,\n flexDirection: 'column',\n flexGrow: 1,\n }),\n row: css({\n display: 'flex',\n flexDirection: 'row',\n }),\n leftColumn: css({\n flexGrow: 1,\n textOverflow: 'ellipsis',\n }),\n rightColumn: css({\n justifyContent: 'flex-end',\n alignItems: 'center',\n }),\n wideRow: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'baseline',\n }),\n spacer: css({\n marginLeft: '6px',\n }),\n});\n","import { toLower, isEmpty, isString } from 'lodash';\nimport { useMemo, useCallback } from 'react';\n\nimport {\n SelectableValue,\n getTimeZoneInfo,\n TimeZoneInfo,\n getTimeZoneGroups,\n GroupedTimeZones,\n TimeZone,\n InternalTimeZones,\n} from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { Select } from '../Select/Select';\n\nimport { TimeZoneGroup } from './TimeZonePicker/TimeZoneGroup';\nimport { formatUtcOffset } from './TimeZonePicker/TimeZoneOffset';\nimport { CompactTimeZoneOption, WideTimeZoneOption, SelectableZone } from './TimeZonePicker/TimeZoneOption';\n\nexport interface Props {\n onChange: (timeZone?: TimeZone) => void;\n value?: TimeZone;\n width?: number;\n autoFocus?: boolean;\n onBlur?: () => void;\n includeInternal?: boolean | InternalTimeZones[];\n disabled?: boolean;\n inputId?: string;\n menuShouldPortal?: boolean;\n openMenuOnFocus?: boolean;\n}\n\nexport const TimeZonePicker = (props: Props) => {\n const {\n onChange,\n width,\n autoFocus = false,\n onBlur,\n value,\n includeInternal = false,\n disabled = false,\n inputId,\n menuShouldPortal = true,\n openMenuOnFocus = true,\n } = props;\n const groupedTimeZones = useTimeZones(includeInternal);\n const selected = useSelectedTimeZone(groupedTimeZones, value);\n const filterBySearchIndex = useFilterBySearchIndex();\n const TimeZoneOption = width && width <= 45 ? CompactTimeZoneOption : WideTimeZoneOption;\n\n const onChangeTz = useCallback(\n (selectable: SelectableValue) => {\n if (!selectable || !isString(selectable.value)) {\n return onChange(value);\n }\n onChange(selectable.value);\n },\n [onChange, value]\n );\n\n return (\n \n );\n};\n\ninterface SelectableZoneGroup extends SelectableValue {\n options: SelectableZone[];\n}\n\nconst useTimeZones = (includeInternal: boolean | InternalTimeZones[]): SelectableZoneGroup[] => {\n const now = Date.now();\n\n const timeZoneGroups = useMemo(() => {\n return getTimeZoneGroups(includeInternal).map((group: GroupedTimeZones) => {\n const options = group.zones.reduce((options: SelectableZone[], zone) => {\n const info = getTimeZoneInfo(zone, now);\n\n if (!info) {\n return options;\n }\n\n const name = info.name.replace(/_/g, ' ');\n\n options.push({\n label: name,\n value: info.zone,\n searchIndex: getSearchIndex(name, info, now),\n });\n\n return options;\n }, []);\n\n return {\n label: group.name,\n options,\n };\n });\n }, [includeInternal, now]);\n\n return timeZoneGroups;\n};\n\nconst useSelectedTimeZone = (\n groups: SelectableZoneGroup[],\n timeZone: TimeZone | undefined\n): SelectableZone | undefined => {\n return useMemo(() => {\n if (timeZone === undefined) {\n return undefined;\n }\n\n const tz = toLower(timeZone);\n\n const group = groups.find((group) => {\n if (!group.label) {\n return isInternal(tz);\n }\n return tz.startsWith(toLower(group.label));\n });\n\n return group?.options.find((option) => {\n if (isEmpty(tz)) {\n return option.value === InternalTimeZones.default;\n }\n return toLower(option.value) === tz;\n });\n }, [groups, timeZone]);\n};\n\nconst isInternal = (timeZone: TimeZone): boolean => {\n switch (timeZone) {\n case InternalTimeZones.default:\n case InternalTimeZones.localBrowserTime:\n case InternalTimeZones.utc:\n return true;\n\n default:\n return false;\n }\n};\n\nconst useFilterBySearchIndex = () => {\n return useCallback((option: SelectableValue, searchQuery: string) => {\n if (!searchQuery || !option.data || !option.data.searchIndex) {\n return true;\n }\n return option.data.searchIndex.indexOf(toLower(searchQuery)) > -1;\n }, []);\n};\n\nconst getSearchIndex = (label: string, info: TimeZoneInfo, timestamp: number): string => {\n const parts: string[] = [\n toLower(info.zone),\n toLower(info.abbreviation),\n toLower(formatUtcOffset(timestamp, info.zone)),\n ];\n\n if (label !== info.zone) {\n parts.push(toLower(label));\n }\n\n for (const country of info.countries) {\n parts.push(toLower(country.name));\n parts.push(toLower(country.code));\n }\n\n return parts.join('|');\n};\n","import { TimeOption } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { ComboboxOption } from '../Combobox/types';\n\nexport const getQuickOptions: () => TimeOption[] = () => [\n { from: 'now-5m', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-5-mins', 'Last 5 minutes') },\n {\n from: 'now-15m',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.last-15-mins', 'Last 15 minutes'),\n },\n {\n from: 'now-30m',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.last-30-mins', 'Last 30 minutes'),\n },\n { from: 'now-1h', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-1-hour', 'Last 1 hour') },\n { from: 'now-3h', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-3-hours', 'Last 3 hours') },\n { from: 'now-6h', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-6-hours', 'Last 6 hours') },\n {\n from: 'now-12h',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.last-12-hours', 'Last 12 hours'),\n },\n {\n from: 'now-24h',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.last-24-hours', 'Last 24 hours'),\n },\n { from: 'now-2d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-2-days', 'Last 2 days') },\n { from: 'now-7d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-7-days', 'Last 7 days') },\n { from: 'now-30d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-30-days', 'Last 30 days') },\n { from: 'now-90d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-90-days', 'Last 90 days') },\n {\n from: 'now-6M',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.last-6-months', 'Last 6 months'),\n },\n { from: 'now-1y', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-1-year', 'Last 1 year') },\n { from: 'now-2y', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-2-years', 'Last 2 years') },\n { from: 'now-5y', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.last-5-years', 'Last 5 years') },\n { from: 'now-1d/d', to: 'now-1d/d', display: t('grafana-ui.date-time-pickers.quick-options.yesterday', 'Yesterday') },\n {\n from: 'now-2d/d',\n to: 'now-2d/d',\n display: t('grafana-ui.date-time-pickers.quick-options.day-before-yesterday', 'Day before yesterday'),\n },\n {\n from: 'now-7d/d',\n to: 'now-7d/d',\n display: t('grafana-ui.date-time-pickers.quick-options.this-day-last-week', 'This day last week'),\n },\n {\n from: 'now-1w/w',\n to: 'now-1w/w',\n display: t('grafana-ui.date-time-pickers.quick-options.previous-week', 'Previous week'),\n },\n {\n from: 'now-1M/M',\n to: 'now-1M/M',\n display: t('grafana-ui.date-time-pickers.quick-options.previous-month', 'Previous month'),\n },\n {\n from: 'now-1Q/fQ',\n to: 'now-1Q/fQ',\n display: t('grafana-ui.date-time-pickers.quick-options.previous-fiscal-quarter', 'Previous fiscal quarter'),\n },\n {\n from: 'now-1y/y',\n to: 'now-1y/y',\n display: t('grafana-ui.date-time-pickers.quick-options.previous-year', 'Previous year'),\n },\n {\n from: 'now-1y/fy',\n to: 'now-1y/fy',\n display: t('grafana-ui.date-time-pickers.quick-options.previous-fiscal-year', 'Previous fiscal year'),\n },\n { from: 'now/d', to: 'now/d', display: t('grafana-ui.date-time-pickers.quick-options.today', 'Today') },\n { from: 'now/d', to: 'now', display: t('grafana-ui.date-time-pickers.quick-options.today-so-far', 'Today so far') },\n { from: 'now/w', to: 'now/w', display: t('grafana-ui.date-time-pickers.quick-options.this-week', 'This week') },\n {\n from: 'now/w',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.this-week-so-far', 'This week so far'),\n },\n { from: 'now/M', to: 'now/M', display: t('grafana-ui.date-time-pickers.quick-options.this-month', 'This month') },\n {\n from: 'now/M',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.this-month-so-far', 'This month so far'),\n },\n { from: 'now/y', to: 'now/y', display: t('grafana-ui.date-time-pickers.quick-options.this-year', 'This year') },\n {\n from: 'now/y',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.this-year-so-far', 'This year so far'),\n },\n {\n from: 'now/fQ',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.this-fiscal-quarter-so-far', 'This fiscal quarter so far'),\n },\n {\n from: 'now/fQ',\n to: 'now/fQ',\n display: t('grafana-ui.date-time-pickers.quick-options.this-fiscal-quarter', 'This fiscal quarter'),\n },\n {\n from: 'now/fy',\n to: 'now',\n display: t('grafana-ui.date-time-pickers.quick-options.this-fiscal-year-so-far', 'This fiscal year so far'),\n },\n {\n from: 'now/fy',\n to: 'now/fy',\n display: t('grafana-ui.date-time-pickers.quick-options.this-fiscal-year', 'This fiscal year'),\n },\n];\n\nexport const getMonthOptions: () => Array> = () => [\n { label: t('grafana-ui.date-time-pickers.month-options.label-january', 'January'), value: 0 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-february', 'February'), value: 1 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-march', 'March'), value: 2 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-april', 'April'), value: 3 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-may', 'May'), value: 4 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-june', 'June'), value: 5 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-july', 'July'), value: 6 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-august', 'August'), value: 7 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-september', 'September'), value: 8 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-october', 'October'), value: 9 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-november', 'November'), value: 10 },\n { label: t('grafana-ui.date-time-pickers.month-options.label-december', 'December'), value: 11 },\n];\n","import { css, cx } from '@emotion/css';\nimport { isString } from 'lodash';\nimport { useCallback, useId, useState } from 'react';\nimport * as React from 'react';\n\nimport { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Button } from '../../Button/Button';\nimport { Combobox } from '../../Combobox/Combobox';\nimport { Field } from '../../Forms/Field';\nimport { Tab } from '../../Tabs/Tab';\nimport { TabContent } from '../../Tabs/TabContent';\nimport { TabsBar } from '../../Tabs/TabsBar';\nimport { TimeZonePicker } from '../TimeZonePicker';\nimport { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';\nimport { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset';\nimport { TimeZoneTitle } from '../TimeZonePicker/TimeZoneTitle';\nimport { getMonthOptions } from '../options';\n\ninterface Props {\n timeZone?: TimeZone;\n fiscalYearStartMonth?: number;\n timestamp?: number;\n onChangeTimeZone: (timeZone: TimeZone) => void;\n onChangeFiscalYearStartMonth?: (month: number) => void;\n}\n\nexport const TimePickerFooter = (props: Props) => {\n const {\n timeZone,\n fiscalYearStartMonth,\n timestamp = Date.now(),\n onChangeTimeZone,\n onChangeFiscalYearStartMonth,\n } = props;\n const [isEditing, setEditing] = useState(false);\n const [editMode, setEditMode] = useState('tz');\n\n const timeSettingsId = useId();\n const timeZoneSettingsId = useId();\n const fiscalYearSettingsId = useId();\n\n const onToggleChangeTimeSettings = useCallback(\n (event?: React.MouseEvent) => {\n if (event) {\n event.stopPropagation();\n }\n setEditing(!isEditing);\n },\n [isEditing, setEditing]\n );\n\n const style = useStyles2(getStyle);\n\n if (!isString(timeZone)) {\n return null;\n }\n\n const info = getTimeZoneInfo(timeZone, timestamp);\n\n if (!info) {\n return null;\n }\n\n return (\n
\n \n
\n
\n \n
\n \n
\n \n
\n
\n \n Change time settings\n \n \n {isEditing ? (\n
\n \n {\n setEditMode('tz');\n }}\n aria-controls={timeZoneSettingsId}\n />\n {\n setEditMode('fy');\n }}\n aria-controls={fiscalYearSettingsId}\n />\n \n \n {editMode === 'tz' ? (\n \n {\n onToggleChangeTimeSettings();\n\n if (isString(timeZone)) {\n onChangeTimeZone(timeZone);\n }\n }}\n onBlur={onToggleChangeTimeSettings}\n menuShouldPortal={false}\n />\n \n ) : (\n \n \n {\n if (onChangeFiscalYearStartMonth) {\n onChangeFiscalYearStartMonth(value?.value ?? 0);\n }\n }}\n />\n \n \n )}\n \n
\n ) : null}\n
\n );\n};\n\nconst getStyle = (theme: GrafanaTheme2) => ({\n container: css({\n borderTop: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(1.5),\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n }),\n editContainer: css({\n borderTop: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(1.5),\n paddingTop: 0,\n justifyContent: 'space-between',\n alignItems: 'center',\n }),\n spacer: css({\n marginLeft: '7px',\n }),\n timeSettingContainer: css({\n paddingTop: theme.spacing(1),\n }),\n noBackground: css({\n background: 'inherit',\n }),\n fiscalYearField: css({\n marginBottom: 0,\n }),\n timeZoneContainer: css({\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexGrow: 1,\n }),\n timeZone: css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'baseline',\n flexGrow: 1,\n }),\n});\n","import { css } from '@emotion/css';\nimport { memo, PropsWithChildren } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n text: css({\n fontSize: theme.typography.size.md,\n fontWeight: theme.typography.fontWeightMedium,\n color: theme.colors.text.primary,\n margin: 0,\n display: 'flex',\n }),\n };\n};\n\nexport const TimePickerTitle = memo>(({ children }) => {\n const styles = useStyles2(getStyles);\n\n return

{children}

;\n});\n\nTimePickerTitle.displayName = 'TimePickerTitle';\n","import { FeatureToggles } from '@grafana/data';\n\ntype FeatureToggleName = keyof FeatureToggles;\n\n/**\n * Check a featureToggle\n * @param featureName featureToggle name\n * @param def default value if featureToggles aren't defined, false if not provided\n * @returns featureToggle value or def.\n */\nexport function getFeatureToggle(featureName: FeatureToggleName, def = false) {\n return window.grafanaBootData?.settings.featureToggles[featureName] ?? def;\n}\n","import { getFeatureToggle } from '../../utils/featureToggle';\n\n// The moment.js format to use for datetime inputs when the regionalFormat option is set.\nconst COMMON_FORMAT = 'YYYY-MM-DD HH:mm:ss';\n\nexport const commonFormat = getFeatureToggle('localeFormatPreference') ? COMMON_FORMAT : undefined;\n","import { dateMath, dateTimeParse, isDateTime, TimeRange, TimeZone } from '@grafana/data';\n\nimport { commonFormat } from './commonFormat';\n\nexport function isValid(value: string, roundUp?: boolean, timeZone?: TimeZone): boolean {\n if (isDateTime(value)) {\n return value.isValid();\n }\n\n // handles `now` math\n if (dateMath.isMathString(value)) {\n return dateMath.isValid(value);\n }\n\n const parsed = dateTimeParse(value, { roundUp, timeZone, format: commonFormat });\n return parsed.isValid();\n}\n\nexport function isValidTimeRange(range: TimeRange) {\n return dateMath.isValid(range.from) && dateMath.isValid(range.to);\n}\n","import { useCallback, useMemo } from 'react';\n\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { Combobox } from '../Combobox/Combobox';\nimport { ComboboxOption } from '../Combobox/types';\n\nexport interface Props {\n onChange: (weekStart?: WeekStart) => void;\n value?: WeekStart;\n width?: number;\n autoFocus?: boolean;\n onBlur?: () => void;\n disabled?: boolean;\n inputId?: string;\n}\n\nexport type WeekStart = 'saturday' | 'sunday' | 'monday';\n\nexport function isWeekStart(value: string): value is WeekStart {\n return ['saturday', 'sunday', 'monday'].includes(value);\n}\n\n/**\n * Returns the system or user defined week start (as defined in bootData)\n * Or you can pass in an override weekStart string and have it be validated and returned as WeekStart type if valid\n */\nexport function getWeekStart(override?: string): WeekStart {\n if (override && isWeekStart(override)) {\n return override;\n }\n\n const preference = window?.grafanaBootData?.user?.weekStart;\n if (preference && isWeekStart(preference)) {\n return preference;\n }\n\n return 'monday';\n}\n\nexport const WeekStartPicker = (props: Props) => {\n const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;\n const weekStarts: ComboboxOption[] = useMemo(\n () => [\n { value: '', label: t('grafana-ui.week-start-picker.weekStarts-label-default', 'Default') },\n { value: 'saturday', label: t('grafana-ui.week-start-picker.weekStarts-label-saturday', 'Saturday') },\n { value: 'sunday', label: t('grafana-ui.week-start-picker.weekStarts-label-sunday', 'Sunday') },\n { value: 'monday', label: t('grafana-ui.week-start-picker.weekStarts-label-monday', 'Monday') },\n ],\n []\n );\n\n const onChangeWeekStart = useCallback(\n (selectable: ComboboxOption | null) => {\n if (selectable && selectable.value !== undefined) {\n onChange(isWeekStart(selectable.value) ? selectable.value : undefined);\n }\n },\n [onChange]\n );\n\n const selected = useMemo(() => weekStarts.find((item) => item.value === value)?.value ?? '', [value, weekStarts]);\n\n return (\n \n );\n};\n","import { getZone } from '@grafana/data';\n\n/**\n * React calendar doesn't support showing dates in other time zones, so attempting to show\n * values near midnight in another time zone than your browsers may end up showing the wrong date\n *\n * This function adjusts a date by \"moving\" the time to appear as if it's local.\n * e.g. make 5 PM New York \"look like\" 5 PM in the user's local browser time.\n * See also https://github.com/wojtekmaj/react-calendar/issues/511#issuecomment-835333976\n */\nexport function adjustDateForReactCalendar(date: Date, timeZone: string): Date {\n const zone = getZone(timeZone);\n if (!zone) {\n return date;\n }\n\n // get utc offset for timezone preference\n const timezonePrefOffset = zone.utcOffset(date.getTime());\n\n // get utc offset for local timezone\n const localOffset = date.getTimezoneOffset();\n\n // calculate difference between timezone preference and local timezone\n const diff = timezonePrefOffset - localOffset;\n\n const newDate = new Date(date.getTime() - diff * 1000 * 60);\n return newDate;\n}\n","import { css } from '@emotion/css';\nimport { useCallback } from 'react';\nimport Calendar, { CalendarType } from 'react-calendar';\n\nimport { GrafanaTheme2, dateTimeParse, DateTime, TimeZone } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Icon } from '../../Icon/Icon';\nimport { getWeekStart, WeekStart } from '../WeekStartPicker';\nimport { adjustDateForReactCalendar } from '../utils/adjustDateForReactCalendar';\n\nimport { TimePickerCalendarProps } from './TimePickerCalendar';\n\nconst weekStartMap: Record = {\n saturday: 'islamic',\n sunday: 'gregory',\n monday: 'iso8601',\n};\n\nexport function Body({ onChange, from, to, timeZone, weekStart }: TimePickerCalendarProps) {\n const value = inputToValue(from, to, new Date(), timeZone);\n const onCalendarChange = useOnCalendarChange(onChange, timeZone);\n const styles = useStyles2(getBodyStyles);\n const weekStartValue = getWeekStart(weekStart);\n\n return (\n }\n nextAriaLabel={t('time-picker.calendar.next-month', 'Next month')}\n prevLabel={}\n prevAriaLabel={t('time-picker.calendar.previous-month', 'Previous month')}\n onChange={onCalendarChange}\n locale=\"en\"\n calendarType={weekStartMap[weekStartValue]}\n />\n );\n}\n\nBody.displayName = 'Body';\n\nexport function inputToValue(\n from: DateTime,\n to: DateTime,\n invalidDateDefault: Date = new Date(),\n timezone?: string\n): [Date, Date] {\n let fromAsDate = from.isValid() ? from.toDate() : invalidDateDefault;\n let toAsDate = to.isValid() ? to.toDate() : invalidDateDefault;\n\n if (timezone) {\n fromAsDate = adjustDateForReactCalendar(fromAsDate, timezone);\n toAsDate = adjustDateForReactCalendar(toAsDate, timezone);\n }\n\n if (fromAsDate > toAsDate) {\n return [toAsDate, fromAsDate];\n }\n\n return [fromAsDate, toAsDate];\n}\n\nfunction useOnCalendarChange(onChange: (from: DateTime, to: DateTime) => void, timeZone?: TimeZone) {\n return useCallback['onChange']>>(\n (value) => {\n if (!Array.isArray(value)) {\n return console.error('onCalendarChange: should be run in selectRange={true}');\n }\n\n if (value[0] && value[1]) {\n const from = dateTimeParse(dateInfo(value[0]), { timeZone });\n const to = dateTimeParse(dateInfo(value[1]), { timeZone });\n\n onChange(from, to);\n }\n },\n [onChange, timeZone]\n );\n}\n\nfunction dateInfo(date: Date): number[] {\n return [date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()];\n}\n\nexport const getBodyStyles = (theme: GrafanaTheme2) => {\n // If a time range is part of only 1 day but does not encompass the whole day,\n // the class that react-calendar uses is '--hasActive' by itself (without being part of a '--range')\n const hasActiveSelector = `.react-calendar__tile--hasActive:not(.react-calendar__tile--range)`;\n\n return {\n title: css({\n color: theme.colors.text.primary,\n backgroundColor: theme.colors.background.primary,\n fontSize: theme.typography.size.md,\n border: '1px solid transparent',\n\n '&:hover, &:focus': {\n position: 'relative',\n },\n\n '&:disabled': {\n color: theme.colors.action.disabledText,\n cursor: 'not-allowed',\n },\n }),\n body: css({\n zIndex: theme.zIndex.modal,\n backgroundColor: theme.colors.background.elevated,\n width: '268px',\n\n '.react-calendar__navigation': {\n display: 'flex',\n },\n\n '.react-calendar__navigation__label, .react-calendar__navigation__arrow, .react-calendar__navigation': {\n paddingTop: '4px',\n backgroundColor: 'inherit',\n color: theme.colors.text.primary,\n border: 0,\n fontWeight: theme.typography.fontWeightMedium,\n },\n\n '.react-calendar__month-view__weekdays': {\n backgroundColor: 'inherit',\n textAlign: 'center',\n color: theme.colors.primary.text,\n\n abbr: {\n border: 0,\n textDecoration: 'none',\n cursor: 'default',\n display: 'block',\n padding: '4px 0 4px 0',\n },\n },\n\n '.react-calendar__month-view__days': {\n backgroundColor: 'inherit',\n },\n\n '.react-calendar__tile, .react-calendar__tile--now': {\n marginBottom: '4px',\n backgroundColor: 'inherit',\n height: '26px',\n },\n\n '.react-calendar__navigation__label, .react-calendar__navigation > button:focus, .time-picker-calendar-tile:focus':\n {\n outline: 0,\n },\n\n // The --hover modifier is active when the user is selecting a range and hovering over a tile - it shows the pending range.\n // It is applied to all dates between the clicked date and the hovered date.\n // The *clicked* date should have primary bg, while *pending* range dates should have hover bg.\n '.react-calendar__tile--hover': {\n backgroundColor: theme.colors.action.hover,\n // eslint-disable-next-line @grafana/no-border-radius-literal\n borderRadius: 0,\n },\n\n '.react-calendar__tile--hoverStart': {\n borderTopLeftRadius: theme.shape.radius.pill,\n borderBottomLeftRadius: theme.shape.radius.pill,\n },\n\n '.react-calendar__tile--hoverEnd': {\n borderTopRightRadius: theme.shape.radius.pill,\n borderBottomRightRadius: theme.shape.radius.pill,\n },\n\n // Addiitonally, when hovering a date before clicking any, it should show the hover bg.\n '.react-calendar__tile:hover:not(.react-calendar__tile--hover):not(.react-calendar__tile--active):not(.react-calendar__tile--hasActive)':\n {\n backgroundColor: theme.colors.action.hover,\n borderRadius: theme.shape.radius.pill,\n },\n\n // When the user is selecting a range (they've clicked one date, tiles have --hover), both --rangeStart and --rangeEnd are on the tile.\n // The --hover classes above handle the rounding of the tiles so they're contigious with the range\n [`${hasActiveSelector}, .react-calendar__tile--rangeStart:not(.react-calendar__tile--hover)`]: {\n borderTopLeftRadius: theme.shape.radius.pill,\n borderBottomLeftRadius: theme.shape.radius.pill,\n },\n\n [`${hasActiveSelector}, .react-calendar__tile--rangeEnd:not(.react-calendar__tile--hover)`]: {\n borderTopRightRadius: theme.shape.radius.pill,\n borderBottomRightRadius: theme.shape.radius.pill,\n },\n\n [`${hasActiveSelector}, .react-calendar__tile--active, .react-calendar__tile--rangeEnd, .react-calendar__tile--rangeStart`]:\n {\n color: theme.colors.primary.contrastText,\n fontWeight: theme.typography.fontWeightMedium,\n background: theme.colors.primary.main,\n border: '0px',\n },\n }),\n };\n};\n","import { Trans } from '@grafana/i18n';\n\nimport { Button } from '../../Button/Button';\nimport { Stack } from '../../Layout/Stack/Stack';\n\nimport { TimePickerCalendarProps } from './TimePickerCalendar';\n\nexport function Footer({ onClose, onApply }: TimePickerCalendarProps) {\n return (\n \n \n\n \n \n );\n}\n\nFooter.displayName = 'Footer';\n","import { selectors } from '@grafana/e2e-selectors';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Stack } from '../../Layout/Stack/Stack';\n\nimport { TimePickerCalendarProps } from './TimePickerCalendar';\nimport { TimePickerTitle } from './TimePickerTitle';\n\nexport function Header({ onClose }: TimePickerCalendarProps) {\n return (\n \n \n Select a time range\n \n\n \n \n );\n}\n\nHeader.displayName = 'Header';\n","import { css } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useOverlay } from '@react-aria/overlays';\nimport { createRef, FormEvent, memo } from 'react';\n\nimport { DateTime, GrafanaTheme2, TimeZone } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { getModalStyles } from '../../Modal/getModalStyles';\nimport { WeekStart } from '../WeekStartPicker';\n\nimport { Body } from './CalendarBody';\nimport { Footer } from './CalendarFooter';\nimport { Header } from './CalendarHeader';\n\nexport const getStyles = (theme: GrafanaTheme2, isReversed = false) => {\n return {\n container: css({\n top: 0,\n position: 'absolute',\n [`${isReversed ? 'left' : 'right'}`]: '546px', // lmao\n }),\n\n modalContainer: css({\n label: 'modalContainer',\n margin: '0 auto',\n }),\n\n calendar: css({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1),\n padding: theme.spacing(1),\n label: 'calendar',\n boxShadow: theme.shadows.z3,\n backgroundColor: theme.colors.background.elevated,\n border: `1px solid ${theme.colors.border.weak}`,\n borderRadius: theme.shape.radius.default,\n }),\n\n modal: css({\n label: 'modal',\n boxShadow: theme.shadows.z3,\n left: '50%',\n position: 'fixed',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: theme.zIndex.modal,\n }),\n };\n};\n\nexport interface TimePickerCalendarProps {\n isOpen: boolean;\n from: DateTime;\n to: DateTime;\n onClose: () => void;\n onApply: (e: FormEvent) => void;\n onChange: (from: DateTime, to: DateTime) => void;\n weekStart?: WeekStart;\n\n /**\n * When true, the calendar is rendered as a floating \"tooltip\" next to the input.\n * When false, the calendar is rendered \"fullscreen\" in a modal. Yes. Don't ask.\n */\n isFullscreen: boolean;\n timeZone?: TimeZone;\n isReversed?: boolean;\n}\n\nfunction TimePickerCalendar(props: TimePickerCalendarProps) {\n const theme = useTheme2();\n const { modalBackdrop } = useStyles2(getModalStyles);\n const styles = getStyles(theme, props.isReversed);\n const { isOpen, isFullscreen: isFullscreenProp, onClose } = props;\n const ref = createRef();\n const { dialogProps } = useDialog(\n {\n 'aria-label': selectors.components.TimePicker.calendar.label,\n },\n ref\n );\n const { overlayProps } = useOverlay(\n {\n isDismissable: true,\n isOpen,\n onClose,\n },\n ref\n );\n\n // This prop is confusingly worded, so rename it to something more intuitive.\n const showInModal = !isFullscreenProp;\n\n if (!isOpen) {\n return null;\n }\n\n const calendar = (\n \n
\n \n {showInModal &&
}\n \n );\n\n if (!showInModal) {\n return (\n \n
{calendar}
\n \n );\n }\n\n return (\n \n
\n\n \n
\n
{calendar}
\n
\n \n \n );\n}\nexport default memo(TimePickerCalendar);\nTimePickerCalendar.displayName = 'TimePickerCalendar';\n","import { css } from '@emotion/css';\nimport { FormEvent, useCallback, useEffect, useId, useState } from 'react';\nimport * as React from 'react';\n\nimport {\n DateTime,\n dateTimeFormat,\n dateTimeParse,\n GrafanaTheme2,\n isDateTime,\n rangeUtil,\n RawTimeRange,\n TimeRange,\n TimeZone,\n} from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Button } from '../../Button/Button';\nimport { Field } from '../../Forms/Field';\nimport { Icon } from '../../Icon/Icon';\nimport { Input } from '../../Input/Input';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { WeekStart } from '../WeekStartPicker';\nimport { commonFormat } from '../commonFormat';\nimport { isValid } from '../utils';\n\nimport TimePickerCalendar from './TimePickerCalendar';\n\ninterface Props {\n isFullscreen: boolean;\n value: TimeRange;\n onApply: (range: TimeRange) => void;\n timeZone?: TimeZone;\n fiscalYearStartMonth?: number;\n roundup?: boolean;\n isReversed?: boolean;\n onError?: (error?: string) => void;\n weekStart?: WeekStart;\n}\n\ninterface InputState {\n value: string;\n invalid: boolean;\n errorMessage: string;\n}\n\nconst ERROR_MESSAGES = {\n default: () => t('time-picker.range-content.default-error', 'Please enter a past date or \"{{now}}\"', { now: 'now' }),\n range: () => t('time-picker.range-content.range-error', '\"From\" can\\'t be after \"To\"'),\n};\n\nexport const TimeRangeContent = (props: Props) => {\n const {\n value,\n isFullscreen = false,\n timeZone,\n onApply: onApplyFromProps,\n isReversed,\n fiscalYearStartMonth,\n onError,\n weekStart,\n } = props;\n const [fromValue, toValue] = valueToState(value.raw.from, value.raw.to, timeZone);\n const style = useStyles2(getStyles);\n\n const [from, setFrom] = useState(fromValue);\n const [to, setTo] = useState(toValue);\n const [isOpen, setOpen] = useState(false);\n\n const fromFieldId = useId();\n const toFieldId = useId();\n\n // Synchronize internal state with external value\n useEffect(() => {\n const [fromValue, toValue] = valueToState(value.raw.from, value.raw.to, timeZone);\n setFrom(fromValue);\n setTo(toValue);\n }, [value.raw.from, value.raw.to, timeZone]);\n\n const onOpen = useCallback(\n (event: FormEvent) => {\n event.preventDefault();\n setOpen(true);\n },\n [setOpen]\n );\n\n const onApply = useCallback(() => {\n if (to.invalid || from.invalid) {\n return;\n }\n\n const raw: RawTimeRange = { from: from.value, to: to.value };\n const timeRange = rangeUtil.convertRawToRange(raw, timeZone, fiscalYearStartMonth, commonFormat);\n\n onApplyFromProps(timeRange);\n }, [from.invalid, from.value, onApplyFromProps, timeZone, to.invalid, to.value, fiscalYearStartMonth]);\n\n const onChange = useCallback(\n (from: DateTime | string, to: DateTime | string) => {\n const [fromValue, toValue] = valueToState(from, to, timeZone);\n setFrom(fromValue);\n setTo(toValue);\n },\n [timeZone]\n );\n\n const submitOnEnter = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n onApply();\n }\n };\n\n const onCopy = () => {\n const rawSource: RawTimeRange = value.raw;\n const clipboardPayload = rangeUtil.formatRawTimeRange(rawSource);\n navigator.clipboard.writeText(JSON.stringify(clipboardPayload));\n };\n\n const onPaste = async () => {\n const raw = await navigator.clipboard.readText();\n let range;\n\n try {\n range = JSON.parse(raw);\n } catch (error) {\n if (onError) {\n onError(raw);\n }\n return;\n }\n\n const [fromValue, toValue] = valueToState(range.from, range.to, timeZone);\n setFrom(fromValue);\n setTo(toValue);\n };\n\n const fiscalYear = rangeUtil.convertRawToRange({ from: 'now/fy', to: 'now/fy' }, timeZone, fiscalYearStartMonth);\n\n const fyTooltip = (\n
\n {rangeUtil.isFiscal(value) ? (\n \n \n \n ) : null}\n
\n );\n\n const icon = (\n \n );\n\n return (\n
\n
\n \n event.stopPropagation()}\n onChange={(event) => onChange(event.currentTarget.value, to.value)}\n addonAfter={icon}\n onKeyDown={submitOnEnter}\n data-testid={selectors.components.TimePicker.fromField}\n value={from.value}\n />\n \n {fyTooltip}\n
\n
\n \n event.stopPropagation()}\n onChange={(event) => onChange(from.value, event.currentTarget.value)}\n addonAfter={icon}\n onKeyDown={submitOnEnter}\n data-testid={selectors.components.TimePicker.toField}\n value={to.value}\n />\n \n {fyTooltip}\n
\n
\n \n \n \n
\n\n setOpen(false)}\n onChange={onChange}\n timeZone={timeZone}\n isReversed={isReversed}\n weekStart={weekStart}\n />\n
\n );\n};\n\nfunction isRangeInvalid(from: string, to: string, timezone?: string): boolean {\n const raw: RawTimeRange = { from, to };\n const timeRange = rangeUtil.convertRawToRange(raw, timezone, undefined, commonFormat);\n const valid = timeRange.from.isSame(timeRange.to) || timeRange.from.isBefore(timeRange.to);\n\n return !valid;\n}\n\nfunction valueToState(\n rawFrom: DateTime | string,\n rawTo: DateTime | string,\n timeZone?: TimeZone\n): [InputState, InputState] {\n const fromValue = valueAsString(rawFrom, timeZone);\n const toValue = valueAsString(rawTo, timeZone);\n const fromInvalid = !isValid(fromValue, false, timeZone);\n const toInvalid = !isValid(toValue, true, timeZone);\n // If \"To\" is invalid, we should not check the range anyways\n const rangeInvalid = isRangeInvalid(fromValue, toValue, timeZone) && !toInvalid;\n\n return [\n {\n value: fromValue,\n invalid: fromInvalid || rangeInvalid,\n errorMessage: rangeInvalid && !fromInvalid ? ERROR_MESSAGES.range() : ERROR_MESSAGES.default(),\n },\n { value: toValue, invalid: toInvalid, errorMessage: ERROR_MESSAGES.default() },\n ];\n}\n\nfunction valueAsString(value: DateTime | string, timeZone?: TimeZone): string {\n if (isDateTime(value)) {\n return dateTimeFormat(value, { timeZone, format: commonFormat });\n }\n\n if (value.endsWith('Z')) {\n const dt = dateTimeParse(value);\n return dateTimeFormat(dt, { timeZone, format: commonFormat });\n }\n\n return value;\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n fieldContainer: css({\n display: 'flex',\n }),\n buttonsContainer: css({\n display: 'flex',\n gap: theme.spacing(0.5),\n marginTop: theme.spacing(1),\n }),\n tooltip: css({\n paddingLeft: theme.spacing(1),\n paddingTop: theme.spacing(3),\n }),\n };\n}\n","import { css, cx } from '@emotion/css';\nimport { memo } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { GrafanaTheme2, TimeOption } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { getFocusStyles } from '../../../themes/mixins';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n position: 'relative',\n }),\n radio: css({\n opacity: 0,\n width: '0 !important',\n '&:focus-visible + label': getFocusStyles(theme),\n }),\n label: css({\n cursor: 'pointer',\n flex: 1,\n padding: theme.spacing(1),\n borderRadius: theme.shape.radius.default,\n\n '&:hover': {\n background: theme.colors.action.hover,\n cursor: 'pointer',\n },\n }),\n labelSelected: css({\n background: theme.colors.action.selected,\n\n '&::before': {\n backgroundImage: theme.colors.gradients.brandVertical,\n borderRadius: theme.shape.radius.default,\n content: '\" \"',\n display: 'block',\n height: '100%',\n position: 'absolute',\n width: theme.spacing(0.5),\n left: 0,\n top: 0,\n },\n }),\n };\n};\n\ninterface Props {\n value: TimeOption;\n selected?: boolean;\n onSelect: (option: TimeOption) => void;\n /**\n * Input identifier. This should be the same for all options in a group.\n */\n name: string;\n}\n\nexport const TimeRangeOption = memo(({ value, onSelect, selected = false, name }) => {\n const styles = useStyles2(getStyles);\n // In case there are more of the same timerange in the list\n const id = uuidv4();\n\n return (\n
  • \n onSelect(value)}\n />\n \n
    • \n );\n});\n\nTimeRangeOption.displayName = 'TimeRangeOption';\n","import { RefObject, useEffect, useState } from 'react';\n\nimport { TimeOption } from '@grafana/data';\n\nconst modulo = (a: number, n: number) => ((a % n) + n) % n;\nconst CAUGHT_KEYS = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', 'Tab'];\n\n/** @internal */\nexport interface UseListFocusProps {\n localRef: RefObject;\n options: TimeOption[];\n}\n\n/** @internal */\nexport type UseListFocusReturn = [(event: React.KeyboardEvent) => void];\n\n/** @internal */\nexport const useListFocus = ({ localRef, options }: UseListFocusProps): UseListFocusReturn => {\n const [focusedItem, setFocusedItem] = useState(0);\n\n useEffect(() => {\n const items = localRef.current?.querySelectorAll('[data-role=\"item\"]') || [];\n const checkedIndex = Array.from(items).findIndex((item) => item.checked);\n const newFocusedIndex = checkedIndex >= 0 ? checkedIndex : 0;\n items.forEach((item, i) => {\n item.tabIndex = i === newFocusedIndex ? 0 : -1;\n });\n // Reset focused item when options have changed\n setFocusedItem(newFocusedIndex);\n }, [localRef, options]);\n\n const handleKeys = (event: React.KeyboardEvent) => {\n const items = localRef?.current?.querySelectorAll('[data-role=\"item\"]');\n const itemsCount = items?.length ?? 0;\n\n if (CAUGHT_KEYS.indexOf(event.key) > -1) {\n event.preventDefault();\n if (event.key !== 'Tab') {\n event.stopPropagation();\n }\n }\n\n let newFocusedIndex = null;\n\n switch (event.key) {\n case 'ArrowUp':\n newFocusedIndex = modulo(focusedItem - 1, itemsCount);\n break;\n case 'ArrowDown':\n newFocusedIndex = modulo(focusedItem + 1, itemsCount);\n break;\n case 'Home':\n newFocusedIndex = 0;\n break;\n case 'End':\n newFocusedIndex = itemsCount - 1;\n break;\n case 'Enter':\n items?.[focusedItem]?.click();\n break;\n default:\n break;\n }\n\n if (newFocusedIndex !== null) {\n setFocusedItem(newFocusedIndex);\n items?.[newFocusedIndex]?.focus();\n items?.forEach((item, i) => {\n item.tabIndex = i === newFocusedIndex ? 0 : -1;\n });\n }\n };\n\n return [handleKeys];\n};\n","import { css } from '@emotion/css';\nimport { useRef, ReactNode } from 'react';\n\nimport { GrafanaTheme2, TimeOption } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nimport { TimePickerTitle } from './TimePickerTitle';\nimport { TimeRangeOption } from './TimeRangeOption';\nimport { useListFocus } from './hooks';\n\ninterface Props {\n title?: string;\n options: TimeOption[];\n value?: TimeOption;\n onChange: (option: TimeOption) => void;\n placeholderEmpty?: ReactNode;\n}\n\nexport const TimeRangeList = (props: Props) => {\n const styles = useStyles2(getStyles);\n const { title, options, placeholderEmpty } = props;\n\n if (typeof placeholderEmpty !== 'undefined' && options.length <= 0) {\n return <>{placeholderEmpty};\n }\n\n if (!title) {\n return ;\n }\n\n return (\n
    \n
    \n
    \n {title}\n
    \n \n
    \n
    \n );\n};\n\nconst Options = ({ options, value, onChange, title }: Props) => {\n const styles = useStyles2(getOptionsStyles);\n\n const localRef = useRef(null);\n const [handleKeys] = useListFocus({ localRef, options });\n\n return (\n <>\n \n {options.map((option, index) => (\n \n ))}\n \n \n );\n};\n\nfunction keyForOption(option: TimeOption, index: number): string {\n return `${option.from}-${option.to}-${index}`;\n}\n\nfunction isEqual(x: TimeOption, y?: TimeOption): boolean {\n if (!y || !x) {\n return false;\n }\n return y.from === x.from && y.to === x.to;\n}\n\nconst getStyles = () => ({\n title: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '8px 16px 5px 9px',\n }),\n});\n\nconst getOptionsStyles = (theme: GrafanaTheme2) => ({\n list: css({\n padding: theme.spacing(0.5),\n }),\n});\n","import { TimeOption, TimeRange, TimeZone, rangeUtil, dateTimeFormat } from '@grafana/data';\n\nimport { getFeatureToggle } from '../../../utils/featureToggle';\nimport { commonFormat } from '../commonFormat';\n\n/**\n * Takes a printable TimeOption and builds a TimeRange with DateTime properties from it\n */\nexport const mapOptionToTimeRange = (option: TimeOption, timeZone?: TimeZone): TimeRange => {\n return rangeUtil.convertRawToRange({ from: option.from, to: option.to }, timeZone, undefined, commonFormat);\n};\n\n/**\n * Takes a TimeRange and makes a printable TimeOption with formatted date strings correct for the timezone from it\n */\nexport const mapRangeToTimeOption = (range: TimeRange, timeZone?: TimeZone): TimeOption => {\n const from = dateTimeFormat(range.from, { timeZone, format: commonFormat });\n const to = dateTimeFormat(range.to, { timeZone, format: commonFormat });\n\n let display = `${from} to ${to}`;\n\n if (getFeatureToggle('localeFormatPreference')) {\n display = rangeUtil.describeTimeRange(range, timeZone);\n }\n\n return {\n from,\n to,\n display,\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { memo, useMemo, useState } from 'react';\n\nimport { GrafanaTheme2, isDateTime, rangeUtil, RawTimeRange, TimeOption, TimeRange, TimeZone } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { getFocusStyles } from '../../../themes/mixins';\nimport { FilterInput } from '../../FilterInput/FilterInput';\nimport { Icon } from '../../Icon/Icon';\nimport { TextLink } from '../../Link/TextLink';\nimport { WeekStart } from '../WeekStartPicker';\n\nimport { TimePickerFooter } from './TimePickerFooter';\nimport { TimePickerTitle } from './TimePickerTitle';\nimport { TimeRangeContent } from './TimeRangeContent';\nimport { TimeRangeList } from './TimeRangeList';\nimport { mapOptionToTimeRange, mapRangeToTimeOption } from './mapper';\n\ninterface Props {\n value: TimeRange;\n onChange: (timeRange: TimeRange) => void;\n onChangeTimeZone: (timeZone: TimeZone) => void;\n onChangeFiscalYearStartMonth?: (month: number) => void;\n onError?: (error?: string) => void;\n timeZone?: TimeZone;\n fiscalYearStartMonth?: number;\n quickOptions?: TimeOption[];\n history?: TimeRange[];\n showHistory?: boolean;\n className?: string;\n hideTimeZone?: boolean;\n /** Reverse the order of relative and absolute range pickers. Used to left align the picker in forms */\n isReversed?: boolean;\n hideQuickRanges?: boolean;\n widthOverride?: number;\n weekStart?: WeekStart;\n}\n\nexport interface PropsWithScreenSize extends Props {\n isFullscreen: boolean;\n}\n\ninterface FormProps extends Omit {\n historyOptions?: TimeOption[];\n}\n\nexport const TimePickerContentWithScreenSize = (props: PropsWithScreenSize) => {\n const {\n quickOptions = [],\n isReversed,\n isFullscreen,\n hideQuickRanges,\n timeZone,\n fiscalYearStartMonth,\n value,\n onChange,\n history,\n showHistory,\n className,\n hideTimeZone,\n onChangeTimeZone,\n onChangeFiscalYearStartMonth,\n } = props;\n const isHistoryEmpty = !history?.length;\n const isContainerTall =\n (isFullscreen && showHistory) || (!isFullscreen && ((showHistory && !isHistoryEmpty) || !hideQuickRanges));\n const styles = useStyles2(getStyles, isReversed, hideQuickRanges, isContainerTall, isFullscreen);\n const historyOptions = mapToHistoryOptions(history, timeZone);\n const timeOption = useTimeOption(value.raw, quickOptions);\n const [searchTerm, setSearchQuery] = useState('');\n\n const filteredQuickOptions = quickOptions.filter((o) => o.display.toLowerCase().includes(searchTerm.toLowerCase()));\n\n const onChangeTimeOption = (timeOption: TimeOption) => {\n return onChange(mapOptionToTimeRange(timeOption));\n };\n\n return (\n
    \n
    \n {(!isFullscreen || !hideQuickRanges) && (\n
    \n
    \n \n
    \n
    \n {!isFullscreen && }\n {!hideQuickRanges && (\n \n )}\n
    \n
    \n )}\n {isFullscreen && (\n
    \n \n
    \n )}\n
    \n {!hideTimeZone && isFullscreen && (\n \n )}\n
    \n );\n};\n\nexport const TimePickerContent = (props: Props) => {\n const { widthOverride } = props;\n const theme = useTheme2();\n const isFullscreen = (widthOverride || window.innerWidth) >= theme.breakpoints.values.lg;\n return ;\n};\n\nconst NarrowScreenForm = (props: FormProps) => {\n const { value, hideQuickRanges, onChange, timeZone, historyOptions = [], showHistory, onError, weekStart } = props;\n const styles = useStyles2(getNarrowScreenStyles);\n const isAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);\n const [collapsedFlag, setCollapsedFlag] = useState(!isAbsolute);\n const collapsed = hideQuickRanges ? false : collapsedFlag;\n\n const onChangeTimeOption = (timeOption: TimeOption) => {\n return onChange(mapOptionToTimeRange(timeOption, timeZone));\n };\n\n return (\n
    \n
    \n {\n if (!hideQuickRanges) {\n setCollapsedFlag(!collapsed);\n }\n }}\n data-testid={selectors.components.TimePicker.absoluteTimeRangeTitle}\n aria-expanded={!collapsed}\n aria-controls=\"expanded-timerange\"\n >\n \n Absolute time range\n \n {!hideQuickRanges && }\n \n
    \n {!collapsed && (\n
    \n
    \n \n
    \n {showHistory && (\n \n )}\n
    \n )}\n
    \n );\n};\n\nconst FullScreenForm = (props: FormProps) => {\n const { onChange, value, timeZone, fiscalYearStartMonth, isReversed, historyOptions, onError, weekStart } = props;\n const styles = useStyles2(getFullScreenStyles, props.hideQuickRanges);\n const onChangeTimeOption = (timeOption: TimeOption) => {\n return onChange(mapOptionToTimeRange(timeOption, timeZone));\n };\n\n return (\n <>\n
    \n
    \n \n Absolute time range\n \n
    \n \n
    \n {props.showHistory && (\n
    \n }\n />\n
    \n )}\n \n );\n};\n\nconst EmptyRecentList = memo(() => {\n const styles = useStyles2(getEmptyListStyles);\n const emptyRecentListText = t(\n 'time-picker.content.empty-recent-list-info',\n \"It looks like you haven't used this time picker before. As soon as you enter some time intervals, recently used intervals will appear here.\"\n );\n\n return (\n
    \n
    \n {emptyRecentListText}\n
    \n \n
    \n \n Read the documentation\n \n to find out more about how to enter custom time ranges.\n
    \n     \n
    \n );\n});\n\nfunction mapToHistoryOptions(ranges?: TimeRange[], timeZone?: TimeZone): TimeOption[] {\n if (!Array.isArray(ranges) || ranges.length === 0) {\n return [];\n }\n\n return ranges.map((range) => mapRangeToTimeOption(range, timeZone));\n}\n\nEmptyRecentList.displayName = 'EmptyRecentList';\n\nconst useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOption | undefined => {\n return useMemo(() => {\n if (!rangeUtil.isRelativeTimeRange(raw)) {\n return;\n }\n return quickOptions.find((option) => {\n return option.from === raw.from && option.to === raw.to;\n });\n }, [raw, quickOptions]);\n};\n\nconst getStyles = (\n theme: GrafanaTheme2,\n isReversed?: boolean,\n hideQuickRanges?: boolean,\n isContainerTall?: boolean,\n isFullscreen?: boolean\n) => ({\n container: css({\n background: theme.colors.background.elevated,\n boxShadow: theme.shadows.z3,\n width: `${isFullscreen ? '546px' : '262px'}`,\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${theme.colors.border.weak}`,\n [`${isReversed ? 'left' : 'right'}`]: 0,\n display: 'flex',\n flexDirection: 'column',\n }),\n body: css({\n display: 'flex',\n flexDirection: 'row-reverse',\n height: `${isContainerTall ? '381px' : '217px'}`,\n maxHeight: '100vh',\n }),\n leftSide: css({\n display: 'flex',\n flexDirection: 'column',\n borderRight: `${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}`,\n width: `${!hideQuickRanges ? '60%' : '100%'}`,\n overflow: 'auto',\n scrollbarWidth: 'thin',\n order: isReversed ? 1 : 0,\n }),\n rightSide: css({\n width: `${isFullscreen ? '40%' : '100%'}; !important`,\n borderRight: isReversed ? `1px solid ${theme.colors.border.weak}` : 'none',\n display: 'flex',\n flexDirection: 'column',\n }),\n timeRangeFilter: css({\n padding: theme.spacing(1),\n }),\n spacing: css({\n marginTop: '16px',\n }),\n scrollContent: css({\n overflowY: 'auto',\n scrollbarWidth: 'thin',\n }),\n});\n\nconst getNarrowScreenStyles = (theme: GrafanaTheme2) => ({\n header: css({\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n padding: '7px 9px 7px 9px',\n }),\n expandButton: css({\n backgroundColor: 'transparent',\n border: 'none',\n display: 'flex',\n width: '100%',\n\n '&:focus-visible': getFocusStyles(theme),\n }),\n body: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n form: css({\n padding: '7px 9px 7px 9px',\n }),\n});\n\nconst getFullScreenStyles = (theme: GrafanaTheme2, hideQuickRanges?: boolean) => ({\n container: css({\n paddingTop: '9px',\n paddingLeft: '11px',\n paddingRight: !hideQuickRanges ? '20%' : '11px',\n }),\n title: css({\n marginBottom: '11px',\n }),\n recent: css({\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-end',\n paddingTop: theme.spacing(1),\n }),\n});\n\nconst getEmptyListStyles = (theme: GrafanaTheme2) => ({\n container: css({\n padding: '12px',\n margin: '12px',\n\n 'a, span': {\n fontSize: '13px',\n },\n }),\n});\n","import { ReactNode, createContext, useEffect, useMemo, useState, useContext } from 'react';\n\nimport { TimeRange } from '@grafana/data';\n\ntype TimeRangeContextValue = TimeRangeContextHookValue & {\n // These are to be used internally and aren't passed to the users of the hook.\n\n // Called when picker is mounted to update the picker count.\n addPicker(): void;\n\n // Called when picker is unmounted to update the picker count.\n removePicker(): void;\n};\n\nexport type TimeRangeContextHookValue = {\n // If the time range is synced, this is the value that all pickers should show.\n syncedValue?: TimeRange;\n\n // If the time range is synced across all visible pickers.\n synced: boolean;\n\n // If it is possible to sync the time range. This is based just on the number of pickers that are visible so if\n // there is only one, the sync button can be hidden.\n syncPossible: boolean;\n\n // Action passed to the picker to interact with the sync state.\n // Sync the time range across all pickers with the provided value. Can be also used just to update a value when\n // already synced.\n sync(value: TimeRange): void;\n unSync(): void;\n};\n\nconst TimeRangeContext = createContext(undefined);\n\nexport function TimeRangeProvider({ children }: { children: ReactNode }) {\n // We simply keep the count of the pickers visible by letting them call the addPicker and removePicker functions.\n const [pickersCount, setPickersCount] = useState(0);\n const [syncedValue, setSyncedValue] = useState();\n\n const contextVal = useMemo(() => {\n return {\n sync: (value: TimeRange) => setSyncedValue(value),\n unSync: () => setSyncedValue(undefined),\n addPicker: () => setPickersCount((val) => val + 1),\n removePicker: () => {\n setPickersCount((val) => {\n const newVal = val - 1;\n if (newVal < 2) {\n setSyncedValue(undefined);\n }\n return newVal;\n });\n },\n syncPossible: pickersCount > 1,\n synced: Boolean(syncedValue),\n syncedValue,\n };\n }, [pickersCount, syncedValue]);\n\n return {children};\n}\n\nexport function useTimeRangeContext(initialSyncValue?: TimeRange): TimeRangeContextHookValue | undefined {\n const context = useContext(TimeRangeContext);\n\n // Automatically add and remove the picker when the component mounts and unmounts or if context changes (but that\n // should not happen). We ignore the initialSyncValue to make this value really just an initial value and isn't a\n // prop by which you could control the picker.\n useEffect(() => {\n // We want the pickers to still function even if they are not used in a context. Not sure, this will be a common\n // usecase, but it does not seem like it will cost us anything.\n if (context) {\n context.addPicker();\n if (initialSyncValue) {\n context.sync(initialSyncValue);\n }\n return () => {\n context.removePicker();\n };\n }\n return () => {};\n // We want to do this only on mount and unmount.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return useMemo(() => {\n // We want the pickers to still function even if they are not used in a context. Not sure, this will be a common\n // usecase, but it does not seem like it will cost us anything.\n if (!context) {\n return context;\n }\n\n // We just remove the addPicker/removePicker function as that is done automatically here and picker does not need\n // them.\n return {\n sync: context.sync,\n unSync: context.unSync,\n syncPossible: context.syncPossible,\n synced: context.synced,\n syncedValue: context.syncedValue,\n };\n }, [context]);\n}\n","import { t } from '@grafana/i18n';\n\nimport { ToolbarButton } from '../ToolbarButton/ToolbarButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\ninterface TimeSyncButtonProps {\n isSynced: boolean;\n onClick: () => void;\n}\n\nexport function TimeSyncButton(props: TimeSyncButtonProps) {\n const { onClick, isSynced } = props;\n\n const syncTimesTooltip = () => {\n const tooltip = isSynced ? 'Unsync all views' : 'Sync all views to this time range';\n return <>{tooltip};\n };\n\n return (\n \n \n \n );\n}\n","import { useCallback, useEffect } from 'react';\nimport { usePrevious } from 'react-use';\n\nimport { TimeRange } from '@grafana/data';\n\nimport { useTimeRangeContext } from '../TimeRangeContext';\nimport { TimeSyncButton } from '../TimeSyncButton';\n\n/**\n * Handle the behaviour of the time sync button and syncing the time range between pickers. It also takes care of\n * backward compatibility with the manually controlled isSynced prop.\n * @param options\n */\nexport function useTimeSync(options: {\n initialIsSynced?: boolean;\n value: TimeRange;\n isSyncedProp?: boolean;\n timeSyncButtonProp?: JSX.Element;\n onChangeProp: (value: TimeRange) => void;\n}) {\n const { value, onChangeProp, isSyncedProp, initialIsSynced, timeSyncButtonProp } = options;\n const timeRangeContext = useTimeRangeContext(initialIsSynced && value ? value : undefined);\n\n // Destructure to make it easier to use in hook deps.\n const timeRangeContextSynced = timeRangeContext?.synced;\n const timeRangeContextSyncedValue = timeRangeContext?.syncedValue;\n const timeRangeContextSyncFunc = timeRangeContext?.sync;\n\n // This is to determine if we should use the context to sync or not. This is for backward compatibility so that\n // Explore with multiple panes still works as it is controlling the sync state itself for now.\n const usingTimeRangeContext = Boolean(options.isSyncedProp === undefined && timeRangeContext);\n\n // Create new onChange that handles propagating the value to the context if possible and synced is true.\n const onChangeWithSync = useCallback(\n (timeRange: TimeRange) => {\n onChangeProp(timeRange);\n if (usingTimeRangeContext && timeRangeContextSynced) {\n timeRangeContextSyncFunc?.(timeRange);\n }\n },\n [onChangeProp, usingTimeRangeContext, timeRangeContextSyncFunc, timeRangeContextSynced]\n );\n\n const prevValue = usePrevious(value);\n const prevSyncedValue = usePrevious(timeRangeContext?.syncedValue);\n\n // As timepicker is controlled component we need to sync the global sync value back to the parent with onChange\n // handler whenever the outside global value changes. We do it here while checking if we are actually supposed\n // to and making sure we don't go into a loop.\n useEffect(() => {\n // only react if we are actually synced\n if (usingTimeRangeContext && timeRangeContextSynced) {\n if (value !== prevValue && value !== timeRangeContextSyncedValue) {\n // The value changed outside the picker. To keep the sync working we need to update the synced value.\n timeRangeContextSyncFunc?.(value);\n } else if (\n timeRangeContextSyncedValue &&\n timeRangeContextSyncedValue !== prevSyncedValue &&\n timeRangeContextSyncedValue !== value\n ) {\n // The global synced value changed, so we need to update the picker value.\n onChangeProp(timeRangeContextSyncedValue);\n }\n }\n }, [\n usingTimeRangeContext,\n timeRangeContextSynced,\n timeRangeContextSyncedValue,\n timeRangeContextSyncFunc,\n prevSyncedValue,\n value,\n prevValue,\n onChangeProp,\n ]);\n\n // Decide if we are in synced state or not. This is complicated by the manual controlled isSynced prop that is used\n // in Explore for now.\n const isSynced = usingTimeRangeContext ? timeRangeContext?.synced : isSyncedProp;\n\n // Again in Explore the sync button is controlled prop so here we also decide what kind of button to use.\n const button = usingTimeRangeContext\n ? timeRangeContext?.syncPossible && (\n (timeRangeContext?.synced ? timeRangeContext.unSync() : timeRangeContext.sync(value))}\n />\n )\n : timeSyncButtonProp;\n\n return {\n onChangeWithSync,\n isSynced,\n timeSyncButton: button,\n };\n}\n","import { css, cx } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { useOverlay } from '@react-aria/overlays';\nimport { memo, createRef, useState, useEffect } from 'react';\n\nimport {\n rangeUtil,\n GrafanaTheme2,\n dateTimeFormat,\n timeZoneFormatUserFriendly,\n TimeOption,\n TimeRange,\n TimeZone,\n dateMath,\n getTimeZoneInfo,\n} from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { ButtonGroup } from '../Button/ButtonGroup';\nimport { getModalStyles } from '../Modal/getModalStyles';\nimport { getPortalContainer } from '../Portal/Portal';\nimport { ToolbarButton } from '../ToolbarButton/ToolbarButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport { TimePickerContent } from './TimeRangePicker/TimePickerContent';\nimport { TimeZoneDescription } from './TimeZonePicker/TimeZoneDescription';\nimport { WeekStart } from './WeekStartPicker';\nimport { getQuickOptions } from './options';\nimport { useTimeSync } from './utils/useTimeSync';\n\n/** @public */\nexport interface TimeRangePickerProps {\n hideText?: boolean;\n value: TimeRange;\n timeZone?: TimeZone;\n fiscalYearStartMonth?: number;\n\n /**\n * If you handle sync state between pickers yourself use this prop to pass the sync button component.\n * Otherwise, a default one will show automatically if sync is possible.\n */\n timeSyncButton?: JSX.Element;\n\n // Use to manually set the synced styles for the time range picker if you need to control the sync state yourself.\n isSynced?: boolean;\n\n // Use to manually set the initial sync state for the time range picker. It will use the current value to sync.\n initialIsSynced?: boolean;\n\n onChange: (timeRange: TimeRange) => void;\n onChangeTimeZone: (timeZone: TimeZone) => void;\n onChangeFiscalYearStartMonth?: (month: number) => void;\n onMoveBackward: () => void;\n onMoveForward: () => void;\n onZoom: () => void;\n onError?: (error?: string) => void;\n history?: TimeRange[];\n quickRanges?: TimeOption[];\n hideQuickRanges?: boolean;\n widthOverride?: number;\n isOnCanvas?: boolean;\n onToolbarTimePickerClick?: () => void;\n /** Which day of the week the calendar should start on. Possible values: \"saturday\", \"sunday\" or \"monday\" */\n weekStart?: WeekStart;\n}\n\nexport interface State {\n isOpen: boolean;\n}\n\nexport function TimeRangePicker(props: TimeRangePickerProps) {\n const [isOpen, setOpen] = useState(false);\n\n const {\n value,\n onMoveBackward,\n onMoveForward,\n onZoom,\n onError,\n timeZone,\n fiscalYearStartMonth,\n history,\n onChangeTimeZone,\n onChangeFiscalYearStartMonth,\n quickRanges,\n hideQuickRanges,\n widthOverride,\n isOnCanvas,\n onToolbarTimePickerClick,\n weekStart,\n initialIsSynced,\n } = props;\n\n const { onChangeWithSync, isSynced, timeSyncButton } = useTimeSync({\n initialIsSynced,\n value,\n onChangeProp: props.onChange,\n isSyncedProp: props.isSynced,\n timeSyncButtonProp: props.timeSyncButton,\n });\n\n const onChange = (timeRange: TimeRange) => {\n onChangeWithSync(timeRange);\n setOpen(false);\n };\n\n useEffect(() => {\n if (isOpen && onToolbarTimePickerClick) {\n onToolbarTimePickerClick();\n }\n }, [isOpen, onToolbarTimePickerClick]);\n\n const onToolbarButtonSwitch = () => {\n setOpen((prevState) => !prevState);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n const overlayRef = createRef();\n const buttonRef = createRef();\n const { overlayProps, underlayProps } = useOverlay(\n {\n onClose,\n isDismissable: true,\n isOpen,\n shouldCloseOnInteractOutside: (element) => {\n const portalContainer = getPortalContainer();\n return !buttonRef.current?.contains(element) && !portalContainer.contains(element);\n },\n },\n overlayRef\n );\n const { dialogProps } = useDialog({}, overlayRef);\n\n const styles = useStyles2(getStyles);\n const { modalBackdrop } = useStyles2(getModalStyles);\n\n const variant = isSynced ? 'active' : isOnCanvas ? 'canvas' : 'default';\n\n const isFromAfterTo = value?.to?.isBefore(value.from);\n const timePickerIcon = isFromAfterTo ? 'exclamation-triangle' : 'clock-nine';\n\n const currentTimeRange = formattedRange(value, timeZone, quickRanges);\n\n return (\n \n \n\n }\n placement=\"bottom\"\n interactive\n >\n \n \n \n \n {isOpen && (\n
    \n
    \n \n
    \n \n
    \n     \n
    \n )}\n\n {timeSyncButton}\n\n \n\n \n \n \n \n );\n}\n\nTimeRangePicker.displayName = 'TimeRangePicker';\n\nconst ZoomOutTooltip = () => (\n <>\n \n Time range zoom out
    CTRL+Z\n     \n \n);\n\nexport const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => {\n const styles = useStyles2(getLabelStyles);\n const now = Date.now();\n\n // Get timezone info only if timeZone is provided\n const timeZoneInfo = timeZone ? getTimeZoneInfo(timeZone, now) : undefined;\n\n return (\n <>\n
    \n {dateTimeFormat(timeRange.from, { timeZone })}\n
    \n to\n
    \n {dateTimeFormat(timeRange.to, { timeZone })}\n
    \n
    \n {timeZoneFormatUserFriendly(timeZone)}\n \n
    \n \n );\n};\n\ntype LabelProps = Pick;\n\nexport const TimePickerButtonLabel = memo(({ hideText, value, timeZone, quickRanges }) => {\n const styles = useStyles2(getLabelStyles);\n\n if (hideText) {\n return null;\n }\n\n return (\n \n {formattedRange(value, timeZone, quickRanges)}\n {rangeUtil.describeTimeRangeAbbreviation(value, timeZone)}\n \n );\n});\n\nTimePickerButtonLabel.displayName = 'TimePickerButtonLabel';\n\nconst formattedRange = (value: TimeRange, timeZone?: TimeZone, quickRanges?: TimeOption[]) => {\n const adjustedTimeRange = {\n to: dateMath.isMathString(value.raw.to) ? value.raw.to : value.to,\n from: dateMath.isMathString(value.raw.from) ? value.raw.from : value.from,\n };\n return rangeUtil.describeTimeRange(adjustedTimeRange, timeZone, quickRanges);\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n position: 'relative',\n display: 'flex',\n verticalAlign: 'middle',\n }),\n backdrop: css({\n display: 'none',\n [theme.breakpoints.down('sm')]: {\n display: 'block',\n },\n }),\n content: css({\n position: 'absolute',\n right: 0,\n top: '116%',\n zIndex: theme.zIndex.dropdown,\n\n [theme.breakpoints.down('sm')]: {\n position: 'fixed',\n right: '50%',\n top: '50%',\n transform: 'translate(50%, -50%)',\n zIndex: theme.zIndex.modal,\n },\n }),\n };\n};\n\nconst getLabelStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n display: 'flex',\n alignItems: 'center',\n whiteSpace: 'nowrap',\n columnGap: theme.spacing(0.5),\n }),\n utc: css({\n color: theme.v1.palette.orange,\n fontSize: theme.typography.size.sm,\n paddingLeft: '6px',\n lineHeight: '28px',\n verticalAlign: 'bottom',\n fontWeight: theme.typography.fontWeightMedium,\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { memo } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { TimePickerButtonLabel, TimeRangePickerProps } from '../TimeRangePicker';\nimport { isValidTimeRange } from '../utils';\n\ntype LabelProps = Pick & {\n placeholder?: string;\n className?: string;\n};\n\nexport const TimeRangeLabel = memo(function TimePickerLabel({\n hideText,\n value,\n timeZone = 'browser',\n placeholder = 'No time range selected',\n className,\n}) {\n const styles = useStyles2(getLabelStyles);\n\n if (hideText) {\n return null;\n }\n\n return (\n \n {isValidTimeRange(value) ? (\n \n ) : (\n {placeholder}\n )}\n \n );\n});\n\nconst getLabelStyles = (theme: GrafanaTheme2) => {\n return {\n placeholder: css({\n color: theme.colors.text.disabled,\n opacity: 1,\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { Moment } from 'moment';\nimport RcPicker, { PickerProps } from 'rc-picker';\nimport generateConfig from 'rc-picker/lib/generate/moment';\nimport locale from 'rc-picker/lib/locale/en_US';\n\nimport { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme2, isDateTimeInput } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { inputSizes } from '../Forms/commonStyles';\nimport { FormInputSize } from '../Forms/types';\nimport { Icon } from '../Icon/Icon';\nimport 'rc-picker/assets/index.css';\n\ninterface BaseProps {\n onChange: (value: DateTime) => void | ((value?: DateTime) => void);\n value?: DateTime;\n showHour?: boolean;\n showSeconds?: boolean;\n minuteStep?: PickerProps['minuteStep'];\n size?: FormInputSize;\n disabled?: boolean;\n disabledHours?: () => number[];\n disabledMinutes?: () => number[];\n disabledSeconds?: () => number[];\n placeholder?: string;\n allowEmpty?: boolean;\n id?: string;\n}\n\ninterface AllowEmptyProps extends BaseProps {\n allowEmpty: true;\n onChange: (value?: DateTime) => void;\n}\n\ninterface NoAllowEmptyProps extends BaseProps {\n allowEmpty?: false;\n onChange: (value: DateTime) => void;\n}\n\nexport type Props = AllowEmptyProps | NoAllowEmptyProps;\n\nexport const POPUP_CLASS_NAME = 'time-of-day-picker-panel';\n\nexport const TimeOfDayPicker = ({\n minuteStep = 1,\n showHour = true,\n showSeconds = false,\n value,\n size = 'auto',\n disabled,\n disabledHours,\n disabledMinutes,\n disabledSeconds,\n id,\n placeholder,\n // note: we can't destructure allowEmpty/onChange here\n // in order to discriminate the types properly later in the onChange handler\n ...restProps\n}: Props) => {\n const styles = useStyles2(getStyles);\n const allowClear = restProps.allowEmpty ?? false;\n\n return (\n \n id={id}\n generateConfig={generateConfig}\n locale={locale}\n allowClear={\n allowClear && {\n clearIcon: ,\n }\n }\n className={cx(inputSizes()[size], styles.input)}\n classNames={{\n popup: cx(styles.picker, POPUP_CLASS_NAME),\n }}\n defaultValue={restProps.allowEmpty ? undefined : dateTimeAsMoment()}\n disabled={disabled}\n disabledTime={() => ({\n disabledHours,\n disabledMinutes,\n disabledSeconds,\n })}\n format={generateFormat(showHour, showSeconds)}\n minuteStep={minuteStep}\n onChange={(value) => {\n if (isDateTimeInput(value)) {\n if (restProps.allowEmpty) {\n return restProps.onChange(value ? dateTime(value) : undefined);\n } else {\n return restProps.onChange(dateTime(value));\n }\n }\n }}\n picker=\"time\"\n placeholder={placeholder}\n showNow={false}\n needConfirm={false}\n suffixIcon={}\n value={value ? dateTimeAsMoment(value) : value}\n />\n );\n};\n\nfunction generateFormat(showHour = true, showSeconds = false) {\n const maybeHour = showHour ? 'HH:' : '';\n const maybeSecond = showSeconds ? ':ss' : '';\n return maybeHour + 'mm' + maybeSecond;\n}\n\ninterface CaretProps {\n wrapperStyle?: string;\n}\n\nconst Caret = ({ wrapperStyle = '' }: CaretProps) => {\n return (\n
    \n \n
    \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const bgColor = theme.components.input.background;\n const optionBgHover = theme.colors.action.hover;\n const borderRadius = theme.shape.radius.default;\n const borderColor = theme.components.input.borderColor;\n\n return {\n caretWrapper: css({\n position: 'relative',\n top: '50%',\n transform: 'translateY(-50%)',\n display: 'inline-block',\n color: theme.colors.text.secondary,\n }),\n clearIcon: css({\n color: theme.colors.text.secondary,\n\n '&:hover': {\n color: theme.colors.text.maxContrast,\n },\n }),\n picker: css({\n '&.rc-picker-dropdown': {\n boxShadow: 'none',\n zIndex: theme.zIndex.portal,\n },\n '.rc-picker-time-panel-column': {\n fontSize: theme.typography.htmlFontSize,\n backgroundColor: bgColor,\n color: theme.colors.text.secondary,\n padding: 'unset',\n overflowY: 'auto',\n scrollbarWidth: 'thin',\n width: theme.spacing(8),\n li: {\n paddingRight: theme.spacing(2),\n width: 'auto',\n '&.rc-picker-time-panel-cell-selected': {\n backgroundColor: 'inherit',\n border: `1px solid ${theme.colors.action.selectedBorder}`,\n borderRadius,\n color: theme.colors.text.primary,\n },\n\n '&:hover': {\n background: optionBgHover,\n color: theme.colors.text.primary,\n },\n\n '&.rc-picker-time-panel-cell-disabled': {\n color: theme.colors.action.disabledText,\n },\n },\n\n '.rc-picker-time-panel-cell-inner': {\n color: 'inherit',\n },\n\n '&:not(:last-of-type)': {\n borderRight: `1px solid ${borderColor}`,\n },\n },\n\n '.rc-picker-panel': {\n boxShadow: theme.shadows.z3,\n backgroundColor: bgColor,\n borderColor,\n borderRadius,\n overflow: 'hidden',\n },\n }),\n input: css({\n '&.rc-picker-focused': {\n border: 'none',\n\n '.rc-picker-input': getFocusStyles(theme),\n },\n\n '&.rc-picker-disabled': {\n '.rc-picker-input': {\n backgroundColor: theme.colors.action.disabledBackground,\n color: theme.colors.action.disabledText,\n border: `1px solid ${theme.colors.action.disabledBackground}`,\n '&:focus': {\n boxShadow: 'none',\n },\n },\n },\n\n '.rc-picker-input': {\n backgroundColor: bgColor,\n borderRadius,\n borderColor,\n borderStyle: 'solid',\n borderWidth: '1px',\n color: theme.colors.text.primary,\n height: theme.spacing(4),\n padding: theme.spacing(0, 1),\n\n input: {\n color: 'unset',\n backgroundColor: 'unset',\n '&:focus': {\n outline: 'none',\n },\n\n '&::placeholder': {\n color: theme.colors.text.disabled,\n },\n },\n },\n\n '.rc-picker-clear': {\n alignItems: 'center',\n display: 'flex',\n insetInlineEnd: 'unset',\n position: 'relative',\n },\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { memo } from 'react';\nimport Calendar from 'react-calendar';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';\nimport { Icon } from '../../Icon/Icon';\nimport { getBodyStyles } from '../TimeRangePicker/CalendarBody';\n\n/** @public */\nexport interface DatePickerProps {\n isOpen?: boolean;\n onClose: () => void;\n onChange: (value: Date) => void;\n value?: Date;\n minDate?: Date;\n maxDate?: Date;\n}\n\n/** @public */\nexport const DatePicker = memo((props) => {\n const styles = useStyles2(getStyles);\n const { isOpen, onClose } = props;\n\n if (!isOpen) {\n return null;\n }\n\n return (\n \n
    \n \n
    \n     \n );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nconst Body = memo(({ value, minDate, maxDate, onChange }) => {\n const styles = useStyles2(getBodyStyles);\n\n return (\n }\n prevLabel={}\n onChange={(ev) => {\n if (ev && !Array.isArray(ev)) {\n onChange(ev);\n }\n }}\n locale=\"en\"\n />\n );\n});\n\nBody.displayName = 'Body';\n\nexport const getStyles = (theme: GrafanaTheme2) => {\n return {\n modal: css({\n zIndex: theme.zIndex.modal,\n boxShadow: theme.shadows.z3,\n backgroundColor: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.weak}`,\n borderTopLeftRadius: theme.shape.radius.default,\n borderBottomLeftRadius: theme.shape.radius.default,\n\n 'button:disabled': {\n color: theme.colors.text.disabled,\n },\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { autoUpdate, flip, shift, useClick, useDismiss, useFloating, useInteractions } from '@floating-ui/react';\nimport { ChangeEvent, forwardRef, useImperativeHandle, useState } from 'react';\n\nimport { GrafanaTheme2, dateTime } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Props as InputProps, Input } from '../../Input/Input';\nimport { DatePicker } from '../DatePicker/DatePicker';\n\nexport const formatDate = (date: Date | string) => dateTime(date).format('L');\n\n/** @public */\nexport interface DatePickerWithInputProps extends Omit {\n /** Value selected by the DatePicker */\n value?: Date | string;\n /** The minimum date the value can be set to */\n minDate?: Date;\n /** The maximum date the value can be set to */\n maxDate?: Date;\n /** Handles changes when a new date is selected */\n onChange: (value: Date | string) => void;\n /** Hide the calendar when date is selected */\n closeOnSelect?: boolean;\n /** Text that appears when the input has no text */\n placeholder?: string;\n}\n\n/** @public */\nexport const DatePickerWithInput = forwardRef(\n ({ value, minDate, maxDate, onChange, closeOnSelect, placeholder = 'Date', ...rest }, ref) => {\n const [open, setOpen] = useState(false);\n const styles = useStyles2(getStyles);\n\n // the order of middleware is important!\n // see https://floating-ui.com/docs/arrow#order\n const middleware = [\n flip({\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n ];\n\n const { context, refs, floatingStyles } = useFloating({\n open,\n placement: 'bottom-start',\n onOpenChange: setOpen,\n middleware,\n whileElementsMounted: autoUpdate,\n strategy: 'fixed',\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);\n\n useImperativeHandle(ref, () => refs.domReference.current, [\n refs.domReference,\n ]);\n\n return (\n
    \n ) => {\n // Allow resetting the date\n if (ev.target.value === '') {\n onChange('');\n }\n }}\n className={styles.input}\n {...rest}\n {...getReferenceProps()}\n />\n
    \n {\n onChange(ev);\n if (closeOnSelect) {\n setOpen(false);\n }\n }}\n onClose={() => setOpen(false)}\n />\n
    \n
    \n );\n }\n);\n\nDatePickerWithInput.displayName = 'DatePickerWithInput';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n position: 'relative',\n }),\n input: css({\n /* hides the native Calendar picker icon given when using type=date */\n \"input[type='date']::-webkit-inner-spin-button, input[type='date']::-webkit-calendar-picker-indicator\": {\n display: 'none',\n WebkitAppearance: 'none',\n },\n }),\n popover: css({\n zIndex: theme.zIndex.tooltip,\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { autoUpdate, flip, shift, useFloating } from '@floating-ui/react';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { useOverlay } from '@react-aria/overlays';\nimport { FormEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\nimport Calendar from 'react-calendar';\nimport { useMedia } from 'react-use';\n\nimport {\n dateTimeFormat,\n DateTime,\n dateTime,\n GrafanaTheme2,\n isDateTime,\n dateTimeForTimeZone,\n getTimeZone,\n TimeZone,\n} from '@grafana/data';\nimport { Components } from '@grafana/e2e-selectors';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { Button } from '../../Button/Button';\nimport { InlineField } from '../../Forms/InlineField';\nimport { Icon } from '../../Icon/Icon';\nimport { Input } from '../../Input/Input';\nimport { Stack } from '../../Layout/Stack/Stack';\nimport { getModalStyles } from '../../Modal/getModalStyles';\nimport { Portal } from '../../Portal/Portal';\nimport { TimeOfDayPicker, POPUP_CLASS_NAME } from '../TimeOfDayPicker';\nimport { getBodyStyles } from '../TimeRangePicker/CalendarBody';\nimport { isValid } from '../utils';\nimport { adjustDateForReactCalendar } from '../utils/adjustDateForReactCalendar';\n\nexport interface Props {\n /** Input date for the component */\n date?: DateTime;\n /** Callback for returning the selected date */\n onChange: (date?: DateTime) => void;\n /** label for the input field */\n label?: ReactNode;\n /** Set the latest selectable date */\n maxDate?: Date;\n /** Set the minimum selectable date */\n minDate?: Date;\n /** Display seconds on the time picker */\n showSeconds?: boolean;\n /** Set the hours that can't be selected */\n disabledHours?: () => number[];\n /** Set the minutes that can't be selected */\n disabledMinutes?: () => number[];\n /** Set the seconds that can't be selected */\n disabledSeconds?: () => number[];\n /** Can input be cleared/have empty values */\n clearable?: boolean;\n /** Custom timezone for the date/time display */\n timeZone?: TimeZone;\n}\n\nexport const DateTimePicker = ({\n date,\n maxDate,\n minDate,\n label,\n onChange,\n disabledHours,\n disabledMinutes,\n disabledSeconds,\n timeZone,\n showSeconds = true,\n clearable = false,\n}: Props) => {\n const [isOpen, setOpen] = useState(false);\n\n const ref = useRef(null);\n const { overlayProps, underlayProps } = useOverlay(\n {\n onClose: () => setOpen(false),\n isDismissable: true,\n isOpen,\n shouldCloseOnInteractOutside: (element) => {\n const popupElement = document.getElementsByClassName(POPUP_CLASS_NAME)[0];\n return !(popupElement && popupElement.contains(element));\n },\n },\n ref\n );\n const { dialogProps } = useDialog({}, ref);\n\n const theme = useTheme2();\n const { modalBackdrop } = useStyles2(getModalStyles);\n const isFullscreen = useMedia(`(min-width: ${theme.breakpoints.values.lg}px)`);\n const styles = useStyles2(getStyles);\n\n // the order of middleware is important!\n // see https://floating-ui.com/docs/arrow#order\n const middleware = [\n flip({\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n ];\n\n const { refs, floatingStyles } = useFloating({\n open: isOpen,\n placement: 'bottom-start',\n onOpenChange: setOpen,\n middleware,\n whileElementsMounted: autoUpdate,\n strategy: 'fixed',\n });\n\n const onApply = useCallback(\n (date: DateTime) => {\n setOpen(false);\n onChange(date);\n },\n [onChange]\n );\n\n const onOpen = useCallback(\n (event: FormEvent) => {\n event.preventDefault();\n setOpen(true);\n },\n [setOpen]\n );\n\n return (\n
    \n \n {isOpen ? (\n isFullscreen ? (\n \n \n
    \n setOpen(false)}\n maxDate={maxDate}\n minDate={minDate}\n ref={refs.setFloating}\n style={floatingStyles}\n showSeconds={showSeconds}\n disabledHours={disabledHours}\n disabledMinutes={disabledMinutes}\n disabledSeconds={disabledSeconds}\n timeZone={timeZone}\n />\n
    \n     \n     \n ) : (\n \n
    \n \n
    \n
    \n setOpen(false)}\n showSeconds={showSeconds}\n disabledHours={disabledHours}\n disabledMinutes={disabledMinutes}\n disabledSeconds={disabledSeconds}\n timeZone={timeZone}\n />\n
    \n
    \n     \n \n )\n ) : null}\n
    \n );\n};\n\ninterface DateTimeCalendarProps extends Omit {\n onChange: (date: DateTime) => void;\n onClose: () => void;\n isFullscreen: boolean;\n style?: React.CSSProperties;\n}\n\ntype InputProps = Pick & {\n isFullscreen: boolean;\n onOpen: (event: FormEvent) => void;\n};\n\ntype InputState = {\n value: string;\n invalid: boolean;\n};\n\nconst DateTimeInput = React.forwardRef(\n ({ date, label, onChange, onOpen, timeZone, showSeconds = true, clearable = false }, ref) => {\n const styles = useStyles2(getStyles);\n const format = showSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';\n const [internalDate, setInternalDate] = useState(() => {\n return {\n value: date ? dateTimeFormat(date, { timeZone }) : !clearable ? dateTimeFormat(dateTime(), { timeZone }) : '',\n invalid: false,\n };\n });\n\n useEffect(() => {\n if (date) {\n const formattedDate = dateTimeFormat(date, { format, timeZone });\n setInternalDate({\n invalid: !isValid(formattedDate),\n value: isDateTime(date) ? formattedDate : date,\n });\n }\n }, [date, format, timeZone]);\n\n const onChangeDate = useCallback((event: FormEvent) => {\n const isInvalid = !isValid(event.currentTarget.value);\n setInternalDate({\n value: event.currentTarget.value,\n invalid: isInvalid,\n });\n }, []);\n\n const onBlur = useCallback(() => {\n if (!internalDate.invalid && internalDate.value) {\n const date = dateTimeForTimeZone(getTimeZone({ timeZone }), internalDate.value);\n onChange(date);\n }\n }, [internalDate, onChange, timeZone]);\n\n const clearInternalDate = useCallback(() => {\n setInternalDate({ value: '', invalid: false });\n onChange();\n }, [onChange]);\n\n const icon = (\n \n );\n return (\n \n \n }\n />\n \n );\n }\n);\n\nDateTimeInput.displayName = 'DateTimeInput';\n\nconst DateTimeCalendar = React.forwardRef(\n (\n {\n date,\n onClose,\n onChange,\n isFullscreen,\n maxDate,\n minDate,\n style,\n showSeconds = true,\n disabledHours,\n disabledMinutes,\n disabledSeconds,\n timeZone,\n },\n ref\n ) => {\n const calendarStyles = useStyles2(getBodyStyles);\n const styles = useStyles2(getStyles);\n\n // need to keep these 2 separate in state since react-calendar doesn't support different timezones\n const [timeOfDayDateTime, setTimeOfDayDateTime] = useState(() => {\n if (date && date.isValid()) {\n return dateTimeForTimeZone(getTimeZone({ timeZone }), date);\n }\n\n return dateTimeForTimeZone(getTimeZone({ timeZone }), new Date());\n });\n const [reactCalendarDate, setReactCalendarDate] = useState(() => {\n if (date && date.isValid()) {\n return adjustDateForReactCalendar(date.toDate(), getTimeZone({ timeZone }));\n }\n\n return adjustDateForReactCalendar(new Date(), getTimeZone({ timeZone }));\n });\n\n const onChangeDate = useCallback['onChange']>>((date) => {\n if (date && !Array.isArray(date)) {\n setReactCalendarDate(date);\n }\n }, []);\n\n const onChangeTime = useCallback((date: DateTime) => {\n setTimeOfDayDateTime(date);\n }, []);\n\n // here we need to stitch the 2 date objects back together\n const handleApply = () => {\n // we take the date that's set by TimeOfDayPicker\n const newDate = dateTime(timeOfDayDateTime);\n\n // and apply the date/month/year set by react-calendar\n newDate.set('date', reactCalendarDate.getDate());\n newDate.set('month', reactCalendarDate.getMonth());\n newDate.set('year', reactCalendarDate.getFullYear());\n\n onChange(newDate);\n };\n\n return (\n
    \n }\n nextAriaLabel={t('grafana-ui.date-time-picker.next-label', 'Next month')}\n prevLabel={}\n prevAriaLabel={t('grafana-ui.date-time-picker.previous-label', 'Previous month')}\n onChange={onChangeDate}\n locale=\"en\"\n className={calendarStyles.body}\n tileClassName={calendarStyles.title}\n maxDate={maxDate}\n minDate={minDate}\n />\n
    \n \n
    \n \n \n \n \n
    \n );\n }\n);\n\nDateTimeCalendar.displayName = 'DateTimeCalendar';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n container: css({\n padding: theme.spacing(1),\n border: `1px ${theme.colors.border.weak} solid`,\n borderRadius: theme.shape.radius.default,\n backgroundColor: theme.colors.background.primary,\n zIndex: theme.zIndex.modal,\n }),\n fullScreen: css({\n position: 'absolute',\n }),\n time: css({\n marginBottom: theme.spacing(2),\n }),\n modal: css({\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: theme.zIndex.modal,\n maxWidth: '280px',\n }),\n clearIcon: css({\n cursor: 'pointer',\n }),\n field: css({\n marginBottom: 0,\n width: '100%',\n }),\n});\n","import { cx, css } from '@emotion/css';\nimport { PureComponent } from 'react';\n\nimport { stylesFactory } from '../../themes/stylesFactory';\n\nexport interface ListProps {\n items: T[];\n renderItem: (item: T, index: number) => JSX.Element;\n getItemKey?: (item: T) => string;\n className?: string;\n}\n\ninterface AbstractListProps extends ListProps {\n inline?: boolean;\n}\n\nconst getStyles = stylesFactory((inlineList = false) => ({\n list: css({\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n }),\n\n item: css({\n display: (inlineList && 'inline-block') || 'block',\n }),\n}));\n\nexport class AbstractList extends PureComponent> {\n constructor(props: AbstractListProps) {\n super(props);\n }\n\n render() {\n const { items, renderItem, getItemKey, className, inline } = this.props;\n const styles = getStyles(inline);\n\n return (\n
      \n {items.map((item, i) => {\n return (\n
    • \n {renderItem(item, i)}\n
      • \n );\n })}\n
    \n );\n }\n}\n","import { PureComponent } from 'react';\n\nimport { ListProps, AbstractList } from './AbstractList';\n\n/** @deprecated Use ul/li/arr.map directly instead */\nexport class List extends PureComponent> {\n render() {\n return ;\n }\n}\n","import { css, cx } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Button, ButtonVariant } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\nexport interface Props {\n /** The current page index being shown. */\n currentPage: number;\n /** Number of total pages. */\n numberOfPages: number;\n /** Callback function for fetching the selected page. */\n onNavigate: (toPage: number) => void;\n /** When set to true and the pagination result is only one page it will not render the pagination at all. */\n hideWhenSinglePage?: boolean;\n /** Small version only shows the current page and the navigation buttons. */\n showSmallVersion?: boolean;\n className?: string;\n}\n\nexport const Pagination = ({\n currentPage,\n numberOfPages,\n onNavigate,\n hideWhenSinglePage,\n showSmallVersion,\n className,\n}: Props) => {\n const styles = useStyles2(getStyles);\n const pageLengthToCondense = showSmallVersion ? 1 : 8;\n\n const pageButtons = useMemo(() => {\n const pages = [...new Array(numberOfPages).keys()];\n\n const condensePages = numberOfPages > pageLengthToCondense;\n const getListItem = (page: number, variant: 'primary' | 'secondary') => (\n
  • \n \n
    • \n );\n\n return pages.reduce((pagesToRender, pageIndex) => {\n const page = pageIndex + 1;\n const variant: ButtonVariant = page === currentPage ? 'primary' : 'secondary';\n\n // The indexes at which to start and stop condensing pages\n const lowerBoundIndex = pageLengthToCondense;\n const upperBoundIndex = numberOfPages - pageLengthToCondense + 1;\n // When the indexes overlap one another this number is negative\n const differenceOfBounds = upperBoundIndex - lowerBoundIndex;\n\n const isFirstOrLastPage = page === 1 || page === numberOfPages;\n // This handles when the lowerBoundIndex < currentPage < upperBoundIndex\n const currentPageIsBetweenBounds =\n differenceOfBounds > -1 && currentPage >= lowerBoundIndex && currentPage <= upperBoundIndex;\n\n // Show ellipsis after that many pages\n const ellipsisOffset = showSmallVersion ? 1 : 3;\n\n // The offset to show more pages when currentPageIsBetweenBounds\n const pageOffset = showSmallVersion ? 0 : 2;\n\n if (condensePages) {\n if (\n isFirstOrLastPage ||\n (currentPage < lowerBoundIndex && page < lowerBoundIndex) ||\n (differenceOfBounds >= 0 && currentPage > upperBoundIndex && page > upperBoundIndex) ||\n (differenceOfBounds < 0 && currentPage >= lowerBoundIndex && page > upperBoundIndex) ||\n (currentPageIsBetweenBounds && page >= currentPage - pageOffset && page <= currentPage + pageOffset)\n ) {\n // Renders a button for the page\n pagesToRender.push(getListItem(page, variant));\n } else if (\n (page === lowerBoundIndex && currentPage < lowerBoundIndex) ||\n (page === upperBoundIndex && currentPage > upperBoundIndex) ||\n (currentPageIsBetweenBounds &&\n (page === currentPage - ellipsisOffset || page === currentPage + ellipsisOffset))\n ) {\n // Renders and ellipsis to represent condensed pages\n pagesToRender.push(\n
  • \n \n
    • \n );\n }\n } else {\n pagesToRender.push(getListItem(page, variant));\n }\n return pagesToRender;\n }, []);\n }, [currentPage, numberOfPages, onNavigate, pageLengthToCondense, showSmallVersion, styles.ellipsis, styles.item]);\n\n if (hideWhenSinglePage && numberOfPages <= 1) {\n return null;\n }\n\n const previousPageLabel = t('grafana-ui.pagination.previous-page', 'previous page');\n const nextPageLabel = t('grafana-ui.pagination.next-page', 'next page');\n\n return (\n
    \n
      \n
    1. \n onNavigate(currentPage - 1)}\n disabled={currentPage === 1}\n >\n \n \n
      2. \n {pageButtons}\n
    2. \n onNavigate(currentPage + 1)}\n disabled={currentPage === numberOfPages}\n >\n \n \n
      3. \n
    \n
    \n );\n};\n\nconst getStyles = () => {\n return {\n container: css({\n float: 'right',\n }),\n item: css({\n display: 'inline-block',\n paddingLeft: '10px',\n marginBottom: '5px',\n }),\n ellipsis: css({\n transform: 'rotate(90deg)',\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport { CellProps, HeaderProps } from 'react-table';\n\nimport { t } from '@grafana/i18n';\n\nimport { IconButton } from '../../IconButton/IconButton';\n\nconst expanderContainerStyles = css({\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n});\n\nexport function ExpanderCell({ row, __rowID }: CellProps) {\n return (\n
    \n \n
    \n );\n}\n\nexport function ExpanderHeader({ isAllRowsExpanded, toggleAllRowsExpanded }: HeaderProps) {\n return (\n
    \n toggleAllRowsExpanded()}\n size={'lg'}\n tooltip={\n !isAllRowsExpanded\n ? t('grafana-ui.interactive-table.tooltip-expand-all', 'Expand all rows')\n : t('grafana-ui.interactive-table.tooltip-collapse-all', 'Collapse all rows')\n }\n variant={'secondary'}\n />\n
    \n );\n}\n","import { Column as RTColumn } from 'react-table';\n\nimport { ExpanderCell, ExpanderHeader } from './Expander';\nimport { Column } from './types';\n\nexport const EXPANDER_CELL_ID = '__expander' as const;\n\ntype InternalColumn = RTColumn & {\n visible?: (data: T[]) => boolean;\n};\n\n// Returns the columns in a \"react-table\" acceptable format\nexport function getColumns(\n columns: Array>,\n showExpandAll = false\n): Array> {\n return [\n {\n id: EXPANDER_CELL_ID,\n Cell: ExpanderCell,\n ...(showExpandAll && {\n Header: ExpanderHeader,\n }),\n disableSortBy: true,\n width: 0,\n },\n // @ts-expect-error react-table expects each column key(id) to have data associated with it and therefore complains about\n // column.id being possibly undefined and not keyof T (where T is the data object)\n // We do not want to be that strict as we simply pass undefined to cells that do not have data associated with them.\n ...columns.map((column) => ({\n id: column.id,\n accessor: column.id,\n Header: column.header || (() => null),\n sortType: column.sortType || 'alphanumeric',\n disableSortBy: !Boolean(column.sortType),\n width: column.disableGrow ? 0 : undefined,\n visible: column.visible,\n ...(column.cell && { Cell: column.cell }),\n })),\n ];\n}\n","import { css, cx } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { Fragment, ReactNode, useCallback, useEffect, useMemo } from 'react';\nimport {\n HeaderGroup,\n PluginHook,\n Row,\n SortingRule,\n TableOptions,\n useExpanded,\n usePagination,\n useSortBy,\n useTable,\n} from 'react-table';\n\nimport { GrafanaTheme2, IconName, isTruthy } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\nimport { Pagination } from '../Pagination/Pagination';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\n\nimport { Column } from './types';\nimport { EXPANDER_CELL_ID, getColumns } from './utils';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03);\n\n return {\n container: css({\n display: 'flex',\n gap: theme.spacing(2),\n flexDirection: 'column',\n width: '100%',\n overflowX: 'auto',\n }),\n cell: css({\n padding: theme.spacing(1),\n minWidth: theme.spacing(3),\n }),\n table: css({\n borderRadius: theme.shape.radius.default,\n width: '100%',\n }),\n disableGrow: css({\n width: 0,\n }),\n header: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n minWidth: theme.spacing(3),\n '&, & > button': {\n position: 'relative',\n whiteSpace: 'nowrap',\n padding: theme.spacing(1),\n },\n '& > button': {\n '&:after': {\n content: '\"\\\\00a0\"',\n },\n width: '100%',\n height: '100%',\n background: 'none',\n border: 'none',\n paddingRight: theme.spacing(2.5),\n textAlign: 'left',\n fontWeight: theme.typography.fontWeightMedium,\n },\n }),\n row: css({\n label: 'row',\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n\n '&:hover': {\n backgroundColor: rowHoverBg,\n },\n\n '&:last-child': {\n borderBottom: 0,\n },\n }),\n expandedRow: css({\n label: 'expanded-row-content',\n borderBottom: 'none',\n }),\n expandedContentCell: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n position: 'relative',\n padding: theme.spacing(2, 2, 2, 5),\n\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n width: '1px',\n top: 0,\n left: '16px',\n bottom: theme.spacing(2),\n background: theme.colors.border.medium,\n },\n }),\n expandedContentRow: css({\n label: 'expanded-row-content',\n }),\n sortableHeader: css({\n /* increases selector's specificity so that it always takes precedence over default styles */\n '&&': {\n padding: 0,\n },\n }),\n };\n};\n\nexport type InteractiveTableHeaderTooltip = {\n content: PopoverContent;\n iconName?: IconName;\n};\n\nexport type FetchDataArgs = { sortBy: Array> };\nexport type FetchDataFunc = ({ sortBy }: FetchDataArgs) => void;\n\ninterface BaseProps {\n className?: string;\n /**\n * Table's columns definition. Must be memoized.\n */\n columns: Array>;\n /**\n * The data to display in the table. Must be memoized.\n */\n data: TableData[];\n /**\n * Must return a unique id for each row\n */\n getRowId: TableOptions['getRowId'];\n /**\n * Optional tooltips for the table headers. The key must match the column id.\n */\n headerTooltips?: Record;\n /**\n * Number of rows per page. A value of zero disables pagination. Defaults to 0.\n * A React hooks error will be thrown if pageSize goes from greater than 0 to 0 or vice versa. If enabling pagination,\n * make sure pageSize remains a non-zero value.\n */\n pageSize?: number;\n /**\n * A custom function to fetch data when the table is sorted. If not provided, the table will be sorted client-side.\n * It's important for this function to have a stable identity, e.g. being wrapped into useCallback to prevent unnecessary\n * re-renders of the table.\n */\n fetchData?: FetchDataFunc;\n /**\n * Optional way to set how the table is sorted from the beginning. Must be memoized.\n */\n initialSortBy?: Array>;\n}\n\ninterface WithExpandableRow extends BaseProps {\n /**\n * Render function for the expanded row. if not provided, the tables rows will not be expandable.\n */\n renderExpandedRow: (row: TableData) => ReactNode;\n /**\n * Whether to show the \"Expand all\" button. Depends on renderExpandedRow to be provided. Defaults to false.\n */\n showExpandAll?: boolean;\n}\n\ninterface WithoutExpandableRow extends BaseProps {\n renderExpandedRow?: never;\n showExpandAll?: never;\n}\n\ntype Props = WithExpandableRow | WithoutExpandableRow;\n\n/** @alpha */\nexport function InteractiveTable({\n className,\n columns,\n data,\n getRowId,\n headerTooltips,\n pageSize = 0,\n renderExpandedRow,\n showExpandAll = false,\n fetchData,\n initialSortBy = [],\n}: Props) {\n const styles = useStyles2(getStyles);\n const tableColumns = useMemo(() => {\n return getColumns(columns, showExpandAll);\n }, [columns, showExpandAll]);\n const id = useUniqueId();\n const getRowHTMLID = useCallback(\n (row: Row) => {\n return `${id}-${row.id}`.replace(/\\s/g, '');\n },\n [id]\n );\n\n const tableHooks: Array> = [useSortBy, useExpanded];\n\n const multiplePages = data.length > pageSize;\n const paginationEnabled = pageSize > 0;\n\n if (paginationEnabled) {\n tableHooks.push(usePagination);\n }\n\n const tableInstance = useTable(\n {\n columns: tableColumns,\n data,\n autoResetExpanded: false,\n autoResetSortBy: false,\n disableMultiSort: true,\n // If fetchData is provided, we disable client-side sorting\n manualSortBy: Boolean(fetchData),\n getRowId,\n initialState: {\n hiddenColumns: [\n !renderExpandedRow && EXPANDER_CELL_ID,\n ...tableColumns\n .filter((col) => !(col.visible ? col.visible(data) : true))\n .map((c) => c.id)\n .filter(isTruthy),\n ].filter(isTruthy),\n sortBy: initialSortBy,\n },\n },\n ...tableHooks\n );\n\n const { getTableProps, getTableBodyProps, headerGroups, prepareRow } = tableInstance;\n\n const { sortBy } = tableInstance.state;\n useEffect(() => {\n if (fetchData) {\n fetchData({ sortBy });\n }\n }, [sortBy, fetchData]);\n\n useEffect(() => {\n if (paginationEnabled) {\n tableInstance.setPageSize(pageSize);\n }\n }, [paginationEnabled, pageSize, tableInstance.setPageSize, tableInstance]);\n\n return (\n
    \n \n \n {headerGroups.map((headerGroup) => {\n const { key, ...headerRowProps } = headerGroup.getHeaderGroupProps();\n\n return (\n \n {headerGroup.headers.map((column) => {\n const { key, ...headerCellProps } = column.getHeaderProps();\n\n const headerTooltip = headerTooltips?.[column.id];\n\n return (\n \n \n \n );\n })}\n \n );\n })}\n \n\n \n {(paginationEnabled ? tableInstance.page : tableInstance.rows).map((row) => {\n prepareRow(row);\n\n const { key, ...otherRowProps } = row.getRowProps();\n const rowId = getRowHTMLID(row);\n // @ts-expect-error react-table doesn't ship with useExpanded types, and we can't use declaration merging without affecting the table viz\n const isExpanded = row.isExpanded;\n\n return (\n \n \n {row.cells.map((cell) => {\n const { key, ...otherCellProps } = cell.getCellProps();\n return (\n \n );\n })}\n \n {isExpanded && renderExpandedRow && (\n \n \n \n )}\n \n );\n })}\n \n
    \n {cell.render('Cell', { __rowID: rowId })}\n
    \n {renderExpandedRow(row.original)}\n
    \n {paginationEnabled && multiplePages && (\n \n tableInstance.gotoPage(toPage - 1)}\n />\n \n )}\n
    \n );\n}\n\nconst useUniqueId = () => {\n return useMemo(() => uniqueId('InteractiveTable'), []);\n};\n\nconst getColumnHeaderStyles = (theme: GrafanaTheme2) => ({\n sortIcon: css({\n position: 'absolute',\n top: theme.spacing(1),\n }),\n headerTooltipIcon: css({\n marginLeft: theme.spacing(0.5),\n }),\n});\n\nfunction ColumnHeader({\n column: { canSort, render, isSorted, isSortedDesc, getSortByToggleProps },\n headerTooltip,\n}: {\n column: HeaderGroup;\n headerTooltip?: InteractiveTableHeaderTooltip;\n}) {\n const styles = useStyles2(getColumnHeaderStyles);\n const { onClick } = getSortByToggleProps();\n\n const children = (\n <>\n {render('Header')}\n {headerTooltip && (\n \n \n \n )}\n {isSorted && (\n \n \n \n )}\n \n );\n\n if (canSort) {\n return (\n \n );\n }\n\n return children;\n}\n","const TAG_COLORS = [\n '#D32D20',\n '#1E72B8',\n '#B240A2',\n '#705DA0',\n '#466803',\n '#497A3C',\n '#3D71AA',\n '#B15415',\n '#890F02',\n '#6E6E6E',\n '#0A437C',\n '#6D1F62',\n '#584477',\n '#4C7A3F',\n '#2F4F4F',\n '#BF1B00',\n '#7662B1',\n '#8A2EB8',\n '#517A00',\n '#000000',\n '#3F6833',\n '#2F575E',\n '#99440A',\n '#AE561A',\n '#0E4AB4',\n '#58140C',\n '#052B51',\n '#511749',\n '#3F2B5B',\n];\n\nconst TAG_BORDER_COLORS = [\n '#FF7368',\n '#459EE7',\n '#E069CF',\n '#9683C6',\n '#6C8E29',\n '#76AC68',\n '#6AA4E2',\n '#E7823D',\n '#AF3528',\n '#9B9B9B',\n '#3069A2',\n '#934588',\n '#7E6A9D',\n '#88C477',\n '#557575',\n '#E54126',\n '#A694DD',\n '#B054DE',\n '#8FC426',\n '#262626',\n '#658E59',\n '#557D84',\n '#BF6A30',\n '#FF9B53',\n '#3470DA',\n '#7E3A32',\n '#2B5177',\n '#773D6F',\n '#655181',\n];\n\nexport function getTagColorIndexFromName(name = ''): number {\n const hash = djb2(name.toLowerCase());\n return Math.abs(hash % TAG_COLORS.length);\n}\n\n/**\n * Returns tag badge background and border colors based on hashed tag name.\n * @param name tag name\n */\nexport function getTagColorsFromName(name = ''): { color: string; borderColor: string } {\n const index = getTagColorIndexFromName(name);\n return getTagColor(index);\n}\n\nexport function getTagColor(index: number): { color: string; borderColor: string } {\n return { color: TAG_COLORS[index], borderColor: TAG_BORDER_COLORS[index] };\n}\n\nfunction djb2(str: string) {\n let hash = 5381;\n for (let i = 0; i < str.length; i++) {\n hash = (hash << 5) + hash + str.charCodeAt(i); /* hash * 33 + c */\n }\n return hash;\n}\n\nexport default {\n getTagColorsFromName,\n};\n","import { css, cx } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getTagColorsFromName } from '../../utils/tags';\nimport { IconButton } from '../IconButton/IconButton';\n\ninterface Props {\n name: string;\n disabled?: boolean;\n onRemove: (tag: string) => void;\n\n /** Colours the tags 'randomly' based on the name. Defaults to true */\n autoColors?: boolean;\n}\n\n/**\n * @internal\n * Only used internally by TagsInput\n * */\nexport const TagItem = ({ name, disabled, onRemove, autoColors = true }: Props) => {\n const styles = useStyles2(getStyles);\n\n // If configured, use random colors based on name.\n // Otherwise, a default class name will be applied to the tag.\n const tagStyle = useMemo(() => {\n if (autoColors) {\n const { color, borderColor } = getTagColorsFromName(name);\n return { backgroundColor: color, borderColor };\n }\n return undefined;\n }, [name, autoColors]);\n\n return (\n
  • \n {name}\n onRemove(name)}\n className={styles.buttonStyles}\n />\n
    • \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const height = theme.spacing.gridSize * 3;\n\n return {\n itemStyle: css({\n display: 'flex',\n gap: '3px',\n alignItems: 'center',\n height: `${height}px`,\n lineHeight: `${height - 2}px`,\n borderWidth: '1px',\n borderStyle: 'solid',\n borderRadius: theme.shape.radius.default,\n padding: `0 ${theme.spacing(0.5)}`,\n whiteSpace: 'nowrap',\n textShadow: 'none',\n fontWeight: 500,\n fontSize: theme.typography.size.sm,\n color: '#fff',\n }),\n defaultTagColor: css({\n backgroundColor: theme.colors.background.secondary,\n borderColor: theme.components.input.borderColor,\n color: theme.colors.text.primary,\n }),\n nameStyle: css({\n maxWidth: '25ch',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }),\n buttonStyles: css({\n margin: 0,\n '&:hover::before': {\n display: 'none',\n },\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { useCallback, useState, forwardRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { Button } from '../Button/Button';\nimport { Input } from '../Input/Input';\n\nimport { TagItem } from './TagItem';\n\nexport interface Props {\n placeholder?: string;\n /** Array of selected tags */\n tags?: string[];\n onChange: (tags: string[]) => void;\n width?: number;\n id?: string;\n className?: string;\n /** Toggle disabled state */\n disabled?: boolean;\n /** Enable adding new tags when input loses focus */\n addOnBlur?: boolean;\n /** Toggle invalid state */\n invalid?: boolean;\n /** Colours the tags 'randomly' based on the name. Defaults to true */\n autoColors?: boolean;\n}\n\nexport const TagsInput = forwardRef(\n (\n {\n placeholder: placeholderProp,\n tags = [],\n onChange,\n width,\n className,\n disabled,\n addOnBlur,\n invalid,\n id,\n autoColors = true,\n },\n ref\n ) => {\n const placeholder = placeholderProp ?? t('grafana-ui.tags-input.placeholder-new-tag', 'New tag (enter key to add)');\n const [newTagName, setNewTagName] = useState('');\n const styles = useStyles2(getStyles);\n const theme = useTheme2();\n\n const onNameChange = useCallback((event: React.ChangeEvent) => {\n setNewTagName(event.target.value);\n }, []);\n\n const onRemove = (tagToRemove: string) => {\n onChange(tags.filter((x) => x !== tagToRemove));\n };\n\n const onAdd = (event?: React.MouseEvent | React.KeyboardEvent) => {\n event?.preventDefault();\n if (!tags.includes(newTagName)) {\n onChange(tags.concat(newTagName));\n }\n setNewTagName('');\n };\n\n const onBlur = () => {\n if (addOnBlur && newTagName) {\n onAdd();\n }\n };\n\n const onKeyboardAdd = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter' && newTagName !== '') {\n onAdd(event);\n }\n };\n\n return (\n
    \n \n Add\n \n }\n />\n {tags?.length > 0 && (\n
      \n {tags.map((tag) => (\n \n ))}\n
    \n )}\n
    \n );\n }\n);\n\nTagsInput.displayName = 'TagsInput';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n wrapper: css({\n minHeight: theme.spacing(4),\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1),\n flexWrap: 'wrap',\n }),\n tags: css({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n gap: theme.spacing(0.5),\n }),\n addButtonStyle: css({\n margin: `0 -${theme.spacing(1)}`,\n }),\n});\n","import { css, keyframes } from '@emotion/css';\nimport { memo } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport const EllipsisAnimated = memo(() => {\n const styles = useStyles2(getStyles);\n return (\n
    \n {'.'}\n {'.'}\n {'.'}\n
    \n );\n});\n\nEllipsisAnimated.displayName = 'EllipsisAnimated';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n ellipsis: css({\n display: 'inline',\n }),\n firstDot: css({\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n animation: `${firstDot} 2s linear infinite`,\n },\n }),\n secondDot: css({\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n animation: `${secondDot} 2s linear infinite`,\n },\n }),\n thirdDot: css({\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n animation: `${thirdDot} 2s linear infinite`,\n },\n }),\n };\n};\n\nconst firstDot = keyframes`\n 0% {\n opacity: 1;\n }\n 65% {\n opacity: 1;\n }\n 66% {\n opacity: 0.5;\n }\n 100% {\n opacity: 0;\n }\n `;\n\nconst secondDot = keyframes`\n 0% {\n opacity: 0;\n }\n 21% {\n opacity: 0.5;\n }\n 22% {\n opacity: 1;\n }\n 65% {\n opacity: 1;\n }\n 66% {\n opacity: 0.5;\n }\n 100% {\n opacity: 0;\n }\n `;\n\nconst thirdDot = keyframes`\n 0% {\n opacity: 0;\n }\n 43% {\n opacity: 0.5;\n }\n 44% {\n opacity: 1;\n }\n 65% {\n opacity: 1;\n }\n 66% {\n opacity: 0.5;\n }\n 100% {\n opacity: 0;\n }\n `;\n","import { css } from '@emotion/css';\nimport { debounce } from 'lodash';\nimport { useCallback, useMemo, useRef } from 'react';\nimport * as React from 'react';\n\nimport { Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Field, FieldProps } from '../Forms/Field';\nimport { InlineToast } from '../InlineToast/InlineToast';\n\nimport { EllipsisAnimated } from './EllipsisAnimated';\n\nconst SHOW_SUCCESS_DURATION = 2 * 1000;\n\nexport interface Props extends Omit {\n /** Saving request that will be triggered 600ms after changing the value */\n onFinishChange: (inputValue: T) => Promise;\n /** Custom error message to display on saving */\n saveErrorMessage?: string;\n /** Input that will save its value on change */\n children: (onChange: (newValue: T) => void) => React.ReactElement;\n}\nexport function AutoSaveField(props: Props) {\n const {\n invalid,\n loading,\n onFinishChange,\n saveErrorMessage = 'Error saving this value',\n error,\n children,\n disabled,\n ...restProps\n } = props;\n\n const [fieldState, setFieldState] = React.useState({\n isLoading: false,\n showSuccess: false,\n showError: invalid,\n });\n\n const fieldRef = useRef(null);\n\n React.useEffect(() => {\n let timeoutId: ReturnType;\n if (fieldState.showSuccess) {\n const time = fieldState.showError ? 0 : SHOW_SUCCESS_DURATION;\n timeoutId = setTimeout(() => {\n setFieldState({ ...fieldState, showSuccess: false });\n }, time);\n }\n\n return () => {\n window.clearTimeout(timeoutId);\n };\n }, [fieldState]);\n\n const handleChange = useCallback(\n (nextValue: T) => {\n if (invalid) {\n return;\n }\n setFieldState({ ...fieldState, isLoading: true, showSuccess: false });\n onFinishChange(nextValue)\n .then(() => {\n setFieldState({\n isLoading: false,\n showSuccess: true,\n showError: false,\n });\n })\n .catch(() => {\n setFieldState({\n ...fieldState,\n isLoading: false,\n showError: true,\n });\n });\n },\n [invalid, fieldState, onFinishChange]\n );\n\n const lodashDebounce = useMemo(() => debounce(handleChange, 600, { leading: false }), [handleChange]);\n //We never want to pass false to field, because it won't be deleted with deleteUndefinedProps() being false\n const isInvalid = invalid || fieldState.showError || undefined;\n /**\n * use Field around input to pass the error message\n * use InlineToast.tsx to show the save message\n */\n const styles = useStyles2(getStyles);\n\n return (\n <>\n \n {React.cloneElement(\n children((newValue) => {\n lodashDebounce(newValue);\n })\n )}\n \n {fieldState.isLoading && (\n \n \n Saving \n \n \n )}\n {fieldState.showSuccess && (\n \n Saved!\n \n )}\n \n );\n}\n\nAutoSaveField.displayName = 'AutoSaveField';\n\nconst getStyles = () => {\n return {\n widthFitContent: css({\n width: 'fit-content',\n }),\n };\n};\n","import { keyframes } from '@emotion/css';\nimport * as React from 'react';\n\nconst fadeIn = keyframes({\n '0%': {\n opacity: 0,\n },\n '100%': {\n opacity: 1,\n },\n});\n\nexport const skeletonAnimation = {\n animationName: fadeIn,\n animationDelay: '100ms',\n animationTimingFunction: 'ease-in',\n animationDuration: '100ms',\n animationFillMode: 'backwards',\n};\n\ninterface SkeletonProps {\n /**\n * Spread these props at the root of your skeleton to handle animation logic\n */\n rootProps: {\n style: React.CSSProperties;\n };\n}\n\nexport type SkeletonComponent

    = React.ComponentType

    ;\n\n/**\n * Use this to attach a skeleton as a static property on the component.\n * e.g. if you render a component with ``, you can render the skeleton with ``.\n * @param Component A functional or class component\n * @param Skeleton A functional or class skeleton component\n * @returns A wrapped component with a static skeleton property\n */\nexport const attachSkeleton = (Component: C, Skeleton: SkeletonComponent

    ) => {\n const skeletonWrapper = (props: P) => {\n return (\n \n );\n };\n return Object.assign(Component, { Skeleton: skeletonWrapper });\n};\n","import { cx, css } from '@emotion/css';\nimport { forwardRef, HTMLAttributes } from 'react';\nimport * as React from 'react';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { SkeletonComponent, attachSkeleton } from '../../utils/skeleton';\nimport { getTagColor, getTagColorsFromName } from '../../utils/tags';\nimport { Icon } from '../Icon/Icon';\n\n/**\n * @public\n */\nexport type OnTagClick = (name: string, event: React.MouseEvent) => void;\n\nexport interface Props extends Omit, 'onClick'> {\n /** Name of the tag to display */\n name: string;\n icon?: IconName;\n /** Use constant color from TAG_COLORS. Using index instead of color directly so we can match other styling. */\n colorIndex?: number;\n onClick?: OnTagClick;\n}\n\nconst TagComponent = forwardRef(({ name, onClick, icon, className, colorIndex, ...rest }, ref) => {\n const theme = useTheme2();\n const styles = getTagStyles(theme, name, colorIndex);\n\n const onTagClick = (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n onClick?.(name, event);\n };\n\n const classes = cx(styles.wrapper, className, { [styles.hover]: onClick !== undefined });\n\n return onClick ? (\n \n ) : (\n \n {icon && }\n {name}\n \n );\n});\nTagComponent.displayName = 'Tag';\n\nconst TagSkeleton: SkeletonComponent = ({ rootProps }) => {\n const styles = useStyles2(getSkeletonStyles);\n return ;\n};\n\nexport const Tag = attachSkeleton(TagComponent, TagSkeleton);\n\nconst getSkeletonStyles = () => ({\n container: css({\n lineHeight: 1,\n }),\n});\n\nconst getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) => {\n let colors;\n if (colorIndex === undefined) {\n colors = getTagColorsFromName(name);\n } else {\n colors = getTagColor(colorIndex);\n }\n return {\n wrapper: css({\n appearance: 'none',\n borderStyle: 'none',\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.size.sm,\n lineHeight: theme.typography.bodySmall.lineHeight,\n verticalAlign: 'baseline',\n backgroundColor: colors.color,\n color: theme.v1.palette.gray98,\n whiteSpace: 'pre',\n textShadow: 'none',\n padding: '3px 6px',\n borderRadius: theme.shape.radius.default,\n }),\n hover: css({\n '&:hover': {\n opacity: 0.85,\n cursor: 'pointer',\n },\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { forwardRef, memo } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { SkeletonComponent, attachSkeleton } from '../../utils/skeleton';\n\nimport { OnTagClick, Tag } from './Tag';\n\nexport interface Props {\n /** Maximum number of the tags to display */\n displayMax?: number;\n /** Names of the tags to display */\n tags: string[];\n /** Callback when the tag is clicked */\n onClick?: OnTagClick;\n /** Custom styles for the wrapper component */\n className?: string;\n /** aria-label for the `i`-th Tag component */\n getAriaLabel?: (name: string, i: number) => string;\n //** Should return an index of a color defined in the TAG_COLORS array */\n getColorIndex?: (name: string, i: number) => number;\n /** Icon to show next to tag label */\n icon?: IconName;\n}\n\nconst TagListComponent = memo(\n forwardRef(\n ({ displayMax, tags, icon, onClick, className, getAriaLabel, getColorIndex }, ref) => {\n const theme = useTheme2();\n const styles = getStyles(theme, Boolean(displayMax && displayMax > 0));\n const numTags = tags.length;\n const tagsToDisplay = displayMax ? tags.slice(0, displayMax) : tags;\n return (\n

      \n {tagsToDisplay.map((tag, i) => (\n
    • \n \n
      • \n ))}\n {displayMax && displayMax > 0 && numTags - displayMax > 0 && (\n
    • \n \n {'+ '}\n {numTags - displayMax}\n \n
      • \n )}\n
    \n );\n }\n )\n);\nTagListComponent.displayName = 'TagList';\n\nconst TagListSkeleton: SkeletonComponent = ({ rootProps }) => {\n const styles = useStyles2(getSkeletonStyles);\n return (\n
    \n \n \n
    \n );\n};\n\nexport const TagList = attachSkeleton(TagListComponent, TagListSkeleton);\n\nconst getSkeletonStyles = (theme: GrafanaTheme2) => ({\n container: css({\n display: 'flex',\n gap: theme.spacing(1),\n }),\n});\n\nconst getStyles = (theme: GrafanaTheme2, isTruncated: boolean) => {\n return {\n wrapper: css({\n position: 'relative',\n alignItems: isTruncated ? 'center' : 'unset',\n display: 'flex',\n flex: '1 1 auto',\n flexWrap: 'wrap',\n flexShrink: isTruncated ? 0 : 1,\n justifyContent: 'flex-end',\n gap: '6px',\n }),\n moreTagsLabel: css({\n color: theme.colors.text.secondary,\n fontSize: theme.typography.size.sm,\n }),\n li: css({\n listStyle: 'none',\n }),\n };\n};\n","import * as React from 'react';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\n\nimport { getModalStyles } from './getModalStyles';\n\ninterface Props {\n title: string;\n id?: string;\n /** @deprecated */\n icon?: IconName;\n /** @deprecated */\n iconTooltip?: string;\n}\n\n/** @internal */\nexport const ModalHeader = ({ icon, iconTooltip, title, children, id }: React.PropsWithChildren) => {\n const styles = useStyles2(getModalStyles);\n\n return (\n <>\n

    \n {title}\n

    \n {children}\n \n );\n};\n","import { cx } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useOverlay } from '@react-aria/overlays';\nimport { PropsWithChildren, useRef } from 'react';\nimport * as React from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Stack } from '../Layout/Stack/Stack';\n\nimport { ModalHeader } from './ModalHeader';\nimport { getModalStyles } from './getModalStyles';\n\nexport interface Props {\n /** @deprecated no longer used */\n icon?: IconName;\n /** @deprecated no longer used */\n iconTooltip?: string;\n /** Title for the modal or custom header element */\n title: string | JSX.Element;\n className?: string;\n contentClassName?: string;\n closeOnEscape?: boolean;\n closeOnBackdropClick?: boolean;\n trapFocus?: boolean;\n\n isOpen?: boolean;\n onDismiss?: () => void;\n\n /** If not set will call onDismiss if that is set. */\n onClickBackdrop?: () => void;\n}\n\nexport function Modal(props: PropsWithChildren) {\n const {\n title,\n children,\n isOpen = false,\n closeOnEscape = true,\n closeOnBackdropClick = true,\n className,\n contentClassName,\n onDismiss,\n onClickBackdrop,\n trapFocus = true,\n } = props;\n const styles = useStyles2(getModalStyles);\n\n const ref = useRef(null);\n\n // Handle interacting outside the dialog and pressing\n // the Escape key to close the modal.\n const { overlayProps, underlayProps } = useOverlay(\n { isKeyboardDismissDisabled: !closeOnEscape, isOpen, onClose: onDismiss },\n ref\n );\n\n // Get props for the dialog and its title\n const { dialogProps, titleProps } = useDialog({}, ref);\n\n if (!isOpen) {\n return null;\n }\n\n const headerClass = cx(styles.modalHeader, typeof title !== 'string' && styles.modalHeaderWithTabs);\n\n return (\n \n \n \n
    \n
    \n {typeof title === 'string' && }\n {\n // FIXME: custom title components won't get an accessible title.\n // Do we really want to support them or shall we just limit this ModalTabsHeader?\n typeof title !== 'string' && title\n }\n
    \n \n
    \n
    \n
    {children}
    \n
    \n     \n     \n );\n}\n\nfunction ModalButtonRow({ leftItems, children }: { leftItems?: React.ReactNode; children: React.ReactNode }) {\n const styles = useStyles2(getModalStyles);\n\n if (leftItems) {\n return (\n
    \n \n \n {leftItems}\n \n \n {children}\n \n \n
    \n );\n }\n\n return (\n
    \n \n {children}\n \n
    \n );\n}\n\nModal.ButtonRow = ModalButtonRow;\n\ninterface DefaultModalHeaderProps {\n id?: string;\n title: string;\n icon?: IconName;\n iconTooltip?: string;\n}\n\nfunction DefaultModalHeader({ icon, iconTooltip, title, id }: DefaultModalHeaderProps): JSX.Element {\n return ;\n}\n","import { css } from '@emotion/css';\nimport { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Button, ButtonVariant } from '../Button/Button';\nimport { Field } from '../Forms/Field';\nimport { Input } from '../Input/Input';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { JustifyContent } from '../Layout/types';\nimport { ResponsiveProp } from '../Layout/utils/responsiveness';\n\nexport interface ConfirmContentProps {\n /** Modal content */\n body: React.ReactNode;\n /** Modal description */\n description?: React.ReactNode;\n /** Text for confirm button */\n confirmButtonLabel: string;\n /** Confirm button variant */\n confirmButtonVariant?: ButtonVariant;\n /** Text user needs to fill in before confirming */\n confirmPromptText?: string;\n /** Text for dismiss button */\n dismissButtonLabel?: string;\n /** Variant for dismiss button */\n dismissButtonVariant?: ButtonVariant;\n /** Text for alternative button */\n alternativeButtonLabel?: string;\n /** Justify for buttons placement */\n justifyButtons?: ResponsiveProp;\n /** Confirm action callback\n * Return a promise to disable the confirm button until the promise is resolved\n */\n onConfirm(): void | Promise;\n /** Dismiss action callback */\n onDismiss(): void;\n /** Alternative action callback */\n onAlternative?(): void;\n /** Disable the confirm button and the confirm text input if needed */\n disabled?: boolean;\n}\n\nexport const ConfirmContent = ({\n body,\n confirmPromptText,\n confirmButtonLabel,\n confirmButtonVariant,\n dismissButtonVariant,\n dismissButtonLabel,\n onConfirm,\n onDismiss,\n onAlternative,\n alternativeButtonLabel,\n description,\n justifyButtons = 'flex-end',\n disabled,\n}: ConfirmContentProps) => {\n const [isDisabled, setIsDisabled] = useState(disabled);\n const styles = useStyles2(getStyles);\n const buttonRef = useRef(null);\n\n const onConfirmationTextChange = (event: React.FormEvent) => {\n setIsDisabled(confirmPromptText?.toLowerCase().localeCompare(event.currentTarget.value.toLowerCase()) !== 0);\n };\n\n useEffect(() => {\n buttonRef.current?.focus();\n }, []);\n\n useEffect(() => {\n setIsDisabled(disabled ? true : Boolean(confirmPromptText));\n }, [confirmPromptText, disabled]);\n\n const onConfirmClick = async () => {\n if (disabled === undefined) {\n setIsDisabled(true);\n }\n try {\n await onConfirm();\n } finally {\n if (disabled === undefined) {\n setIsDisabled(false);\n }\n }\n };\n\n const { handleSubmit } = useForm();\n const placeholder = t('grafana-ui.confirm-content.placeholder', 'Type \"{{confirmPromptText}}\" to confirm', {\n confirmPromptText,\n });\n return (\n
    \n
    \n {body}\n {description ?
    {description}
    : null}\n {confirmPromptText ? (\n
    \n \n \n \n \n \n
    \n ) : null}\n
    \n
    \n \n \n \n {confirmButtonLabel}\n \n {onAlternative ? (\n \n ) : null}\n \n
    \n
    \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n text: css({\n fontSize: theme.typography.h5.fontSize,\n color: theme.colors.text.primary,\n }),\n description: css({\n fontSize: theme.typography.body.fontSize,\n }),\n confirmationInput: css({\n paddingTop: theme.spacing(1),\n }),\n buttonsContainer: css({\n paddingTop: theme.spacing(3),\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { IconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { ButtonVariant } from '../Button/Button';\nimport { Modal } from '../Modal/Modal';\n\nimport { ConfirmContent } from './ConfirmContent';\n\nexport interface ConfirmModalProps {\n /** Toggle modal's open/closed state */\n isOpen: boolean;\n /** Title for the modal header */\n title: string;\n /** Modal content */\n body: React.ReactNode;\n /** Modal description */\n description?: React.ReactNode;\n /** Text for confirm button */\n confirmText: string;\n /** Variant for confirm button */\n confirmVariant?: ButtonVariant;\n /** Text for dismiss button */\n dismissText?: string;\n /** Variant for dismiss button */\n dismissVariant?: ButtonVariant;\n /** Icon for the modal header */\n icon?: IconName;\n /** Additional styling for modal container */\n modalClass?: string;\n /** Text user needs to fill in before confirming */\n confirmationText?: string;\n /** Text for alternative button */\n alternativeText?: string;\n /** Confirm button variant */\n confirmButtonVariant?: ButtonVariant;\n /** Confirm action callback\n * Return a promise to disable the confirm button until the promise is resolved\n */\n onConfirm(): void | Promise;\n /** Dismiss action callback */\n onDismiss(): void;\n /** Alternative action callback */\n onAlternative?(): void;\n /** Disable the confirm button and the confirm text input if needed */\n disabled?: boolean;\n}\n\nexport const ConfirmModal = ({\n isOpen,\n title,\n body,\n description,\n confirmText,\n confirmVariant = 'destructive',\n confirmationText,\n dismissText = 'Cancel',\n dismissVariant = 'secondary',\n alternativeText,\n modalClass,\n icon = 'exclamation-triangle',\n onConfirm,\n onDismiss,\n onAlternative,\n confirmButtonVariant = 'destructive',\n disabled,\n}: ConfirmModalProps): JSX.Element => {\n const styles = useStyles2(getStyles);\n\n return (\n \n \n \n );\n};\n\nconst getStyles = () => ({\n modal: css({\n width: '500px',\n }),\n});\n","import { Plugin } from 'slate-react';\n\n// Clears the rest of the line after the caret\nexport function ClearPlugin(): Plugin {\n return {\n onKeyDown(event, editor, next) {\n const value = editor.value;\n\n if (value.selection.isExpanded) {\n return next();\n }\n\n if (event.key === 'k' && event.ctrlKey) {\n event.preventDefault();\n const text = value.anchorText.text;\n const offset = value.selection.anchor.offset;\n const length = text.length;\n const forward = length - offset;\n editor.deleteForward(forward);\n return true;\n }\n\n return next();\n },\n };\n}\n","import { Plugin } from 'slate-react';\n\nconst getCopiedText = (textBlocks: string[], startOffset: number, endOffset: number) => {\n if (!textBlocks.length) {\n return undefined;\n }\n\n const excludingLastLineLength = textBlocks.slice(0, -1).join('').length + textBlocks.length - 1;\n return textBlocks.join('\\n').slice(startOffset, excludingLastLineLength + endOffset);\n};\n\n// Remove unicode special symbol - byte order mark (BOM), U+FEFF.\nconst removeBom = (str: string | undefined): string | undefined => {\n return str?.replace(/[\\uFEFF]/g, '');\n};\n\nexport function ClipboardPlugin(): Plugin {\n const clipboardPlugin: Plugin = {\n onCopy(event, editor, next) {\n event.preventDefault();\n\n const { document, selection } = editor.value;\n const {\n start: { offset: startOffset },\n end: { offset: endOffset },\n } = selection;\n const selectedBlocks = document\n .getLeafBlocksAtRange(selection)\n .toArray()\n .map((block) => block.text);\n\n const copiedText = removeBom(getCopiedText(selectedBlocks, startOffset, endOffset));\n if (copiedText && event.clipboardData) {\n event.clipboardData.setData('Text', copiedText);\n }\n\n return true;\n },\n\n onPaste(event, editor, next) {\n event.preventDefault();\n if (event.clipboardData) {\n const pastedValue = removeBom(event.clipboardData.getData('Text'));\n const lines = pastedValue?.split('\\n');\n\n if (lines && lines.length) {\n editor.insertText(lines[0]);\n for (const line of lines.slice(1)) {\n editor.splitBlock().insertText(line);\n }\n }\n }\n\n return true;\n },\n };\n\n return {\n ...clipboardPlugin,\n onCut(event, editor, next) {\n clipboardPlugin.onCopy!(event, editor, next);\n editor.deleteAtRange(editor.value.selection);\n\n return true;\n },\n };\n}\n","import { isKeyHotkey } from 'is-hotkey';\nimport * as React from 'react';\nimport { RangeJSON, Range as SlateRange } from 'slate';\nimport Plain from 'slate-plain-serializer';\nimport { Editor, Plugin } from 'slate-react';\n\nconst isIndentLeftHotkey = isKeyHotkey('mod+[');\nconst isShiftTabHotkey = isKeyHotkey('shift+tab');\nconst isIndentRightHotkey = isKeyHotkey('mod+]');\n\nconst SLATE_TAB = ' ';\n\nconst handleTabKey = (event: React.KeyboardEvent, editor: Editor, next: Function): void => {\n const {\n startBlock,\n endBlock,\n selection: {\n start: { offset: startOffset, key: startKey },\n end: { offset: endOffset, key: endKey },\n },\n } = editor.value;\n if (Plain.serialize(editor.value) === '') {\n return;\n }\n event.preventDefault();\n const first = startBlock.getFirstText();\n\n const startBlockIsSelected =\n first && startOffset === 0 && startKey === first.key && endOffset === first.text.length && endKey === first.key;\n\n if (startBlockIsSelected || !startBlock.equals(endBlock)) {\n handleIndent(editor, 'right');\n } else {\n editor.insertText(SLATE_TAB);\n }\n};\n\nconst handleIndent = (editor: Editor, indentDirection: 'left' | 'right') => {\n const curSelection = editor.value.selection;\n const selectedBlocks = editor.value.document.getLeafBlocksAtRange(curSelection).toArray();\n\n if (indentDirection === 'left') {\n for (const block of selectedBlocks) {\n const blockWhitespace = block.text.length - block.text.trimLeft().length;\n\n const textKey = block.getFirstText()!.key;\n\n const rangeProperties: RangeJSON = {\n anchor: {\n key: textKey,\n offset: blockWhitespace,\n path: [],\n },\n focus: {\n key: textKey,\n offset: blockWhitespace,\n path: [],\n },\n };\n\n editor.deleteBackwardAtRange(SlateRange.create(rangeProperties), Math.min(SLATE_TAB.length, blockWhitespace));\n }\n } else {\n const { startText } = editor.value;\n const textBeforeCaret = startText.text.slice(0, curSelection.start.offset);\n const isWhiteSpace = /^\\s*$/.test(textBeforeCaret);\n\n for (const block of selectedBlocks) {\n editor.insertTextByKey(block.getFirstText()!.key, 0, SLATE_TAB);\n }\n\n if (isWhiteSpace) {\n editor.moveStartBackward(SLATE_TAB.length);\n }\n }\n};\n\n// Clears the rest of the line after the caret\nexport function IndentationPlugin(): Plugin {\n return {\n onKeyDown(event, editor, next) {\n if (isIndentLeftHotkey(event) || isShiftTabHotkey(event)) {\n event.preventDefault();\n handleIndent(editor, 'left');\n } else if (isIndentRightHotkey(event)) {\n event.preventDefault();\n handleIndent(editor, 'right');\n } else if (event.key === 'Tab') {\n handleTabKey(event, editor, next);\n } else {\n return next();\n }\n\n return true;\n },\n };\n}\n","import { Plugin } from 'slate-react';\n\nfunction getIndent(text: string) {\n let offset = text.length - text.trimLeft().length;\n if (offset) {\n let indent = text[0];\n while (--offset) {\n indent += text[0];\n }\n return indent;\n }\n return '';\n}\n\nexport function NewlinePlugin(): Plugin {\n return {\n onKeyDown(event, editor, next) {\n const value = editor.value;\n\n if (value.selection.isExpanded) {\n return next();\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n const { startBlock } = value;\n const currentLineText = startBlock.text;\n const indent = getIndent(currentLineText);\n\n return editor.splitBlock().insertText(indent).focus();\n }\n\n return next();\n },\n };\n}\n","import * as React from 'react';\nimport { Plugin } from 'slate-react';\n\nexport function RunnerPlugin({ handler }: { handler?: (e: React.KeyboardEvent) => void }): Plugin {\n return {\n onKeyDown(event, editor, next) {\n // Handle enter\n if (handler && event.key === 'Enter' && (event.shiftKey || event.ctrlKey)) {\n // Submit on Enter\n event.preventDefault();\n handler(event);\n return editor;\n }\n\n return next();\n },\n };\n}\n","import { isKeyHotkey } from 'is-hotkey';\nimport { Plugin } from 'slate-react';\n\nconst isSelectLineHotkey = isKeyHotkey('mod+l');\n\n// Clears the rest of the line after the caret\nexport function SelectionShortcutsPlugin(): Plugin {\n return {\n onKeyDown(event, editor, next) {\n if (isSelectLineHotkey(event)) {\n event.preventDefault();\n const { focusBlock, document } = editor.value;\n\n editor.moveAnchorToStartOfBlock();\n\n const nextBlock = document.getNextBlock(focusBlock.key);\n if (nextBlock) {\n editor.moveFocusToStartOfNextBlock();\n } else {\n editor.moveFocusToEndOfText();\n }\n } else {\n return next();\n }\n\n return true;\n },\n };\n}\n","import { Value } from 'slate';\nimport { Editor } from 'slate-react';\n\nimport { SearchFunctionType } from '../utils/searchFunctions';\n\n/**\n * @internal\n */\nexport type SearchFunction = (items: CompletionItem[], prefix: string) => CompletionItem[];\n\nexport interface CompletionItemGroup {\n /**\n * Label that will be displayed for all entries of this group.\n */\n label: string;\n\n /**\n * List of suggestions of this group.\n */\n items: CompletionItem[];\n\n /**\n * If true, match only by prefix (and not mid-word).\n * @deprecated use searchFunctionType instead\n */\n prefixMatch?: boolean;\n\n /**\n * Function type used to create auto-complete list\n * @alpha\n */\n searchFunctionType?: SearchFunctionType;\n\n /**\n * If true, do not filter items in this group based on the search.\n */\n skipFilter?: boolean;\n\n /**\n * If true, do not sort items.\n */\n skipSort?: boolean;\n}\n\nexport enum CompletionItemKind {\n GroupTitle = 'GroupTitle',\n}\n\n/**\n * @internal\n */\nexport type HighlightPart = {\n start: number;\n end: number;\n};\n\nexport interface CompletionItem {\n /**\n * The label of this completion item. By default\n * this is also the text that is inserted when selecting\n * this completion.\n */\n label: string;\n\n /**\n * The kind of this completion item. An icon is chosen\n * by the editor based on the kind.\n */\n kind?: CompletionItemKind | string;\n\n /**\n * A human-readable string with additional information\n * about this item, like type or symbol information.\n */\n detail?: string;\n\n /**\n * A human-readable string, can be Markdown, that represents a doc-comment.\n */\n documentation?: string;\n\n /**\n * A string that should be used when comparing this item\n * with other items. When `falsy` the `label` is used.\n * @deprecated use sortValue instead\n */\n sortText?: string;\n\n /**\n * A string or number that should be used when comparing this\n * item with other items. When `undefined` then `label` is used.\n * @alpha\n */\n sortValue?: string | number;\n\n /**\n * Parts of the label to be highlighted\n * @internal\n */\n highlightParts?: HighlightPart[];\n\n /**\n * A string that should be used when filtering a set of\n * completion items. When `falsy` the `label` is used.\n */\n filterText?: string;\n\n /**\n * A string or snippet that should be inserted in a document when selecting\n * this completion. When `falsy` the `label` is used.\n */\n insertText?: string;\n\n /**\n * Delete number of characters before the caret position,\n * by default the letters from the beginning of the word.\n */\n deleteBackwards?: number;\n\n /**\n * Number of steps to move after the insertion, can be negative.\n */\n move?: number;\n}\n\nexport interface TypeaheadOutput {\n context?: string;\n suggestions: CompletionItemGroup[];\n}\n\nexport interface TypeaheadInput {\n text: string;\n prefix: string;\n wrapperClasses: string[];\n labelKey?: string;\n value?: Value;\n editor?: Editor;\n}\n\nexport interface SuggestionsState {\n groupedItems: CompletionItemGroup[];\n typeaheadPrefix: string;\n typeaheadContext: string;\n typeaheadText: string;\n}\n","import { default as calculateSize } from 'calculate-size';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { CompletionItemGroup, CompletionItem, CompletionItemKind } from '../types/completion';\n\nexport const flattenGroupItems = (groupedItems: CompletionItemGroup[]): CompletionItem[] => {\n return groupedItems.reduce((all: CompletionItem[], { items, label }) => {\n all.push({\n label,\n kind: CompletionItemKind.GroupTitle,\n });\n return items.reduce((all, item) => {\n all.push(item);\n return all;\n }, all);\n }, []);\n};\n\nexport const calculateLongestLabel = (allItems: CompletionItem[]): string => {\n return allItems.reduce((longest, current) => {\n return longest.length < current.label.length ? current.label : longest;\n }, '');\n};\n\nexport const calculateListSizes = (theme: GrafanaTheme2, allItems: CompletionItem[], longestLabel: string) => {\n const size = calculateSize(longestLabel, {\n font: theme.typography.fontFamilyMonospace,\n fontSize: theme.typography.bodySmall.fontSize,\n fontWeight: 'normal',\n });\n\n const listWidth = calculateListWidth(size.width, theme);\n const itemHeight = calculateItemHeight(size.height, theme);\n const listHeight = calculateListHeight(itemHeight, allItems);\n\n return {\n listWidth,\n listHeight,\n itemHeight,\n };\n};\n\nexport const calculateItemHeight = (longestLabelHeight: number, theme: GrafanaTheme2) => {\n const horizontalPadding = theme.spacing.gridSize * 2;\n const itemHeight = longestLabelHeight + horizontalPadding;\n\n return itemHeight;\n};\n\nexport const calculateListWidth = (longestLabelWidth: number, theme: GrafanaTheme2) => {\n const verticalPadding = theme.spacing.gridSize * 3;\n const maxWidth = 800;\n const listWidth = Math.min(Math.max(longestLabelWidth + verticalPadding, 200), maxWidth);\n\n return listWidth;\n};\n\nexport const calculateListHeight = (itemHeight: number, allItems: CompletionItem[]) => {\n const numberOfItemsToShow = Math.min(allItems.length, 10);\n const minHeight = 100;\n const totalHeight = numberOfItemsToShow * itemHeight;\n const listHeight = Math.max(totalHeight, minHeight);\n\n return listHeight;\n};\n","import { css, cx } from '@emotion/css';\n\nimport { GrafanaTheme2, renderMarkdown } from '@grafana/data';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { CompletionItem } from '../../types/completion';\n\nconst getStyles = (theme: GrafanaTheme2, height: number, visible: boolean) => {\n return {\n typeaheadItem: css({\n label: 'type-ahead-item',\n zIndex: 11,\n padding: theme.spacing(1, 1, 1, 2),\n border: theme.colors.border.medium,\n overflowY: 'scroll',\n overflowX: 'hidden',\n outline: 'none',\n background: theme.colors.background.secondary,\n color: theme.colors.text.secondary,\n boxShadow: `0 0 20px ${theme.v1.colors.dropdownShadow}`,\n visibility: visible === true ? 'visible' : 'hidden',\n width: '250px',\n minHeight: `${height + parseInt(theme.spacing(0.25), 10)}px`,\n position: 'relative',\n wordBreak: 'break-word',\n }),\n };\n};\n\ninterface Props {\n item: CompletionItem;\n height: number;\n}\n\nexport const TypeaheadInfo = ({ item, height }: Props) => {\n const visible = item && !!item.documentation;\n const label = item ? item.label : '';\n const documentation = renderMarkdown(item?.documentation);\n const theme = useTheme2();\n const styles = getStyles(theme, height, visible);\n\n return (\n
    \n {label}\n
    \n
    \n
    \n );\n};\n","import { createElement } from 'react';\n\nimport { HighlightPart } from '../../types/completion';\n\ninterface Props {\n text: string;\n highlightParts: HighlightPart[];\n highlightClassName: string;\n}\n\n/**\n * Flattens parts into a list of indices pointing to the index where a part\n * (highlighted or not highlighted) starts. Adds extra indices if needed\n * at the beginning or the end to ensure the entire text is covered.\n */\nfunction getStartIndices(parts: HighlightPart[], length: number): number[] {\n const indices: number[] = [];\n parts.forEach((part) => {\n indices.push(part.start, part.end + 1);\n });\n if (indices[0] !== 0) {\n indices.unshift(0);\n }\n if (indices[indices.length - 1] !== length) {\n indices.push(length);\n }\n return indices;\n}\n\nexport const PartialHighlighter = (props: Props) => {\n let { highlightParts, text, highlightClassName } = props;\n\n if (!highlightParts?.length) {\n return null;\n }\n\n let children = [];\n let indices = getStartIndices(highlightParts, text.length);\n let highlighted = highlightParts[0].start === 0;\n\n for (let i = 1; i < indices.length; i++) {\n let start = indices[i - 1];\n let end = indices[i];\n\n children.push(\n createElement(\n highlighted ? 'mark' : 'span',\n {\n key: i - 1,\n className: highlighted ? highlightClassName : undefined,\n },\n text.substring(start, end)\n )\n );\n highlighted = !highlighted;\n }\n\n return
    {children}
    ;\n};\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\nimport Highlighter from 'react-highlight-words';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { CompletionItem, CompletionItemKind } from '../../types/completion';\n\nimport { PartialHighlighter } from './PartialHighlighter';\n\ninterface Props {\n isSelected: boolean;\n item: CompletionItem;\n style: React.CSSProperties;\n prefix?: string;\n\n onClickItem?: (event: React.MouseEvent) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n typeaheadItem: css({\n border: 'none',\n background: 'none',\n textAlign: 'left',\n label: 'type-ahead-item',\n height: 'auto',\n fontFamily: theme.typography.fontFamilyMonospace,\n padding: theme.spacing(1, 1, 1, 2),\n fontSize: theme.typography.bodySmall.fontSize,\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n zIndex: 11,\n display: 'block',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition:\n 'color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1)',\n },\n }),\n\n typeaheadItemSelected: css({\n label: 'type-ahead-item-selected',\n backgroundColor: theme.colors.background.secondary,\n }),\n\n typeaheadItemMatch: css({\n label: 'type-ahead-item-match',\n color: theme.v1.palette.yellow,\n borderBottom: `1px solid ${theme.v1.palette.yellow}`,\n padding: 'inherit',\n background: 'inherit',\n }),\n\n typeaheadItemGroupTitle: css({\n label: 'type-ahead-item-group-title',\n color: theme.colors.text.secondary,\n fontSize: theme.typography.bodySmall.fontSize,\n lineHeight: theme.typography.body.lineHeight,\n padding: theme.spacing(1),\n }),\n});\n\nexport const TypeaheadItem = (props: Props) => {\n const styles = useStyles2(getStyles);\n\n const { isSelected, item, prefix, style, onMouseEnter, onMouseLeave, onClickItem } = props;\n const className = isSelected ? cx([styles.typeaheadItem, styles.typeaheadItemSelected]) : cx([styles.typeaheadItem]);\n const highlightClassName = cx([styles.typeaheadItemMatch]);\n const itemGroupTitleClassName = cx([styles.typeaheadItemGroupTitle]);\n const label = item.label || '';\n\n if (item.kind === CompletionItemKind.GroupTitle) {\n return (\n
  • \n {label}\n
    • \n );\n }\n\n return (\n
  • \n \n {item.highlightParts !== undefined ? (\n \n ) : (\n \n )}\n \n
    • \n );\n};\n","import { css } from '@emotion/css';\nimport { isEqual } from 'lodash';\nimport { createRef, PureComponent } from 'react';\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { FixedSizeList } from 'react-window';\n\nimport { GrafanaTheme2, ThemeContext } from '@grafana/data';\n\nimport { CompletionItem, CompletionItemGroup, CompletionItemKind } from '../../types/completion';\nimport { flattenGroupItems, calculateLongestLabel, calculateListSizes } from '../../utils/typeahead';\n\nimport { TypeaheadInfo } from './TypeaheadInfo';\nimport { TypeaheadItem } from './TypeaheadItem';\n\nconst modulo = (a: number, n: number) => a - n * Math.floor(a / n);\n\ninterface Props {\n origin: string;\n groupedItems: CompletionItemGroup[];\n prefix?: string;\n menuRef?: (el: Typeahead) => void;\n onSelectSuggestion?: (suggestion: CompletionItem) => void;\n isOpen?: boolean;\n}\n\nexport interface State {\n allItems: CompletionItem[];\n listWidth: number;\n listHeight: number;\n itemHeight: number;\n hoveredItem: number | null;\n typeaheadIndex: number | null;\n}\n\nexport class Typeahead extends PureComponent {\n static contextType = ThemeContext;\n context!: React.ContextType;\n listRef = createRef();\n\n state: State = {\n hoveredItem: null,\n typeaheadIndex: null,\n allItems: [],\n listWidth: -1,\n listHeight: -1,\n itemHeight: -1,\n };\n\n componentDidMount = () => {\n if (this.props.menuRef) {\n this.props.menuRef(this);\n }\n\n document.addEventListener('selectionchange', this.handleSelectionChange);\n\n const allItems = flattenGroupItems(this.props.groupedItems);\n const longestLabel = calculateLongestLabel(allItems);\n const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context, allItems, longestLabel);\n this.setState({\n listWidth,\n listHeight,\n itemHeight,\n allItems,\n });\n };\n\n componentWillUnmount = () => {\n document.removeEventListener('selectionchange', this.handleSelectionChange);\n };\n\n handleSelectionChange = () => {\n this.forceUpdate();\n };\n\n componentDidUpdate = (prevProps: Readonly, prevState: Readonly) => {\n if (\n this.state.typeaheadIndex !== null &&\n prevState.typeaheadIndex !== this.state.typeaheadIndex &&\n this.listRef &&\n this.listRef.current\n ) {\n if (this.state.typeaheadIndex === 1) {\n this.listRef.current.scrollToItem(0); // special case for handling the first group label\n return;\n }\n this.listRef.current.scrollToItem(this.state.typeaheadIndex);\n }\n\n if (isEqual(prevProps.groupedItems, this.props.groupedItems) === false) {\n const allItems = flattenGroupItems(this.props.groupedItems);\n const longestLabel = calculateLongestLabel(allItems);\n const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context, allItems, longestLabel);\n this.setState({ listWidth, listHeight, itemHeight, allItems, typeaheadIndex: null });\n }\n };\n\n onMouseEnter = (index: number) => {\n this.setState({\n hoveredItem: index,\n });\n };\n\n onMouseLeave = () => {\n this.setState({\n hoveredItem: null,\n });\n };\n\n moveMenuIndex = (moveAmount: number) => {\n const itemCount = this.state.allItems.length;\n if (itemCount) {\n // Select next suggestion\n const typeaheadIndex = this.state.typeaheadIndex || 0;\n let newTypeaheadIndex = modulo(typeaheadIndex + moveAmount, itemCount);\n\n if (this.state.allItems[newTypeaheadIndex].kind === CompletionItemKind.GroupTitle) {\n newTypeaheadIndex = modulo(newTypeaheadIndex + moveAmount, itemCount);\n }\n\n this.setState({\n typeaheadIndex: newTypeaheadIndex,\n });\n\n return;\n }\n };\n\n insertSuggestion = () => {\n if (this.props.onSelectSuggestion && this.state.typeaheadIndex !== null) {\n this.props.onSelectSuggestion(this.state.allItems[this.state.typeaheadIndex]);\n }\n };\n\n get menuPosition(): string {\n // Exit for unit tests\n if (!window.getSelection) {\n return '';\n }\n\n const selection = window.getSelection();\n const node = selection && selection.anchorNode;\n\n // Align menu overlay to editor node\n if (node && node.parentElement) {\n // Read from DOM\n const rect = node.parentElement.getBoundingClientRect();\n const scrollX = window.scrollX;\n const scrollY = window.scrollY;\n\n return `position: absolute; display: flex; top: ${rect.top + scrollY + rect.height + 6}px; left: ${\n rect.left + scrollX - 2\n }px`;\n }\n\n return '';\n }\n\n render() {\n const { prefix, isOpen = false, origin } = this.props;\n const { allItems, listWidth, listHeight, itemHeight, hoveredItem, typeaheadIndex } = this.state;\n const styles = getStyles(this.context);\n\n const showDocumentation = hoveredItem || typeaheadIndex;\n const documentationItem = allItems[hoveredItem ? hoveredItem : typeaheadIndex || 0];\n\n return (\n \n
      \n {\n const item = allItems && allItems[index];\n const key = item ? `${index}-${item.label}` : `${index}`;\n return key;\n }}\n width={listWidth}\n height={listHeight}\n >\n {({ index, style }) => {\n const item = allItems && allItems[index];\n if (!item) {\n return null;\n }\n\n return (\n (this.props.onSelectSuggestion ? this.props.onSelectSuggestion(item) : {})}\n isSelected={typeaheadIndex === null ? false : allItems[typeaheadIndex] === item}\n item={item}\n prefix={prefix}\n style={style}\n onMouseEnter={() => this.onMouseEnter(index)}\n onMouseLeave={this.onMouseLeave}\n />\n );\n }}\n \n
    \n\n {showDocumentation && }\n     \n );\n }\n}\n\ninterface PortalProps {\n index?: number;\n isOpen: boolean;\n origin: string;\n style: string;\n}\n\nclass Portal extends PureComponent, {}> {\n node: HTMLElement;\n\n constructor(props: React.PropsWithChildren) {\n super(props);\n const { index = 0, origin = 'query', style } = props;\n this.node = document.createElement('div');\n this.node.setAttribute('style', style);\n this.node.classList.add(`slate-typeahead-${origin}-${index}`);\n document.body.appendChild(this.node);\n }\n\n componentWillUnmount() {\n document.body.removeChild(this.node);\n }\n\n render() {\n if (this.props.isOpen) {\n this.node.setAttribute('style', this.props.style);\n this.node.classList.add(`slate-typeahead--open`);\n return ReactDOM.createPortal(this.props.children, this.node);\n } else {\n this.node.classList.remove(`slate-typeahead--open`);\n }\n\n return null;\n }\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n typeahead: css({\n position: 'relative',\n zIndex: theme.zIndex.typeahead,\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${theme.components.panel.borderColor}`,\n maxHeight: '66vh',\n overflowY: 'scroll',\n overflowX: 'hidden',\n outline: 'none',\n listStyle: 'none',\n background: theme.components.panel.background,\n color: theme.colors.text.primary,\n boxShadow: theme.shadows.z2,\n\n strong: {\n color: theme.v1.palette.yellow,\n },\n }),\n});\n","import { last } from 'lodash';\n\nimport { HighlightPart } from '../types/completion';\n\ntype FuzzyMatch = {\n /**\n * Total number of unmatched letters between matched letters\n */\n distance: number;\n ranges: HighlightPart[];\n found: boolean;\n};\n\n/**\n * Attempts to do a partial input search, e.g. allowing to search for a text (needle)\n * in another text (stack) by skipping some letters in-between. All letters from\n * the needle must exist in the stack in the same order to find a match.\n *\n * The search is case sensitive. Convert stack and needle to lower case\n * to make it case insensitive.\n *\n * @param stack - main text to be searched\n * @param needle - partial text to find in the stack\n *\n * @internal\n */\nexport function fuzzyMatch(stack: string, needle: string): FuzzyMatch {\n let distance = 0,\n searchIndex = stack.indexOf(needle);\n // Remove whitespace from needle as a temporary solution to treat separate string\n // queries as 'AND'\n needle = needle.replace(/\\s/g, '');\n\n const ranges: HighlightPart[] = [];\n\n if (searchIndex !== -1) {\n return {\n distance: 0,\n found: true,\n ranges: [{ start: searchIndex, end: searchIndex + needle.length - 1 }],\n };\n }\n\n for (const letter of needle) {\n const letterIndex = stack.indexOf(letter, searchIndex);\n\n if (letterIndex === -1) {\n return { distance: Infinity, ranges: [], found: false };\n }\n // do not cumulate the distance if it's the first letter\n if (searchIndex !== -1) {\n distance += letterIndex - searchIndex;\n }\n searchIndex = letterIndex + 1;\n\n if (ranges.length === 0) {\n ranges.push({ start: letterIndex, end: letterIndex });\n } else {\n const lastRange = last(ranges)!;\n if (letterIndex === lastRange.end + 1) {\n lastRange.end++;\n } else {\n ranges.push({ start: letterIndex, end: letterIndex });\n }\n }\n }\n\n return {\n distance: distance,\n ranges,\n found: true,\n };\n}\n","import { CompletionItem, SearchFunction } from '../types/completion';\n\nimport { fuzzyMatch } from './fuzzy';\n\n/**\n * List of auto-complete search function used by SuggestionsPlugin.handleTypeahead()\n * @alpha\n */\nexport enum SearchFunctionType {\n Word = 'Word',\n Prefix = 'Prefix',\n Fuzzy = 'Fuzzy',\n}\n\n/**\n * Exact-word matching for auto-complete suggestions.\n * - Returns items containing the searched text.\n * @internal\n */\nconst wordSearch: SearchFunction = (items: CompletionItem[], text: string): CompletionItem[] => {\n return items.filter((c) => (c.filterText || c.label).includes(text));\n};\n\n/**\n * Prefix-based search for auto-complete suggestions.\n * - Returns items starting with the searched text.\n * @internal\n */\nconst prefixSearch: SearchFunction = (items: CompletionItem[], text: string): CompletionItem[] => {\n return items.filter((c) => (c.filterText || c.label).startsWith(text));\n};\n\n/**\n * Fuzzy search for auto-complete suggestions.\n * - Returns items containing all letters from the search text occurring in the same order.\n * - Stores highlight parts with parts of the text phrase found by fuzzy search\n * @internal\n */\nconst fuzzySearch: SearchFunction = (items: CompletionItem[], text: string): CompletionItem[] => {\n text = text.toLowerCase();\n return items.filter((item) => {\n const { distance, ranges, found } = fuzzyMatch(item.label.toLowerCase(), text);\n if (!found) {\n return false;\n }\n item.sortValue = distance;\n item.highlightParts = ranges;\n return true;\n });\n};\n\n/**\n * @internal\n */\nexport const SearchFunctionMap = {\n [SearchFunctionType.Word]: wordSearch,\n [SearchFunctionType.Prefix]: prefixSearch,\n [SearchFunctionType.Fuzzy]: fuzzySearch,\n};\n","import { Block, Document, Text, Value, SchemaProperties } from 'slate';\n\nexport const SCHEMA: SchemaProperties = {\n document: {\n nodes: [\n {\n match: [{ type: 'paragraph' }, { type: 'code_block' }, { type: 'code_line' }],\n },\n ],\n },\n inlines: {},\n};\n\nexport const makeFragment = (text: string, syntax?: string): Document => {\n const lines = text.split('\\n').map((line) =>\n Block.create({\n type: 'code_line',\n nodes: [Text.create(line)],\n })\n );\n\n const block = Block.create({\n data: {\n syntax,\n },\n type: 'code_block',\n nodes: lines,\n });\n\n return Document.create({\n nodes: [block],\n });\n};\n\nexport const makeValue = (text: string, syntax?: string): Value => {\n const fragment = makeFragment(text, syntax);\n\n return Value.create({\n document: fragment,\n });\n};\n","const TOKEN_MARK = 'prism-token';\n\nexport default TOKEN_MARK;\n","import { debounce, sortBy } from 'lodash';\nimport { Editor, Plugin as SlatePlugin } from 'slate-react';\n\nimport { Typeahead } from '../components/Typeahead/Typeahead';\nimport { CompletionItem, SuggestionsState, TypeaheadInput, TypeaheadOutput } from '../types/completion';\nimport { SearchFunctionType, SearchFunctionMap } from '../utils/searchFunctions';\nimport { makeFragment } from '../utils/slate';\n\nimport TOKEN_MARK from './slate-prism/TOKEN_MARK';\n\nexport const TYPEAHEAD_DEBOUNCE = 250;\n\n// Commands added to the editor by this plugin.\ninterface SuggestionsPluginCommands {\n selectSuggestion: (suggestion: CompletionItem) => Editor;\n applyTypeahead: (suggestion: CompletionItem) => Editor;\n}\n\nexport function SuggestionsPlugin({\n onTypeahead,\n cleanText,\n onWillApplySuggestion,\n portalOrigin,\n}: {\n onTypeahead?: (typeahead: TypeaheadInput) => Promise;\n cleanText?: (text: string) => string;\n onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;\n portalOrigin: string;\n}): SlatePlugin {\n let typeaheadRef: Typeahead;\n let state: SuggestionsState = {\n groupedItems: [],\n typeaheadPrefix: '',\n typeaheadContext: '',\n typeaheadText: '',\n };\n const handleTypeaheadDebounced = debounce(handleTypeahead, TYPEAHEAD_DEBOUNCE);\n\n const setState = (update: Partial) => {\n state = {\n ...state,\n ...update,\n };\n };\n\n return {\n onBlur: (event, editor, next) => {\n state = {\n ...state,\n groupedItems: [],\n };\n\n return next();\n },\n\n onClick: (event, editor, next) => {\n state = {\n ...state,\n groupedItems: [],\n };\n\n return next();\n },\n\n onKeyDown: (event, editor, next) => {\n const currentSuggestions = state.groupedItems;\n\n const hasSuggestions = currentSuggestions.length;\n\n switch (event.key) {\n case 'Escape': {\n if (hasSuggestions) {\n event.preventDefault();\n\n state = {\n ...state,\n groupedItems: [],\n };\n\n // Bogus edit to re-render editor\n return editor.insertText('');\n }\n\n break;\n }\n\n case 'ArrowDown':\n case 'ArrowUp':\n if (hasSuggestions) {\n event.preventDefault();\n typeaheadRef.moveMenuIndex(event.key === 'ArrowDown' ? 1 : -1);\n return;\n }\n\n break;\n\n case 'Enter': {\n if (!(event.shiftKey || event.ctrlKey) && hasSuggestions) {\n event.preventDefault();\n return typeaheadRef.insertSuggestion();\n }\n\n break;\n }\n\n case 'Tab': {\n if (hasSuggestions) {\n event.preventDefault();\n return typeaheadRef.insertSuggestion();\n }\n\n break;\n }\n\n default: {\n // Don't react on meta keys\n if (event.key.length === 1) {\n handleTypeaheadDebounced(editor, setState, onTypeahead, cleanText);\n }\n break;\n }\n }\n\n return next();\n },\n\n commands: {\n selectSuggestion: (editor, suggestion: CompletionItem): Editor => {\n const suggestions = state.groupedItems;\n if (!suggestions || !suggestions.length) {\n return editor;\n }\n\n // @ts-ignore\n const ed = editor.applyTypeahead(suggestion);\n handleTypeaheadDebounced(editor, setState, onTypeahead, cleanText);\n return ed;\n },\n\n applyTypeahead: (editor, suggestion: CompletionItem) => {\n let suggestionText = suggestion.insertText || suggestion.label;\n\n const preserveSuffix = suggestion.kind === 'function';\n const move = suggestion.move || 0;\n const moveForward = move > 0 ? move : 0;\n const moveBackward = move < 0 ? -move : 0;\n\n const { typeaheadPrefix, typeaheadText, typeaheadContext } = state;\n\n if (onWillApplySuggestion) {\n suggestionText = onWillApplySuggestion(suggestionText, {\n groupedItems: state.groupedItems,\n typeaheadContext,\n typeaheadPrefix,\n typeaheadText,\n });\n }\n\n const { forward, backward } = getNumCharsToDelete(\n suggestionText,\n typeaheadPrefix,\n typeaheadText,\n preserveSuffix,\n suggestion.deleteBackwards,\n cleanText\n );\n\n // If new-lines, apply suggestion as block\n if (suggestionText.match(/\\n/)) {\n const fragment = makeFragment(suggestionText);\n editor.deleteBackward(backward).deleteForward(forward).insertFragment(fragment).focus();\n return editor;\n }\n\n state = {\n ...state,\n groupedItems: [],\n };\n\n editor\n .snapshotSelection()\n .deleteBackward(backward)\n .deleteForward(forward)\n .insertText(suggestionText)\n .moveForward(moveForward)\n .moveBackward(moveBackward)\n .focus();\n\n return editor;\n },\n },\n\n renderEditor(props, editor, next) {\n if (editor.value.selection.isExpanded) {\n return next();\n }\n\n const children = next();\n\n return (\n <>\n {children}\n (typeaheadRef = menu)}\n origin={portalOrigin}\n prefix={state.typeaheadPrefix}\n isOpen={!!state.groupedItems.length}\n groupedItems={state.groupedItems}\n onSelectSuggestion={(editor as Editor & SuggestionsPluginCommands).selectSuggestion}\n />\n \n );\n },\n };\n}\n\nconst handleTypeahead = async (\n editor: Editor,\n onStateChange: (state: Partial) => void,\n onTypeahead?: (typeahead: TypeaheadInput) => Promise,\n cleanText?: (text: string) => string\n): Promise => {\n if (!onTypeahead) {\n return;\n }\n\n const { value } = editor;\n const { selection } = value;\n\n // Get decorations associated with the current line\n const parentBlock = value.document.getClosestBlock(value.focusBlock.key);\n const selectionStartOffset = value.selection.start.offset - 1;\n const decorations = parentBlock && parentBlock.getDecorations(editor as any);\n\n const filteredDecorations = decorations\n ? decorations\n .filter(\n (decoration) =>\n decoration!.start.offset <= selectionStartOffset &&\n decoration!.end.offset > selectionStartOffset &&\n decoration!.type === TOKEN_MARK\n )\n .toArray()\n : [];\n\n // Find the first label key to the left of the cursor\n const labelKeyDec =\n decorations &&\n decorations\n .filter(\n (decoration) =>\n decoration!.end.offset <= selectionStartOffset &&\n decoration!.type === TOKEN_MARK &&\n decoration!.data.get('className').includes('label-key')\n )\n .last();\n\n const labelKey = labelKeyDec && value.focusText.text.slice(labelKeyDec.start.offset, labelKeyDec.end.offset);\n\n const wrapperClasses = filteredDecorations\n .map((decoration) => decoration.data.get('className'))\n .join(' ')\n .split(' ')\n .filter((className) => className.length);\n\n let text = value.focusText.text;\n let prefix = text.slice(0, selection.focus.offset);\n\n if (filteredDecorations.length) {\n text = value.focusText.text.slice(filteredDecorations[0].start.offset, filteredDecorations[0].end.offset);\n prefix = value.focusText.text.slice(filteredDecorations[0].start.offset, selection.focus.offset);\n }\n\n // Label values could have valid characters erased if `cleanText()` is\n // blindly applied, which would undesirably interfere with suggestions\n const labelValueMatch = prefix.match(/(?:!?=~?\"?|\")(.*)/);\n if (labelValueMatch) {\n prefix = labelValueMatch[1];\n } else if (cleanText) {\n prefix = cleanText(prefix);\n }\n\n const { suggestions, context } = await onTypeahead({\n prefix,\n text,\n value,\n wrapperClasses,\n labelKey: labelKey || undefined,\n editor,\n });\n\n const filteredSuggestions = suggestions\n .map((group) => {\n if (!group.items) {\n return group;\n }\n // Falling back to deprecated prefixMatch to support backwards compatibility with plugins using this property\n const searchFunctionType =\n group.searchFunctionType || (group.prefixMatch ? SearchFunctionType.Prefix : SearchFunctionType.Word);\n const searchFunction = SearchFunctionMap[searchFunctionType];\n let newGroup = { ...group };\n if (prefix) {\n // Filter groups based on prefix\n if (!group.skipFilter) {\n newGroup.items = newGroup.items.filter((c) => (c.filterText || c.label).length >= prefix.length);\n newGroup.items = searchFunction(newGroup.items, prefix);\n }\n\n // Filter out the already typed value (prefix) unless it inserts custom text not matching the prefix\n newGroup.items = newGroup.items.filter(\n (c) => !(c.insertText === prefix || (c.filterText ?? c.label) === prefix)\n );\n }\n\n if (!group.skipSort) {\n newGroup.items = sortBy(newGroup.items, (item: CompletionItem) => {\n if (item.sortText === undefined) {\n return item.sortValue !== undefined ? item.sortValue : item.label;\n } else {\n // Falling back to deprecated sortText to support backwards compatibility with plugins using this property\n return item.sortText || item.label;\n }\n });\n }\n\n return newGroup;\n })\n .filter((gr) => gr.items && gr.items.length); // Filter out empty groups\n\n onStateChange({\n groupedItems: filteredSuggestions,\n typeaheadPrefix: prefix,\n typeaheadContext: context,\n typeaheadText: text,\n });\n\n // Bogus edit to force re-render\n editor.blur().focus();\n};\n\nexport function getNumCharsToDelete(\n suggestionText: string,\n typeaheadPrefix: string,\n typeaheadText: string,\n preserveSuffix: boolean,\n deleteBackwards?: number,\n cleanText?: (text: string) => string\n) {\n // remove the current, incomplete text and replace it with the selected suggestion\n const backward = deleteBackwards || typeaheadPrefix.length;\n const text = cleanText ? cleanText(typeaheadText) : typeaheadText;\n const offset = typeaheadText.indexOf(typeaheadPrefix);\n\n const suffixLength =\n offset > -1 ? text.length - offset - typeaheadPrefix.length : text.length - typeaheadPrefix.length;\n const midWord = Boolean((typeaheadPrefix && suffixLength > 0) || suggestionText === typeaheadText);\n const forward = midWord && !preserveSuffix ? suffixLength + offset : 0;\n\n return {\n forward,\n backward,\n };\n}\n","import { css, cx } from '@emotion/css';\nimport classnames from 'classnames';\nimport { debounce } from 'lodash';\nimport { PureComponent } from 'react';\nimport * as React from 'react';\nimport { Value } from 'slate';\nimport Plain from 'slate-plain-serializer';\nimport { Editor, EventHook, Plugin } from 'slate-react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { ClearPlugin } from '../../slate-plugins/clear';\nimport { ClipboardPlugin } from '../../slate-plugins/clipboard';\nimport { IndentationPlugin } from '../../slate-plugins/indentation';\nimport { NewlinePlugin } from '../../slate-plugins/newline';\nimport { RunnerPlugin } from '../../slate-plugins/runner';\nimport { SelectionShortcutsPlugin } from '../../slate-plugins/selection_shortcuts';\nimport { SuggestionsPlugin } from '../../slate-plugins/suggestions';\nimport { withTheme2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { CompletionItemGroup, SuggestionsState, TypeaheadInput, TypeaheadOutput } from '../../types/completion';\nimport { Themeable2 } from '../../types/theme';\nimport { makeValue, SCHEMA } from '../../utils/slate';\n\nexport interface QueryFieldProps extends Themeable2 {\n additionalPlugins?: Plugin[];\n cleanText?: (text: string) => string;\n disabled?: boolean;\n // We have both value and local state. This is usually an antipattern but we need to keep local state\n // for perf reasons and also have outside value in for example in Explore redux that is mutable from logs\n // creating a two way binding.\n query?: string | null;\n onRunQuery?: () => void;\n onBlur?: () => void;\n onChange?: (value: string) => void;\n onRichValueChange?: (value: Value) => void;\n onClick?: EventHook>;\n onTypeahead?: (typeahead: TypeaheadInput) => Promise;\n onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string;\n placeholder?: string;\n portalOrigin: string;\n syntax?: string;\n syntaxLoaded?: boolean;\n theme: GrafanaTheme2;\n}\n\nexport interface QueryFieldState {\n suggestions: CompletionItemGroup[];\n typeaheadContext: string | null;\n typeaheadPrefix: string;\n typeaheadText: string;\n value: Value;\n}\n\n/**\n * Renders an editor field.\n * Pass initial value as initialQuery and listen to changes in props.onValueChanged.\n * This component can only process strings. Internally it uses Slate Value.\n * Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.\n */\nexport class UnThemedQueryField extends PureComponent {\n plugins: Array>;\n runOnChangeDebounced: Function;\n lastExecutedValue: Value | null = null;\n mounted = false;\n editor: Editor | null = null;\n\n // By default QueryField calls onChange if onBlur is not defined, this will trigger a rerender\n // And slate will claim the focus, making it impossible to leave the field.\n static defaultProps = {\n onBlur: () => {},\n };\n\n constructor(props: QueryFieldProps) {\n super(props);\n\n this.runOnChangeDebounced = debounce(this.runOnChange, 500);\n\n const { onTypeahead, cleanText, portalOrigin, onWillApplySuggestion } = props;\n\n // Base plugins\n this.plugins = [\n // SuggestionsPlugin and RunnerPlugin need to be before NewlinePlugin\n // because they override Enter behavior\n SuggestionsPlugin({ onTypeahead, cleanText, portalOrigin, onWillApplySuggestion }),\n RunnerPlugin({ handler: this.runOnChangeAndRunQuery }),\n NewlinePlugin(),\n ClearPlugin(),\n SelectionShortcutsPlugin(),\n IndentationPlugin(),\n ClipboardPlugin(),\n ...(props.additionalPlugins || []),\n ].filter((p) => p);\n\n this.state = {\n suggestions: [],\n typeaheadContext: null,\n typeaheadPrefix: '',\n typeaheadText: '',\n value: makeValue(props.query || '', props.syntax),\n };\n }\n\n componentDidMount() {\n this.mounted = true;\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n componentDidUpdate(prevProps: QueryFieldProps, prevState: QueryFieldState) {\n const { query, syntax, syntaxLoaded } = this.props;\n if (!prevProps.syntaxLoaded && syntaxLoaded && this.editor) {\n // Need a bogus edit to re-render the editor after syntax has fully loaded\n const editor = this.editor.insertText(' ').deleteBackward(1);\n this.onChange(editor.value, true);\n }\n const { value } = this.state;\n\n // Handle two way binging between local state and outside prop.\n // if query changed from the outside\n if (query !== prevProps.query) {\n // and we have a version that differs\n if (query !== Plain.serialize(value)) {\n this.setState({ value: makeValue(query || '', syntax) });\n }\n }\n }\n\n /**\n * Update local state, propagate change upstream and optionally run the query afterwards.\n */\n onChange = (value: Value, runQuery?: boolean) => {\n const documentChanged = value.document !== this.state.value.document;\n const prevValue = this.state.value;\n if (this.props.onRichValueChange) {\n this.props.onRichValueChange(value);\n }\n\n // Update local state with new value and optionally change value upstream.\n this.setState({ value }, () => {\n // The diff is needed because the actual value of editor have much more metadata (for example text selection)\n // that is not passed upstream so every change of editor value does not mean change of the query text.\n if (documentChanged) {\n const textChanged = Plain.serialize(prevValue) !== Plain.serialize(value);\n if (textChanged && runQuery) {\n this.runOnChangeAndRunQuery();\n }\n if (textChanged && !runQuery) {\n // Debounce change propagation by default for perf reasons.\n this.runOnChangeDebounced();\n }\n }\n });\n };\n\n runOnChange = () => {\n const { onChange } = this.props;\n const value = Plain.serialize(this.state.value);\n if (onChange) {\n onChange(this.cleanText(value));\n }\n };\n\n runOnRunQuery = () => {\n const { onRunQuery } = this.props;\n\n if (onRunQuery) {\n onRunQuery();\n this.lastExecutedValue = this.state.value;\n }\n };\n\n runOnChangeAndRunQuery = () => {\n // onRunQuery executes query from Redux in Explore so it needs to be updated sync in case we want to run\n // the query.\n this.runOnChange();\n this.runOnRunQuery();\n };\n\n /**\n * We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.\n */\n handleBlur = (_: React.FocusEvent | undefined, editor: Editor, next: Function) => {\n const { onBlur } = this.props;\n\n if (onBlur) {\n onBlur();\n } else {\n // Run query by default on blur\n const previousValue = this.lastExecutedValue ? Plain.serialize(this.lastExecutedValue) : '';\n const currentValue = Plain.serialize(editor.value);\n\n if (previousValue !== currentValue) {\n this.runOnChangeAndRunQuery();\n }\n }\n return next();\n };\n\n cleanText(text: string) {\n // RegExp with invisible characters we want to remove - currently only carriage return (newlines are visible)\n const newText = text.replace(/[\\r]/g, '');\n return newText;\n }\n\n render() {\n const { disabled, theme } = this.props;\n const wrapperClassName = classnames('slate-query-field__wrapper', {\n 'slate-query-field__wrapper--disabled': disabled,\n });\n const styles = getStyles(theme);\n\n return (\n
    \n
    \n (this.editor = editor!)}\n schema={SCHEMA}\n autoCorrect={false}\n readOnly={this.props.disabled}\n onBlur={this.handleBlur}\n onClick={this.props.onClick}\n // onKeyDown={this.onKeyDown}\n onChange={(change: { value: Value }) => {\n this.onChange(change.value, false);\n }}\n placeholder={this.props.placeholder}\n plugins={this.plugins}\n spellCheck={false}\n value={this.state.value}\n />\n
    \n
    \n );\n }\n}\n\nexport const QueryField = withTheme2(UnThemedQueryField);\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const focusStyles = getFocusStyles(theme);\n return {\n wrapper: css({\n '&:focus-within': focusStyles,\n }),\n };\n};\n","import { useAsync } from 'react-use';\n\n// Allows simple dynamic imports in the components\nexport const useAsyncDependency = (importStatement: Promise) => {\n const state = useAsync(async () => {\n return await importStatement;\n });\n\n return {\n ...state,\n dependency: state.value,\n };\n};\n","import { css } from '@emotion/css';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { ErrorBoundaryApi } from './ErrorBoundary';\n\nexport interface Props extends ErrorBoundaryApi {\n title: string;\n}\n\nexport const ErrorWithStack = ({ error, errorInfo, title }: Props) => {\n const style = useStyles2(getStyles);\n\n return (\n
    \n

    {title}

    \n
    \n {error && error.toString()}\n
    \n {errorInfo && errorInfo.componentStack}\n
    \n
    \n );\n};\n\nErrorWithStack.displayName = 'ErrorWithStack';\n\nconst getStyles = () => {\n return css({\n width: '500px',\n margin: '64px auto',\n });\n};\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { useAsyncDependency } from '../../utils/useAsyncDependency';\nimport { ErrorWithStack } from '../ErrorBoundary/ErrorWithStack';\nimport { LoadingPlaceholder } from '../LoadingPlaceholder/LoadingPlaceholder';\n\n// we only use import type so it will not be included in the bundle\nimport type { ReactMonacoEditorProps } from './types';\n\n/**\n * @internal\n * Experimental export\n **/\nexport const ReactMonacoEditorLazy = (props: ReactMonacoEditorProps) => {\n const styles = useStyles2(getStyles);\n const { loading, error, dependency } = useAsyncDependency(\n import(/* webpackChunkName: \"react-monaco-editor\" */ './ReactMonacoEditor')\n );\n\n if (loading) {\n return (\n \n );\n }\n\n if (error) {\n return (\n \n );\n }\n\n const ReactMonacoEditor = dependency.ReactMonacoEditor;\n return (\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n marginBottom: 'unset',\n marginLeft: theme.spacing(1),\n }),\n };\n};\n","// We use `import type` to guarantee it'll be erased from the JS and it doesnt accidently bundle monaco\nimport type { EditorProps } from '@monaco-editor/react';\nimport type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';\n\n// we do not allow customizing the theme.\n// (theme is complicated in Monaco, right now there is\n// a limitation where all monaco editors must have\n// the same theme, see\n// https://github.com/microsoft/monaco-editor/issues/338#issuecomment-274837186\n// )\nexport type ReactMonacoEditorProps = Omit;\n\nexport type CodeEditorChangeHandler = (value: string) => void;\nexport type CodeEditorSuggestionProvider = () => CodeEditorSuggestionItem[];\n\nexport type { monacoType as monacoTypes };\nexport type Monaco = typeof monacoType;\nexport type MonacoEditor = monacoType.editor.IStandaloneCodeEditor;\nexport type MonacoOptions = MonacoOptionsWithGrafanaDefaults;\n\nexport interface CodeEditorProps {\n value: string;\n language: string;\n width?: number | string;\n height?: number | string;\n\n readOnly?: boolean;\n showMiniMap?: boolean;\n showLineNumbers?: boolean;\n wordWrap?: boolean;\n monacoOptions?: MonacoOptions;\n\n /**\n * Callback before the editor has mounted that gives you raw access to monaco\n */\n onBeforeEditorMount?: (monaco: Monaco) => void;\n\n /**\n * Callback after the editor has mounted that gives you raw access to monaco\n */\n onEditorDidMount?: (editor: MonacoEditor, monaco: Monaco) => void;\n\n /** Callback before the edior has unmounted */\n onEditorWillUnmount?: () => void;\n\n /** Handler to be performed when editor is blurred */\n onBlur?: CodeEditorChangeHandler;\n\n /** Handler to be performed when editor is focused */\n onFocus?: CodeEditorChangeHandler;\n\n /** Handler to be performed whenever the text inside the editor changes */\n onChange?: CodeEditorChangeHandler;\n\n /** Handler to be performed when Cmd/Ctrl+S is pressed */\n onSave?: CodeEditorChangeHandler;\n\n /**\n * Language agnostic suggestion completions -- typically for template variables\n */\n getSuggestions?: CodeEditorSuggestionProvider;\n\n containerStyles?: string;\n}\n\n/**\n * @alpha\n */\nexport enum CodeEditorSuggestionItemKind {\n Method = 'method',\n Field = 'field',\n Property = 'property',\n Constant = 'constant',\n Text = 'text',\n}\n\n/**\n * @alpha\n */\nexport interface CodeEditorSuggestionItem {\n /**\n * The label of this completion item. By default\n * this is also the text that is inserted when selecting\n * this completion.\n */\n label: string;\n\n /**\n * The kind of this completion item. An icon is chosen\n * by the editor based on the kind.\n */\n kind?: CodeEditorSuggestionItemKind;\n\n /**\n * A human-readable string with additional information\n * about this item, like type or symbol information.\n */\n detail?: string;\n\n /**\n * A human-readable string that represents a doc-comment.\n */\n documentation?: string; // | IMarkdownString;\n\n /**\n * A string or snippet that should be inserted in a document when selecting\n * this completion. When `falsy` the `label` is used.\n */\n insertText?: string;\n}\n\n/**\n * This interface will extend the original Monaco editor options interface\n * but changing the code comments to contain the proper default values to\n * prevent the consumer of the CodeEditor to get incorrect documentation in editor.\n */\nexport interface MonacoOptionsWithGrafanaDefaults extends monacoType.editor.IStandaloneEditorConstructionOptions {\n /**\n * Enable custom contextmenu.\n * Defaults to false.\n */\n contextmenu?: boolean;\n /**\n * The number of spaces a tab is equal to.\n * This setting is overridden based on the file contents when `detectIndentation` is on.\n * Defaults to 4.\n */\n tabSize?: number;\n /**\n * Show code lens\n * Defaults to false.\n */\n codeLens?: boolean;\n /**\n * Control the width of line numbers, by reserving horizontal space for rendering at least an amount of digits.\n * Defaults to 4.\n */\n lineNumbersMinChars?: number;\n /**\n * The width reserved for line decorations (in px).\n * Line decorations are placed between line numbers and the editor content.\n * You can pass in a string in the format floating point followed by \"ch\". e.g. 1.3ch.\n * Defaults to 1 * theme.spacing.gridSize.\n */\n lineDecorationsWidth?: number | string;\n /**\n * Controls if a border should be drawn around the overview ruler.\n * Defaults to `false`.\n */\n overviewRulerBorder?: boolean;\n /**\n * Enable that the editor will install an interval to check if its container dom node size has changed.\n * Enabling this might have a severe performance impact.\n * Defaults to true.\n */\n automaticLayout?: boolean;\n\n /**\n * Always consume mouse wheel events (always call preventDefault() and stopPropagation() on the browser events).\n * Always consuming mouse wheel events will prevent the page from scrolling if the cursor is over the editor.\n * Defaults to `false`.\n */\n alwaysConsumeMouseWheel?: boolean;\n}\n","import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';\n\nimport { CodeEditorSuggestionItem, CodeEditorSuggestionItemKind, CodeEditorSuggestionProvider, Monaco } from './types';\n\n/**\n * @internal -- only exported for tests\n */\nexport function findInsertIndex(line: string): { index: number; prefix: string } {\n for (let i = line.length - 1; i > 0; i--) {\n const ch = line.charAt(i);\n if (ch === '$') {\n return {\n index: i,\n prefix: line.substring(i),\n };\n }\n\n // Keep these seperators\n if (ch === ' ' || ch === '\\t' || ch === '\"' || ch === \"'\") {\n return {\n index: i + 1,\n prefix: line.substring(i + 1),\n };\n }\n }\n return {\n index: 0,\n prefix: line,\n };\n}\n\nfunction getCompletionItems(\n monaco: Monaco,\n prefix: string,\n suggestions: CodeEditorSuggestionItem[],\n range: monacoType.IRange\n): monacoType.languages.CompletionItem[] {\n const items: monacoType.languages.CompletionItem[] = [];\n for (const suggestion of suggestions) {\n if (prefix && !suggestion.label.startsWith(prefix)) {\n continue; // skip non-matching suggestions\n }\n\n items.push({\n ...suggestion,\n kind: mapKinds(monaco, suggestion.kind),\n range,\n insertText: suggestion.insertText ?? suggestion.label,\n });\n }\n return items;\n}\n\nfunction mapKinds(monaco: Monaco, sug?: CodeEditorSuggestionItemKind): monacoType.languages.CompletionItemKind {\n switch (sug) {\n case CodeEditorSuggestionItemKind.Method:\n return monaco.languages.CompletionItemKind.Method;\n case CodeEditorSuggestionItemKind.Field:\n return monaco.languages.CompletionItemKind.Field;\n case CodeEditorSuggestionItemKind.Property:\n return monaco.languages.CompletionItemKind.Property;\n case CodeEditorSuggestionItemKind.Constant:\n return monaco.languages.CompletionItemKind.Constant;\n case CodeEditorSuggestionItemKind.Text:\n return monaco.languages.CompletionItemKind.Text;\n }\n return monaco.languages.CompletionItemKind.Text;\n}\n\n/**\n * @alpha\n */\nexport function registerSuggestions(\n monaco: Monaco,\n language: string,\n getSuggestions: CodeEditorSuggestionProvider,\n modelId: string\n): monacoType.IDisposable | undefined {\n if (!language || !getSuggestions) {\n return undefined;\n }\n return monaco.languages.registerCompletionItemProvider(language, {\n triggerCharacters: ['$'],\n\n provideCompletionItems: (model, position, context) => {\n // only return these suggestions for the specified modelId\n // prevents duplicate suggestions when multiple editors are open\n if (model.id !== modelId) {\n return undefined;\n }\n const range = {\n startLineNumber: position.lineNumber,\n endLineNumber: position.lineNumber,\n startColumn: position.column,\n endColumn: position.column,\n };\n\n // Simple check if this was triggered by pressing `$`\n if (context.triggerCharacter === '$') {\n range.startColumn = position.column - 1;\n return {\n suggestions: getCompletionItems(monaco, '$', getSuggestions(), range),\n };\n }\n\n // Find the replacement region\n const currentLine = model.getValueInRange({\n startLineNumber: position.lineNumber,\n startColumn: 1,\n endLineNumber: position.lineNumber,\n endColumn: position.column,\n });\n\n const { index, prefix } = findInsertIndex(currentLine);\n range.startColumn = index + 1;\n\n const suggestions = getCompletionItems(monaco, prefix, getSuggestions(), range);\n if (suggestions.length) {\n // NOTE, this will replace any language provided suggestions\n return { suggestions };\n }\n\n // Default language suggestions\n return undefined;\n },\n });\n}\n","import { css } from '@emotion/css';\nimport type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';\nimport { PureComponent } from 'react';\n\nimport { GrafanaTheme2, monacoLanguageRegistry } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { withTheme2 } from '../../themes/ThemeContext';\nimport { Themeable2 } from '../../types/theme';\n\nimport { ReactMonacoEditorLazy } from './ReactMonacoEditorLazy';\nimport { registerSuggestions } from './suggestions';\nimport { CodeEditorProps, Monaco, MonacoEditor as MonacoEditorType, MonacoOptions } from './types';\n\ntype Props = CodeEditorProps & Themeable2;\n\nclass UnthemedCodeEditor extends PureComponent {\n completionCancel?: monacoType.IDisposable;\n monaco?: Monaco;\n modelId?: string;\n\n constructor(props: Props) {\n super(props);\n }\n\n componentWillUnmount() {\n if (this.completionCancel) {\n this.completionCancel.dispose();\n }\n\n this.props.onEditorWillUnmount?.();\n }\n\n componentDidUpdate(oldProps: Props) {\n const { getSuggestions, language } = this.props;\n\n const newLanguage = oldProps.language !== language;\n const newGetSuggestions = oldProps.getSuggestions !== getSuggestions;\n\n if (newGetSuggestions || newLanguage) {\n if (this.completionCancel) {\n this.completionCancel.dispose();\n }\n\n if (!this.monaco) {\n console.warn('Monaco instance not loaded yet');\n return;\n }\n\n if (getSuggestions && this.modelId) {\n this.completionCancel = registerSuggestions(this.monaco, language, getSuggestions, this.modelId);\n }\n }\n\n if (newLanguage) {\n this.loadCustomLanguage();\n }\n }\n\n loadCustomLanguage = () => {\n const { language } = this.props;\n\n const customLanguage = monacoLanguageRegistry.getIfExists(language);\n\n if (customLanguage) {\n return customLanguage.init();\n }\n\n return Promise.resolve();\n };\n\n // This is replaced with a real function when the actual editor mounts\n getEditorValue = () => '';\n\n onBlur = () => {\n const { onBlur } = this.props;\n if (onBlur) {\n onBlur(this.getEditorValue());\n }\n };\n\n onFocus = () => {\n const { onFocus } = this.props;\n if (onFocus) {\n onFocus(this.getEditorValue());\n }\n };\n\n onSave = () => {\n const { onSave } = this.props;\n if (onSave) {\n onSave(this.getEditorValue());\n }\n };\n\n handleBeforeMount = (monaco: Monaco) => {\n this.monaco = monaco;\n\n const { onBeforeEditorMount } = this.props;\n\n onBeforeEditorMount?.(monaco);\n };\n\n handleOnMount = (editor: MonacoEditorType, monaco: Monaco) => {\n const { getSuggestions, language, onChange, onEditorDidMount } = this.props;\n\n this.modelId = editor.getModel()?.id;\n this.getEditorValue = () => editor.getValue();\n\n if (getSuggestions && this.modelId) {\n this.completionCancel = registerSuggestions(monaco, language, getSuggestions, this.modelId);\n }\n\n // Save when pressing Ctrl+S or Cmd+S\n editor.onKeyDown((e: monacoType.IKeyboardEvent) => {\n if (e.keyCode === monaco.KeyCode.KeyS && (e.ctrlKey || e.metaKey)) {\n e.preventDefault();\n this.onSave();\n }\n });\n\n if (onChange) {\n editor.getModel()?.onDidChangeContent(() => onChange(editor.getValue()));\n }\n\n if (onEditorDidMount) {\n onEditorDidMount(editor, monaco);\n }\n };\n\n render() {\n const { theme, language, width, height, showMiniMap, showLineNumbers, readOnly, wordWrap, monacoOptions } =\n this.props;\n const { alwaysConsumeMouseWheel, ...restMonacoOptions } = monacoOptions ?? {};\n\n const value = this.props.value ?? '';\n const longText = value.length > 100;\n\n const containerStyles = this.props.containerStyles ?? getStyles(theme).container;\n\n const options: MonacoOptions = {\n wordWrap: wordWrap ? 'on' : 'off',\n tabSize: 2,\n codeLens: false,\n contextmenu: false,\n minimap: {\n enabled: longText && showMiniMap,\n renderCharacters: false,\n },\n\n readOnly,\n lineNumbersMinChars: 4,\n lineDecorationsWidth: 1 * theme.spacing.gridSize,\n overviewRulerBorder: false,\n automaticLayout: true,\n padding: {\n top: 0.5 * theme.spacing.gridSize,\n bottom: 0.5 * theme.spacing.gridSize,\n },\n fixedOverflowWidgets: true, // Ensures suggestions menu is drawn on top\n\n scrollbar: {\n alwaysConsumeMouseWheel: alwaysConsumeMouseWheel ?? false,\n },\n };\n\n if (!showLineNumbers) {\n options.glyphMargin = false;\n options.folding = false;\n options.lineNumbers = 'off';\n options.lineNumbersMinChars = 0;\n }\n\n return (\n \n \n
    \n );\n }\n}\n\nexport const CodeEditor = withTheme2(UnthemedCodeEditor);\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${theme.components.input.borderColor}`,\n }),\n };\n};\n","import { VariableSuggestion } from '@grafana/data';\n\nimport { CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } from './types';\n\n/**\n * @alpha\n */\nexport function variableSuggestionToCodeEditorSuggestion(sug: VariableSuggestion): CodeEditorSuggestionItem {\n const label = '${' + sug.value + '}';\n const detail = sug.value === sug.label ? sug.origin : `${sug.label} / ${sug.origin}`;\n\n return {\n label,\n kind: CodeEditorSuggestionItemKind.Property,\n detail,\n documentation: sug.documentation,\n };\n}\n","import { NavModelItem } from '@grafana/data';\n\nimport { IconName } from '../../types/icon';\nimport { Tab } from '../Tabs/Tab';\nimport { TabsBar } from '../Tabs/TabsBar';\n\nimport { ModalHeader } from './ModalHeader';\n\ninterface ModalTab {\n value: string;\n label: string;\n icon?: IconName;\n tabSuffix?: NavModelItem['tabSuffix'];\n}\n\ninterface Props {\n icon: IconName;\n title: string;\n tabs: ModalTab[];\n activeTab: string;\n onChangeTab(tab: ModalTab): void;\n}\n\nexport const ModalTabsHeader = ({ icon, title, tabs, activeTab, onChangeTab }: Props) => {\n return (\n \n \n {tabs.map((t, index) => {\n return (\n onChangeTab(t)}\n />\n );\n })}\n \n \n );\n};\n","import { css } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\n\ninterface Props {\n /** @deprecated */\n icon?: IconName;\n /** @deprecated */\n iconClass?: string;\n}\n\n/** @internal */\nexport const ModalTabContent = ({ children }: React.PropsWithChildren) => {\n const styles = useStyles2(getStyles);\n\n return (\n
    \n
    \n
    {children}
    \n
    \n
    \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n header: css({\n display: 'flex',\n margin: theme.spacing(0, 0, 3, 0),\n }),\n content: css({\n flexGrow: 1,\n }),\n});\n","import { Component } from 'react';\nimport * as React from 'react';\n\nexport interface ModalsContextState {\n component: React.ComponentType | null;\n props: any;\n showModal: (component: React.ComponentType, props: T) => void;\n hideModal: () => void;\n}\n\nexport const ModalsContext = React.createContext({\n component: null,\n props: {},\n showModal: () => {},\n hideModal: () => {},\n});\n\ninterface ModalsProviderProps {\n children: React.ReactNode;\n /** Set default component to render as modal. Useful when rendering modals from Angular */\n component?: React.ComponentType | null;\n /** Set default component props. Useful when rendering modals from Angular */\n props?: any;\n}\n\n/**\n * @deprecated.\n * Not the real implementation used by core.\n */\nexport class ModalsProvider extends Component {\n constructor(props: ModalsProviderProps) {\n super(props);\n this.state = {\n component: props.component || null,\n props: props.props || {},\n showModal: this.showModal,\n hideModal: this.hideModal,\n };\n }\n\n showModal = (component: React.ComponentType, props: T) => {\n this.setState({\n component,\n props,\n });\n };\n\n hideModal = () => {\n this.setState({\n component: null,\n props: {},\n });\n };\n\n render() {\n return {this.props.children};\n }\n}\n\nexport const ModalRoot = () => (\n \n {({ component: Component, props }) => {\n return Component ? : null;\n }}\n \n);\n\nexport const ModalsController = ModalsContext.Consumer;\n","import { css, cx } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { useOverlay } from '@react-aria/overlays';\nimport { Children, forwardRef, HTMLAttributes, useState, useRef, useLayoutEffect, createRef } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { getPortalContainer } from '../Portal/Portal';\n\nimport { ToolbarButton } from './ToolbarButton';\nexport interface Props extends HTMLAttributes {\n className?: string;\n /** Determine flex-alignment of child buttons. Needed for overflow behaviour. */\n alignment?: 'left' | 'right';\n}\n\nexport const ToolbarButtonRow = forwardRef(\n ({ alignment = 'left', className, children, ...rest }, ref) => {\n // null/undefined are valid react children so we need to filter them out to prevent unnecessary padding\n const childrenWithoutNull = Children.toArray(children).filter((child) => child != null);\n const [childVisibility, setChildVisibility] = useState(Array(childrenWithoutNull.length).fill(false));\n const containerRef = useRef(null);\n const [showOverflowItems, setShowOverflowItems] = useState(false);\n const overflowRef = useRef(null);\n const overflowItemsRef = createRef();\n const { overlayProps } = useOverlay(\n {\n onClose: () => setShowOverflowItems(false),\n isDismissable: true,\n isOpen: showOverflowItems,\n shouldCloseOnInteractOutside: (element: Element) => {\n const portalContainer = getPortalContainer();\n return !overflowRef.current?.contains(element) && !portalContainer.contains(element);\n },\n },\n overflowItemsRef\n );\n const { dialogProps } = useDialog({}, overflowItemsRef);\n const theme = useTheme2();\n const overflowButtonOrder = alignment === 'left' ? childVisibility.indexOf(false) - 1 : childVisibility.length;\n const styles = getStyles(theme, overflowButtonOrder, alignment);\n\n useLayoutEffect(() => {\n const intersectionObserver = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.target instanceof HTMLElement && entry.target.parentNode) {\n const index = Array.prototype.indexOf.call(entry.target.parentNode.children, entry.target);\n setChildVisibility((prev) => {\n const newVisibility = [...prev];\n newVisibility[index] = entry.isIntersecting;\n return newVisibility;\n });\n }\n });\n },\n {\n threshold: 1,\n root: containerRef.current,\n }\n );\n if (containerRef.current) {\n Array.from(containerRef.current.children).forEach((item) => {\n // don't observe the overflow button\n if (item instanceof HTMLElement && item !== overflowRef.current) {\n intersectionObserver.observe(item);\n }\n });\n }\n return () => intersectionObserver.disconnect();\n }, [children]);\n\n return (\n
    \n {childrenWithoutNull.map((child, index) => (\n \n {child}\n
    \n ))}\n {childVisibility.includes(false) && (\n
    \n setShowOverflowItems(!showOverflowItems)}\n icon=\"ellipsis-v\"\n iconOnly\n narrow\n />\n {showOverflowItems && (\n \n
    \n {childrenWithoutNull.map((child, index) => !childVisibility[index] && child)}\n
    \n     \n )}\n
    \n )}\n
    \n );\n }\n);\n\nToolbarButtonRow.displayName = 'ToolbarButtonRow';\n\nconst getStyles = (theme: GrafanaTheme2, overflowButtonOrder: number, alignment: Props['alignment']) => ({\n overflowButton: css({\n order: overflowButtonOrder,\n }),\n overflowItems: css({\n alignItems: 'center',\n backgroundColor: theme.colors.background.primary,\n borderRadius: theme.shape.radius.default,\n boxShadow: theme.shadows.z2,\n display: 'flex',\n flexWrap: 'wrap',\n gap: theme.spacing(1),\n marginTop: theme.spacing(1),\n maxWidth: '80vw',\n padding: theme.spacing(0.5, 1),\n position: 'absolute',\n right: 0,\n top: '100%',\n width: 'max-content',\n zIndex: theme.zIndex.dropdown,\n }),\n container: css({\n alignItems: 'center',\n display: 'flex',\n gap: theme.spacing(1),\n justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',\n minWidth: 0,\n position: 'relative',\n }),\n childWrapper: css({\n alignItems: 'center',\n display: 'flex',\n gap: theme.spacing(1),\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport { memo, Children, ReactNode } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { IconName } from '../../types/icon';\nimport { Icon } from '../Icon/Icon';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Link } from '../Link/Link';\nimport { ToolbarButtonRow } from '../ToolbarButton/ToolbarButtonRow';\n\nexport interface Props {\n pageIcon?: IconName;\n title?: string;\n section?: string;\n parent?: string;\n onGoBack?: () => void;\n titleHref?: string;\n parentHref?: string;\n leftItems?: ReactNode[];\n children?: ReactNode;\n className?: string;\n isFullscreen?: boolean;\n 'aria-label'?: string;\n buttonOverflowAlignment?: 'left' | 'right';\n /**\n * Forces left items to be visible on small screens.\n * By default left items are hidden on small screens.\n */\n forceShowLeftItems?: boolean;\n}\n\n/** @deprecated Use Page instead */\nexport const PageToolbar = memo(\n ({\n title,\n section,\n parent,\n pageIcon,\n onGoBack,\n children,\n titleHref,\n parentHref,\n leftItems,\n isFullscreen,\n className,\n /** main nav-container aria-label **/\n 'aria-label': ariaLabel,\n buttonOverflowAlignment = 'right',\n forceShowLeftItems = false,\n }: Props) => {\n const styles = useStyles2(getStyles);\n\n /**\n * .page-toolbar css class is used for some legacy css view modes (TV/Kiosk) and\n * media queries for mobile view when toolbar needs left padding to make room\n * for mobile menu icon. This logic hopefully can be changed when we move to a full react\n * app and change how the app side menu & mobile menu is rendered.\n */\n const mainStyle = cx(\n 'page-toolbar',\n styles.toolbar,\n {\n ['page-toolbar--fullscreen']: isFullscreen,\n [styles.noPageIcon]: !pageIcon,\n },\n className\n );\n\n const titleEl = (\n <>\n {title}\n {section && (\n \n {' / '}\n {section}\n \n )}\n \n );\n\n const goBackLabel = t('grafana-ui.page-toolbar.go-back', 'Go back (Esc)');\n const searchParentFolderLabel = t(\n 'grafana-ui.page-toolbar.search-parent-folder',\n 'Search dashboard in the {{parent}} folder',\n { parent }\n );\n const searchDashboardNameLabel = t('grafana-ui.page-toolbar.search-dashboard-name', 'Search dashboard by name');\n const searchLinksLabel = t('grafana-ui.page-toolbar.search-links', 'Search links');\n\n return (\n \n
    \n \n {Children.toArray(children).filter(Boolean)}\n \n \n );\n }\n);\n\nPageToolbar.displayName = 'PageToolbar';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const { spacing, typography } = theme;\n\n const focusStyle = getFocusStyles(theme);\n\n return {\n pre: css({\n whiteSpace: 'pre',\n }),\n toolbar: css({\n alignItems: 'center',\n background: theme.colors.background.canvas,\n display: 'flex',\n gap: theme.spacing(2),\n justifyContent: 'space-between',\n padding: theme.spacing(1.5, 2),\n\n [theme.breakpoints.down('md')]: {\n paddingLeft: '53px',\n },\n }),\n noPageIcon: css({\n [theme.breakpoints.down('md')]: {\n paddingLeft: theme.spacing(2),\n },\n }),\n leftWrapper: css({\n display: 'flex',\n flexWrap: 'nowrap',\n maxWidth: '70%',\n }),\n pageIcon: css({\n display: 'none',\n [theme.breakpoints.up('sm')]: {\n display: 'flex',\n paddingRight: theme.spacing(1),\n alignItems: 'center',\n },\n }),\n truncateText: css({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n titleWrapper: css({\n display: 'flex',\n margin: 0,\n minWidth: 0,\n }),\n navElement: css({\n display: 'flex',\n alignItems: 'center',\n minWidth: 0,\n }),\n h1Styles: css({\n margin: spacing(0, 1, 0, 0),\n lineHeight: 'inherit',\n flexGrow: 1,\n minWidth: 0,\n }),\n parentIcon: css({\n marginLeft: theme.spacing(0.5),\n }),\n titleText: css({\n display: 'flex',\n fontSize: typography.size.lg,\n margin: 0,\n borderRadius: theme.shape.radius.default,\n }),\n titleLink: css({\n '&:focus-visible': focusStyle,\n }),\n titleDivider: css({\n padding: spacing(0, 0.5, 0, 0.5),\n display: 'none',\n [theme.breakpoints.up('md')]: {\n display: 'unset',\n },\n }),\n parentLink: css({\n display: 'none',\n [theme.breakpoints.up('md')]: {\n display: 'unset',\n flex: 1,\n },\n }),\n leftActionItem: css({\n display: 'none',\n alignItems: 'center',\n paddingRight: spacing(0.5),\n [theme.breakpoints.up('md')]: {\n display: 'flex',\n },\n }),\n forceShowLeftActionItems: css({\n display: 'flex',\n }),\n };\n};\n","import { isEqual } from 'lodash';\nimport { PureComponent } from 'react';\nimport { interval, Subscription, Subject, of, NEVER } from 'rxjs';\nimport { tap, switchMap } from 'rxjs/operators';\n\nimport { stringToMs, SelectableValue } from '@grafana/data';\n\nimport { RefreshPicker } from '../RefreshPicker/RefreshPicker';\n\nexport function getIntervalFromString(strInterval: string): SelectableValue {\n return {\n label: strInterval,\n value: stringToMs(strInterval),\n };\n}\n\ninterface Props {\n func: () => unknown;\n loading: boolean;\n interval: string;\n}\n\nexport class SetInterval extends PureComponent {\n private propsSubject: Subject;\n private subscription: Subscription | null;\n\n constructor(props: Props) {\n super(props);\n this.propsSubject = new Subject();\n this.subscription = null;\n }\n\n componentDidMount() {\n // Creating a subscription to propsSubject. This subject pushes values every time\n // SetInterval's props change\n this.subscription = this.propsSubject\n .pipe(\n // switchMap creates a new observables based on the input stream,\n // which becomes part of the propsSubject stream\n switchMap((props) => {\n // If the query is live, empty value is emitted. `of` creates single value,\n // which is merged to propsSubject stream\n if (RefreshPicker.isLive(props.interval)) {\n return of({});\n }\n\n // When query is loading, a new stream is merged. But it's a stream that emits no values(NEVER),\n // hence next call of this function will happen when query changes, and new props are passed into this component\n // When query is NOT loading, a new value is emitted, this time it's an interval value,\n // which makes tap function below execute on that interval basis.\n return props.loading ? NEVER : interval(stringToMs(props.interval));\n }),\n // tap will execute function passed via func prop\n // * on value from `of` stream merged if query is live\n // * on specified interval (triggered by values emitted by interval)\n tap(() => this.props.func())\n )\n .subscribe();\n\n // When component has mounted, propsSubject emits its first value\n this.propsSubject.next(this.props);\n }\n\n componentDidUpdate(prevProps: Props) {\n if (\n (RefreshPicker.isLive(prevProps.interval) && RefreshPicker.isLive(this.props.interval)) ||\n isEqual(prevProps, this.props)\n ) {\n return;\n }\n // if props changed, a new value is emitted from propsSubject\n this.propsSubject.next(this.props);\n }\n\n componentWillUnmount() {\n if (this.subscription) {\n this.subscription.unsubscribe();\n }\n\n this.propsSubject.unsubscribe();\n }\n\n render(): null {\n return null;\n }\n}\n","import { css, cx } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport type DragHandlePosition = 'middle' | 'start' | 'end';\n\nexport const getDragStyles = (theme: GrafanaTheme2, handlePosition?: DragHandlePosition) => {\n const position = handlePosition || 'middle';\n const baseColor = theme.colors.emphasize(theme.colors.background.secondary, 0.15);\n const hoverColor = theme.colors.primary.border;\n const clickTargetSize = theme.spacing(2);\n const handlebarThickness = 4;\n const handlebarWidth = 200;\n let verticalOffset = '50%';\n let horizontalOffset = '50%';\n\n switch (position) {\n case 'start': {\n verticalOffset = '0%';\n horizontalOffset = '0%';\n break;\n }\n case 'end': {\n verticalOffset = '100%';\n horizontalOffset = '100%';\n break;\n }\n }\n\n const dragHandleBase = css({\n position: 'relative',\n\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n transition: theme.transitions.create('border-color'),\n zIndex: 1,\n },\n\n '&:after': {\n background: baseColor,\n content: '\"\"',\n position: 'absolute',\n transition: theme.transitions.create('background'),\n transform: 'translate(-50%, -50%)',\n borderRadius: theme.shape.radius.pill,\n zIndex: 1,\n },\n\n '&:hover': {\n '&:before': {\n borderColor: hoverColor,\n },\n\n '&:after': {\n background: hoverColor,\n },\n },\n });\n\n const beforeVertical = {\n borderRight: '1px solid transparent',\n height: '100%',\n left: verticalOffset,\n transform: 'translateX(-50%)',\n };\n\n const beforeHorizontal = {\n borderTop: '1px solid transparent',\n top: horizontalOffset,\n transform: 'translateY(-50%)',\n };\n\n return {\n dragHandleVertical: cx(\n dragHandleBase,\n css({\n cursor: 'col-resize',\n width: clickTargetSize,\n\n '&:before': beforeVertical,\n\n '&:after': {\n left: verticalOffset,\n top: '50%',\n height: handlebarWidth,\n width: handlebarThickness,\n },\n })\n ),\n dragHandleHorizontal: cx(\n dragHandleBase,\n css({\n height: clickTargetSize,\n cursor: 'row-resize',\n\n '&:before': beforeHorizontal,\n\n '&:after': {\n left: '50%',\n top: horizontalOffset,\n height: handlebarThickness,\n width: handlebarWidth,\n },\n })\n ),\n dragHandleBaseVertical: cx(\n dragHandleBase,\n css({\n cursor: 'col-resize',\n width: clickTargetSize,\n\n '&:before': beforeVertical,\n })\n ),\n dragHandleBaseHorizontal: cx(\n dragHandleBase,\n css({\n cursor: 'row-resize',\n height: clickTargetSize,\n\n '&:before': beforeHorizontal,\n })\n ),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { useOverlay } from '@react-aria/overlays';\nimport RcDrawer from 'rc-drawer';\nimport { ReactNode, useCallback, useEffect, useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getDragStyles } from '../DragHandle/DragHandle';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { ScrollContainer } from '../ScrollContainer/ScrollContainer';\nimport { Text } from '../Text/Text';\n\nimport 'rc-drawer/assets/index.css';\n\nexport interface Props {\n children: ReactNode;\n /** Title shown at the top of the drawer */\n title?: ReactNode;\n /** Subtitle shown below the title */\n subtitle?: ReactNode;\n /** Should the Drawer be closable by clicking on the mask, defaults to true */\n closeOnMaskClick?: boolean;\n /** @deprecated */\n inline?: boolean;\n /**\n * @deprecated use the size property instead\n **/\n width?: number | string;\n /**\n * @deprecated use a large size instead if high width is needed\n **/\n expandable?: boolean;\n /**\n * Specifies the width and min-width.\n * sm = width 25vw & min-width 384px\n * md = width 50vw & min-width 568px\n * lg = width 75vw & min-width 744px\n **/\n size?: 'sm' | 'md' | 'lg';\n /** Tabs */\n tabs?: React.ReactNode;\n /**\n * Whether the content should be wrapped in a ScrollContainer\n * Only change this if you intend to manage scroll behaviour yourself\n * (e.g. having a split pane with independent scrolling)\n **/\n scrollableContent?: boolean;\n /** Callback for closing the drawer */\n onClose: () => void;\n}\n\nconst drawerSizes = {\n sm: { width: '25vw', minWidth: 384 },\n md: { width: '50vw', minWidth: 568 },\n lg: { width: '75vw', minWidth: 744 },\n};\n\nexport function Drawer({\n children,\n onClose,\n closeOnMaskClick = true,\n scrollableContent = true,\n title,\n subtitle,\n width,\n size = 'md',\n tabs,\n}: Props) {\n const [drawerWidth, onMouseDown, onTouchStart] = useResizebleDrawer();\n\n const styles = useStyles2(getStyles);\n const wrapperStyles = useStyles2(getWrapperStyles, size);\n const dragStyles = useStyles2(getDragStyles);\n\n const overlayRef = React.useRef(null);\n const { dialogProps, titleProps } = useDialog({}, overlayRef);\n const { overlayProps } = useOverlay(\n {\n isDismissable: false,\n isOpen: true,\n onClose,\n },\n overlayRef\n );\n\n // Adds body class while open so the toolbar nav can hide some actions while drawer is open\n useBodyClassWhileOpen();\n\n const content =
    {children}
    ;\n const overrideWidth = drawerWidth ?? width ?? drawerSizes[size].width;\n const minWidth = drawerSizes[size].minWidth;\n\n return (\n \n \n \n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n \n
    \n
    \n \n
    \n {typeof title === 'string' ? (\n \n \n {title}\n \n {subtitle && (\n
    \n {subtitle}\n
    \n )}\n     \n ) : (\n title\n )}\n {tabs &&
    {tabs}
    }\n
    \n {!scrollableContent ? content : {content}}\n
    \n \n \n );\n}\n\nfunction useResizebleDrawer(): [\n string | undefined,\n React.EventHandler,\n React.EventHandler,\n] {\n const [drawerWidth, setDrawerWidth] = useState(undefined);\n\n const onMouseMove = useCallback((e: MouseEvent) => {\n setDrawerWidth(getCustomDrawerWidth(e.clientX));\n }, []);\n\n const onTouchMove = useCallback((e: TouchEvent) => {\n const touch = e.touches[0];\n setDrawerWidth(getCustomDrawerWidth(touch.clientX));\n }, []);\n\n const onMouseUp = useCallback(\n (e: MouseEvent) => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n },\n [onMouseMove]\n );\n\n const onTouchEnd = useCallback(\n (e: TouchEvent) => {\n document.removeEventListener('touchmove', onTouchMove);\n document.removeEventListener('touchend', onTouchEnd);\n },\n [onTouchMove]\n );\n\n function onMouseDown(e: React.MouseEvent) {\n e.stopPropagation();\n e.preventDefault();\n // we will only add listeners when needed, and remove them afterward\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n\n function onTouchStart(e: React.TouchEvent) {\n e.stopPropagation();\n e.preventDefault();\n // we will only add listeners when needed, and remove them afterward\n document.addEventListener('touchmove', onTouchMove);\n document.addEventListener('touchend', onTouchEnd);\n }\n\n return [drawerWidth, onMouseDown, onTouchStart];\n}\n\nfunction getCustomDrawerWidth(clientX: number) {\n let offsetRight = document.body.offsetWidth - (clientX - document.body.offsetLeft);\n let widthPercent = Math.min((offsetRight / document.body.clientWidth) * 100, 98).toFixed(2);\n return `${widthPercent}vw`;\n}\n\nfunction useBodyClassWhileOpen() {\n useEffect(() => {\n if (!document.body) {\n return;\n }\n\n document.body.classList.add('body-drawer-open');\n\n return () => {\n document.body.classList.remove('body-drawer-open');\n };\n }, []);\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css({\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n flex: '1 1 0',\n minHeight: '100%',\n position: 'relative',\n }),\n drawer: css({\n top: 0,\n\n '.rc-drawer-content-wrapper': {\n boxShadow: theme.shadows.z3,\n },\n }),\n drawerContent: css({\n backgroundColor: `${theme.colors.background.primary} !important`,\n display: 'flex',\n overflow: 'unset !important',\n flexDirection: 'column',\n }),\n drawerMotion: css({\n '&-appear': {\n transform: 'translateX(100%)',\n transition: 'none !important',\n\n '&-active': {\n transition: `${theme.transitions.create('transform')} !important`,\n transform: 'translateX(0)',\n },\n },\n }),\n // we want the mask itself to span the whole page including the top bar\n // this ensures trying to click something in the top bar will close the drawer correctly\n // but we don't want the backdrop styling to apply over the top bar as it looks weird\n // instead have a child pseudo element to apply the backdrop styling below the top bar\n mask: css({\n // The !important here is to override the default .rc-drawer-mask styles\n backgroundColor: 'transparent !important',\n // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n position: 'fixed !important' as 'fixed',\n\n '&:before': {\n backgroundColor: `${theme.components.overlay.background} !important`,\n bottom: 0,\n content: '\"\"',\n left: 0,\n position: 'fixed',\n right: 0,\n top: 0,\n },\n }),\n maskMotion: css({\n '&-appear': {\n opacity: 0,\n\n '&-active': {\n opacity: 1,\n transition: theme.transitions.create('opacity'),\n },\n },\n }),\n header: css({\n label: 'drawer-header',\n flexGrow: 0,\n padding: theme.spacing(2, 2, 3),\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n headerWithTabs: css({\n borderBottom: 'none',\n }),\n actions: css({\n position: 'absolute',\n right: theme.spacing(1),\n top: theme.spacing(1),\n }),\n subtitle: css({\n label: 'drawer-subtitle',\n color: theme.colors.text.secondary,\n }),\n content: css({\n padding: theme.spacing(theme.components.drawer?.padding ?? 2),\n height: '100%',\n flexGrow: 1,\n minHeight: 0,\n }),\n tabsWrapper: css({\n label: 'drawer-tabs',\n paddingLeft: theme.spacing(2),\n margin: theme.spacing(1, -1, -3, -3),\n }),\n resizer: css({\n top: 0,\n left: theme.spacing(-1),\n bottom: 0,\n position: 'absolute',\n zIndex: theme.zIndex.modal,\n }),\n };\n};\n\nfunction getWrapperStyles(theme: GrafanaTheme2, size: 'sm' | 'md' | 'lg') {\n return css({\n label: `drawer-content-wrapper-${size}`,\n overflow: 'unset !important',\n\n [theme.breakpoints.down('md')]: {\n width: `calc(100% - ${theme.spacing(2)}) !important`,\n minWidth: '0 !important',\n },\n });\n}\n","import { isString } from 'lodash';\nimport { useState } from 'react';\n\nimport { t, Trans } from '@grafana/i18n';\n\nimport { ClipboardButton } from '../ClipboardButton/ClipboardButton';\nimport { Drawer } from '../Drawer/Drawer';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { CodeEditor } from '../Monaco/CodeEditor';\nimport { Tab } from '../Tabs/Tab';\nimport { TabsBar } from '../Tabs/TabsBar';\n\nexport enum TableCellInspectorMode {\n code = 'code',\n text = 'text',\n}\n\ninterface TableCellInspectorProps {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value: any;\n onDismiss: () => void;\n mode: TableCellInspectorMode;\n}\n\nexport function TableCellInspector({ value, onDismiss, mode }: TableCellInspectorProps) {\n let displayValue = value;\n const [currentMode, setMode] = useState(mode);\n\n if (isString(value)) {\n const trimmedValue = value.trim();\n // Exclude numeric strings like '123' from being displayed in code/JSON mode\n if (trimmedValue[0] === '{' || trimmedValue[0] === '[' || mode === 'code') {\n try {\n value = JSON.parse(value);\n displayValue = JSON.stringify(value, null, ' ');\n } catch (error: any) {\n // Display helpful error to help folks diagnose json errors\n console.log(\n 'Failed to parse JSON in Table cell inspector (this will cause JSON to not print nicely): ',\n error.message\n );\n }\n }\n } else {\n displayValue = JSON.stringify(value);\n }\n let text = displayValue;\n\n const tabs = [\n {\n label: 'Plain text',\n value: 'text',\n },\n {\n label: 'Code editor',\n value: 'code',\n },\n ];\n\n const changeTabs = () => {\n setMode(currentMode === TableCellInspectorMode.text ? TableCellInspectorMode.code : TableCellInspectorMode.text);\n };\n\n const tabBar = (\n \n {tabs.map((t, index) => (\n \n ))}\n \n );\n\n return (\n \n \n text} style={{ marginLeft: 'auto', width: '200px' }}>\n Copy to Clipboard\n \n {currentMode === 'code' ? (\n 100}\n value={text}\n readOnly={true}\n wordWrap={true}\n />\n ) : (\n 
    {text}
    \n )}\n     \n     \n );\n}\n","import { useEffect } from 'react';\nimport * as React from 'react';\nimport { VariableSizeList } from 'react-window';\n\nimport { DataFrame } from '@grafana/data';\n\nimport { GrafanaTableState } from './types';\n\n/**\n To have the custom vertical scrollbar always visible (https://github.com/grafana/grafana/issues/52136),\n we need to bring the element from the VariableSizeList scope to the outer Table container scope,\n because the VariableSizeList scope has overflow. By moving scrollbar to container scope we will have\n it always visible since the entire width is in view.\n Select the scrollbar element from the VariableSizeList scope\n */\nexport function useFixScrollbarContainer(\n variableSizeListScrollbarRef: React.RefObject,\n tableDivRef: React.RefObject\n) {\n useEffect(() => {\n if (variableSizeListScrollbarRef.current && tableDivRef.current) {\n const listVerticalScrollbarHTML = variableSizeListScrollbarRef.current.querySelector('.track-vertical');\n\n // Select Table custom scrollbars\n const tableScrollbarView = tableDivRef.current.firstChild;\n\n //If they exist, move the scrollbar element to the Table container scope\n if (tableScrollbarView && listVerticalScrollbarHTML) {\n listVerticalScrollbarHTML.remove();\n if (tableScrollbarView instanceof HTMLElement) {\n tableScrollbarView.querySelector(':scope > .track-vertical')?.remove();\n tableScrollbarView.append(listVerticalScrollbarHTML);\n }\n }\n }\n });\n}\n\n/**\n react-table caches the height of cells, so we need to reset them when expanding/collapsing rows.\n We use `lastExpandedOrCollapsedIndex` since collapsed rows disappear from `expandedIndexes` but still keep their expanded\n height.\n */\nexport function useResetVariableListSizeCache(\n extendedState: GrafanaTableState,\n listRef: React.RefObject,\n data: DataFrame,\n hasUniqueId: boolean\n) {\n // Make sure we trigger the reset when keys change in any way\n const expandedRowsRepr = JSON.stringify(Object.keys(extendedState.expanded));\n\n useEffect(() => {\n // By default, reset all rows\n let resetIndex = 0;\n\n // If we have unique field, extendedState.expanded keys are not row indexes but IDs so instead of trying to search\n // for correct index we just reset the whole table.\n if (!hasUniqueId) {\n // If we don't have we reset from the last changed index.\n if (Number.isFinite(extendedState.lastExpandedOrCollapsedIndex)) {\n resetIndex = extendedState.lastExpandedOrCollapsedIndex!;\n }\n\n // Account for paging.\n resetIndex =\n extendedState.pageIndex === 0\n ? resetIndex - 1\n : resetIndex - extendedState.pageIndex - extendedState.pageIndex * extendedState.pageSize;\n }\n\n listRef.current?.resetAfterIndex(Math.max(resetIndex, 0));\n return;\n }, [\n extendedState.lastExpandedOrCollapsedIndex,\n extendedState.pageSize,\n extendedState.pageIndex,\n listRef,\n data,\n expandedRowsRepr,\n hasUniqueId,\n ]);\n}\n","import { useCallback } from 'react';\n\nimport { getFieldDisplayName } from '@grafana/data';\n\nimport {\n TableSortByFieldState,\n GrafanaTableColumn,\n GrafanaTableState,\n TableStateReducerProps,\n TableRTProps,\n} from './types';\n\nexport interface ActionType {\n type: string;\n id: string | undefined;\n}\n\nexport function useTableStateReducer({ onColumnResize, onSortByChange, data }: TableStateReducerProps) {\n return useCallback(\n (newState: GrafanaTableState, action: ActionType) => {\n switch (action.type) {\n case 'columnDoneResizing':\n if (onColumnResize) {\n const info = (newState.columnResizing?.headerIdWidths as any)?.[0];\n const columnIdString = info?.[0];\n const fieldIndex = parseInt(columnIdString, 10);\n const width = Math.round(newState.columnResizing.columnWidths?.[columnIdString]);\n\n const field = data.fields?.[fieldIndex];\n if (!field) {\n return newState;\n }\n\n const fieldDisplayName = getFieldDisplayName(field, data);\n onColumnResize(fieldDisplayName, width);\n }\n case 'toggleSortBy':\n if (onSortByChange) {\n const sortByFields: TableSortByFieldState[] = [];\n\n for (const sortItem of newState.sortBy) {\n const field = data.fields[parseInt(sortItem.id, 10)];\n if (!field) {\n continue;\n }\n\n sortByFields.push({\n displayName: getFieldDisplayName(field, data),\n desc: sortItem.desc,\n });\n }\n\n onSortByChange(sortByFields);\n }\n case 'toggleRowExpanded': {\n if (action.id) {\n return {\n ...newState,\n lastExpandedOrCollapsedIndex: parseInt(action.id, 10),\n };\n }\n }\n }\n\n return newState;\n },\n [data, onColumnResize, onSortByChange]\n );\n}\n\nexport function getInitialState(\n initialSortBy: TableRTProps['initialSortBy'],\n columns: GrafanaTableColumn[]\n): Partial {\n const state: Partial = {};\n\n if (initialSortBy) {\n state.sortBy = [];\n\n for (const sortBy of initialSortBy) {\n for (const col of columns) {\n if (col.Header === sortBy.displayName) {\n state.sortBy.push({ id: col.id!, desc: sortBy.desc });\n }\n }\n }\n }\n\n return state;\n}\n","import { map, sortBy, flattenDeep, chunk, zip } from 'lodash';\nimport tinycolor from 'tinycolor2';\n\nconst PALETTE_ROWS = 4;\n\n/**\n * @alpha\n */\nexport const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)';\n\n/**\n * @alpha\n */\nexport const OK_COLOR = 'rgba(11, 237, 50, 1)';\n\n/**\n * @alpha\n */\nexport const ALERTING_COLOR = 'rgba(237, 46, 24, 1)';\n\n/**\n * @alpha\n */\nexport const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';\n\n/**\n * @alpha\n */\nexport const PENDING_COLOR = 'rgba(247, 149, 32, 1)';\n\n/**\n * @alpha\n */\nexport const REGION_FILL_ALPHA = 0.09;\nexport const colors = [\n '#7EB26D', // 0: pale green\n '#EAB839', // 1: mustard\n '#6ED0E0', // 2: light blue\n '#EF843C', // 3: orange\n '#E24D42', // 4: red\n '#1F78C1', // 5: ocean\n '#BA43A9', // 6: purple\n '#705DA0', // 7: violet\n '#508642', // 8: dark green\n '#CCA300', // 9: dark sand\n '#447EBC',\n '#C15C17',\n '#890F02',\n '#0A437C',\n '#6D1F62',\n '#584477',\n '#B7DBAB',\n '#F4D598',\n '#70DBED',\n '#F9BA8F',\n '#F29191',\n '#82B5D8',\n '#E5A8E2',\n '#AEA2E0',\n '#629E51',\n '#E5AC0E',\n '#64B0C8',\n '#E0752D',\n '#BF1B00',\n '#0A50A1',\n '#962D82',\n '#614D93',\n '#9AC48A',\n '#F2C96D',\n '#65C5DB',\n '#F9934E',\n '#EA6460',\n '#5195CE',\n '#D683CE',\n '#806EB7',\n '#3F6833',\n '#967302',\n '#2F575E',\n '#99440A',\n '#58140C',\n '#052B51',\n '#511749',\n '#3F2B5B',\n '#E0F9D7',\n '#FCEACA',\n '#CFFAFF',\n '#F9E2D2',\n '#FCE2DE',\n '#BADFF4',\n '#F9D9F9',\n '#DEDAF7',\n];\n\nfunction sortColorsByHue(hexColors: string[]) {\n const hslColors = map(hexColors, hexToHsl);\n\n const sortedHSLColors = sortBy(hslColors, ['h']);\n const chunkedHSLColors = chunk(sortedHSLColors, PALETTE_ROWS);\n const sortedChunkedHSLColors = map(chunkedHSLColors, (chunk) => {\n return sortBy(chunk, 'l');\n });\n const flattenedZippedSortedChunkedHSLColors = flattenDeep(zip(...sortedChunkedHSLColors));\n\n return map(flattenedZippedSortedChunkedHSLColors, hslToHex);\n}\n\nfunction hexToHsl(color: string) {\n return tinycolor(color).toHsl();\n}\n\nfunction hslToHex(color: tinycolor.ColorFormats.HSLA) {\n return tinycolor(color).toHexString();\n}\n\nexport function getTextColorForBackground(color: string) {\n const b = tinycolor(color).getBrightness();\n\n return b > 180 ? 'rgb(32, 34, 38)' : 'rgb(247, 248, 250)';\n}\n\nexport function getTextColorForAlphaBackground(color: string, themeIsDark: boolean) {\n const tcolor = tinycolor(color);\n const b = tcolor.getBrightness();\n const a = tcolor.getAlpha();\n\n if (a < 0.3) {\n return themeIsDark ? 'rgb(247, 248, 250)' : 'rgb(32, 34, 38)';\n }\n\n return b > 180 ? 'rgb(32, 34, 38)' : 'rgb(247, 248, 250)';\n}\n\nexport let sortedColors = sortColorsByHue(colors);\n","import { css, cx } from '@emotion/css';\nimport { ReactNode } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface LabelProps extends React.HTMLAttributes {\n children: string | ReactNode;\n description?: string;\n}\n\nexport const getLegendStyles = (theme: GrafanaTheme2) => {\n return {\n legend: css({\n fontSize: theme.typography.h3.fontSize,\n fontWeight: theme.typography.fontWeightRegular,\n margin: theme.spacing(0, 0, 2, 0),\n }),\n };\n};\n\nexport const Legend = ({ children, className, ...legendProps }: LabelProps) => {\n const styles = useStyles2(getLegendStyles);\n\n return (\n \n {children}\n \n );\n};\n","import { css, cx } from '@emotion/css';\nimport { HTMLProps } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { Legend } from './Legend';\n\nexport interface Props extends Omit, 'label'> {\n children: React.ReactNode[] | React.ReactNode;\n /** Label for the fieldset's legend */\n label?: React.ReactNode;\n}\n\nexport const FieldSet = ({ label, children, className, ...rest }: Props) => {\n const styles = useStyles2(getStyles);\n\n return (\n
    \n {label && {label}}\n {children}\n
    \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n wrapper: css({\n marginBottom: theme.spacing(4),\n\n '&:last-child': {\n marginBottom: 0,\n },\n }),\n});\n","import { css } from '@emotion/css';\n\nimport { ActionModel, ActionVariableInput } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Button } from '../Button/Button';\nimport { Field } from '../Forms/Field';\nimport { FieldSet } from '../Forms/FieldSet';\nimport { Input } from '../Input/Input';\nimport { Modal } from '../Modal/Modal';\n\ninterface Props {\n action: ActionModel;\n onDismiss: () => void;\n onShowConfirm: () => void;\n variables: ActionVariableInput;\n setVariables: (vars: ActionVariableInput) => void;\n}\n\n/**\n * @internal\n */\nexport function VariablesInputModal({ action, onDismiss, onShowConfirm, variables, setVariables }: Props) {\n const styles = useStyles2(getStyles);\n\n const onModalContinue = () => {\n onDismiss();\n onShowConfirm();\n };\n\n return (\n \n
    \n {action.variables!.map((variable) => (\n \n {\n setVariables({ ...variables, [variable.key]: e.currentTarget.value });\n }}\n placeholder={t('grafana-ui.action-editor.button.variable-value-placeholder', 'Value')}\n width={20}\n />\n \n ))}\n
    \n \n \n \n \n \n );\n}\n\nconst getStyles = () => {\n return {\n variablesModal: css({\n zIndex: 10000,\n }),\n };\n};\n","import { useState } from 'react';\n\nimport { ActionModel, Field, ActionVariableInput } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { ConfirmModal } from '../ConfirmModal/ConfirmModal';\n\nimport { VariablesInputModal } from './VariablesInputModal';\n\ntype ActionButtonProps = Omit & {\n action: ActionModel;\n};\n\n/**\n * @internal\n */\nexport function ActionButton({ action, ...buttonProps }: ActionButtonProps) {\n const theme = useTheme2();\n const backgroundColor = action.style.backgroundColor || theme.colors.secondary.main;\n const textColor = theme.colors.getContrastText(backgroundColor);\n\n const [showConfirm, setShowConfirm] = useState(false);\n\n // Action variables\n const [showVarsModal, setShowVarsModal] = useState(false);\n const [actionVars, setActionVars] = useState({});\n\n const actionHasVariables = action.variables && action.variables.length > 0;\n\n const onClick = () => {\n if (actionHasVariables) {\n setShowVarsModal(true);\n } else {\n setShowConfirm(true);\n }\n };\n\n return (\n <>\n \n {action.title}\n \n\n {actionHasVariables && showVarsModal && (\n setShowVarsModal(false)}\n action={action}\n onShowConfirm={() => setShowConfirm(true)}\n variables={actionVars}\n setVariables={setActionVars}\n />\n )}\n\n {showConfirm && (\n {\n setShowConfirm(false);\n action.onClick(new MouseEvent('click'), null, actionVars);\n }}\n onDismiss={() => {\n setShowConfirm(false);\n }}\n />\n )}\n \n );\n}\n","import { css, cx } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { ActionButton } from '../Actions/ActionButton';\n\nimport { TableCellProps } from './types';\n\nexport const ActionsCell = (props: TableCellProps) => {\n const { cellProps, tableStyles, actions } = props;\n\n const styles = useStyles2(getStyles);\n\n return (\n
    \n {actions && actions.map((action, i) => )}\n
    \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n buttonsGap: css({\n gap: 6,\n }),\n});\n","import { CSSProperties, HTMLProps } from 'react';\n\nimport { FormattedValue } from '@grafana/data';\n\nexport interface Props extends Omit, 'className' | 'value' | 'style'> {\n value: FormattedValue;\n className?: string;\n style?: CSSProperties;\n}\n\nfunction fontSizeReductionFactor(fontSize: number) {\n if (fontSize < 20) {\n return 0.9;\n }\n if (fontSize < 26) {\n return 0.8;\n }\n return 0.6;\n}\n\nexport const FormattedValueDisplay = ({ value, className, style, ...htmlProps }: Props) => {\n const hasPrefix = (value.prefix ?? '').length > 0;\n const hasSuffix = (value.suffix ?? '').length > 0;\n let suffixStyle;\n\n if (style && typeof style.fontSize === 'number' && !Number.isNaN(style.fontSize)) {\n const fontSize = style.fontSize;\n const reductionFactor = fontSizeReductionFactor(fontSize);\n suffixStyle = { fontSize: fontSize * reductionFactor };\n }\n\n return (\n
    \n
    \n {hasPrefix && {value.prefix}}\n {value.text}\n {hasSuffix && {value.suffix}}\n
    \n
    \n );\n};\n\nFormattedValueDisplay.displayName = 'FormattedDisplayValue';\n","// Library\nimport { cx } from '@emotion/css';\nimport { CSSProperties, PureComponent, ReactNode } from 'react';\nimport * as React from 'react';\nimport tinycolor from 'tinycolor2';\n\nimport {\n DisplayProcessor,\n DisplayValue,\n DisplayValueAlignmentFactors,\n FALLBACK_COLOR,\n FieldColorModeId,\n FieldConfig,\n FormattedValue,\n formattedValueToString,\n GAUGE_DEFAULT_MAXIMUM,\n GAUGE_DEFAULT_MINIMUM,\n getFieldColorMode,\n ThresholdsMode,\n TimeSeriesValue,\n VizOrientation,\n} from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { BarGaugeDisplayMode, BarGaugeNamePlacement, BarGaugeValueMode, VizTextDisplayOptions } from '@grafana/schema';\n\nimport { Themeable2 } from '../../types/theme';\nimport { calculateFontSize, measureText } from '../../utils/measureText';\nimport { clearButtonStyles } from '../Button/Button';\nimport { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';\n\nconst MIN_VALUE_HEIGHT = 18;\nconst MAX_VALUE_HEIGHT = 50;\nconst MAX_VALUE_WIDTH = 150;\nconst TITLE_LINE_HEIGHT = 1.5;\nconst VALUE_LINE_HEIGHT = 1;\nconst VALUE_LEFT_PADDING = 10;\nconst VALUE_RIGHT_OVERFLOW_PADDING = 15;\n\nexport interface Props extends Themeable2 {\n height: number;\n width: number;\n field: FieldConfig;\n display?: DisplayProcessor;\n value: DisplayValue;\n orientation: VizOrientation;\n text?: VizTextDisplayOptions;\n itemSpacing?: number;\n lcdCellWidth?: number;\n displayMode: BarGaugeDisplayMode;\n onClick?: React.MouseEventHandler;\n className?: string;\n showUnfilled?: boolean;\n alignmentFactors?: DisplayValueAlignmentFactors;\n valueDisplayMode?: BarGaugeValueMode;\n namePlacement?: BarGaugeNamePlacement;\n isOverflow: boolean;\n}\n\nexport class BarGauge extends PureComponent {\n static defaultProps: Partial = {\n lcdCellWidth: 12,\n value: {\n text: '100',\n numeric: 100,\n },\n displayMode: BarGaugeDisplayMode.Gradient,\n orientation: VizOrientation.Horizontal,\n field: {\n min: 0,\n max: 100,\n thresholds: {\n mode: ThresholdsMode.Absolute,\n steps: [],\n },\n },\n itemSpacing: 8,\n showUnfilled: true,\n isOverflow: false,\n };\n\n render() {\n const { onClick, className, theme } = this.props;\n const { title } = this.props.value;\n const styles = getTitleStyles(this.props);\n\n if (onClick) {\n return (\n \n
    {title}
    \n {this.renderBarAndValue()}\n \n );\n }\n\n return (\n
    \n {title &&
    {title}
    }\n {this.renderBarAndValue()}\n
    \n );\n }\n\n renderBarAndValue() {\n switch (this.props.displayMode) {\n case 'lcd':\n return this.renderRetroBars();\n case 'basic':\n case 'gradient':\n default:\n return this.renderBasicAndGradientBars();\n }\n }\n\n renderBasicAndGradientBars(): ReactNode {\n const { value, showUnfilled, valueDisplayMode } = this.props;\n\n const styles = getBasicAndGradientStyles(this.props);\n\n return (\n
    \n {valueDisplayMode !== BarGaugeValueMode.Hidden && (\n \n )}\n {showUnfilled &&
    }\n
    \n
    \n );\n }\n\n renderRetroBars(): ReactNode {\n const {\n display,\n field,\n value,\n itemSpacing,\n alignmentFactors,\n orientation,\n lcdCellWidth,\n text,\n valueDisplayMode,\n theme,\n isOverflow,\n } = this.props;\n const { valueHeight, valueWidth, maxBarHeight, maxBarWidth, wrapperWidth, wrapperHeight } =\n calculateBarAndValueDimensions(this.props);\n const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;\n const maxValue = field.max ?? GAUGE_DEFAULT_MAXIMUM;\n\n const isVert = isVertical(orientation);\n const valueRange = maxValue - minValue;\n const maxSize = isVert ? maxBarHeight : maxBarWidth;\n const cellSpacing = itemSpacing!;\n const cellCount = Math.floor(maxSize / lcdCellWidth!);\n const cellSize = Math.floor((maxSize - cellSpacing * cellCount) / cellCount);\n const valueColor = getTextValueColor(this.props);\n\n const valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value;\n const valueStyles = getValueStyles(\n valueToBaseSizeOn,\n valueColor,\n valueWidth,\n valueHeight,\n orientation,\n isOverflow,\n text\n );\n\n const containerStyles: CSSProperties = {\n width: `${wrapperWidth}px`,\n height: `${wrapperHeight}px`,\n display: 'flex',\n };\n\n if (isVert) {\n containerStyles.flexDirection = 'column-reverse';\n containerStyles.alignItems = 'center';\n } else {\n containerStyles.flexDirection = 'row';\n containerStyles.alignItems = 'center';\n valueStyles.justifyContent = 'flex-end';\n }\n\n const cells: JSX.Element[] = [];\n\n for (let i = 0; i < cellCount; i++) {\n const currentValue = minValue + (valueRange / cellCount) * i;\n const cellColor = getCellColor(currentValue, value, display);\n const cellStyles: CSSProperties = {\n borderRadius: theme.shape.radius.default,\n };\n\n if (cellColor.isLit) {\n cellStyles.backgroundImage = `radial-gradient(${cellColor.background} 10%, ${cellColor.backgroundShade})`;\n } else {\n cellStyles.backgroundColor = cellColor.background;\n }\n\n if (isVert) {\n cellStyles.height = `${cellSize}px`;\n cellStyles.width = `${maxBarWidth}px`;\n cellStyles.marginTop = `${cellSpacing}px`;\n } else {\n cellStyles.width = `${cellSize}px`;\n cellStyles.height = `${maxBarHeight}px`;\n cellStyles.marginRight = `${cellSpacing}px`;\n }\n\n cells.push(
    );\n }\n\n return (\n
    \n {cells}\n {valueDisplayMode !== BarGaugeValueMode.Hidden && (\n \n )}\n
    \n );\n }\n}\n\ninterface CellColors {\n background: string;\n backgroundShade?: string;\n border: string;\n isLit?: boolean;\n}\n\ninterface TitleDimensions {\n fontSize: number;\n placement: 'above' | 'left' | 'below' | 'hidden';\n width: number;\n height: number;\n}\n\nfunction isVertical(orientation: VizOrientation) {\n return orientation === VizOrientation.Vertical;\n}\n\nfunction calculateTitleDimensions(props: Props): TitleDimensions {\n const { height, width, alignmentFactors, orientation, text, namePlacement } = props;\n const title = alignmentFactors ? alignmentFactors.title : props.value.title;\n\n if (!title) {\n return { fontSize: 0, width: 0, height: 0, placement: 'above' };\n }\n\n if (namePlacement === BarGaugeNamePlacement.Hidden) {\n return {\n fontSize: 0,\n width: 0,\n height: 0,\n placement: BarGaugeNamePlacement.Hidden,\n };\n }\n\n if (isVertical(orientation)) {\n const fontSize = text?.titleSize ?? 14;\n return {\n fontSize: fontSize,\n width: width,\n height: fontSize * TITLE_LINE_HEIGHT,\n placement: 'below',\n };\n }\n\n const shouldDisplayValueAbove =\n (height > 40 && namePlacement === BarGaugeNamePlacement.Auto) || namePlacement === BarGaugeNamePlacement.Top;\n\n if (shouldDisplayValueAbove) {\n if (text?.titleSize) {\n return {\n fontSize: text?.titleSize,\n width: 0,\n height: text.titleSize * TITLE_LINE_HEIGHT,\n placement: 'above',\n };\n }\n\n const maxTitleHeightRatio = 0.45;\n const titleHeight = Math.max(Math.min(height * maxTitleHeightRatio, MAX_VALUE_HEIGHT), 17);\n\n return {\n fontSize: titleHeight / TITLE_LINE_HEIGHT,\n width: 0,\n height: titleHeight,\n placement: 'above',\n };\n }\n\n // title to left of bar scenario\n const maxTitleHeightRatio = 0.6;\n const titleHeight = Math.max(height * maxTitleHeightRatio, MIN_VALUE_HEIGHT);\n const titleFontSize = titleHeight / TITLE_LINE_HEIGHT;\n const textSize = measureText(title, titleFontSize);\n\n // Do not allow title to take up more than 40% width\n const textWidth = Math.min(textSize.width + 15, width * 0.4);\n\n return {\n fontSize: text?.titleSize ?? titleFontSize,\n height: 0,\n width: textWidth,\n placement: 'left',\n };\n}\n\nexport function getTitleStyles(props: Props): { wrapper: CSSProperties; title: CSSProperties } {\n const wrapperStyles: CSSProperties = {\n display: 'flex',\n overflow: 'hidden',\n width: '100%',\n };\n\n const titleDim = calculateTitleDimensions(props);\n\n const titleStyles: CSSProperties = {\n fontSize: `${titleDim.fontSize}px`,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n width: '100%',\n alignItems: 'center',\n alignSelf: 'center',\n };\n\n if (titleDim.placement === 'hidden') {\n titleStyles.display = 'none';\n } else {\n if (isVertical(props.orientation)) {\n wrapperStyles.flexDirection = 'column-reverse';\n titleStyles.textAlign = 'center';\n } else {\n if (titleDim.placement === 'above') {\n wrapperStyles.flexDirection = 'column';\n } else {\n wrapperStyles.flexDirection = 'row';\n\n titleStyles.width = `${titleDim.width}px`;\n titleStyles.textAlign = 'right';\n titleStyles.paddingRight = '10px';\n }\n }\n }\n\n return {\n wrapper: wrapperStyles,\n title: titleStyles,\n };\n}\n\ninterface BasicAndGradientStyles {\n wrapper: CSSProperties;\n bar: CSSProperties;\n emptyBar: CSSProperties;\n value: CSSProperties;\n}\n\ninterface BarAndValueDimensions {\n valueWidth: number;\n valueHeight: number;\n maxBarWidth: number;\n maxBarHeight: number;\n wrapperHeight: number;\n wrapperWidth: number;\n}\n\n/**\n * @internal\n * Only exported for unit tests\n **/\nexport function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions {\n const { height, width, orientation, text, alignmentFactors, valueDisplayMode } = props;\n const titleDim = calculateTitleDimensions(props);\n const value = alignmentFactors ?? props.value;\n const valueString = formattedValueToString(value);\n\n let maxBarHeight = 0;\n let maxBarWidth = 0;\n let valueHeight = 0;\n let valueWidth = 0;\n let wrapperWidth = 0;\n let wrapperHeight = 0;\n\n // measure text with title font size or min 14px\n const fontSizeToMeasureWith = text?.valueSize ?? Math.max(titleDim.fontSize, 12);\n const realTextSize = measureText(valueString, fontSizeToMeasureWith);\n const realValueWidth = realTextSize.width + VALUE_LEFT_PADDING * 2;\n\n if (isVertical(orientation)) {\n if (text?.valueSize) {\n valueHeight = text.valueSize * VALUE_LINE_HEIGHT;\n } else {\n valueHeight = Math.min(Math.max(height * 0.1, MIN_VALUE_HEIGHT), MAX_VALUE_HEIGHT);\n }\n\n valueWidth = width;\n\n if (valueDisplayMode === BarGaugeValueMode.Hidden) {\n valueHeight = 0;\n valueWidth = 0;\n }\n\n maxBarHeight = height - (titleDim.height + valueHeight);\n maxBarWidth = width;\n wrapperWidth = width;\n wrapperHeight = height - titleDim.height;\n } else {\n // Calculate the width and the height of the given values\n if (valueDisplayMode === BarGaugeValueMode.Hidden) {\n valueHeight = 0;\n valueWidth = 0;\n } else {\n valueHeight = height - titleDim.height;\n valueWidth = Math.max(Math.min(width * 0.2, MAX_VALUE_WIDTH), realValueWidth);\n }\n\n maxBarHeight = height - titleDim.height;\n maxBarWidth = width - valueWidth - titleDim.width;\n\n if (titleDim.placement === 'above') {\n wrapperWidth = width;\n wrapperHeight = height - titleDim.height;\n } else {\n wrapperWidth = width - titleDim.width;\n wrapperHeight = height;\n }\n }\n\n return {\n valueWidth,\n valueHeight,\n maxBarWidth,\n maxBarHeight,\n wrapperHeight,\n wrapperWidth,\n };\n}\n\nexport function getCellColor(\n positionValue: TimeSeriesValue,\n value: Props['value'],\n display: Props['display']\n): CellColors {\n if (positionValue === null) {\n return {\n background: FALLBACK_COLOR,\n border: FALLBACK_COLOR,\n };\n }\n\n const color = display ? display(positionValue).color : null;\n\n if (color) {\n // if we are past real value the cell is not \"on\"\n if (value === null || isNaN(value.numeric) || (positionValue !== null && positionValue > value.numeric)) {\n return {\n background: tinycolor(color).setAlpha(0.18).toRgbString(),\n border: 'transparent',\n isLit: false,\n };\n } else {\n return {\n background: tinycolor(color).setAlpha(0.95).toRgbString(),\n backgroundShade: tinycolor(color).setAlpha(0.55).toRgbString(),\n border: tinycolor(color).setAlpha(0.9).toRgbString(),\n isLit: true,\n };\n }\n }\n\n return {\n background: FALLBACK_COLOR,\n border: FALLBACK_COLOR,\n };\n}\n\nexport function getValuePercent(value: number, minValue: number, maxValue: number): number {\n // Need special logic for when minValue === maxValue === value to prevent returning NaN\n const valueRatio = Math.min((value - minValue) / (maxValue - minValue), 1);\n return isNaN(valueRatio) ? 0 : valueRatio;\n}\n\n/**\n * Only exported to for unit test\n */\nexport function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles {\n const { displayMode, field, value, alignmentFactors, orientation, theme, text, isOverflow } = props;\n const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props);\n\n const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;\n const maxValue = field.max ?? GAUGE_DEFAULT_MAXIMUM;\n const valuePercent = getValuePercent(value.numeric, minValue, maxValue);\n const textColor = getTextValueColor(props);\n const barColor = value.color ?? FALLBACK_COLOR;\n\n const valueToBaseSizeOn = alignmentFactors ? alignmentFactors : value;\n const valueStyles = getValueStyles(\n valueToBaseSizeOn,\n textColor,\n valueWidth,\n valueHeight,\n orientation,\n isOverflow,\n text\n );\n\n const isBasic = displayMode === 'basic';\n const wrapperStyles: CSSProperties = {\n display: 'flex',\n flexGrow: 1,\n };\n\n const barStyles: CSSProperties = {\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n };\n\n const emptyBar: CSSProperties = {\n background: theme.colors.background.secondary,\n flexGrow: 1,\n display: 'flex',\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n };\n\n if (isVertical(orientation)) {\n const barHeight = Math.max(valuePercent * maxBarHeight, 1);\n\n // vertical styles\n wrapperStyles.flexDirection = 'column';\n wrapperStyles.justifyContent = 'flex-end';\n\n barStyles.transition = 'height 1s';\n barStyles.height = `${barHeight}px`;\n barStyles.width = `${maxBarWidth}px`;\n\n // adjust so that filled in bar is at the bottom\n emptyBar.bottom = '-3px';\n\n //adjust empty region to always have same width as colored bar\n emptyBar.width = `${valueWidth}px`;\n\n if (isBasic) {\n // Basic styles\n barStyles.background = `${tinycolor(barColor).setAlpha(0.35).toRgbString()}`;\n barStyles.borderTop = `2px solid ${barColor}`;\n } else {\n // Gradient styles\n barStyles.background = getBarGradient(props, maxBarHeight);\n }\n } else {\n const barWidth = Math.max(valuePercent * maxBarWidth, 1);\n\n // Custom styles for horizontal orientation\n wrapperStyles.flexDirection = 'row-reverse';\n wrapperStyles.justifyContent = 'flex-end';\n wrapperStyles.alignItems = 'stretch';\n\n barStyles.transition = 'width 1s';\n barStyles.height = `${maxBarHeight}px`;\n barStyles.width = `${barWidth}px`;\n\n // shift empty region back to fill gaps due to border radius\n emptyBar.left = '-3px';\n\n //adjust empty region to always have same height as colored bar\n emptyBar.height = `${valueHeight}px`;\n\n if (isBasic) {\n // Basic styles\n barStyles.background = `${tinycolor(barColor).setAlpha(0.35).toRgbString()}`;\n barStyles.borderRight = `2px solid ${barColor}`;\n } else {\n // Gradient styles\n barStyles.background = getBarGradient(props, maxBarWidth);\n }\n }\n\n return {\n wrapper: wrapperStyles,\n bar: barStyles,\n value: valueStyles,\n emptyBar,\n };\n}\n\n/**\n * Only exported to for unit test\n */\nexport function getBarGradient(props: Props, maxSize: number): string {\n const { field, value, orientation, theme } = props;\n const cssDirection = isVertical(orientation) ? '0deg' : '90deg';\n const minValue = field.min!;\n const maxValue = field.max!;\n\n let gradient = '';\n let lastpos = 0;\n let mode = getFieldColorMode(field.color?.mode);\n\n if (mode.id === FieldColorModeId.Thresholds) {\n const thresholds = field.thresholds!;\n\n for (let i = 0; i < thresholds.steps.length; i++) {\n const threshold = thresholds.steps[i];\n const color = props.theme.visualization.getColorByName(threshold.color);\n const valuePercent =\n thresholds.mode === ThresholdsMode.Percentage\n ? threshold.value / 100\n : getValuePercent(threshold.value, minValue, maxValue);\n const pos = valuePercent * maxSize;\n const offset = Math.round(pos - (pos - lastpos) / 2);\n const thresholdValue =\n thresholds.mode === ThresholdsMode.Percentage\n ? minValue + (maxValue - minValue) * valuePercent\n : threshold.value;\n if (gradient === '') {\n gradient = `linear-gradient(${cssDirection}, ${color}, ${color}`;\n } else if (value.numeric < thresholdValue) {\n break;\n } else {\n lastpos = pos;\n gradient += ` ${offset}px, ${color}`;\n }\n }\n\n return gradient + ')';\n }\n\n if (mode.isContinuous && mode.getColors) {\n const scheme = mode.getColors(theme);\n\n for (let i = 0; i < scheme.length; i++) {\n const color = scheme[i];\n\n if (gradient === '') {\n gradient = `linear-gradient(${cssDirection}, ${color} 0px`;\n } else {\n const valuePercent = i / (scheme.length - 1);\n const pos = valuePercent * maxSize;\n gradient += `, ${color} ${pos}px`;\n }\n }\n return gradient + ')';\n }\n\n return value.color ?? FALLBACK_COLOR;\n}\n\n/**\n * Only exported to for unit test\n */\nexport function getTextValueColor(props: Props): string {\n if (props.valueDisplayMode === 'text') {\n return props.theme.colors.text.primary;\n }\n\n const { value } = props;\n if (value.color) {\n return value.color;\n }\n\n return FALLBACK_COLOR;\n}\n\nfunction getValueStyles(\n value: FormattedValue,\n color: string,\n width: number,\n height: number,\n orientation: VizOrientation,\n isOverflow: boolean,\n text?: VizTextDisplayOptions\n): CSSProperties {\n const styles: CSSProperties = {\n color,\n height: `${height}px`,\n maxWidth: `${width}px`,\n display: 'flex',\n alignItems: 'center',\n textWrap: 'nowrap',\n lineHeight: VALUE_LINE_HEIGHT,\n };\n\n // how many pixels in wide can the text be?\n let textWidth = width;\n const formattedValueString = formattedValueToString(value);\n\n if (isVertical(orientation)) {\n styles.fontSize = text?.valueSize ?? calculateFontSize(formattedValueString, textWidth, height, VALUE_LINE_HEIGHT);\n styles.justifyContent = `center`;\n } else {\n styles.fontSize =\n text?.valueSize ??\n calculateFontSize(formattedValueString, textWidth - VALUE_LEFT_PADDING * 2, height, VALUE_LINE_HEIGHT);\n styles.justifyContent = `flex-end`;\n styles.paddingLeft = `${VALUE_LEFT_PADDING}px`;\n styles.paddingRight = `${VALUE_LEFT_PADDING + (isOverflow ? VALUE_RIGHT_OVERFLOW_PADDING : 0)}px`;\n // Need to remove the left padding from the text width constraints\n textWidth -= VALUE_LEFT_PADDING;\n }\n\n return styles;\n}\n","import { Field, LinkModel } from '@grafana/data';\n\nimport { ButtonProps, Button } from '../Button/Button';\n\ntype DataLinkButtonProps = {\n link: LinkModel;\n buttonProps?: Omit;\n};\n\n/**\n * @internal\n */\nexport function DataLinkButton({ link, buttonProps }: DataLinkButtonProps) {\n return (\n {\n if (!(event.ctrlKey || event.metaKey || event.shiftKey) && link.onClick) {\n event.preventDefault();\n link.onClick(event);\n }\n }\n : undefined\n }\n >\n \n {link.title}\n \n \n );\n}\n","import { css } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport { ActionModel, Field, GrafanaTheme2, LinkModel, ThemeSpacingTokens } from '@grafana/data';\nimport { Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { ActionButton } from '../Actions/ActionButton';\nimport { Button } from '../Button/Button';\nimport { DataLinkButton } from '../DataLinks/DataLinkButton';\nimport { Icon } from '../Icon/Icon';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { ResponsiveProp } from '../Layout/utils/responsiveness';\nimport { AdHocFilterItem } from '../Table/TableNG/types';\n\nexport interface AdHocFilterModel extends AdHocFilterItem {\n onClick: () => void;\n}\n\ninterface VizTooltipFooterProps {\n dataLinks: Array>;\n actions?: Array>;\n adHocFilters?: AdHocFilterModel[];\n annotate?: () => void;\n}\n\nexport const ADD_ANNOTATION_ID = 'add-annotation-button';\n\ntype RenderOneClickTrans = (title: string) => React.ReactNode;\ntype RenderItem = (\n item: T,\n idx: number,\n styles: ReturnType\n) => React.ReactNode;\n\nfunction makeRenderLinksOrActions(\n renderOneClickTrans: RenderOneClickTrans,\n renderItem: RenderItem,\n itemGap?: ResponsiveProp\n) {\n const renderLinksOrActions = (items: T[], styles: ReturnType) => {\n if (items.length === 0) {\n return;\n }\n\n const oneClickItem = items.find((item) => item.oneClick === true);\n\n if (oneClickItem != null) {\n return (\n
    \n \n \n \n {renderOneClickTrans(oneClickItem.title)}\n \n \n
    \n );\n }\n\n return (\n
    \n \n {items.map((item, i) => renderItem(item, i, styles))}\n \n
    \n );\n };\n\n return renderLinksOrActions;\n}\n\nconst renderDataLinks = makeRenderLinksOrActions(\n (title) => (\n Click to open {{ linkTitle: title }}\n ),\n (item, i, styles) => (\n \n ),\n 0.5\n);\n\nconst renderActions = makeRenderLinksOrActions(\n (title) => Click to {{ actionTitle: title }},\n (item, i) => \n);\n\nexport const VizTooltipFooter = ({ dataLinks, actions = [], annotate, adHocFilters = [] }: VizTooltipFooterProps) => {\n const styles = useStyles2(getStyles);\n const hasOneClickLink = useMemo(() => dataLinks.some((link) => link.oneClick === true), [dataLinks]);\n const hasOneClickAction = useMemo(() => actions.some((action) => action.oneClick === true), [actions]);\n\n return (\n
    \n {!hasOneClickAction && renderDataLinks(dataLinks, styles)}\n {!hasOneClickLink && renderActions(actions, styles)}\n {!hasOneClickLink && !hasOneClickAction && adHocFilters.length > 0 && (\n
    \n {adHocFilters.map((item, index) => (\n \n ))}\n
    \n )}\n {!hasOneClickLink && !hasOneClickAction && annotate != null && (\n
    \n \n
    \n )}\n
    \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n wrapper: css({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n padding: theme.spacing(0),\n }),\n footerSection: css({\n borderTop: `1px solid ${theme.colors.border.medium}`,\n padding: theme.spacing(1),\n }),\n dataLinkButton: css({\n cursor: 'pointer',\n '&:hover': {\n textDecoration: 'underline',\n background: 'none',\n },\n padding: 0,\n height: 'auto',\n '& span': {\n whiteSpace: 'normal',\n textAlign: 'left',\n },\n }),\n oneClickWrapper: css({\n display: 'flex',\n alignItems: 'center',\n }),\n infoIcon: css({\n color: theme.colors.primary.main,\n paddingRight: theme.spacing(0.5),\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport React, { HTMLAttributes } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface Props extends HTMLAttributes {\n children?: React.ReactNode;\n}\n\nexport const VizTooltipWrapper = ({ children, className }: Props) => {\n const styles = useStyles2(getStyles);\n\n return
    {children}
    ;\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n wrapper: css({\n display: 'flex',\n flexDirection: 'column',\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n});\n","import { css } from '@emotion/css';\nimport { flip, shift, useDismiss, useFloating, useInteractions } from '@floating-ui/react';\nimport { useMemo, ReactNode } from 'react';\n\nimport { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { Portal } from '../Portal/Portal';\nimport { VizTooltipFooter } from '../VizTooltip/VizTooltipFooter';\nimport { VizTooltipWrapper } from '../VizTooltip/VizTooltipWrapper';\n\nimport { DataLinksActionsTooltipCoords } from './utils';\n\ninterface Props {\n links: LinkModel[];\n actions?: ActionModel[];\n value?: ReactNode;\n coords: DataLinksActionsTooltipCoords;\n onTooltipClose?: () => void;\n}\n\n/**\n *\n * @internal\n */\nexport const DataLinksActionsTooltip = ({ links, actions, value, coords, onTooltipClose }: Props) => {\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n\n // the order of middleware is important!\n const middleware = [\n flip({\n fallbackAxisSideDirection: 'end',\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n ];\n\n const virtual = useMemo(() => {\n const { clientX, clientY } = coords;\n\n // https://floating-ui.com/docs/virtual-elements\n return {\n getBoundingClientRect() {\n return {\n width: 0,\n height: 0,\n x: clientX,\n y: clientY,\n top: clientY,\n left: clientX,\n right: clientX,\n bottom: clientY,\n };\n },\n };\n }, [coords]);\n\n const refCallback = (el: HTMLDivElement) => {\n refs.setFloating(el);\n refs.setReference(virtual);\n };\n\n const { context, refs, floatingStyles } = useFloating({\n open: true,\n placement: 'right-start',\n onOpenChange: onTooltipClose,\n middleware,\n // whileElementsMounted: autoUpdate,\n });\n\n const dismiss = useDismiss(context);\n\n const { getFloatingProps, getReferenceProps } = useInteractions([dismiss]);\n\n if (links.length === 0 && !Boolean(actions?.length)) {\n return null;\n }\n\n return (\n <>\n {/* TODO: we can remove `value` from this component when TableRT is fully deprecated */}\n {value}\n \n \n \n \n \n
    \n \n \n );\n};\n\nexport const renderSingleLink = (link: LinkModel, children: ReactNode, className?: string): ReactNode => {\n return (\n \n {children}\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n tooltipWrapper: css({\n whiteSpace: 'pre',\n borderRadius: theme.shape.radius.default,\n background: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.weak}`,\n boxShadow: theme.shadows.z3,\n userSelect: 'text',\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n };\n};\n","import { isFunction } from 'lodash';\nimport { useState } from 'react';\n\nimport { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax } from '@grafana/data';\nimport { BarGaugeDisplayMode, BarGaugeValueMode, TableCellDisplayMode } from '@grafana/schema';\n\nimport { BarGauge } from '../../BarGauge/BarGauge';\nimport { DataLinksActionsTooltip, renderSingleLink } from '../DataLinksActionsTooltip';\nimport { TableCellProps } from '../types';\nimport {\n DataLinksActionsTooltipCoords,\n getAlignmentFactor,\n getCellOptions,\n getDataLinksActionsTooltipUtils,\n} from '../utils';\n\nconst defaultScale: ThresholdsConfig = {\n mode: ThresholdsMode.Absolute,\n steps: [\n {\n color: 'blue',\n value: -Infinity,\n },\n {\n color: 'green',\n value: 20,\n },\n ],\n};\n\nexport const BarGaugeCell = (props: TableCellProps) => {\n const { field, innerWidth, tableStyles, cell, cellProps, row } = props;\n const displayValue = field.display!(cell.value);\n const cellOptions = getCellOptions(field);\n\n let config = getFieldConfigWithMinMax(field, false);\n if (!config.thresholds) {\n config = {\n ...config,\n thresholds: defaultScale,\n };\n }\n\n // Set default display mode and update if defined\n // and update the valueMode if defined\n let barGaugeMode: BarGaugeDisplayMode = BarGaugeDisplayMode.Gradient;\n let valueDisplayMode: BarGaugeValueMode | undefined = undefined;\n\n if (cellOptions.type === TableCellDisplayMode.Gauge) {\n barGaugeMode = cellOptions.mode ?? BarGaugeDisplayMode.Gradient;\n valueDisplayMode =\n cellOptions.valueDisplayMode !== undefined ? cellOptions.valueDisplayMode : BarGaugeValueMode.Text;\n }\n\n const getLinks = () => {\n if (!isFunction(field.getLinks)) {\n return [];\n }\n\n return field.getLinks({ valueRowIndex: row.index });\n };\n\n const alignmentFactors = getAlignmentFactor(field, displayValue, cell.row.index);\n\n const renderComponent = () => {\n return (\n \n );\n };\n\n const [tooltipCoords, setTooltipCoords] = useState();\n const { shouldShowLink, hasMultipleLinksOrActions } = getDataLinksActionsTooltipUtils(getLinks());\n const shouldShowTooltip = hasMultipleLinksOrActions && tooltipCoords !== undefined;\n\n const links = getLinks();\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n {\n setTooltipCoords({ clientX, clientY });\n }}\n >\n {shouldShowLink ? (\n renderSingleLink(links[0], renderComponent())\n ) : shouldShowTooltip ? (\n setTooltipCoords(undefined)}\n />\n ) : (\n renderComponent()\n )}\n
    \n );\n};\n","import { Row } from 'react-table';\n\nimport { Field, LinkModel } from '@grafana/data';\n\n/**\n * @internal\n */\nexport const getCellLinks = (field: Field, row: Row) => {\n let links: Array> | undefined;\n if (field.getLinks) {\n links = field.getLinks({\n valueRowIndex: row.index,\n });\n }\n\n if (!links) {\n return;\n }\n\n for (let i = 0; i < links?.length; i++) {\n if (links[i].onClick) {\n const origOnClick = links[i].onClick;\n\n links[i].onClick = (event) => {\n // Allow opening in new tab\n if (!(event.ctrlKey || event.metaKey || event.shiftKey)) {\n event.preventDefault();\n origOnClick!(event, {\n field,\n rowIndex: row.index,\n });\n }\n };\n }\n }\n\n return links.filter((link) => link.href || link.onClick != null);\n};\n","import { getCellLinks } from '../../../utils/table';\nimport { TableCellProps } from '../types';\n\nexport const DataLinksCell = (props: TableCellProps) => {\n const { field, row, cellProps, tableStyles } = props;\n\n const links = getCellLinks(field, row);\n\n return (\n
    \n {links?.map((link, idx) => {\n return !link.href && link.onClick == null ? (\n \n {link.title}\n \n ) : (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n \n \n {link.title}\n \n \n );\n })}\n
    \n );\n};\n","import { Property } from 'csstype';\nimport { FC } from 'react';\nimport { CellProps, Column, Row, TableState, UseExpandedRowProps } from 'react-table';\n\nimport {\n DataFrame,\n Field,\n KeyValue,\n SelectableValue,\n TimeRange,\n FieldConfigSource,\n ActionModel,\n InterpolateFunction,\n} from '@grafana/data';\nimport * as schema from '@grafana/schema';\n\nimport { TableCellInspectorMode } from './TableCellInspector';\nimport { TableStyles } from './TableRT/styles';\n\nexport {\n type FieldTextAlignment,\n TableCellBackgroundDisplayMode,\n TableCellDisplayMode,\n type TableAutoCellOptions,\n type TableSparklineCellOptions,\n type TableBarGaugeCellOptions,\n type TableColoredBackgroundCellOptions,\n type TableColorTextCellOptions,\n type TableImageCellOptions,\n type TableJsonViewCellOptions,\n} from '@grafana/schema';\n\nexport interface TableRow {\n [x: string]: any;\n}\n\nexport type InspectCell = { value: any; mode: TableCellInspectorMode };\n\nexport const FILTER_FOR_OPERATOR = '=';\nexport const FILTER_OUT_OPERATOR = '!=';\nexport type AdHocFilterOperator = typeof FILTER_FOR_OPERATOR | typeof FILTER_OUT_OPERATOR;\nexport type AdHocFilterItem = { key: string; value: string; operator: AdHocFilterOperator };\nexport type TableFilterActionCallback = (item: AdHocFilterItem) => void;\nexport type TableColumnResizeActionCallback = (fieldDisplayName: string, width: number) => void;\nexport type TableSortByActionCallback = (state: TableSortByFieldState[]) => void;\nexport type TableInspectCellCallback = (state: InspectCell) => void;\n\nexport interface TableSortByFieldState {\n displayName: string;\n desc?: boolean;\n}\n\nexport interface TableCellProps extends CellProps {\n tableStyles: TableStyles;\n cellProps: React.DetailedHTMLProps, HTMLDivElement>;\n field: Field;\n onCellFilterAdded?: TableFilterActionCallback;\n innerWidth: number;\n frame: DataFrame;\n actions?: ActionModel[]; // unused in NG\n setInspectCell?: TableInspectCellCallback;\n}\n\nexport type CellComponent = FC;\n\nexport type FooterItem = Array> | string | undefined;\n\nexport type GrafanaTableColumn = Column & {\n field: Field;\n sortType: 'number' | 'basic' | 'alphanumeric-insensitive';\n filter: (rows: Row[], id: string, filterValues?: SelectableValue[]) => SelectableValue[];\n justifyContent: Property.JustifyContent;\n minWidth: number;\n};\n\nexport interface TableFooterCalc {\n show: boolean;\n reducer: string[]; // actually 1 value\n fields?: string[];\n enablePagination?: boolean;\n countRows?: boolean;\n}\n\nexport interface GrafanaTableState extends TableState {\n // We manually track this to know where to reset the row heights. This is needed because react-table removed the\n // collapsed IDs/indexes from the state.expanded map so when collapsing we would have to do a diff of current and\n // previous state.expanded to know what changed.\n lastExpandedOrCollapsedIndex?: number;\n}\n\nexport interface GrafanaTableRow extends Row, UseExpandedRowProps<{}> {}\n\nexport interface TableStateReducerProps {\n onColumnResize?: TableColumnResizeActionCallback;\n onSortByChange?: TableSortByActionCallback;\n data: DataFrame;\n}\n\n// export interface Props {\nexport interface TableRTProps {\n ariaLabel?: string;\n data: DataFrame;\n width: number;\n height: number;\n maxHeight?: number;\n /** Minimal column width specified in pixels */\n columnMinWidth?: number;\n noHeader?: boolean;\n showTypeIcons?: boolean;\n resizable?: boolean;\n initialSortBy?: TableSortByFieldState[];\n onColumnResize?: TableColumnResizeActionCallback;\n onSortByChange?: TableSortByActionCallback;\n onCellFilterAdded?: TableFilterActionCallback;\n footerOptions?: TableFooterCalc;\n footerValues?: FooterItem[];\n enablePagination?: boolean;\n cellHeight?: schema.TableCellHeight;\n /** @alpha Used by SparklineCell when provided */\n timeRange?: TimeRange;\n enableSharedCrosshair?: boolean;\n // The index of the field value that the table will initialize scrolled to\n initialRowIndex?: number;\n fieldConfig?: FieldConfigSource;\n getActions?: GetActionsFunction;\n replaceVariables?: InterpolateFunction;\n}\n\n/**\n * @alpha\n * Props that will be passed to the TableCustomCellOptions.cellComponent when rendered.\n */\nexport interface CustomCellRendererProps {\n field: Field;\n rowIndex: number;\n frame: DataFrame;\n // Would be great to have generic type for this but that would need having a generic DataFrame type where the field\n // types could be propagated here.\n value: unknown;\n}\n\n/**\n * @alpha\n * Can be used to define completely custom cell contents by providing a custom cellComponent.\n */\nexport interface TableCustomCellOptions {\n cellComponent: FC;\n type: schema.TableCellDisplayMode.Custom;\n}\n\n/**\n * @alpha\n * Props that will be passed to the TableCustomCellOptions.cellComponent when rendered.\n */\nexport interface CustomHeaderRendererProps {\n field: Field;\n defaultContent: React.ReactNode;\n}\n\n// As cue/schema cannot define function types (as main point of schema is to be serializable) we have to extend the\n// types here with the dynamic API. This means right now this is not usable as a table panel option for example.\nexport type TableCellOptions = schema.TableCellOptions | TableCustomCellOptions;\nexport type TableFieldOptions = Omit & {\n cellOptions: TableCellOptions;\n headerComponent?: React.ComponentType;\n};\n\n// Cell background and text colors\n// Can also be used for table rows\nexport interface CellColors {\n textColor?: string;\n bgColor?: string;\n bgHoverColor?: string;\n}\n\nexport type GetActionsFunction = (\n frame: DataFrame,\n field: Field,\n rowIndex: number,\n replaceVariables?: InterpolateFunction\n) => ActionModel[];\n","import { useCallback } from 'react';\nimport * as React from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { IconSize } from '../../types/icon';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { TooltipPlacement } from '../Tooltip/types';\n\nimport { TableCellInspectorMode } from './TableCellInspector';\nimport { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellProps } from './types';\nimport { getTextAlign } from './utils';\n\ninterface CellActionProps extends TableCellProps {\n previewMode: TableCellInspectorMode;\n}\n\ninterface CommonButtonProps {\n size: IconSize;\n showFilters?: boolean;\n tooltipPlacement: TooltipPlacement;\n}\n\nexport function CellActions({\n field,\n cell,\n previewMode,\n showFilters,\n onCellFilterAdded,\n setInspectCell,\n}: CellActionProps) {\n const isRightAligned = getTextAlign(field) === 'flex-end';\n const inspectEnabled = Boolean(field.config.custom?.inspect);\n const commonButtonProps: CommonButtonProps = {\n size: 'sm',\n tooltipPlacement: 'top',\n };\n\n const onFilterFor = useCallback(\n (event: React.MouseEvent) => {\n if (onCellFilterAdded) {\n onCellFilterAdded({ key: field.name, operator: FILTER_FOR_OPERATOR, value: cell.value });\n }\n },\n [cell, field, onCellFilterAdded]\n );\n const onFilterOut = useCallback(\n (event: React.MouseEvent) => {\n if (onCellFilterAdded) {\n onCellFilterAdded({ key: field.name, operator: FILTER_OUT_OPERATOR, value: cell.value });\n }\n },\n [cell, field, onCellFilterAdded]\n );\n\n return (\n
    \n \n {inspectEnabled && (\n {\n if (setInspectCell) {\n setInspectCell({ value: cell.value, mode: previewMode });\n }\n }}\n {...commonButtonProps}\n />\n )}\n {showFilters && (\n \n )}\n {showFilters && (\n \n )}\n \n
    \n );\n}\n","import { ReactElement, useState } from 'react';\nimport * as React from 'react';\n\nimport { DisplayValue, formattedValueToString } from '@grafana/data';\nimport { TableCellDisplayMode } from '@grafana/schema';\n\nimport { getCellLinks } from '../../../utils/table';\nimport { CellActions } from '../CellActions';\nimport { DataLinksActionsTooltip, renderSingleLink } from '../DataLinksActionsTooltip';\nimport { TableCellInspectorMode } from '../TableCellInspector';\nimport { TableStyles } from '../TableRT/styles';\nimport { TableCellProps, CustomCellRendererProps, TableCellOptions } from '../types';\nimport {\n DataLinksActionsTooltipCoords,\n getCellColors,\n getCellOptions,\n getDataLinksActionsTooltipUtils,\n tooltipOnClickHandler,\n} from '../utils';\n\nexport const DefaultCell = (props: TableCellProps) => {\n const { field, cell, tableStyles, row, cellProps, frame, rowStyled, rowExpanded, textWrapped, height } = props;\n const inspectEnabled = Boolean(field.config.custom?.inspect);\n const displayValue = field.display!(cell.value);\n\n const showFilters = props.onCellFilterAdded && field.config.filterable;\n const showActions = (showFilters && cell.value !== undefined) || inspectEnabled;\n const cellOptions = getCellOptions(field);\n let value: string | ReactElement;\n\n const OG_TWEET_LENGTH = 140; // 🙏\n\n if (cellOptions.type === TableCellDisplayMode.Custom) {\n const CustomCellComponent: React.ComponentType = cellOptions.cellComponent;\n value = ;\n } else {\n if (React.isValidElement(cell.value)) {\n value = cell.value;\n } else {\n value = formattedValueToString(displayValue);\n }\n }\n\n const isStringValue = typeof value === 'string';\n\n // Text should wrap when the content length is less than or equal to the length of an OG tweet and it contains whitespace\n const textShouldWrap = displayValue.text.length <= OG_TWEET_LENGTH && /\\s/.test(displayValue.text);\n const cellStyle = getCellStyle(\n tableStyles,\n cellOptions,\n displayValue,\n inspectEnabled,\n isStringValue,\n textShouldWrap,\n textWrapped,\n rowStyled,\n rowExpanded\n );\n\n if (isStringValue) {\n let justifyContent = cellProps.style?.justifyContent;\n\n if (justifyContent === 'flex-end') {\n cellProps.style = { ...cellProps.style, textAlign: 'right' };\n } else if (justifyContent === 'center') {\n cellProps.style = { ...cellProps.style, textAlign: 'center' };\n }\n }\n\n if (height) {\n cellProps.style = { ...cellProps.style, height };\n }\n\n if (textWrapped) {\n cellProps.style = { ...cellProps.style, textWrap: 'wrap' };\n }\n\n const { key, ...rest } = cellProps;\n const links = getCellLinks(field, row) || [];\n\n const [tooltipCoords, setTooltipCoords] = useState();\n const { shouldShowLink, hasMultipleLinksOrActions } = getDataLinksActionsTooltipUtils(links);\n const shouldShowTooltip = hasMultipleLinksOrActions && tooltipCoords !== undefined;\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n \n {shouldShowLink ? (\n renderSingleLink(links[0], value, getLinkStyle(tableStyles, cellOptions))\n ) : shouldShowTooltip ? (\n setTooltipCoords(undefined)}\n />\n ) : isStringValue ? (\n `${value}`\n ) : (\n
    {value}
    \n )}\n\n {showActions && }\n
    \n );\n};\n\nconst getLinkStyle = (tableStyles: TableStyles, cellOptions: TableCellOptions) => {\n if (cellOptions.type === TableCellDisplayMode.Auto) {\n return tableStyles.cellLink;\n }\n\n return tableStyles.cellLinkForColoredCell;\n};\n\nfunction getCellStyle(\n tableStyles: TableStyles,\n cellOptions: TableCellOptions,\n displayValue: DisplayValue,\n disableOverflowOnHover = false,\n isStringValue = false,\n shouldWrapText = false,\n textWrapped = false,\n rowStyled = false,\n rowExpanded = false\n) {\n // Setup color variables\n let textColor: string | undefined = undefined;\n let bgColor: string | undefined = undefined;\n let bgHoverColor: string | undefined = undefined;\n\n // Get colors\n const colors = getCellColors(tableStyles.theme, cellOptions, displayValue);\n textColor = colors.textColor;\n bgColor = colors.bgColor;\n bgHoverColor = colors.bgHoverColor;\n\n // If we have defined colors return those styles\n // Otherwise we return default styles\n return tableStyles.buildCellContainerStyle(\n textColor,\n bgColor,\n bgHoverColor,\n !disableOverflowOnHover,\n isStringValue,\n shouldWrapText,\n textWrapped,\n rowStyled,\n rowExpanded\n );\n}\n","import WKT from 'ol/format/WKT';\nimport { Geometry } from 'ol/geom';\n\nimport { TableCellProps } from '../types';\n\nexport function GeoCell(props: TableCellProps): JSX.Element {\n const { cell, tableStyles, cellProps } = props;\n\n let disp = '';\n\n if (cell.value instanceof Geometry) {\n disp = new WKT().writeGeometry(cell.value, {\n featureProjection: 'EPSG:3857',\n dataProjection: 'EPSG:4326',\n });\n } else if (cell.value != null) {\n disp = `${cell.value}`;\n }\n\n return (\n
    \n
    \n {disp}\n
    \n
    \n );\n}\n","import { useState } from 'react';\n\nimport { getCellLinks } from '../../../utils/table';\nimport { DataLinksActionsTooltip, renderSingleLink } from '../DataLinksActionsTooltip';\nimport { TableCellDisplayMode, TableCellProps } from '../types';\nimport {\n tooltipOnClickHandler,\n DataLinksActionsTooltipCoords,\n getCellOptions,\n getDataLinksActionsTooltipUtils,\n} from '../utils';\n\nconst DATALINKS_HEIGHT_OFFSET = 10;\n\nexport const ImageCell = (props: TableCellProps) => {\n const { field, cell, tableStyles, row, cellProps } = props;\n const cellOptions = getCellOptions(field);\n const { title, alt } =\n cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { title: undefined, alt: undefined };\n const displayValue = field.display!(cell.value);\n\n const links = getCellLinks(field, row) || [];\n\n const [tooltipCoords, setTooltipCoords] = useState();\n const { shouldShowLink, hasMultipleLinksOrActions } = getDataLinksActionsTooltipUtils(links);\n const shouldShowTooltip = hasMultipleLinksOrActions && tooltipCoords !== undefined;\n\n // The image element\n const img = (\n \n );\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n \n {/* If there are data links/actions, we render them with image */}\n {/* Otherwise we simply render the image */}\n {shouldShowLink ? (\n renderSingleLink(links[0], img)\n ) : shouldShowTooltip ? (\n setTooltipCoords(undefined)}\n />\n ) : (\n img\n )}\n
    \n );\n};\n","import { css, cx } from '@emotion/css';\nimport { isString } from 'lodash';\nimport { useState } from 'react';\n\nimport { getCellLinks } from '../../../utils/table';\nimport { CellActions } from '../CellActions';\nimport { DataLinksActionsTooltip, renderSingleLink } from '../DataLinksActionsTooltip';\nimport { TableCellInspectorMode } from '../TableCellInspector';\nimport { TableCellProps } from '../types';\nimport { tooltipOnClickHandler, DataLinksActionsTooltipCoords, getDataLinksActionsTooltipUtils } from '../utils';\n\nexport function JSONViewCell(props: TableCellProps): JSX.Element {\n const { cell, tableStyles, cellProps, field, row } = props;\n const inspectEnabled = Boolean(field.config.custom?.inspect);\n const txt = css({\n cursor: 'pointer',\n fontFamily: 'monospace',\n });\n\n let value = cell.value;\n let displayValue = value;\n\n if (isString(value)) {\n try {\n value = JSON.parse(value);\n } catch {} // ignore errors\n } else {\n try {\n // JSON may refer to itself, which errors on stringify\n displayValue = JSON.stringify(value, null, ' ');\n } catch {\n displayValue = undefined; // if it won't stringify, mark undefined\n }\n }\n\n const links = getCellLinks(field, row) || [];\n\n const [tooltipCoords, setTooltipCoords] = useState();\n const { shouldShowLink, hasMultipleLinksOrActions } = getDataLinksActionsTooltipUtils(links);\n const shouldShowTooltip = hasMultipleLinksOrActions && tooltipCoords !== undefined;\n\n return (\n
    \n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n
    \n {shouldShowLink ? (\n renderSingleLink(links[0], displayValue)\n ) : shouldShowTooltip ? (\n setTooltipCoords(undefined)}\n />\n ) : (\n
    {displayValue}
    \n )}\n
    \n {inspectEnabled && }\n
    \n );\n}\n","import { Logger } from './logger';\n\n/**\n * Allows debug helpers attachement to the window object\n * @internal\n */\nexport function attachDebugger(key: string, thebugger?: any, logger?: Logger) {\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n let completeDebugger = thebugger || {};\n\n if (logger !== undefined) {\n completeDebugger = { ...completeDebugger, enable: () => logger.enable(), disable: () => logger.disable() };\n }\n\n // @ts-ignore\n let debugGlobal = (typeof window !== 'undefined' && window['_debug']) ?? {};\n debugGlobal[key] = completeDebugger;\n if (typeof window !== 'undefined') {\n // @ts-ignore\n window['_debug'] = debugGlobal;\n }\n}\n","import { throttle } from 'lodash';\n\ntype Args = Parameters;\n\n/**\n * @internal\n * */\nconst throttledLog = throttle((...t: Args) => {\n console.log(...t);\n}, 500);\n\n/**\n * @internal\n */\nexport interface Logger {\n logger: (...t: Args) => void;\n enable: () => void;\n disable: () => void;\n isEnabled: () => boolean;\n}\n\n/** @internal */\nexport const createLogger = (name: string): Logger => {\n let loggingEnabled = false;\n\n if (typeof window !== 'undefined') {\n loggingEnabled = window.localStorage.getItem('grafana.debug') === 'true';\n }\n\n return {\n logger: (id: string, throttle = false, ...t: Args) => {\n if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test' || !loggingEnabled) {\n return;\n }\n const fn = throttle ? throttledLog : console.log;\n fn(`[${name}: ${id}]:`, ...t);\n },\n enable: () => (loggingEnabled = true),\n disable: () => (loggingEnabled = false),\n isEnabled: () => loggingEnabled,\n };\n};\n","import * as React from 'react';\nimport uPlot, { Options, AlignedData } from 'uplot';\n\nimport { UPlotConfigBuilder } from './config/UPlotConfigBuilder';\n\n/**\n * @internal -- not a public API\n */\nexport const FIXED_UNIT = '__fixed';\n\nexport type PlotConfig = Pick<\n Options,\n 'mode' | 'series' | 'scales' | 'axes' | 'cursor' | 'bands' | 'hooks' | 'select' | 'tzDate' | 'padding'\n>;\n\nexport type FacetValues = any[];\nexport type FacetSeries = FacetValues[];\nexport type FacetedData = [_: null, ...series: FacetSeries];\n\nexport interface PlotProps {\n data: AlignedData | FacetedData;\n width: number;\n height: number;\n config: UPlotConfigBuilder;\n children?: React.ReactNode;\n // Reference to uPlot instance\n plotRef?: (u: uPlot) => void;\n}\n\nexport abstract class PlotConfigBuilder {\n constructor(public props: P) {}\n abstract getConfig(): T;\n}\n\n/**\n * @alpha\n */\nexport type PlotTooltipInterpolator = (\n updateActiveSeriesIdx: (sIdx: number | null) => void,\n updateActiveDatapointIdx: (dIdx: number | null) => void,\n updateTooltipPosition: (clear?: boolean) => void,\n u: uPlot\n) => void;\n\nexport interface PlotSelection {\n min: number;\n max: number;\n\n // selection bounding box, relative to canvas\n bbox: {\n top: number;\n left: number;\n width: number;\n height: number;\n };\n}\n","import { FieldConfig, FieldType } from '@grafana/data';\nimport { AxisPlacement, GraphFieldConfig, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';\n\nimport { FIXED_UNIT } from './types';\n\n/**\n * @internal -- not a public API\n */\nexport function buildScaleKey(config: FieldConfig, fieldType: FieldType) {\n const defaultPart = 'na';\n\n const scaleRange = `${config.min !== undefined ? config.min : defaultPart}-${\n config.max !== undefined ? config.max : defaultPart\n }`;\n\n const scaleSoftRange = `${config.custom?.axisSoftMin !== undefined ? config.custom.axisSoftMin : defaultPart}-${\n config.custom?.axisSoftMax !== undefined ? config.custom.axisSoftMax : defaultPart\n }`;\n\n const scalePlacement = `${\n config.custom?.axisPlacement !== undefined ? config.custom?.axisPlacement : AxisPlacement.Auto\n }`;\n\n const scaleUnit = config.unit ?? FIXED_UNIT;\n\n const scaleDistribution = config.custom?.scaleDistribution\n ? getScaleDistributionPart(config.custom.scaleDistribution)\n : ScaleDistribution.Linear;\n\n const scaleLabel = Boolean(config.custom?.axisLabel) ? config.custom!.axisLabel : defaultPart;\n\n return `${scaleUnit}/${scaleRange}/${scaleSoftRange}/${scalePlacement}/${scaleDistribution}/${scaleLabel}/${fieldType}`;\n}\n\nfunction getScaleDistributionPart(config: ScaleDistributionConfig) {\n if (config.type === ScaleDistribution.Log) {\n return `${config.type}${config.log}`;\n }\n return config.type;\n}\n","import uPlot, { AlignedData, Options, PaddingSide } from 'uplot';\n\nimport {\n DataFrame,\n DisplayProcessor,\n DisplayValue,\n Field,\n fieldReducers,\n getDisplayProcessor,\n GrafanaTheme2,\n reduceField,\n ReducerID,\n} from '@grafana/data';\nimport { BarAlignment, GraphDrawStyle, GraphTransform, LineInterpolation, StackingMode } from '@grafana/schema';\n\nimport { attachDebugger } from '../../utils/debug';\nimport { createLogger } from '../../utils/logger';\n\nimport { buildScaleKey } from './internal';\n\nconst paddingSide: PaddingSide = (u, side, sidesWithAxes) => {\n let hasCrossAxis = side % 2 ? sidesWithAxes[0] || sidesWithAxes[2] : sidesWithAxes[1] || sidesWithAxes[3];\n\n return sidesWithAxes[side] || !hasCrossAxis ? 0 : 8;\n};\n\nexport const DEFAULT_PLOT_CONFIG: Partial = {\n ms: 1,\n focus: {\n alpha: 1,\n },\n cursor: {\n focus: {\n prox: 30,\n },\n },\n legend: {\n show: false,\n },\n padding: [paddingSide, paddingSide, paddingSide, paddingSide],\n series: [],\n hooks: {},\n};\n\n/** @internal */\ninterface StackMeta {\n totals: AlignedData;\n}\n\n/** @internal */\nexport interface StackingGroup {\n series: number[];\n dir: StackDirection;\n}\n\n/** @internal */\nconst enum StackDirection {\n Pos = 1,\n Neg = -1,\n}\n\n// generates bands between adjacent group series\n/** @internal */\nexport function getStackingBands(group: StackingGroup) {\n let bands: uPlot.Band[] = [];\n let { series, dir } = group;\n let lastIdx = series.length - 1;\n\n let rSeries = series.slice().reverse();\n\n rSeries.forEach((si, i) => {\n if (i !== lastIdx) {\n let nextIdx = rSeries[i + 1];\n bands.push({\n series: [si, nextIdx],\n // fill direction is inverted from stack direction\n dir: (-1 * dir) as 1 | -1,\n });\n }\n });\n\n return bands;\n}\n\n// expects an AlignedFrame\n/** @internal */\nexport function getStackingGroups(frame: DataFrame) {\n let groups: Map = new Map();\n\n frame.fields.forEach(({ config, values, type }, i) => {\n // skip x or time field\n if (i === 0) {\n return;\n }\n\n let { custom } = config;\n\n if (custom == null) {\n return;\n }\n\n // TODO: currently all AlignedFrame fields end up in uplot series & data, even custom.hideFrom?.viz\n // ideally hideFrom.viz fields would be excluded so we can remove this\n if (custom.hideFrom?.viz) {\n return;\n }\n\n let { stacking } = custom;\n\n if (stacking == null) {\n return;\n }\n\n let { mode: stackingMode, group: stackingGroup } = stacking;\n\n // not stacking\n if (stackingMode === StackingMode.None) {\n return;\n }\n\n // will this be stacked up or down after any transforms applied\n let transform = custom.transform;\n let stackDir = getStackDirection(transform, values);\n\n let drawStyle: GraphDrawStyle = custom.drawStyle;\n let drawStyle2: BarAlignment | LineInterpolation | null =\n drawStyle === GraphDrawStyle.Bars\n ? custom.barAlignment\n : drawStyle === GraphDrawStyle.Line\n ? custom.lineInterpolation\n : null;\n\n let stackKey = `${stackDir}|${stackingMode}|${stackingGroup}|${buildScaleKey(\n config,\n type\n )}|${drawStyle}|${drawStyle2}`;\n\n let group = groups.get(stackKey);\n\n if (group == null) {\n group = {\n series: [],\n dir: stackDir,\n };\n\n groups.set(stackKey, group);\n }\n\n group.series.push(i);\n });\n\n return [...groups.values()];\n}\n\n/** @internal */\nexport function preparePlotData2(\n frame: DataFrame,\n stackingGroups: StackingGroup[],\n onStackMeta?: (meta: StackMeta) => void\n): AlignedData {\n let data = Array(frame.fields.length);\n\n let stacksQty = stackingGroups.length;\n\n let dataLen = frame.length;\n let zeroArr = stacksQty > 0 ? Array(dataLen).fill(0) : [];\n let falseArr = stacksQty > 0 ? Array(dataLen).fill(false) : [];\n let accums = Array.from({ length: stacksQty }, () => zeroArr.slice());\n\n let anyValsAtX = Array.from({ length: stacksQty }, () => falseArr.slice());\n\n // figure out at which time indices each stacking group has any values\n // (needed to avoid absorbing initial accum 0s at unrelated joined timestamps)\n stackingGroups.forEach((group, groupIdx) => {\n let groupValsAtX = anyValsAtX[groupIdx];\n\n group.series.forEach((seriesIdx) => {\n let field = frame.fields[seriesIdx];\n\n if (field.config.custom?.hideFrom?.viz) {\n return;\n }\n\n let vals = field.values;\n\n for (let i = 0; i < dataLen; i++) {\n if (vals[i] != null) {\n groupValsAtX[i] = true;\n }\n }\n });\n });\n\n frame.fields.forEach((field, i) => {\n let vals = field.values;\n\n if (i === 0) {\n data[i] = vals;\n return;\n }\n\n let { custom } = field.config;\n\n if (!custom || custom.hideFrom?.viz) {\n data[i] = vals;\n return;\n }\n\n // apply transforms\n if (custom.transform === GraphTransform.Constant) {\n let firstValIdx = vals.findIndex((v) => v != null);\n let firstVal = vals[firstValIdx];\n vals = Array(vals.length).fill(undefined);\n vals[firstValIdx] = firstVal;\n } else {\n vals = vals.slice();\n\n if (custom.transform === GraphTransform.NegativeY) {\n for (let i = 0; i < vals.length; i++) {\n if (vals[i] != null) {\n vals[i] *= -1;\n }\n }\n }\n }\n\n let stackingMode = custom.stacking?.mode;\n\n if (!stackingMode || stackingMode === StackingMode.None) {\n data[i] = vals;\n } else {\n let stackIdx = stackingGroups.findIndex((group) => group.series.indexOf(i) > -1);\n\n let accum = accums[stackIdx];\n let groupValsAtX = anyValsAtX[stackIdx];\n let stacked = (data[i] = Array(dataLen));\n\n for (let i = 0; i < dataLen; i++) {\n let v = vals[i];\n\n if (v != null) {\n stacked[i] = accum[i] += v;\n } else {\n stacked[i] = groupValsAtX[i] ? accum[i] : v;\n }\n }\n }\n });\n\n if (onStackMeta) {\n let accumsBySeriesIdx = data.map((vals, i) => {\n let stackIdx = stackingGroups.findIndex((group) => group.series.indexOf(i) > -1);\n return stackIdx !== -1 ? accums[stackIdx] : vals;\n });\n\n onStackMeta({\n totals: accumsBySeriesIdx,\n });\n }\n\n // re-compute by percent\n frame.fields.forEach((field, i) => {\n if (i === 0 || field.config.custom?.hideFrom?.viz) {\n return;\n }\n\n let stackingMode = field.config.custom?.stacking?.mode;\n\n if (stackingMode === StackingMode.Percent) {\n let stackIdx = stackingGroups.findIndex((group) => group.series.indexOf(i) > -1);\n let accum = accums[stackIdx];\n let group = stackingGroups[stackIdx];\n\n let stacked = data[i];\n\n for (let i = 0; i < dataLen; i++) {\n let v = stacked[i];\n\n if (v != null) {\n // v / accum will always be pos, so properly (re)sign by group stacking dir\n stacked[i] = accum[i] === 0 ? 0 : group.dir * (v / accum[i]);\n }\n }\n }\n });\n\n return data;\n}\n\n/**\n * Finds y axis midpoint for point at given idx (css pixels relative to uPlot canvas)\n * @internal\n **/\n\nexport function findMidPointYPosition(u: uPlot, idx: number) {\n let y;\n let sMaxIdx = 1;\n let sMinIdx = 1;\n // assume min/max being values of 1st series\n let max = u.data[1][idx];\n let min = u.data[1][idx];\n\n // find min max values AND ids of the corresponding series to get the scales\n for (let i = 1; i < u.data.length; i++) {\n const sData = u.data[i];\n const sVal = sData[idx];\n if (sVal != null) {\n if (max == null) {\n max = sVal;\n } else {\n if (sVal > max) {\n max = u.data[i][idx];\n sMaxIdx = i;\n }\n }\n if (min == null) {\n min = sVal;\n } else {\n if (sVal < min) {\n min = u.data[i][idx];\n sMinIdx = i;\n }\n }\n }\n }\n\n if (min == null && max == null) {\n // no tooltip to show\n y = undefined;\n } else if (min != null && max != null) {\n // find median position\n y = (u.valToPos(min, u.series[sMinIdx].scale!) + u.valToPos(max, u.series[sMaxIdx].scale!)) / 2;\n } else {\n // snap tooltip to min OR max point, one of those is not null :)\n y = u.valToPos((min || max)!, u.series[(sMaxIdx || sMinIdx)!].scale!);\n }\n\n // if y is out of canvas bounds, snap it to the bottom\n if (y !== undefined && y < 0) {\n y = u.bbox.height / devicePixelRatio;\n }\n\n return y;\n}\n\nfunction getStackDirection(transform: GraphTransform, data: unknown[]) {\n const hasNegSamp = hasNegSample(data);\n\n if (transform === GraphTransform.NegativeY) {\n return hasNegSamp ? StackDirection.Pos : StackDirection.Neg;\n }\n return hasNegSamp ? StackDirection.Neg : StackDirection.Pos;\n}\n\n// similar to isLikelyAscendingVector()\nfunction hasNegSample(data: unknown[], samples = 100) {\n const len = data.length;\n\n if (len === 0) {\n return false;\n }\n\n // skip leading & trailing nullish\n let firstIdx = 0;\n let lastIdx = len - 1;\n\n while (firstIdx <= lastIdx && data[firstIdx] == null) {\n firstIdx++;\n }\n\n while (lastIdx >= firstIdx && data[lastIdx] == null) {\n lastIdx--;\n }\n\n let negCount = 0;\n let posCount = 0;\n\n if (lastIdx >= firstIdx) {\n const stride = Math.max(1, Math.floor((lastIdx - firstIdx + 1) / samples));\n\n for (let i = firstIdx; i <= lastIdx; i += stride) {\n const v = data[i];\n\n if (v != null && typeof v === 'number') {\n if (v < 0 || Object.is(v, -0)) {\n negCount++;\n } else if (v > 0) {\n posCount++;\n }\n }\n }\n\n if (negCount > posCount) {\n return true;\n }\n }\n\n return false;\n}\n\nexport const getDisplayValuesForCalcs = (calcs: string[], field: Field, theme: GrafanaTheme2) => {\n if (!calcs?.length) {\n return [];\n }\n\n const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));\n const fmt = field.display ?? defaultFormatter;\n let countFormatter: DisplayProcessor | null = null;\n\n const fieldCalcs = reduceField({\n field: field,\n reducers: calcs,\n });\n\n return calcs.map((reducerId) => {\n const fieldReducer = fieldReducers.get(reducerId);\n let formatter = fmt;\n\n if (fieldReducer.id === ReducerID.diffperc) {\n formatter = getDisplayProcessor({\n field: {\n ...field,\n config: {\n ...field.config,\n unit: 'percent',\n },\n },\n theme,\n });\n }\n\n if (\n fieldReducer.id === ReducerID.count ||\n fieldReducer.id === ReducerID.changeCount ||\n fieldReducer.id === ReducerID.distinctCount\n ) {\n if (!countFormatter) {\n countFormatter = getDisplayProcessor({\n field: {\n ...field,\n config: {\n ...field.config,\n unit: 'none',\n },\n },\n theme,\n });\n }\n formatter = countFormatter;\n }\n\n return {\n ...formatter(fieldCalcs[reducerId]),\n title: fieldReducer.name,\n description: fieldReducer.description,\n };\n });\n};\n\n// Dev helpers\n\n/** @internal */\nexport const pluginLogger = createLogger('uPlot');\nexport const pluginLog = pluginLogger.logger;\n// pluginLogger.enable();\nattachDebugger('graphng', undefined, pluginLogger);\n","import { Component, createRef } from 'react';\nimport uPlot, { AlignedData, Options } from 'uplot';\n\nimport { PlotProps } from './types';\nimport { pluginLog } from './utils';\n\nimport 'uplot/dist/uPlot.min.css';\n\nfunction sameDims(prevProps: PlotProps, nextProps: PlotProps) {\n return nextProps.width === prevProps.width && nextProps.height === prevProps.height;\n}\n\nfunction sameData(prevProps: PlotProps, nextProps: PlotProps) {\n return nextProps.data === prevProps.data;\n}\n\nfunction sameConfig(prevProps: PlotProps, nextProps: PlotProps) {\n return nextProps.config === prevProps.config;\n}\n\ntype UPlotChartState = {\n plot: uPlot | null;\n};\n\n/**\n * @internal\n * uPlot abstraction responsible for plot initialisation, setup and refresh\n * Receives a data frame that is x-axis aligned, as of https://github.com/leeoniya/uPlot/tree/master/docs#data-format\n * Exposes context for uPlot instance access\n */\nexport class UPlotChart extends Component {\n plotContainer = createRef();\n plotCanvasBBox = createRef();\n plotInstance: uPlot | null = null;\n\n constructor(props: PlotProps) {\n super(props);\n }\n\n reinitPlot() {\n let { width, height, plotRef } = this.props;\n\n this.plotInstance?.destroy();\n\n if (width === 0 && height === 0) {\n return;\n }\n\n this.props.config.addHook('setSize', (u) => {\n const canvas = u.over;\n if (!canvas) {\n return;\n }\n });\n\n const config: Options = {\n width: Math.floor(this.props.width),\n height: Math.floor(this.props.height),\n ...this.props.config.getConfig(),\n };\n\n pluginLog('UPlot', false, 'Reinitializing plot', config);\n const plot = new uPlot(config, this.props.data as AlignedData, this.plotContainer!.current!);\n\n if (plotRef) {\n plotRef(plot);\n }\n\n this.plotInstance = plot;\n }\n\n componentDidMount() {\n this.reinitPlot();\n }\n\n componentWillUnmount() {\n this.plotInstance?.destroy();\n }\n\n componentDidUpdate(prevProps: PlotProps) {\n if (!sameDims(prevProps, this.props)) {\n this.plotInstance?.setSize({\n width: Math.floor(this.props.width),\n height: Math.floor(this.props.height),\n });\n } else if (!sameConfig(prevProps, this.props)) {\n this.reinitPlot();\n } else if (!sameData(prevProps, this.props)) {\n this.plotInstance?.setData(this.props.data as AlignedData);\n }\n }\n\n render() {\n return (\n
    \n
    \n {this.props.children}\n
    \n );\n }\n}\n","import uPlot, { Scale, Range } from 'uplot';\n\nimport { DecimalCount, incrRoundDn, incrRoundUp, isBooleanUnit } from '@grafana/data';\nimport { ScaleOrientation, ScaleDirection, ScaleDistribution, StackingMode } from '@grafana/schema';\n\nimport { PlotConfigBuilder } from '../types';\n\nexport interface ScaleProps {\n scaleKey: string;\n isTime?: boolean;\n auto?: boolean;\n min?: number | null;\n max?: number | null;\n softMin?: number | null;\n softMax?: number | null;\n range?: Scale.Range;\n distribution?: ScaleDistribution;\n orientation: ScaleOrientation;\n direction: ScaleDirection;\n log?: number;\n linearThreshold?: number;\n centeredZero?: boolean;\n decimals?: DecimalCount;\n stackingMode?: StackingMode;\n padMinBy?: number;\n padMaxBy?: number;\n}\n\nexport class UPlotScaleBuilder extends PlotConfigBuilder {\n merge(props: ScaleProps) {\n this.props.min = optMinMax('min', this.props.min, props.min);\n this.props.max = optMinMax('max', this.props.max, props.max);\n }\n\n getConfig(): Scale {\n let {\n isTime,\n auto,\n scaleKey,\n min: hardMin,\n max: hardMax,\n softMin,\n softMax,\n range,\n direction,\n orientation,\n centeredZero,\n decimals,\n stackingMode,\n padMinBy = 0.1,\n padMaxBy = 0.1,\n } = this.props;\n\n if (stackingMode === StackingMode.Percent) {\n if (hardMin == null && softMin == null) {\n softMin = 0;\n }\n\n if (hardMax == null && softMax == null) {\n softMax = 1;\n }\n }\n\n const distr = this.props.distribution;\n\n const distribution = !isTime\n ? {\n distr:\n distr === ScaleDistribution.Symlog\n ? 4\n : distr === ScaleDistribution.Log\n ? 3\n : distr === ScaleDistribution.Ordinal\n ? 2\n : 1,\n log:\n distr === ScaleDistribution.Log || distr === ScaleDistribution.Symlog ? (this.props.log ?? 2) : undefined,\n asinh: distr === ScaleDistribution.Symlog ? (this.props.linearThreshold ?? 1) : undefined,\n }\n : {};\n\n // guard against invalid log scale limits <= 0, or snap to log boundaries\n if (distr === ScaleDistribution.Log) {\n let logBase = this.props.log!;\n let logFn = logBase === 2 ? Math.log2 : Math.log10;\n\n if (hardMin != null) {\n if (hardMin <= 0) {\n hardMin = null;\n } else {\n hardMin = logBase ** Math.floor(logFn(hardMin));\n }\n }\n\n if (hardMax != null) {\n if (hardMax <= 0) {\n hardMax = null;\n } else {\n hardMax = logBase ** Math.ceil(logFn(hardMax));\n }\n }\n\n if (softMin != null) {\n if (softMin <= 0) {\n softMin = null;\n } else {\n softMin = logBase ** Math.floor(logFn(softMin));\n }\n }\n\n if (softMax != null) {\n if (softMax <= 0) {\n softMax = null;\n } else {\n softMax = logBase ** Math.ceil(logFn(softMax));\n }\n }\n }\n /*\n // snap to symlog boundaries\n else if (distr === ScaleDistribution.Symlog) {\n let logBase = this.props.log!;\n let logFn = logBase === 2 ? Math.log2 : Math.log10;\n\n let sign = Math.sign(hardMin);\n\n if (hardMin != null) {\n hardMin = logBase ** Math.floor(logFn(hardMin));\n }\n\n if (hardMax != null) {\n hardMax = logBase ** Math.ceil(logFn(hardMax));\n }\n\n if (softMin != null) {\n softMin = logBase ** Math.floor(logFn(softMin));\n }\n\n if (softMax != null) {\n softMax = logBase ** Math.ceil(logFn(softMax));\n }\n }\n */\n\n // uPlot's default ranging config for both min & max is {pad: 0.1, hard: null, soft: 0, mode: 3}\n let softMinMode: Range.SoftMode = softMin == null ? 3 : 1;\n let softMaxMode: Range.SoftMode = softMax == null ? 3 : 1;\n\n const rangeConfig: Range.Config = {\n min: {\n pad: padMinBy,\n hard: hardMin ?? -Infinity,\n soft: softMin || 0,\n mode: softMinMode,\n },\n max: {\n pad: padMaxBy,\n hard: hardMax ?? Infinity,\n soft: softMax || 0,\n mode: softMaxMode,\n },\n };\n\n let hardMinOnly = softMin == null && hardMin != null;\n let hardMaxOnly = softMax == null && hardMax != null;\n let hasFixedRange = hardMinOnly && hardMaxOnly;\n\n const rangeFn: uPlot.Range.Function = (\n u: uPlot,\n dataMin: number | null,\n dataMax: number | null,\n scaleKey: string\n ) => {\n const scale = u.scales[scaleKey];\n\n let minMax: uPlot.Range.MinMax = [dataMin, dataMax];\n\n // happens when all series on a scale are `show: false`, re-returning nulls will auto-disable axis\n if (!hasFixedRange && dataMin == null && dataMax == null) {\n return minMax;\n }\n\n let logBase = scale.log ?? 10;\n\n if (scale.distr === 1 || scale.distr === 2 || scale.distr === 4) {\n if (centeredZero) {\n let absMin = Math.abs(dataMin!);\n let absMax = Math.abs(dataMax!);\n let max = Math.max(absMin, absMax);\n\n // flat 0\n if (max === 0) {\n max = 80;\n }\n\n dataMin = -max;\n dataMax = max;\n }\n\n if (scale.distr === 4) {\n minMax = uPlot.rangeAsinh(dataMin!, dataMax!, logBase, true);\n } else {\n // @ts-ignore here we may use hardMin / hardMax to make sure any extra padding is computed from a more accurate delta\n minMax = uPlot.rangeNum(hardMinOnly ? hardMin : dataMin, hardMaxOnly ? hardMax : dataMax, rangeConfig);\n }\n } else if (scale.distr === 3) {\n minMax = uPlot.rangeLog(hardMin ?? dataMin!, hardMax ?? dataMax!, logBase, true);\n }\n\n if (decimals === 0) {\n if (scale.distr === 1 || scale.distr === 2) {\n minMax[0] = incrRoundDn(minMax[0]!, 1);\n minMax[1] = incrRoundUp(minMax[1]!, 1);\n }\n // log2 or log10 scale min must be clamped to 1\n else if (scale.distr === 3) {\n let logFn = scale.log === 2 ? Math.log2 : Math.log10;\n\n if (minMax[0]! <= 1) {\n // clamp min\n minMax[0] = 1;\n } else {\n // snap min to nearest mag below\n let minExp = Math.floor(logFn(minMax[0]!));\n minMax[0] = logBase ** minExp;\n }\n\n // snap max to nearest mag above\n let maxExp = Math.ceil(logFn(minMax[1]!));\n minMax[1] = logBase ** maxExp;\n\n // inflate max by mag if same\n if (minMax[0] === minMax[1]) {\n minMax[1] *= logBase;\n }\n }\n // TODO: this should be better. symlog values can be <= 0, but should also be snapped to log2 or log10 boundaries\n // for now we just do same as linear snapping above, so may have non-neat range and ticks at edges\n else if (scale.distr === 4) {\n minMax[0] = incrRoundDn(minMax[0]!, 1);\n minMax[1] = incrRoundUp(minMax[1]!, 1);\n }\n }\n\n if (scale.distr === 1 || scale.distr === 4) {\n // if all we got were hard limits, treat them as static min/max\n if (hardMinOnly) {\n minMax[0] = hardMin!;\n }\n\n if (hardMaxOnly) {\n minMax[1] = hardMax!;\n }\n }\n\n // guard against invalid y ranges\n if (minMax[0]! >= minMax[1]!) {\n minMax[0] = scale.distr === 3 ? 1 : 0;\n minMax[1] = 100;\n }\n\n return minMax;\n };\n\n auto ??= !isTime && !hasFixedRange;\n\n if (isBooleanUnit(scaleKey)) {\n auto = false;\n range = [0, 1];\n }\n\n return {\n [scaleKey]: {\n time: isTime,\n auto,\n range: range ?? rangeFn,\n dir: direction,\n ori: orientation,\n ...distribution,\n },\n };\n }\n}\n\nexport function optMinMax(minmax: 'min' | 'max', a?: number | null, b?: number | null): undefined | number | null {\n const hasA = !(a === undefined || a === null);\n const hasB = !(b === undefined || b === null);\n if (hasA) {\n if (!hasB) {\n return a;\n }\n if (minmax === 'min') {\n return a! < b! ? a : b;\n }\n return a! > b! ? a : b;\n }\n return b;\n}\n","import uPlot, { Axis } from 'uplot';\n\nimport {\n dateTimeFormat,\n DecimalCount,\n GrafanaTheme2,\n guessDecimals,\n isBooleanUnit,\n roundDecimals,\n systemDateFormats,\n TimeZone,\n} from '@grafana/data';\nimport { AxisPlacement, ScaleDistribution } from '@grafana/schema';\n\nimport { measureText } from '../../../utils/measureText';\nimport { PlotConfigBuilder } from '../types';\n\nimport { optMinMax } from './UPlotScaleBuilder';\n\nexport interface AxisProps {\n scaleKey: string;\n theme: GrafanaTheme2;\n label?: string;\n show?: boolean;\n size?: number | null;\n gap?: number;\n tickLabelRotation?: number;\n placement?: AxisPlacement;\n grid?: Axis.Grid;\n ticks?: Axis.Ticks;\n filter?: Axis.Filter;\n space?: Axis.Space;\n formatValue?: (v: any, decimals?: DecimalCount) => string;\n incrs?: Axis.Incrs;\n splits?: Axis.Splits;\n values?: Axis.Values;\n isTime?: boolean;\n timeZone?: TimeZone;\n color?: uPlot.Axis.Stroke;\n border?: uPlot.Axis.Border;\n decimals?: DecimalCount;\n distr?: ScaleDistribution;\n}\n\nexport const UPLOT_AXIS_FONT_SIZE = 12;\n\n// for panels with small heights, we increase tick density by reducing the minumum tick spacing\n// all values in CSS pixels\nconst Y_TICK_SPACING_PANEL_HEIGHT = 150;\nconst Y_TICK_SPACING_NORMAL = 30;\nconst Y_TICK_SPACING_SMALL = 15;\n\nconst X_TICK_SPACING_NORMAL = 40;\nconst X_TICK_VALUE_GAP = 18;\n\nconst labelPad = 8;\n\nexport class UPlotAxisBuilder extends PlotConfigBuilder {\n merge(props: AxisProps) {\n this.props.size = optMinMax('max', this.props.size, props.size);\n if (!this.props.label) {\n this.props.label = props.label;\n }\n if (this.props.placement === AxisPlacement.Auto) {\n this.props.placement = props.placement;\n }\n }\n\n getConfig(): Axis {\n let {\n scaleKey,\n label,\n show = true,\n placement = AxisPlacement.Auto,\n grid = { show: true },\n ticks,\n space,\n filter,\n gap = 5,\n formatValue,\n splits,\n values,\n incrs,\n isTime,\n timeZone,\n theme,\n tickLabelRotation,\n size,\n color,\n border,\n decimals,\n distr = ScaleDistribution.Linear,\n } = this.props;\n\n const font = `${UPLOT_AXIS_FONT_SIZE}px ${theme.typography.fontFamily}`;\n\n const gridColor = theme.isDark ? 'rgba(240, 250, 255, 0.09)' : 'rgba(0, 10, 23, 0.09)';\n\n // TODO: this is pretty flimsy now that scaleKey is composed from multiple parts :/\n if (isBooleanUnit(scaleKey)) {\n splits = [0, 1];\n }\n\n if (decimals === 0 && distr === ScaleDistribution.Linear) {\n filter = (u, splits) => splits.map((v) => (Number.isInteger(v) ? v : null));\n }\n\n let config: Axis = {\n scale: scaleKey,\n show,\n stroke: color ?? theme.colors.text.primary,\n side: getUPlotSideFromAxis(placement),\n font,\n size:\n size ??\n ((self, values, axisIdx) => {\n return calculateAxisSize(self, values, axisIdx);\n }),\n rotate: tickLabelRotation,\n gap,\n\n labelGap: 0,\n\n grid: {\n show: grid.show,\n stroke: gridColor,\n width: 1 / devicePixelRatio,\n },\n ticks: Object.assign(\n {\n show: true,\n stroke: border?.show ? (color ?? theme.colors.text.primary) : gridColor,\n width: 1 / devicePixelRatio,\n size: 4,\n },\n ticks\n ),\n splits,\n values,\n space:\n space ??\n ((self, axisIdx, scaleMin, scaleMax, plotDim) => {\n return calculateSpace(self, axisIdx, scaleMin, scaleMax, plotDim, formatValue);\n }),\n filter,\n incrs,\n };\n\n if (border?.show) {\n config.border = {\n stroke: color ?? theme.colors.text.primary,\n width: 1 / devicePixelRatio,\n ...border,\n };\n }\n\n if (label != null && label.length > 0) {\n config.label = label;\n config.labelSize = UPLOT_AXIS_FONT_SIZE + labelPad;\n config.labelFont = font;\n config.labelGap = labelPad;\n }\n\n if (values) {\n config.values = values;\n } else if (isTime) {\n config.values = formatTime;\n } else if (formatValue) {\n config.values = (u: uPlot, splits, axisIdx, tickSpace, tickIncr) => {\n let decimals = guessDecimals(roundDecimals(tickIncr, 6));\n return splits.map((v) => {\n if (v == null) {\n return null;\n } else {\n return formatValue!(v, decimals > 0 ? decimals : undefined);\n }\n });\n };\n }\n\n // store timezone\n (config as any).timeZone = timeZone;\n\n return config;\n }\n}\n\n/** @internal */\nexport const timeUnitSize = {\n second: 1000,\n minute: 60 * 1000,\n hour: 60 * 60 * 1000,\n day: 24 * 60 * 60 * 1000,\n month: 28 * 24 * 60 * 60 * 1000,\n year: 365 * 24 * 60 * 60 * 1000,\n};\n\n/** Format time axis ticks */\nexport function formatTime(\n self: uPlot,\n splits: number[],\n axisIdx: number,\n foundSpace: number,\n foundIncr: number\n): string[] {\n const axis = self.axes[axisIdx];\n const timeZone = 'timeZone' in axis && typeof axis.timeZone === 'string' ? axis.timeZone : undefined;\n const scale = self.scales.x;\n const range = (scale?.max ?? 0) - (scale?.min ?? 0);\n const yearRoundedToDay = Math.round(timeUnitSize.year / timeUnitSize.day) * timeUnitSize.day;\n const incrementRoundedToDay = Math.round(foundIncr / timeUnitSize.day) * timeUnitSize.day;\n\n let format = systemDateFormats.interval.year;\n\n if (foundIncr < timeUnitSize.second) {\n format = systemDateFormats.interval.millisecond;\n } else if (foundIncr <= timeUnitSize.minute) {\n format = systemDateFormats.interval.second;\n } else if (range <= timeUnitSize.day) {\n format = systemDateFormats.interval.minute;\n } else if (foundIncr <= timeUnitSize.day) {\n format = systemDateFormats.interval.hour;\n } else if (range < timeUnitSize.year) {\n format = systemDateFormats.interval.day;\n } else if (incrementRoundedToDay === yearRoundedToDay) {\n format = systemDateFormats.interval.year;\n } else if (foundIncr <= timeUnitSize.year) {\n format = systemDateFormats.interval.month;\n }\n\n return splits.map((v) => (v == null ? '' : dateTimeFormat(v, { format, timeZone })));\n}\n\n/* Minimum grid & tick spacing in CSS pixels */\nfunction calculateSpace(\n self: uPlot,\n axisIdx: number,\n scaleMin: number,\n scaleMax: number,\n plotDim: number,\n formatValue?: (value: unknown) => string\n): number {\n const axis = self.axes[axisIdx];\n const scale = self.scales[axis.scale!];\n\n // for axis left & right\n if (axis.side !== 2 || !scale) {\n return plotDim <= Y_TICK_SPACING_PANEL_HEIGHT ? Y_TICK_SPACING_SMALL : Y_TICK_SPACING_NORMAL;\n }\n\n const maxTicks = plotDim / X_TICK_SPACING_NORMAL;\n const increment = (scaleMax - scaleMin) / maxTicks;\n\n // not super great, since 0.000005 has many more chars than 1.0\n // it also doesn't work well with \"short\" or adaptive units, e.g. 7 K and 6.40 K\n const bigValue = Math.max(Math.abs(scaleMin), Math.abs(scaleMax));\n\n let sample = '';\n\n if (scale.time) {\n sample = formatTime(self, [bigValue], axisIdx, X_TICK_SPACING_NORMAL, increment)[0];\n } else if (formatValue != null) {\n sample = formatValue(bigValue);\n } else {\n return X_TICK_SPACING_NORMAL;\n }\n\n const valueWidth = measureText(sample, UPLOT_AXIS_FONT_SIZE).width;\n\n return valueWidth + X_TICK_VALUE_GAP;\n}\n\n/** height of x axis or width of y axis in CSS pixels alloted for values, gap & ticks, but excluding axis label */\nfunction calculateAxisSize(self: uPlot, values: string[], axisIdx: number) {\n const axis = self.axes[axisIdx];\n\n let axisSize = axis.ticks!.size!;\n\n if (axis.side === 2) {\n axisSize += axis!.gap! + UPLOT_AXIS_FONT_SIZE;\n } else if (values?.length) {\n let maxTextWidth = values.reduce((acc, value) => Math.max(acc, measureText(value, UPLOT_AXIS_FONT_SIZE).width), 0);\n // limit y tick label width to 40% of visualization\n const textWidthWithLimit = Math.min(self.width * 0.4, maxTextWidth);\n // Not sure why this += and not normal assignment\n axisSize += axis!.gap! + axis!.labelGap! + textWidthWithLimit;\n }\n\n return Math.ceil(axisSize);\n}\n\nexport function getUPlotSideFromAxis(axis: AxisPlacement) {\n switch (axis) {\n case AxisPlacement.Top:\n return 0;\n case AxisPlacement.Right:\n return 1;\n case AxisPlacement.Bottom:\n return 2;\n case AxisPlacement.Left:\n }\n\n return 3; // default everythign to the left\n}\n","import tinycolor from 'tinycolor2';\nimport uPlot from 'uplot';\n\nimport {\n colorManipulator,\n FieldColorMode,\n FieldColorModeId,\n GrafanaTheme2,\n ThresholdsConfig,\n ThresholdsMode,\n} from '@grafana/data';\nimport { ScaleOrientation } from '@grafana/schema';\n\nimport { getCanvasContext } from '../../../utils/measureText';\n\nfunction makeDirectionalGradient(direction: GradientDirection, bbox: uPlot.BBox, ctx: CanvasRenderingContext2D) {\n let x0 = 0,\n y0 = 0,\n x1 = 0,\n y1 = 0;\n\n if (direction === GradientDirection.Down) {\n y0 = bbox.top;\n y1 = bbox.top + bbox.height;\n } else if (direction === GradientDirection.Left) {\n x0 = bbox.left + bbox.width;\n x1 = bbox.left;\n } else if (direction === GradientDirection.Up) {\n y0 = bbox.top + bbox.height;\n y1 = bbox.top;\n } else if (direction === GradientDirection.Right) {\n x0 = bbox.left;\n x1 = bbox.left + bbox.width;\n }\n\n return ctx.createLinearGradient(x0, y0, x1, y1);\n}\n\nexport function getOpacityGradientFn(\n color: string,\n opacity: number\n): (self: uPlot, seriesIdx: number) => CanvasGradient {\n return (plot: uPlot, seriesIdx: number) => {\n const ctx = getCanvasContext();\n const gradient = makeDirectionalGradient(\n plot.scales.x!.ori === ScaleOrientation.Horizontal ? GradientDirection.Down : GradientDirection.Left,\n plot.bbox,\n ctx\n );\n\n gradient.addColorStop(0, colorManipulator.alpha(color, opacity));\n gradient.addColorStop(1, colorManipulator.alpha(color, 0));\n\n return gradient;\n };\n}\n\nexport function getHueGradientFn(\n color: string,\n opacity: number,\n theme: GrafanaTheme2\n): (self: uPlot, seriesIdx: number) => CanvasGradient {\n return (plot: uPlot, seriesIdx: number) => {\n const ctx = getCanvasContext();\n const gradient = makeDirectionalGradient(\n plot.scales.x!.ori === ScaleOrientation.Horizontal ? GradientDirection.Down : GradientDirection.Left,\n plot.bbox,\n ctx\n );\n\n const color1 = tinycolor(color).spin(-25).darken(5);\n const color2 = tinycolor(color).saturate(20).spin(20).brighten(10);\n\n if (theme.isDark) {\n gradient.addColorStop(0, color2.lighten(10).setAlpha(opacity).toString());\n gradient.addColorStop(1, color1.darken(10).setAlpha(opacity).toString());\n } else {\n gradient.addColorStop(0, color2.lighten(10).setAlpha(opacity).toString());\n gradient.addColorStop(1, color1.setAlpha(opacity).toString());\n }\n\n return gradient;\n };\n}\n\nexport enum GradientDirection {\n Right = 0,\n Up = 1,\n Left = 2,\n Down = 3,\n}\n\ntype ValueStop = [value: number, color: string];\n\ntype ScaleValueStops = ValueStop[];\n\nexport function scaleGradient(u: uPlot, scaleKey: string, scaleStops: ScaleValueStops, discrete = false) {\n let scale = u.scales[scaleKey];\n\n // we want the stop below or at the scaleMax\n // and the stop below or at the scaleMin, else the stop above scaleMin\n let minStopIdx: number | null = null;\n let maxStopIdx: number | null = null;\n\n for (let i = 0; i < scaleStops.length; i++) {\n let stopVal = scaleStops[i][0];\n\n if (stopVal <= scale.min! || minStopIdx == null) {\n minStopIdx = i;\n }\n\n maxStopIdx = i;\n\n if (stopVal >= scale.max!) {\n break;\n }\n }\n\n if (minStopIdx === maxStopIdx) {\n return scaleStops[minStopIdx!][1];\n }\n\n let minStopVal = scaleStops[minStopIdx!][0];\n let maxStopVal = scaleStops[maxStopIdx!][0];\n\n if (minStopVal === -Infinity) {\n minStopVal = scale.min!;\n }\n\n if (maxStopVal === Infinity) {\n maxStopVal = scale.max!;\n }\n\n let minStopPos = Math.round(u.valToPos(minStopVal, scaleKey, true));\n let maxStopPos = Math.round(u.valToPos(maxStopVal, scaleKey, true));\n\n let range = minStopPos - maxStopPos;\n\n if (range === 0) {\n return scaleStops[maxStopIdx!][1];\n }\n\n let x0, y0, x1, y1;\n\n if (u.scales.x!.ori === ScaleOrientation.Horizontal) {\n x0 = x1 = 0;\n y0 = minStopPos;\n y1 = maxStopPos;\n } else {\n y0 = y1 = 0;\n x0 = minStopPos;\n x1 = maxStopPos;\n }\n\n let ctx = getCanvasContext();\n\n let grd = ctx.createLinearGradient(x0, y0, x1, y1);\n\n let prevColor: string;\n\n for (let i = minStopIdx!; i <= maxStopIdx!; i++) {\n let s = scaleStops[i];\n\n let stopPos =\n i === minStopIdx ? minStopPos : i === maxStopIdx ? maxStopPos : Math.round(u.valToPos(s[0], scaleKey, true));\n\n let pct = (minStopPos - stopPos) / range;\n\n if (discrete && i > minStopIdx!) {\n grd.addColorStop(pct, prevColor!);\n }\n\n grd.addColorStop(pct, (prevColor = s[1]));\n }\n\n return grd;\n}\n\nexport function getDataRange(plot: uPlot, scaleKey: string) {\n let sc = plot.scales[scaleKey];\n\n let min = Infinity;\n let max = -Infinity;\n\n plot.series.forEach((ser, seriesIdx) => {\n if (ser.show && ser.scale === scaleKey) {\n // uPlot skips finding data min/max when a scale has a pre-defined range\n if (ser.min == null) {\n let data = plot.data[seriesIdx];\n for (let i = 0; i < data.length; i++) {\n if (data[i] != null) {\n min = Math.min(min, data[i]!);\n max = Math.max(max, data[i]!);\n }\n }\n } else {\n min = Math.min(min, ser.min!);\n max = Math.max(max, ser.max!);\n }\n }\n });\n\n if (max === min) {\n min = sc.min!;\n max = sc.max!;\n }\n\n return [min, max];\n}\n\nexport function getGradientRange(\n u: uPlot,\n scaleKey: string,\n hardMin?: number | null,\n hardMax?: number | null,\n softMin?: number | null,\n softMax?: number | null\n) {\n let min = hardMin ?? softMin ?? null;\n let max = hardMax ?? softMax ?? null;\n\n if (min == null || max == null) {\n let [dataMin, dataMax] = getDataRange(u, scaleKey);\n\n min = min ?? dataMin ?? 0;\n max = max ?? dataMax ?? 100;\n }\n\n return [min, max];\n}\n\nfunction isStepTransparent(color: string) {\n // steps are stored as names or 8-char hex\n return color === 'transparent' || (color[0] === '#' && color.slice(-2) === '00');\n}\n\nexport function getScaleGradientFn(\n opacity: number,\n theme: GrafanaTheme2,\n colorMode?: FieldColorMode,\n thresholds?: ThresholdsConfig,\n hardMin?: number | null,\n hardMax?: number | null,\n softMin?: number | null,\n softMax?: number | null\n): (self: uPlot, seriesIdx: number) => CanvasGradient | string {\n if (!colorMode) {\n throw Error('Missing colorMode required for color scheme gradients');\n }\n\n if (!thresholds) {\n throw Error('Missing thresholds required for color scheme gradients');\n }\n\n return (plot: uPlot, seriesIdx: number) => {\n let scaleKey = plot.series[seriesIdx].scale!;\n\n let gradient: CanvasGradient | string = '';\n\n if (colorMode.id === FieldColorModeId.Thresholds) {\n if (thresholds.mode === ThresholdsMode.Absolute) {\n const valueStops: ValueStop[] = thresholds.steps.map((step) => [\n step.value,\n isStepTransparent(step.color)\n ? '#0000'\n : colorManipulator.alpha(theme.visualization.getColorByName(step.color), opacity),\n ]);\n gradient = scaleGradient(plot, scaleKey, valueStops, true);\n } else {\n const [min, max] = getGradientRange(plot, scaleKey, hardMin, hardMax, softMin, softMax);\n const range = max - min;\n const valueStops: ValueStop[] = thresholds.steps.map((step) => [\n min + range * (step.value / 100),\n colorManipulator.alpha(theme.visualization.getColorByName(step.color), opacity),\n ]);\n gradient = scaleGradient(plot, scaleKey, valueStops, true);\n }\n } else if (colorMode.getColors) {\n const colors = colorMode.getColors(theme);\n const [min, max] = getGradientRange(plot, scaleKey, hardMin, hardMax, softMin, softMax);\n const range = max - min;\n const valueStops: ValueStop[] = colors.map((color, i) => [\n min + range * (i / (colors.length - 1)),\n colorManipulator.alpha(theme.visualization.getColorByName(color), opacity),\n ]);\n gradient = scaleGradient(plot, scaleKey, valueStops, false);\n }\n\n return gradient;\n };\n}\n","import uPlot, { Series } from 'uplot';\n\nimport {\n colorManipulator,\n DataFrameFieldIndex,\n FALLBACK_COLOR,\n FieldColorMode,\n FieldColorModeId,\n GrafanaTheme2,\n ThresholdsConfig,\n} from '@grafana/data';\nimport {\n BarAlignment,\n BarConfig,\n GraphDrawStyle,\n FillConfig,\n GraphGradientMode,\n LineConfig,\n LineInterpolation,\n PointsConfig,\n VisibilityMode,\n} from '@grafana/schema';\n\nimport { PlotConfigBuilder } from '../types';\n\nimport { getHueGradientFn, getOpacityGradientFn, getScaleGradientFn } from './gradientFills';\n\nexport interface SeriesProps extends LineConfig, BarConfig, FillConfig, PointsConfig {\n scaleKey: string;\n pxAlign?: boolean;\n gradientMode?: GraphGradientMode;\n dynamicSeriesColor?: (seriesIdx: number) => string | undefined;\n\n facets?: uPlot.Series.Facet[];\n\n /** Used when gradientMode is set to Scheme */\n thresholds?: ThresholdsConfig;\n colorMode?: FieldColorMode;\n hardMin?: number | null;\n hardMax?: number | null;\n softMin?: number | null;\n softMax?: number | null;\n\n drawStyle?: GraphDrawStyle;\n pathBuilder?: Series.PathBuilder | null;\n pointsFilter?: Series.Points.Filter | null;\n pointsBuilder?: Series.Points.Show | null;\n show?: boolean;\n dataFrameFieldIndex?: DataFrameFieldIndex;\n theme: GrafanaTheme2;\n value?: uPlot.Series.Value;\n showValues?: boolean;\n}\n\nexport class UPlotSeriesBuilder extends PlotConfigBuilder {\n getConfig() {\n const {\n facets,\n drawStyle,\n pathBuilder,\n pointsBuilder,\n pointsFilter,\n lineInterpolation,\n lineWidth,\n lineStyle,\n barAlignment,\n barWidthFactor,\n barMaxWidth,\n showPoints,\n pointSize,\n scaleKey,\n pxAlign,\n spanNulls,\n show = true,\n } = this.props;\n\n let lineConfig: Partial = {};\n\n let lineColor = this.getLineColor();\n\n // GraphDrawStyle.Points mode also needs this for fill/stroke sharing & re-use in series.points. see getColor() below.\n lineConfig.stroke = lineColor;\n\n lineConfig.width = lineWidth;\n if (lineStyle && lineStyle.fill !== 'solid') {\n if (lineStyle.fill === 'dot') {\n lineConfig.cap = 'round';\n }\n lineConfig.dash = lineStyle.dash ?? [10, 10];\n }\n\n if (pathBuilder != null) {\n lineConfig.paths = pathBuilder;\n } else if (drawStyle === GraphDrawStyle.Points) {\n lineConfig.paths = () => null;\n } else if (drawStyle != null) {\n lineConfig.paths = (self: uPlot, seriesIdx: number, idx0: number, idx1: number) => {\n let pathsBuilder = mapDrawStyleToPathBuilder(\n drawStyle,\n lineInterpolation,\n barAlignment,\n barWidthFactor,\n barMaxWidth\n );\n return pathsBuilder(self, seriesIdx, idx0, idx1);\n };\n }\n\n const useColor: uPlot.Series.Stroke =\n // @ts-ignore\n typeof lineColor === 'string' ? lineColor : (u, seriesIdx) => u.series[seriesIdx]._stroke;\n\n const pointsConfig: Partial = {\n points: {\n stroke: useColor,\n fill: useColor,\n size: !pointSize || pointSize < lineWidth! ? undefined : pointSize,\n filter: pointsFilter,\n },\n };\n\n if (pointsBuilder != null) {\n pointsConfig.points!.show = pointsBuilder;\n } else {\n // we cannot set points.show property above (even to undefined) as that will clear uPlot's default auto behavior\n if (drawStyle === GraphDrawStyle.Points) {\n pointsConfig.points!.show = true;\n } else {\n if (showPoints === VisibilityMode.Auto) {\n if (drawStyle === GraphDrawStyle.Bars) {\n pointsConfig.points!.show = false;\n }\n } else if (showPoints === VisibilityMode.Never) {\n pointsConfig.points!.show = false;\n } else if (showPoints === VisibilityMode.Always) {\n pointsConfig.points!.show = true;\n }\n }\n }\n\n return {\n scale: scaleKey,\n facets,\n spanGaps: typeof spanNulls === 'number' ? false : spanNulls,\n value: () => '',\n pxAlign,\n show,\n fill: this.getFill(),\n ...lineConfig,\n ...pointsConfig,\n };\n }\n\n private getLineColor(): Series.Stroke {\n const {\n lineColor,\n gradientMode,\n colorMode,\n thresholds,\n theme,\n hardMin,\n hardMax,\n softMin,\n softMax,\n dynamicSeriesColor,\n } = this.props;\n\n if (gradientMode === GraphGradientMode.None && dynamicSeriesColor) {\n return (plot: uPlot, seriesIdx: number) => dynamicSeriesColor(seriesIdx) ?? lineColor ?? FALLBACK_COLOR;\n }\n\n if (gradientMode === GraphGradientMode.Scheme && colorMode?.id !== FieldColorModeId.Fixed) {\n return getScaleGradientFn(1, theme, colorMode, thresholds, hardMin, hardMax, softMin, softMax);\n }\n\n if (gradientMode === GraphGradientMode.Hue) {\n return getHueGradientFn(lineColor ?? FALLBACK_COLOR, 1, theme);\n }\n\n return lineColor ?? FALLBACK_COLOR;\n }\n\n private getFill(): Series.Fill | undefined {\n const {\n lineColor,\n fillColor,\n gradientMode,\n fillOpacity,\n colorMode,\n thresholds,\n theme,\n hardMin,\n hardMax,\n softMin,\n softMax,\n dynamicSeriesColor,\n } = this.props;\n\n if (fillColor) {\n return fillColor;\n }\n\n const mode = gradientMode ?? GraphGradientMode.None;\n const opacityPercent = (fillOpacity ?? 0) / 100;\n\n if (mode === GraphGradientMode.None && dynamicSeriesColor && opacityPercent > 0) {\n return (u: uPlot, seriesIdx: number) => {\n // @ts-ignore\n let lineColor = u.series[seriesIdx]._stroke; // cache\n return colorManipulator.alpha(lineColor ?? '', opacityPercent);\n };\n }\n\n switch (mode) {\n case GraphGradientMode.Opacity:\n return getOpacityGradientFn((fillColor ?? lineColor)!, opacityPercent);\n case GraphGradientMode.Hue:\n return getHueGradientFn((fillColor ?? lineColor)!, opacityPercent, theme);\n case GraphGradientMode.Scheme:\n if (colorMode?.id !== FieldColorModeId.Fixed) {\n return getScaleGradientFn(opacityPercent, theme, colorMode, thresholds, hardMin, hardMax, softMin, softMax);\n }\n // intentional fall-through to handle Scheme with Fixed color\n default:\n if (opacityPercent > 0) {\n return colorManipulator.alpha(lineColor ?? '', opacityPercent);\n }\n }\n\n return undefined;\n }\n}\n\ninterface PathBuilders {\n linear: Series.PathBuilder;\n smooth: Series.PathBuilder;\n stepBefore: Series.PathBuilder;\n stepAfter: Series.PathBuilder;\n [key: string]: Series.PathBuilder;\n}\n\nlet builders: PathBuilders | undefined = undefined;\n\nfunction mapDrawStyleToPathBuilder(\n style: GraphDrawStyle,\n lineInterpolation?: LineInterpolation,\n barAlignment = BarAlignment.Center,\n barWidthFactor = 0.6,\n barMaxWidth = 200\n): Series.PathBuilder {\n const pathBuilders = uPlot.paths;\n\n if (!builders) {\n // This should be global static, but Jest initalization was failing so we lazy load to avoid the issue\n builders = {\n linear: pathBuilders.linear!(),\n smooth: pathBuilders.spline!(),\n stepBefore: pathBuilders.stepped!({ align: -1 }),\n stepAfter: pathBuilders.stepped!({ align: 1 }),\n };\n }\n\n if (style === GraphDrawStyle.Bars) {\n // each bars pathBuilder is lazy-initialized and globally cached by a key composed of its options\n let barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;\n\n if (!builders[barsCfgKey]) {\n builders[barsCfgKey] = pathBuilders.bars!({\n size: [barWidthFactor, barMaxWidth],\n align: barAlignment,\n });\n }\n\n return builders[barsCfgKey];\n } else if (style === GraphDrawStyle.Line) {\n if (lineInterpolation === LineInterpolation.StepBefore) {\n return builders.stepBefore;\n }\n if (lineInterpolation === LineInterpolation.StepAfter) {\n return builders.stepAfter;\n }\n if (lineInterpolation === LineInterpolation.Smooth) {\n return builders.smooth;\n }\n }\n\n return builders.linear; // the default\n}\n","import tinycolor from 'tinycolor2';\nimport uPlot from 'uplot';\n\nimport { GrafanaTheme2, Threshold, ThresholdsConfig, ThresholdsMode } from '@grafana/data';\nimport { GraphThresholdsStyleConfig, GraphThresholdsStyleMode, ScaleOrientation } from '@grafana/schema';\n\nimport { getGradientRange, scaleGradient } from './gradientFills';\n\nexport interface UPlotThresholdOptions {\n scaleKey: string;\n thresholds: ThresholdsConfig;\n config: GraphThresholdsStyleConfig;\n theme: GrafanaTheme2;\n hardMin?: number | null;\n hardMax?: number | null;\n softMin?: number | null;\n softMax?: number | null;\n}\n\nexport function getThresholdsDrawHook(options: UPlotThresholdOptions) {\n const dashSegments =\n options.config.mode === GraphThresholdsStyleMode.Dashed ||\n options.config.mode === GraphThresholdsStyleMode.DashedAndArea\n ? [10, 10]\n : [];\n\n function addLines(u: uPlot, yScaleKey: string, steps: Threshold[], theme: GrafanaTheme2) {\n let ctx = u.ctx;\n\n // Thresholds below a transparent threshold is treated like \"less than\", and line drawn previous threshold\n let transparentIndex = 0;\n\n for (let idx = 0; idx < steps.length; idx++) {\n const step = steps[idx];\n if (step.color === 'transparent') {\n transparentIndex = idx;\n break;\n }\n }\n\n ctx.lineWidth = 2;\n ctx.setLineDash(dashSegments);\n\n // Ignore the base -Infinity threshold by always starting on index 1\n for (let idx = 1; idx < steps.length; idx++) {\n const step = steps[idx];\n let color: tinycolor.Instance;\n\n // if we are below a transparent index treat this a less then threshold, use previous thresholds color\n if (transparentIndex >= idx && idx > 0) {\n color = tinycolor(theme.visualization.getColorByName(steps[idx - 1].color));\n } else {\n color = tinycolor(theme.visualization.getColorByName(step.color));\n }\n\n // Unless alpha specififed set to default value\n if (color.getAlpha() === 1) {\n color.setAlpha(0.7);\n }\n\n const isHorizontal = u.scales.x!.ori === ScaleOrientation.Horizontal;\n const scaleVal = u.valToPos(step.value, yScaleKey, true);\n\n let x0 = Math.round(isHorizontal ? u.bbox.left : scaleVal);\n let y0 = Math.round(isHorizontal ? scaleVal : u.bbox.top);\n let x1 = Math.round(isHorizontal ? u.bbox.left + u.bbox.width : scaleVal);\n let y1 = Math.round(isHorizontal ? scaleVal : u.bbox.top + u.bbox.height);\n\n ctx.beginPath();\n ctx.moveTo(x0, y0);\n ctx.lineTo(x1, y1);\n\n ctx.strokeStyle = color.toString();\n ctx.stroke();\n }\n }\n\n function addAreas(u: uPlot, yScaleKey: string, steps: Threshold[], theme: GrafanaTheme2) {\n let ctx = u.ctx;\n\n let grd = scaleGradient(\n u,\n yScaleKey,\n steps.map((step) => {\n let color = tinycolor(theme.visualization.getColorByName(step.color));\n\n if (color.getAlpha() === 1) {\n color.setAlpha(0.15);\n }\n\n return [step.value, color.toString()];\n }),\n true\n );\n\n ctx.fillStyle = grd;\n ctx.fillRect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);\n }\n\n const { scaleKey, thresholds, theme, config, hardMin, hardMax, softMin, softMax } = options;\n\n return (u: uPlot) => {\n const ctx = u.ctx;\n const { min: xMin, max: xMax } = u.scales.x;\n const { min: yMin, max: yMax } = u.scales[scaleKey];\n\n if (xMin == null || xMax == null || yMin == null || yMax == null) {\n return;\n }\n\n let { steps, mode } = thresholds;\n\n if (mode === ThresholdsMode.Percentage) {\n let [min, max] = getGradientRange(u, scaleKey, hardMin, hardMax, softMin, softMax);\n let range = max - min;\n\n steps = steps.map((step) => ({\n ...step,\n value: min + range * (step.value / 100),\n }));\n }\n\n ctx.save();\n\n switch (config.mode) {\n case GraphThresholdsStyleMode.Line:\n case GraphThresholdsStyleMode.Dashed:\n addLines(u, scaleKey, steps, theme);\n break;\n case GraphThresholdsStyleMode.Area:\n addAreas(u, scaleKey, steps, theme);\n break;\n case GraphThresholdsStyleMode.LineAndArea:\n case GraphThresholdsStyleMode.DashedAndArea:\n addAreas(u, scaleKey, steps, theme);\n addLines(u, scaleKey, steps, theme);\n }\n\n ctx.restore();\n };\n}\n","import { merge } from 'lodash';\nimport uPlot, { Cursor, Band, Hooks, Select, AlignedData, Padding, Series } from 'uplot';\n\nimport { DataFrame, DefaultTimeZone, Field, getTimeZoneInfo, GrafanaTheme2, TimeRange, TimeZone } from '@grafana/data';\nimport { AxisPlacement, VizOrientation } from '@grafana/schema';\n\nimport { FacetedData, PlotConfig } from '../types';\nimport { DEFAULT_PLOT_CONFIG, getStackingBands, pluginLog, StackingGroup } from '../utils';\n\nimport { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder';\nimport { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder';\nimport { SeriesProps, UPlotSeriesBuilder } from './UPlotSeriesBuilder';\nimport { getThresholdsDrawHook, UPlotThresholdOptions } from './UPlotThresholds';\n\nconst cursorDefaults: Cursor = {\n // prevent client-side zoom from triggering at the end of a selection\n drag: { setScale: false },\n points: {\n /*@ts-ignore*/\n size: (u, seriesIdx) => u.series[seriesIdx].points.size * 2,\n /*@ts-ignore*/\n width: (u, seriesIdx, size) => size / 4,\n },\n focus: {\n prox: 30,\n },\n};\n\ntype PrepData = (frames: DataFrame[]) => AlignedData | FacetedData;\ntype PreDataStacked = (frames: DataFrame[], stackingGroups: StackingGroup[]) => AlignedData | FacetedData;\n\nexport class UPlotConfigBuilder {\n readonly uid = Math.random().toString(36).slice(2);\n\n series: UPlotSeriesBuilder[] = [];\n private axes: Record = {};\n readonly scales: UPlotScaleBuilder[] = [];\n private bands: Band[] = [];\n private stackingGroups: StackingGroup[] = [];\n private cursor: Cursor | undefined;\n private select: uPlot.Select | undefined;\n private hasLeftAxis = false;\n private hooks: Hooks.Arrays = {};\n private tz: string | undefined = undefined;\n private mode: uPlot.Mode = 1;\n private frames: DataFrame[] | undefined = undefined;\n // to prevent more than one threshold per scale\n private thresholds: Record = {};\n private padding?: Padding = undefined;\n\n private cachedConfig?: PlotConfig;\n\n prepData: PrepData | undefined = undefined;\n\n constructor(timeZone: TimeZone = DefaultTimeZone) {\n this.tz = getTimeZoneInfo(timeZone, Date.now())?.ianaName;\n }\n\n // Exposed to let the container know the primary scale keys\n scaleKeys: [string, string] = ['', ''];\n\n addHook(type: T, hook: Hooks.Defs[T]) {\n pluginLog('UPlotConfigBuilder', false, 'addHook', type);\n\n if (!this.hooks[type]) {\n this.hooks[type] = [];\n }\n\n this.hooks[type].push(hook);\n }\n\n addThresholds(options: UPlotThresholdOptions) {\n if (!this.thresholds[options.scaleKey]) {\n this.thresholds[options.scaleKey] = options;\n this.addHook('drawClear', getThresholdsDrawHook(options));\n }\n }\n\n addAxis(props: AxisProps) {\n props.placement = props.placement ?? AxisPlacement.Auto;\n props.grid = props.grid ?? {};\n let scaleKey = props.scaleKey;\n\n if (scaleKey === 'x') {\n scaleKey += props.timeZone ?? '';\n }\n\n if (this.axes[scaleKey]) {\n this.axes[scaleKey].merge(props);\n return;\n }\n\n // Handle auto placement logic\n if (props.placement === AxisPlacement.Auto) {\n props.placement = this.hasLeftAxis ? AxisPlacement.Right : AxisPlacement.Left;\n }\n\n if (props.placement === AxisPlacement.Left) {\n this.hasLeftAxis = true;\n }\n\n if (props.placement === AxisPlacement.Hidden) {\n props.grid.show = false;\n props.size = 0;\n }\n\n this.axes[scaleKey] = new UPlotAxisBuilder(props);\n }\n\n getAxisPlacement(scaleKey: string): AxisPlacement {\n const axis = this.axes[scaleKey];\n return axis?.props.placement! ?? AxisPlacement.Left;\n }\n\n setCursor(cursor?: Cursor) {\n this.cursor = merge({}, this.cursor, cursor);\n }\n\n setMode(mode: uPlot.Mode) {\n this.mode = mode;\n }\n\n setSelect(select: Select) {\n this.select = select;\n }\n\n addSeries(props: SeriesProps) {\n this.series.push(new UPlotSeriesBuilder(props));\n }\n\n getSeries() {\n return this.series;\n }\n\n /** Add or update the scale with the scale key */\n addScale(props: ScaleProps) {\n const current = this.scales.find((v) => v.props.scaleKey === props.scaleKey);\n if (current) {\n current.merge(props);\n return;\n }\n this.scales.push(new UPlotScaleBuilder(props));\n }\n\n addBand(band: Band) {\n this.bands.push(band);\n }\n\n setStackingGroups(groups: StackingGroup[]) {\n this.stackingGroups = groups;\n }\n\n getStackingGroups() {\n return this.stackingGroups;\n }\n\n setPrepData(prepData: PreDataStacked) {\n this.prepData = (frames) => {\n this.frames = frames;\n return prepData(frames, this.getStackingGroups());\n };\n }\n\n setPadding(padding: Padding) {\n this.padding = padding;\n }\n\n getConfig() {\n if (this.cachedConfig) {\n return this.cachedConfig;\n }\n\n const config: PlotConfig = {\n ...DEFAULT_PLOT_CONFIG,\n mode: this.mode,\n series: [\n this.mode === 2\n ? (null as unknown as Series)\n : {\n value: () => '',\n },\n ],\n };\n config.axes = this.ensureNonOverlappingAxes(Object.values(this.axes)).map((a) => a.getConfig());\n config.series = [...config.series, ...this.series.map((s) => s.getConfig())];\n config.scales = this.scales.reduce((acc, s) => {\n return { ...acc, ...s.getConfig() };\n }, {});\n\n config.hooks = this.hooks;\n\n config.select = this.select;\n\n const pointColorFn =\n (alphaHex = '') =>\n (u: uPlot, seriesIdx: number) => {\n /*@ts-ignore*/\n let s = u.series[seriesIdx].points._stroke;\n\n // interpolate for gradients/thresholds\n if (typeof s !== 'string') {\n let field = this.frames![0].fields[seriesIdx];\n s = field.display!(field.values[u.cursor.idxs![seriesIdx]!]).color!;\n }\n\n return s + alphaHex;\n };\n\n config.cursor = merge(\n {},\n cursorDefaults,\n {\n points: {\n stroke: pointColorFn('80'),\n fill: pointColorFn(),\n },\n },\n this.cursor\n );\n\n config.tzDate = this.tzDate;\n\n if (Array.isArray(this.padding)) {\n config.padding = this.padding;\n }\n\n this.stackingGroups.forEach((group) => {\n getStackingBands(group).forEach((band) => {\n this.addBand(band);\n });\n });\n\n if (this.bands.length) {\n config.bands = this.bands;\n }\n\n this.cachedConfig = config;\n\n return config;\n }\n\n private tzDate = (ts: number) => {\n let date = new Date(ts);\n\n return this.tz ? uPlot.tzDate(date, this.tz) : date;\n };\n\n private ensureNonOverlappingAxes(axes: UPlotAxisBuilder[]): UPlotAxisBuilder[] {\n const xAxis = axes.find((a) => a.props.scaleKey === 'x');\n const axesWithoutGridSet = axes.filter((a) => a.props.grid?.show === undefined);\n const firstValueAxisIdx = axesWithoutGridSet.findIndex(\n (a) =>\n a.props.placement === AxisPlacement.Left ||\n a.props.placement === AxisPlacement.Right ||\n (a.props.placement === AxisPlacement.Bottom && a !== xAxis)\n );\n\n // For all axes with no grid set, set the grid automatically (grid only for first left axis )\n for (let i = 0; i < axesWithoutGridSet.length; i++) {\n if (axesWithoutGridSet[i] === xAxis || i === firstValueAxisIdx) {\n axesWithoutGridSet[i].props.grid!.show = true;\n } else {\n axesWithoutGridSet[i].props.grid!.show = false;\n }\n }\n\n return axes;\n }\n}\n\nexport type Renderers = Array<{\n fieldMap: Record;\n indicesOnly: string[];\n init: (config: UPlotConfigBuilder, fieldIndices: Record) => void;\n}>;\n\n/** @alpha */\ntype UPlotConfigPrepOpts = {}> = {\n frame: DataFrame;\n theme: GrafanaTheme2;\n timeZones: TimeZone[];\n getTimeRange: () => TimeRange;\n allFrames: DataFrame[];\n renderers?: Renderers;\n tweakScale?: (opts: ScaleProps, forField: Field) => ScaleProps;\n tweakAxis?: (opts: AxisProps, forField: Field) => AxisProps;\n hoverProximity?: number;\n orientation?: VizOrientation;\n} & T;\n\n/** @alpha */\nexport type UPlotConfigPrepFn = (opts: UPlotConfigPrepOpts) => UPlotConfigBuilder;\n","import { Range } from 'uplot';\n\nimport {\n DataFrame,\n FieldConfig,\n FieldSparkline,\n FieldType,\n isLikelyAscendingVector,\n sortDataFrame,\n applyNullInsertThreshold,\n Field,\n} from '@grafana/data';\nimport { GraphFieldConfig } from '@grafana/schema';\n\n/** @internal\n * Given a sparkline config returns a DataFrame ready to be turned into Plot data set\n **/\nexport function preparePlotFrame(sparkline: FieldSparkline, config?: FieldConfig): DataFrame {\n const length = sparkline.y.values.length;\n const yFieldConfig = {\n ...sparkline.y.config,\n ...config,\n };\n\n const xField = sparkline.x ?? {\n name: '',\n values: [...Array(length).keys()],\n type: FieldType.number,\n config: {},\n };\n\n let frame: DataFrame = {\n refId: 'sparkline',\n fields: [\n xField,\n {\n ...sparkline.y,\n config: yFieldConfig,\n },\n ],\n length,\n };\n\n if (!isLikelyAscendingVector(xField.values)) {\n frame = sortDataFrame(frame, 0);\n }\n\n return applyNullInsertThreshold({\n frame,\n refFieldPseudoMin: sparkline.timeRange?.from.valueOf(),\n refFieldPseudoMax: sparkline.timeRange?.to.valueOf(),\n });\n}\n\n/**\n * apply configuration defaults and ensure that the range is never two equal values.\n */\nexport function getYRange(field: Field, alignedFrame: DataFrame): Range.MinMax {\n let { min, max } = alignedFrame.fields[1].state?.range!;\n\n // enure that the min/max from the field config are respected\n min = Math.max(min!, field.config.min ?? -Infinity);\n max = Math.min(max!, field.config.max ?? Infinity);\n\n // if noValue is set, ensure that it is included in the range as well\n const noValue = +alignedFrame.fields[1].config?.noValue!;\n if (!Number.isNaN(noValue)) {\n min = Math.min(min, noValue);\n max = Math.max(max, noValue);\n }\n\n // if min and max are equal after all of that, create a range\n // that allows the sparkline to be visible in the center of the viz\n if (min === max) {\n if (min === 0) {\n max = 100;\n } else if (min < 0) {\n max = 0;\n min *= 2;\n } else {\n min = 0;\n max *= 2;\n }\n }\n\n return [min, max];\n}\n","import { isEqual } from 'lodash';\nimport { PureComponent } from 'react';\nimport { AlignedData, Range } from 'uplot';\n\nimport {\n compareDataFrameStructures,\n DataFrame,\n Field,\n FieldConfig,\n FieldSparkline,\n FieldType,\n getFieldColorModeForField,\n nullToValue,\n} from '@grafana/data';\nimport {\n AxisPlacement,\n GraphDrawStyle,\n GraphFieldConfig,\n VisibilityMode,\n ScaleDirection,\n ScaleOrientation,\n} from '@grafana/schema';\n\nimport { Themeable2 } from '../../types/theme';\nimport { UPlotChart } from '../uPlot/Plot';\nimport { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';\nimport { preparePlotData2, getStackingGroups } from '../uPlot/utils';\n\nimport { getYRange, preparePlotFrame } from './utils';\n\nexport interface SparklineProps extends Themeable2 {\n width: number;\n height: number;\n config?: FieldConfig;\n sparkline: FieldSparkline;\n}\n\ninterface State {\n data: AlignedData;\n alignedDataFrame: DataFrame;\n configBuilder: UPlotConfigBuilder;\n}\n\nconst defaultConfig: GraphFieldConfig = {\n drawStyle: GraphDrawStyle.Line,\n showPoints: VisibilityMode.Auto,\n axisPlacement: AxisPlacement.Hidden,\n pointSize: 2,\n};\n\n/** @internal */\nexport class Sparkline extends PureComponent {\n constructor(props: SparklineProps) {\n super(props);\n\n const alignedDataFrame = preparePlotFrame(props.sparkline, props.config);\n\n this.state = {\n data: preparePlotData2(alignedDataFrame, getStackingGroups(alignedDataFrame)),\n alignedDataFrame,\n configBuilder: this.prepareConfig(alignedDataFrame),\n };\n }\n\n static getDerivedStateFromProps(props: SparklineProps, state: State) {\n const _frame = preparePlotFrame(props.sparkline, props.config);\n const frame = nullToValue(_frame);\n if (!frame) {\n return { ...state };\n }\n\n return {\n ...state,\n data: preparePlotData2(frame, getStackingGroups(frame)),\n alignedDataFrame: frame,\n };\n }\n\n componentDidUpdate(prevProps: SparklineProps, prevState: State) {\n const { alignedDataFrame } = this.state;\n\n if (!alignedDataFrame) {\n return;\n }\n\n let rebuildConfig = false;\n\n if (prevProps.sparkline !== this.props.sparkline) {\n const isStructureChanged = !compareDataFrameStructures(this.state.alignedDataFrame, prevState.alignedDataFrame);\n const isRangeChanged = !isEqual(\n alignedDataFrame.fields[1].state?.range,\n prevState.alignedDataFrame.fields[1].state?.range\n );\n rebuildConfig = isStructureChanged || isRangeChanged;\n } else {\n rebuildConfig = !isEqual(prevProps.config, this.props.config);\n }\n\n if (rebuildConfig) {\n this.setState({ configBuilder: this.prepareConfig(alignedDataFrame) });\n }\n }\n\n getYRange(field: Field): Range.MinMax {\n return getYRange(field, this.state.alignedDataFrame);\n }\n\n prepareConfig(data: DataFrame) {\n const { theme } = this.props;\n const builder = new UPlotConfigBuilder();\n\n builder.setCursor({\n show: false,\n x: false, // no crosshairs\n y: false,\n });\n\n // X is the first field in the alligned frame\n const xField = data.fields[0];\n builder.addScale({\n scaleKey: 'x',\n orientation: ScaleOrientation.Horizontal,\n direction: ScaleDirection.Right,\n isTime: false, //xField.type === FieldType.time,\n range: () => {\n const { sparkline } = this.props;\n if (sparkline.x) {\n if (sparkline.timeRange && sparkline.x.type === FieldType.time) {\n return [sparkline.timeRange.from.valueOf(), sparkline.timeRange.to.valueOf()];\n }\n const vals = sparkline.x.values;\n return [vals[0], vals[vals.length - 1]];\n }\n return [0, sparkline.y.values.length - 1];\n },\n });\n\n builder.addAxis({\n scaleKey: 'x',\n theme,\n placement: AxisPlacement.Hidden,\n });\n\n for (let i = 0; i < data.fields.length; i++) {\n const field = data.fields[i];\n const config: FieldConfig = field.config;\n const customConfig: GraphFieldConfig = {\n ...defaultConfig,\n ...config.custom,\n };\n\n if (field === xField || field.type !== FieldType.number) {\n continue;\n }\n\n const scaleKey = config.unit || '__fixed';\n builder.addScale({\n scaleKey,\n orientation: ScaleOrientation.Vertical,\n direction: ScaleDirection.Up,\n range: () => this.getYRange(field),\n });\n\n builder.addAxis({\n scaleKey,\n theme,\n placement: AxisPlacement.Hidden,\n });\n\n const colorMode = getFieldColorModeForField(field);\n const seriesColor = colorMode.getCalculator(field, theme)(0, 0);\n const pointsMode =\n customConfig.drawStyle === GraphDrawStyle.Points ? VisibilityMode.Always : customConfig.showPoints;\n\n builder.addSeries({\n pxAlign: false,\n scaleKey,\n theme,\n colorMode,\n thresholds: config.thresholds,\n drawStyle: customConfig.drawStyle!,\n lineColor: customConfig.lineColor ?? seriesColor,\n lineWidth: customConfig.lineWidth,\n lineInterpolation: customConfig.lineInterpolation,\n showPoints: pointsMode,\n pointSize: customConfig.pointSize,\n fillOpacity: customConfig.fillOpacity,\n fillColor: customConfig.fillColor,\n lineStyle: customConfig.lineStyle,\n gradientMode: customConfig.gradientMode,\n spanNulls: customConfig.spanNulls,\n });\n }\n\n return builder;\n }\n\n render() {\n const { data, configBuilder } = this.state;\n const { width, height } = this.props;\n return ;\n }\n}\n","import * as React from 'react';\n\nimport {\n FieldType,\n FieldConfig,\n getMinMaxAndDelta,\n FieldSparkline,\n isDataFrame,\n Field,\n isDataFrameWithValue,\n formattedValueToString,\n} from '@grafana/data';\nimport {\n BarAlignment,\n GraphDrawStyle,\n GraphFieldConfig,\n GraphGradientMode,\n LineInterpolation,\n TableSparklineCellOptions,\n TableCellDisplayMode,\n VisibilityMode,\n} from '@grafana/schema';\n\nimport { useTheme2 } from '../../../themes/ThemeContext';\nimport { measureText } from '../../../utils/measureText';\nimport { FormattedValueDisplay } from '../../FormattedValueDisplay/FormattedValueDisplay';\nimport { Sparkline } from '../../Sparkline/Sparkline';\nimport { TableCellProps } from '../types';\nimport { getAlignmentFactor, getCellOptions } from '../utils';\n\nexport const defaultSparklineCellConfig: TableSparklineCellOptions = {\n type: TableCellDisplayMode.Sparkline,\n drawStyle: GraphDrawStyle.Line,\n lineInterpolation: LineInterpolation.Smooth,\n lineWidth: 1,\n fillOpacity: 17,\n gradientMode: GraphGradientMode.Hue,\n pointSize: 2,\n barAlignment: BarAlignment.Center,\n showPoints: VisibilityMode.Never,\n hideValue: false,\n};\n\nexport const SparklineCell = (props: TableCellProps) => {\n const { field, innerWidth, tableStyles, cell, cellProps, timeRange } = props;\n const sparkline = getSparkline(cell.value);\n const theme = useTheme2();\n\n if (!sparkline) {\n return (\n
    \n {field.config.noValue || 'no data'}\n
    \n );\n }\n\n // Get the step from the first two values to null-fill the x-axis based on timerange\n if (sparkline.x && !sparkline.x.config.interval && sparkline.x.values.length > 1) {\n sparkline.x.config.interval = sparkline.x.values[1] - sparkline.x.values[0];\n }\n\n // Remove non-finite values, e.g: NaN, +/-Infinity\n sparkline.y.values = sparkline.y.values.map((v) => {\n if (!Number.isFinite(v)) {\n return null;\n } else {\n return v;\n }\n });\n\n const range = getMinMaxAndDelta(sparkline.y);\n sparkline.y.config.min = range.min;\n sparkline.y.config.max = range.max;\n sparkline.y.state = { range };\n sparkline.timeRange = timeRange;\n\n const cellOptions = getTableSparklineCellOptions(field);\n\n const config: FieldConfig = {\n color: field.config.color,\n custom: {\n ...defaultSparklineCellConfig,\n ...cellOptions,\n },\n };\n\n const hideValue = field.config.custom?.cellOptions?.hideValue;\n let valueWidth = 0;\n let valueElement: React.ReactNode = null;\n if (!hideValue) {\n const value = isDataFrameWithValue(cell.value) ? cell.value.value : null;\n const displayValue = field.display!(value);\n const alignmentFactor = getAlignmentFactor(field, displayValue, cell.row.index);\n\n valueWidth = measureText(formattedValueToString(alignmentFactor), 16).width + theme.spacing.gridSize;\n\n valueElement = (\n \n );\n }\n\n return (\n
    \n {valueElement}\n
    \n \n
    \n
    \n );\n};\n\nfunction getSparkline(value: unknown): FieldSparkline | undefined {\n if (Array.isArray(value)) {\n return {\n y: {\n name: 'test',\n type: FieldType.number,\n values: value,\n config: {},\n },\n };\n }\n\n if (isDataFrame(value)) {\n const timeField = value.fields.find((x) => x.type === FieldType.time);\n const numberField = value.fields.find((x) => x.type === FieldType.number);\n\n if (timeField && numberField) {\n return { x: timeField, y: numberField };\n }\n }\n\n return;\n}\n\nfunction getTableSparklineCellOptions(field: Field): TableSparklineCellOptions {\n let options = getCellOptions(field);\n if (options.type === TableCellDisplayMode.Auto) {\n options = { ...options, type: TableCellDisplayMode.Sparkline };\n }\n if (options.type === TableCellDisplayMode.Sparkline) {\n return options;\n }\n throw new Error(`Expected options type ${TableCellDisplayMode.Sparkline} but got ${options.type}`);\n}\n","import { css } from '@emotion/css';\n\nimport { KeyValue } from '@grafana/data';\n\nimport { FooterItem } from '../types';\n\nexport interface FooterProps {\n value: FooterItem;\n}\n\nexport const FooterCell = (props: FooterProps) => {\n const cell = css({\n width: '100%',\n listStyle: 'none',\n });\n\n const list = css({\n width: '100%',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n });\n\n if (props.value && !Array.isArray(props.value)) {\n return {props.value};\n }\n\n if (props.value && Array.isArray(props.value) && props.value.length > 0) {\n return (\n
      \n {props.value.map((v: KeyValue, i) => {\n const key = Object.keys(v)[0];\n return (\n
    • \n {key}\n {v[key]}\n
      • \n );\n })}\n
    \n );\n }\n\n return EmptyCell;\n};\n\nexport const EmptyCell = () => {\n return  ;\n};\n","import { ColumnInstance, HeaderGroup } from 'react-table';\n\nimport { fieldReducers, ReducerID } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { EmptyCell, FooterCell } from '../Cells/FooterCell';\nimport { FooterItem } from '../types';\n\nimport { TableStyles } from './styles';\n\nexport interface FooterRowProps {\n totalColumnsWidth: number;\n footerGroups: HeaderGroup[];\n footerValues: FooterItem[];\n isPaginationVisible: boolean;\n tableStyles: TableStyles;\n}\n\nexport function FooterRow(props: FooterRowProps) {\n const { totalColumnsWidth, footerGroups, isPaginationVisible, tableStyles } = props;\n const e2eSelectorsTable = selectors.components.Panels.Visualization.Table;\n\n return (\n \n {footerGroups.map((footerGroup: HeaderGroup) => {\n const { key, ...footerGroupProps } = footerGroup.getFooterGroupProps();\n return (\n
    \n {footerGroup.headers.map((column: ColumnInstance) => renderFooterCell(column, tableStyles))}\n
    \n );\n })}\n
    \n );\n}\n\nfunction renderFooterCell(column: ColumnInstance, tableStyles: TableStyles) {\n const { key, ...footerProps } = column.getHeaderProps();\n\n if (!footerProps) {\n return null;\n }\n\n footerProps.style = footerProps.style ?? {};\n footerProps.style.position = 'absolute';\n footerProps.style.justifyContent = (column as any).justifyContent;\n\n return (\n
    \n {column.render('Footer')}\n
    \n );\n}\n\nexport function getFooterValue(index: number, footerValues?: FooterItem[], isCountRowsSet?: boolean) {\n if (footerValues === undefined) {\n return EmptyCell;\n }\n\n if (isCountRowsSet) {\n if (footerValues[index] === undefined) {\n return EmptyCell;\n }\n\n const key = fieldReducers.get(ReducerID.count).name;\n\n return FooterCell({ value: [{ [key]: String(footerValues[index]) }] });\n }\n\n return FooterCell({ value: footerValues[index] });\n}\n","import { t } from '@grafana/i18n';\n\nimport { Icon } from '../../Icon/Icon';\nimport { GrafanaTableRow } from '../types';\n\nimport { TableStyles } from './styles';\n\nexport interface Props {\n row: GrafanaTableRow;\n tableStyles: TableStyles;\n}\n\nexport function RowExpander({ row, tableStyles }: Props) {\n return (\n
    \n \n
    \n );\n}\n","import { Property } from 'csstype';\nimport { clone, sampleSize } from 'lodash';\nimport memoize from 'micro-memoize';\nimport { HeaderGroup, Row } from 'react-table';\nimport tinycolor from 'tinycolor2';\n\nimport {\n ActionModel,\n DataFrame,\n DisplayValue,\n DisplayValueAlignmentFactors,\n Field,\n FieldConfigSource,\n fieldReducers,\n FieldType,\n formattedValueToString,\n getDisplayProcessor,\n getFieldDisplayName,\n GrafanaTheme2,\n isDataFrame,\n isDataFrameWithValue,\n isTimeSeriesFrame,\n LinkModel,\n reduceField,\n SelectableValue,\n} from '@grafana/data';\nimport {\n BarGaugeDisplayMode,\n TableAutoCellOptions,\n TableCellBackgroundDisplayMode,\n TableCellDisplayMode,\n} from '@grafana/schema';\n\nimport { getTextColorForAlphaBackground } from '../../utils/colors';\n\nimport { ActionsCell } from './ActionsCell';\nimport { BarGaugeCell } from './Cells/BarGaugeCell';\nimport { DataLinksCell } from './Cells/DataLinksCell';\nimport { DefaultCell } from './Cells/DefaultCell';\nimport { GeoCell } from './Cells/GeoCell';\nimport { ImageCell } from './Cells/ImageCell';\nimport { JSONViewCell } from './Cells/JSONViewCell';\nimport { SparklineCell } from './Cells/SparklineCell';\nimport { getFooterValue } from './TableRT/FooterRow';\nimport { RowExpander } from './TableRT/RowExpander';\nimport {\n CellColors,\n CellComponent,\n FooterItem,\n GrafanaTableColumn,\n TableCellOptions,\n TableFieldOptions,\n TableFooterCalc,\n} from './types';\n\nexport const EXPANDER_WIDTH = 50;\n\nexport function getTextAlign(field?: Field): Property.JustifyContent {\n if (!field) {\n return 'flex-start';\n }\n\n if (field.config.custom) {\n const custom: TableFieldOptions = field.config.custom;\n\n switch (custom.align) {\n case 'right':\n return 'flex-end';\n case 'left':\n return 'flex-start';\n case 'center':\n return 'center';\n }\n }\n\n if (field.type === FieldType.number) {\n return 'flex-end';\n }\n\n return 'flex-start';\n}\n\nexport function getColumns(\n data: DataFrame,\n availableWidth: number,\n columnMinWidth: number,\n expander: boolean,\n footerValues?: FooterItem[],\n isCountRowsSet?: boolean\n): GrafanaTableColumn[] {\n const columns: GrafanaTableColumn[] = [];\n let fieldCountWithoutWidth = 0;\n\n if (expander) {\n columns.push({\n // Make an expander cell\n Header: () => null, // No header\n id: 'expander', // It needs an ID\n // @ts-expect-error\n // TODO fix type error here\n Cell: RowExpander,\n width: EXPANDER_WIDTH,\n minWidth: EXPANDER_WIDTH,\n filter: (_rows: Row[], _id: string, _filterValues?: SelectableValue[]) => {\n return [];\n },\n justifyContent: 'left',\n field: data.fields[0],\n sortType: 'basic',\n });\n\n availableWidth -= EXPANDER_WIDTH;\n }\n\n for (const [fieldIndex, field] of data.fields.entries()) {\n const fieldTableOptions: TableFieldOptions = field.config.custom || {};\n if (\n // @ts-ignore this was the former hidden option; we support it for legacy use cases while TableRT is being sunset.\n fieldTableOptions.hidden ||\n fieldTableOptions.hideFrom?.viz ||\n field.type === FieldType.nestedFrames\n ) {\n continue;\n }\n\n if (fieldTableOptions.width) {\n availableWidth -= fieldTableOptions.width;\n } else {\n fieldCountWithoutWidth++;\n }\n\n const selectSortType = (type: FieldType) => {\n switch (type) {\n case FieldType.number:\n case FieldType.frame:\n return 'number';\n case FieldType.time:\n return 'basic';\n default:\n return 'alphanumeric-insensitive';\n }\n };\n\n const Cell = getCellComponent(fieldTableOptions.cellOptions?.type, field);\n columns.push({\n // @ts-expect-error\n // TODO fix type error here\n Cell,\n id: fieldIndex.toString(),\n field: field,\n Header: fieldTableOptions.hideHeader ? '' : getFieldDisplayName(field, data),\n accessor: (_row, i) => field.values[i],\n sortType: selectSortType(field.type),\n width: fieldTableOptions.width,\n minWidth: fieldTableOptions.minWidth ?? columnMinWidth,\n filter: memoize(filterByValue(field)),\n justifyContent: getTextAlign(field),\n Footer: getFooterValue(fieldIndex, footerValues, isCountRowsSet),\n });\n }\n\n // set columns that are at minimum width\n let sharedWidth = availableWidth / fieldCountWithoutWidth;\n for (let i = fieldCountWithoutWidth; i > 0; i--) {\n for (const column of columns) {\n if (!column.width && column.minWidth > sharedWidth) {\n column.width = column.minWidth;\n availableWidth -= column.width;\n fieldCountWithoutWidth -= 1;\n sharedWidth = availableWidth / fieldCountWithoutWidth;\n }\n }\n }\n\n // divide up the rest of the space\n for (const column of columns) {\n if (!column.width) {\n column.width = sharedWidth;\n }\n column.minWidth = 50;\n }\n\n return columns;\n}\n\nexport function getCellComponent(displayMode: TableCellDisplayMode, field: Field): CellComponent {\n switch (displayMode) {\n case TableCellDisplayMode.Custom:\n case TableCellDisplayMode.ColorText:\n case TableCellDisplayMode.ColorBackground:\n return DefaultCell;\n case TableCellDisplayMode.Image:\n return ImageCell;\n case TableCellDisplayMode.Gauge:\n return BarGaugeCell;\n case TableCellDisplayMode.Sparkline:\n return SparklineCell;\n case TableCellDisplayMode.JSONView:\n return JSONViewCell;\n case TableCellDisplayMode.DataLinks:\n return DataLinksCell;\n case TableCellDisplayMode.Actions:\n return ActionsCell;\n case TableCellDisplayMode.Pill:\n return DefaultCell; // Legacy table doesn't support pill cells, fallback to default\n }\n\n if (field.type === FieldType.geo) {\n return GeoCell;\n }\n\n if (field.type === FieldType.frame) {\n const firstValue = field.values[0];\n if (isDataFrame(firstValue) && isTimeSeriesFrame(firstValue)) {\n return SparklineCell;\n }\n\n return JSONViewCell;\n }\n\n // Default or Auto\n if (field.type === FieldType.other) {\n return JSONViewCell;\n }\n\n return DefaultCell;\n}\n\nexport function filterByValue(field?: Field) {\n return function (rows: Row[], id: string, filterValues?: SelectableValue[]) {\n if (rows.length === 0) {\n return rows;\n }\n\n if (!filterValues) {\n return rows;\n }\n\n if (!field) {\n return rows;\n }\n\n return rows.filter((row) => {\n if (!row.values.hasOwnProperty(id)) {\n return false;\n }\n const value = rowToFieldValue(row, field);\n return filterValues.find((filter) => filter.value === value) !== undefined;\n });\n };\n}\n\nexport function calculateUniqueFieldValues(rows: any[], field?: Field) {\n if (!field || rows.length === 0) {\n return {};\n }\n\n const set: Record = {};\n\n for (let index = 0; index < rows.length; index++) {\n const value = rowToFieldValue(rows[index], field);\n set[value || '(Blanks)'] = value;\n }\n\n return set;\n}\n\nexport function rowToFieldValue(row: any, field?: Field): string {\n if (!field || !row) {\n return '';\n }\n\n const fieldValue = field.values[row.index];\n const displayValue = field.display ? field.display(fieldValue) : fieldValue;\n const value = field.display ? formattedValueToString(displayValue) : displayValue;\n\n return value;\n}\n\nexport function valuesToOptions(unique: Record): SelectableValue[] {\n return Object.keys(unique)\n .reduce((all, key) => all.concat({ value: unique[key], label: key }), [])\n .sort(sortOptions);\n}\n\nexport function sortOptions(a: SelectableValue, b: SelectableValue): number {\n if (a.label === undefined && b.label === undefined) {\n return 0;\n }\n\n if (a.label === undefined && b.label !== undefined) {\n return -1;\n }\n\n if (a.label !== undefined && b.label === undefined) {\n return 1;\n }\n\n if (a.label! < b.label!) {\n return -1;\n }\n\n if (a.label! > b.label!) {\n return 1;\n }\n\n return 0;\n}\n\nexport function getFilteredOptions(options: SelectableValue[], filterValues?: SelectableValue[]): SelectableValue[] {\n if (!filterValues) {\n return [];\n }\n\n return options.filter((option) => filterValues.some((filtered) => filtered.value === option.value));\n}\n\nexport function sortCaseInsensitive(a: Row, b: Row, id: string) {\n return String(a.values[id]).localeCompare(String(b.values[id]), undefined, { sensitivity: 'base' });\n}\n\n// sortNumber needs to have great performance as it is called a lot\nexport function sortNumber(rowA: Row, rowB: Row, id: string) {\n const a = toNumber(rowA.values[id]);\n const b = toNumber(rowB.values[id]);\n return a === b ? 0 : a > b ? 1 : -1;\n}\n\nfunction toNumber(value: any): number {\n if (isDataFrameWithValue(value)) {\n return value.value ?? Number.NEGATIVE_INFINITY;\n }\n\n if (value === null || value === undefined || value === '' || isNaN(value)) {\n return Number.NEGATIVE_INFINITY;\n }\n\n if (typeof value === 'number') {\n return value;\n }\n\n return Number(value);\n}\n\nexport function getFooterItems(\n filterFields: Array<{ id: string; field?: Field } | undefined>,\n values: any[number],\n options: TableFooterCalc,\n theme2: GrafanaTheme2\n): FooterItem[] {\n /*\n The FooterItems[] are calculated using both the `headerGroups[0].headers`\n (filterFields) and `rows` (values) destructured from the useTable() hook.\n This cacluation is based on the data from each index in `filterFields`\n array as well as the corresponding index in the `values` array.\n When the user hides a column through an override, the getColumns()\n hook is invoked, removes said hidden column, sends the updated column\n data to the useTable() hook, which then builds `headerGroups[0].headers`\n without the hidden column. However, it doesn't remove the hidden column\n from the `row` data, instead it substututes the hidden column row data\n with an `undefined` value. Therefore, the `row` array length never changes,\n despite the `headerGroups[0].headers` length changing at every column removal.\n This makes all footer reduce calculations AFTER the first hidden column\n in the `headerGroups[0].headers` break, since the indexing of both\n arrays is no longer in parity.\n\n So, here we simply recursively test for the \"hidden\" columns\n from `headerGroups[0].headers`. Each column has an ID property that corresponds\n to its own index, therefore if (`filterField.id` !== `String(index)`),\n we know there is one or more hidden columns; at which point we update\n the index with an ersatz placeholder with just an `id` property.\n */\n addMissingColumnIndex(filterFields);\n\n return filterFields.map((data, i) => {\n // Then test for numerical data - this will filter out placeholder `filterFields` as well.\n if (data?.field?.type !== FieldType.number) {\n // Show the reducer in the first column\n if (i === 0 && options.reducer && options.reducer.length > 0) {\n const reducer = fieldReducers.get(options.reducer[0]);\n return reducer.name;\n }\n // Render an .\n return undefined;\n }\n\n let newField = clone(data.field);\n newField.values = values[data.id];\n newField.state = undefined;\n\n data.field = newField;\n\n if (options.fields && options.fields.length > 0) {\n const f = options.fields.find((f) => f === data?.field?.name);\n if (f) {\n return getFormattedValue(data.field, options.reducer, theme2);\n }\n return undefined;\n }\n return getFormattedValue(data.field, options.reducer || [], theme2);\n });\n}\n\nfunction getFormattedValue(field: Field, reducer: string[], theme: GrafanaTheme2) {\n // If we don't have anything to return then we display nothing\n const calc = reducer[0];\n if (calc === undefined) {\n return '';\n }\n\n // Calculate the reduction\n const format = field.display ?? getDisplayProcessor({ field, theme });\n const fieldCalcValue = reduceField({ field, reducers: reducer })[calc];\n\n // If the reducer preserves units then format the\n // end value with the field display processor\n const reducerInfo = fieldReducers.get(calc);\n if (reducerInfo.preservesUnits) {\n return formattedValueToString(format(fieldCalcValue));\n }\n\n // Otherwise we simply return the formatted string\n return formattedValueToString({ text: fieldCalcValue });\n}\n\n// This strips the raw vales from the `rows` object.\nexport function createFooterCalculationValues(rows: Row[]): any[number] {\n const values: any[number] = [];\n\n for (const key in rows) {\n for (const [valKey, val] of Object.entries(rows[key].values)) {\n if (values[valKey] === undefined) {\n values[valKey] = [];\n }\n values[valKey].push(val);\n }\n }\n\n return values;\n}\n\nconst defaultCellOptions: TableAutoCellOptions = { type: TableCellDisplayMode.Auto };\n\nexport function getCellOptions(field: Field): TableCellOptions {\n if (field.config.custom?.displayMode) {\n return migrateTableDisplayModeToCellOptions(field.config.custom?.displayMode);\n }\n\n if (!field.config.custom?.cellOptions) {\n return defaultCellOptions;\n }\n\n return field.config.custom.cellOptions;\n}\n\n/**\n * Migrates table cell display mode to new object format.\n *\n * @param displayMode The display mode of the cell\n * @returns TableCellOptions object in the correct format\n * relative to the old display mode.\n */\nexport function migrateTableDisplayModeToCellOptions(displayMode: TableCellDisplayMode): TableCellOptions {\n switch (displayMode) {\n // In the case of the gauge we move to a different option\n case 'basic':\n case 'gradient-gauge':\n case 'lcd-gauge':\n let gaugeMode = BarGaugeDisplayMode.Basic;\n\n if (displayMode === 'gradient-gauge') {\n gaugeMode = BarGaugeDisplayMode.Gradient;\n } else if (displayMode === 'lcd-gauge') {\n gaugeMode = BarGaugeDisplayMode.Lcd;\n }\n\n return {\n type: TableCellDisplayMode.Gauge,\n mode: gaugeMode,\n };\n // Also true in the case of the color background\n case 'color-background':\n case 'color-background-solid':\n let mode = TableCellBackgroundDisplayMode.Basic;\n\n // Set the new mode field, somewhat confusingly the\n // color-background mode is for gradient display\n if (displayMode === 'color-background') {\n mode = TableCellBackgroundDisplayMode.Gradient;\n }\n\n return {\n type: TableCellDisplayMode.ColorBackground,\n mode: mode,\n };\n default:\n return {\n // @ts-ignore\n type: displayMode,\n };\n }\n}\n\n/**\n * This recurses through an array of `filterFields` (Array<{ id: string; field?: Field } | undefined>)\n * and adds back the missing indecies that are removed due to hiding a column through an panel override.\n * This is necessary to create Array.length parity between the `filterFields` array and the `values` array (any[number]),\n * since the footer value calculations are based on the corresponding index values of both arrays.\n *\n * @remarks\n * This function uses the splice() method, and therefore mutates the array.\n *\n * @param columns - An array of `filterFields` (Array<{ id: string; field?: Field } | undefined>).\n * @returns void; this function returns nothing; it only mutates values as a side effect.\n */\nfunction addMissingColumnIndex(columns: Array<{ id: string; field?: Field } | undefined>): void {\n const missingIndex = columns.findIndex((field, index) => field?.id !== String(index));\n\n // Base case\n if (missingIndex === -1 || columns[missingIndex]?.id === 'expander') {\n return;\n }\n\n // Splice in missing column\n columns.splice(missingIndex, 0, { id: String(missingIndex) });\n\n // Recurse\n addMissingColumnIndex(columns);\n}\n\n/**\n * Getting gauge or sparkline values to align is very tricky without looking at all values and passing them through display processor.\n * For very large tables that could pretty expensive. So this is kind of a compromise. We look at the first 1000 rows and cache the longest value.\n * If we have a cached value we just check if the current value is longer and update the alignmentFactor. This can obviously still lead to\n * unaligned gauges but it should a lot less common.\n **/\nexport function getAlignmentFactor(\n field: Field,\n displayValue: DisplayValue,\n rowIndex: number\n): DisplayValueAlignmentFactors {\n let alignmentFactor = field.state?.alignmentFactors;\n\n if (alignmentFactor) {\n // check if current alignmentFactor is still the longest\n if (formattedValueToString(alignmentFactor).length < formattedValueToString(displayValue).length) {\n alignmentFactor = { ...displayValue };\n field.state!.alignmentFactors = alignmentFactor;\n }\n return alignmentFactor;\n } else {\n // look at the next 1000 rows\n alignmentFactor = { ...displayValue };\n const maxIndex = Math.min(field.values.length, rowIndex + 1000);\n\n for (let i = rowIndex + 1; i < maxIndex; i++) {\n const nextDisplayValue = field.display!(field.values[i]);\n if (formattedValueToString(alignmentFactor).length > formattedValueToString(nextDisplayValue).length) {\n alignmentFactor.text = displayValue.text;\n }\n }\n\n if (field.state) {\n field.state.alignmentFactors = alignmentFactor;\n } else {\n field.state = { alignmentFactors: alignmentFactor };\n }\n\n return alignmentFactor;\n }\n}\n\n// since the conversion from timeseries panel crosshair to time is pixel based, we need\n// to set a threshold where the table row highlights when the crosshair is hovered over a certain point\n// because multiple pixels (converted to times) may represent the same point/row in table\nexport function isPointTimeValAroundTableTimeVal(pointTime: number, rowTime: number, threshold: number) {\n return Math.abs(Math.floor(pointTime) - rowTime) < threshold;\n}\n\n// calculate the threshold for which we consider a point in a chart\n// to match a row in a table based on a time value\nexport function calculateAroundPointThreshold(timeField: Field): number {\n let max = -Number.MAX_VALUE;\n let min = Number.MAX_VALUE;\n\n if (timeField.values.length < 2) {\n return 0;\n }\n\n for (let i = 0; i < timeField.values.length; i++) {\n const value = timeField.values[i];\n if (value > max) {\n max = value;\n }\n if (value < min) {\n min = value;\n }\n }\n\n return (max - min) / timeField.values.length;\n}\n\n/**\n * Retrieve colors for a table cell (or table row).\n *\n * @param tableStyles\n * Styles for the table\n * @param cellOptions\n * Table cell configuration options\n * @param displayValue\n * The value that will be displayed\n * @returns CellColors\n */\nexport function getCellColors(\n theme: GrafanaTheme2,\n cellOptions: TableCellOptions,\n displayValue: DisplayValue\n): CellColors {\n // How much to darken elements depends upon if we're in dark mode\n const darkeningFactor = theme.isDark ? 1 : -0.7;\n\n // Setup color variables\n let textColor: string | undefined = undefined;\n let bgColor: string | undefined = undefined;\n let bgHoverColor: string | undefined = undefined;\n\n if (cellOptions.type === TableCellDisplayMode.ColorText) {\n textColor = displayValue.color;\n } else if (cellOptions.type === TableCellDisplayMode.ColorBackground) {\n const mode = cellOptions.mode ?? TableCellBackgroundDisplayMode.Gradient;\n\n if (mode === TableCellBackgroundDisplayMode.Basic) {\n textColor = getTextColorForAlphaBackground(displayValue.color!, theme.isDark);\n bgColor = tinycolor(displayValue.color).toRgbString();\n bgHoverColor = tinycolor(displayValue.color).setAlpha(1).toRgbString();\n } else if (mode === TableCellBackgroundDisplayMode.Gradient) {\n const hoverColor = tinycolor(displayValue.color).setAlpha(1).toRgbString();\n const bgColor2 = tinycolor(displayValue.color)\n .darken(10 * darkeningFactor)\n .spin(5);\n textColor = getTextColorForAlphaBackground(displayValue.color!, theme.isDark);\n bgColor = `linear-gradient(120deg, ${bgColor2.toRgbString()}, ${displayValue.color})`;\n bgHoverColor = `linear-gradient(120deg, ${bgColor2.setAlpha(1).toRgbString()}, ${hoverColor})`;\n }\n }\n\n return { textColor, bgColor, bgHoverColor };\n}\n\n/**\n * Calculate an estimated bounding box for a block\n * of text using an offscreen canvas.\n */\nexport function guessTextBoundingBox(\n text: string,\n headerGroup: HeaderGroup,\n osContext: OffscreenCanvasRenderingContext2D | null,\n lineHeight: number,\n defaultRowHeight: number,\n padding = 0\n) {\n const width = Number(headerGroup?.width ?? 300);\n const LINE_SCALE_FACTOR = 1.17;\n const LOW_LINE_PAD = 42;\n const PADDING = padding * 2;\n\n if (osContext !== null && typeof text === 'string') {\n const words = text.split(/\\s/);\n const lines = [];\n let currentLine = '';\n let wordCount = 0;\n let extraLines = 0;\n\n // Let's just wrap the lines and see how well the measurement works\n for (let i = 0; i < words.length; i++) {\n const currentWord = words[i];\n let lineWidth = osContext.measureText(currentLine + ' ' + currentWord).width;\n\n if (lineWidth < width - PADDING) {\n currentLine += ' ' + currentWord;\n wordCount++;\n } else {\n lines.push({\n width: lineWidth,\n line: currentLine,\n });\n\n currentLine = currentWord;\n wordCount = 0;\n }\n }\n\n // We can have extra long strings, for these\n // we estimate if it overshoots the line by\n // at least one other line\n for (let i = 0; i < lines.length; i++) {\n if (lines[i].width > width) {\n let extra = Math.floor(lines[i].width / width) - 1;\n extraLines += extra;\n }\n }\n\n // Estimated height would be lines multiplied\n // by the line height\n let lineNumber = lines.length + extraLines;\n let height = 38;\n if (lineNumber > 5) {\n height = lineNumber * lineHeight * LINE_SCALE_FACTOR;\n } else {\n height = lineNumber * lineHeight + LOW_LINE_PAD;\n }\n height += PADDING;\n\n return { width, height };\n }\n\n return { width, height: defaultRowHeight };\n}\n\n/**\n * A function to guess at which field has the longest text.\n * To do this we either select a single record if there aren't many records\n * or we select records at random and sample their size.\n */\nexport function guessLongestField(fieldConfig: FieldConfigSource, data: DataFrame) {\n let longestField = undefined;\n const SAMPLE_SIZE = 3;\n\n // If the default field option is set to allow text wrapping\n // we determine the field to wrap text with here and then\n // pass it to the RowsList\n if (fieldConfig.defaults.custom?.cellOptions?.wrapText) {\n const stringFields = data.fields.filter((field: Field) => field.type === FieldType.string);\n\n if (stringFields.length >= 1 && stringFields[0].values.length > 0) {\n const numValues = stringFields[0].values.length;\n let longestLength = 0;\n\n // If we have less than 30 values we assume that the first\n // non-null record is representative of the overall data\n if (numValues <= 30) {\n for (const field of stringFields) {\n const fieldLength = field.values.find((v) => v != null)?.length ?? 0;\n if (fieldLength > longestLength) {\n longestLength = fieldLength;\n longestField = field;\n }\n }\n }\n // Otherwise we randomly sample SAMPLE_SIZE values and take\n // the mean length\n else {\n for (const field of stringFields) {\n // This could result in duplicate values but\n // that should be fairly unlikely. This could potentially\n // be improved using a Set datastructure but\n // going to leave that one as an exercise for\n // the reader to contemplate and possibly code\n const vals = sampleSize(field.values, SAMPLE_SIZE);\n const meanLength = (vals[0]?.length + vals[1]?.length + vals[2]?.length) / 3;\n\n if (meanLength > longestLength) {\n longestLength = meanLength;\n longestField = field;\n }\n }\n }\n }\n }\n\n return longestField;\n}\n\nexport interface DataLinksActionsTooltipState {\n coords: DataLinksActionsTooltipCoords;\n links?: LinkModel[];\n actions?: ActionModel[];\n}\n\nexport interface DataLinksActionsTooltipCoords {\n clientX: number;\n clientY: number;\n}\n\nexport const getDataLinksActionsTooltipUtils = (links: LinkModel[], actions?: ActionModel[]) => {\n const hasMultipleLinksOrActions = links.length > 1 || Boolean(actions?.length);\n const shouldShowLink = links.length === 1 && !Boolean(actions?.length);\n\n return { shouldShowLink, hasMultipleLinksOrActions };\n};\n\nconst shouldTriggerTooltip = (event: React.MouseEvent): boolean => {\n return event.target === event.currentTarget;\n};\n\n/**\n * Creates an onClick handler for table cells that only triggers tooltip when clicking directly on the cell\n * @param setTooltipCoords - function to set tooltip coordinates\n * @returns onClick handler\n */\nexport const tooltipOnClickHandler = (setTooltipCoords: (coords: DataLinksActionsTooltipCoords) => void) => {\n return (event: React.MouseEvent) => {\n if (shouldTriggerTooltip(event)) {\n const { clientX, clientY } = event;\n setTooltipCoords({ clientX, clientY });\n }\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { useCallback, useMemo } from 'react';\nimport * as React from 'react';\nimport { FixedSizeList as List, ListChildComponentProps } from 'react-window';\n\nimport { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { ButtonSelect } from '../../Dropdown/ButtonSelect';\nimport { FilterInput } from '../../FilterInput/FilterInput';\nimport { Checkbox } from '../../Forms/Checkbox';\nimport { Label } from '../../Forms/Label';\nimport { Stack } from '../../Layout/Stack/Stack';\n\ninterface Props {\n values: SelectableValue[];\n options: SelectableValue[];\n onChange: (options: SelectableValue[]) => void;\n caseSensitive?: boolean;\n showOperators?: boolean;\n searchFilter: string;\n setSearchFilter: (value: string) => void;\n operator: SelectableValue;\n setOperator: (item: SelectableValue) => void;\n}\n\nconst ITEM_HEIGHT = 28;\nconst MIN_HEIGHT = ITEM_HEIGHT * 5;\n\nconst operatorSelectableValues: { [key: string]: SelectableValue } = {\n Contains: { label: 'Contains', value: 'Contains', description: 'Contains' },\n '=': { label: '=', value: '=', description: 'Equals' },\n '!=': { label: '!=', value: '!=', description: 'Not equals' },\n '>': { label: '>', value: '>', description: 'Greater' },\n '>=': { label: '>=', value: '>=', description: 'Greater or Equal' },\n '<': { label: '<', value: '<', description: 'Less' },\n '<=': { label: '<=', value: '<=', description: 'Less or Equal' },\n Expression: {\n label: 'Expression',\n value: 'Expression',\n description: 'Bool Expression (Char $ represents the column value in the expression, e.g. \"$ >= 10 && $ <= 12\")',\n },\n};\nconst OPERATORS = Object.values(operatorSelectableValues);\nexport const REGEX_OPERATOR = operatorSelectableValues['Contains'];\nconst XPR_OPERATOR = operatorSelectableValues['Expression'];\n\nconst comparableValue = (value: string): string | number | Date | boolean => {\n value = value.trim().replace(/\\\\/g, '');\n\n // Does it look like a Date (Starting with pattern YYYY-MM-DD* or YYYY/MM/DD*)?\n if (/^(\\d{4}-\\d{2}-\\d{2}|\\d{4}\\/\\d{2}\\/\\d{2})/.test(value)) {\n const date = new Date(value);\n if (!isNaN(date.getTime())) {\n const fmt = getValueFormat('dateTimeAsIso');\n return formattedValueToString(fmt(date.getTime()));\n }\n }\n // Does it look like a Number?\n const num = parseFloat(value);\n if (!isNaN(num)) {\n return num;\n }\n // Does it look like a Bool?\n const lvalue = value.toLowerCase();\n if (lvalue === 'true' || lvalue === 'false') {\n return lvalue === 'true';\n }\n // Anything else\n return value;\n};\n\nexport const FilterList = ({\n options,\n values,\n caseSensitive,\n showOperators,\n onChange,\n searchFilter,\n setSearchFilter,\n operator,\n setOperator,\n}: Props) => {\n const regex = useMemo(() => new RegExp(searchFilter, caseSensitive ? undefined : 'i'), [searchFilter, caseSensitive]);\n const items = useMemo(\n () =>\n options.filter((option) => {\n if (!showOperators || !searchFilter || operator.value === REGEX_OPERATOR.value) {\n if (option.label === undefined) {\n return false;\n }\n return regex.test(option.label);\n } else if (operator.value === XPR_OPERATOR.value) {\n if (option.value === undefined) {\n return false;\n }\n try {\n const xpr = searchFilter.replace(/\\\\/g, '');\n const fnc = new Function('$', `'use strict'; return ${xpr};`);\n const val = comparableValue(option.value);\n return fnc(val);\n } catch (_) {}\n return false;\n } else {\n if (option.value === undefined) {\n return false;\n }\n\n const value1 = comparableValue(option.value);\n const value2 = comparableValue(searchFilter);\n\n switch (operator.value) {\n case '=':\n return value1 === value2;\n case '!=':\n return value1 !== value2;\n case '>':\n return value1 > value2;\n case '>=':\n return value1 >= value2;\n case '<':\n return value1 < value2;\n case '<=':\n return value1 <= value2;\n }\n return false;\n }\n }),\n [options, regex, showOperators, operator, searchFilter]\n );\n const selectedItems = useMemo(() => items.filter((item) => values.includes(item)), [items, values]);\n\n const selectCheckValue = useMemo(() => items.length === selectedItems.length, [items, selectedItems]);\n const selectCheckIndeterminate = useMemo(\n () => selectedItems.length > 0 && items.length > selectedItems.length,\n [items, selectedItems]\n );\n const selectCheckLabel = useMemo(\n () => (selectedItems.length ? `${selectedItems.length} selected` : `Select all`),\n [selectedItems]\n );\n const selectCheckDescription = useMemo(\n () =>\n items.length !== selectedItems.length\n ? 'Add all displayed values to the filter'\n : 'Remove all displayed values from the filter',\n [items, selectedItems]\n );\n\n const styles = useStyles2(getStyles);\n const theme = useTheme2();\n const gutter = theme.spacing.gridSize;\n const height = useMemo(() => Math.min(items.length * ITEM_HEIGHT, MIN_HEIGHT) + gutter, [gutter, items.length]);\n\n const onCheckedChanged = useCallback(\n (option: SelectableValue) => (event: React.FormEvent) => {\n const newValues = event.currentTarget.checked\n ? values.concat(option)\n : values.filter((c) => c.value !== option.value);\n\n onChange(newValues);\n },\n [onChange, values]\n );\n\n const onSelectChanged = useCallback(() => {\n if (items.length === selectedItems.length) {\n const newValues = values.filter((item) => !items.includes(item));\n onChange(newValues);\n } else {\n const newValues = [...new Set([...values, ...items])];\n onChange(newValues);\n }\n }, [onChange, values, items, selectedItems]);\n\n return (\n \n {!showOperators && (\n \n )}\n {showOperators && (\n \n \n \n \n )}\n {items.length > 0 ? (\n <>\n \n {ItemRenderer}\n \n \n
    \n
    \n \n
    \n \n \n ) : (\n \n )}\n \n );\n};\n\ninterface ItemRendererProps extends ListChildComponentProps {\n data: {\n onCheckedChanged: (option: SelectableValue) => (event: React.FormEvent) => void;\n items: SelectableValue[];\n values: SelectableValue[];\n className: string;\n };\n}\n\nfunction ItemRenderer({ index, style, data: { onCheckedChanged, items, values, className } }: ItemRendererProps) {\n const option = items[index];\n const { value, label } = option;\n const isChecked = values.find((s) => s.value === value) !== undefined;\n\n return (\n
    \n \n
    \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n filterList: css({\n label: 'filterList',\n }),\n filterListRow: css({\n label: 'filterListRow',\n cursor: 'pointer',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n padding: theme.spacing(0.5),\n\n ':hover': {\n backgroundColor: theme.colors.action.hover,\n },\n }),\n selectDivider: css({\n label: 'selectDivider',\n width: '100%',\n borderTop: `1px solid ${theme.colors.border.medium}`,\n padding: theme.spacing(0.5, 2),\n }),\n noValuesLabel: css({\n paddingTop: theme.spacing(1),\n }),\n});\n","import { css, cx } from '@emotion/css';\nimport { useCallback, useMemo, useState } from 'react';\nimport * as React from 'react';\n\nimport { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { Button } from '../../Button/Button';\nimport { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';\nimport { Label } from '../../Forms/Label';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Stack } from '../../Layout/Stack/Stack';\nimport { calculateUniqueFieldValues, getFilteredOptions, valuesToOptions } from '../utils';\n\nimport { FilterList } from './FilterList';\nimport { TableStyles } from './styles';\n\ninterface Props {\n column: any;\n tableStyles: TableStyles;\n onClose: () => void;\n field?: Field;\n searchFilter: string;\n setSearchFilter: (value: string) => void;\n operator: SelectableValue;\n setOperator: (item: SelectableValue) => void;\n}\n\nexport const FilterPopup = ({\n column: { preFilteredRows, filterValue, setFilter },\n onClose,\n field,\n searchFilter,\n setSearchFilter,\n operator,\n setOperator,\n}: Props) => {\n const theme = useTheme2();\n const uniqueValues = useMemo(() => calculateUniqueFieldValues(preFilteredRows, field), [preFilteredRows, field]);\n const options = useMemo(() => valuesToOptions(uniqueValues), [uniqueValues]);\n const filteredOptions = useMemo(() => getFilteredOptions(options, filterValue), [options, filterValue]);\n const [values, setValues] = useState(filteredOptions);\n const [matchCase, setMatchCase] = useState(false);\n\n const onCancel = useCallback((event?: React.MouseEvent) => onClose(), [onClose]);\n\n const onFilter = useCallback(\n (event: React.MouseEvent) => {\n const filtered = values.length ? values : undefined;\n\n setFilter(filtered);\n onClose();\n },\n [setFilter, values, onClose]\n );\n\n const onClearFilter = useCallback(\n (event: React.MouseEvent) => {\n setFilter(undefined);\n onClose();\n },\n [setFilter, onClose]\n );\n\n const clearFilterVisible = useMemo(() => filterValue !== undefined, [filterValue]);\n const styles = useStyles2(getStyles);\n\n return (\n \n {/* This is just blocking click events from bubbeling and should not have a keyboard interaction. */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n
    \n \n \n \n \n {\n setMatchCase((s) => !s);\n }}\n />\n \n
    \n \n \n \n \n \n \n \n {clearFilterVisible && (\n \n \n \n )}\n \n \n
    \n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n filterContainer: css({\n label: 'filterContainer',\n width: '100%',\n minWidth: '250px',\n height: '100%',\n maxHeight: '400px',\n backgroundColor: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(2),\n boxShadow: theme.shadows.z3,\n borderRadius: theme.shape.radius.default,\n }),\n listDivider: css({\n label: 'listDivider',\n width: '100%',\n borderTop: `1px solid ${theme.colors.border.medium}`,\n padding: theme.spacing(0.5, 2),\n }),\n label: css({\n marginBottom: 0,\n }),\n});\n\nconst stopPropagation = (event: React.MouseEvent) => {\n event.stopPropagation();\n};\n","import { css, cx } from '@emotion/css';\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\nimport { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';\n\nimport { Popover } from '../../../components/Tooltip/Popover';\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Icon } from '../../Icon/Icon';\n\nimport { REGEX_OPERATOR } from './FilterList';\nimport { FilterPopup } from './FilterPopup';\nimport { TableStyles } from './styles';\n\ninterface Props {\n column: any;\n tableStyles: TableStyles;\n field?: Field;\n}\n\nexport const Filter = ({ column, field, tableStyles }: Props) => {\n const ref = useRef(null);\n const [isPopoverVisible, setPopoverVisible] = useState(false);\n const styles = useStyles2(getStyles);\n const filterEnabled = useMemo(() => Boolean(column.filterValue), [column.filterValue]);\n const onShowPopover = useCallback(() => setPopoverVisible(true), [setPopoverVisible]);\n const onClosePopover = useCallback(() => setPopoverVisible(false), [setPopoverVisible]);\n const [searchFilter, setSearchFilter] = useState('');\n const [operator, setOperator] = useState>(REGEX_OPERATOR);\n\n if (!field || !field.config.custom?.filterable) {\n return null;\n }\n return (\n \n \n {isPopoverVisible && ref.current && (\n \n }\n placement=\"bottom-start\"\n referenceElement={ref.current}\n show\n />\n )}\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n filterIconEnabled: css({\n label: 'filterIconEnabled',\n color: theme.colors.primary.text,\n }),\n filterIconDisabled: css({\n label: 'filterIconDisabled',\n color: theme.colors.text.disabled,\n }),\n});\n","import { HeaderGroup, Column } from 'react-table';\n\nimport { Field } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { getFieldTypeIcon } from '../../../types/icon';\nimport { Icon } from '../../Icon/Icon';\nimport { TableFieldOptions } from '../types';\n\nimport { Filter } from './Filter';\nimport { TableStyles } from './styles';\n\nexport interface HeaderRowProps {\n headerGroups: HeaderGroup[];\n showTypeIcons?: boolean;\n tableStyles: TableStyles;\n}\n\nexport const HeaderRow = (props: HeaderRowProps) => {\n const { headerGroups, showTypeIcons, tableStyles } = props;\n const e2eSelectorsTable = selectors.components.Panels.Visualization.Table;\n\n return (\n
    \n {headerGroups.map((headerGroup: HeaderGroup) => {\n const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps();\n return (\n \n {headerGroup.headers.map((column: Column, index: number) =>\n renderHeaderCell(column, tableStyles, showTypeIcons)\n )}\n
    \n );\n })}\n
    \n );\n};\n\nfunction renderHeaderCell(column: any, tableStyles: TableStyles, showTypeIcons?: boolean) {\n const { key, ...headerProps } = column.getHeaderProps();\n const field: Field = column.field ?? null;\n const tableFieldOptions: TableFieldOptions | undefined = field?.config.custom;\n\n if (column.canResize) {\n headerProps.style.userSelect = column.isResizing ? 'none' : 'auto'; // disables selecting text while resizing\n }\n\n headerProps.style.position = 'absolute';\n headerProps.style.justifyContent = column.justifyContent;\n headerProps.style.left = column.totalLeft;\n\n let headerContent = column.render('Header');\n\n let sortHeaderContent = column.canSort && (\n <>\n \n {column.canFilter && }\n \n );\n if (sortHeaderContent && tableFieldOptions?.headerComponent) {\n sortHeaderContent = ;\n } else if (tableFieldOptions?.headerComponent) {\n headerContent = ;\n }\n\n return (\n
    \n {column.canSort && sortHeaderContent}\n {!column.canSort && headerContent}\n {!column.canSort && column.canFilter && }\n {column.canResize &&
    }\n
    \n );\n}\n","import { css, cx, keyframes } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\n/**\n * @internal\n */\nexport type LoadingIndicatorProps = {\n loading: boolean;\n onCancel: () => void;\n};\n\n/**\n * @internal\n */\nexport const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) => {\n const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n const styles = useStyles2(getStyles);\n\n if (!loading) {\n return null;\n }\n\n return (\n \n \n \n );\n};\n\nconst spin = keyframes({\n '0%': {\n transform: 'rotate(0deg) scaleX(-1)', // scaleX flips the `sync` icon so arrows point the correct way\n },\n '100%': {\n transform: 'rotate(359deg) scaleX(-1)',\n },\n});\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n clickable: css({\n cursor: 'pointer',\n }),\n spin: css({\n [theme.transitions.handleMotion('no-preference')]: {\n animation: `${spin} 3s linear infinite`,\n },\n }),\n };\n};\n","import { useEffect, useState } from 'react';\nimport * as React from 'react';\n\ninterface Props {\n children: React.ReactNode;\n delay: number;\n}\n\n/**\n * Delay the rendering of the children by N amount of milliseconds\n */\nexport function DelayRender({ children, delay }: Props) {\n const [shouldRender, setShouldRender] = useState(false);\n useEffect(() => {\n window.setTimeout(() => {\n setShouldRender(true);\n }, delay);\n }, [children, delay]);\n\n return <>{shouldRender ? children : null};\n}\n","import React, { useCallback, useMemo } from 'react';\n\ninterface Point {\n x: number;\n y: number;\n}\ntype PointerOrMouseEvent = React.PointerEvent | React.MouseEvent | PointerEvent | MouseEvent;\ntype PointerDistanceSet = (evt: PointerOrMouseEvent) => void;\ntype PointerDistanceCheck = (evt: PointerOrMouseEvent, distance?: number) => boolean;\n\ninterface PointerDistance {\n set: PointerDistanceSet;\n check: PointerDistanceCheck;\n}\n\nexport function createPointerDistance(distance = 10): PointerDistance {\n let initial = { x: 0, y: 0 };\n\n const set: PointerDistanceSet = (evt) => {\n initial = getPoint(evt);\n };\n\n const check: PointerDistanceCheck = (evt, overrideDistance = distance) =>\n checkDistance(initial, getPoint(evt), overrideDistance);\n\n return { set, check };\n}\n\nexport function usePointerDistance(distance = 10): PointerDistance {\n const initial = React.useRef({ x: 0, y: 0 });\n\n const set = useCallback((evt) => {\n initial.current = getPoint(evt);\n }, []);\n\n const check = useCallback(\n (evt, overrideDistance = distance) => checkDistance(initial.current, getPoint(evt), overrideDistance),\n [distance]\n );\n\n return useMemo(() => ({ set, check }), [set, check]);\n}\n\nfunction getPoint(evt: PointerOrMouseEvent): Point {\n return { x: evt.clientX, y: evt.clientY };\n}\n\nfunction checkDistance(point1: Point, point2: Point, distance: number): boolean {\n return Math.hypot(point1.x - point2.x, point1.y - point2.y) > distance;\n}\n","import React, { createContext, useCallback, useContext } from 'react';\n\nexport interface ElementSelectionOnSelectOptions {\n /** If specified, this will ignore the shift key press */\n multi?: boolean;\n\n /** If true, this will make sure the element is selected */\n force?: boolean;\n}\n\n/** @alpha */\nexport interface ElementSelectionContextState {\n /**\n * Turn on selection mode & show selection state\n */\n enabled?: boolean;\n /** List of currently selected elements */\n selected: ElementSelectionContextItem[];\n onSelect: (item: ElementSelectionContextItem, options: ElementSelectionOnSelectOptions) => void;\n onClear: () => void;\n}\n\nexport interface ElementSelectionContextItem {\n id: string;\n}\n\nexport const ElementSelectionContext = createContext(undefined);\n\nexport interface UseElementSelectionResult {\n isSelected?: boolean;\n isSelectable?: boolean;\n onSelect?: (evt: React.MouseEvent, options?: ElementSelectionOnSelectOptions) => void;\n onClear?: () => void;\n}\n\nexport function useElementSelection(id: string | undefined): UseElementSelectionResult {\n if (!id) {\n return {};\n }\n\n const context = useContext(ElementSelectionContext);\n if (!context) {\n return {};\n }\n\n const isSelected = context.selected.some((item) => item.id === id);\n const onSelect = useCallback(\n (evt: React.MouseEvent, options: ElementSelectionOnSelectOptions = {}) => {\n if (!context.enabled) {\n return;\n }\n\n // To prevent this click form clearing the selection\n evt.stopPropagation();\n\n // Prevent text selection caused by shift click\n if (evt.shiftKey) {\n evt.preventDefault();\n window.getSelection()?.empty();\n }\n\n context.onSelect({ id }, { ...options, multi: options.multi ?? evt.shiftKey });\n },\n [context, id]\n );\n\n const onClear = useCallback(() => {\n if (!context.enabled) {\n return;\n }\n\n context.onClear();\n }, [context]);\n\n return { isSelected, onSelect, onClear, isSelectable: context.enabled };\n}\n","import { css } from '@emotion/css';\nimport {\n FloatingFocusManager,\n autoUpdate,\n flip,\n offset as floatingUIOffset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n} from '@floating-ui/react';\nimport { useCallback, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { renderOrCallToRender } from '../../utils/reactUtils';\nimport { getPlacement } from '../../utils/tooltipUtils';\nimport { Portal } from '../Portal/Portal';\nimport { TooltipPlacement } from '../Tooltip/types';\n\nexport interface Props {\n overlay: React.ReactElement | (() => React.ReactElement);\n placement?: TooltipPlacement;\n children: React.ReactElement;\n /** Amount in pixels to nudge the dropdown vertically and horizontally, respectively. */\n offset?: [number, number];\n onVisibleChange?: (state: boolean) => void;\n}\n\nexport const Dropdown = React.memo(({ children, overlay, placement, offset, onVisibleChange }: Props) => {\n const [show, setShow] = useState(false);\n const transitionRef = useRef(null);\n\n const handleOpenChange = useCallback(\n (newState: boolean) => {\n setShow(newState);\n onVisibleChange?.(newState);\n },\n [onVisibleChange]\n );\n\n // the order of middleware is important!\n const middleware = [\n floatingUIOffset({\n mainAxis: offset?.[0] ?? 8,\n crossAxis: offset?.[1] ?? 0,\n }),\n flip({\n fallbackAxisSideDirection: 'end',\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n ];\n\n const { context, refs, floatingStyles } = useFloating({\n open: show,\n placement: getPlacement(placement),\n onOpenChange: handleOpenChange,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);\n\n const animationDuration = 150;\n const animationStyles = useStyles2(getStyles, animationDuration);\n\n const onOverlayClicked = () => {\n handleOpenChange(false);\n };\n\n const handleKeys = (event: React.KeyboardEvent) => {\n if (event.key === 'Tab') {\n handleOpenChange(false);\n }\n };\n\n return (\n <>\n {React.cloneElement(children, {\n ref: refs.setReference,\n ...getReferenceProps(),\n })}\n {show && (\n \n \n {/*\n this is handling bubbled events from the inner overlay\n see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events\n */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n
    \n \n
    {renderOrCallToRender(overlay, { ...getFloatingProps() })}
    \n \n
    \n     \n     \n )}\n \n );\n});\n\nDropdown.displayName = 'Dropdown';\n\nconst getStyles = (theme: GrafanaTheme2, duration: number) => {\n return {\n appear: css({\n opacity: '0',\n position: 'relative',\n transformOrigin: 'top',\n [theme.transitions.handleMotion('no-preference')]: {\n transform: 'scaleY(0.5)',\n },\n }),\n appearActive: css({\n opacity: '1',\n [theme.transitions.handleMotion('no-preference')]: {\n transform: 'scaleY(1)',\n transition: `transform ${duration}ms cubic-bezier(0.2, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.2, 0, 0.2, 1)`,\n },\n }),\n };\n};\n","import { cx } from '@emotion/css';\nimport { ReactElement, useCallback } from 'react';\n\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { Dropdown } from '../Dropdown/Dropdown';\nimport { ToolbarButton } from '../ToolbarButton/ToolbarButton';\nimport { TooltipPlacement } from '../Tooltip/types';\n\ninterface PanelMenuProps {\n menu: ReactElement | (() => ReactElement);\n menuButtonClass?: string;\n dragClassCancel?: string;\n title?: string;\n placement?: TooltipPlacement;\n offset?: [number, number];\n onOpenMenu?: () => void;\n}\n\nexport function PanelMenu({\n menu,\n title,\n placement = 'bottom',\n offset,\n dragClassCancel,\n menuButtonClass,\n onOpenMenu,\n}: PanelMenuProps) {\n const testId = title ? selectors.components.Panels.Panel.menu(title) : `panel-menu-button`;\n\n const handleVisibility = useCallback(\n (show: boolean) => {\n if (show && onOpenMenu) {\n onOpenMenu();\n }\n },\n [onOpenMenu]\n );\n\n return (\n \n \n \n );\n}\n","import { css, cx } from '@emotion/css';\nimport { ReactElement, useCallback, useRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors as e2eSelectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nimport { PanelMenu } from './PanelMenu';\n\ninterface Props {\n children?: React.ReactNode;\n menu?: ReactElement | (() => ReactElement);\n title?: string;\n offset?: number;\n dragClass?: string;\n onOpenMenu?: () => void;\n}\n\nexport function HoverWidget({ menu, title, dragClass, children, offset = -32, onOpenMenu }: Props) {\n const styles = useStyles2(getStyles);\n const draggableRef = useRef(null);\n const selectors = e2eSelectors.components.Panels.Panel.HoverWidget;\n // Capture the pointer to keep the widget visible while dragging\n const onPointerDown = useCallback((e: React.PointerEvent) => {\n draggableRef.current?.setPointerCapture(e.pointerId);\n }, []);\n\n const onPointerUp = useCallback((e: React.PointerEvent) => {\n draggableRef.current?.releasePointerCapture(e.pointerId);\n }, []);\n\n if (children === undefined || React.Children.count(children) === 0) {\n return null;\n }\n\n return (\n
    \n {dragClass && (\n \n \n
    \n )}\n {children}\n {menu && (\n \n )}\n
    \n );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n container: css({\n label: 'hover-container-widget',\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: `all .1s linear`,\n },\n display: 'flex',\n position: 'absolute',\n zIndex: 1,\n right: 0,\n boxSizing: 'content-box',\n alignItems: 'center',\n background: theme.colors.background.secondary,\n color: theme.colors.text.primary,\n border: `1px solid ${theme.colors.border.weak}`,\n borderRadius: theme.shape.radius.default,\n height: theme.spacing(4),\n boxShadow: theme.shadows.z1,\n }),\n square: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: theme.spacing(4),\n height: '100%',\n }),\n draggable: css({\n cursor: 'move',\n // mobile do not support draggable panels\n [theme.breakpoints.down('md')]: {\n display: 'none',\n },\n }),\n menuButton: css({\n // Background and border are overriden when topnav toggle is disabled\n background: 'inherit',\n border: 'none',\n '&:hover': {\n background: theme.colors.secondary.main,\n },\n }),\n draggableIcon: css({\n transform: 'rotate(45deg)',\n color: theme.colors.text.secondary,\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n };\n}\n","import { cx, css } from '@emotion/css';\nimport { forwardRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, LinkModel, LinkTarget } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { Button } from '../Button/Button';\n\ntype TitleItemProps = {\n className?: string;\n children: React.ReactNode;\n onClick?: LinkModel['onClick'];\n href?: string;\n target?: LinkTarget;\n title?: string;\n};\n\ntype TitleItemElement = HTMLAnchorElement & HTMLButtonElement;\n\nexport const TitleItem = forwardRef(\n ({ className, children, href, onClick, target, title, ...rest }, ref) => {\n const styles = useStyles2(getStyles);\n\n if (href) {\n return (\n \n {children}\n \n );\n } else if (onClick) {\n return (\n \n );\n } else {\n return (\n \n {children}\n \n );\n }\n }\n);\n\nTitleItem.displayName = 'TitleItem';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const item = css({\n color: `${theme.colors.text.secondary}`,\n label: 'panel-header-item',\n cursor: 'auto',\n border: 'none',\n borderRadius: `${theme.shape.radius.default}`,\n padding: `${theme.spacing(0, 1)}`,\n height: `${theme.spacing(theme.components.panel.headerHeight)}`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n '&:focus, &:focus-visible': {\n ...getFocusStyles(theme),\n zIndex: 1,\n },\n '&: focus:not(:focus-visible)': getMouseFocusStyles(theme),\n\n '&:hover ': {\n boxShadow: `${theme.shadows.z1}`,\n background: `${theme.colors.background.secondary}`,\n color: `${theme.colors.text.primary}`,\n },\n });\n\n return {\n item,\n linkItem: cx(item, css({ cursor: 'pointer' })),\n };\n};\n","import { css, cx } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport { TitleItem } from './TitleItem';\n\ninterface Props {\n description: string | (() => string);\n className?: string;\n}\n\nexport function PanelDescription({ description, className }: Props) {\n const styles = useStyles2(getStyles);\n\n const getDescriptionContent = (): JSX.Element => {\n // description\n const panelDescription = typeof description === 'function' ? description() : description;\n\n return (\n
    \n
    \n
    \n );\n };\n\n return description !== '' ? (\n \n \n \n \n \n ) : null;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n description: css({\n code: {\n whiteSpace: 'normal',\n wordWrap: 'break-word',\n },\n\n 'pre > code': {\n display: 'block',\n },\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { ToolbarButton } from '../ToolbarButton/ToolbarButton';\n\nexport interface Props {\n message?: string;\n onClick?: (e: React.SyntheticEvent) => void;\n ariaLabel?: string;\n}\n\nexport function PanelStatus({ message, onClick, ariaLabel = 'status' }: Props) {\n const styles = useStyles2(getStyles);\n\n return (\n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const { headerHeight, padding } = theme.components.panel;\n\n return {\n buttonStyles: css({\n label: 'panel-header-state-button',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: theme.spacing(padding),\n width: theme.spacing(headerHeight),\n height: theme.spacing(headerHeight),\n borderRadius: theme.shape.radius.default,\n }),\n };\n};\n","import { css, cx } from '@emotion/css';\nimport { CSSProperties, ReactElement, ReactNode, useId, useState } from 'react';\nimport * as React from 'react';\nimport { useMeasure, useToggle } from 'react-use';\n\nimport { GrafanaTheme2, LoadingState } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { DelayRender } from '../../utils/DelayRender';\nimport { usePointerDistance } from '../../utils/usePointerDistance';\nimport { useElementSelection } from '../ElementSelectionContext/ElementSelectionContext';\nimport { Icon } from '../Icon/Icon';\nimport { LoadingBar } from '../LoadingBar/LoadingBar';\nimport { Text } from '../Text/Text';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport { HoverWidget } from './HoverWidget';\nimport { PanelDescription } from './PanelDescription';\nimport { PanelMenu } from './PanelMenu';\nimport { PanelStatus } from './PanelStatus';\nimport { TitleItem } from './TitleItem';\n\n/**\n * @internal\n */\nexport type PanelChromeProps = (AutoSize | FixedDimensions) & (Collapsible | HoverHeader);\n\ninterface BaseProps {\n padding?: PanelPadding;\n title?: string | React.ReactElement;\n description?: string | (() => string);\n titleItems?: ReactNode;\n menu?: ReactElement | (() => ReactElement);\n dragClass?: string;\n dragClassCancel?: string;\n onDragStart?: (e: React.PointerEvent) => void;\n selectionId?: string;\n /**\n * Use only to indicate loading or streaming data in the panel.\n * Any other values of loadingState are ignored.\n */\n loadingState?: LoadingState;\n /**\n * Used to display status message (used for panel errors currently)\n */\n statusMessage?: string;\n /**\n * Handle opening error details view (like inspect / error tab)\n */\n statusMessageOnClick?: (e: React.SyntheticEvent) => void;\n /**\n * @deprecated use `actions' instead\n **/\n leftItems?: ReactNode[];\n actions?: ReactNode;\n displayMode?: 'default' | 'transparent';\n onCancelQuery?: () => void;\n /**\n * callback when opening the panel menu\n */\n onOpenMenu?: () => void;\n /**\n * Used for setting panel attention\n */\n onFocus?: () => void;\n /**\n * Debounce the event handler, if possible\n */\n onMouseMove?: () => void;\n onMouseEnter?: () => void;\n /**\n * If true, the VizPanelMenu will always be visible in the panel header. Defaults to false.\n */\n showMenuAlways?: boolean;\n}\n\ninterface FixedDimensions extends BaseProps {\n width: number;\n height: number;\n children: (innerWidth: number, innerHeight: number) => ReactNode;\n}\n\ninterface AutoSize extends BaseProps {\n width?: never;\n height?: never;\n children: ReactNode;\n}\n\ninterface Collapsible {\n collapsible: boolean;\n collapsed?: boolean;\n /**\n * callback when collapsing or expanding the panel\n */\n onToggleCollapse?: (collapsed: boolean) => void;\n hoverHeader?: never;\n hoverHeaderOffset?: never;\n}\n\ninterface HoverHeader {\n collapsible?: never;\n collapsed?: never;\n showMenuAlways?: never;\n onToggleCollapse?: never;\n hoverHeader?: boolean;\n hoverHeaderOffset?: number;\n}\n\n/**\n * @internal\n */\nexport type PanelPadding = 'none' | 'md';\n\n/**\n * @internal\n */\nexport function PanelChrome({\n width,\n height,\n children,\n padding = 'md',\n title = '',\n description = '',\n displayMode = 'default',\n titleItems,\n menu,\n dragClass,\n dragClassCancel,\n hoverHeader = false,\n hoverHeaderOffset,\n loadingState,\n statusMessage,\n statusMessageOnClick,\n leftItems,\n actions,\n selectionId,\n onCancelQuery,\n onOpenMenu,\n collapsible = false,\n collapsed,\n onToggleCollapse,\n onFocus,\n onMouseMove,\n onMouseEnter,\n onDragStart,\n showMenuAlways = false,\n}: PanelChromeProps) {\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n const panelContentId = useId();\n const panelTitleId = useId().replace(/:/g, '_');\n const { isSelected, onSelect, isSelectable } = useElementSelection(selectionId);\n const pointerDistance = usePointerDistance();\n\n const hasHeader = !hoverHeader;\n\n const [isOpen, toggleOpen] = useToggle(true);\n\n // Highlight the full panel when hovering over header\n const [selectableHighlight, setSelectableHighlight] = useState(false);\n const onHeaderEnter = React.useCallback(() => setSelectableHighlight(true), []);\n const onHeaderLeave = React.useCallback(() => setSelectableHighlight(false), []);\n\n // if collapsed is not defined, then component is uncontrolled and state is managed internally\n if (collapsed === undefined) {\n collapsed = !isOpen;\n }\n\n // hover menu is only shown on hover when not on touch devices\n const showOnHoverClass = showMenuAlways ? 'always-show' : 'show-on-hover';\n const isPanelTransparent = displayMode === 'transparent';\n\n const headerHeight = getHeaderHeight(theme, hasHeader);\n const { contentStyle, innerWidth, innerHeight } = getContentStyle(\n padding,\n theme,\n headerHeight,\n collapsed,\n height,\n width\n );\n\n const headerStyles: CSSProperties = {\n height: headerHeight,\n cursor: dragClass ? 'move' : 'auto',\n };\n\n const containerStyles: CSSProperties = { width, height: collapsed ? undefined : height };\n const [ref, { width: loadingBarWidth }] = useMeasure();\n\n /** Old property name now maps to actions */\n if (leftItems) {\n actions = leftItems;\n }\n\n const testid = typeof title === 'string' ? selectors.components.Panels.Panel.title(title) : 'Panel';\n\n // Handle drag & selection events\n // Mainly the tricky bit of differentiating between dragging and selecting\n const onPointerUp = React.useCallback(\n (evt: React.PointerEvent) => {\n if (\n pointerDistance.check(evt) ||\n (dragClassCancel && evt.target instanceof Element && evt.target.closest(`.${dragClassCancel}`))\n ) {\n return;\n }\n\n // setTimeout is needed here because onSelect stops the event propagation\n // By doing so, the event won't get to the document and drag will never be stopped\n setTimeout(() => onSelect?.(evt));\n },\n [dragClassCancel, onSelect, pointerDistance]\n );\n\n const onPointerDown = React.useCallback(\n (evt: React.PointerEvent) => {\n evt.stopPropagation();\n\n pointerDistance.set(evt);\n\n onDragStart?.(evt);\n },\n [pointerDistance, onDragStart]\n );\n\n const onContentPointerDown = React.useCallback(\n (evt: React.PointerEvent) => {\n // Ignore clicks inside buttons, links, canvas and svg elments\n // This does prevent a clicks inside a graphs from selecting panel as there is normal div above the canvas element that intercepts the click\n if (evt.target instanceof Element && evt.target.closest('button,a,canvas,svg')) {\n return;\n }\n\n onSelect?.(evt);\n },\n [onSelect]\n );\n\n const headerContent = (\n <>\n {/* Non collapsible title */}\n {!collapsible && title && (\n
    \n \n {title}\n \n
    \n )}\n\n {/* Collapsible title */}\n {collapsible && (\n
    \n \n {\n toggleOpen();\n if (onToggleCollapse) {\n onToggleCollapse(!collapsed);\n }\n }}\n aria-expanded={!collapsed}\n aria-controls={!collapsed ? panelContentId : undefined}\n >\n \n \n {title}\n \n \n \n
    \n )}\n\n
    \n \n {titleItems}\n
    \n {loadingState === LoadingState.Streaming && (\n \n \n \n \n \n )}\n {loadingState === LoadingState.Loading && onCancelQuery && (\n \n \n \n \n \n \n \n )}\n
    \n {actions &&
    {itemsRenderer(actions, (item) => item)}
    }\n
    \n \n );\n\n return (\n // tabIndex={0} is needed for keyboard accessibility in the plot area\n \n
    \n {loadingState === LoadingState.Loading ? (\n \n ) : null}\n
    \n\n {hoverHeader && (\n <>\n \n {headerContent}\n \n\n {statusMessage && (\n
    \n \n
    \n )}\n \n )}\n\n {hasHeader && (\n \n {statusMessage && (\n
    \n \n
    \n )}\n\n {headerContent}\n\n {menu && (\n \n )}\n
    \n )}\n\n {!collapsed && (\n \n {typeof children === 'function' ? children(innerWidth, innerHeight) : children}\n
    \n )}\n \n );\n}\n\nconst itemsRenderer = (items: ReactNode[] | ReactNode, renderer: (items: ReactNode[]) => ReactNode): ReactNode => {\n const toRender = React.Children.toArray(items).filter(Boolean);\n return toRender.length > 0 ? renderer(toRender) : null;\n};\n\nconst getHeaderHeight = (theme: GrafanaTheme2, hasHeader: boolean) => {\n if (hasHeader) {\n return theme.spacing.gridSize * theme.components.panel.headerHeight;\n }\n\n return 0;\n};\n\nconst getContentStyle = (\n padding: string,\n theme: GrafanaTheme2,\n headerHeight: number,\n collapsed: boolean,\n height?: number,\n width?: number\n) => {\n const chromePadding = (padding === 'md' ? theme.components.panel.padding : 0) * theme.spacing.gridSize;\n\n const panelPadding = chromePadding * 2;\n const panelBorder = 1 * 2;\n\n let innerWidth = 0;\n if (width) {\n innerWidth = width - panelPadding - panelBorder;\n }\n\n let innerHeight = 0;\n if (height) {\n innerHeight = height - headerHeight - panelPadding - panelBorder;\n }\n\n if (collapsed) {\n innerHeight = headerHeight;\n }\n\n const contentStyle: CSSProperties = {\n padding: chromePadding,\n };\n\n return { contentStyle, innerWidth, innerHeight };\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const { background, borderColor, padding } = theme.components.panel;\n\n return {\n container: css({\n label: 'panel-container',\n backgroundColor: background,\n border: `1px solid ${borderColor}`,\n position: 'relative',\n borderRadius: theme.shape.radius.default,\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n\n '.always-show': {\n background: 'none',\n '&:focus-visible, &:hover': {\n background: theme.colors.secondary.shade,\n },\n },\n\n '.show-on-hover': {\n opacity: '0',\n visibility: 'hidden',\n },\n\n '&:focus-visible, &:hover': {\n // only show menu icon on hover or focused panel\n '.show-on-hover': {\n opacity: '1',\n visibility: 'visible',\n },\n },\n\n '&:focus-visible': getFocusStyles(theme),\n\n // The not:(:focus) clause is so that this rule is only applied when decendants are focused (important otherwise the hover header is visible when panel is clicked).\n '&:focus-within:not(:focus)': {\n '.show-on-hover': {\n visibility: 'visible',\n opacity: '1',\n },\n },\n }),\n transparentContainer: css({\n label: 'panel-transparent-container',\n backgroundColor: 'transparent',\n border: '1px solid transparent',\n boxSizing: 'border-box',\n '&:hover': {\n border: `1px solid ${borderColor}`,\n },\n }),\n loadingBarContainer: css({\n label: 'panel-loading-bar-container',\n position: 'absolute',\n top: 0,\n width: '100%',\n // this is to force the loading bar container to create a new stacking context\n // otherwise, in webkit browsers on windows/linux, the aliasing of panel text changes when the loading bar is shown\n // see https://github.com/grafana/grafana/issues/88104\n zIndex: 1,\n }),\n containNone: css({\n contain: 'none',\n }),\n content: css({\n label: 'panel-content',\n flexGrow: 1,\n contain: 'size layout',\n }),\n headerContainer: css({\n label: 'panel-header',\n display: 'flex',\n alignItems: 'center',\n }),\n pointer: css({\n cursor: 'pointer',\n }),\n streaming: css({\n label: 'panel-streaming',\n marginRight: 0,\n color: theme.colors.success.text,\n\n '&:hover': {\n color: theme.colors.success.text,\n },\n }),\n title: css({\n label: 'panel-title',\n display: 'flex',\n padding: theme.spacing(0, padding),\n minWidth: 0,\n '& > h2': {\n minWidth: 0,\n },\n }),\n items: css({\n display: 'flex',\n }),\n item: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }),\n hiddenMenu: css({\n visibility: 'hidden',\n }),\n menuItem: css({\n label: 'panel-menu',\n border: 'none',\n background: theme.colors.secondary.main,\n '&:hover': {\n background: theme.colors.secondary.shade,\n },\n }),\n errorContainerFloating: css({\n label: 'error-container',\n position: 'absolute',\n left: 0,\n top: 0,\n zIndex: 1,\n }),\n rightActions: css({\n display: 'flex',\n padding: theme.spacing(0, padding),\n gap: theme.spacing(1),\n }),\n rightAligned: css({\n label: 'right-aligned-container',\n marginLeft: 'auto',\n display: 'flex',\n alignItems: 'center',\n }),\n titleItems: css({\n display: 'flex',\n height: '100%',\n }),\n clearButtonStyles: css({\n alignItems: 'center',\n display: 'flex',\n gap: theme.spacing(0.5),\n background: 'transparent',\n border: 'none',\n padding: 0,\n maxWidth: '100%',\n }),\n };\n};\n","import { createContext, useContext } from 'react';\n\nimport {\n EventBusSrv,\n EventBus,\n DashboardCursorSync,\n AnnotationEventUIModel,\n ThresholdsConfig,\n CoreApp,\n DataFrame,\n DataLinkPostProcessor,\n} from '@grafana/data';\n\nimport { AdHocFilterItem } from '../Table/types';\n\nimport { OnSelectRangeCallback, SeriesVisibilityChangeMode } from './types';\n\n/** @alpha */\nexport interface PanelContext {\n /** Identifier for the events scope */\n eventsScope: string;\n eventBus: EventBus;\n\n /** Dashboard panels sync */\n sync?: () => DashboardCursorSync;\n\n /** Information on what the outer container is */\n app?: CoreApp | 'string';\n\n /**\n * Called when a component wants to change the color for a series\n *\n * @alpha -- experimental\n */\n onSeriesColorChange?: (label: string, color: string) => void;\n\n onToggleSeriesVisibility?: (label: string, mode: SeriesVisibilityChangeMode) => void;\n\n canAddAnnotations?: () => boolean;\n canEditAnnotations?: (dashboardUID?: string) => boolean;\n canDeleteAnnotations?: (dashboardUID?: string) => boolean;\n canExecuteActions?: () => boolean;\n onAnnotationCreate?: (annotation: AnnotationEventUIModel) => void;\n onAnnotationUpdate?: (annotation: AnnotationEventUIModel) => void;\n onAnnotationDelete?: (id: string) => void;\n\n /**\n * Called when a user selects an area on the panel, if defined will override the default behavior of the panel,\n * which is to update the time range\n */\n onSelectRange?: OnSelectRangeCallback;\n\n /**\n * Used from visualizations like Table to add ad-hoc filters from cell values\n */\n onAddAdHocFilter?: (item: AdHocFilterItem) => void;\n\n /**\n * Enables modifying thresholds directly from the panel\n *\n * @alpha -- experimental\n */\n canEditThresholds?: boolean;\n\n /**\n * Shows threshold indicators on the right-hand side of the panel\n *\n * @alpha -- experimental\n */\n showThresholds?: boolean;\n\n /**\n * Called when a panel wants to change default thresholds configuration\n *\n * @alpha -- experimental\n */\n onThresholdsChange?: (thresholds: ThresholdsConfig) => void;\n\n /** For instance state that can be shared between panel & options UI */\n instanceState?: any;\n\n /** Update instance state, this is only supported in dashboard panel context currently */\n onInstanceStateChange?: (state: any) => void;\n\n /**\n * Called when a panel is changing the sort order of the legends.\n */\n onToggleLegendSort?: (sortBy: string) => void;\n\n /**\n * Optional, only some contexts support this. This action can be cancelled by user which will result\n * in a the Promise resolving to a false value.\n */\n onUpdateData?: (frames: DataFrame[]) => Promise;\n\n /**\n * Optional supplier for internal data links. If not provided a link pointing to Explore will be generated.\n * @internal\n */\n dataLinkPostProcessor?: DataLinkPostProcessor;\n}\n\nexport const PanelContextRoot = createContext({\n eventsScope: 'global',\n eventBus: new EventBusSrv(),\n});\n\n/**\n * @alpha\n */\nexport const PanelContextProvider = PanelContextRoot.Provider;\n\n/**\n * @alpha\n */\nexport const usePanelContext = () => useContext(PanelContextRoot);\n","/**\n * Mode to describe if a legend is isolated/selected or being appended to an existing\n * series selection.\n * @alpha\n */\n\nexport enum SeriesVisibilityChangeMode {\n ToggleSelection = 'select',\n AppendToSelection = 'append',\n}\n\nexport type OnSelectRangeCallback = (selections: RangeSelection2D[]) => void;\n\nexport interface RangeSelection1D {\n from: number;\n to: number;\n}\n\nexport interface RangeSelection2D {\n x?: RangeSelection1D;\n y?: RangeSelection1D;\n}\n","import * as React from 'react';\n\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { PanelChrome as PanelChromeComponent, PanelChromeProps } from './PanelChrome';\nimport { TitleItem } from './TitleItem';\n\n/**\n * @internal\n */\nexport type { PanelChromeProps, PanelPadding } from './PanelChrome';\n\n/**\n * @internal\n */\nexport interface PanelChromeType extends React.FC {\n LoadingIndicator: typeof LoadingIndicator;\n TitleItem: typeof TitleItem;\n}\n\n/**\n * @internal\n */\nexport const PanelChrome = PanelChromeComponent as PanelChromeType;\nPanelChrome.LoadingIndicator = LoadingIndicator;\nPanelChrome.TitleItem = TitleItem;\n\n/**\n * Exporting the components for extensibility and since it is a good practice\n * according to the api-extractor.\n */\nexport {\n LoadingIndicator as PanelChromeLoadingIndicator,\n type LoadingIndicatorProps as PanelChromeLoadingIndicatorProps,\n} from './LoadingIndicator';\n\nexport { PanelDescription } from './PanelDescription';\n\nexport { usePanelContext, PanelContextProvider, type PanelContext, PanelContextRoot } from './PanelContext';\n\nexport * from './types';\n","import { Cell } from 'react-table';\n\nimport { TimeRange, DataFrame, InterpolateFunction } from '@grafana/data';\n\nimport { TableStyles } from '../TableRT/styles';\nimport { GetActionsFunction, GrafanaTableColumn, TableFilterActionCallback, TableInspectCellCallback } from '../types';\n\nexport interface Props {\n cell: Cell;\n tableStyles: TableStyles;\n onCellFilterAdded?: TableFilterActionCallback;\n columnIndex: number;\n columnCount: number;\n timeRange?: TimeRange;\n userProps?: object;\n frame: DataFrame;\n rowStyled?: boolean;\n rowExpanded?: boolean;\n textWrapped?: boolean;\n height?: number;\n getActions?: GetActionsFunction;\n replaceVariables?: InterpolateFunction;\n setInspectCell?: TableInspectCellCallback;\n}\n\nexport const TableCell = ({\n cell,\n tableStyles,\n onCellFilterAdded,\n timeRange,\n userProps,\n frame,\n rowStyled,\n rowExpanded,\n textWrapped,\n height,\n getActions,\n replaceVariables,\n setInspectCell,\n}: Props) => {\n const cellProps = cell.getCellProps();\n const field = (cell.column as unknown as GrafanaTableColumn).field;\n\n if (!field?.display) {\n return null;\n }\n\n if (cellProps.style) {\n cellProps.style.wordBreak = 'break-word';\n cellProps.style.minWidth = cellProps.style.width;\n const justifyContent = (cell.column as any).justifyContent;\n\n if (justifyContent === 'flex-end' && !field.config.unit) {\n // justify-content flex-end is not compatible with cellLink overflow; use direction instead\n cellProps.style.textAlign = 'right';\n cellProps.style.direction = 'rtl';\n cellProps.style.unicodeBidi = 'plaintext';\n } else {\n cellProps.style.justifyContent = justifyContent;\n }\n }\n\n let innerWidth = (typeof cell.column.width === 'number' ? cell.column.width : 24) - tableStyles.cellPadding * 2;\n\n const actions = getActions ? getActions(frame, field, cell.row.index, replaceVariables) : [];\n\n return (\n <>\n {cell.render('Cell', {\n field,\n tableStyles,\n onCellFilterAdded,\n cellProps,\n innerWidth,\n timeRange,\n userProps,\n frame,\n rowStyled,\n rowExpanded,\n textWrapped,\n height,\n actions,\n setInspectCell,\n })}\n \n );\n};\n","import { css } from '@emotion/css';\nimport { CSSProperties } from 'react';\nimport * as React from 'react';\n\nimport { DataFrame, Field, GrafanaTheme2 } from '@grafana/data';\nimport { TableCellHeight } from '@grafana/schema';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { EXPANDER_WIDTH } from '../utils';\n\nimport { Table } from './Table';\nimport { TableStyles } from './styles';\n\nexport interface Props {\n nestedData: Field;\n tableStyles: TableStyles;\n rowIndex: number;\n width: number;\n cellHeight: TableCellHeight;\n}\n\nexport function ExpandedRow({ tableStyles, nestedData, rowIndex, width, cellHeight }: Props) {\n const frames: DataFrame[][] = nestedData.values;\n const subTables: React.ReactNode[] = [];\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n\n let top = tableStyles.rowHeight + theme.spacing.gridSize; // initial height for row that expands above sub tables + 1 grid unit spacing\n\n frames[rowIndex].forEach((nf: DataFrame, nfIndex: number) => {\n const noHeader = !!nf.meta?.custom?.noHeader;\n const height = tableStyles.rowHeight * (nf.length + (noHeader ? 0 : 1)); // account for the header with + 1\n\n const subTable: CSSProperties = {\n height: height,\n paddingLeft: EXPANDER_WIDTH,\n position: 'absolute',\n top,\n backgroundColor: theme.colors.background.primary,\n color: theme.colors.text.primary,\n };\n\n top += height + theme.spacing.gridSize;\n\n subTables.push(\n
    \n \n
    \n );\n });\n\n return
    {subTables}
    ;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n subTables: css({\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n width: '1px',\n top: theme.spacing(5),\n left: theme.spacing(1),\n bottom: theme.spacing(2),\n background: theme.colors.border.medium,\n },\n }),\n };\n};\n\nexport function getExpandedRowHeight(nestedData: Field, rowIndex: number, tableStyles: TableStyles) {\n const frames: DataFrame[][] = nestedData.values;\n\n const height = frames[rowIndex].reduce((acc: number, frame: DataFrame) => {\n if (frame.length) {\n const noHeader = !!frame.meta?.custom?.noHeader;\n return acc + tableStyles.rowHeight * (frame.length + (noHeader ? 0 : 1)) + 8; // account for the header with + 1\n }\n return acc;\n }, tableStyles.rowHeight); // initial height for row that expands above sub tables\n\n return height ?? tableStyles.rowHeight;\n}\n","import { css, cx } from '@emotion/css';\nimport { CSSProperties, UIEventHandler, useCallback, useEffect, useMemo, useState } from 'react';\nimport * as React from 'react';\nimport { Cell, Row, TableState, HeaderGroup } from 'react-table';\nimport { VariableSizeList } from 'react-window';\nimport { Subscription, debounceTime } from 'rxjs';\n\nimport {\n DataFrame,\n DataHoverClearEvent,\n DataHoverEvent,\n Field,\n FieldType,\n TimeRange,\n hasTimeField,\n InterpolateFunction,\n} from '@grafana/data';\nimport { TableCellDisplayMode, TableCellHeight } from '@grafana/schema';\n\nimport { useTheme2 } from '../../../themes/ThemeContext';\nimport CustomScrollbar from '../../CustomScrollbar/CustomScrollbar';\nimport { usePanelContext } from '../../PanelChrome';\nimport { TableCell } from '../Cells/TableCell';\nimport {\n CellColors,\n GetActionsFunction,\n TableFieldOptions,\n TableFilterActionCallback,\n TableInspectCellCallback,\n} from '../types';\nimport {\n calculateAroundPointThreshold,\n getCellColors,\n isPointTimeValAroundTableTimeVal,\n guessTextBoundingBox,\n} from '../utils';\n\nimport { ExpandedRow, getExpandedRowHeight } from './ExpandedRow';\nimport { TableStyles } from './styles';\n\ninterface RowsListProps {\n data: DataFrame;\n rows: Row[];\n enableSharedCrosshair: boolean;\n headerHeight: number;\n rowHeight: number;\n itemCount: number;\n pageIndex: number;\n listHeight: number;\n width: number;\n cellHeight?: TableCellHeight;\n listRef: React.RefObject;\n tableState: TableState;\n tableStyles: TableStyles;\n nestedDataField?: Field;\n prepareRow: (row: Row) => void;\n onCellFilterAdded?: TableFilterActionCallback;\n timeRange?: TimeRange;\n footerPaginationEnabled: boolean;\n initialRowIndex?: number;\n headerGroups: HeaderGroup[];\n longestField?: Field;\n textWrapField?: Field;\n getActions?: GetActionsFunction;\n replaceVariables?: InterpolateFunction;\n setInspectCell?: TableInspectCellCallback;\n}\n\nexport const RowsList = (props: RowsListProps) => {\n const {\n data,\n rows,\n headerHeight,\n footerPaginationEnabled,\n rowHeight,\n itemCount,\n pageIndex,\n tableState,\n prepareRow,\n onCellFilterAdded,\n width,\n cellHeight = TableCellHeight.Sm,\n timeRange,\n tableStyles,\n nestedDataField,\n listHeight,\n listRef,\n enableSharedCrosshair = false,\n initialRowIndex = undefined,\n headerGroups,\n longestField,\n textWrapField,\n getActions,\n replaceVariables,\n setInspectCell,\n } = props;\n\n const [rowHighlightIndex, setRowHighlightIndex] = useState(initialRowIndex);\n if (initialRowIndex === undefined && rowHighlightIndex !== undefined) {\n setRowHighlightIndex(undefined);\n }\n\n const theme = useTheme2();\n const panelContext = usePanelContext();\n\n // Create off-screen canvas for measuring rows for virtualized rendering\n // This line is like this because Jest doesn't have OffscreenCanvas mocked\n // nor is it a part of the jest-canvas-mock package\n let osContext = null;\n if (window.OffscreenCanvas !== undefined) {\n // The canvas size is defined arbitrarily\n // As we never actually visualize rendered content\n // from the offscreen canvas, only perform text measurements\n osContext = new OffscreenCanvas(256, 1024).getContext('2d');\n }\n\n // Set font property using theme info\n // This will make text measurement accurate\n if (osContext !== undefined && osContext !== null) {\n osContext.font = `${theme.typography.fontSize}px ${theme.typography.body.fontFamily}`;\n }\n\n const threshold = useMemo(() => {\n const timeField = data.fields.find((f) => f.type === FieldType.time);\n\n if (!timeField) {\n return 0;\n }\n\n return calculateAroundPointThreshold(timeField);\n }, [data]);\n\n const onRowHover = useCallback(\n (idx: number, frame: DataFrame) => {\n if (!panelContext || !enableSharedCrosshair) {\n return;\n }\n\n const timeField: Field = frame!.fields.find((f) => f.type === FieldType.time)!;\n\n if (!timeField) {\n return;\n }\n\n panelContext.eventBus.publish(\n new DataHoverEvent({\n point: {\n time: timeField.values[idx],\n },\n })\n );\n },\n [enableSharedCrosshair, panelContext]\n );\n\n const onRowLeave = useCallback(() => {\n if (!panelContext || !enableSharedCrosshair) {\n return;\n }\n\n panelContext.eventBus.publish(new DataHoverClearEvent());\n }, [enableSharedCrosshair, panelContext]);\n\n const onDataHoverEvent = useCallback(\n (evt: DataHoverEvent) => {\n if (evt.payload.point?.time && evt.payload.rowIndex !== undefined) {\n const timeField = data.fields.find((f) => f.type === FieldType.time);\n const time = timeField!.values[evt.payload.rowIndex];\n const pointTime = evt.payload.point.time;\n\n // If the time value of the hovered point is around the time value of the\n // row with same index, highlight the row\n if (isPointTimeValAroundTableTimeVal(pointTime, time, threshold)) {\n setRowHighlightIndex(evt.payload.rowIndex);\n return;\n }\n\n // If the time value of the hovered point is not around the time value of the\n // row with same index, try to find a row with same time value\n const matchedRowIndex = timeField!.values.findIndex((t) =>\n isPointTimeValAroundTableTimeVal(pointTime, t, threshold)\n );\n\n if (matchedRowIndex !== -1) {\n setRowHighlightIndex(matchedRowIndex);\n return;\n }\n\n setRowHighlightIndex(undefined);\n }\n },\n [data.fields, threshold]\n );\n\n useEffect(() => {\n if (!panelContext || !enableSharedCrosshair || !hasTimeField(data) || footerPaginationEnabled) {\n return;\n }\n\n const subs = new Subscription();\n\n subs.add(\n panelContext.eventBus\n .getStream(DataHoverEvent)\n .pipe(debounceTime(250))\n .subscribe({\n next: (evt) => {\n if (panelContext.eventBus === evt.origin) {\n return;\n }\n\n onDataHoverEvent(evt);\n },\n })\n );\n\n subs.add(\n panelContext.eventBus\n .getStream(DataHoverClearEvent)\n .pipe(debounceTime(250))\n .subscribe({\n next: (evt) => {\n if (panelContext.eventBus === evt.origin) {\n return;\n }\n\n setRowHighlightIndex(undefined);\n },\n })\n );\n\n return () => {\n subs.unsubscribe();\n };\n }, [data, enableSharedCrosshair, footerPaginationEnabled, onDataHoverEvent, panelContext]);\n\n let scrollTop: number | undefined = undefined;\n if (rowHighlightIndex !== undefined) {\n const firstMatchedRowIndex = rows.findIndex((row) => row.index === rowHighlightIndex);\n\n if (firstMatchedRowIndex !== -1) {\n scrollTop = headerHeight + (firstMatchedRowIndex - 1) * rowHeight;\n }\n }\n\n const rowIndexForPagination = useCallback(\n (index: number) => {\n return tableState.pageIndex * tableState.pageSize + index;\n },\n [tableState.pageIndex, tableState.pageSize]\n );\n\n let rowBg: Function | undefined = undefined;\n let textWrapFinal: Field | undefined;\n for (const field of data.fields) {\n // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n const fieldOptions = field.config.custom as TableFieldOptions;\n const cellOptionsExist = fieldOptions !== undefined && fieldOptions.cellOptions !== undefined;\n\n if (\n cellOptionsExist &&\n fieldOptions.cellOptions.type === TableCellDisplayMode.ColorBackground &&\n fieldOptions.cellOptions.applyToRow\n ) {\n rowBg = (rowIndex: number): CellColors => {\n const display = field.display!(field.values.get(rowIndex));\n const colors = getCellColors(tableStyles.theme, fieldOptions.cellOptions, display);\n return colors;\n };\n }\n\n if (textWrapField !== undefined) {\n textWrapFinal = textWrapField;\n } else if (longestField !== undefined) {\n textWrapFinal = longestField;\n }\n }\n\n const RenderRow = useCallback(\n ({ index, style, rowHighlightIndex }: { index: number; style: CSSProperties; rowHighlightIndex?: number }) => {\n const indexForPagination = rowIndexForPagination(index);\n const row = rows[indexForPagination];\n let additionalProps: React.HTMLAttributes = {};\n prepareRow(row);\n\n const expandedRowStyle = tableState.expanded[row.id] ? css({ '&:hover': { background: 'inherit' } }) : {};\n const rowExpanded = nestedDataField && tableState.expanded[row.id];\n\n if (rowHighlightIndex !== undefined && row.index === rowHighlightIndex) {\n style = { ...style, backgroundColor: theme.components.table.rowSelected };\n additionalProps = {\n 'aria-selected': 'true',\n };\n }\n\n // Color rows if enabled\n if (rowBg) {\n const { bgColor, textColor } = rowBg(row.index);\n style.background = bgColor;\n style.color = textColor;\n style.borderLeft = `2px solid ${bgColor}`;\n }\n\n // If there's a text wrapping field we set the height of it here\n if (textWrapFinal) {\n const visibleFields = data.fields.filter((field) => !Boolean(field.config.custom?.hidden));\n const seriesIndex = visibleFields.findIndex((field) => field.name === textWrapFinal.name);\n const pxLineHeight = theme.typography.body.lineHeight * theme.typography.fontSize;\n const bbox = guessTextBoundingBox(\n textWrapFinal.values[row.index],\n headerGroups[0].headers[seriesIndex],\n osContext,\n pxLineHeight,\n tableStyles.rowHeight,\n tableStyles.cellPadding\n );\n style.height = bbox.height;\n }\n const { key, ...rowProps } = row.getRowProps({ style, ...additionalProps });\n\n return (\n onRowHover(row.index, data)}\n onMouseLeave={onRowLeave}\n >\n {/*add the nested data to the DOM first to prevent a 1px border CSS issue on the last cell of the row*/}\n {rowExpanded && (\n \n )}\n {row.cells.map((cell: Cell, index: number) => (\n \n ))}\n
    \n );\n },\n [\n rowIndexForPagination,\n rows,\n prepareRow,\n tableState.expanded,\n nestedDataField,\n rowBg,\n textWrapFinal,\n tableStyles,\n onRowLeave,\n width,\n cellHeight,\n theme.components.table.rowSelected,\n theme.typography.body.lineHeight,\n theme.typography.fontSize,\n data,\n headerGroups,\n osContext,\n onRowHover,\n onCellFilterAdded,\n timeRange,\n getActions,\n replaceVariables,\n setInspectCell,\n ]\n );\n\n const getItemSize = (index: number): number => {\n const indexForPagination = rowIndexForPagination(index);\n const row = rows[indexForPagination];\n\n if (tableState.expanded[row.id] && nestedDataField) {\n return getExpandedRowHeight(nestedDataField, row.index, tableStyles);\n }\n\n if (textWrapFinal) {\n const visibleFields = data.fields.filter((field) => !Boolean(field.config.custom?.hidden));\n const seriesIndex = visibleFields.findIndex((field) => field.name === textWrapFinal.name);\n const pxLineHeight = theme.typography.fontSize * theme.typography.body.lineHeight;\n return guessTextBoundingBox(\n textWrapFinal.values[row.index],\n headerGroups[0].headers[seriesIndex],\n osContext,\n pxLineHeight,\n tableStyles.rowHeight,\n tableStyles.cellPadding\n ).height;\n }\n\n return tableStyles.rowHeight;\n };\n\n const handleScroll: UIEventHandler = (event) => {\n const { scrollTop } = event.currentTarget;\n\n if (listRef.current !== null) {\n listRef.current.scrollTo(scrollTop);\n }\n };\n\n // It's a hack for text wrapping.\n // VariableSizeList component didn't know that we manually set row height.\n // So we need to reset the list when the rows high changes.\n useEffect(() => {\n if (listRef.current) {\n listRef.current.resetAfterIndex(0);\n }\n }, [rows, listRef]);\n\n return (\n \n \n {({ index, style }) => RenderRow({ index, style, rowHighlightIndex })}\n \n \n );\n};\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { TableCellHeight } from '@grafana/schema';\n\nexport function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCellHeight) {\n const borderColor = theme.colors.border.weak;\n const resizerColor = theme.colors.primary.border;\n const cellPadding = 6;\n const cellHeight = getCellHeight(theme, cellHeightOption, cellPadding);\n const rowHeight = cellHeight + 2;\n const headerHeight = 28;\n\n const buildCellContainerStyle = (\n color?: string,\n background?: string,\n backgroundHover?: string,\n overflowOnHover?: boolean,\n asCellText?: boolean,\n textShouldWrap?: boolean,\n textWrapped?: boolean,\n rowStyled?: boolean,\n rowExpanded?: boolean\n ) => {\n return css({\n label: overflowOnHover ? 'cellContainerOverflow' : 'cellContainerNoOverflow',\n padding: `${cellPadding}px`,\n width: '100%',\n // Cell height need to account for row border\n height: rowExpanded ? 'auto !important' : `${rowHeight - 1}px`,\n wordBreak: textWrapped ? 'break-all' : 'inherit',\n\n display: 'flex',\n\n ...(asCellText\n ? {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n userSelect: 'text',\n whiteSpace: 'nowrap',\n }\n : {}),\n\n alignItems: 'center',\n borderRight: `1px solid ${borderColor}`,\n\n color: rowStyled ? 'inherit' : (color ?? undefined),\n background: rowStyled ? undefined : (background ?? undefined),\n backgroundClip: 'padding-box',\n\n '&:last-child:not(:only-child)': {\n borderRight: 'none',\n },\n\n '&:hover': {\n overflow: overflowOnHover && !textWrapped ? 'visible' : undefined,\n width: textShouldWrap || !overflowOnHover ? 'auto' : 'auto !important',\n height: (textShouldWrap || overflowOnHover) && !textWrapped ? 'auto !important' : `${rowHeight - 1}px`,\n minHeight: `${rowHeight - 1}px`,\n wordBreak: textShouldWrap ? 'break-word' : undefined,\n whiteSpace: textShouldWrap && overflowOnHover ? 'normal' : 'nowrap',\n boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,\n background: rowStyled ? 'inherit' : (backgroundHover ?? theme.colors.background.primary),\n zIndex: 1,\n '.cellActions': {\n background: theme.components.tooltip.background,\n color: theme.components.tooltip.text,\n visibility: 'visible',\n opacity: 1,\n width: 'auto',\n borderRadius: theme.shape.radius.default,\n },\n },\n\n a: {\n color: 'inherit',\n },\n\n '.cellActions': {\n display: 'flex',\n position: overflowOnHover ? undefined : 'absolute',\n top: overflowOnHover ? undefined : '1px',\n right: overflowOnHover ? undefined : 0,\n margin: overflowOnHover ? theme.spacing(0, 0, 0, 1) : 'auto',\n visibility: 'hidden',\n opacity: 0,\n width: 0,\n alignItems: 'center',\n height: '100%',\n padding: theme.spacing(0.5, 0, 0.5, 0.5),\n background: theme.components.tooltip.background,\n color: theme.components.tooltip.text,\n },\n\n '.cellActionsLeft': {\n right: 'auto !important',\n left: 0,\n },\n });\n };\n\n return {\n theme,\n cellHeight,\n buildCellContainerStyle,\n cellPadding,\n cellHeightInner: cellHeight - cellPadding * 2,\n rowHeight,\n table: css({\n height: '100%',\n width: '100%',\n overflow: 'auto',\n display: 'flex',\n flexDirection: 'column',\n }),\n thead: css({\n label: 'thead',\n height: `${headerHeight}px`,\n overflowY: 'auto',\n overflowX: 'hidden',\n position: 'relative',\n }),\n tfoot: css({\n label: 'tfoot',\n height: `${headerHeight}px`,\n borderTop: `1px solid ${borderColor}`,\n overflowY: 'auto',\n overflowX: 'hidden',\n position: 'relative',\n }),\n headerRow: css({\n label: 'row',\n borderBottom: `1px solid ${borderColor}`,\n }),\n headerCell: css({\n height: '100%',\n padding: `0 ${cellPadding}px`,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'flex',\n alignItems: 'center',\n fontWeight: theme.typography.fontWeightMedium,\n\n '&:last-child': {\n borderRight: 'none',\n },\n }),\n headerCellLabel: css({\n border: 'none',\n padding: 0,\n background: 'inherit',\n cursor: 'pointer',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n fontWeight: theme.typography.fontWeightMedium,\n display: 'flex',\n alignItems: 'center',\n marginRight: theme.spacing(0.5),\n\n '&:hover': {\n textDecoration: 'underline',\n color: theme.colors.text.link,\n },\n }),\n cellContainerText: buildCellContainerStyle(undefined, undefined, undefined, true, true),\n cellContainerTextNoOverflow: buildCellContainerStyle(undefined, undefined, undefined, false, true),\n\n cellContainer: buildCellContainerStyle(undefined, undefined, undefined, true, false),\n cellContainerNoOverflow: buildCellContainerStyle(undefined, undefined, undefined, false, false),\n cellText: css({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n userSelect: 'text',\n whiteSpace: 'nowrap',\n cursor: 'text',\n }),\n sortIcon: css({\n marginLeft: theme.spacing(0.5),\n }),\n cellLink: css({\n cursor: 'pointer',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n userSelect: 'text',\n whiteSpace: 'nowrap',\n color: `${theme.colors.text.link} !important`,\n fontWeight: theme.typography.fontWeightMedium,\n paddingRight: theme.spacing(1.5),\n '&:hover': {\n textDecoration: 'underline',\n color: theme.colors.text.link,\n },\n }),\n cellLinkEmpty: css({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n userSelect: 'text',\n whiteSpace: 'nowrap',\n fontWeight: theme.typography.fontWeightMedium,\n paddingRight: theme.spacing(1.5),\n }),\n cellLinkForColoredCell: css({\n cursor: 'pointer',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n userSelect: 'text',\n whiteSpace: 'nowrap',\n fontWeight: theme.typography.fontWeightMedium,\n textDecoration: 'underline',\n }),\n imageCellLink: css({\n cursor: 'pointer',\n overflow: 'hidden',\n height: '100%',\n }),\n headerFilter: css({\n background: 'transparent',\n border: 'none',\n label: 'headerFilter',\n padding: 0,\n }),\n paginationWrapper: css({\n display: 'flex',\n height: `${cellHeight}px`,\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n li: {\n marginBottom: 0,\n },\n }),\n paginationSummary: css({\n color: theme.colors.text.secondary,\n fontSize: theme.typography.bodySmall.fontSize,\n display: 'flex',\n justifyContent: 'flex-end',\n padding: theme.spacing(0, 1, 0, 2),\n }),\n\n tableContentWrapper: (totalColumnsWidth: number) => {\n const width = totalColumnsWidth !== undefined ? `${totalColumnsWidth}px` : '100%';\n\n return css({\n label: 'tableContentWrapper',\n width,\n display: 'flex',\n flexDirection: 'column',\n });\n },\n row: css({\n label: 'row',\n borderBottom: `1px solid ${borderColor}`,\n\n '&:hover': {\n backgroundColor: theme.components.table.rowHoverBackground,\n },\n\n '&:last-child': {\n borderBottom: 0,\n },\n }),\n imageCell: css({\n height: '100%',\n }),\n resizeHandle: css({\n label: 'resizeHandle',\n cursor: 'col-resize !important',\n display: 'inline-block',\n background: resizerColor,\n opacity: 0,\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: 'opacity 0.2s ease-in-out',\n },\n width: '8px',\n height: '100%',\n position: 'absolute',\n right: '-4px',\n borderRadius: theme.shape.radius.default,\n top: 0,\n touchAction: 'none',\n\n '&:hover': {\n opacity: 1,\n },\n }),\n typeIcon: css({\n marginRight: theme.spacing(1),\n color: theme.colors.text.secondary,\n }),\n noData: css({\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n }),\n expanderCell: css({\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n height: `${rowHeight}px`,\n cursor: 'pointer',\n }),\n };\n}\n\nexport type TableStyles = ReturnType;\n\nfunction getCellHeight(theme: GrafanaTheme2, cellHeightOption: TableCellHeight, cellPadding: number) {\n const bodyFontSize = theme.typography.fontSize;\n const lineHeight = theme.typography.body.lineHeight;\n\n switch (cellHeightOption) {\n case 'md':\n return 42;\n case 'lg':\n return 48;\n case 'sm':\n default:\n return cellPadding * 2 + bodyFontSize * lineHeight;\n }\n}\n","import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n useAbsoluteLayout,\n useExpanded,\n useFilters,\n usePagination,\n useResizeColumns,\n useSortBy,\n useTable,\n} from 'react-table';\nimport { VariableSizeList } from 'react-window';\n\nimport { FieldType, ReducerID, getRowUniqueId, getFieldMatcher } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { Trans } from '@grafana/i18n';\nimport { TableCellHeight } from '@grafana/schema';\n\nimport { useTheme2 } from '../../../themes/ThemeContext';\nimport { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';\nimport { Pagination } from '../../Pagination/Pagination';\nimport { TableCellInspector } from '../TableCellInspector';\nimport { useFixScrollbarContainer, useResetVariableListSizeCache } from '../hooks';\nimport { getInitialState, useTableStateReducer } from '../reducer';\nimport { FooterItem, GrafanaTableState, InspectCell, TableRTProps as Props } from '../types';\nimport {\n getColumns,\n sortCaseInsensitive,\n sortNumber,\n getFooterItems,\n createFooterCalculationValues,\n guessLongestField,\n} from '../utils';\n\nimport { FooterRow } from './FooterRow';\nimport { HeaderRow } from './HeaderRow';\nimport { RowsList } from './RowsList';\nimport { useTableStyles } from './styles';\n\nconst COLUMN_MIN_WIDTH = 150;\nconst FOOTER_ROW_HEIGHT = 36;\nconst NO_DATA_TEXT = 'No data';\n\nexport const Table = memo((props: Props) => {\n const {\n ariaLabel,\n data,\n height,\n onCellFilterAdded,\n onColumnResize,\n width,\n columnMinWidth = COLUMN_MIN_WIDTH,\n noHeader,\n resizable = true,\n initialSortBy,\n footerOptions,\n showTypeIcons,\n footerValues,\n enablePagination,\n cellHeight = TableCellHeight.Sm,\n timeRange,\n enableSharedCrosshair = false,\n initialRowIndex = undefined,\n fieldConfig,\n getActions,\n replaceVariables,\n } = props;\n\n const listRef = useRef(null);\n const tableDivRef = useRef(null);\n const variableSizeListScrollbarRef = useRef(null);\n const theme = useTheme2();\n const tableStyles = useTableStyles(theme, cellHeight);\n const headerHeight = noHeader ? 0 : tableStyles.rowHeight;\n const [footerItems, setFooterItems] = useState(footerValues);\n const noValuesDisplayText = fieldConfig?.defaults?.noValue ?? NO_DATA_TEXT;\n const [inspectCell, setInspectCell] = useState(null);\n\n const footerHeight = useMemo(() => {\n const EXTENDED_ROW_HEIGHT = FOOTER_ROW_HEIGHT;\n let length = 0;\n\n if (!footerItems) {\n return 0;\n }\n\n for (const fv of footerItems) {\n if (Array.isArray(fv) && fv.length > length) {\n length = fv.length;\n }\n }\n\n if (length > 1) {\n return EXTENDED_ROW_HEIGHT * length;\n }\n\n return EXTENDED_ROW_HEIGHT;\n }, [footerItems]);\n\n // React table data array. This data acts just like a dummy array to let react-table know how many rows exist.\n // The cells use the field to look up values, therefore this is simply a length/size placeholder.\n const memoizedData = useMemo(() => {\n if (!data.fields.length) {\n return [];\n }\n // As we only use this to fake the length of our data set for react-table we need to make sure we always return an array\n // filled with values at each index otherwise we'll end up trying to call accessRow for null|undefined value in\n // https://github.com/tannerlinsley/react-table/blob/7be2fc9d8b5e223fc998af88865ae86a88792fdb/src/hooks/useTable.js#L585\n return Array(data.length).fill(0);\n }, [data]);\n\n // This checks whether `Show table footer` is toggled on, the `Calculation` is set to `Count`, and finally, whether `Count rows` is toggled on.\n const isCountRowsSet = Boolean(\n footerOptions?.countRows &&\n footerOptions.reducer &&\n footerOptions.reducer.length &&\n footerOptions.reducer[0] === ReducerID.count\n );\n\n const nestedDataField = data.fields.find((f) => f.type === FieldType.nestedFrames);\n const hasNestedData = nestedDataField !== undefined;\n\n // React-table column definitions\n const memoizedColumns = useMemo(\n () => getColumns(data, width, columnMinWidth, hasNestedData, footerItems, isCountRowsSet),\n [data, width, columnMinWidth, hasNestedData, footerItems, isCountRowsSet]\n );\n\n // we need a ref to later store the `toggleAllRowsExpanded` function, returned by `useTable`.\n // We cannot simply use a variable because we need to use such function in the initialization of\n // `useTableStateReducer`, which is needed to construct options for `useTable` (the hook that returns\n // `toggleAllRowsExpanded`), and if we used a variable, that variable would be undefined at the time\n // we initialize `useTableStateReducer`.\n const toggleAllRowsExpandedRef = useRef<(value?: boolean) => void>();\n\n // Internal react table state reducer\n const stateReducer = useTableStateReducer({\n onColumnResize,\n onSortByChange: (state) => {\n // Collapse all rows. This prevents a known bug that causes the size of the rows to be incorrect due to\n // using `VariableSizeList` and `useExpanded` together.\n toggleAllRowsExpandedRef.current!(false);\n\n if (props.onSortByChange) {\n props.onSortByChange(state);\n }\n },\n data,\n });\n\n const hasUniqueId = !!data.meta?.uniqueRowIdFields?.length;\n\n const options: any = useMemo(() => {\n // This is a bit hard to type with the react-table types here, the reducer does not actually match with the\n // TableOptions.\n const options: any = {\n columns: memoizedColumns,\n data: memoizedData,\n disableResizing: !resizable,\n stateReducer: stateReducer,\n autoResetPage: false,\n initialState: getInitialState(initialSortBy, memoizedColumns),\n autoResetFilters: false,\n sortTypes: {\n // the builtin number type on react-table does not handle NaN values\n number: sortNumber,\n // should be replaced with the builtin string when react-table is upgraded,\n // see https://github.com/tannerlinsley/react-table/pull/3235\n 'alphanumeric-insensitive': sortCaseInsensitive,\n },\n };\n if (hasUniqueId) {\n // row here is just always 0 because here we don't use real data but just a dummy array filled with 0.\n // See memoizedData variable above.\n options.getRowId = (row: Record, relativeIndex: number) => getRowUniqueId(data, relativeIndex);\n\n // If we have unique field we assume we can count on it as being globally unique, and we don't need to reset when\n // data changes.\n options.autoResetExpanded = false;\n }\n return options;\n }, [initialSortBy, memoizedColumns, memoizedData, resizable, stateReducer, hasUniqueId, data]);\n\n const {\n getTableProps,\n headerGroups,\n footerGroups,\n rows,\n prepareRow,\n totalColumnsWidth,\n page,\n state,\n gotoPage,\n setPageSize,\n pageOptions,\n toggleAllRowsExpanded,\n } = useTable(options, useFilters, useSortBy, useAbsoluteLayout, useResizeColumns, useExpanded, usePagination);\n\n const extendedState = state as GrafanaTableState;\n toggleAllRowsExpandedRef.current = toggleAllRowsExpanded;\n\n /*\n Footer value calculation is being moved in the Table component and the footerValues prop will be deprecated.\n The footerValues prop is still used in the Table component for backwards compatibility. Adding the\n footerOptions prop will switch the Table component to use the new footer calculation. Using both props will\n result in the footerValues prop being ignored.\n */\n useEffect(() => {\n if (!footerOptions) {\n setFooterItems(footerValues);\n }\n }, [footerValues, footerOptions]);\n\n useEffect(() => {\n if (!footerOptions) {\n return;\n }\n\n if (!footerOptions.show) {\n setFooterItems(undefined);\n return;\n }\n\n if (isCountRowsSet) {\n const footerItemsCountRows: FooterItem[] = [];\n footerItemsCountRows[0] = rows.length.toString() ?? data.length.toString();\n setFooterItems(footerItemsCountRows);\n return;\n }\n\n const footerItems = getFooterItems(\n headerGroups[0].headers,\n createFooterCalculationValues(rows),\n footerOptions,\n theme\n );\n\n setFooterItems(footerItems);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [footerOptions, theme, state.filters, data]);\n\n let listHeight = height - (headerHeight + footerHeight);\n\n if (enablePagination) {\n listHeight -= tableStyles.cellHeight;\n }\n\n const pageSize = Math.round(listHeight / tableStyles.rowHeight) - 1;\n\n useEffect(() => {\n // Don't update the page size if it is less than 1\n if (pageSize <= 0) {\n return;\n }\n setPageSize(pageSize);\n }, [pageSize, setPageSize]);\n\n useEffect(() => {\n // Reset page index when data changes\n // This is needed because react-table does not do this automatically\n // autoResetPage is set to false because setting it to true causes the issue described in\n // https://github.com/grafana/grafana/pull/67477\n if (data.length / pageSize < state.pageIndex) {\n gotoPage(0);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [data]);\n\n useResetVariableListSizeCache(extendedState, listRef, data, hasUniqueId);\n useFixScrollbarContainer(variableSizeListScrollbarRef, tableDivRef);\n\n const onNavigate = useCallback(\n (toPage: number) => {\n gotoPage(toPage - 1);\n },\n [gotoPage]\n );\n\n const itemCount = enablePagination ? page.length : rows.length;\n let paginationEl = null;\n if (enablePagination) {\n const itemsRangeStart = state.pageIndex * state.pageSize + 1;\n let itemsRangeEnd = itemsRangeStart + state.pageSize - 1;\n const isSmall = width < 550;\n if (itemsRangeEnd > data.length) {\n itemsRangeEnd = data.length;\n }\n const numRows = rows.length;\n const displayedEnd = itemsRangeEnd < rows.length ? itemsRangeEnd : rows.length;\n paginationEl = (\n
    \n \n {isSmall ? null : (\n
    \n \n {{ itemsRangeStart }} - {{ displayedEnd }} of {{ numRows }} rows\n \n
    \n )}\n
    \n );\n }\n\n // Try to determine the longest field\n // TODO: do we wrap only one field?\n // What if there are multiple fields with long text?\n const longestField = fieldConfig ? guessLongestField(fieldConfig, data) : undefined;\n let textWrapField = undefined;\n if (fieldConfig !== undefined) {\n data.fields.forEach((field) => {\n fieldConfig.overrides.forEach((override) => {\n const matcher = getFieldMatcher(override.matcher);\n if (matcher(field, data, [data])) {\n for (const property of override.properties) {\n if (property.id === 'custom.cellOptions' && property.value.wrapText) {\n textWrapField = field;\n }\n }\n }\n });\n });\n }\n\n return (\n <>\n \n \n
    \n {!noHeader && (\n \n )}\n {itemCount > 0 ? (\n \n \n
    \n ) : (\n
    \n {noValuesDisplayText}\n
    \n )}\n {footerItems && (\n \n )}\n
    \n \n {paginationEl}\n \n\n {inspectCell !== null && (\n {\n setInspectCell(null);\n }}\n />\n )}\n \n );\n});\n\nTable.displayName = 'Table';\n","import { css, cx } from '@emotion/css';\nimport { forwardRef, HTMLProps } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles';\n\nexport interface Props extends Omit, 'size'> {\n /** Show an invalid state around the input */\n invalid?: boolean;\n}\n\nexport const TextArea = forwardRef(({ invalid, className, ...props }, ref) => {\n const styles = useStyles2(getTextAreaStyle, invalid);\n\n return