Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add statusBadge for extensibility #3099

Merged
merged 5 commits into from
Jul 29, 2024
Merged

feat: Add statusBadge for extensibility #3099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8452aba
add badge
OliwiaGowor Jul 29, 2024
6ca45df
badge doc
OliwiaGowor Jul 29, 2024
f1aa62e
adjust to various components
OliwiaGowor Jul 29, 2024
b9f4f7a
bigger photo
OliwiaGowor Jul 29, 2024
27a7bdc
apply docs changes
OliwiaGowor Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions docs/extensibility/30-details-summary.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ In the **data.details** section you can provide configuration of four optional c

### **header**, **status**, **body** and **health** Parameters

This table lists the available parameters of the **data.details.header**, **data.details.status**, **data.details.health** and/or **data.details.body** section in your resource ConfigMap. You can learn whether each of the parameters is required and what purpose it serves. The **data.details.header**, **data.details.status**, **data.details.health** and **data.details.body** components are arrays of objects.
This table lists the available parameters of the **data.details.header**, **data.details.status**, **data.details.health** and/or **data.details.body** section in your resource ConfigMap. You can learn whether each of the parameters is required and what purpose it serves. The **data.details.header**, **data.details.health** and **data.details.body** components are arrays of objects. The **data.details.status** component is an object that accepts the **header** and **details** parameters. Within **data.details.status**, the **header** component is an object, and the **details** component is an array of objects.

| Parameter | Required | Type | Description |
| --------------------- | -------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand All @@ -21,6 +21,10 @@ This table lists the available parameters of the **data.details.header**, **data

Extra parameters might be available for specific widgets.

#### Status Header

The **data.details.status.header** accepts one widget (for example [Badge](./50-list-and-details-widgets.md#badge)), displayed on the right side of the **Status** section header. This widget is used to summarize the status of the resource.

See the following examples:

```yaml
Expand All @@ -31,11 +35,19 @@ details:
widget: Badge
- source: "$join(spec.volumes.name, ', ')"
status:
- name: Replicas
source: status.replicas
- name: Condition details
widget: ConditionList
source: status.conditions
header:
- source: status.value1 & '/' & status.value2
widget: Badge
highlights:
positive: status.value1 = status.value2
critical: status.value1 != status.value2
description: 'Example description'
body:
- name: Replicas
source: status.replicas
- name: Condition details
widget: ConditionList
source: status.conditions
health:
- name: MyTitle
widget: StatisticalCard
Expand Down
16 changes: 8 additions & 8 deletions docs/extensibility/50-list-and-details-widgets.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ Use inline widgets for simple values in **data.list**, **data.details.header**,

The `Badge` widgets render texts as a status badge, using a set of predefined rules to assign colors.

These are the available `Bagde` widget parameters:

| Parameter | Required | Type | Description |
| --------------- | -------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **placeholder** | No | string | Changes the default empty text placeholder `-` with a custom string. If the **translations** section has a translation entry with the ID that is the same as the **placeholder** string, the translation is used. |
| **highlights** | No | | A map of highlight rules. Key refers to the type of highlight, while the rule can just be a plain array of values or a string containing a [JSONata](jsonata.md) rule. Allowed keys are `informative`, `positive`, `warning` and `critical`. <br><br> When no highlights are provided, the following values are automatically handled: <br> - rendered as informative: `initial`, `pending`, `available`, `released`. <br> - rendered as positive: `ready`, `bound`, `running`, `success`, `succeeded`, `ok`. <br> - rendered as warning: `unknown`, `warning`. <br> - rendered as critical: `error`, `failure`, `invalid`. |
| **description** | No | [JSONata](jsonata.md) expression | Used to fetch additional information that will be displayed in a tooltip when hovering over the badge. |
| **copyable** | No | boolean | A flag indicating if the **Copy to clipboard** button should be displayed next to the widget. By default set to `false`. |
These are the available `Badge` widget parameters:

| Parameter | Required | Type | Description |
| --------------- | -------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **placeholder** | No | string | Changes the default empty text placeholder `-` with a custom string. If the **translations** section has a translation entry with the ID that is the same as the **placeholder** string, the translation is used. |
| **highlights** | No | | A map of highlight rules. Key refers to the type of highlight, while the rule can just be a plain array of values or a string containing a [JSONata](jsonata.md) rule. Allowed keys are `informative`, `positive`, `warning` and `critical`. <br><br> When no highlights are provided, the following values are automatically handled: <br> - rendered as informative: `initial`, `pending`, `available`, `released`. <br> - rendered as positive: `ready`, `bound`, `running`, `success`, `succeeded`, `ok`. <br> - rendered as warning: `unknown`, `warning`. <br> - rendered as critical: `error`, `failure`, `invalid`. |
| **description** | No | string or [JSONata](jsonata.md) expression | Used to fetch additional information that will be displayed in a tooltip after clicking on the badge. |
| **copyable** | No | boolean | A flag indicating if the **Copy to clipboard** button should be displayed next to the widget. By default set to `false`. |

See the following example:

Expand Down
24 changes: 19 additions & 5 deletions src/components/Extensibility/ExtensibilityDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ export const ExtensibilityDetailsCore = ({

const header = resMetaData?.details?.header || [];
const health = resMetaData?.details?.health || [];
const status = resMetaData?.details?.status || [];
const statusBody = resMetaData?.details?.status?.body || [];
const statusHeader = resMetaData?.details?.status?.header || [];
const body = resMetaData?.details?.body || [];
const dataSources = resMetaData?.dataSources || {};
const general = resMetaData?.general || {};
Expand Down Expand Up @@ -123,8 +124,8 @@ export const ExtensibilityDetailsCore = ({
: []
}
customStatusColumns={
Array.isArray(status)
? status
Array.isArray(statusBody)
? statusBody
.filter(def => def.widget !== 'ConditionList')
.map((def, i) => ({
header: widgetT(def),
Expand All @@ -142,8 +143,8 @@ export const ExtensibilityDetailsCore = ({
: []
}
customConditionsComponents={
Array.isArray(status)
? status
Array.isArray(statusBody)
? statusBody
.filter(def => def.widget === 'ConditionList')
.map((def, i) => ({
header: widgetT(def),
Expand All @@ -160,6 +161,19 @@ export const ExtensibilityDetailsCore = ({
}))
: []
}
statusBadge={
statusHeader
? resource => (
<Widget
value={resource}
structure={statusHeader}
schema={schema}
dataSources={dataSources}
originalResource={resource}
/>
)
: null
}
customHealthCards={
Array.isArray(health) && health?.length > 0
? [
Expand Down
12 changes: 9 additions & 3 deletions src/components/Extensibility/components/Badge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function Badge({
arrayItems,
});

const [tooltip] = jsonata(structure?.description);
const [tooltip, tooltipError] = jsonata(structure?.description);

let type = null;
if (structure?.highlights) {
Expand Down Expand Up @@ -72,8 +72,14 @@ export function Badge({

return isNil(value) ? (
emptyLeafPlaceholder
) : tooltip ? (
<StatusBadge autoResolveType={!type} type={type} tooltipContent={tooltip}>
) : structure?.description ? (
<StatusBadge
autoResolveType={!type}
type={type}
tooltipContent={
tooltip && !tooltipError ? tooltip : structure.description
}
>
{tExt(value)}
</StatusBadge>
) : (
Expand Down
Loading