diff --git a/docs/extensibility/30-details-summary.md b/docs/extensibility/30-details-summary.md
index cfc4920f12..0e86433503 100644
--- a/docs/extensibility/30-details-summary.md
+++ b/docs/extensibility/30-details-summary.md
@@ -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 |
| --------------------- | -------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -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
@@ -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
diff --git a/docs/extensibility/50-list-and-details-widgets.md b/docs/extensibility/50-list-and-details-widgets.md
index e4f753b409..9a19784937 100644
--- a/docs/extensibility/50-list-and-details-widgets.md
+++ b/docs/extensibility/50-list-and-details-widgets.md
@@ -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`.
When no highlights are provided, the following values are automatically handled:
- rendered as informative: `initial`, `pending`, `available`, `released`.
- rendered as positive: `ready`, `bound`, `running`, `success`, `succeeded`, `ok`.
- rendered as warning: `unknown`, `warning`.
- 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`.
When no highlights are provided, the following values are automatically handled:
- rendered as informative: `initial`, `pending`, `available`, `released`.
- rendered as positive: `ready`, `bound`, `running`, `success`, `succeeded`, `ok`.
- rendered as warning: `unknown`, `warning`.
- 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:
diff --git a/src/components/Extensibility/ExtensibilityDetails.js b/src/components/Extensibility/ExtensibilityDetails.js
index 073906297b..01fc6587bc 100644
--- a/src/components/Extensibility/ExtensibilityDetails.js
+++ b/src/components/Extensibility/ExtensibilityDetails.js
@@ -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 || {};
@@ -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),
@@ -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),
@@ -160,6 +161,19 @@ export const ExtensibilityDetailsCore = ({
}))
: []
}
+ statusBadge={
+ statusHeader
+ ? resource => (
+
+ )
+ : null
+ }
customHealthCards={
Array.isArray(health) && health?.length > 0
? [
diff --git a/src/components/Extensibility/components/Badge.js b/src/components/Extensibility/components/Badge.js
index beb6c633fd..0dafa3092b 100644
--- a/src/components/Extensibility/components/Badge.js
+++ b/src/components/Extensibility/components/Badge.js
@@ -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) {
@@ -72,8 +72,14 @@ export function Badge({
return isNil(value) ? (
emptyLeafPlaceholder
- ) : tooltip ? (
-
+ ) : structure?.description ? (
+
{tExt(value)}
) : (