Add links for ingresses (#4630)

* Add links for ingresses

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add back the arrow service

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Only display link if host is defined

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Resolve PR comments

- Fix crash in IngressDetails

- Make ingress routes scrollable

- Don't display link if the URL contains "*"

- Consolidate rendering of rules to all use the same transform function

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix http(s) formatting and add some tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -15,7 +15,7 @@ import { ResourceMetrics } from "../resource-metrics";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { IngressCharts } from "./ingress-charts";
 import { KubeObjectMeta } from "../kube-object-meta";
-import { getBackendServiceNamePort, getMetricsForIngress, type IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
+import { computeRuleDeclarations, getMetricsForIngress, type IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { boundMethod } from "../../utils";
@@ -49,12 +49,8 @@ export class IngressDetails extends React.Component<IngressDetailsProps> {
   }
 
   renderPaths(ingress: Ingress) {
-    const { spec: { rules }} = ingress;
-
-    if (!rules || !rules.length) return null;
-
-    return rules.map((rule, index) => {
-      return (
+    return ingress.getRules()
+      .map((rule, index) => (
         <div className="rules" key={index}>
           {rule.host && (
             <div className="host-title">
@@ -65,28 +61,33 @@ export class IngressDetails extends React.Component<IngressDetailsProps> {
             <Table className="paths">
               <TableHead>
                 <TableCell className="path">Path</TableCell>
+                <TableCell className="link">Link</TableCell>
                 <TableCell className="backends">Backends</TableCell>
               </TableHead>
               {
-                rule.http.paths.map((path, index) => {
-                  const { serviceName, servicePort } = getBackendServiceNamePort(path.backend);
-                  const backend = `${serviceName}:${servicePort}`;
-
-                  return (
+                computeRuleDeclarations(ingress, rule)
+                  .map(({ displayAsLink, service, url, pathname }) => (
                     <TableRow key={index}>
-                      <TableCell className="path">{path.path || ""}</TableCell>
-                      <TableCell className="backends">
-                        <p key={backend}>{backend}</p>
+                      <TableCell className="path">{pathname}</TableCell>
+                      <TableCell className="link">
+                        {
+                          displayAsLink
+                            ? (
+                              <a href={url} rel="noreferrer" target="_blank">
+                                {url}
+                              </a>
+                            )
+                            : url
+                        }
                       </TableCell>
+                      <TableCell className="backends">{service}</TableCell>
                     </TableRow>
-                  );
-                })
+                  ))
               }
             </Table>
           )}
         </div>
-      );
-    });
+      ));
   }
 
   renderIngressPoints(ingressPoints: ILoadBalancerIngress[]) {
@@ -99,15 +100,14 @@ export class IngressDetails extends React.Component<IngressDetailsProps> {
             <TableCell className="name">Hostname</TableCell>
             <TableCell className="ingresspoints">IP</TableCell>
           </TableHead>
-          {ingressPoints.map(({ hostname, ip }, index) => {
-            return (
+          {
+            ingressPoints.map(({ hostname, ip }, index) => (
               <TableRow key={index}>
                 <TableCell className="name">{hostname ? hostname : "-"}</TableCell>
                 <TableCell className="ingresspoints">{ip ? ip : "-"}</TableCell>
               </TableRow>
-            );
-          })
-          })
+            ))
+          }
         </Table>
       </div>
     );

src/renderer/components/+network-ingresses/ingresses.scss

@@ -7,6 +7,16 @@
   .TableCell {
     &.rules {
       flex-grow: 3.0;
+      overflow-x: scroll;
+      text-overflow: unset;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      span:not(:last-of-type) {
+        margin-right: 1em;
+      }
     }
 
     &.warning {

src/renderer/components/+network-ingresses/ingresses.tsx

@@ -13,6 +13,7 @@ import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import type { IngressRouteParams } from "../../../common/routes";
 import { KubeObjectAge } from "../kube-object/age";
+import { computeRouteDeclarations } from "../../../common/k8s-api/endpoints";
 
 enum columnId {
   name = "name",
@@ -56,16 +57,24 @@ export class Ingresses extends React.Component<IngressesProps> {
           <KubeObjectStatusIcon key="icon" object={ingress} />,
           ingress.getNs(),
           ingress.getLoadBalancers().map(lb => <p key={lb}>{lb}</p>),
-          ingress.getRoutes().map(route => <p key={route}>{route}</p>),
+          computeRouteDeclarations(ingress).map(decl => (
+            decl.displayAsLink
+              ? (
+                <span key={decl.url}>
+                  <a
+                    href={decl.url}
+                    rel="noreferrer"
+                    target="_blank"
+                    onClick={e => e.stopPropagation()}
+                  >
+                    {decl.url}
+                  </a> ⇢ {decl.service}
+                </span>
+              )
+              : <span key={decl.url}>{decl.url} ⇢ {decl.service}</span>
+          )),
           <KubeObjectAge key="age" object={ingress} />,
         ]}
-        tableProps={{
-          customRowHeights: (item, lineHeight, paddings) => {
-            const lines = item.getRoutes().length || 1;
-
-            return lines * lineHeight + paddings;
-          },
-        }}
       />
     );
   }