fix(ui): bring back k8s applications page row expand published urls [r8s-145] (#356)

app/react/kubernetes/applications/ListView/ApplicationsDatatable/PublishedPorts.tsx

@@ -7,64 +7,74 @@ import { Icon } from '@@/Icon';
 import { Application } from './types';
 
 export function PublishedPorts({ item }: { item: Application }) {
-  const urls = getPublishedUrls(item);
+  const urlsWithTypes = getPublishedUrls(item);
 
-  if (urls.length === 0) {
+  if (urlsWithTypes.length === 0) {
     return null;
   }
 
   return (
-    <div className="published-url-container">
-      <div>
-        <div className="text-muted"> Published URL(s) </div>
-      </div>
-      <div>
-        {urls.map((url) => (
-          <div key={url}>
-            <a
-              href={url}
-              target="_blank"
-              className="publish-url-link vertical-center"
-              rel="noreferrer"
-            >
-              <Icon icon={ExternalLinkIcon} />
-              {url}
-            </a>
-          </div>
+    <div className="published-url-container pl-10 flex">
+      <div className="text-muted mr-12">Published URL(s)</div>
+      <div className="flex flex-col">
+        {urlsWithTypes.map(({ url, type }) => (
+          <a
+            key={url}
+            href={url}
+            target="_blank"
+            className="publish-url-link vertical-center mb-1"
+            rel="noreferrer"
+          >
+            <Icon icon={ExternalLinkIcon} />
+            {type && (
+              <span className="text-muted w-24 inline-block">{type}</span>
+            )}
+            <span>{url}</span>
+          </a>
         ))}
       </div>
     </div>
   );
 }
 
+function getClusterIPUrls(services?: Application['Services']) {
+  return (
+    services?.flatMap(
+      (service) =>
+        (service.spec?.type === 'ClusterIP' &&
+          service.spec?.ports?.map((port) => ({
+            url: `${getSchemeFromPort(port.port)}://${service?.spec
+              ?.clusterIP}:${port.port}`,
+            type: 'ClusterIP',
+          }))) ||
+        []
+    ) || []
+  );
+}
+
+function getNodePortUrls(services?: Application['Services']) {
+  return (
+    services?.flatMap(
+      (service) =>
+        (service.spec?.type === 'NodePort' &&
+          service.spec?.ports?.map((port) => ({
+            url: `${getSchemeFromPort(port.port)}://${
+              window.location.hostname
+            }:${port.nodePort}`,
+            type: 'NodePort',
+          }))) ||
+        []
+    ) || []
+  );
+}
+
 export function getPublishedUrls(item: Application) {
-  // Map all ingress rules in published ports to their respective URLs
-  const ingressUrls =
-    item.PublishedPorts?.flatMap((pp) => pp.IngressRules)
-      .filter(({ Host, IP }) => Host || IP)
-      .map(({ Host, IP, Path, TLS }) => {
-        const scheme =
-          TLS &&
-          TLS.filter((tls) => tls.hosts && tls.hosts.includes(Host)).length > 0
-            ? 'https'
-            : 'http';
-        return `${scheme}://${Host || IP}${Path}`;
-      }) || [];
+  // Get URLs from clusterIP and nodePort services
+  const clusterIPs = getClusterIPUrls(item.Services);
+  const nodePortUrls = getNodePortUrls(item.Services);
 
-  // Map all load balancer service ports to ip address
-  const loadBalancerURLs =
-    (item.LoadBalancerIPAddress &&
-      item.PublishedPorts?.map(
-        (pp) =>
-          `${getSchemeFromPort(pp.Port)}://${item.LoadBalancerIPAddress}:${
-            pp.Port
-          }`
-      )) ||
-    [];
+  // combine all urls
+  const publishedUrls = [...clusterIPs, ...nodePortUrls];
 
-  // combine ingress urls
-  const publishedUrls = [...ingressUrls, ...loadBalancerURLs];
-
-  // Return the first URL - priority given to ingress urls, then services (load balancers)
   return publishedUrls.length > 0 ? publishedUrls : [];
 }