Skip to content

# Namespace: Component

Renderer.Component

## Table of contents

### Enumerations

- NotificationStatus
- TooltipPosition

### Classes

- Badge
- BarChart
- Button
- Checkbox
- CommandOverlay
- ConfirmDialog
- CubeSpinner
- Dialog
- Drawer
- DrawerItem
- DrawerParamToggler
- DrawerTitle
- Icon
- Input
- KubeEventDetails
- KubeObjectDetails
- KubeObjectListLayout
- KubeObjectMenu
- KubeObjectMeta
- LineProgress
- MainLayout
- Menu
- MenuActions
- MenuItem
- NamespaceSelect
- NamespaceSelectFilter
- Notifications
- NotificationsStore
- PageLayout
- PieChart
- PodDetailsList
- Radio
- RadioGroup
- SearchInput
- Select
- SettingLayout
- Slider
- Spinner
- StatusBrick
- Stepper
- SubTitle
- Tab
- Table
- TableCell
- TableHead
- TableRow
- Tabs
- Tooltip
- Wizard
- WizardLayout
- WizardStep

### Interfaces

- BadgeProps
- ButtonProps
- CheckboxProps
- ConfirmDialogBooleanParams
- ConfirmDialogParams
- ConfirmDialogProps
- CubeSpinnerProps
- DialogProps
- DrawerItemLabelsProps
- DrawerItemProps
- DrawerParamTogglerProps
- DrawerProps
- DrawerTitleProps
- GroupSelectOption
- IconProps
- InputValidator
- KubeEventDetailsProps
- KubeObjectDetailsProps
- KubeObjectListLayoutProps
- KubeObjectMenuProps
- KubeObjectMetaProps
- LineProgressProps
- MenuActionsProps
- MenuItemProps
- MenuPosition
- MenuProps
- Notification
- RadioGroupProps
- SelectOption
- SelectProps
- SettingLayoutProps
- SliderProps
- SpinnerProps
- StatusBrickProps
- StepperProps
- TabLayoutProps
- TabLayoutRoute
- TabProps
- TableCellProps
- TableHeadProps
- TableProps
- TableRowProps
- TabsProps
- TooltipContentFormatters
- TooltipDecoratorProps
- TooltipProps
- WizardLayoutProps
- WizardProps
- WizardStepProps

### Type aliases

- InputProps
- MenuContextValue
- NotificationId
- NotificationMessage
- RadioProps
- TableCellElem
- TableHeadElem
- TableOrderBy
- TableRowElem
- TableSortBy
- TableSortCallback
- TableSortCallbacks
- TableSortParams

### Variables

- InputValidators
- MenuContext
- Switcher
- cpuOptions
- kubeDetailsUrlParam
- kubeSelectedUrlParam
- logTabStore
- memoryOptions
- notificationsStore
- orderByUrlParam
- sortByUrlParam
- terminalStore

### Functions

- DrawerItemLabels
- FormSwitch
- SubMenu
- TabLayout
- createTerminalTab
- getDetailsUrl
- hideDetails
- showDetails
- withTooltip

## Type aliases

### InputProps

Ƭ InputProps<T>: `Omit`<InputElementProps, `"onChange"` | `"onSubmit"`> & { `autoSelectOnFocus?`: `boolean` ; `className?`: `string` ; `contentRight?`: `string` | `React.ReactNode` ; `dirty?`: `boolean` ; `iconLeft?`: `string` | `React.ReactNode` ; `iconRight?`: `string` | `React.ReactNode` ; `maxRows?`: `number` ; `multiLine?`: `boolean` ; `showErrorsAsTooltip?`: `boolean` | `Omit`<TooltipProps, `"targetId"`> ; `showValidationLine?`: `boolean` ; `theme?`: `"round-black"` | `"round"` ; `validators?`: InputValidator | InputValidator[] ; `value?`: `T` ; `onChange?`: (`value`: `T`, `evt`: `ChangeEvent`) => `void` ; `onSubmit?`: (`value`: `T`, `evt`: `KeyboardEvent`) => `void` }

#### Type parameters

Name | Type
--- | ---
`T` | `T` = `string`

### MenuContextValue

Ƭ MenuContextValue: Menu

### NotificationId

Ƭ NotificationId: `string` | `number`

### NotificationMessage

Ƭ NotificationMessage: `React.ReactNode` | `React.ReactNode`[] | `JsonApiErrorParsed`

