Initial port-forward implementation for services (#231)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/api/endpoints/service.api.ts

@@ -2,6 +2,33 @@ import { autobind } from "../../utils";
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 
+export interface IServicePort {
+  name?: string;
+  protocol: string;
+  port: number;
+  targetPort: number;
+}
+
+export class ServicePort implements IServicePort {
+  name?: string;
+  protocol: string;
+  port: number;
+  targetPort: number;
+  nodePort?: number;
+
+  constructor(data: IServicePort) {
+    Object.assign(this, data)
+  }
+
+  toString() {
+    if (this.nodePort) {
+      return `${this.port}:${this.nodePort}/${this.protocol}`;
+    } else {
+      return `${this.port}${this.port === this.targetPort ? "" : ":" + this.targetPort}/${this.protocol}`;
+    }
+  }
+}
+
 @autobind()
 export class Service extends KubeObject {
   static kind = "Service"
@@ -13,7 +40,7 @@ export class Service extends KubeObject {
     loadBalancerIP?: string;
     sessionAffinity: string;
     selector: { [key: string]: string };
-    ports: { name?: string; protocol: string; port: number; targetPort: number }[];
+    ports: ServicePort[];
     externalIPs?: string[]; // https://kubernetes.io/docs/concepts/services-networking/service/#external-ips
   }
 
@@ -47,11 +74,9 @@ export class Service extends KubeObject {
     return Object.entries(this.spec.selector).map(val => val.join("="));
   }
 
-  getPorts(): string[] {
+  getPorts(): ServicePort[] {
     const ports = this.spec.ports || [];
-    return ports.map(({ port, protocol, targetPort }) => {
-      return `${port}${port === targetPort ? "" : ":" + targetPort}/${protocol}`
-    })
+    return ports.map(p => new ServicePort(p));
   }
 
   getLoadBalancer() {

dashboard/client/components/+network-services/service-details.scss

@@ -1,3 +1,2 @@
 .ServicesDetails {
-
-}
+}

dashboard/client/components/+network-services/service-details.tsx

@@ -11,6 +11,7 @@ import { Service, serviceApi } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
 import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { ServicePorts } from "./service-ports";
 
 interface Props extends KubeObjectDetailsProps<Service> {
 }
@@ -49,8 +50,8 @@ export class ServiceDetails extends React.Component<Props> {
           </DrawerItem>
         )}
 
-        <DrawerItem name={<Trans>Ports</Trans>} labelsOnly>
-          {service.getPorts().map(port => <Badge key={port} label={port}/>)}
+        <DrawerItem name={<Trans>Ports</Trans>}>
+          <ServicePorts service={service}/>
         </DrawerItem>
 
         {spec.type === "LoadBalancer" && spec.loadBalancerIP && (
@@ -67,4 +68,4 @@ export class ServiceDetails extends React.Component<Props> {
 
 apiManager.registerViews(serviceApi, {
   Details: ServiceDetails,
-})
+})

dashboard/client/components/+network-services/service-ports.scss

@@ -0,0 +1,24 @@
+.ServicePorts {
+  &.waiting {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  p {
+    &:not(:last-child) {
+      margin-bottom: $margin;
+    }
+
+    span {
+      cursor: pointer;
+      color: $primary;
+      text-decoration: underline;
+    }
+  }
+
+  .Spinner {
+    --spinner-size: #{$unit * 2};
+    margin-left: $margin;
+    position: absolute;
+  }
+}

dashboard/client/components/+network-services/service-ports.tsx

@@ -0,0 +1,54 @@
+import "./service-ports.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { t } from "@lingui/macro";
+import { Service, ServicePort } from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { apiBase } from "../../api"
+import { observable } from "mobx";
+import { cssNames } from "../../utils";
+import { Notifications } from "../notifications";
+import { Spinner } from "../spinner"
+
+interface Props {
+  service: Service;
+}
+
+@observer
+export class ServicePorts extends React.Component<Props> {
+  @observable waiting = false;
+
+  async portForward(port: ServicePort) {
+    const { service } = this.props;
+    this.waiting = true;
+    apiBase.post(`/services/${service.getNs()}/${service.getName()}/port-forward/${port.port}`, {})
+      .catch(error => {
+        Notifications.error(error);
+      })
+      .finally(() => {
+        this.waiting = false;
+      });
+  }
+
+  render() {
+    const { service } = this.props;
+    return (
+      <div className={cssNames("ServicePorts", { waiting: this.waiting })}>
+        {
+          service.getPorts().map((port) => {
+            return(
+              <p key={port.toString()}>
+                <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward(port) }>
+                  {port.toString()}
+                  {this.waiting && (
+                    <Spinner />
+                  )}
+                </span>
+              </p>
+            );
+          })}
+      </div>
+    );
+  }
+}