List of implemented widgets:
BarChart express quantities through a bar's length, using a common baseline. Bar charts series should contain a data property containing an array of values
| Property | Required | Description | Type |
|---|---|---|---|
| data | yes | Array of grouped data entries for the bar chart | array |
| data[].label | no | Label for the group/category | string |
| data[].bars | yes | Bars within the group, each representing a value | array |
| data[].bars[].value | yes | Label or identifier for the bar | string |
| data[].bars[].percentage | yes | Height of the bar as a percentage (0–100) | integer |
| data[].bars[].color | no | Color of the bar | blue | darkBlue | orange | gray | red | green | violet |
Button represents an interactive component which, when clicked, triggers a specific business logic defined by its clickActionId
| Property | Required | Description | Type |
|---|---|---|---|
| actions | yes | the actions of the widget | object |
| actions.rest | no | rest api call actions triggered by the widget | array |
| actions.rest[].payloadKey | no | DEPRECATED key used to nest the payload in the request body | string |
| actions.rest[].id | yes | unique identifier for the action | string |
| actions.rest[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.rest[].requireConfirmation | no | whether user confirmation is required before triggering the action | boolean |
| actions.rest[].errorMessage | no | a message that will be displayed inside a toast in case of error | string |
| actions.rest[].successMessage | no | a message that will be displayed inside a toast in case of success | string |
| actions.rest[].onSuccessNavigateTo | no | url to navigate to after successful execution | string |
| actions.rest[].onEventNavigateTo | no | conditional navigation triggered by a specific event | object |
| actions.rest[].onEventNavigateTo.eventReason | yes | identifier of the awaited event reason | string |
| actions.rest[].onEventNavigateTo.url | yes | url to navigate to when the event is received | string |
| actions.rest[].onEventNavigateTo.timeout | no | the timeout in seconds to wait for the event | integer |
| actions.rest[].onEventNavigateTo.reloadRoutes | no | boolean | |
| actions.rest[].onEventNavigateTo.loadingMessage | no | message to display while waiting for the event | string |
| actions.rest[].type | yes | type of action to execute | rest |
| actions.rest[].headers | yes | array of headers as strings, format 'key: value' | array |
| actions.rest[].payload | no | static payload sent with the request | object |
| actions.rest[].payloadToOverride | no | list of payload fields to override dynamically | array |
| actions.rest[].payloadToOverride[].name | yes | name of the field to override | string |
| actions.rest[].payloadToOverride[].value | yes | value to use for overriding the field | string |
| actions.rest[].loading | no | object | |
| actions.rest[].loading.display | yes | boolean | |
| actions.navigate | no | client-side navigation actions | array |
| actions.navigate[].id | yes | unique identifier for the action | string |
| actions.navigate[].loading | no | object | |
| actions.navigate[].loading.display | yes | boolean | |
| actions.navigate[].path | no | the identifier of the route to navigate to | string |
| actions.navigate[].resourceRefId | no | the identifier of the k8s custom resource that should be represented | string |
| actions.navigate[].resourceURLPathExtension | no | optional additional string URL path appended to the current URL when navigating to a resource via resourceRefId | string |
| actions.navigate[].requireConfirmation | no | whether user confirmation is required before navigating | boolean |
| actions.navigate[].type | yes | type of navigation action | navigate |
| actions.openDrawer | no | actions to open side drawer components | array |
| actions.openDrawer[].id | yes | unique identifier for the drawer action | string |
| actions.openDrawer[].type | yes | type of drawer action | openDrawer |
| actions.openDrawer[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.openDrawer[].requireConfirmation | no | whether user confirmation is required before opening | boolean |
| actions.openDrawer[].size | no | drawer size to be displayed | default | large |
| actions.openDrawer[].title | no | title shown in the drawer header | string |
| actions.openDrawer[].loading | no | object | |
| actions.openDrawer[].loading.display | yes | boolean | |
| actions.openModal | no | actions to open modal dialog components | array |
| actions.openModal[].id | yes | unique identifier for the modal action | string |
| actions.openModal[].type | yes | type of modal action | openModal |
| actions.openModal[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.openModal[].requireConfirmation | no | whether user confirmation is required before opening | boolean |
| actions.openModal[].title | no | title shown in the modal header | string |
| actions.openModal[].loading | no | object | |
| actions.openModal[].loading.display | yes | boolean | |
| actions.openModal[].customWidth | no | the custom width of the value, which should be used by setting the 'custom' value inside the 'size' property | string |
| actions.openModal[].size | no | sets the Modal size, 'default' is 520px, 'large' is 80% of the screen width, 'fullscreen' is 100% of the screen width, 'custom' should be used with the 'customWidth' property | default | large | fullscreen | custom |
| backgroundColor | no | the background color of the button | blue | darkBlue | orange | gray | red | green | violet |
| color | no | DEPRECATED the color of the button | default | primary | danger | blue | purple | cyan | green | magenta | pink | red | orange | yellow | volcano | geekblue | lime | gold |
| label | no | the label of the button | string |
| icon | no | the icon of the button (font awesome icon name eg: fa-inbox) |
string |
| shape | no | the shape of the button | default | circle | round |
| size | no | the size of the button | small | middle | large |
| type | no | the visual style of the button | default | text | link | primary | dashed |
| clickActionId | yes | the id of the action to be executed when the button is clicked | string |
name of the k8s Custom Resource
| Property | Required | Description | Type |
|---|---|---|---|
| alignment | no | the alignment of the element inside the ButtonGroup. Default is 'left' | center | left | right |
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| gap | no | the spacing between the items of the ButtonGroup. Default is 'small' | extra-small | small | medium | large |
| items | yes | the items of the ButtonGroup | array |
| items[].resourceRefId | yes | string |
Column is a layout component that arranges its children in a vertical stack, aligning them one above the other with spacing between them
| Property | Required | Description | Type |
|---|---|---|---|
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| items | yes | the items of the column | array |
| items[].resourceRefId | yes | the identifier of the k8s Custom Resource that should be represented, usually a widget | string |
| size | no | the number of cells that the column will occupy, from 0 (not displayed) to 24 (occupies all space) | integer |
DataGrid is a layout component that renders its children as a responsive list or grid
| Property | Required | Description | Type |
|---|---|---|---|
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| asGrid | no | to show children as list or grid | boolean |
| grid | no | The grid type of list. You can set grid to something like {gutter: 16, column: 4} or specify the integer for columns based on their size, e.g. sm, md, etc. to make it responsive. | object |
| grid.gutter | no | The spacing between grid | integer |
| grid.column | no | The column of grid | integer |
| grid.xs | no | <576px column of grid | integer |
| grid.sm | no | ≥576px column of grid | integer |
| grid.md | no | ≥768px column of grid | integer |
| grid.lg | no | ≥992px column of grid | integer |
| grid.xl | no | ≥1200px column of grid | integer |
| grid.xxl | no | ≥1600px column of grid | integer |
| items | yes | array | |
| items[].resourceRefId | yes | string | |
| prefix | no | it's the filters prefix to get right values | string |
EventList renders data coming from a Kubernetes cluster or Server Sent Events associated to a specific endpoint and topic
| Property | Required | Description | Type |
|---|---|---|---|
| events | yes | list of events received from a k8s cluster or server sent event | array |
| events[].global_uid | yes | unique identifier of the event | string |
| events[].cluster_name | yes | name of the cluster | string |
| events[].namespace | yes | namespace the event belongs to | string |
| events[].resource_kind | yes | resource type involved | string |
| events[].resource_name | yes | unique name of the resource | string |
| events[].event_type | yes | type of the event, e.g., normal or warning | Normal | Warning |
| events[].reason | yes | reason or cause of the event | string |
| events[].message | yes | descriptive message of the event | string |
| events[].created_at | yes | creation date and time of the event | string |
| events[].raw | yes | raw content of the event | string |
| prefix | no | filter prefix used to filter data | string |
| sseEndpoint | no | endpoint url for server sent events connection | string |
| sseTopic | no | subscription topic for server sent events | string |
| Property | Required | Description | Type |
|---|---|---|---|
| prefix | yes | the prefix to share filters values to other widgets | string |
| fields | yes | it defines the filters as fields of a Form | array |
| fields[].label | yes | the label of the field | string |
| fields[].name | yes | the name of the filter field, it must to be identical to the widget prop name to filter or data in dataset | array |
| fields[].description | no | text to show as tooltip | string |
| fields[].type | yes | it's the filter field type, to render input, select, radio buttons, date picker or daterange picker | string | boolean | number | date | daterange |
| fields[].options | no | they're the options for select or radio, the type must be 'string' | array |
For additional information about the
Filtersconfiguration, please visit this page.
FlowChart represents a Kubernetes composition as a directed graph. Each node represents a resource, and edges indicate parent-child relationships
| Property | Required | Description | Type |
|---|---|---|---|
| data | no | list of kubernetes resources and their relationships to render as nodes in the flow chart | array |
| data[].date | yes | optional date value to be shown in the node, formatted as ISO 8601 string | string |
| data[].icon | no | custom icon displayed for the resource node | object |
| data[].icon.name | no | FontAwesome icon class name (e.g. 'fa-check') | string |
| data[].icon.color | no | CSS color value for the icon background | blue | darkBlue | orange | gray | red | green | violet |
| data[].icon.message | no | optional tooltip message displayed on hover | string |
| data[].statusIcon | no | custom status icon displayed alongside resource info | object |
| data[].statusIcon.name | no | FontAwesome icon class name representing status | string |
| data[].statusIcon.color | no | CSS color value for the status icon background | blue | darkBlue | orange | gray | red | green | violet |
| data[].statusIcon.message | no | optional tooltip message describing the status | string |
| data[].kind | yes | kubernetes resource type (e.g. Deployment, Service) | string |
| data[].name | yes | name of the resource | string |
| data[].namespace | yes | namespace in which the resource is defined | string |
| data[].parentRefs | no | list of parent resources used to define graph relationships | array |
| data[].parentRefs[].date | no | optional date value to be shown in the node, formatted as ISO 8601 string | string |
| data[].parentRefs[].icon | no | custom icon for the parent resource | object |
| data[].parentRefs[].icon.name | no | FontAwesome icon class name | string |
| data[].parentRefs[].icon.color | no | CSS color value for the icon background | blue | darkBlue | orange | gray | red | green | violet |
| data[].parentRefs[].icon.message | no | optional tooltip message | string |
| data[].parentRefs[].statusIcon | no | custom status icon for the parent resource | object |
| data[].parentRefs[].statusIcon.name | no | FontAwesome icon class name | string |
| data[].parentRefs[].statusIcon.color | no | CSS color value for the status icon background | blue | darkBlue | orange | gray | red | green | violet |
| data[].parentRefs[].statusIcon.message | no | optional tooltip message | string |
| data[].parentRefs[].kind | no | resource type of the parent | string |
| data[].parentRefs[].name | no | name of the parent resource | string |
| data[].parentRefs[].namespace | no | namespace of the parent resource | string |
| data[].parentRefs[].parentRefs | no | nested parent references for recursive relationships | array |
| data[].parentRefs[].resourceVersion | no | internal version string of the parent resource | string |
| data[].parentRefs[].uid | no | unique identifier of the parent resource | string |
| data[].parentRefs[].version | no | api version of the parent resource | string |
| data[].resourceVersion | yes | internal version string of the resource | string |
| data[].uid | yes | unique identifier of the resource | string |
| data[].version | yes | api version of the resource | string |
name of the k8s Custom Resource
| Property | Required | Description | Type |
|---|---|---|---|
| actions | yes | the actions of the widget | object |
| actions.rest | no | rest api call actions triggered by the widget | array |
| actions.rest[].payloadKey | no | DEPRECATED key used to nest the payload in the request body | string |
| actions.rest[].headers | yes | array of headers as strings, format 'key: value' | array |
| actions.rest[].id | yes | unique identifier for the action | string |
| actions.rest[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.rest[].requireConfirmation | no | whether user confirmation is required before triggering the action | boolean |
| actions.rest[].onSuccessNavigateTo | no | url to navigate to after successful execution | string |
| actions.rest[].errorMessage | no | a message that will be displayed inside a toast in case of error | string |
| actions.rest[].successMessage | no | a message that will be displayed inside a toast in case of success | string |
| actions.rest[].onEventNavigateTo | no | conditional navigation triggered by a specific event | object |
| actions.rest[].onEventNavigateTo.eventReason | yes | identifier of the awaited event reason | string |
| actions.rest[].onEventNavigateTo.url | yes | url to navigate to when the event is received | string |
| actions.rest[].onEventNavigateTo.timeout | no | the timeout in seconds to wait for the event | integer |
| actions.rest[].onEventNavigateTo.reloadRoutes | no | boolean | |
| actions.rest[].onEventNavigateTo.loadingMessage | no | message to display while waiting for the event | string |
| actions.rest[].type | yes | type of action to execute | rest |
| actions.rest[].payload | no | static payload sent with the request | object |
| actions.rest[].payloadToOverride | no | list of payload fields to override dynamically | array |
| actions.rest[].payloadToOverride[].name | yes | name of the field to override | string |
| actions.rest[].payloadToOverride[].value | yes | value to use for overriding the field | string |
| actions.rest[].loading | no | object | |
| actions.rest[].loading.display | yes | boolean | |
| actions.navigate | no | client-side navigation actions | array |
| actions.navigate[].id | yes | unique identifier for the action | string |
| actions.navigate[].loading | no | object | |
| actions.navigate[].loading.display | yes | boolean | |
| actions.navigate[].path | no | the identifier of the route to navigate to | string |
| actions.navigate[].resourceRefId | no | the identifier of the k8s custom resource that should be represented | string |
| actions.navigate[].resourceURLPathExtension | no | optional additional string URL path appended to the current URL when navigating to a resource via resourceRefId | string |
| actions.navigate[].requireConfirmation | no | whether user confirmation is required before navigating | boolean |
| actions.navigate[].type | yes | type of navigation action | navigate |
| actions.openDrawer | no | actions to open side drawer components | array |
| actions.openDrawer[].id | yes | unique identifier for the drawer action | string |
| actions.openDrawer[].type | yes | type of drawer action | openDrawer |
| actions.openDrawer[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.openDrawer[].requireConfirmation | no | whether user confirmation is required before opening | boolean |
| actions.openDrawer[].size | no | drawer size to be displayed | default | large |
| actions.openDrawer[].title | no | title shown in the drawer header | string |
| actions.openDrawer[].loading | no | object | |
| actions.openDrawer[].loading.display | yes | boolean | |
| actions.openModal | no | actions to open modal dialog components | array |
| actions.openModal[].id | yes | unique identifier for the modal action | string |
| actions.openModal[].type | yes | type of modal action | openModal |
| actions.openModal[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.openModal[].requireConfirmation | no | whether user confirmation is required before opening | boolean |
| actions.openModal[].title | no | title shown in the modal header | string |
| actions.openModal[].loading | no | object | |
| actions.openModal[].loading.display | yes | boolean | |
| actions.openModal[].customWidth | no | the custom width of the value, which should be used by setting the 'custom' value inside the 'size' property | string |
| actions.openModal[].size | no | sets the Modal size, 'default' is 520px, 'large' is 80% of the screen width, 'fullscreen' is 100% of the screen width, 'custom' should be used with the 'customWidth' property | default | large | fullscreen | custom |
| buttonConfig | no | custom labels and icons for form buttons | object |
| buttonConfig.primary | no | primary button configuration | object |
| buttonConfig.primary.label | no | text label for primary button | string |
| buttonConfig.primary.icon | no | icon name for primary button | string |
| buttonConfig.secondary | no | secondary button configuration | object |
| buttonConfig.secondary.label | no | text label for secondary button | string |
| buttonConfig.secondary.icon | no | icon name for secondary button | string |
| initialValues | no | optional object with initial values for form fields. Keys should match form field names (supports nested objects). These values override schema defaults. | object |
| schema | no | the schema of the form as an object | object |
| stringSchema | no | the schema of the form as a string | string |
| submitActionId | yes | the id of the action to be called when the form is submitted | string |
| fieldDescription | no | the displaying mode of the field description, default is inline but it could also be displayed as a tooltip | tooltip | inline |
| autocomplete | no | Configuration for the Autocomplete form fields. The field options could be configured using enum values coming from the schema or via an API call made using a RESTAction which sould be defined below. The RESTActions shuold contain a status field, which is an array of object with the { label, value } format. |
array |
| autocomplete[].extra | no | parameter to be added to the RESTAction call | object |
| autocomplete[].extra.key | yes | the key of the additional parameter | string |
| autocomplete[].name | yes | the name of the autocomplete field | string |
| autocomplete[].resourceRefId | no | the identifier of the RESTAction that should be called to retrieve autocomplete data | string |
| dependencies | no | Configuration for the form fields who are dependent from other form fields. The field options are set via an API call made using a RESTAction which sould be defined below. The RESTActions shuold contain a status field, which is an array of object with the { label, value } format. |
array |
| dependencies[].dependsOn | yes | the field on which this field depends on | object |
| dependencies[].dependsOn.name | yes | the name of the field on which this field depends on | string |
| dependencies[].extra | yes | parameter to be added to the RESTAction call | object |
| dependencies[].extra.key | yes | the key of the additional parameter | string |
| dependencies[].name | yes | the name of the autocomplete field | string |
| dependencies[].resourceRefId | yes | the identifier of the RESTAction that should be called to retrieve dependency data | string |
| objectFields | no | configuration for object fields in the form | array |
| objectFields[].path | yes | the path of the object field | string |
| objectFields[].displayField | yes | the field to display in the objects list | string |
| displayMenu | no | Displays a side menu with clickable anchor links for each field, allowing users to scroll to the selected field. If not specified, the menu is displayed by default. | boolean |
For additional information about the
autocompleteanddependenciesproperties configuration, please visit this page.
For additional information about the
initialValuesproperty configuration, please visit this page.
LineChart displays a customizable line chart based on time series or numerical data. It supports multiple lines with colored coordinates and axis labels, typically used to visualize metrics from Kubernetes resources
| Property | Required | Description | Type |
|---|---|---|---|
| lines | yes | list of data series to be rendered as individual lines | array |
| lines[].name | no | label of the line displayed in the legend | string |
| lines[].color | no | color used to render the line | blue | darkBlue | orange | gray | red | green | violet |
| lines[].coords | no | data points that define the line | array |
| lines[].coords[].xAxis | yes | value on the x axis | string |
| lines[].coords[].yAxis | yes | value on the y axis | string |
| xAxisName | no | label for the x axis | string |
| yAxisName | no | label for the y axis | string |
Markdown receives markdown in string format and renders it gracefully
| Property | Required | Description | Type |
|---|---|---|---|
| allowCopy | no | displays a copy button on top of the widget to allow copy to clipboard | boolean |
| allowDownload | no | displays a download button on top of the widget to allow download of the text | boolean |
| downloadFileExtension | no | if 'allowDownload' is set, this property allows to set an extension for the downloaded file. Default is .txt | string |
| markdown | yes | markdown string to be displayed | string |
NavMenu is a container for NavMenuItem widgets, which are used to setup navigation inside the application
| Property | Required | Description | Type |
|---|---|---|---|
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| items | yes | list of navigation entries each pointing to a k8s custom resource | array |
| items[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented, usually a NavMenuItem | string |
NavMenuItem represents a single item in the navigation menu and links to a specific resource and route in the application
| Property | Required | Description | Type |
|---|---|---|---|
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| icon | yes | name of the icon to display alongside the label (font awesome icon name eg: fa-inbox) |
string |
| label | yes | text displayed as the menu item's label | string |
| order | no | a weight to be used to sort the items in the menu | integer |
| path | yes | route path to navigate to when the menu item is clicked | string |
| resourceRefId | yes | the identifier of the k8s custom resource that should be represented, usually a widget | string |
Page is a wrapper component, placed at the top of the component tree, that wraps and renders all nested components.
| Property | Required | Description | Type |
|---|---|---|---|
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| items | yes | list of resources to be rendered within the route | array |
| items[].resourceRefId | yes | the identifier of the k8s custom resource that should be rendered, usually a widget | string |
| title | no | title of the page shown in the browser tab | string |
Panel is a container to display information
| Property | Required | Description | Type |
|---|---|---|---|
| actions | yes | the actions of the widget | object |
| actions.rest | no | rest api call actions triggered by the widget | array |
| actions.rest[].payloadKey | no | DEPRECATED key used to nest the payload in the request body | string |
| actions.rest[].headers | yes | array of headers as strings, format 'key: value' | array |
| actions.rest[].id | yes | unique identifier for the action | string |
| actions.rest[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.rest[].requireConfirmation | no | whether user confirmation is required before triggering the action | boolean |
| actions.rest[].onSuccessNavigateTo | no | url to navigate to after successful execution | string |
| actions.rest[].errorMessage | no | a message that will be displayed inside a toast in case of error | string |
| actions.rest[].successMessage | no | a message that will be displayed inside a toast in case of success | string |
| actions.rest[].onEventNavigateTo | no | conditional navigation triggered by a specific event | object |
| actions.rest[].onEventNavigateTo.eventReason | yes | identifier of the awaited event reason | string |
| actions.rest[].onEventNavigateTo.url | yes | url to navigate to when the event is received | string |
| actions.rest[].onEventNavigateTo.timeout | no | the timeout in seconds to wait for the event | integer |
| actions.rest[].onEventNavigateTo.reloadRoutes | no | boolean | |
| actions.rest[].onEventNavigateTo.loadingMessage | no | message to display while waiting for the event | string |
| actions.rest[].type | yes | type of action to execute | rest |
| actions.rest[].payload | no | static payload sent with the request | object |
| actions.rest[].payloadToOverride | no | list of payload fields to override dynamically | array |
| actions.rest[].payloadToOverride[].name | yes | name of the field to override | string |
| actions.rest[].payloadToOverride[].value | yes | value to use for overriding the field | string |
| actions.rest[].loading | no | object | |
| actions.rest[].loading.display | yes | boolean | |
| actions.navigate | no | client-side navigation actions | array |
| actions.navigate[].id | yes | unique identifier for the action | string |
| actions.navigate[].loading | no | object | |
| actions.navigate[].loading.display | yes | boolean | |
| actions.navigate[].path | no | the identifier of the route to navigate to | string |
| actions.navigate[].resourceRefId | no | the identifier of the k8s custom resource that should be represented | string |
| actions.navigate[].resourceURLPathExtension | no | optional additional string URL path appended to the current URL when navigating to a resource via resourceRefId | string |
| actions.navigate[].requireConfirmation | no | whether user confirmation is required before navigating | boolean |
| actions.navigate[].type | yes | type of navigation action | navigate |
| actions.openDrawer | no | actions to open side drawer components | array |
| actions.openDrawer[].id | yes | unique identifier for the drawer action | string |
| actions.openDrawer[].type | yes | type of drawer action | openDrawer |
| actions.openDrawer[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.openDrawer[].requireConfirmation | no | whether user confirmation is required before opening | boolean |
| actions.openDrawer[].size | no | drawer size to be displayed | default | large |
| actions.openDrawer[].title | no | title shown in the drawer header | string |
| actions.openDrawer[].loading | no | object | |
| actions.openDrawer[].loading.display | yes | boolean | |
| actions.openModal | no | actions to open modal dialog components | array |
| actions.openModal[].id | yes | unique identifier for the modal action | string |
| actions.openModal[].type | yes | type of modal action | openModal |
| actions.openModal[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.openModal[].requireConfirmation | no | whether user confirmation is required before opening | boolean |
| actions.openModal[].title | no | title shown in the modal header | string |
| actions.openModal[].loading | no | object | |
| actions.openModal[].loading.display | yes | boolean | |
| actions.openModal[].customWidth | no | the custom width of the value, which should be used by setting the 'custom' value inside the 'size' property | string |
| actions.openModal[].size | no | sets the Modal size, 'default' is 520px, 'large' is 80% of the screen width, 'fullscreen' is 100% of the screen width, 'custom' should be used with the 'customWidth' property | default | large | fullscreen | custom |
| clickActionId | no | the id of the action to be executed when the panel is clicked | string |
| footer | no | footer section of the panel containing additional items | array |
| footer[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented, usually a widget | string |
| headerLeft | no | optional text to be displayed under the title, on the left side of the Panel | string |
| headerRight | no | optional text to be displayed under the title, on the right side of the Panel | string |
| icon | no | icon displayed in the panel header | object |
| icon.name | yes | name of the icon to display (font awesome icon name eg: fa-inbox) |
string |
| icon.color | no | color of the icon | string |
| items | yes | list of resource references to display as main content in the panel | array |
| items[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented, usually a widget | string |
| tags | no | list of string tags to be displayed in the footer | array |
| title | no | text to be displayed as the panel title | string |
| tooltip | no | optional tooltip text shown on the top right side of the card to provide additional context | string |
Paragraph is a simple component used to display a block of text
| Property | Required | Description | Type |
|---|---|---|---|
| text | yes | the content of the paragraph to be displayed | string |
PieChart is a visual component used to display categorical data as segments of a pie chart
| Property | Required | Description | Type |
|---|---|---|---|
| title | yes | title displayed above the chart | string |
| description | no | supplementary text displayed below or near the title | string |
| series | no | data to be visualized in the pie chart | object |
| series.total | yes | sum of all data values, used to calculate segment sizes | integer |
| series.data | yes | individual segments of the pie chart | array |
| series.data[].color | yes | color used to represent the segment | blue | darkBlue | orange | gray | red | green | violet |
| series.data[].value | yes | numeric value for the segment | integer |
| series.data[].label | yes | label for the segment | string |
Route is a configuration to map a path to show in the frontend URL to a resource, it doesn't render anything by itself
| Property | Required | Description | Type |
|---|---|---|---|
| path | yes | the url path to that loads the resource | string |
| resourceRefId | yes | the id matching the resource in the resourcesRefs array, must of kind page | string |
RoutesLoader loads the Route widgets it doesn't render anything by itself
| Property | Required | Description | Type |
|---|---|---|---|
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
Row is a layout component that arranges its children horizontally with spacing between them
| Property | Required | Description | Type |
|---|---|---|---|
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| alignment | no | the alignment of the element inside the row. Default is 'center' | bottom | center | top |
| items | yes | the items of the row | array |
| items[].resourceRefId | yes | string | |
| items[].size | no | the number of cells that the item will occupy, from 0 (not displayed) to 24 (occupies all space) | integer |
| items[].alignment | no | the alignment of the element inside the cell. Default is 'left' | center | left | right |
Table displays structured data with customizable columns and pagination
| Property | Required | Description | Type |
|---|---|---|---|
| actions | no | the actions of the widget | object |
| actions.rest | no | rest api call actions triggered by the widget | array |
| actions.rest[].payloadKey | no | DEPRECATED key used to nest the payload in the request body | string |
| actions.rest[].id | yes | unique identifier for the action | string |
| actions.rest[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.rest[].requireConfirmation | no | whether user confirmation is required before triggering the action | boolean |
| actions.rest[].errorMessage | no | a message that will be displayed inside a toast in case of error | string |
| actions.rest[].successMessage | no | a message that will be displayed inside a toast in case of success | string |
| actions.rest[].onSuccessNavigateTo | no | url to navigate to after successful execution | string |
| actions.rest[].onEventNavigateTo | no | conditional navigation triggered by a specific event | object |
| actions.rest[].onEventNavigateTo.eventReason | yes | identifier of the awaited event reason | string |
| actions.rest[].onEventNavigateTo.url | yes | url to navigate to when the event is received | string |
| actions.rest[].onEventNavigateTo.timeout | no | the timeout in seconds to wait for the event | integer |
| actions.rest[].onEventNavigateTo.reloadRoutes | no | boolean | |
| actions.rest[].onEventNavigateTo.loadingMessage | no | message to display while waiting for the event | string |
| actions.rest[].type | yes | type of action to execute | rest |
| actions.rest[].headers | yes | array of headers as strings, format 'key: value' | array |
| actions.rest[].payload | no | static payload sent with the request | object |
| actions.rest[].payloadToOverride | no | list of payload fields to override dynamically | array |
| actions.rest[].payloadToOverride[].name | yes | name of the field to override | string |
| actions.rest[].payloadToOverride[].value | yes | value to use for overriding the field | string |
| actions.rest[].loading | no | object | |
| actions.rest[].loading.display | yes | boolean | |
| actions.navigate | no | client-side navigation actions | array |
| actions.navigate[].id | yes | unique identifier for the action | string |
| actions.navigate[].loading | no | object | |
| actions.navigate[].loading.display | yes | boolean | |
| actions.navigate[].path | no | the identifier of the route to navigate to | string |
| actions.navigate[].resourceRefId | no | the identifier of the k8s custom resource that should be represented | string |
| actions.navigate[].resourceURLPathExtension | no | optional additional string URL path appended to the current URL when navigating to a resource via resourceRefId | string |
| actions.navigate[].requireConfirmation | no | whether user confirmation is required before navigating | boolean |
| actions.navigate[].type | yes | type of navigation action | navigate |
| actions.openDrawer | no | actions to open side drawer components | array |
| actions.openDrawer[].id | yes | unique identifier for the drawer action | string |
| actions.openDrawer[].type | yes | type of drawer action | openDrawer |
| actions.openDrawer[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.openDrawer[].requireConfirmation | no | whether user confirmation is required before opening | boolean |
| actions.openDrawer[].size | no | drawer size to be displayed | default | large |
| actions.openDrawer[].title | no | title shown in the drawer header | string |
| actions.openDrawer[].loading | no | object | |
| actions.openDrawer[].loading.display | yes | boolean | |
| actions.openModal | no | actions to open modal dialog components | array |
| actions.openModal[].id | yes | unique identifier for the modal action | string |
| actions.openModal[].type | yes | type of modal action | openModal |
| actions.openModal[].resourceRefId | yes | the identifier of the k8s custom resource that should be represented | string |
| actions.openModal[].requireConfirmation | no | whether user confirmation is required before opening | boolean |
| actions.openModal[].title | no | title shown in the modal header | string |
| actions.openModal[].loading | no | object | |
| actions.openModal[].loading.display | yes | boolean | |
| actions.openModal[].customWidth | no | the custom width of the value, which should be used by setting the 'custom' value inside the 'size' property | string |
| actions.openModal[].size | no | sets the Modal size, 'default' is 520px, 'large' is 80% of the screen width, 'fullscreen' is 100% of the screen width, 'custom' should be used with the 'customWidth' property | default | large | fullscreen | custom |
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| columns | yes | configuration of the table's columns | array |
| columns[].color | no | the color of the value (or the icon) to be represented | blue | darkBlue | orange | gray | red | green | violet |
| columns[].hidden | no | option that disallows columns displaying, useful to insert data to be used in table actions logic, e.g. a row id. default is false |
boolean |
| columns[].title | yes | column header label | string |
| columns[].valueKey | yes | key used to extract the value from row data | string |
| data | yes | Array of table rows | array |
| pageSize | no | number of rows displayed per page | integer |
| prefix | no | it's the filters prefix to get right values | string |
| tableActions | no | action ids that will be used for each row and displayed as buttons in a specific additional column | array |
| tableActions[].button | no | UI displaying customization for action button | object |
| tableActions[].button.backgroundColor | no | the background color of the button | blue | darkBlue | orange | gray | red | green | violet |
| tableActions[].button.label | no | the label of the button | string |
| tableActions[].button.icon | no | the icon of the button (font awesome icon name eg: fa-inbox) |
string |
| tableActions[].button.shape | no | the shape of the button | default | circle | round |
| tableActions[].button.size | no | the size of the button | small | middle | large |
| tableActions[].button.type | no | the visual style of the button | default | text | link | primary | dashed |
| tableActions[].clickActionId | no | the id of the action to be executed when the button is clicked | string |
For additional information about the
tableActionsproperty configuration, please visit this page.
TabList display a set of tab items for navigation or content grouping
| Property | Required | Description | Type |
|---|---|---|---|
| allowedResources | yes | the list of resources that are allowed to be children of this widget or referenced by it | array |
| items | yes | the items of the tab list | array |
| items[].label | no | text displayed on the tab | string |
| items[].resourceRefId | yes | the identifier of the k8s custom resource represented by the tab content | string |
| items[].title | no | optional title to be displayed inside the tab | string |
Theme is a widget that allows to define an UI theme for the entire application.
| Property | Required | Description | Type |
|---|---|---|---|
| custom | no | Defines customization for specific components / widgets | object |
| mode | yes | The mode on which the theme is based (dark or light) | dark | light |
| logo | no | Defines the application logo as SVG string or URL | object |
| logo.svg | no | The logo as SVG | string |
| logo.url | no | The logo resource URL | string |
| token | no | Defines customization for specific style tokens | object |
YamlViewer receives a JSON string as input and renders its equivalent YAML representation for display.
| Property | Required | Description | Type |
|---|---|---|---|
| json | yes | json string to be converted and displayed as yaml | string |