CONSOLE-5183: Add persistent pod terminal sessions to Cloud Shell drawer

Integrates detachable terminal sessions into the existing Cloud Shell
drawer, allowing pod and node debug terminals to persist across page
navigation.

Key changes:
- WebSocket handoff: when detaching, the live WebSocket is transferred
  from PodConnect to DetachedPodExec via a global registry, avoiding
  the need for a second exec/attach connection.
- PodConnect skips sending 'exit' on cleanup when a session is detached,
  keeping the underlying pod alive.
- Node debug pods use stdinOnce:false so the container survives attach
  disconnection; namespace cleanup is skipped for detached sessions.
- Debug terminal pod deletion is skipped when the pod is detached.
- Session limit capped at 5 with the detach button disabled at the cap
  and a counter badge shown in the drawer header.
- Cloud Shell keepalive ticks are suppressed for detached pod tabs.
- Drawer close handler properly clears detached sessions.

Author: BabbarPB08

frontend/packages/console-app/src/components/nodes/NodeTerminal.tsx

@@ -8,7 +8,9 @@ import { LoadingBox } from '@console/internal/components/utils/status-box';
 import { ImageStreamTagModel, NamespaceModel, PodModel } from '@console/internal/models';
 import type { NodeKind, PodKind } from '@console/internal/module/k8s';
 import { k8sCreate, k8sGet, k8sKillByName } from '@console/internal/module/k8s';
