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/common/k8s-api/__tests__/ingress.api.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { computeRuleDeclarations, Ingress } from "../endpoints";
+
+describe("computeRuleDeclarations", () => {
+  it("given no tls field, should format links as http://", () => {
+    const ingress = new Ingress({
+      apiVersion: "networking.k8s.io/v1",
+      kind: "Ingress",
+      metadata: {
+        name: "foo",
+        resourceVersion: "1",
+        uid: "bar",
+      },
+    });
+
+    const result = computeRuleDeclarations(ingress, {
+      host: "foo.bar",
+      http: {
+        paths: [{
+          backend: {
+            service: {
+              name: "my-service",
+              port: {
+                number: 8080,
+              },
+            },
+          },
+        }],
+      },
+    });
+
+    expect(result[0].url).toBe("http://foo.bar/");
+  });
+
+  it("given no tls entries, should format links as http://", () => {
+    const ingress = new Ingress({
+      apiVersion: "networking.k8s.io/v1",
+      kind: "Ingress",
+      metadata: {
+        name: "foo",
+        resourceVersion: "1",
+        uid: "bar",
+      },
+    });
+
+    ingress.spec = {
+      tls: [],
+    };
+
+    const result = computeRuleDeclarations(ingress, {
+      host: "foo.bar",
+      http: {
+        paths: [{
+          backend: {
+            service: {
+              name: "my-service",
+              port: {
+                number: 8080,
+              },
+            },
+          },
+        }],
+      },
+    });
+
+    expect(result[0].url).toBe("http://foo.bar/");
+  });
+
+  it("given some tls entries, should format links as https://", () => {
+    const ingress = new Ingress({
+      apiVersion: "networking.k8s.io/v1",
+      kind: "Ingress",
+      metadata: {
+        name: "foo",
+        resourceVersion: "1",
+        uid: "bar",
+      },
+    });
+
+    ingress.spec = {
+      tls: [{
+        secretName: "my-secret",
+      }],
+    };
+
+    const result = computeRuleDeclarations(ingress, {
+      host: "foo.bar",
+      http: {
+        paths: [{
+          backend: {
+            service: {
+              name: "my-service",
+              port: {
+                number: 8080,
+              },
+            },
+          },
+        }],
+      },
+    });
+
+    expect(result[0].url).toBe("https://foo.bar/");
+  });
+});

src/common/k8s-api/endpoints/ingress.api.ts

@@ -3,8 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { KubeObject } from "../kube-object";
+import { KubeObject, TypedLocalObjectReference } from "../kube-object";
-import { autoBind } from "../../utils";
+import { autoBind, hasTypedProperty, isString, iter } from "../../utils";
 import { IMetrics, metricsApi } from "./metrics.api";
 import { KubeApi } from "../kube-api";
 import type { KubeJsonApiData } from "../kube-json-api";
@@ -41,57 +41,74 @@ export interface ILoadBalancerIngress {
 }
 
 // extensions/v1beta1
