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/components/+network-port-forwards/port-forward-details.tsx

@@ -23,7 +23,7 @@ import "./port-forward-details.scss";
 
 import React from "react";
 import { Link } from "react-router-dom";
-import type { PortForwardItem } from "../../port-forward";
+import { portForwardAddress, PortForwardItem } from "../../port-forward";
 import { Drawer, DrawerItem } from "../drawer";
 import { cssNames } from "../../utils";
 import { podsApi, serviceApi } from "../../../common/k8s-api/endpoints";
@@ -80,6 +80,9 @@ export class PortForwardDetails extends React.Component<Props> {
         <DrawerItem name="Local Port">
           {portForward.getForwardPort()}
         </DrawerItem>
+        <DrawerItem name="Protocol">
+          {portForward.getProtocol()}
+        </DrawerItem>
         <DrawerItem name="Status">
           <span className={cssNames("status", portForward.getStatus().toLowerCase())}>{portForward.getStatus()}</span>
         </DrawerItem>
@@ -96,7 +99,7 @@ export class PortForwardDetails extends React.Component<Props> {
         className="PortForwardDetails"
         usePortal={true}
         open={!!portForward}
-        title="Port Forward"
+        title={`Port Forward: ${portForwardAddress(portForward)}`}
         onClose={hideDetails}
         toolbar={toolbar}
       >

src/renderer/components/+network-port-forwards/port-forward-menu.tsx

@@ -57,7 +57,7 @@ export class PortForwardMenu extends React.Component<Props> {
           <span className="title">Open</span>
         </MenuItem>
         <MenuItem onClick={() => PortForwardDialog.open(portForward)}>
-          <Icon material="edit" tooltip="Change port" interactive={toolbar} />
+          <Icon material="edit" tooltip="Change port or protocol" interactive={toolbar} />
           <span className="title">Edit</span>
         </MenuItem>
       </>

src/renderer/components/+network-port-forwards/port-forwards.tsx

@@ -37,6 +37,7 @@ enum columnId {
   kind = "kind",
   port = "port",
   forwardPort = "forwardPort",
+  protocol = "protocol",
   status = "status",
 }
 
@@ -102,6 +103,7 @@ export class PortForwards extends React.Component<Props> {
             [columnId.kind]: item => item.getKind(),
             [columnId.port]: item => item.getPort(),
             [columnId.forwardPort]: item => item.getForwardPort(),
+            [columnId.protocol]: item => item.getProtocol(),
             [columnId.status]: item => item.getStatus(),
           }}
           searchFilters={[
@@ -114,6 +116,7 @@ export class PortForwards extends React.Component<Props> {
             { title: "Kind", className: "kind", sortBy: columnId.kind, id: columnId.kind },
             { title: "Pod Port", className: "port", sortBy: columnId.port, id: columnId.port },
             { title: "Local Port", className: "forwardPort", sortBy: columnId.forwardPort, id: columnId.forwardPort },
+            { title: "Protocol", className: "protocol", sortBy: columnId.protocol, id: columnId.protocol },
             { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
           ]}
           renderTableContents={item => [
@@ -122,6 +125,7 @@ export class PortForwards extends React.Component<Props> {
             item.getKind(),
             item.getPort(),
             item.getForwardPort(),
+            item.getProtocol(),
             { title: item.getStatus(), className: item.getStatus().toLowerCase() },
           ]}
           renderItemMenu={pf => (

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, removePortForward } from "../../port-forward";
+import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
 import type { ForwardedPort } from "../../port-forward";
 import { Spinner } from "../spinner";
 
@@ -87,6 +87,7 @@ export class ServicePortComponent extends React.Component<Props> {
       namespace: service.getNs(),
       port: port.port,
       forwardPort: this.forwardPort,
+      protocol: predictProtocol(port.name),
     };
 
     this.waiting = true;
@@ -143,6 +144,7 @@ export class ServicePortComponent extends React.Component<Props> {
           namespace: service.getNs(),
           port: port.port,
           forwardPort: this.forwardPort,
+          protocol: predictProtocol(port.name),
         };
 
         PortForwardDialog.open(portForward, { openInBrowser: true });

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, removePortForward } from "../../port-forward";
+import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
 import type { ForwardedPort } from "../../port-forward";
 import { Spinner } from "../spinner";
 
@@ -91,6 +91,7 @@ export class PodContainerPort extends React.Component<Props> {
       namespace: pod.getNs(),
       port: port.containerPort,
       forwardPort: this.forwardPort,
+      protocol: predictProtocol(port.name),
     };
 
     this.waiting = true;
@@ -149,6 +150,7 @@ export class PodContainerPort extends React.Component<Props> {
           namespace: pod.getNs(),
           port: port.containerPort,
           forwardPort: this.forwardPort,
+          protocol: predictProtocol(port.name),
         };
 
         PortForwardDialog.open(portForward, { openInBrowser: true });