frontend: Add endpoints list to Service details

frontend/src/components/service/Details.tsx

@@ -3,7 +3,10 @@ import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import Endpoints from '../../lib/k8s/endpoints';
 import Service from '../../lib/k8s/service';
+import { Link } from '../common';
+import Empty from '../common/EmptyContent';
 import { ValueLabel } from '../common/Label';
 import { DetailsGrid, MetadataDictGrid } from '../common/Resource';
 import { SectionBox } from '../common/SectionBox';
@@ -13,6 +16,12 @@ export default function ServiceDetails() {
   const { namespace, name } = useParams<{ namespace: string; name: string }>();
   const { t } = useTranslation('glossary');
 
+  const [endpoints, endpointsError] = Endpoints.useList({ namespace });
+
+  function getOwnedEndpoints(item: Service) {
+    return item ? endpoints?.filter(endpoint => endpoint.getName() === item.getName()) : null;
+  }
+
   return (
     <DetailsGrid
       resourceType={Service}
@@ -41,31 +50,53 @@ export default function ServiceDetails() {
       }
       sectionsFunc={item =>
         item && (
-          <SectionBox title={t('Ports')}>
-            <SimpleTable
-              data={item.spec.ports}
-              columns={[
-                {
-                  label: t('Protocol'),
-                  datum: 'protocol',
-                },
-                {
-                  label: t('frequent|Name'),
-                  datum: 'name',
-                },
-                {
-                  label: t('Ports'),
-                  getter: ({ port, targetPort }) => (
-                    <React.Fragment>
-                      <ValueLabel>{port}</ValueLabel>
-                      <InlineIcon icon="mdi:chevron-right" />
-                      <ValueLabel>{targetPort}</ValueLabel>
-                    </React.Fragment>
-                  ),
-                },
-              ]}
-            />
-          </SectionBox>
+          <>
+            <SectionBox title={t('Ports')}>
+              <SimpleTable
+                data={item.spec.ports}
+                columns={[
+                  {
+                    label: t('Protocol'),
+                    datum: 'protocol',
+                  },
+                  {
+                    label: t('frequent|Name'),
+                    datum: 'name',
+                  },
+                  {
+                    label: t('Ports'),
+                    getter: ({ port, targetPort }) => (
+                      <React.Fragment>
+                        <ValueLabel>{port}</ValueLabel>
+                        <InlineIcon icon="mdi:chevron-right" />
+                        <ValueLabel>{targetPort}</ValueLabel>
+                      </React.Fragment>
+                    ),
+                  },
+                ]}
+              />
+            </SectionBox>
+            <SectionBox title={t('Endpoints')}>
+              {endpointsError ? (
+                <Empty color="error">{endpointsError}</Empty>
+              ) : (
+                <SimpleTable
+                  data={getOwnedEndpoints(item)}
+                  columns={[
+                    {
+                      label: t('Name'),
+                      getter: endpoint => <Link kubeObject={endpoint} />,
+                    },
+                    {
+                      label: t('Addresses'),
+                      getter: endpoint => endpoint.getAddressesText(),
+                      cellProps: { style: { width: '40%', maxWidth: '40%' } },
+                    },
+                  ]}
+                />
+              )}
+            </SectionBox>
+          </>
         )
       }
     />