Merge pull request #1516 from headlamp-k8s/endpoint-address-render-fix

frontend: Fixes endpoint address renders
headlamp-k8s · Nov 3, 2023 · ca19998 · ca19998
2 parents c2f8eaa + f0f24f2
commit ca19998
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/frontend/src/components/service/Details.tsx b/frontend/src/components/service/Details.tsx
@@ -1,4 +1,5 @@
 import { InlineIcon } from '@iconify/react';
+import { Box } from '@material-ui/core';
 import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -100,7 +101,13 @@ export default function ServiceDetails() {
                       },
                       {
                         label: t('translation|Addresses'),
-                        getter: endpoint => endpoint.getAddressesText(),
+                        getter: endpoint => (
+                          <Box display="flex" flexDirection="column">
+                            {endpoint.getAddresses().map((address: string) => (
+                              <ValueLabel>{address}</ValueLabel>
+                            ))}
+                          </Box>
+                        ),
                       },
                     ]}
                     reflectInURL="endpoints"

diff --git a/frontend/src/lib/k8s/endpoints.ts b/frontend/src/lib/k8s/endpoints.ts
@@ -44,7 +44,7 @@ class Endpoints extends makeKubeObject<KubeEndpoint>('endpoint') {
   }
 
   getAddressesText() {
-    this.getAddresses().join(', ');
+    return this.getAddresses().join(', ');
   }
 
   getAddresses() {