Initial port-forward implementation for services (#231)

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

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>
+    );
+  }
+}