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>

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, iter } 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,40 +41,58 @@ export interface ILoadBalancerIngress {
 }
 
 // extensions/v1beta1
-interface IExtensionsBackend {
+export interface ExtensionsBackend {
   serviceName: 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: IIngressBackend): string {
+export function getBackendServiceNamePort(backend: IngressBackend): string {
-  // .service is available with networking.k8s.io/v1, otherwise using extensions/v1beta1 interface
+  if (isExtensionsBackend(backend)) {
+    return `${backend.serviceName}:${backend.servicePort}`;
+  }
 
-  if ("service" in backend) {
+  if (backend.service) {
     const { name, port } = backend.service;
 
     return `${name}:${port.number ?? port.name}`;
   }
 
-  return `${backend.serviceName}:${backend.servicePort}`;
+  return "<unknown>";
+}
+
+export interface IngressRule {
+  host?: string;
+  http?: {
+    paths: {
+      path?: string;
+      backend: IngressBackend;
+    }[];
+  };
 }
 
 export interface Ingress {
@@ -82,23 +100,15 @@ export interface Ingress {
     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;
@@ -114,6 +124,8 @@ export interface Ingress {
 }
 
 export interface ComputedIngressRoute {
+  displayAsLink: boolean;
+  pathname: string;
   url: string;
   service: string;
 }
@@ -128,25 +140,15 @@ export class Ingress extends KubeObject {
     autoBind(this);
   }
 
+  getRules() {
+    return this.spec.rules ?? [];
+  }
+
   getRoutes(): string[] {
-    return this.getRouteDecls().map(({ url, service }) => `${url} ⇢ ${service}`);
+    return computeRouteDeclarations(this).map(({ url, service }) => `${url} ⇢ ${service}`);
   }
 
-  getRouteDecls(): ComputedIngressRoute[] {
+  getServiceNamePort(): ExtensionsBackend {
-    const { spec: { tls = [], rules = [] }} = this;
-    const protocol = tls.length === 0
-      ? "http"
-      : "https";
-
-    return rules.flatMap(({ host = "*", http: { paths } = { paths: [] }}) => (
-      paths.map(({ path = "/", backend }) => ({
-        url: `${protocol}://${host}${path}`,
-        service: getBackendServiceNamePort(backend),
-      }))
-    ));
-  }
-
-  getServiceNamePort(): IExtensionsBackend {
     const { spec: { backend, defaultBackend } = {}} = this;
 
     const serviceName = defaultBackend?.service?.name ?? backend?.serviceName;
@@ -170,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"))) {
@@ -196,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

@@ -111,6 +111,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,53 +49,45 @@ export class IngressDetails extends React.Component<IngressDetailsProps> {
   }
 
   renderPaths(ingress: Ingress) {
-    const { spec: { rules = [], tls = [] }} = ingress;
+    return ingress.getRules()
-    const protocol = tls.length === 0
+      .map((rule, index) => (
-      ? "http"
+        <div className="rules" key={index}>
-      : "https";
+          {rule.host && (
-
+            <div className="host-title">
-    return rules.map((rule, index) => (
+              <>Host: {rule.host}</>
-      <div className="rules" key={index}>
+            </div>
-        {rule.host && (
+          )}
-          <div className="host-title">
+          {rule.http && (
-            <>Host: {rule.host}</>
+            <Table className="paths">
-          </div>
+              <TableHead>
-        )}
+                <TableCell className="path">Path</TableCell>
-        {rule.http && (
+                <TableCell className="link">Link</TableCell>
-          <Table className="paths">
+                <TableCell className="backends">Backends</TableCell>
-            <TableHead>
+              </TableHead>
-              <TableCell className="path">Path</TableCell>
+              {
-              <TableCell className="link">Link</TableCell>
+                computeRuleDeclarations(ingress, rule)
-              <TableCell className="backends">Backends</TableCell>
+                  .map(({ displayAsLink, service, url, pathname }) => (
-            </TableHead>
-            {
-              rule.http.paths
-                .map(({ path = "/", backend }, index) => {
-                  const link = `${protocol}://${rule.host || "*"}${path}`;
-
-                  return (
                     <TableRow key={index}>
-                      <TableCell className="path">{path}</TableCell>
+                      <TableCell className="path">{pathname}</TableCell>
                       <TableCell className="link">
                         {
-                          rule.host
+                          displayAsLink
                             ? (
-                              <a href={link} rel="noreferrer" target="_blank">
+                              <a href={url} rel="noreferrer" target="_blank">
-                                {link}
+                                {url}
                               </a>
                             )
-                            : link
+                            : url
                         }
                       </TableCell>
-                      <TableCell className="backends">{getBackendServiceNamePort(backend)}</TableCell>
+                      <TableCell className="backends">{service}</TableCell>
                     </TableRow>
-                  );
+                  ))
-                })
+              }
-            }
+            </Table>
-          </Table>
+          )}
-        )}
+        </div>
-      </div>
+      ));
-    ));
   }
 
   renderIngressPoints(ingressPoints: ILoadBalancerIngress[]) {

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,28 +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.getRouteDecls().map(route => (
+          computeRouteDeclarations(ingress).map(decl => (
-            <>
+            decl.displayAsLink
-              <a
+              ? (
-                key={route.url}
+                <span key={decl.url}>
-                href={route.url}
+                  <a
-                rel="noreferrer"
+                    href={decl.url}
-                target="_blank"
+                    rel="noreferrer"
-                onClick={e => e.stopPropagation()}
+                    target="_blank"
-              >
+                    onClick={e => e.stopPropagation()}
-                {route.url}
+                  >
-              </a> ⇢ {route.service}
+                    {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;
-          },
-        }}
       />
     );
   }