-interface IExtensionsBackend {
+export interface ExtensionsBackend {
-  serviceName: string;
+  serviceName?: string;
-  servicePort: number | string;
+  servicePort?: number | string;
 }
 
 // networking.k8s.io/v1
-interface INetworkingBackend {
+export interface NetworkingBackend {
-  service: IIngressService;
+  service?: IngressService;
 }
 
-export type IIngressBackend = IExtensionsBackend | INetworkingBackend;
+export type IngressBackend = (ExtensionsBackend | NetworkingBackend) & {
+  resource?: TypedLocalObjectReference;
+};
 
-export interface IIngressService {
+export interface IngressService {
   name: string;
-  port: {
+  port: RequireExactlyOne<{
-    name?: string;
+    name: string;
-    number?: number;
+    number: number;
+  }>;
+}
+
+function isExtensionsBackend(backend: IngressBackend): backend is ExtensionsBackend {
+  return hasTypedProperty(backend, "serviceName", isString);
+}
+
+/**
+ * Format an ingress backend into the name of the service and port
+ * @param backend The ingress target
+ */
+export function getBackendServiceNamePort(backend: IngressBackend): string {
+  if (isExtensionsBackend(backend)) {
+    return `${backend.serviceName}:${backend.servicePort}`;
+  }
+
+  if (backend.service) {
+    const { name, port } = backend.service;
+
+    return `${name}:${port.number ?? port.name}`;
+  }
+
+  return "<unknown>";
+}
+
+export interface IngressRule {
+  host?: string;
+  http?: {
+    paths: {
+      path?: string;
+      backend: IngressBackend;
+    }[];
   };
 }
 
-export const getBackendServiceNamePort = (backend: IIngressBackend) => {
-  // .service is available with networking.k8s.io/v1, otherwise using extensions/v1beta1 interface
-  const serviceName = "service" in backend ? backend.service.name : backend.serviceName;
-  // Port is specified either with a number or name
-  const servicePort = "service" in backend ? backend.service.port.number ?? backend.service.port.name : backend.servicePort;
-
-  return { serviceName, servicePort };
-};
-
 export interface Ingress {
-  spec: {
+  spec?: {
-    tls: {
+    tls?: {
       secretName: string;
     }[];
-    rules?: {
+    rules?: IngressRule[];
-      host?: string;
-      http: {
-        paths: {
-          path?: string;
-          backend: IIngressBackend;
-        }[];
-      };
-    }[];
     // extensions/v1beta1
-    backend?: IExtensionsBackend;
+    backend?: ExtensionsBackend;
     /**
      * The default backend which is exactly on of:
      * - service
      * - resource
      */
-    defaultBackend?: RequireExactlyOne<INetworkingBackend & {
+    defaultBackend?: RequireExactlyOne<NetworkingBackend & {
       resource: {
         apiGroup: string;
         kind: string;
@@ -106,6 +123,13 @@ export interface Ingress {
   };
 }
 
+export interface ComputedIngressRoute {
+  displayAsLink: boolean;
+  pathname: string;
+  url: string;
+  service: string;
+}
+
 export class Ingress extends KubeObject {
   static kind = "Ingress";
   static namespaced = true;
@@ -116,33 +140,15 @@ export class Ingress extends KubeObject {
     autoBind(this);
   }
 
-  getRoutes() {
+  getRules() {
-    const { spec: { tls, rules }} = this;
+    return this.spec.rules ?? [];
-
-    if (!rules) return [];
-
-    let protocol = "http";
-    const routes: string[] = [];
-
-    if (tls && tls.length > 0) {
-      protocol += "s";
-    }
-    rules.map(rule => {
-      const host = rule.host ? rule.host : "*";
-
-      if (rule.http && rule.http.paths) {
-        rule.http.paths.forEach(path => {
-          const { serviceName, servicePort } = getBackendServiceNamePort(path.backend);
-
-          routes.push(`${protocol}://${host}${path.path || "/"} ⇢ ${serviceName}:${servicePort}`);
-        });
-      }
-    });
-
-    return routes;
   }
 
-  getServiceNamePort(): IExtensionsBackend {
+  getRoutes(): string[] {
+    return computeRouteDeclarations(this).map(({ url, service }) => `${url} ⇢ ${service}`);
+  }
+
+  getServiceNamePort(): ExtensionsBackend {
     const { spec: { backend, defaultBackend } = {}} = this;
 
     const serviceName = defaultBackend?.service?.name ?? backend?.serviceName;
@@ -155,11 +161,9 @@ export class Ingress extends KubeObject {
   }
 
   getHosts() {
-    const { spec: { rules }} = this;
+    const { spec: { rules = [] }} = this;
 
-    if (!rules) return [];
+    return [...iter.filterMap(rules, rule => rule.host)];
-
-    return rules.filter(rule => rule.host).map(rule => rule.host);
   }
 
   getPorts() {
@@ -168,7 +172,7 @@ export class Ingress extends KubeObject {
     const httpPort = 80;
     const tlsPort = 443;
     // Note: not using the port name (string)
-    const servicePort = defaultBackend?.service.port.number ?? backend?.servicePort;
+    const servicePort = defaultBackend?.service?.port.number ?? backend?.servicePort;
 
     if (rules && rules.length > 0) {
       if (rules.some(rule => Object.prototype.hasOwnProperty.call(rule, "http"))) {
@@ -194,6 +198,24 @@ export class Ingress extends KubeObject {
   }
 }
 
+export function computeRuleDeclarations(ingress: Ingress, rule: IngressRule): ComputedIngressRoute[] {
+  const { host = "*", http: { paths } = { paths: [] }} = rule;
+  const protocol = (ingress.spec?.tls?.length ?? 0) === 0
+    ? "http"
+    : "https";
+
+  return paths.map(({ path = "/", backend }) => ({
+    displayAsLink: !host.includes("*"),
+    pathname: path,
+    url: `${protocol}://${host}${path}`,
+    service: getBackendServiceNamePort(backend),
+  }));
+}
+
+export function computeRouteDeclarations(ingress: Ingress): ComputedIngressRoute[] {
+  return ingress.getRules().flatMap(rule => computeRuleDeclarations(ingress, rule));
+}
+
 let ingressApi: IngressApi;
 
 if (isClusterPageContext()) {

src/common/k8s-api/kube-object.ts

@@ -118,6 +118,12 @@ export type LabelMatchExpression = {
   }
 );
 
+export interface TypedLocalObjectReference {
+  apiGroup?: string;
+  kind: string;
+  name: string;
+}
+
 export interface LabelSelector {
   matchLabels?: Record<string, string | undefined>;
   matchExpressions?: LabelMatchExpression[];

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;
+    return ingress.getRules()
-
+      .map((rule, index) => (
-    if (!rules || !rules.length) return null;
-
-    return rules.map((rule, index) => {
-      return (
         <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) => {
+                computeRuleDeclarations(ingress, rule)
-                  const { serviceName, servicePort } = getBackendServiceNamePort(path.backend);
+                  .map(({ displayAsLink, service, url, pathname }) => (
-                  const backend = `${serviceName}:${servicePort}`;
-
-                  return (
                     <TableRow key={index}>
-                      <TableCell className="path">{path.path || ""}</TableCell>
+                      <TableCell className="path">{pathname}</TableCell>
-                      <TableCell className="backends">
+                      <TableCell className="link">
-                        <p key={backend}>{backend}</p>
+                        {
+                          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;
-          },
-        }}
       />
     );
   }