Revert "frontend: Add portforward to service detail view"

This reverts commit 34094ad7cad9ae6fe4511ce6667ad68490f697bb.

frontend/src/components/common/Resource/PortForward.tsx

@@ -6,8 +6,6 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import helpers from '../../../helpers';
 import { deletePortForward, listPortForward, startPortForward } from '../../../lib/k8s/apiProxy';
-import Pod from '../../../lib/k8s/pod';
-import Service from '../../../lib/k8s/service';
 import { getCluster } from '../../../lib/util';
 import ActionButton from '../ActionButton';
 
@@ -17,11 +15,12 @@ interface PortForwardProps {
   namespace?: string;
   name?: string;
   isPodRunning?: boolean;
-  service?: Service;
 }
 
 const PODS_BACKEND_PORTFORWARD_KEY = 'pods';
 const SERVICE_BACKEND_PORTFORWARD_KEY = 'services';
+const PORTFORWARD_STORAGE_KEY_FOR_PODS = 'portforward-pods';
+const PORTFORWARD_STORAGE_KEY_FOR_SERVICES = 'portforward-services';
 
 export interface PortForwardState {
   id: string;
@@ -30,17 +29,8 @@ export interface PortForwardState {
   port: string;
 }
 
-function prepareSelector(selector: { [key: string]: string }) {
-  const selectorKeys = Object.keys(selector);
-  return selectorKeys
-    .map(key => {
-      return `${key}=${selector[key]}`;
-    })
-    .join(',');
-}
-
 export default function PortForward(props: PortForwardProps) {
-  const { isPod, containerPort, namespace, name, isPodRunning, service } = props;
+  const { isPod, containerPort, namespace, name, isPodRunning } = props;
   const [isCurrentPodOrServicePortForwarding, setIsCurrentPodOrServicePortForwarding] =
     React.useState(false);
   const [error, setError] = React.useState(null);
@@ -48,16 +38,6 @@ export default function PortForward(props: PortForwardProps) {
   const [loading, setLoading] = React.useState(false);
   const cluster = getCluster();
   const { t } = useTranslation('frequent');
-  const [pods, podListError] = Pod.useList({
-    labelSelector: service?.jsonData?.spec?.selector
-      ? prepareSelector(service?.jsonData?.spec?.selector)
-      : '',
-  });
-
-  // if it is a service and there is no pod running, we can't port forward
-  if (!isPod && (podListError || (!!pods && pods.length === 0))) {
-    return null;
-  }
 
   if (!helpers.isElectron()) {
     return null;
@@ -72,13 +52,27 @@ export default function PortForward(props: PortForwardProps) {
 
     const massagedResourceName = name || '';
     const serviceName = !isPod ? massagedResourceName : '';
-    const podName = isPod ? massagedResourceName : pods[0]?.getName();
+    const podName = isPod ? massagedResourceName : '';
     setLoading(true);
     startPortForward(cluster, namespace, podName, containerPort, serviceName)
       .then((data: any) => {
         setLoading(false);
         setPortForward(data);
         setIsCurrentPodOrServicePortForwarding(true);
+        const portForwards = localStorage.getItem(
+          isPod ? PORTFORWARD_STORAGE_KEY_FOR_PODS : PORTFORWARD_STORAGE_KEY_FOR_SERVICES
+        );
+        if (!portForwards) {
+          const portForwardsList = [];
+          portForwardsList.push(JSON.stringify(data));
+          return;
+        }
+        const parsedPortForwards = JSON.parse(portForwards);
+        parsedPortForwards.push(data);
+        localStorage.setItem(
+          isPod ? PORTFORWARD_STORAGE_KEY_FOR_PODS : PORTFORWARD_STORAGE_KEY_FOR_SERVICES,
+          JSON.stringify(parsedPortForwards)
+        );
       })
       .catch(error => {
         setError(error);
@@ -97,6 +91,20 @@ export default function PortForward(props: PortForwardProps) {
     )
       .then(() => {
         setPortForward(null);
+        const id = portForward.id;
+        const portForwards = localStorage.getItem(
+          isPod ? PORTFORWARD_STORAGE_KEY_FOR_PODS : PORTFORWARD_STORAGE_KEY_FOR_SERVICES
+        );
+        if (!portForwards) {
+          return;
+        }
+        const parsedPortForwards = JSON.parse(portForwards);
+        const filteredPortForwards = parsedPortForwards.filter((item: any) => item.id !== id);
+
+        localStorage.setItem(
+          isPod ? PORTFORWARD_STORAGE_KEY_FOR_PODS : PORTFORWARD_STORAGE_KEY_FOR_SERVICES,
+          JSON.stringify(filteredPortForwards)
+        );
       })
       .catch(error => {
         setError(error);
@@ -135,12 +143,6 @@ export default function PortForward(props: PortForwardProps) {
     return null;
   }
 
-  if (!isPod && pods && pods.length !== 0) {
-    if (pods[0].jsonData.status.phase !== 'Running') {
-      return null;
-    }
-  }
-
   const forwardBaseURL = 'http://127.0.0.1';
 
   return !portForward ? (

frontend/src/components/service/Details.tsx

 import { InlineIcon } from '@iconify/react';
-import { Box } from '@material-ui/core';
 import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,7 +9,6 @@ import { Link } from '../common';
 import Empty from '../common/EmptyContent';
 import { ValueLabel } from '../common/Label';
 import { DetailsGrid, MetadataDictGrid } from '../common/Resource';
-import PortForward from '../common/Resource/PortForward';
 import { SectionBox } from '../common/SectionBox';
 import SimpleTable from '../common/SimpleTable';
 
@@ -72,15 +70,6 @@ export default function ServiceDetails() {
                         <ValueLabel>{port}</ValueLabel>
                         <InlineIcon icon="mdi:chevron-right" />
                         <ValueLabel>{targetPort}</ValueLabel>
-                        <Box>
-                          <PortForward
-                            isPod={false}
-                            containerPort={targetPort}
-                            namespace={namespace}
-                            name={name}
-                            service={item}
-                          />
-                        </Box>
                       </React.Fragment>
                     ),
                   },