Support port forwarding https protocol (#4119)

* added support for port-forwarding https

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

* added protocol to the port-forward list and details page. Added the port-forward address to the details page title

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

* predict the protocol based on the port name, some cleanup

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

* address review comments

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

* code reorg

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

* fix lint

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

src/renderer/port-forward/index.ts

@@ -22,3 +22,4 @@
 export * from "./port-forward.store";
 export * from "./port-forward-item";
 export * from "./port-forward-dialog";
+export * from "./port-forward-utils";

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

@@ -44,7 +44,8 @@ interface PortForwardDialogOpenOptions {
 const dialogState = observable.object({
   isOpen: false,
   data: null as ForwardedPort,
-  openInBrowser: false
+  useHttps: false,
+  openInBrowser: false,
 });
 
 @observer
@@ -60,6 +61,7 @@ export class PortForwardDialog extends Component<Props> {
   static open(portForward: ForwardedPort, options: PortForwardDialogOpenOptions = { openInBrowser: false }) {
     dialogState.isOpen = true;
     dialogState.data = portForward;
+    dialogState.useHttps = portForward.protocol === "https";
     dialogState.openInBrowser = options.openInBrowser;
   }
 
@@ -96,6 +98,8 @@ export class PortForwardDialog extends Component<Props> {
     try {
       let port: number;
 
+      portForward.protocol = dialogState.useHttps ? "https" : "http";
+
       if (currentPort) {
         port = await modifyPortForward(portForward, desiredPort);
       } else {
@@ -131,6 +135,13 @@ export class PortForwardDialog extends Component<Props> {
               onChange={this.changePort}
             />
           </div>
+          <Checkbox
+            data-testid="port-forward-https"
+            theme="light"
+            label="https"
+            value={dialogState.useHttps}
+            onChange={value => dialogState.useHttps = value}
+          />
           <Checkbox
             data-testid="port-forward-open"
             theme="light"

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

@@ -30,6 +30,7 @@ export interface ForwardedPort {
   name: string;
   port: number;
   forwardPort: number;
+  protocol?: string;
 }
   
 export class PortForwardItem implements ItemObject {
@@ -39,6 +40,7 @@ export class PortForwardItem implements ItemObject {
   name: string;
   port: number;
   forwardPort: number;
+  protocol: string;
   
   constructor(pf: ForwardedPort) {
     this.clusterId = pf.clusterId;
@@ -47,6 +49,7 @@ export class PortForwardItem implements ItemObject {
     this.name = pf.name;
     this.port = pf.port;
     this.forwardPort = pf.forwardPort;
+    this.protocol = pf.protocol ?? "http";
 
     autoBind(this);
   }
@@ -79,6 +82,10 @@ export class PortForwardItem implements ItemObject {
     return this.forwardPort;
   }
 
+  getProtocol() {
+    return this.protocol;
+  }
+
   getStatus() {
     return "Active"; // to-do allow port-forward-items to be stopped (without removing them)
   }

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

@@ -0,0 +1,53 @@
+/**
+ * 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 { openExternal } from "../utils";
+import { Notifications } from "../components/notifications";
+import type { ForwardedPort } from "./port-forward-item";
+import logger from "../../common/logger";
+
+export function portForwardAddress(portForward: ForwardedPort) {
+  return `${portForward.protocol ?? "http"}://localhost:${portForward.forwardPort}`;
+}
+
+export function openPortForward(portForward: ForwardedPort) {
+  const browseTo = portForwardAddress(portForward);
+
+  openExternal(browseTo)
+    .catch(error => {
+      logger.error(`failed to open in browser: ${error}`, {
+        clusterId: portForward.clusterId,
+        port: portForward.port,
+        kind: portForward.kind,
+        namespace: portForward.namespace,
+        name: portForward.name,
+      });
+      Notifications.error(`Failed to open ${browseTo} in browser`);
+    }
+    );
+
+}
+
+export function predictProtocol(name: string) {
+  return name === "https" ? "https" : "http";
+}
+

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

@@ -22,11 +22,10 @@
 
 import { makeObservable, observable, reaction } from "mobx";
 import { ItemStore } from "../../common/item.store";
-import { autoBind, createStorage, disposer, getHostedClusterId, openExternal } from "../utils";
+import { autoBind, createStorage, disposer, getHostedClusterId } from "../utils";
 import { ForwardedPort, PortForwardItem } from "./port-forward-item";
 import { apiBase } from "../api";
 import { waitUntilFree } from "tcp-port-used";
-import { Notifications } from "../components/notifications";
 import logger from "../../common/logger";
 
 export class PortForwardStore extends ItemStore<PortForwardItem> {
@@ -88,7 +87,7 @@ export class PortForwardStore extends ItemStore<PortForwardItem> {
     if (index === -1) {
       return null;
     }
-    
+
     return this.getItems()[index];
   }
 }
@@ -105,8 +104,10 @@ 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}`);
-    
+    const protocol = portForward.protocol ?? "http";
+
+    response = await apiBase.post<PortForwardResult>(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}&protocol=${protocol}`);
+
     if (response?.port && response.port != +portForward.forwardPort) {
       logger.warn(`specified ${portForward.forwardPort} got ${response.port}`);
     }
@@ -119,11 +120,19 @@ export async function addPortForward(portForward: ForwardedPort): Promise<number
   return response?.port;
 }
 
+function getProtocolQuery(protocol: string) {
+  if (protocol) {
+    return `&protocol=${protocol}`;
+  }
+
+  return "";
+}
+
 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}${getProtocolQuery(portForward.protocol)}`);
   } catch (error) {
     logger.warn("Error getting port-forward:", error, portForward);
     throw(error);
@@ -168,22 +177,4 @@ export async function getPortForwards(): Promise<ForwardedPort[]> {
   }
 }
 
-export function openPortForward(portForward: ForwardedPort) {
-  const browseTo = `http://localhost:${portForward.forwardPort}`;
-
-  openExternal(browseTo)
-    .catch(error => {
-      logger.error(`failed to open in browser: ${error}`, {
-        clusterId: portForward.clusterId,
-        port: portForward.port,
-        kind: portForward.kind,
-        namespace: portForward.namespace,
-        name: portForward.name,
-      });
-      Notifications.error(`Failed to open ${browseTo} in browser`);
-    }
-    );
-
-}
-
 export const portForwardStore = new PortForwardStore();