feat: select container for terminal (#293)

* feat: select container for terminal

Signed-off-by: Philippe Martin <[email protected]>

* docs: doc on readme

Signed-off-by: Philippe Martin <[email protected]>

* test: add unit tests

Signed-off-by: Philippe Martin <[email protected]>

---------

Signed-off-by: Philippe Martin <[email protected]>

Author: feloy

README.md

@@ -20,7 +20,8 @@ From this list, you have access to the details for a specifc resource, including
 - a utility to patch the resource definition, using [strategic merge patch](https://kubernetes.io/docs/tasks/manage-kubernetes-objects/update-api-object-kubectl-patch/).
 
 For Pods, you also have access to:
-- the logs of the containers running in the pod.
+- the logs of the containers running in the pod,
+- a terminal on each container running in the pod. 
 
 You can switch the namespace you want to explore from the Dashboard page or from any list of namespaced resources. The extension will disconnect from the previous namespace and connect to the new one.
 

packages/webview/src/component/pods/PodDetails.svelte

@@ -8,7 +8,7 @@ import type { PodUI } from './PodUI';
 import { PodHelper } from './pod-helper';
 import PodDetailsSummary from './PodDetailsSummary.svelte';
 import PodLogs from './PodLogs.svelte';
-import PodTerminal from './PodTerminal.svelte';
+import PodTerminalBrowser from './PodTerminalBrowser.svelte';
 
 interface Props {
   name: string;
@@ -38,7 +38,7 @@ const podHelper = dependencyAccessor.get<PodHelper>(PodHelper);
     {
       title: 'Terminal',
       url: 'terminal',
-      component: PodTerminal,
+      component: PodTerminalBrowser,
     },
   ]}
   ActionsComponent={Actions}

packages/webview/src/component/pods/PodTerminal.svelte

@@ -13,8 +13,9 @@ import { Disposable } from '/@common/types/disposable';
 
 interface Props {
   object: V1Pod;
+  containerName: string;
 }
-let { object }: Props = $props();
+let { object, containerName }: Props = $props();
 
 const streams = getContext<Streams>(Streams);
 const remote = getContext<Remote>(Remote);
@@ -30,7 +31,6 @@ let fitAddon: FitAddon;
 onMount(async () => {
   const podName = object.metadata?.name ?? '';
   const namespace = object.metadata?.namespace ?? '';
-  const containerName = object.spec?.containers?.[0]?.name ?? '';
   const savedState = await podTerminalsApi.getState(podName, namespace, containerName);
 
   disposables.push(await initializeNewTerminal(terminalXtermDiv, podName, namespace, containerName));
@@ -106,4 +106,4 @@ onDestroy(() => {
 });
 </script>
 
-<div class="h-full p-[5px] pr-0 bg-[var(--pd-terminal-background)]" bind:this={terminalXtermDiv}></div>
+<div class="h-full w-full p-[5px] pr-0 bg-[var(--pd-terminal-background)]" bind:this={terminalXtermDiv}></div>

packages/webview/src/component/pods/PodTerminalBrowser.spec.ts

@@ -0,0 +1,81 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+
+import { render, screen, within } from '@testing-library/svelte';
+import PodTerminalBrowser from './PodTerminalBrowser.svelte';
+import type { V1Pod } from '@kubernetes/client-node';
+import PodTerminal from './PodTerminal.svelte';
+import userEvent from '@testing-library/user-event';
+
+vi.mock(import('./PodTerminal.svelte'));
+
+const fakePod2containersRunning: V1Pod = {
+  status: {
+    containerStatuses: [
+      { name: 'container1', state: { running: {} } },
+      { name: 'container2', state: { running: {} } },
+    ],
+  },
+} as V1Pod;
+
+const fakePod1containerRunning: V1Pod = {
+  status: {
+    containerStatuses: [
+      { name: 'container1', state: { running: {} } },
+      { name: 'container2', state: { terminated: {} } },
+    ],
+  },
+} as V1Pod;
+
+const fakePodNoContainerRunning: V1Pod = {
+  status: {
+    containerStatuses: [
+      { name: 'container1', state: { terminated: {} } },
+      { name: 'container2', state: { terminated: {} } },
+    ],
+  },
+} as V1Pod;
+
+test('renders with no container running', () => {
+  render(PodTerminalBrowser, { object: fakePodNoContainerRunning });
+  screen.getByText('No container running');
+});
+
+test('renders with 2 containers running', async () => {
+  render(PodTerminalBrowser, { object: fakePod2containersRunning });
+  const dropdown = screen.getByLabelText('Select container');
+  const dropdownButton = within(dropdown).getByText('container1');
+  expect(vi.mocked(PodTerminal)).toHaveBeenCalledWith(expect.anything(), {
+    object: fakePod2containersRunning,
+    containerName: 'container1',
+  });
+  await userEvent.click(dropdownButton);
+  const container2 = within(dropdown).getByText('container2');
+  await userEvent.click(container2);
+  expect(vi.mocked(PodTerminal)).toHaveBeenCalledWith(expect.anything(), {
+    object: fakePod2containersRunning,
+    containerName: 'container2',
+  });
+});
+
+test('renders with 1 container running', () => {
+  render(PodTerminalBrowser, { object: fakePod1containerRunning });
+  expect(screen.queryByText('container1')).not.toBeInTheDocument();
+});

packages/webview/src/component/pods/PodTerminalBrowser.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+import type { V1Pod } from '@kubernetes/client-node';
+import { Dropdown, EmptyScreen } from '@podman-desktop/ui-svelte';
+import NoLogIcon from '../icons/NoLogIcon.svelte';
+import PodTerminal from './PodTerminal.svelte';
+import { onMount } from 'svelte';
+
+interface Props {
+  object: V1Pod;
+}
+let { object }: Props = $props();
+
+const runningContainers = $derived(object.status?.containerStatuses?.filter(status => status.state?.running) ?? []);
+
+let selectedContainerName = $state('');
+
+onMount(() => {
+  selectedContainerName = runningContainers?.[0]?.name ?? '';
+});
+</script>
+
+{#if runningContainers.length > 0}
+  <div class="flex grow flex-col h-full w-full">
+    {#if runningContainers.length > 1}
+      <div class="flex p-2 h-[40px] w-full">
+        <div class="w-full">
+          <Dropdown
+            ariaLabel="Select container"
+            class="w-48"
+            name="container"
+            bind:value={selectedContainerName}
+            options={runningContainers.map(container => ({
+              label: container.name,
+              value: container.name,
+            }))}>
+          </Dropdown>
+        </div>
+      </div>
+    {/if}
+
+    <div class="flex w-full h-full min-h-0">
+      {#key selectedContainerName}
+        <PodTerminal object={object} containerName={selectedContainerName} />
+      {/key}
+    </div>
+  </div>
+{:else}
+  <EmptyScreen icon={NoLogIcon} title="No Terminal" message="No container running" />
+{/if}