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>

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-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/port-forward/port-forward.store.ts

@@ -180,8 +180,12 @@ export async function getPortForwards(): Promise<ForwardedPort[]> {
   }
 }
 
+export function portForwardAddress(portForward: ForwardedPort) {
+  return `${portForward.protocol ?? "http"}://localhost:${portForward.forwardPort}`;
+}
+
 export function openPortForward(portForward: ForwardedPort) {
-  const browseTo = `${portForward.protocol ?? "http"}://localhost:${portForward.forwardPort}`;
+  const browseTo = portForwardAddress(portForward);
 
   openExternal(browseTo)
     .catch(error => {