Keep port-forward objects around when not running (#4607)

* adding disabled status to port forwards (WIP)

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

* more work

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

* almost working

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

* working

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

* refactoring and bug fixing, still issue with port-forward-dialog

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

* further refactoring and bug fixing

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

* fixed remaining issues around port-forward dialog, changed port-forward-item id to resource name, etc from local port

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

* documentation, more cleanup

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

* address review comments

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

src/renderer/components/+network-port-forwards/port-forward-menu.tsx

@@ -21,7 +21,7 @@
 
 import React from "react";
 import { boundMethod, cssNames } from "../../utils";
-import { openPortForward, PortForwardItem, removePortForward, PortForwardDialog } from "../../port-forward";
+import { openPortForward, PortForwardItem, removePortForward, PortForwardDialog, startPortForward, stopPortForward } from "../../port-forward";
 import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Icon } from "../icon";
@@ -44,6 +44,38 @@ export class PortForwardMenu extends React.Component<Props> {
     }
   }
 
+  private startPortForwarding = async () => {
+    const { portForward } = this.props;
+
+    const pf = await startPortForward(portForward);
+
+    if (pf.status === "Disabled") {
+      const { name, kind, forwardPort } = portForward;
+
+      Notifications.error(`Error occurred starting port-forward, the local port ${forwardPort} may not be available or the ${kind} ${name} may not be reachable`);
+    }
+  };
+
+  renderStartStopMenuItem() {
+    const { portForward, toolbar } = this.props;
+
+    if (portForward.status === "Active") {
+      return (
+        <MenuItem onClick={() => stopPortForward(portForward)}>
+          <Icon material="stop" tooltip="Stop port-forward" interactive={toolbar} />
+          <span className="title">Stop</span>
+        </MenuItem>
+      );
+    }
+
+    return (
+      <MenuItem onClick={this.startPortForwarding}>
+        <Icon material="play_arrow" tooltip="Start port-forward" interactive={toolbar} />
+        <span className="title">Start</span>
+      </MenuItem>
+    );
+  }
+
   renderContent() {
     const { portForward, toolbar } = this.props;
 
@@ -51,14 +83,17 @@ export class PortForwardMenu extends React.Component<Props> {
 
     return (
       <>
-        <MenuItem onClick={() => openPortForward(this.props.portForward)}>
-          <Icon material="open_in_browser" interactive={toolbar} tooltip="Open in browser" />
-          <span className="title">Open</span>
-        </MenuItem>
+        { portForward.status === "Active" &&
+          <MenuItem onClick={() => openPortForward(portForward)}>
+            <Icon material="open_in_browser" interactive={toolbar} tooltip="Open in browser" />
+            <span className="title">Open</span>
+          </MenuItem>
+        }
         <MenuItem onClick={() => PortForwardDialog.open(portForward)}>
           <Icon material="edit" tooltip="Change port or protocol" interactive={toolbar} />
           <span className="title">Edit</span>
         </MenuItem>
+        {this.renderStartStopMenuItem()}
       </>
     );
   }

src/renderer/components/+network-port-forwards/port-forwards.tsx

@@ -70,7 +70,7 @@ export class PortForwards extends React.Component<Props> {
   showDetails = (item: PortForwardItem) => {
     navigation.push(portForwardsURL({
       params: {
-        forwardport: String(item.getForwardPort()),
+        forwardport: item.getId(),
       },
     }));
   };