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

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

src/renderer/components/+network-services/service-details.tsx

@@ -11,7 +11,7 @@ import { Service, serviceApi, endpointApi } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
 import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
-import { ServicePorts } from "./service-ports";
+import { ServicePortComponent } from "./service-port-component";
 import { endpointStore } from "../+network-endpoints/endpoints.store";
 import { ServiceDetailsEndpoint } from "./service-details-endpoint";
 
@@ -61,7 +61,15 @@ export class ServiceDetails extends React.Component<Props> {
         )}
 
         <DrawerItem name={<Trans>Ports</Trans>}>
-          <ServicePorts service={service}/>
+          <div>
+            {
+              service.getPorts().map((port) => {
+                return(
+                  <ServicePortComponent service={service} port={port}/>
+                );
+              })
+            }
+          </div>
         </DrawerItem>
 
         {spec.type === "LoadBalancer" && spec.loadBalancerIP && (

src/renderer/components/+network-services/service-port-component.scss

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

src/renderer/components/+network-services/service-port-component.tsx

@@ -1,4 +1,4 @@
-import "./service-ports.scss"
+import "./service-port-component.scss"
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -13,14 +13,15 @@ import { Spinner } from "../spinner"
 
 interface Props {
   service: Service;
+  port: ServicePort;
 }
 
 @observer
-export class ServicePorts extends React.Component<Props> {
+export class ServicePortComponent extends React.Component<Props> {
   @observable waiting = false;
 
-  async portForward(port: ServicePort) {
+  async portForward() {
-    const { service } = this.props;
+    const { service, port } = this.props;
     this.waiting = true;
     try {
       await apiBase.post(`/pods/${service.getNs()}/service/${service.getName()}/port-forward/${port.port}`, {})
@@ -32,23 +33,16 @@ export class ServicePorts extends React.Component<Props> {
   }
 
   render() {
-    const { service } = this.props;
+    const { port } = this.props;
     return (
-      <div className={cssNames("ServicePorts", { waiting: this.waiting })}>
+      <p className={cssNames("ServicePortComponent", { waiting: this.waiting })} key={port.toString()}>
-        {
+        <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
-          service.getPorts().map((port) => {
+          {port.toString()}
-            return(
+          {this.waiting && (
-              <p key={port.toString()}>
+            <Spinner />
-                <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward(port) }>
+          )}
-                  {port.toString()}
+        </span>
-                  {this.waiting && (
+      </p>
-                    <Spinner />
-                  )}
-                </span>
-              </p>
-            );
-          })}
-      </div>
     );
   }
 }

src/renderer/components/+network-services/service-ports.scss

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

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,56 @@
+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;
+  containerName: string;
+  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 { containerName, port } = this.props;
+    const { name, containerPort, protocol } = port;
+    const key = `${containerName}-port-${containerPort}-${protocol}`
+    const text = (name ? name + ': ' : '')+`${containerPort}/${protocol}`
+    return (
+      <p className={cssNames("PodContainerPort", { waiting: this.waiting })} key={key}>
+        <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
+          {text}
+          {this.waiting && (
+            <Spinner />
+          )}
+        </span>
+      </p>
+    )
+  }
+}

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

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

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

@@ -1,57 +0,0 @@
-import "./pod-container-ports.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;
-  container: IPodContainer;
-}
-
-@observer
-export class PodContainerPorts extends React.Component<Props> {
-  @observable waiting = false;
-
-  async portForward(port: number) {
-    const { pod } = this.props;
-    this.waiting = true;
-    try {
-      await apiBase.post(`/pods/${pod.getNs()}/pod/${pod.getName()}/port-forward/${port}`, {})
-    } catch(error) {
-      Notifications.error(error);
-    } finally {
-      this.waiting = false;
-    }
-  }
-
-  render() {
-    const { container } = this.props;
-    return (
-      <div className={cssNames("PodContainerPorts", { waiting: this.waiting })}>
-        {
-          container.ports.map((port) => {
-            const key = `${container.name}-port-${port.containerPort}-${port.protocol}`
-            const text = (port.name ? port.name + ': ' : '')+`${port.containerPort}/${port.protocol}`
-            return(
-              <p key={key}>
-                <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward(port.containerPort) }>
-                  {text}
-                  {this.waiting && (
-                    <Spinner />
-                  )}
-                </span>
-              </p>
-            );
-          })}
-      </div>
-    );
-  }
-}

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

@@ -8,7 +8,7 @@ import { cssNames } from "../../utils";
 import { StatusBrick } from "../status-brick";
 import { Badge } from "../badge";
 import { ContainerEnvironment } from "./pod-container-env";
-import { PodContainerPorts } from "./pod-container-ports";
+import { PodContainerPort } from "./pod-container-port";
 import { ResourceMetrics } from "../resource-metrics";
 import { IMetrics } from "../../api/endpoints/metrics.api";
 import { ContainerCharts } from "./container-charts";
@@ -62,9 +62,18 @@ export class PodDetailsContainer extends React.Component<Props> {
           {imagePullPolicy}
         </DrawerItem>
         }
-        {ports && ports.length > 0 &&
+        {ports && ports.length > 0 &&          
         <DrawerItem name={<Trans>Ports</Trans>}>
-          <PodContainerPorts pod={pod} container={container}/>
+          <div>
+            {
+              ports.map((port) => {
+                return(
+                  <PodContainerPort pod={pod} containerName={container.name} port={port}/>
+                )
+              })
+            }
+          </div>
+
         </DrawerItem>
         }
         {<ContainerEnvironment container={container} namespace={pod.getNs()}/>}