### RadioProps

Ƭ RadioProps: `React.HTMLProps`<any> & { `checked?`: `boolean` ; `disabled?`: `boolean` ; `label?`: `React.ReactNode` | `any` ; `name?`: `string` ; `value?`: `any` ; `onChange?`: (`value`: `ChangeEvent`) => `void` }

### TableCellElem

Ƭ TableCellElem: `React.ReactElement`<TableCellProps>

### TableHeadElem

Ƭ TableHeadElem: `React.ReactElement`<TableHeadProps>

### TableOrderBy

Ƭ TableOrderBy: `"asc"` | `"desc"` | `string`

### TableRowElem

Ƭ TableRowElem: `React.ReactElement`<TableRowProps>

### TableSortBy

Ƭ TableSortBy: `string`

### TableSortCallback

Ƭ TableSortCallback: (`data`: `D`) => `string` | `number` | (`string` | `number`)[]

#### Type parameters

Name | Type
--- | ---
`D` | `D` = `any`

#### Type declaration

▸ (`data`): `string` | `number` | (`string` | `number`)[]

##### Parameters

Name | Type
--- | ---
`data` | `D`

##### Returns

`string` | `number` | (`string` | `number`)[]

### TableSortCallbacks

Ƭ TableSortCallbacks: `Object`

#### Index signature

▪ [columnId: `string`]: TableSortCallback

### TableSortParams

Ƭ TableSortParams: `Object`

#### Type declaration

Name | Type
--- | ---
`orderBy` | TableOrderBy
`sortBy` | TableSortBy

## Variables

### InputValidators

• InputValidators: `Object`

#### Type declaration

Name | Type
--- | ---
`accountId` | InputValidator
`isEmail` | InputValidator
`isExtensionNameInstall` | InputValidator
`isExtensionNameInstallRegex` | `RegExp`
`isNumber` | InputValidator
`isPath` | InputValidator
`isRequired` | InputValidator
`isUrl` | InputValidator
`maxLength` | InputValidator
`minLength` | InputValidator
`systemName` | InputValidator

### MenuContext

• `Const` MenuContext: `Context`<Menu>

### Switcher

