Feature/port forward dashboard (#3922)

* Added ability to add custom port on pod and service port forwarding (#3295)

* Added ability to add custom port on pod and service port forwarding

Signed-off-by: rdeepc <12953177+rdeepc@users.noreply.github.com>

* Added ability to add custom port on pod and service port forwarding

- pod-container-port fixed init async and active port checking
- service-port-component fixed init async and active port checking
- port-forward-route promise and response fix

Signed-off-by: rdeepc <12953177+rdeepc@users.noreply.github.com>

* Added ability to add custom port on pod and service port forwarding

Signed-off-by: rdeepc <12953177+rdeepc@users.noreply.github.com>

* - Added Custom Port Selection for port forwarding
- Implemented Random Port if custom port is not provided

Signed-off-by: rdeepc <12953177+rdeepc@users.noreply.github.com>

Co-authored-by: Saumya Shovan Roy <saumyashovanroy@gmail.com>

* cherry-pick of hackweek work plus merge conflicts/build errors

    added a route to get all port forwards

    Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

    Added Forwarded Ports to cluster dashboard

    Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

    working port-forward page (open, edit, remove)

    Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

    added local storage to the port-forward store

    Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

    automatically restore port-forward after pod is restarted

    Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

    start port-forwards using random local port by default, rearranged pod and service port-forward UI

    Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* refactor

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* more refactoring, don't always open port-forwards in browser, refined reused port-forward dialog

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* removed unimplemented forwarded port details page,modified logging

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* addressed some review comments

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* made port and forwardPort query params and cleaned up port-forward routing paths

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* address more review comments and change dashboard tab name to 'Port Forwarding'

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* changed port and forwardPort fields to be Numbers

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* removed extraneous reset() call, reorder field declarations

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* port-forward now gets the bundled kubectl path without going through the 'ensureKubectl' hoops

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* more cleanup/tweaking

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* fix bug where port-forward info did not update on pod details page when different pod (in same deployment?) is clicked

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

Co-authored-by: Saumya Shovan Roy (Deep) <12953177+rdeepc@users.noreply.github.com>
Co-authored-by: Saumya Shovan Roy <saumyashovanroy@gmail.com>

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

@@ -32,6 +32,7 @@ import { ServicePortComponent } from "./service-port-component";
 import { endpointStore } from "../+network-endpoints/endpoints.store";
 import { ServiceDetailsEndpoint } from "./service-details-endpoint";
 import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
+import { portForwardStore } from "../../port-forward";
 
 interface Props extends KubeObjectDetailsProps<Service> {
 }
@@ -46,6 +47,7 @@ export class ServiceDetails extends React.Component<Props> {
         preload: true,
         namespaces: [service.getNs()],
       }),
+      portForwardStore.watch(),
     ]);
   }
 

src/renderer/components/+network-services/service-port-component.scss

@@ -33,11 +33,13 @@
     cursor: pointer;
     color: $primary;
     text-decoration: underline;
+    padding-right: 1em;
   }
 
-  .Spinner {
-    --spinner-size: #{$unit * 2};
-    margin-left: $margin;
-    position: absolute;
+  .portInput {
+    display: inline-block !important;
+    width: 70px;
+    margin-left: 10px;
+    margin-right: 10px;
   }
 }

src/renderer/components/+network-services/service-port-component.tsx

@@ -22,12 +22,15 @@
 import "./service-port-component.scss";
 
 import React from "react";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import type { Service, ServicePort } from "../../../common/k8s-api/endpoints";
-import { apiBase } from "../../api";
-import { observable, makeObservable } from "mobx";
+import { observable, makeObservable, reaction } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
+import { Button } from "../button";
+import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, removePortForward } from "../../port-forward";
+import type { ForwardedPort } from "../../port-forward";
+import logger from "../../../common/logger";
 import { Spinner } from "../spinner";
 
 interface Props {
@@ -38,20 +41,86 @@ interface Props {
 @observer
 export class ServicePortComponent extends React.Component<Props> {
   @observable waiting = false;
+  @observable forwardPort = 0;
+  @observable isPortForwarded = false;
 
   constructor(props: Props) {
     super(props);
     makeObservable(this);
+    this.init();
+  }
+
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => [ portForwardStore.portForwards, this.props.service ], () => this.init()),
+    ]);
+  }
+
+  init() {
+    this.checkExistingPortForwarding().catch(error => {
+      logger.error(error);
+    });
+  }
+
+  async checkExistingPortForwarding() {
+    const { service, port } = this.props;
+    const portForward: ForwardedPort = {
+      kind: "service",
+      name: service.getName(),
+      namespace: service.getNs(),
+      port: port.port,
+      forwardPort: this.forwardPort,
+    };
+    const activePort = await getPortForward(portForward) ?? 0;
+
+    this.forwardPort = activePort;
+    this.isPortForwarded = activePort ? true : false;
   }
 
   async portForward() {
     const { service, port } = this.props;
+    const portForward: ForwardedPort = {
+      kind: "service",
+      name: service.getName(),
+      namespace: service.getNs(),
+      port: port.port,
+      forwardPort: this.forwardPort,
+    };
+
+    this.waiting = true;
+    this.isPortForwarded = false;
+
+    try {
+      this.forwardPort = await addPortForward(portForward);
+
+      if (this.forwardPort) {
+        portForward.forwardPort = this.forwardPort;
+        openPortForward(portForward);
+        this.isPortForwarded = true;
+      }
+    } catch (error) {
+      Notifications.error(error);
+    } finally {
+      this.waiting = false;
+    }
+  }
+
+  async stopPortForward() {
+    const { service, port } = this.props;
+    const portForward: ForwardedPort = {
+      kind: "service",
+      name: service.getName(),
+      namespace: service.getNs(),
+      port: port.port,
+      forwardPort: this.forwardPort,
+    };
 
     this.waiting = true;
 
     try {
-      await apiBase.post(`/pods/${service.getNs()}/service/${service.getName()}/port-forward/${port.port}`, {});
-    } catch(error) {
+      await removePortForward(portForward);
+      this.isPortForwarded = false;
+    } catch (error) {
       Notifications.error(error);
     } finally {
       this.waiting = false;
@@ -59,16 +128,33 @@ export class ServicePortComponent extends React.Component<Props> {
   }
 
   render() {
-    const { port } = this.props;
+    const { port, service } = this.props;
+
+    const portForwardAction = async () => {
+      if (this.isPortForwarded) {
+        await this.stopPortForward();
+      } else {
+        const portForward: ForwardedPort = {
+          kind: "service",
+          name: service.getName(),
+          namespace: service.getNs(),
+          port: port.port,
+          forwardPort: this.forwardPort,
+        };
+
+        PortForwardDialog.open(portForward, { openInBrowser: true });
+      }
+    };
 
     return (
       <div className={cssNames("ServicePortComponent", { waiting: this.waiting })}>
-        <span title="Open in a browser" onClick={() => this.portForward() }>
+        <span title="Open in a browser" onClick={() => this.portForward()}>
           {port.toString()}
-          {this.waiting && (
-            <Spinner />
-          )}
         </span>
+        <Button onClick={() => portForwardAction()}> {this.isPortForwarded ? "Stop" : "Forward..."} </Button>
+        {this.waiting && (
+          <Spinner />
+        )}
       </div>
     );
   }