Menu

Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

Enterprise Open source RSS

@grafana/ui package

A library containing the different design components of the Grafana ecosystem.

Classes

ClassDescription
ansicolorRepresents an ANSI-escaped string.
BarGauge
BigValue
Cascader
ClickOutsideWrapper
ClipboardButton
CustomScrollbarWraps component into component from react-custom-scrollbars
ErrorBoundary
ErrorBoundaryAlert
Gauge
Graph
GraphSeriesToggler
JsonExplorerJsonExplorerJsonExplorer allows you to render JSON objects in HTML with a **collapsible** navigation.
JSONFormatter
List
ModalsProvider
PieChart
Popover
PopoverController
Portal
QueryFieldRenders an editor field. Pass initial value as initialQuery and listen to changes in props.onValueChanged. This component can only process strings. Internally it uses Slate Value. Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.
SelectValueEditor
SetInterval
StatsPicker
StringArrayEditor
TableInputCSVExpects the container div to have size set and will fill it 100%
TagsInput
ToggleButtonGroup
UnitPicker
VizRepeater

Enumerations

EnumerationDescription
BarGaugeDisplayMode
BigValueColorMode
BigValueGraphMode
BigValueJustifyMode
CompletionItemKind
EventsWithValidation
LegacyInputStatus
LegendDisplayMode
PieChartType
TableCellDisplayMode

Functions

FunctionDescription
AsyncMultiSelect(props)
AsyncSelect(props)
BracesPlugin()
ButtonSelect({ placeholder, icon, variant, size, className, disabled, …selectProps })
calculateFontSize(text, width, height, lineHeight, maxSize)
ClearPlugin()
ClipboardPlugin()
convertOldAngularValueMapping(panel)Convert the angular single stat mapping to new react style
FadeTransition(props)
Form({ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, maxWidth, })
getScrollbarWidth()
getTagColor(index)
getTagColorsFromName(name)Returns tag badge background and border colors based on hashed tag name.
IndentationPlugin()
measureText(text, fontSize)
MultiSelect(props)
NewlinePlugin()
RadioButtonGroup({ options, value, onChange, disabled, disabledOptions, size, fullWidth, })
renderOrCallToRender(itemToRender, props)Given react node or function returns element accordingly
resetSelectStyles()
RunnerPlugin({ handler })
Segment({ options, value, onChange, Component, className, allowCustomValue, placeholder, })
SegmentAsync({ value, onChange, loadOptions, Component, className, allowCustomValue, placeholder, })
SegmentInput({ value: initialValue, onChange, Component, className, placeholder, autofocus, })
SegmentSelect({ value, options, onChange, onClickOutside, width, noOptionsMessage, allowCustomValue, })
Select(props)
SelectionShortcutsPlugin()
sharedSingleStatMigrationHandler(panel)
sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions)
SlatePrism(optsParam)A Slate plugin to highlight code syntax.
SlideOutTransition(props)
stylesFactory(stylesCreator)Creates memoized version of styles creator
SuggestionsPlugin({ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, })
useTheme()
ValuePicker({ label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, })

Interfaces

InterfaceDescription
BadgeProps
BigValueSparkline
CascaderOption
CompletionItem
CompletionItemGroup
ContextMenuGroup
ContextMenuItem
ContextMenuProps
GraphSeriesTogglerAPI
GraphTooltipOptions
LegendBasicOptions
LegendItem
LegendOptions
LegendRenderOptions
SingleStatBaseOptions
StyleProps
SuggestionsState
TableSortByFieldState
Themeable
Token
TypeaheadInput
TypeaheadOutput
ValidationEvents
ValidationRule
VizRepeaterRenderValueProps

Namespaces

NamespaceDescription
DOMUtil
RadioButtonGroup
styleMixins

Variables

VariableDescription
Alert
ALERTING_COLOR
AlphaNotice
Badge
Button
ButtonCascader
CallToActionCard
Chart
Checkbox
CodeEditor
Collapse
ColorPicker
colors
ConfirmButton
ConfirmModal
Container
ContextMenu
ControlledCollapse
Counter
DataLinkInput
DataLinksContextMenu
DataLinksInlineEditor
DataSourceHttpSettings
DEFAULT_ANNOTATION_COLOR
DeleteButton
Drawer
EmptySearchResult
ErrorWithStack
FeatureInfoBox
Field
FieldConfigItemHeaderTitle
fieldMatchersUI
FieldSet
FileUpload
FilterPill
FullWidthButtonContainer
getAvailableIcons
getButtonStyles
getFormStyles
getLogRowStyles
getStandardFieldConfigsReturns collection of common field config properties definitions
getStandardOptionEditorsReturns collection of standard option editors definitions
getTheme
GraphContextMenu
GraphLegend
graphTickFormatter
graphTimeFormat
GraphWithLegend
hasValidationEvent
HorizontalGroup
Icon
IconButton
InlineFormLabel
Input
Label
LegacyForms
Legend
LegendList
LegendTable
LinkButton
linkModelToContextMenuItemsDelays creating links until we need to open the ContextMenu
LoadingPlaceholder
LogLabels
LogRows
makeFragment
makeValue
mockTheme
mockThemeContextEnables theme context mocking
Modal
ModalHeader
ModalRoot
ModalsController
ModalTabContent
ModalTabsHeader
NO_DATA_COLOR
NumberValueEditor
OK_COLOR
Pagination
PALETTE_COLUMNS
PALETTE_ROWS
PanelOptionsGrid
PanelOptionsGroup
PENDING_COLOR
RefreshPicker
regexValidation
REGION_FILL_ALPHA
SCHEMA
selectThemeVariant
SeriesColorPicker
SeriesColorPickerPopover
SeriesColorPickerPopoverWithTheme
SeriesIcon
Slider
sortedColors
Spinner
StringValueEditor
Switch
Tab
TabContent
Table
TabsBar
Tag
TagList
TextArea
ThemeContext
TimeOfDayPicker
TimeRangePicker
TimeZonePicker
ToggleButton
Tooltip
useStylesHook for using memoized styles with access to the theme.
validate
VerticalGroup
withTheme

Type Aliases

Type AliasDescription
AlertVariant
BadgeColor
ButtonProps
ButtonVariant
FormAPI
FormInputSize
IconName
IconSize
IconType
LegendPlacement
PopoverContent
Renderable
RenderFunction