• `Const` Switcher: `ComponentType`<`Pick`<Props, `"name"` | `"prefix"` | `"defaultValue"` | `"id"` | `"title"` | `"className"` | `"dangerouslySetInnerHTML"` | `"onCopy"` | `"onCopyCapture"` | `"onCut"` | `"onCutCapture"` | `"onPaste"` | `"onPasteCapture"` | `"onCompositionEnd"` | `"onCompositionEndCapture"` | `"onCompositionStart"` | `"onCompositionStartCapture"` | `"onCompositionUpdate"` | `"onCompositionUpdateCapture"` | `"onFocus"` | `"onFocusCapture"` | `"onBlur"` | `"onBlurCapture"` | `"onChange"` | `"onChangeCapture"` | `"onBeforeInput"` | `"onBeforeInputCapture"` | `"onInput"` | `"onInputCapture"` | `"onReset"` | `"onResetCapture"` | `"onSubmit"` | `"onSubmitCapture"` | `"onInvalid"` | `"onInvalidCapture"` | `"onLoad"` | `"onLoadCapture"` | `"onError"` | `"onErrorCapture"` | `"onKeyDown"` | `"onKeyDownCapture"` | `"onKeyPress"` | `"onKeyPressCapture"` | `"onKeyUp"` | `"onKeyUpCapture"` | `"onAbort"` | `"onAbortCapture"` | `"onCanPlay"` | `"onCanPlayCapture"` | `"onCanPlayThrough"` | `"onCanPlayThroughCapture"` | `"onDurationChange"` | `"onDurationChangeCapture"` | `"onEmptied"` | `"onEmptiedCapture"` | `"onEncrypted"` | `"onEncryptedCapture"` | `"onEnded"` | `"onEndedCapture"` | `"onLoadedData"` | `"onLoadedDataCapture"` | `"onLoadedMetadata"` | `"onLoadedMetadataCapture"` | `"onLoadStart"` | `"onLoadStartCapture"` | `"onPause"` | `"onPauseCapture"` | `"onPlay"` | `"onPlayCapture"` | `"onPlaying"` | `"onPlayingCapture"` | `"onProgress"` | `"onProgressCapture"` | `"onRateChange"` | `"onRateChangeCapture"` | `"onSeeked"` | `"onSeekedCapture"` | `"onSeeking"` | `"onSeekingCapture"` | `"onStalled"` | `"onStalledCapture"` | `"onSuspend"` | `"onSuspendCapture"` | `"onTimeUpdate"` | `"onTimeUpdateCapture"` | `"onVolumeChange"` | `"onVolumeChangeCapture"` | `"onWaiting"` | `"onWaitingCapture"` | `"onAuxClick"` | `"onAuxClickCapture"` | `"onClick"` | `"onClickCapture"` | `"onContextMenu"` | `"onContextMenuCapture"` | `"onDoubleClick"` | `"onDoubleClickCapture"` | `"onDrag"` | `"onDragCapture"` | `"onDragEnd"` | `"onDragEndCapture"` | `"onDragEnter"` | `"onDragEnterCapture"` | `"onDragExit"` | `"onDragExitCapture"` | `"onDragLeave"` | `"onDragLeaveCapture"` | `"onDragOver"` | `"onDragOverCapture"` | `"onDragStart"` | `"onDragStartCapture"` | `"onDrop"` | `"onDropCapture"` | `"onMouseDown"` | `"onMouseDownCapture"` | `"onMouseEnter"` | `"onMouseLeave"` | `"onMouseMove"` | `"onMouseMoveCapture"` | `"onMouseOut"` | `"onMouseOutCapture"` | `"onMouseOver"` | `"onMouseOverCapture"` | `"onMouseUp"` | `"onMouseUpCapture"` | `"onSelect"` | `"onSelectCapture"` | `"onTouchCancel"` | `"onTouchCancelCapture"` | `"onTouchEnd"` | `"onTouchEndCapture"` | `"onTouchMove"` | `"onTouchMoveCapture"` | `"onTouchStart"` | `"onTouchStartCapture"` | `"onPointerDown"` | `"onPointerDownCapture"` | `"onPointerMove"` | `"onPointerMoveCapture"` | `"onPointerUp"` | `"onPointerUpCapture"` | `"onPointerCancel"` | `"onPointerCancelCapture"` | `"onPointerEnter"` | `"onPointerEnterCapture"` | `"onPointerLeave"` | `"onPointerLeaveCapture"` | `"onPointerOver"` | `"onPointerOverCapture"` | `"onPointerOut"` | `"onPointerOutCapture"` | `"onGotPointerCapture"` | `"onGotPointerCaptureCapture"` | `"onLostPointerCapture"` | `"onLostPointerCaptureCapture"` | `"onScroll"` | `"onScrollCapture"` | `"onWheel"` | `"onWheelCapture"` | `"onAnimationStart"` | `"onAnimationStartCapture"` | `"onAnimationEnd"` | `"onAnimationEndCapture"` | `"onAnimationIteration"` | `"onAnimationIterationCapture"` | `"onTransitionEnd"` | `"onTransitionEndCapture"` | `"style"` | `"hidden"` | `"autoFocus"` | `"disabled"` | `"form"` | `"formAction"` | `"formEncType"` | `"formMethod"` | `"formNoValidate"` | `"formTarget"` | `"type"` | `"value"` | `"defaultChecked"` | `"suppressContentEditableWarning"` | `"suppressHydrationWarning"` | `"accessKey"` | `"contentEditable"` | `"contextMenu"` | `"dir"` | `"draggable"` | `"lang"` | `"placeholder"` | `"slot"` | `"spellCheck"` | `"tabIndex"` | `"translate"` | `"radioGroup"` | `"role"` | `"about"` | `"datatype"` | `"inlist"` | `"property"` | `"resource"` | `"typeof"` | `"vocab"` | `"autoCapitalize"` | `"autoCorrect"` | `"autoSave"` | `"color"` | `"itemProp"` | `"itemScope"` | `"itemType"` | `"itemID"` | `"itemRef"` | `"results"` | `"security"` | `"unselectable"` | `"inputMode"` | `"is"` | `"aria-activedescendant"` | `"aria-atomic"` | `"aria-autocomplete"` | `"aria-busy"` | `"aria-checked"` | `"aria-colcount"` | `"aria-colindex"` | `"aria-colspan"` | `"aria-controls"` | `"aria-current"` | `"aria-describedby"` | `"aria-details"` | `"aria-disabled"` | `"aria-dropeffect"` | `"aria-errormessage"` | `"aria-expanded"` | `"aria-flowto"` | `"aria-grabbed"` | `"aria-haspopup"` | `"aria-hidden"` | `"aria-invalid"` | `"aria-keyshortcuts"` | `"aria-label"` | `"aria-labelledby"` | `"aria-level"` | `"aria-live"` | `"aria-modal"` | `"aria-multiline"` | `"aria-multiselectable"` | `"aria-orientation"` | `"aria-owns"` | `"aria-placeholder"` | `"aria-posinset"` | `"aria-pressed"` | `"aria-readonly"` | `"aria-relevant"` | `"aria-required"` | `"aria-roledescription"` | `"aria-rowcount"` | `"aria-rowindex"` | `"aria-rowspan"` | `"aria-selected"` | `"aria-setsize"` | `"aria-sort"` | `"aria-valuemax"` | `"aria-valuemin"` | `"aria-valuenow"` | `"aria-valuetext"` | `"action"` | `"checked"` | `"readOnly"` | `"required"` | `"size"` | `"ref"` | `"key"` | `"innerRef"` | `"icon"` | `"checkedIcon"` | `"disableFocusRipple"` | `"edge"` | `"buttonRef"` | `"centerRipple"` | `"disableRipple"` | `"disableTouchRipple"` | `"focusRipple"` | `"focusVisibleClassName"` | `"onFocusVisible"` | `"TouchRippleProps"` | `"inputProps"` | `"inputRef"`> & `StyledComponentProps`<`"checked"` | `"track"` | `"root"` | `"thumb"` | `"focusVisible"` | `"switchBase"`>>

