adding port-forward for containers in pods (#528)

* adding port-forward for containers in pods

address review comments

use more idiomatic approach for async code

move some files in advance of merge conflict with Lens restructure work

* Separate the port forward links in the UI (so they don't all spin when one link is clicked)

* minor fixes

* addressed review comments (replaced <p> with <div>, moved key attribute to proper element)

* fix lint issue

* removed extraneous <div> from pod container port details

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

src/renderer/components/+workloads-pods/pod-container-port.scss

@@ -0,0 +1,23 @@
+.PodContainerPort {
+  &.waiting {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: $margin;
+  }
+
+  span {
+    cursor: pointer;
+    color: $primary;
+    text-decoration: underline;
+    position: relative;
+  }
+
+  .Spinner {
+    --spinner-size: #{$unit * 2};
+    margin-left: $margin;
+    position: absolute;
+  }
+}

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -0,0 +1,54 @@
+import "./pod-container-port.scss"
+
+import React from "react";
+import { observer } from "mobx-react";
+import { t } from "@lingui/macro";
+import { Pod, IPodContainer } from "../../api/endpoints";
+import { _i18n } from "../../i18n";
+import { apiBase } from "../../api"
+import { observable } from "mobx";
+import { cssNames } from "../../utils";
+import { Notifications } from "../notifications";
+import { Spinner } from "../spinner"
+
+interface Props {
+  pod: Pod;
+  port: {
+    name?: string;
+    containerPort: number;
+    protocol: string;
+  }
+}
+
+@observer
+export class PodContainerPort extends React.Component<Props> {
+  @observable waiting = false;
+
+  async portForward() {
+    const { pod, port } = this.props;
+    this.waiting = true;
+    try {
+      await apiBase.post(`/pods/${pod.getNs()}/pod/${pod.getName()}/port-forward/${port.containerPort}`, {})
+    } catch(error) {
+      Notifications.error(error);
+    } finally {
+      this.waiting = false;
+    }
+  }
+
+  render() {
+    const { port } = this.props;
+    const { name, containerPort, protocol } = port;
+    const text = (name ? name + ': ' : '')+`${containerPort}/${protocol}`
+    return (
+      <div className={cssNames("PodContainerPort", { waiting: this.waiting })}>
+        <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
+          {text}
+          {this.waiting && (
+            <Spinner />
+          )}
+        </span>
+      </div>
+    )
+  }
+}

src/renderer/components/+workloads-pods/pod-details-container.tsx

@@ -8,6 +8,7 @@ import { cssNames } from "../../utils";
 import { StatusBrick } from "../status-brick";
 import { Badge } from "../badge";
 import { ContainerEnvironment } from "./pod-container-env";
+import { PodContainerPort } from "./pod-container-port";
 import { ResourceMetrics } from "../resource-metrics";
 import { IMetrics } from "../../api/endpoints/metrics.api";
 import { ContainerCharts } from "./container-charts";
@@ -64,13 +65,10 @@ export class PodDetailsContainer extends React.Component<Props> {
         {ports && ports.length > 0 &&
         <DrawerItem name={<Trans>Ports</Trans>}>
           {
-            ports.map(port => {
-              const { name, containerPort, protocol } = port;
-              const key = `${container.name}-port-${containerPort}-${protocol}`
-              return (
-                <div key={key}>
-                  {name ? name + ': ' : ''}{containerPort}/{protocol}
-                </div>
+            ports.map((port) => {
+              const key = `${container.name}-port-${port.containerPort}-${port.protocol}`
+              return(
+                <PodContainerPort pod={pod} port={port} key={key}/>
               )
             })
           }