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

Classes

ClassDescription
ansicolorRepresents an ANSI-escaped string.
BarGauge
BigValue
Cascader
ClickOutsideWrapper
ClipboardButton
ErrorBoundary
ErrorBoundaryAlert
Gauge
Graph
GraphSeriesToggler
JsonExplorerJsonExplorerJsonExplorer allows you to render JSON objects in HTML with a **collapsible** navigation.
JSONFormatter
List
LogMessageAnsi
ModalsProvider
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.
RefreshPicker
SelectValueEditor
SetInterval
StatsPicker
StringArrayEditor
ToggleButtonGroup
UnitPicker
VizRepeater

Enumerations

EnumerationDescription
BarGaugeDisplayMode
BigValueColorMode
BigValueGraphMode
BigValueJustifyMode
BigValueTextModeOptions for how the value & title are to be displayed
CompletionItemKind
EventsWithValidation
LegacyInputStatus
LegendDisplayMode
NodeGraphDataFrameFieldNames
PieChartLabels
PieChartLegendValues
PieChartType
TableCellDisplayMode

Functions

FunctionDescription
AsyncMultiSelect(props)
AsyncSelect(props)
BracesPlugin()
calculateFontSize(text, width, height, lineHeight, maxSize)(BETA)
ClearPlugin()
ClipboardPlugin()
convertOldAngularValueMapping(panel)Convert the angular single stat mapping to new react style
EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords })
FadeTransition(props)
Form({ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, maxWidth, …htmlProps })
getScrollbarWidth()
getTagColor(index)
getTagColorsFromName(name)Returns tag badge background and border colors based on hashed tag name.
getTextColorForBackground(color)
IndentationPlugin()
measureText(text, fontSize)(BETA)
Modal(props)
MultiSelect(props)
NewlinePlugin()
NodeGraph({ getLinks, dataFrames, nodeLimit })
RadioButtonGroup({ options, value, onChange, disabled, disabledOptions, size, className, fullWidth, })
renderOrCallToRender(itemToRender, props)Given react node or function returns element accordingly
resetSelectStyles()
RunnerPlugin({ handler })
Segment({ options, value, onChange, Component, className, allowCustomValue, placeholder, disabled, …rest })
SegmentAsync({ value, onChange, loadOptions, Component, className, allowCustomValue, disabled, placeholder, …rest })
SegmentInput({ value: initialValue, onChange, Component, className, placeholder, disabled, autofocus, …rest })
SegmentSelect({ value, options, onChange, onClickOutside, width, noOptionsMessage, allowCustomValue, …rest })
Select(props)
SelectionShortcutsPlugin()
sharedSingleStatMigrationHandler(panel)
sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions)
SlatePrism(optsParam, prismLanguages)A Slate plugin to highlight code syntax.
SlideOutTransition(props)
stylesFactory(stylesCreator)Creates memoized version of styles creator
SuggestionsPlugin({ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, })
TabbedContainer(props)
useStyles(getStyles)Hook for using memoized styles with access to the theme.NOTE: For memoization to work, you need to ensure that the function you pass in doesn’t change, or only if it needs to. (i.e. declare your style creator outside of a function component or use useCallback().)
useTheme()
ValuePicker({ label, icon, options, onChange, variant, size, isFullWidth, menuPlacement, })

Interfaces

InterfaceDescription
BadgeProps
CardInnerProps
CardProps
CascaderOption
CompletionItem
CompletionItemGroup
ContainerProps
ContextMenuProps
FieldArrayApi
GraphSeriesTogglerAPI
GraphTooltipOptions
LoadingPlaceholderProps
PieChartLegendOptions
SingleStatBaseOptions
SuggestionsState
TabConfig
TableSortByFieldState
Themeable
Token
TypeaheadInput
TypeaheadOutput
ValidationEvents
ValidationRule
VizLayoutComponentType(BETA)
VizLayoutLegendProps(BETA)
VizLayoutProps(BETA)
VizLegendItem
VizLegendOptions
VizRepeaterRenderValueProps

Namespaces

NamespaceDescription
DOMUtil
RadioButtonGroup
styleMixins

Variables

VariableDescription
Alert
AlphaNotice
Badge
BarChart
Button
ButtonCascader
ButtonGroup
CallToActionCard
CardGeneric card component
CertificationKey
Chart
Checkbox
ClickPlugin
CodeEditor
CollapsableSection
Collapse
ColorPicker
colors
ConfirmButton
ConfirmModal
Container
ContextMenu
ControlledCollapse
Counter
CustomScrollbarWraps component into component from react-custom-scrollbars
DataLinkInput
DataLinksContextMenu
DataLinksInlineEditor
DataSourceHttpSettings
defaultIntervals
DeleteButton
Drawer
EmptySearchResult
ErrorWithStack
FeatureBadge
FeatureInfoBox
Field
FieldArray
fieldMatchersUI
FieldSet
FieldValidationMessage
FileUpload
FilterPill
FIXED_UNIT
FormattedValueDisplay
FullWidthButtonContainer
getAvailableIcons
getCardStyles
getFormStyles
getLogRowStyles
getStandardFieldConfigsReturns collection of common field config properties definitions
getStandardOptionEditorsReturns collection of standard option editors definitions
getTheme
GraphNG
graphTickFormatter
graphTimeFormat
GraphWithLegend
hasValidationEvent
HorizontalGroup
Icon
IconButton
InfoBox
InlineField
InlineFieldRow
InlineFormLabel
InlineLabel
InlineSegmentGroup(BETA)
InlineSwitch
Input
InputControl
Label
LegacyForms
Legend
LinkButton
linkModelToContextMenuItemsDelays creating links until we need to open the ContextMenu
LoadingPlaceholder
LogLabels
LogRows
makeFragment
makeValue
Marker
mockTheme
mockThemeContextEnables theme context mocking
ModalHeader
ModalRoot
ModalsController
ModalTabsHeader
NumberValueEditor
Pagination
PieChart
RangeSliderRichHistoryQueriesTab uses this Range Component
regexValidation
SCHEMA
selectThemeVariant
SeriesColorPicker
SeriesColorPickerPopover
SeriesColorPickerPopoverWithTheme
SeriesIcon
Slider
SliderValueEditor
sortedColors
Spinner
StringValueEditor
Switch
Tab
TabContent
Table
TableInputCSV
TabsBar
Tag
TagList
TagsInput
TextArea
ThemeContext
TimeOfDayPicker
TimeRangeInput
TimeRangePicker
TimeZonePicker
TLSAuthSettings
ToggleButton
ToolbarButton
ToolbarButtonRow
Tooltip
TooltipContainer
usePlotContext
usePlotPluginContext
useRefreshAfterGraphRenderedForces re-render of a component when uPlots’s draw hook is fired. This hook is usefull in scenarios when you want to reposition XYCanvas elements when i.e. plot size changes
validate
VerticalGroup
VizLayout(BETA)
VizLegend
WithContextMenu
withTheme
XYCanvasRenders absolutely positioned element on top of the uPlot’s plotting area (axes are not included!). Useful when you want to render some overlay with canvas-independent elements on top of the plot.

Type Aliases

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