hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
This commit is contained in:
Jim Ehrismann 2021-12-22 18:11:56 -05:00
parent 103b3dd405
commit 2ce4c0c71c
5 changed files with 63 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/+network-port-forwards/port-forwards.tsx
View File

@ -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(),
},
}));
};

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

@ -28,7 +28,7 @@ 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, getPortForward, getPortForwards, openPortForward, PortForwardDialog, predictProtocol, removePortForward, startPortForward } from "../../port-forward";
import type { ForwardedPort } from "../../port-forward";
import { Spinner } from "../spinner";
import logger from "../../../common/logger";
@ -43,6 +43,7 @@ export class ServicePortComponent extends React.Component<Props> {
@observable waiting = false;
@observable forwardPort = 0;
@observable isPortForwarded = false;
@observable isActive = false;
constructor(props: Props) {
super(props);
@ -52,10 +53,11 @@ export class ServicePortComponent extends React.Component<Props> {
componentDidMount() {
disposeOnUnmount(this, [
reaction(() => [portForwardStore.portForwards.slice(), this.props.service], () => this.checkExistingPortForwarding()),
reaction(() => this.props.service, () => this.checkExistingPortForwarding()),
]);
}
@action
async checkExistingPortForwarding() {
const { service, port } = this.props;
let portForward: ForwardedPort = {
@ -70,12 +72,14 @@ export class ServicePortComponent extends React.Component<Props> {
portForward = await getPortForward(portForward);
} catch (error) {
this.isPortForwarded = false;
this.isActive = false;
return;
}
this.forwardPort = portForward.forwardPort;
this.isPortForwarded = (portForward.status === "Active" && portForward.forwardPort) ? true : false;
this.isPortForwarded = true;
this.isActive = portForward.status === "Active";
}
@action
@ -97,13 +101,16 @@ export class ServicePortComponent extends React.Component<Props> {
// determine how many port-forwards already exist
const { length } = getPortForwards();
portForward = await addPortForward(portForward);
if (!this.isPortForwarded) {
portForward = await addPortForward(portForward);
} else if (!this.isActive) {
portForward = await startPortForward(portForward);
}
this.forwardPort = portForward.forwardPort;
if (portForward.status === "Active") {
openPortForward(portForward);
this.isPortForwarded = true;
// if this is the first port-forward show the about notification
if (!length) {
@ -111,12 +118,11 @@ export class ServicePortComponent extends React.Component<Props> {
}
} else {
Notifications.error(`Error occurred starting port-forward, the local port may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);
this.isPortForwarded = false;
}
} catch (error) {
logger.error("[SERVICE-PORT-COMPONENT]:", error, portForward);
this.checkExistingPortForwarding();
} finally {
this.checkExistingPortForwarding();
this.waiting = false;
}
}
@ -134,15 +140,13 @@ export class ServicePortComponent extends React.Component<Props> {
this.waiting = true;
console.log("stopPortForward()");
try {
await removePortForward(portForward);
this.isPortForwarded = false;
} catch (error) {
Notifications.error(`Error occurred stopping the port-forward from port ${portForward.forwardPort}.`);
this.checkExistingPortForwarding();
} finally {
this.checkExistingPortForwarding();
this.forwardPort = 0;
this.waiting = false;
}
}
@ -150,7 +154,7 @@ export class ServicePortComponent extends React.Component<Props> {
render() {
const { port, service } = this.props;
const portForwardAction = async () => {
const portForwardAction = action(async () => {
if (this.isPortForwarded) {
await this.stopPortForward();
} else {
@ -163,16 +167,16 @@ export class ServicePortComponent extends React.Component<Props> {
protocol: predictProtocol(port.name),
};
PortForwardDialog.open(portForward, { openInBrowser: true });
PortForwardDialog.open(portForward, { openInBrowser: true, onClose: () => this.checkExistingPortForwarding() });
}
};
});
return (
<div className={cssNames("ServicePortComponent", { waiting: this.waiting })}>
<span title="Open in a browser" onClick={() => this.portForward()}>
{port.toString()}
</span>
<Button primary onClick={() => portForwardAction()}> {this.isPortForwarded ? "Stop" : "Forward..."} </Button>
<Button primary onClick={portForwardAction}> {this.isPortForwarded ? (this.isActive ? "Stop/Remove" : "Remove") : "Forward..."} </Button>
{this.waiting && (
<Spinner />
)}

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

@ -28,7 +28,7 @@ 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 type { ForwardedPort } from "../../port-forward";
import { aboutPortForwarding, addPortForward, getPortForward, getPortForwards, openPortForward, PortForwardDialog, predictProtocol, removePortForward, startPortForward } from "../../port-forward";import type { ForwardedPort } from "../../port-forward";
import { Spinner } from "../spinner";
import logger from "../../../common/logger";
@ -46,6 +46,7 @@ export class PodContainerPort extends React.Component<Props> {
@observable waiting = false;
@observable forwardPort = 0;
@observable isPortForwarded = false;
@observable isActive = false;
constructor(props: Props) {
super(props);
@ -55,10 +56,11 @@ export class PodContainerPort extends React.Component<Props> {
componentDidMount() {
disposeOnUnmount(this, [
reaction(() => [portForwardStore.portForwards.slice(), this.props.pod], () => this.checkExistingPortForwarding()),
reaction(() => this.props.pod, () => this.checkExistingPortForwarding()),
]);
}
@action
async checkExistingPortForwarding() {
const { pod, port } = this.props;
let portForward: ForwardedPort = {
@ -73,12 +75,14 @@ export class PodContainerPort extends React.Component<Props> {
portForward = await getPortForward(portForward);
} catch (error) {
this.isPortForwarded = false;
this.isActive = false;
return;
}
this.forwardPort = portForward.forwardPort;
this.isPortForwarded = (portForward.status === "Active" && portForward.forwardPort) ? true : false;
this.isPortForwarded = true;
this.isActive = portForward.status === "Active";
}
@action
@ -100,11 +104,14 @@ export class PodContainerPort extends React.Component<Props> {
// determine how many port-forwards already exist
const { length } = getPortForwards();
portForward = await addPortForward(portForward);
if (!this.isPortForwarded) {
portForward = await addPortForward(portForward);
} else if (!this.isActive) {
portForward = await startPortForward(portForward);
}
if (portForward.status === "Active") {
openPortForward(portForward);
this.isPortForwarded = true;
// if this is the first port-forward show the about notification
if (!length) {
@ -112,12 +119,11 @@ export class PodContainerPort extends React.Component<Props> {
}
} else {
Notifications.error(`Error occurred starting port-forward, the local port may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);
this.isPortForwarded = false;
}
} catch (error) {
logger.error("[POD-CONTAINER-PORT]:", error, portForward);
this.checkExistingPortForwarding();
} finally {
this.checkExistingPortForwarding();
this.waiting = false;
}
}
@ -137,11 +143,11 @@ export class PodContainerPort extends React.Component<Props> {
try {
await removePortForward(portForward);
this.isPortForwarded = false;
} catch (error) {
Notifications.error(`Error occurred stopping the port-forward from port ${portForward.forwardPort}.`);
this.checkExistingPortForwarding();
} finally {
this.checkExistingPortForwarding();
this.forwardPort = 0;
this.waiting = false;
}
}
@ -151,7 +157,7 @@ export class PodContainerPort extends React.Component<Props> {
const { name, containerPort, protocol } = port;
const text = `${name ? `${name}: ` : ""}${containerPort}/${protocol}`;
const portForwardAction = async () => {
const portForwardAction = action(async () => {
if (this.isPortForwarded) {
await this.stopPortForward();
} else {
@ -164,16 +170,16 @@ export class PodContainerPort extends React.Component<Props> {
protocol: predictProtocol(port.name),
};
PortForwardDialog.open(portForward, { openInBrowser: true });
PortForwardDialog.open(portForward, { openInBrowser: true, onClose: () => this.checkExistingPortForwarding() });
}
};
});
return (
<div className={cssNames("PodContainerPort", { waiting: this.waiting })}>
<span title="Open in a browser" onClick={() => this.portForward()}>
{text}
</span>
<Button primary onClick={() => portForwardAction()}> {this.isPortForwarded ? "Stop" : "Forward..."} </Button>
<Button primary onClick={portForwardAction}> {this.isPortForwarded ? (this.isActive ? "Stop/Remove" : "Remove") : "Forward..."} </Button>
{this.waiting && (
<Spinner />
)}

32
src/renderer/port-forward/port-forward-dialog.tsx
View File

@ -34,12 +34,14 @@ import type { ForwardedPort } from "./port-forward-item";
import { aboutPortForwarding, openPortForward } from ".";
import { Checkbox } from "../components/checkbox";
import logger from "../../common/logger";
import { noop } from "lodash";
interface Props extends Partial<DialogProps> {
}
interface PortForwardDialogOpenOptions {
openInBrowser: boolean
openInBrowser: boolean;
onClose: () => void;
}
const dialogState = observable.object({
@ -47,6 +49,7 @@ const dialogState = observable.object({
data: null as ForwardedPort,
useHttps: false,
openInBrowser: false,
onClose: noop,
});
@observer
@ -59,11 +62,12 @@ export class PortForwardDialog extends Component<Props> {
makeObservable(this);
}
static open(portForward: ForwardedPort, options: PortForwardDialogOpenOptions = { openInBrowser: false }) {
static open(portForward: ForwardedPort, options: PortForwardDialogOpenOptions = { openInBrowser: false, onClose: noop }) {
dialogState.isOpen = true;
dialogState.data = portForward;
dialogState.useHttps = portForward.protocol === "https";
dialogState.openInBrowser = options.openInBrowser;
dialogState.onClose = options.onClose;
}
static close() {
@ -85,7 +89,8 @@ export class PortForwardDialog extends Component<Props> {
this.desiredPort = this.currentPort;
};
onClose = () => {
onClose = async () => {
await (async () => dialogState.onClose())();
};
changePort = (value: string) => {
@ -102,15 +107,25 @@ export class PortForwardDialog extends Component<Props> {
portForward.protocol = dialogState.useHttps ? "https" : "http";
if (currentPort || portForward.status === "Disabled") {
if (currentPort) {
const wasRunning = portForward.status === "Active";
portForward = await modifyPortForward(portForward, desiredPort);
if (wasRunning && portForward.status === "Disabled") {
Notifications.error(`Error occurred starting port-forward, the local port ${portForward.forwardPort} may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);
}
} else {
portForward.forwardPort = desiredPort;
portForward = await addPortForward(portForward);
// if this is the first port-forward show the about notification
if (!length) {
aboutPortForwarding();
if (portForward.status === "Disabled") {
Notifications.error(`Error occurred starting port-forward, the local port ${portForward.forwardPort} may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);
} else {
// if this is the first port-forward show the about notification
if (!length) {
aboutPortForwarding();
}
}
}
@ -118,8 +133,7 @@ export class PortForwardDialog extends Component<Props> {
openPortForward(portForward);
}
} catch (error) {
Notifications.error(`Error occurred starting port-forward, the local port may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);
logger.error("[PORT-FORWARD-DIALOG]:", error, portForward);
logger.error(`[PORT-FORWARD-DIALOG]: ${error}`, portForward);
} finally {
close();
}

2
src/renderer/port-forward/port-forward-item.ts
View File

@ -64,7 +64,7 @@ export class PortForwardItem implements ItemObject {
}
getId() {
return `${this.namespace}/${this.kind}/${this.name}:${this.port}`;
return `${this.namespace}-${this.kind}-${this.name}:${this.port}`;
}
getKind() {