Feature/port forward dashboard (#3922)

* Added ability to add custom port on pod and service port forwarding (#3295) * Added ability to add custom port on pod and service port forwarding Signed-off-by: rdeepc <12953177+rdeepc@users.noreply.github.com> * Added ability to add custom port on pod and service port forwarding - pod-container-port fixed init async and active port checking - service-port-component fixed init async and active port checking - port-forward-route promise and response fix Signed-off-by: rdeepc <12953177+rdeepc@users.noreply.github.com> * Added ability to add custom port on pod and service port forwarding Signed-off-by: rdeepc <12953177+rdeepc@users.noreply.github.com> * - Added Custom Port Selection for port forwarding - Implemented Random Port if custom port is not provided Signed-off-by: rdeepc <12953177+rdeepc@users.noreply.github.com> Co-authored-by: Saumya Shovan Roy <saumyashovanroy@gmail.com> * cherry-pick of hackweek work plus merge conflicts/build errors added a route to get all port forwards Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> Added Forwarded Ports to cluster dashboard Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> working port-forward page (open, edit, remove) Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> added local storage to the port-forward store Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> automatically restore port-forward after pod is restarted Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> start port-forwards using random local port by default, rearranged pod and service port-forward UI Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * refactor Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * more refactoring, don't always open port-forwards in browser, refined reused port-forward dialog Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * removed unimplemented forwarded port details page,modified logging Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * addressed some review comments Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * made port and forwardPort query params and cleaned up port-forward routing paths Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * address more review comments and change dashboard tab name to 'Port Forwarding' Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * changed port and forwardPort fields to be Numbers Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * removed extraneous reset() call, reorder field declarations Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * port-forward now gets the bundled kubectl path without going through the 'ensureKubectl' hoops Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * more cleanup/tweaking Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * fix bug where port-forward info did not update on pod details page when different pod (in same deployment?) is clicked Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> Co-authored-by: Saumya Shovan Roy (Deep) <12953177+rdeepc@users.noreply.github.com> Co-authored-by: Saumya Shovan Roy <saumyashovanroy@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-10-07 15:51:26 -04:00
1 parent e10c13cdf4
commit 07c8177a97
@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+export * from "./port-forwards";
@@ -0,0 +1,73 @@
+/**
+ * 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 React from "react";
+import { boundMethod, cssNames } from "../../utils";
+import { openPortForward, PortForwardItem, removePortForward } from "../../port-forward";
+import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
+import { MenuItem } from "../menu";
+import { Icon } from "../icon";
+import { PortForwardDialog } from "../../port-forward";
+
+interface Props extends MenuActionsProps {
+  portForward: PortForwardItem;
+  hideDetails?(): void;
+}
+
+export class PortForwardMenu extends React.Component<Props> {
+  @boundMethod
+  remove() {
+    return removePortForward(this.props.portForward);
+  }
+
+  renderContent() {
+    const { portForward, toolbar } = this.props;
+
+    if (!portForward) return null;
+
+    return (
+      <>
+        <MenuItem onClick={() => openPortForward(this.props.portForward)}>
+          <Icon material="open_in_browser" interactive={toolbar} tooltip="Open in browser" />
+          <span className="title">Open</span>
+        </MenuItem>
+        <MenuItem onClick={() => PortForwardDialog.open(portForward)}>
+          <Icon material="edit" tooltip="Change port" interactive={toolbar} />
+          <span className="title">Edit</span>
+        </MenuItem>
+      </>
+    );
+  }
+
+  render() {
+    const { className, ...menuProps } = this.props;
+
+    return (
+      <MenuActions
+        {...menuProps}
+        className={cssNames("PortForwardMenu", className)}
+        removeAction={this.remove}
+      >
+        {this.renderContent()}
+      </MenuActions>
+    );
+  }
+}
@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+.PortForwards {
+  .TableCell {
+    &.warning {
+      @include table-cell-warning;
+    }
+  }
+}
@@ -0,0 +1,103 @@
+/**
+ * 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 "./port-forwards.scss";
+
+import React from "react";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { ItemListLayout } from "../item-object-list/item-list-layout";
+import { PortForwardItem, portForwardStore } from "../../port-forward";
+import { PortForwardMenu } from "./port-forward-menu";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  kind = "kind",
+  port = "port",
+  forwardPort = "forwardPort",
+}
+
+@observer
+export class PortForwards extends React.Component {
+
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      portForwardStore.watch(),
+    ]);
+  }
+
+  renderRemoveDialogMessage(selectedItems: PortForwardItem[]) {
+    const forwardPorts = selectedItems.map(item => item.getForwardPort()).join(", ");
+
+    return (
+      <div>
+        <>Stop forwarding from <b>{forwardPorts}</b>?</>
+      </div>
+    );
+  }
+
+
+  render() {
+    return (
+      <>
+        <ItemListLayout
+          isConfigurable
+          tableId="port_forwards"
+          className="PortForwards" store={portForwardStore}
+          sortingCallbacks={{
+            [columnId.name]: item => item.getName(),
+            [columnId.namespace]: item => item.getNs(),
+            [columnId.kind]: item => item.getKind(),
+            [columnId.port]: item => item.getPort(),
+            [columnId.forwardPort]: item => item.getForwardPort(),
+          }}
+          searchFilters={[
+            item => item.getSearchFields(),
+          ]}
+          renderHeaderTitle="Port Forwarding"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { 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 },
+          ]}
+          renderTableContents={item => [
+            item.getName(),
+            item.getNs(),
+            item.getKind(),
+            item.getPort(),
+            item.getForwardPort(),
+          ]}
+          renderItemMenu={pf => (
+            <PortForwardMenu
+              portForward={pf}
+              removeConfirmationMessage={this.renderRemoveDialogMessage([pf])}
+            />
+          )}
+          customizeRemoveDialog={selectedItems => ({
+            message: this.renderRemoveDialogMessage(selectedItems)
+          })}
+        />
+      </>
+    );
+  }
+}