From cdf2b8800c979fe6e5d27ea2fb0a09019beb40f7 Mon Sep 17 00:00:00 2001
From: ricoberger <mail@ricoberger.de>
Date: Mon, 7 Feb 2022 19:26:56 +0100
Subject: [PATCH] [resources] Fix formatting of cells for CRDs

The cell values for CRDs were not correctly formatted, so that it could
happen that all values of an array are displayed without a ", " between
the values. This is now fixed and all cells which are displayed for a
Curstom Resource Definition should be formatted correctly.
---
 CHANGELOG.md                         |  1 +
 plugins/core/src/utils/resources.tsx | 13 +++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b28e588b3..b472f274c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,6 +56,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#292](https://github.com/kobsio/kobs/pull/292): [resources] Fix shown conditions in details view.
 - [#297](https://github.com/kobsio/kobs/pull/297): [prometheus] Fix metrics, when Prometheus returns `Inf` value.
 - [#303](https://github.com/kobsio/kobs/pull/303): [core] Fix missing borders for select elements.
+- [#304](https://github.com/kobsio/kobs/pull/304): [resources] Fix formatting of cells for Custom Resource Definition.
 
 ### Changed
 
diff --git a/plugins/core/src/utils/resources.tsx b/plugins/core/src/utils/resources.tsx
index c210c78a3..abbfe924d 100644
--- a/plugins/core/src/utils/resources.tsx
+++ b/plugins/core/src/utils/resources.tsx
@@ -1678,11 +1678,16 @@ export const customResourceDefinition = (crds: ICRD[]): IResources => {
               const crdCells =
                 crd.columns && crd.columns.length > 0
                   ? crd.columns.map((column) => {
-                      const value = JSONPath({ json: cr, path: `$.${column.jsonPath}` })[0];
-                      if (!value) return '';
-                      if (column.type === 'date')
+                      const value = JSONPath<string | string[]>({ json: cr, path: `$.${column.jsonPath}` })[0];
+                      if (!value) {
+                        return '';
+                      } else if (column.type === 'date') {
                         return timeDifference(new Date().getTime(), new Date(value).getTime());
-                      return value;
+                      } else if (Array.isArray(value)) {
+                        return value.join(', ');
+                      } else {
+                        return value;
+                      }
                     })
                   : [timeDifference(new Date().getTime(), new Date(cr.metadata?.creationTimestamp).getTime())];