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

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) => (
-    <a
-      key={`${port.host}:${port.public}`}
-      className="image-tag"
-      href={`http://${publicUrl || port.host}:${port.public}`}
-      target="_blank"
-      rel="noreferrer"
-    >
-      <Icon icon={ExternalLink} />
-      {port.public}:{port.private}
-    </a>
-  ));
+  return _.uniqBy(ports, 'public').map((port) => {
+    let url = publicURL || port.host || '';
+    if (!url.startsWith('http')) {
+      const scheme = getSchemeFromPort(port.private);
+      url = `${scheme}://${url}`;
+    }
+    url = `${url}:${port.public}`;
+
+    return (
+      <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) => (
-      <a
-        key={`${publicUrl}:${port.PublishedPort}`}
-        className="image-tag vertical-center"
-        href={`http://${publicUrl}:${port.PublishedPort}`}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <Icon icon={ExternalLink} />
-        {port.PublishedPort}:{port.TargetPort}
-      </a>
-    ));
+    .map((port) => {
+      const scheme = getSchemeFromPort(port.TargetPort);
+
+      return (
+        <a
+          key={`${publicUrl}:${port.PublishedPort}`}
+          className="image-tag vertical-center"
+          href={`${scheme}://${publicUrl}:${port.PublishedPort}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Icon icon={ExternalLink} />
+          {port.PublishedPort}:{port.TargetPort}
+        </a>
+      );
+    });
 }