feat: enhance Ingress details view

public/i18n/en.yaml

@@ -343,6 +343,7 @@ common:
     resources: Resources
     nodeInfo: Node Info
     node-details: Node Details
+    specification: Specification
     started-at: Started At
     status: Status
     value: Value
@@ -877,17 +878,24 @@ ingresses:
     backend: Backend
     default-backend: Default Backend
     host: Host
+    host-name: Host name
+    hosts: Hosts
     ingress-class-name: Ingress class name
+    ip: IP
     kind: Kind
     load-balancers: Load Balancers
     path: Path
     path-type: Path type
     paths: Paths
     port: Port
+    ports: Ports
     port-name: Port name
     port-number: Port number
+    protocol: Protocol
     rules: Rules
+    secret-name: Secret name
     service-name: Service name
+    tls: TLS
   message:
     rules-not-found: Rules not found
   name_singular: Ingress

src/resources/Ingresses/IngressDetails.js

@@ -1,39 +1,54 @@
 import { useTranslation } from 'react-i18next';
 
 import { ResourceDetails } from 'shared/components/ResourceDetails/ResourceDetails';
-import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 
 import { Rules } from './Rules';
 import { DefaultBackendPanel } from './DefaultBackendPanel';
 import IngressCreate from './IngressCreate';
 import { ResourceDescription } from 'resources/Ingresses';
