1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

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

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
This commit is contained in:
Jim Ehrismann 2021-10-05 10:30:47 -04:00
parent 954912cefa
commit 58314945ed
6 changed files with 14 additions and 36 deletions

View File

@ -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 },

View File

@ -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<Props> {
componentDidMount() {
disposeOnUnmount(this, [
this.watch(),
]);
}
watch() {
return disposer(
reaction(() => portForwardStore.portForwards, () => this.init()),
);
]);
}
init() {
@ -77,11 +71,7 @@ export class ServicePortComponent extends React.Component<Props> {
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;

View File

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

View File

@ -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<Props> {
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<Props> {
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;

View File

@ -125,7 +125,7 @@ export class PortForwardDialog extends Component<Props> {
<div className="current-port" data-testid="current-port">
Local port to forward from:
</div>
<Input className={"portInput"}
<Input className="portInput"
type="number"
min="0"
max="65535"
@ -141,7 +141,7 @@ export class PortForwardDialog extends Component<Props> {
render() {
const { className, ...dialogProps } = this.props;
const resourceName = this.portForward ? this.portForward.name : "";
const resourceName = this.portForward?.name ?? "";
const header = (
<h5>
Port Forwarding for <span>{resourceName}</span>

View File

@ -97,7 +97,7 @@ export async function addPortForward(portForward: ForwardedPort): Promise<number
let response: PortForwardResult;
try {
response = await apiBase.post<PortForwardResult>(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`, {});
response = await apiBase.post<PortForwardResult>(`/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<number
let response: PortForwardResult;
try {
response = await apiBase.get<PortForwardResult>(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`, {});
response = await apiBase.get<PortForwardResult>(`/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<ForwardedPort[]> {
try {
const response = await apiBase.get<PortForwardsResult>(`/pods/port-forwards`, {});
const response = await apiBase.get<PortForwardsResult>(`/pods/port-forwards`);
return response.portForwards;
} catch (error) {