### cpuOptions

• `Const` cpuOptions: `ChartOptions`

### kubeDetailsUrlParam

• `Const` kubeDetailsUrlParam: PageParam<string>

Used to store `object.selfLink` to show more info about resource in the details panel.

### kubeSelectedUrlParam

• `Const` kubeSelectedUrlParam: PageParam<string>

Used to highlight last active/selected table row with the resource.

`example` If we go to "Nodes (page) -> Node (details) -> Pod (details)", last clicked Node should be "active" while Pod details are shown).

### logTabStore

• `Const` logTabStore: `LogTabStore`

### memoryOptions

• `Const` memoryOptions: `ChartOptions`

### notificationsStore

• `Const` notificationsStore: NotificationsStore

### orderByUrlParam

• `Const` orderByUrlParam: PageParam<string>

### sortByUrlParam

• `Const` sortByUrlParam: PageParam<string>

### terminalStore

• `Const` terminalStore: `TerminalStore`

## Functions

### DrawerItemLabels

▸ DrawerItemLabels(`props`): `Element`

#### Parameters

Name | Type
--- | ---
`props` | DrawerItemLabelsProps

#### Returns

`Element`

### FormSwitch

▸ FormSwitch(`props`): `Element`

#### Parameters

Name | Type
--- | ---
`props` | `FormControlLabelProps`

#### Returns

`Element`

### SubMenu

▸ SubMenu(`props`): `Element`

#### Parameters

Name | Type
--- | ---
`props` | `Partial`<MenuProps>

#### Returns

`Element`

### TabLayout

▸ `Const` TabLayout(`__namedParameters`): `Element`

#### Parameters

Name | Type
--- | ---
`__namedParameters` | TabLayoutProps

#### Returns

`Element`

### createTerminalTab

▸ createTerminalTab(`tabParams?`): `IDockTab`

#### Parameters

Name | Type
--- | ---
`tabParams` | `Partial`<ITerminalTab>

#### Returns

`IDockTab`

### getDetailsUrl

▸ getDetailsUrl(`selfLink`, `resetSelected?`, `mergeGlobals?`): `string`

#### Parameters

Name | Type | Default value
--- | --- | ---
`selfLink` | `string` | `undefined`
`resetSelected` | `boolean` | false
`mergeGlobals` | `boolean` | true

#### Returns

`string`

### hideDetails

▸ hideDetails(): `void`

#### Returns

`void`

### showDetails

▸ showDetails(`selfLink?`, `resetSelected?`): `void`

#### Parameters

Name | Type | Default value
--- | --- | ---
`selfLink` | `string` | ""
`resetSelected` | `boolean` | true

#### Returns

`void`

### withTooltip

▸ withTooltip<T>(`Target`): `T`

#### Type parameters

Name | Type
--- | ---
`T` | `T`: `ComponentType`<any>

#### Parameters

Name | Type
--- | ---
`Target` | `T`

#### Returns

`T`