feat: Add long columns in status card (#3324)

* feat: Add long columns in status card * Add documentation * Rename type to fullWidth
kyma-project · Sep 5, 2024 · f87fc8b · f87fc8b
1 parent 7c3fcb7
commit f87fc8b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 3 deletions.
diff --git 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.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.
+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 **body** component is an array of objects.
 
 | Parameter             | Required | Type                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
 | --------------------- | -------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -21,6 +21,46 @@ This table lists the available parameters of the **data.details.header**, **data
 
 Extra parameters might be available for specific widgets.
 
+#### Status Body
+
+The **data.details.status.body** is an array of objects. By default listed values are displayed in two columns. Adding parameter **fullWidth: true** will display values in one column. The **data.details.status.body** accepts one widget (for example [ConditionList](./50-list-and-details-widgets.md#conditionList))
+
+See the following examples:
+
+```yaml
+details:
+  status:
+    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: Containers
+        source: status.containers
+        fullWidth: true
+      - name: Condition details
+        widget: ConditionList
+        source: status.conditions
+```
+
+```yaml
+details:
+  status:
+    - name: Replicas
+      source: status.replicas
+    - name: Containers
+      source: status.containers
+      fullWidth: true
+    - name: Condition details
+      widget: ConditionList
+      source: status.conditions
+```
+
 #### 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.
@@ -45,6 +85,9 @@ details:
     body:
       - name: Replicas
         source: status.replicas
+      - name: Containers
+        source: status.containers
+        fullWidth: true
       - name: Condition details
         widget: ConditionList
         source: status.conditions

diff --git a/docs/extensibility/50-list-and-details-widgets.md b/docs/extensibility/50-list-and-details-widgets.md
@@ -6,7 +6,7 @@ You can distinguish the following widget types:
 - [Inline widgets](#inline-widgets) for simple values in **data.list**, **data.details.header**, **data.details.status** and **data.detail.bodies**
   - [`Bagde`](#badge)
   - [`ControlledBy`](#controlledby)
-  - [`ConditionList`](#conditionList) - used only in **data.details.status**
+  - [`ConditionList`](#conditionList) - used only in **data.details.status** or **data.details.status.body**
   - [`ExternalLink`](#externallink)
   - [`ExternalLinkButton`](#externallinkbutton)
   - [`JoinedArray`](#joinedarray)
@@ -95,7 +95,7 @@ This is an exaple of kind only:
 
 ### `ConditionList`
 
-The `ConditionList` widget renders the conditions as an expandable list with condition details. This widget is primarily designed for the overview section **data.details.status**
+The `ConditionList` widget renders the conditions as an expandable list with condition details. This widget is primarily designed for the overview section **data.details.status** or **data.details.status.body**
 
 See the following example:
 

diff --git a/src/components/Extensibility/ExtensibilityDetails.js b/src/components/Extensibility/ExtensibilityDetails.js
@@ -132,6 +132,7 @@ export const ExtensibilityDetailsCore = ({
               .filter(def => def.widget !== 'ConditionList')
               .map((def, i) => ({
                 header: widgetT(def),
+                fullWidth: def.fullWidth,
                 value: resource => (
                   <Widget
                     key={i}

diff --git a/src/shared/components/ResourceDetails/ResourceDetails.js b/src/shared/components/ResourceDetails/ResourceDetails.js
@@ -294,6 +294,25 @@ function Resource({
               {customStatusColumns
                 ?.filter(filterColumns)
                 .filter(col => !col?.conditionComponent)
+                ?.filter(col => !col?.fullWidth || col?.fullWidth === false)
+                ?.map(col => (
+                  <DynamicPageComponent.Column
+                    key={col.header}
+                    title={col.header}
+                  >
+                    {col.value(resource)}
+                  </DynamicPageComponent.Column>
+                ))}
+            </>
+          ) : null
+        }
+        customColumnsLong={
+          customStatusColumns?.length ? (
+            <>
+              {customStatusColumns
+                ?.filter(filterColumns)
+                .filter(col => !col?.conditionComponent)
+                ?.filter(col => col?.fullWidth && col?.fullWidth === true)
                 ?.map(col => (
                   <DynamicPageComponent.Column
                     key={col.header}

diff --git a/src/shared/components/ResourceStatusCard/ResourceStatusCard.js b/src/shared/components/ResourceStatusCard/ResourceStatusCard.js
@@ -7,6 +7,7 @@ import { ConditionList } from '../ConditionList/ConditionList';
 export function ResourceStatusCard({
   statusBadge,
   customColumns,
+  customColumnsLong,
   conditions,
   customConditionsComponent,
 }) {
@@ -34,6 +35,16 @@ export function ResourceStatusCard({
             {customColumns}
           </div>
         )}
+        {customColumnsLong && (
+          <div
+            style={{
+              ...spacing.sapUiSmallMargin,
+              ...spacing.sapUiTinyMarginTop,
+            }}
+          >
+            {customColumnsLong}
+          </div>
+        )}
         {conditions && (
           <>
             <div