working

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

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

@@ -24,11 +24,11 @@ import "./service-port-component.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { Service, ServicePort } from "../../../common/k8s-api/endpoints";
-import { observable, makeObservable, reaction } from "mobx";
+import { observable, makeObservable, reaction, action } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
-import { aboutPortForwarding, addPortForward, getPortForward, getPortForwards, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
+import { aboutPortForwarding, addPortForward, forwardedPortStatus, getPortForward, getPortForwards, getPortForwardStatus, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
 import type { ForwardedPort } from "../../port-forward";
 import { Spinner } from "../spinner";
 
@@ -66,19 +66,28 @@ export class ServicePortComponent extends React.Component<Props> {
     };
 
     let activePort: number;
+    let status: forwardedPortStatus;
+
+    console.log("checkExistingPortForwarding()");
 
     try {
       activePort = await getPortForward(portForward) ?? 0;
+      status = await getPortForwardStatus(portForward);
     } catch (error) {
       this.isPortForwarded = false;
 
+      console.log("(catch) isPortForwarded:", this.isPortForwarded, this.forwardPort);
+
       return;
     }
 
     this.forwardPort = activePort;
-    this.isPortForwarded = activePort ? true : false;
+    this.isPortForwarded = (status === "Active" && activePort) ? true : false;
+
+    console.log("isPortForwarded:", this.isPortForwarded, this.forwardPort);
   }
 
+  @action
   async portForward() {
     const { service, port } = this.props;
     const portForward: ForwardedPort = {
@@ -88,13 +97,14 @@ export class ServicePortComponent extends React.Component<Props> {
       port: port.port,
       forwardPort: this.forwardPort,
       protocol: predictProtocol(port.name),
+      status: "Active",
     };
 
     this.waiting = true;
 
     try {
       // determine how many port-forwards already exist
-      const { length } = await getPortForwards();
+      const { length } = getPortForwards();
 
       this.forwardPort = await addPortForward(portForward);
 
@@ -116,6 +126,7 @@ export class ServicePortComponent extends React.Component<Props> {
     }
   }
 
+  @action
   async stopPortForward() {
     const { service, port } = this.props;
     const portForward: ForwardedPort = {
@@ -128,6 +139,8 @@ export class ServicePortComponent extends React.Component<Props> {
 
     this.waiting = true;
 
+    console.log("stopPortForward()");
+
     try {
       await removePortForward(portForward);
       this.isPortForwarded = false;

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -24,12 +24,11 @@ import "./pod-container-port.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { Pod } from "../../../common/k8s-api/endpoints";
-import { observable, makeObservable, reaction } from "mobx";
+import { action, observable, makeObservable, reaction } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
-import { aboutPortForwarding, addPortForward, getPortForward, getPortForwards, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
+import { aboutPortForwarding, addPortForward, forwardedPortStatus, getPortForward, getPortForwards, getPortForwardStatus, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";import type { ForwardedPort } from "../../port-forward";
-import type { ForwardedPort } from "../../port-forward";
 import { Spinner } from "../spinner";
 
 interface Props {
@@ -70,9 +69,11 @@ export class PodContainerPort extends React.Component<Props> {
     };
 
     let activePort: number;
+    let status: forwardedPortStatus;
 
     try {
       activePort = await getPortForward(portForward) ?? 0;
+      status = await getPortForwardStatus(portForward);
     } catch (error) {
       this.isPortForwarded = false;
 
@@ -80,9 +81,10 @@ export class PodContainerPort extends React.Component<Props> {
     }
 
     this.forwardPort = activePort;
-    this.isPortForwarded = activePort ? true : false;
+    this.isPortForwarded = (status === "Active" && activePort) ? true : false;
   }
 
+  @action
   async portForward() {
     const { pod, port } = this.props;
     const portForward: ForwardedPort = {
@@ -92,13 +94,14 @@ export class PodContainerPort extends React.Component<Props> {
       port: port.containerPort,
       forwardPort: this.forwardPort,
       protocol: predictProtocol(port.name),
+      status: "Active",
     };
 
     this.waiting = true;
 
     try {
       // determine how many port-forwards already exist
-      const { length } = await getPortForwards();
+      const { length } = getPortForwards();
 
       this.forwardPort = await addPortForward(portForward);
 
@@ -120,6 +123,7 @@ export class PodContainerPort extends React.Component<Props> {
     }
   }
 
+  @action
   async stopPortForward() {
     const { pod, port } = this.props;
     const portForward: ForwardedPort = {

src/renderer/port-forward/port-forward-dialog.tsx

@@ -97,11 +97,12 @@ export class PortForwardDialog extends Component<Props> {
 
     try {
       // determine how many port-forwards already exist
-      const { length } = await getPortForwards();
+      const { length } = getPortForwards();
 
       let port: number;
 
       portForward.protocol = dialogState.useHttps ? "https" : "http";
+      portForward.status = "Active";
 
       if (currentPort) {
         port = await modifyPortForward(portForward, desiredPort);

src/renderer/port-forward/port-forward-item.ts

@@ -50,7 +50,7 @@ export class PortForwardItem implements ItemObject {
     this.port = pf.port;
     this.forwardPort = pf.forwardPort;
     this.protocol = pf.protocol ?? "http";
-    this.status = pf.status;
+    this.status = pf.status ?? "Active";
 
     autoBind(this);
   }

src/renderer/port-forward/port-forward.store.ts

@@ -20,10 +20,10 @@
  */
 
 
-import { makeObservable, observable, reaction } from "mobx";
+import { action, makeObservable, observable, reaction } from "mobx";
 import { ItemStore } from "../../common/item.store";
-import { autoBind, createStorage, disposer, getHostedClusterId } from "../utils";
+import { autoBind, createStorage, disposer } from "../utils";
-import { ForwardedPort, PortForwardItem } from "./port-forward-item";
+import { ForwardedPort, forwardedPortStatus, PortForwardItem } from "./port-forward-item";
 import { apiBase } from "../api";
 import { waitUntilFree } from "tcp-port-used";
 import logger from "../../common/logger";
@@ -63,13 +63,13 @@ export class PortForwardStore extends ItemStore<PortForwardItem> {
 
   watch() {
     return disposer(
-      reaction(() => this.portForwards.slice(), () => this.loadAll()),
+      reaction(() => portForwardStore.portForwards.slice(), () => portForwardStore.loadAll()),
     );
   }
 
   loadAll() {
-    return this.loadItems(async () => {
+    return this.loadItems(() => {
-      const portForwards = await getPortForwards(getHostedClusterId());
+      const portForwards = getPortForwards();
 
       this.storage.set(portForwards);
 
@@ -113,11 +113,21 @@ function portForwardsEqual(portForward: ForwardedPort) {
 }
 
 function findPortForward(portForward: ForwardedPort) {
-  return (portForwardStore.portForwards.find(portForwardsEqual(portForward)));
+  return portForwardStore.portForwards.find(portForwardsEqual(portForward));
 
 }
 
-export async function startPortForward(portForward: ForwardedPort): Promise<number> {
+const setPortForward = action((portForward: ForwardedPort) => {
+  const index = portForwardStore.portForwards.findIndex(portForwardsEqual(portForward));
+  
+  if (index < 0 ) {
+    return;
+  }
+
+  portForwardStore.portForwards[index] = new PortForwardItem(portForward);
+});
+
+export const startPortForward = action( async (portForward: ForwardedPort): Promise<number> => {
   const pf = findPortForward(portForward);
   
   if (!pf) {
@@ -127,31 +137,34 @@ export async function startPortForward(portForward: ForwardedPort): Promise<numb
     throw(error);    
   }
 
-  const { port, forwardPort } = portForward;
+  const { port, forwardPort } = pf;
   let response: PortForwardResult;
 
   try {
-    const protocol = portForward.protocol ?? "http";
+    const protocol = pf.protocol ?? "http";
 
-    response = await apiBase.post<PortForwardResult>(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}`, { query: { port, forwardPort, protocol }});
+    response = await apiBase.post<PortForwardResult>(`/pods/port-forward/${pf.namespace}/${pf.kind}/${pf.name}`, { query: { port, forwardPort, protocol }});
 
     // expecting the received port to be the specified port, unless the specified port is 0, which indicates any available port is suitable
-    if (portForward.forwardPort && response?.port && response.port != +portForward.forwardPort) {
+    if (pf.forwardPort && response?.port && response.port != +pf.forwardPort) {
-      logger.warn(`[PORT-FORWARD-STORE] specified ${portForward.forwardPort}, got ${response.port}`);
+      logger.warn(`[PORT-FORWARD-STORE] specified ${pf.forwardPort}, got ${response.port}`);
     }
 
     pf.forwardPort = response.port;
     pf.status = "Active";
+
   } catch (error) {
-    logger.warn("[PORT-FORWARD-STORE] Error adding port-forward:", error, portForward);
+    logger.warn("[PORT-FORWARD-STORE] Error starting port-forward:", error, pf);
     pf.status = "Disabled";
     throw (error);
+  } finally {
+    setPortForward(pf);
   }
 
   return response?.port;
-}
+});
 
-export async function addPortForward(portForward: ForwardedPort): Promise<number> {
+export const addPortForward = action(async (portForward: ForwardedPort): Promise<number> => {
   const pf = findPortForward(portForward);
 
   if (pf) {
@@ -171,12 +184,12 @@ export async function addPortForward(portForward: ForwardedPort): Promise<number
       portForward.forwardPort = port;
     }
   } catch (error) {
-    logger.warn("[PORT-FORWARD-STORE] Error starting port-forward:", error, portForward);
+    logger.warn("[PORT-FORWARD-STORE] Error adding port-forward:", error, portForward);
     throw(error);
   }
 
   return portForward.forwardPort;
-}
+});
 
 export async function getActivePortForward(portForward: ForwardedPort): Promise<number> {
   const { port, forwardPort, protocol } = portForward;
@@ -197,30 +210,43 @@ export async function getPortForward(portForward: ForwardedPort): Promise<number
   const pf = findPortForward(portForward);
   
   if (!pf) {
-    const error = new Error("port-forward not found");
+    throw new Error("port-forward not found");
-
-    logger.warn("[PORT-FORWARD-STORE] Error getting port-forward:", error, portForward);
-    throw (error);
   }
 
-  let port = pf.forwardPort;
-
   try {
-    port = await getActivePortForward(portForward);
+    // check if the port-forward is active, and if so check if it has the same local port
-    pf.status = "Active";
+    const port = await getActivePortForward(portForward);
 
-    if (port !== pf.forwardPort) {
+    if (port && port !== pf.forwardPort) {
       logger.warn(`[PORT-FORWARD-STORE] local port, expected ${pf.forwardPort}, got ${port}`);
     }
   } catch (error) {
     // port is not active
-    pf.status = "Disabled";
   }
 
-  return port;
+  return pf.forwardPort;
 }
 
-export async function modifyPortForward(portForward: ForwardedPort, desiredPort: number): Promise<number> {
+export async function getPortForwardStatus(portForward: ForwardedPort): Promise<forwardedPortStatus> {
+
+  const pf = findPortForward(portForward);
+  
+  if (!pf) {
+    throw new Error("port-forward not found");
+  }
+
+  try {
+    await getActivePortForward(portForward);
+
+  } catch (error) {
+    // port is not active
+    return "Disabled";
+  }
+
+  return pf.status;
+}
+
+export const modifyPortForward = action(async (portForward: ForwardedPort, desiredPort: number): Promise<number> => {
   let port = 0;
 
   await removePortForward(portForward);
@@ -228,10 +254,10 @@ export async function modifyPortForward(portForward: ForwardedPort, desiredPort:
   port = await addPortForward(portForward);
 
   return port;
-}
+});
 
 
-export async function stopPortForward(portForward: ForwardedPort) {
+export const stopPortForward = action(async (portForward: ForwardedPort) => {
   const pf = findPortForward(portForward);
   
   if (!pf) {
@@ -253,9 +279,10 @@ export async function stopPortForward(portForward: ForwardedPort) {
   }
 
   pf.status = "Disabled";
-}
+  setPortForward(pf);
+});
 
-export async function removePortForward(portForward: ForwardedPort) {
+export const removePortForward = action(async (portForward: ForwardedPort) => {
   const pf = findPortForward(portForward);
 
   if (!pf) {
@@ -273,8 +300,15 @@ export async function removePortForward(portForward: ForwardedPort) {
       logger.warn("[PORT-FORWARD-STORE] Error removing port-forward:", error, portForward);
     }
   }
-  portForwardStore.portForwards = portForwardStore.portForwards.filter(item => item !== pf);
+
-}
+  const index = portForwardStore.portForwards.findIndex(portForwardsEqual(portForward));
+  
+  if (index >= 0 ) {
+    console.log("removePortForward splice", index, portForwardStore.portForwards[index]);
+    portForwardStore.portForwards.splice(index, 1);
+    console.log("portForwards after splice", portForwardStore.portForwards);
+  }
+});
 
 export async function getActivePortForwards(clusterId?: string): Promise<ForwardedPort[]> {
   try {
@@ -288,15 +322,19 @@ export async function getActivePortForwards(clusterId?: string): Promise<Forward
   }
 }
 
-export async function getPortForwards(clusterId?: string): Promise<ForwardedPort[]> {
+export function getPortForwards(): ForwardedPort[] {
+  return portForwardStore.portForwards;
+}
+
+export const getPortForwardsStatus = action(async (clusterId?: string): Promise<ForwardedPort[]> => {
   try {
     // get the active port-forwards to update the status
     const activePortForwards = await getActivePortForwards(clusterId);
 
     portForwardStore.portForwards.map((item, index) => {
-      if (activePortForwards.find(portForwardsEqual(item))) {
+      if (activePortForwards.find(portForwardsEqual(item)) && portForwardStore.portForwards[index].status !== "Active") {
         portForwardStore.portForwards[index].status = "Active";
-      } else {
+      } else if (portForwardStore.portForwards[index].status !== "Disabled") {
         portForwardStore.portForwards[index].status = "Disabled";
       }
     });
@@ -305,6 +343,6 @@ export async function getPortForwards(clusterId?: string): Promise<ForwardedPort
   }
 
   return portForwardStore.portForwards;
-}
+});
 
 export const portForwardStore = new PortForwardStore();