+import { EventsList } from 'shared/components/EventsList';
+import { filterByResource } from 'hooks/useMessageList';
+import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
+import { IngressStatus } from './IngressStatus';
+import { IngressSpecification } from './IngressSpecification';
+import { useState } from 'react';
 
 export function IngressDetails(props) {
   const { t } = useTranslation();
+  const [totalPods, setTotalPods] = useState(0);
+  const [healthyPods, setHealthyPods] = useState(0);
 
-  const getLoadBalancer = ingress => {
-    if (ingress.status.loadBalancer?.ingress) {
-      return ingress.status.loadBalancer?.ingress
-        .map(endpoint => endpoint.ip || endpoint.hostname)
-        .join(', ');
-    } else {
-      return EMPTY_TEXT_PLACEHOLDER;
-    }
+  const calculateTotalPorts = ingress => {
+    let allPorts = 0;
+
+    ingress?.status?.loadBalancer?.ingress?.forEach(element => {
+      element?.ports?.forEach(() => allPorts++);
+    });
+
+    setTotalPods(allPorts);
   };
 
-  const customColumns = [
-    {
-      header: t('ingresses.labels.load-balancers'),
-      value: getLoadBalancer,
-    },
-    {
-      header: t('ingresses.labels.ingress-class-name'),
-      value: ingress => ingress.spec.ingressClassName,
-    },
-  ];
+  const calculatePortsWithoutErrors = ingress => {
+    let healthyPods = 0;
+
+    ingress?.status?.loadBalancer?.ingress?.forEach(element => {
+      element?.ports?.forEach(port => {
+        if (!port.error) healthyPods++;
+      });
+    });
+
+    setHealthyPods(healthyPods);
+  };
 
   const customComponents = [];
 
+  customComponents.push(
+    resource =>
+      (resource.spec?.ingressClassName || resource.spec?.tls) && (
+        <IngressSpecification resource={resource} />
+      ),
+  );
+
   customComponents.push(resource =>
     resource.spec.defaultBackend ? (
       <DefaultBackendPanel
@@ -49,12 +64,45 @@ export function IngressDetails(props) {
     ) : null,
   );
 
+  customComponents.push(() => (
+    <EventsList
+      key="events"
+      namespace={props.namespace}
+      filter={filterByResource('Ingress', props.resourceName)}
+      hideInvolvedObjects={true}
+    />
+  ));
+
+  const statusBadge = resource => {
+    calculateTotalPorts(resource);
+    calculatePortsWithoutErrors(resource);
+    const portsStatus =
+      totalPods === 0
+        ? 'Information'
+        : totalPods === healthyPods
+        ? 'Success'
+        : 'Error';
+
+    return (
+      <StatusBadge
+        type={portsStatus}
+        tooltipContent={'Healthy Ports'}
+      >{`${healthyPods} / ${totalPods}`}</StatusBadge>
+    );
+  };
+
   return (
     <ResourceDetails
-      customColumns={customColumns}
       customComponents={customComponents}
       description={ResourceDescription}
       createResourceForm={IngressCreate}
+      statusBadge={statusBadge}
+      customConditionsComponents={[
+        {
+          header: t('ingresses.labels.load-balancers'),
+          value: resource => <IngressStatus resource={resource} />,
+        },
+      ]}
       {...props}
     />
   );

src/resources/Ingresses/IngressSpecification.js

@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next';
+import { GenericList } from 'shared/components/GenericList/GenericList';
+import { LayoutPanelRow } from 'shared/components/LayoutPanelRow/LayoutPanelRow';
+import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
+import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
+
+export const IngressSpecification = ({ resource }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <UI5Panel title={t('common.headers.specification')}>
+        {resource.spec.ingressClassName && (
+          <LayoutPanelRow
+            name={t('ingresses.labels.ingress-class-name')}
+            value={resource.spec.ingressClassName}
+          />
+        )}
+        {resource.spec?.tls && (
+          <GenericList
+            title={t('ingresses.labels.tls')}
+            headerRenderer={() => [
+              t('ingresses.labels.hosts'),
+              t('ingresses.labels.secret-name'),
+            ]}
+            rowRenderer={tls => [
+              tls?.hosts?.join(', ') ?? EMPTY_TEXT_PLACEHOLDER,
+              tls?.secretName ?? EMPTY_TEXT_PLACEHOLDER,
+            ]}
+            entries={resource.spec?.tls}
+            searchSettings={{
+              showSearchField: false,
+            }}
+          />
+        )}
+      </UI5Panel>
+    </>
+  );
+};

src/resources/Ingresses/IngressStatus.js

@@ -0,0 +1,107 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConditionList } from 'shared/components/ConditionList/ConditionList';
+import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
+import { spacing } from '@ui5/webcomponents-react-base';
+import './IngressStatus.scss';
+
+export const IngressStatus = ({ resource }) => {
+  const { t } = useTranslation();
+  const ingresses = useMemo(() => {
+    return resource?.status?.loadBalancer?.ingress?.map(ingress => ingress);
+  }, [resource]);
+
+  return ingresses ? (
+    <ConditionList
+      className="load-balancers"
+      conditions={ingresses.map(ingress => ({
+        header: {
+          titleText: ingress.hostname ? (
+            <div>
+              <span
+                style={{ ...spacing.sapUiTinyMarginEnd }}
+                className="title bsl-has-color-status-4"
+              >
+                {`${t('ingresses.labels.host-name')}:`}
+              </span>
+              {`${ingress.hostname}`}
+            </div>
+          ) : (
+            <div>
+              <span
+                style={{ ...spacing.sapUiTinyMarginEnd }}
+                className="title bsl-has-color-status-4"
+              >
+                {`${t('ingresses.labels.ip')}:`}
+              </span>
+              {`${ingress.ip}`}
+            </div>
+          ),
+        },
+        customContent: [
+          ...(ingress.hostname
+            ? [
+                {
+                  header: t('ingresses.labels.host-name'),
+                  value: ingress.hostname,
+                  className: 'load-balancers__content',
+                },
+              ]
+            : []),
+          ...(ingress.ip
+            ? [
+                {
+                  header: t('ingresses.labels.ip'),
+                  value: ingress.ip,
+                  className: 'load-balancers__content',
+                },
+              ]
+            : []),
+          {
+            header: t('ingresses.labels.ports'),
+            value: ingress.ports ? (
+              <ConditionList
+                conditions={ingress?.ports?.map(port => {
+                  return {
+                    header: {
+                      titleText: port.port,
+                      status: port.error ? 'Error' : '',
+                    },
+                    customContent: [
+                      port.protocol
+                        ? {
+                            header: t('ingresses.labels.protocol'),
+                            value: port.protocol,
+                          }
+                        : {},
+                      ...(port.error
+                        ? [
+                            {
+                              header: 'Error',
+                              value: port.error,
+                            },
+                          ]
+                        : []),
+                    ],
+                  };
+                })}
+              />
+            ) : (
+              EMPTY_TEXT_PLACEHOLDER
+            ),
+          },
+        ],
+      }))}
+    />
+  ) : (
+    <div
+      className="content bsl-has-color-text-1"
+      style={{
+        ...spacing.sapUiSmallMarginBegin,
+        ...spacing.sapUiSmallMarginBottom,
+      }}
+    >
+      {EMPTY_TEXT_PLACEHOLDER}
+    </div>
+  );
+};

src/resources/Ingresses/IngressStatus.scss

@@ -0,0 +1,11 @@
+.load-balancers {
+  .expandable-item__message:not(.load-balancers__content) {
+    .title {
+      margin-left: 0.5rem !important;
+    }
+  }
+
+  &__content {
+    margin-left: 1.5rem !important;
+  }
+}

src/shared/components/ConditionList/ConditionList.tsx

@@ -3,27 +3,32 @@ import {
   CustomContent,
   ExpandableListItem,
 } from '../ExpandableListItem/ExpandableListItem';
+import { ReactNode } from 'react';
 
 type ConditionListProps = {
   conditions: [ConditionItem];
+  className?: string;
 };
 
 type ConditionItem = {
-  message: string;
   header: ConditionHeader;
+  message?: string;
   customContent?: CustomContent[];
 };
 type ConditionHeader = {
-  titleText: string;
+  titleText: string | ReactNode;
   status?: string;
 };
 
-export const ConditionList = ({ conditions }: ConditionListProps) => {
+export const ConditionList = ({
+  conditions,
+  className,
+}: ConditionListProps) => {
   if (!conditions) {
     return null;
   }
   return (
-    <List>
+    <List className={className}>
       {conditions?.map((cond, index) => (
         <ExpandableListItem
           key={index}