Use spec.serviceName as an externalIP if nothing else (#4188)

* Use spec.serviceName as an externalIP if nothing else

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Move using externalName to display logic

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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

@@ -53,7 +53,7 @@ export interface Service {
     clusterIP: string;
     clusterIPs?: string[];
     externalTrafficPolicy?: string;
-    externalName: string;
+    externalName?: string;
     loadBalancerIP?: string;
     loadBalancerSourceRanges?: string[];
     sessionAffinity: string;
@@ -100,11 +100,15 @@ export class Service extends KubeObject {
   getExternalIps() {
     const lb = this.getLoadBalancer();
 
-    if (lb && lb.ingress) {
+    if (lb?.ingress) {
       return lb.ingress.map(val => val.ip || val.hostname);
     }
 
-    return this.spec.externalIPs || [];
+    if (Array.isArray(this.spec?.externalIPs)) {
+      return this.spec.externalIPs;
+    }
+
+    return [];
   }
 
   getType() {

src/renderer/components/+network-services/service-details.tsx

@@ -67,6 +67,11 @@ export class ServiceDetails extends React.Component<Props> {
 
     const { spec } = service;
     const endpoint = endpointStore.getByName(service.getName(), service.getNs());
+    const externalIps = service.getExternalIps();
+
+    if (externalIps.length === 0 && spec?.externalName) {
+      externalIps.push(spec.externalName);
+    }
 
     return (
       <div className="ServicesDetails">
@@ -106,9 +111,9 @@ export class ServiceDetails extends React.Component<Props> {
           {service.getIpFamilyPolicy()}
         </DrawerItem>
 
-        {service.getExternalIps().length > 0 && (
+        {externalIps.length > 0 && (
           <DrawerItem name="External IPs">
-            {service.getExternalIps().map(ip => <div key={ip}>{ip}</div>)}
+            {externalIps.map(ip => <div key={ip}>{ip}</div>)}
           </DrawerItem>
         )}
 

src/renderer/components/+network-services/services.tsx

@@ -81,18 +81,26 @@ export class Services extends React.Component<Props> {
           { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
           { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
         ]}
-        renderTableContents={service => [
+        renderTableContents={service => {
+          const externalIps = service.getExternalIps();
+
+          if (externalIps.length === 0 && service.spec?.externalName) {
+            externalIps.push(service.spec.externalName);
+          }
+
+          return [
             service.getName(),
             <KubeObjectStatusIcon key="icon" object={service} />,
             service.getNs(),
             service.getType(),
             service.getClusterIp(),
             service.getPorts().join(", "),
-          service.getExternalIps().join(", ") || "-",
+            externalIps.join(", ") || "-",
             service.getSelector().map(label => <Badge key={label} label={label} />),
             service.getAge(),
             { title: service.getStatus(), className: service.getStatus().toLowerCase() },
-        ]}
+          ];
+        }}
       />
     );
   }