From 58314945ed5a1a068f645383c25766825419f509 Mon Sep 17 00:00:00 2001 From: Jim Ehrismann Date: Tue, 5 Oct 2021 10:30:47 -0400 Subject: [PATCH] address more review comments and change dashboard tab name to 'Port Forwarding' Signed-off-by: Jim Ehrismann --- .../+network-port-forwards/port-forwards.tsx | 2 +- .../service-port-component.tsx | 16 +++------------- src/renderer/components/+network/network.tsx | 2 +- .../+workloads-pods/pod-container-port.tsx | 18 +++--------------- .../port-forward/port-forward-dialog.tsx | 4 ++-- .../port-forward/port-forward.store.ts | 8 ++++---- 6 files changed, 14 insertions(+), 36 deletions(-) diff --git a/src/renderer/components/+network-port-forwards/port-forwards.tsx b/src/renderer/components/+network-port-forwards/port-forwards.tsx index f026fb7e20..c056dab454 100644 --- a/src/renderer/components/+network-port-forwards/port-forwards.tsx +++ b/src/renderer/components/+network-port-forwards/port-forwards.tsx @@ -72,7 +72,7 @@ export class PortForwards extends React.Component { searchFilters={[ item => item.getSearchFields(), ]} - renderHeaderTitle="Forwarded Ports" + renderHeaderTitle="Port Forwarding" renderTableHeader={[ { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, diff --git a/src/renderer/components/+network-services/service-port-component.tsx b/src/renderer/components/+network-services/service-port-component.tsx index fb420acc4e..c99eb5a8fa 100644 --- a/src/renderer/components/+network-services/service-port-component.tsx +++ b/src/renderer/components/+network-services/service-port-component.tsx @@ -25,7 +25,7 @@ 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 { cssNames, disposer } from "../../utils"; +import { cssNames } from "../../utils"; import { Notifications } from "../notifications"; import { Button } from "../button"; import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, removePortForward } from "../../port-forward"; @@ -52,14 +52,8 @@ export class ServicePortComponent extends React.Component { componentDidMount() { disposeOnUnmount(this, [ - this.watch(), - ]); - } - - watch() { - return disposer( reaction(() => portForwardStore.portForwards, () => this.init()), - ); + ]); } init() { @@ -77,11 +71,7 @@ export class ServicePortComponent extends React.Component { port: port.port.toString(), forwardPort: this.forwardPort.toString() }; - let activePort = await getPortForward(portForward); - - if (!activePort) { - activePort = 0; - } + const activePort = await getPortForward(portForward) ?? 0; this.forwardPort = activePort; this.isPortForwarded = activePort ? true : false; diff --git a/src/renderer/components/+network/network.tsx b/src/renderer/components/+network/network.tsx index 4ade9cf8a7..083996374c 100644 --- a/src/renderer/components/+network/network.tsx +++ b/src/renderer/components/+network/network.tsx @@ -74,7 +74,7 @@ export class Network extends React.Component { } tabs.push({ - title: "Forwarded Ports", + title: "Port Forwarding", component: PortForwards, url: routes.portForwardsURL(), routePath: routes.portForwardsRoute.path.toString(), diff --git a/src/renderer/components/+workloads-pods/pod-container-port.tsx b/src/renderer/components/+workloads-pods/pod-container-port.tsx index 9543a27cfa..af58fe4362 100644 --- a/src/renderer/components/+workloads-pods/pod-container-port.tsx +++ b/src/renderer/components/+workloads-pods/pod-container-port.tsx @@ -24,7 +24,7 @@ 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, IReactionDisposer } from "mobx"; +import { observable, makeObservable, reaction } from "mobx"; import { cssNames } from "../../utils"; import { Notifications } from "../notifications"; import { Button } from "../button"; @@ -56,16 +56,8 @@ export class PodContainerPort extends React.Component { componentDidMount() { disposeOnUnmount(this, [ - this.watch(), - ]); - } - - watch() { - const disposers: IReactionDisposer[] = [ reaction(() => portForwardStore.portForwards, () => this.init()), - ]; - - return () => disposers.forEach((dispose) => dispose()); + ]); } init() { @@ -83,11 +75,7 @@ export class PodContainerPort extends React.Component { port: port.containerPort.toString(), forwardPort: this.forwardPort.toString() }; - let activePort = await getPortForward(portForward); - - if (!activePort) { - activePort = 0; - } + const activePort = await getPortForward(portForward) ?? 0; this.forwardPort = activePort; this.isPortForwarded = activePort ? true : false; diff --git a/src/renderer/port-forward/port-forward-dialog.tsx b/src/renderer/port-forward/port-forward-dialog.tsx index 7d0ff7524c..d4d5fd6bfa 100644 --- a/src/renderer/port-forward/port-forward-dialog.tsx +++ b/src/renderer/port-forward/port-forward-dialog.tsx @@ -125,7 +125,7 @@ export class PortForwardDialog extends Component {
Local port to forward from:
- { render() { const { className, ...dialogProps } = this.props; - const resourceName = this.portForward ? this.portForward.name : ""; + const resourceName = this.portForward?.name ?? ""; const header = (
Port Forwarding for {resourceName} diff --git a/src/renderer/port-forward/port-forward.store.ts b/src/renderer/port-forward/port-forward.store.ts index 546e1eeaee..cbf0f15ced 100644 --- a/src/renderer/port-forward/port-forward.store.ts +++ b/src/renderer/port-forward/port-forward.store.ts @@ -97,7 +97,7 @@ export async function addPortForward(portForward: ForwardedPort): Promise(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`, {}); + response = await apiBase.post(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`); if (response?.port && response.port != +portForward.forwardPort) { logger.warn(`specified ${portForward.forwardPort} got ${response.port}`); @@ -114,7 +114,7 @@ export async function getPortForward(portForward: ForwardedPort): Promise(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`, {}); + response = await apiBase.get(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`); } catch (error) { logger.warn(error); // don't care, caller must check } @@ -140,7 +140,7 @@ export async function modifyPortForward(portForward: ForwardedPort, desiredPort: export async function removePortForward(portForward: ForwardedPort) { try { - await apiBase.del(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`, {}); + await apiBase.del(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`); await waitUntilFree(+portForward.forwardPort, 200, 1000); } catch (error) { logger.warn(error); // don't care, caller must check @@ -150,7 +150,7 @@ export async function removePortForward(portForward: ForwardedPort) { export async function getPortForwards(): Promise { try { - const response = await apiBase.get(`/pods/port-forwards`, {}); + const response = await apiBase.get(`/pods/port-forwards`); return response.portForwards; } catch (error) {