+import store from '@console/internal/redux';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
+import { getDetachedSessions } from '@console/webterminal-plugin/src/redux/reducers/cloud-shell-selectors';
 
 type NodeTerminalErrorProps = {
   error: ReactNode;
@@ -77,7 +79,7 @@ const getDebugPod = async (
             runAsUser: 0,
           },
           stdin: true,
-          stdinOnce: true,
+          stdinOnce: false,
           tty: true,
           volumeMounts: [
             {
@@ -207,7 +209,10 @@ const NodeTerminal: FC<NodeTerminalProps> = ({ obj: node }) => {
     };
     const closeTab = (event) => {
       event.preventDefault();
-      deleteNamespace(namespace.metadata.name);
+      const detached = getDetachedSessions(store.getState());
+      if (!detached.some((s) => s.podName === name)) {
+        deleteNamespace(namespace.metadata.name);
+      }
     };
     const createDebugPod = async () => {
       try {
@@ -244,7 +249,11 @@ const NodeTerminal: FC<NodeTerminalProps> = ({ obj: node }) => {
     createDebugPod();
     window.addEventListener('beforeunload', closeTab);
     return () => {
-      deleteNamespace(namespace.metadata.name);
+      const detached = getDetachedSessions(store.getState());
+      const isDetached = detached.some((s) => s.podName === name);
+      if (!isDetached) {
+        deleteNamespace(namespace.metadata.name);
+      }
       window.removeEventListener('beforeunload', closeTab);
     };
   }, [nodeName, isWindows]);

frontend/packages/webterminal-plugin/src/components/cloud-shell/CloudShell.tsx

@@ -2,7 +2,10 @@ import type { FC } from 'react';
 import { useFlag } from '@console/shared/src/hooks/useFlag';
 import { FLAG_DEVWORKSPACE } from '../../const';
 import { useToggleCloudShellExpanded } from '../../redux/actions/cloud-shell-dispatchers';
-import { useIsCloudShellExpanded } from '../../redux/reducers/cloud-shell-selectors';
+import {
+  useIsCloudShellExpanded,
+  useDetachedSessions,
+} from '../../redux/reducers/cloud-shell-selectors';
 import { CloudShellDrawer } from './CloudShellDrawer';
 
 interface CloudShellProps {
@@ -13,12 +16,15 @@ const CloudShell: FC<CloudShellProps> = ({ children }) => {
   const onClose = useToggleCloudShellExpanded();
   const open = useIsCloudShellExpanded();
   const devWorkspaceAvailable = useFlag(FLAG_DEVWORKSPACE);
+  const detachedSessions = useDetachedSessions();
 
-  if (!devWorkspaceAvailable) {
+  const hasDetachedSessions = detachedSessions.length > 0;
+
+  if (!devWorkspaceAvailable && !hasDetachedSessions) {
     return <>{children}</>;
   }
   return (
-    <CloudShellDrawer onClose={onClose} open={open}>
+    <CloudShellDrawer onClose={onClose} open={open || hasDetachedSessions}>
       {children}
     </CloudShellDrawer>
   );

frontend/packages/webterminal-plugin/src/components/cloud-shell/CloudShellDrawer.tsx

@@ -16,7 +16,11 @@ import { css } from '@patternfly/react-styles';
 import { c_drawer_m_inline_m_panel_bottom__splitter_Height as pfSplitterHeight } from '@patternfly/react-tokens/dist/esm/c_drawer_m_inline_m_panel_bottom__splitter_Height';
 import { useTranslation } from 'react-i18next';
 import { ExternalLinkButton } from '@console/shared/src/components/links/ExternalLinkButton';
+import { useFlag } from '@console/shared/src/hooks/useFlag';
 import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
+import { FLAG_DEVWORKSPACE } from '../../const';
+import { MAX_DETACHED_SESSIONS } from '../../redux/reducers/cloud-shell-reducer';
+import { useDetachedSessions } from '../../redux/reducers/cloud-shell-selectors';
 import { MinimizeRestoreButton } from '@console/webterminal-plugin/src/components/cloud-shell/MinimizeRestoreButton';
 import { MultiTabbedTerminal } from '@console/webterminal-plugin/src/components/cloud-shell/MultiTabbedTerminal';
 
@@ -46,6 +50,9 @@ export const CloudShellDrawer: FC<CloudShellDrawerProps> = ({
   const [height, setHeight] = useState<number>(385);
   const { t } = useTranslation('webterminal-plugin');
   const fireTelemetryEvent = useTelemetry();
+  const devWorkspaceAvailable = useFlag(FLAG_DEVWORKSPACE);
+  const detachedSessions = useDetachedSessions();
+  const detachedCount = detachedSessions.length;
 
   const onMRButtonClick = (expandedState: boolean) => {
     setExpanded(!expandedState);
@@ -70,17 +77,26 @@ export const CloudShellDrawer: FC<CloudShellDrawerProps> = ({
     >
       <DrawerHead className="co-cloud-shell-drawer__header pf-v6-u-p-0">
         <Flex grow={{ default: 'grow' }} data-test="cloudshell-drawer-header">
-          <FlexItem className="pf-v6-u-px-sm">{t('OpenShift command line terminal')}</FlexItem>
+          <FlexItem className="pf-v6-u-px-sm">
+            {t('OpenShift command line terminal')}
+            {detachedCount > 0 && (
+              <span className="pf-v6-u-ml-sm pf-v6-u-font-size-sm pf-v6-u-color-200">
+                ({detachedCount}/{MAX_DETACHED_SESSIONS} {t('detached')})
+              </span>
+            )}
+          </FlexItem>
           <FlexItem align={{ default: 'alignRight' }}>
             <DrawerActions className="pf-v6-u-m-0">
-              <Tooltip content={t('Open terminal in new tab')}>
-                <ExternalLinkButton
-                  variant="plain"
-                  href="/terminal"
-                  aria-label={t('Open terminal in new tab')}
-                  iconProps={{ title: undefined }} // aria-label is sufficient
-                />
-              </Tooltip>
+              {devWorkspaceAvailable && (
+                <Tooltip content={t('Open terminal in new tab')}>
+                  <ExternalLinkButton
+                    variant="plain"
+                    href="/terminal"
+                    aria-label={t('Open terminal in new tab')}
+                    iconProps={{ title: undefined }} // aria-label is sufficient
+                  />
+                </Tooltip>
+              )}
               <MinimizeRestoreButton
                 minimize={expanded}
                 minimizeText={t('Minimize terminal')}

frontend/packages/webterminal-plugin/src/components/cloud-shell/DetachedPodExec.tsx

@@ -0,0 +1,218 @@
+import type { FC } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Button, EmptyState, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
+import { Base64 } from 'js-base64';
+import { useTranslation } from 'react-i18next';
+import { getImpersonate } from '@console/dynamic-plugin-sdk';
+import { PodModel } from '@console/internal/models';
+import { resourceURL } from '@console/internal/module/k8s';
+import { WSFactory } from '@console/internal/module/ws-factory';
+import { takeDetachedWebSocket } from '@console/internal/module/detached-ws-registry';
+import store from '@console/internal/redux';
+import { FLAGS } from '@console/shared';
+import { useFlag } from '@console/shared/src/hooks/useFlag';
+import type { ImperativeTerminalType } from './Terminal';
+import Terminal from './Terminal';
+import TerminalLoadingBox from './TerminalLoadingBox';
+import './CloudShellExec.scss';
+
+const NO_SH =
+  'starting container process caused "exec: \\"sh\\": executable file not found in $PATH"';
+
+type DetachedPodExecProps = {
+  sessionId: string;
+  podName: string;
+  namespace: string;
+  containerName: string;
+  command?: string[];
+};
+
+const DetachedPodExec: FC<DetachedPodExecProps> = ({
+  sessionId,
+  podName,
+  namespace,
+  containerName,
+  command,
+}) => {
+  const [wsOpen, setWsOpen] = useState(false);
+  const [wsError, setWsError] = useState<string>();
+  const [reconnecting, setReconnecting] = useState(false);
+  const ws = useRef<WSFactory>();
+  const terminal = useRef<ImperativeTerminalType>();
+  const { t } = useTranslation();
+  const isOpenShift = useFlag(FLAGS.OPENSHIFT);
+
+  const onData = useCallback((data: string): void => {
+    ws.current?.send(`0${Base64.encode(data)}`);
+  }, []);
+
+  const handleResize = useCallback((cols: number, rows: number) => {
+    const data = Base64.encode(JSON.stringify({ Height: rows, Width: cols }));
+    ws.current?.send(`4${data}`);
+  }, []);
+
+  useEffect(() => {
+    let unmounted = false;
+    const usedClient = isOpenShift ? 'oc' : 'kubectl';
+    const cmd = command || ['sh', '-i', '-c', 'TERM=xterm sh'];
+
+    const transferred = takeDetachedWebSocket(sessionId);
+    let websocket: any;
+
+    if (transferred) {
+      websocket = transferred;
+      websocket
+        .onmessage((msg: string) => {
+          const data = Base64.decode(msg.slice(1));
+          terminal.current?.onDataReceived(data);
+        })
+        .onclose((evt: any) => {
+          if (!evt || evt.wasClean === true) {
+            return;
+          }
+          const error = evt.reason || t('webterminal-plugin~The terminal connection has closed.');
+          terminal.current?.onConnectionClosed(error);
+          websocket.destroy();
+          if (!unmounted) {
+            setWsOpen(false);
+            setWsError(error);
+          }
+        })
+        // eslint-disable-next-line no-console
+        .onerror((evt: any) => console.error(`WS error?! ${evt}`));
+
+      ws.current?.destroy();
+      ws.current = websocket;
+      if (!unmounted) {
+        setWsOpen(true);
+        setTimeout(() => {
+          websocket.send(`0${Base64.encode('\n')}`);
+        }, 200);
+      }
+    } else {
+      const impersonate = getImpersonate(store.getState()) || { subprotocols: [] };
+      const subprotocols = (impersonate.subprotocols || []).concat('base64.channel.k8s.io');
+
+      const urlOpts = {
+        ns: namespace,
+        name: podName,
+        path: 'exec',
+        queryParams: {
+          stdout: '1',
+          stdin: '1',
+          stderr: '1',
+          tty: '1',
+          container: containerName,
+          command: cmd.map((c) => encodeURIComponent(c)).join('&command='),
+        },
+      };
+
+      const path = resourceURL(PodModel, urlOpts);
+      websocket = new WSFactory(`${podName}-detached-terminal`, {
+        host: 'auto',
+        reconnect: true,
+        jsonParse: false,
+        path,
+        subprotocols,
+      });
+
+      let previous = '';
+
+      websocket
+        .onmessage((msg: string) => {
+          if (msg[0] === '3') {
+            if (previous.includes(NO_SH)) {
+              const errMsg = `This container doesn't have a /bin/sh shell. Try specifying your command in a terminal with:\r\n\r\n ${usedClient} -n ${namespace} exec ${podName} -ti <command>`;
+              terminal.current?.reset();
+              terminal.current?.onConnectionClosed(errMsg);
+              websocket.destroy();
+              previous = '';
+              return;
+            }
+          }
+          const data = Base64.decode(msg.slice(1));
+          terminal.current?.onDataReceived(data);
+          previous = data;
+        })
+        .onopen(() => {
+          terminal.current?.reset();
+          previous = '';
+          if (!unmounted) {
+            setWsOpen(true);
+          }
+        })
+        .onclose((evt: any) => {
+          if (!evt || evt.wasClean === true) {
+            return;
+          }
+          const error = evt.reason || t('webterminal-plugin~The terminal connection has closed.');
+          terminal.current?.onConnectionClosed(error);
+          websocket.destroy();
+          if (!unmounted) {
+            setWsOpen(false);
+            setWsError(error);
+          }
+        })
+        // eslint-disable-next-line no-console
+        .onerror((evt: any) => console.error(`WS error?! ${evt}`));
+
+      if (ws.current !== websocket) {
+        ws.current?.destroy();
+        ws.current = websocket;
+        terminal.current?.onConnectionClosed(
+          t('webterminal-plugin~connecting to {{container}}', { container: containerName }),
+        );
+      }
+    }
+
+    setReconnecting(false);
+
+    return () => {
+      unmounted = true;
+      websocket.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [podName, namespace, containerName, command, isOpenShift, t, reconnecting]);
+
+  if (wsError) {
+    return (
+      <div className="co-cloudshell-exec__container-error">
+        <EmptyState>
+          <EmptyStateBody className="co-cloudshell-exec__error-msg">{wsError}</EmptyStateBody>
+          <EmptyStateFooter>
+            <Button
+              variant="primary"
+              onClick={() => {
+                setWsError(undefined);
+                setReconnecting(true);
+              }}
+            >
+              {t('webterminal-plugin~Reconnect to terminal')}
+            </Button>
+          </EmptyStateFooter>
+        </EmptyState>
+      </div>
+    );
+  }
+
+  if (wsOpen) {
+    return (
+      <div className="co-cloudshell-terminal__container">
+        <Terminal onData={onData} onResize={handleResize} ref={terminal} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="co-cloudshell-terminal__container">
+      <TerminalLoadingBox
+        message={t('webterminal-plugin~Connecting to {{podName}}/{{containerName}}...', {
+          podName,
+          containerName,
+        })}
+      />
+    </div>
+  );
+};
+
+export default DetachedPodExec;