fix(kube): use https when port is 443 in various tables [EE-6592] (#11443)

app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js

@@ -4,6 +4,8 @@ import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
 import { KubernetesConfigurationKinds } from 'Kubernetes/models/configuration/models';
 import { KubernetesApplicationDeploymentTypes, KubernetesApplicationTypes } from 'Kubernetes/models/application/models/appConstants';
 
+import { getSchemeFromPort } from '@/react/common/network-utils';
+
 angular.module('portainer.kubernetes').controller('KubernetesApplicationsDatatableController', [
   '$scope',
   '$controller',
@@ -105,7 +107,10 @@ angular.module('portainer.kubernetes').controller('KubernetesApplicationsDatatab
       // Map all load balancer service ports to ip address
       let loadBalancerURLs = [];
       if (item.LoadBalancerIPAddress) {
-        loadBalancerURLs = item.PublishedPorts.map((pp) => `http://${item.LoadBalancerIPAddress}:${pp.Port}`);
+        loadBalancerURLs = item.PublishedPorts.map((pp) => {
+          const scheme = getSchemeFromPort(pp.Port);
+          return `${scheme}://${item.LoadBalancerIPAddress}:${pp.Port}`;
+        });
       }
 
       // combine ingress urls

app/react/azure/container-instances/ListView/columns/ports.tsx

@@ -3,6 +3,7 @@ import { CellContext } from '@tanstack/react-table';
 
 import { ContainerGroup } from '@/react/azure/types';
 import { getPorts } from '@/react/azure/utils';
+import { getSchemeFromPort } from '@/react/common/network-utils';
 
 import { Icon } from '@@/Icon';
 
@@ -27,10 +28,17 @@ function PortsCell({
     return '-';
   }
 
-  return ports.map((port) => (
+  return ports.map((port) => {
-    <a className="image-tag" href={`http://${ip}:${port.host}`} key={port.host}>
+    const scheme = getSchemeFromPort(port.host);
-      <Icon icon={ExternalLink} className="mr-1" />
+    return (
-      {ip}:{port.host}
+      <a
-    </a>
+        className="image-tag"
-  ));
+        href={`${scheme}://${ip}:${port.host}`}
+        key={port.host}
+      >
+        <Icon icon={ExternalLink} className="mr-1" />
+        {ip}:{port.host}
+      </a>
+    );
+  });
 }

app/react/common/network-utils.ts

@@ -0,0 +1,8 @@
+export function getSchemeFromPort(port?: number): 'http' | 'https' {
+  if (!port) {
+    return 'http';
+  }
+
+  const hostPort = String(port);
+  return hostPort.endsWith('443') ? 'https' : 'http';
+}

app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx

@@ -3,6 +3,7 @@ import { ExternalLink } from 'lucide-react';
 import { CellContext } from '@tanstack/react-table';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
+import { getSchemeFromPort } from '@/react/common/network-utils';
 
 import { Icon } from '@@/Icon';
 
@@ -31,18 +32,46 @@ function Cell({ row }: CellContext<DockerContainer, string>) {
     return '-';
   }
 
-  const { PublicURL: publicUrl } = environment;
+  const publicURL = getPublicUrl(environment.PublicURL);
 
-  return _.uniqBy(ports, 'public').map((port) => (
+  return _.uniqBy(ports, 'public').map((port) => {
-    <a
+    let url = publicURL || port.host || '';
-      key={`${port.host}:${port.public}`}
+    if (!url.startsWith('http')) {
-      className="image-tag"
+      const scheme = getSchemeFromPort(port.private);
-      href={`http://${publicUrl || port.host}:${port.public}`}
+      url = `${scheme}://${url}`;
-      target="_blank"
+    }
-      rel="noreferrer"
+    url = `${url}:${port.public}`;
-    >
+
-      <Icon icon={ExternalLink} />
+    return (
-      {port.public}:{port.private}
+      <a
-    </a>
+        key={`${port.host}:${port.public}`}
-  ));
+        className="image-tag"
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Icon icon={ExternalLink} />
+        {port.public}:{port.private}
+      </a>
+    );
+  });
+}
+
+function getPublicUrl(url?: string): string {
+  if (!url) {
+    return '';
+  }
+
+  // Add protocol if missing
+  const u =
+    url.startsWith('http://') || url.startsWith('https://')
+      ? url
+      : `http://${url}`;
+
+  try {
+    const parsedUrl = new URL(u);
+    return `${parsedUrl.protocol}://${parsedUrl.hostname}`;
+  } catch (error) {
+    return '';
+  }
 }

app/react/docker/services/ListView/ServicesDatatable/columns/ports.tsx

@@ -3,6 +3,7 @@ import { CellContext } from '@tanstack/react-table';
 
 import { ServiceViewModel } from '@/docker/models/service';
 import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+import { getSchemeFromPort } from '@/react/common/network-utils';
 
 import { Icon } from '@@/Icon';
 
@@ -40,16 +41,20 @@ function Cell({
 
   return ports
     .filter((port) => port.PublishedPort)
-    .map((port) => (
+    .map((port) => {
-      <a
+      const scheme = getSchemeFromPort(port.TargetPort);
-        key={`${publicUrl}:${port.PublishedPort}`}
+
-        className="image-tag vertical-center"
+      return (
-        href={`http://${publicUrl}:${port.PublishedPort}`}
+        <a
-        target="_blank"
+          key={`${publicUrl}:${port.PublishedPort}`}
-        rel="noreferrer"
+          className="image-tag vertical-center"
-      >
+          href={`${scheme}://${publicUrl}:${port.PublishedPort}`}
-        <Icon icon={ExternalLink} />
+          target="_blank"
-        {port.PublishedPort}:{port.TargetPort}
+          rel="noreferrer"
-      </a>
+        >
-    ));
+          <Icon icon={ExternalLink} />
+          {port.PublishedPort}:{port.TargetPort}
+        </a>
+      );
+    });
 }