From 3302bc69c78d8a258bfbd4e5e33e34fc0bde1c48 Mon Sep 17 00:00:00 2001 From: Jim Ehrismann Date: Thu, 4 Nov 2021 18:39:09 -0400 Subject: [PATCH 1/3] added an 'About Port Forwarding' notification Signed-off-by: Jim Ehrismann --- .../service-port-component.tsx | 10 +++- .../+workloads-pods/pod-container-port.tsx | 10 +++- src/renderer/port-forward/index.ts | 1 + .../port-forward/port-forward-dialog.tsx | 12 +++- .../port-forward/port-forward-notify.tsx | 58 +++++++++++++++++++ 5 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 src/renderer/port-forward/port-forward-notify.tsx diff --git a/src/renderer/components/+network-services/service-port-component.tsx b/src/renderer/components/+network-services/service-port-component.tsx index 05eedeaece..78885b714c 100644 --- a/src/renderer/components/+network-services/service-port-component.tsx +++ b/src/renderer/components/+network-services/service-port-component.tsx @@ -28,7 +28,7 @@ import { observable, makeObservable, reaction } from "mobx"; import { cssNames } from "../../utils"; import { Notifications } from "../notifications"; import { Button } from "../button"; -import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward"; +import { aboutPortForwarding, addPortForward, getPortForward, getPortForwards, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward"; import type { ForwardedPort } from "../../port-forward"; import { Spinner } from "../spinner"; @@ -92,6 +92,9 @@ export class ServicePortComponent extends React.Component { this.waiting = true; + // determine how many port-forwards are already active + const { length } = await getPortForwards(); + try { this.forwardPort = await addPortForward(portForward); @@ -99,6 +102,11 @@ export class ServicePortComponent extends React.Component { portForward.forwardPort = this.forwardPort; openPortForward(portForward); this.isPortForwarded = true; + + // if this is the first port-forward show the about notification + if (!length) { + aboutPortForwarding(); + } } } 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`); diff --git a/src/renderer/components/+workloads-pods/pod-container-port.tsx b/src/renderer/components/+workloads-pods/pod-container-port.tsx index 0ff1645f65..e9bf322afb 100644 --- a/src/renderer/components/+workloads-pods/pod-container-port.tsx +++ b/src/renderer/components/+workloads-pods/pod-container-port.tsx @@ -28,7 +28,7 @@ import { observable, makeObservable, reaction } from "mobx"; import { cssNames } from "../../utils"; import { Notifications } from "../notifications"; import { Button } from "../button"; -import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward"; +import { aboutPortForwarding, addPortForward, getPortForward, getPortForwards, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward"; import type { ForwardedPort } from "../../port-forward"; import { Spinner } from "../spinner"; @@ -96,6 +96,9 @@ export class PodContainerPort extends React.Component { this.waiting = true; + // determine how many port-forwards are already active + const { length } = await getPortForwards(); + try { this.forwardPort = await addPortForward(portForward); @@ -103,6 +106,11 @@ export class PodContainerPort extends React.Component { portForward.forwardPort = this.forwardPort; openPortForward(portForward); this.isPortForwarded = true; + + // if this is the first port-forward show the about notification + if (!length) { + aboutPortForwarding(); + } } } 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`); diff --git a/src/renderer/port-forward/index.ts b/src/renderer/port-forward/index.ts index 83a548f933..34b12b2408 100644 --- a/src/renderer/port-forward/index.ts +++ b/src/renderer/port-forward/index.ts @@ -22,4 +22,5 @@ export * from "./port-forward.store"; export * from "./port-forward-item"; export * from "./port-forward-dialog"; +export * from "./port-forward-notify"; export * from "./port-forward-utils"; diff --git a/src/renderer/port-forward/port-forward-dialog.tsx b/src/renderer/port-forward/port-forward-dialog.tsx index 85e0837508..500f64a056 100644 --- a/src/renderer/port-forward/port-forward-dialog.tsx +++ b/src/renderer/port-forward/port-forward-dialog.tsx @@ -29,9 +29,9 @@ import { Wizard, WizardStep } from "../components/wizard"; import { Input } from "../components/input"; import { Notifications } from "../components/notifications"; import { cssNames } from "../utils"; -import { addPortForward, modifyPortForward } from "./port-forward.store"; +import { addPortForward, getPortForwards, modifyPortForward } from "./port-forward.store"; import type { ForwardedPort } from "./port-forward-item"; -import { openPortForward } from "."; +import { aboutPortForwarding, openPortForward } from "."; import { Checkbox } from "../components/checkbox"; interface Props extends Partial { @@ -95,6 +95,9 @@ export class PortForwardDialog extends Component { const { portForward } = this; const { currentPort, desiredPort, close } = this; + // determine how many port-forwards are already active + const { length } = await getPortForwards(); + try { let port: number; @@ -105,6 +108,11 @@ export class PortForwardDialog extends Component { } else { portForward.forwardPort = desiredPort; port = await addPortForward(portForward); + + // if this is the first port-forward show the about notification + if (!length) { + aboutPortForwarding(); + } } if (dialogState.openInBrowser) { diff --git a/src/renderer/port-forward/port-forward-notify.tsx b/src/renderer/port-forward/port-forward-notify.tsx new file mode 100644 index 0000000000..da27dea637 --- /dev/null +++ b/src/renderer/port-forward/port-forward-notify.tsx @@ -0,0 +1,58 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import React from "react"; +import { portForwardsURL } from "../../common/routes/port-forwards"; +import { Button } from "../components/button"; +import { Notifications, notificationsStore } from "../components/notifications"; +import { navigate } from "../navigation"; +import { getHostedClusterId } from "../utils"; + + +export async function aboutPortForwarding() { + const notificationId = `port-forward-notification-${getHostedClusterId()}`; + + Notifications.info( + ( +
+ Port Forwarding +

+ You can manage your port forwards on the Port Forwarding Page. +

+
+
+
+ ), + { + id: notificationId, + timeout: 10_000, + }, + ); +} From f3c34533087477706bd0124a49f3fd4baab79273 Mon Sep 17 00:00:00 2001 From: Jim Ehrismann Date: Fri, 5 Nov 2021 13:13:12 -0400 Subject: [PATCH 2/3] address review comment Signed-off-by: Jim Ehrismann --- .../components/+network-services/service-port-component.tsx | 6 +++--- .../components/+workloads-pods/pod-container-port.tsx | 6 +++--- src/renderer/port-forward/port-forward-dialog.tsx | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/renderer/components/+network-services/service-port-component.tsx b/src/renderer/components/+network-services/service-port-component.tsx index 78885b714c..301b21f1f3 100644 --- a/src/renderer/components/+network-services/service-port-component.tsx +++ b/src/renderer/components/+network-services/service-port-component.tsx @@ -92,10 +92,10 @@ export class ServicePortComponent extends React.Component { this.waiting = true; - // determine how many port-forwards are already active - const { length } = await getPortForwards(); - try { + // determine how many port-forwards are already active + const { length } = await getPortForwards(); + this.forwardPort = await addPortForward(portForward); if (this.forwardPort) { diff --git a/src/renderer/components/+workloads-pods/pod-container-port.tsx b/src/renderer/components/+workloads-pods/pod-container-port.tsx index e9bf322afb..c8beecc334 100644 --- a/src/renderer/components/+workloads-pods/pod-container-port.tsx +++ b/src/renderer/components/+workloads-pods/pod-container-port.tsx @@ -96,10 +96,10 @@ export class PodContainerPort extends React.Component { this.waiting = true; - // determine how many port-forwards are already active - const { length } = await getPortForwards(); - try { + // determine how many port-forwards are already active + const { length } = await getPortForwards(); + this.forwardPort = await addPortForward(portForward); if (this.forwardPort) { diff --git a/src/renderer/port-forward/port-forward-dialog.tsx b/src/renderer/port-forward/port-forward-dialog.tsx index 500f64a056..bacfff9fa0 100644 --- a/src/renderer/port-forward/port-forward-dialog.tsx +++ b/src/renderer/port-forward/port-forward-dialog.tsx @@ -95,10 +95,10 @@ export class PortForwardDialog extends Component { const { portForward } = this; const { currentPort, desiredPort, close } = this; - // determine how many port-forwards are already active - const { length } = await getPortForwards(); - try { + // determine how many port-forwards are already active + const { length } = await getPortForwards(); + let port: number; portForward.protocol = dialogState.useHttps ? "https" : "http"; From 56f3ba8d839bbaf9dc067a8841e6c62625d216b1 Mon Sep 17 00:00:00 2001 From: Jim Ehrismann Date: Fri, 5 Nov 2021 15:00:03 -0400 Subject: [PATCH 3/3] remove unnecessary async specification Signed-off-by: Jim Ehrismann --- src/renderer/port-forward/port-forward-notify.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/port-forward/port-forward-notify.tsx b/src/renderer/port-forward/port-forward-notify.tsx index da27dea637..4b26fb976c 100644 --- a/src/renderer/port-forward/port-forward-notify.tsx +++ b/src/renderer/port-forward/port-forward-notify.tsx @@ -27,7 +27,7 @@ import { navigate } from "../navigation"; import { getHostedClusterId } from "../utils"; -export async function aboutPortForwarding() { +export function aboutPortForwarding() { const notificationId = `port-forward-notification-${getHostedClusterId()}`; Notifications.info(