fix(container-detail): display the entire command instead of the first piece only

packages/main/src/plugin/api/container-info.ts

@@ -42,7 +42,7 @@ export interface ContainerInfo {
  Names: string[];
  Image: string;
  ImageID: string;
- Command?: string;
+ Command?: readonly string[];
  Created: number;
  Ports: ContainerPortInfo[];
  Labels: { [label: string]: string };

packages/main/src/plugin/container-registry.spec.ts

@@ -826,7 +826,7 @@ describe('listContainers', () => {
  expect(container.StartedAt).toBe('2023-08-10T13:37:44.000Z');
  expect(container.pod).toBeUndefined();
  expect(container.Id).toBe('31a4b282691420be2611817f203765402d8da7e13cd530f80a6ddd1bb4aa63b4');
- expect(container.Command).toBe('httpd-foreground');
+ expect(container.Command).toStrictEqual(['httpd-foreground']);
  expect(container.Names).toStrictEqual(['/admiring_wing']);
  expect(container.Image).toBe('docker.io/library/httpd:latest');
  expect(container.ImageID).toBe('sha256:911d72fc5020723f0c003a134a8d2f062b4aea884474a11d1db7dcd28ce61d6a');
@@ -936,7 +936,7 @@ describe('listContainers', () => {
  expect(container.pod).toBeUndefined();
 
  expect(container.Id).toBe('31a4b282691420be2611817f203765402d8da7e13cd530f80a6ddd1bb4aa63b4');
- expect(container.Command).toBe('httpd-foreground');
+ expect(container.Command).toStrictEqual(['httpd-foreground']);
  expect(container.Names).toStrictEqual(['/admiring_wing']);
  expect(container.Image).toBe('docker.io/library/httpd:latest');
  expect(container.ImageID).toBe('sha256:911d72fc5020723f0c003a134a8d2f062b4aea884474a11d1db7dcd28ce61d6a');
@@ -1031,7 +1031,7 @@ describe('listContainers', () => {
  expect(container.StartedAt).toBe('2023-08-10T13:37:44.000Z');
  expect(container.pod).toBeUndefined();
  expect(container.Id).toBe('31a4b282691420be2611817f203765402d8da7e13cd530f80a6ddd1bb4aa63b4');
- expect(container.Command).toBe(undefined);
+ expect(container.Command).toBe(null);
  expect(container.Names).toStrictEqual(['/admiring_wing']);
  expect(container.Image).toBe('docker.io/library/httpd:latest');
  expect(container.ImageID).toBe('sha256:911d72fc5020723f0c003a134a8d2f062b4aea884474a11d1db7dcd28ce61d6a');

packages/main/src/plugin/container-registry.ts

@@ -425,7 +425,7 @@ export class ContainerProviderRegistry {
  Names: string[];
  Image: string;
  ImageID: string;
- Command?: string;
+ Command?: string[] | string;
  Created: number;
  Ports: ContainerPortInfo[];
  Labels: { [label: string]: string };
@@ -435,7 +435,6 @@ export class ContainerProviderRegistry {
  }
 
  // if we have a libpod API, grab containers using Podman API
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
  let containers: CompatContainerInfo[] = [];
  if (provider.libpodApi) {
  const podmanContainers = await provider.libpodApi.listPodmanContainers({ all: true });
@@ -476,7 +475,7 @@ export class ContainerProviderRegistry {
  Created: moment(podmanContainer.Created).unix(),
  State: podmanContainer.State,
  StartedAt,
- Command: podmanContainer.Command?.length > 0 ? podmanContainer.Command[0] : undefined,
+ Command: podmanContainer.Command,
  Labels,
  Ports,
  };
@@ -533,6 +532,7 @@ export class ContainerProviderRegistry {
  engineType: provider.connection.type,
  StartedAt: container.StartedAt || '',
  Status: container.Status,
+ Command: typeof container.Command === 'string' ? [container.Command] : container.Command,
  };
  return containerInfo;
  }),

packages/renderer/src/lib/compose/ComposeDetailsLogs.spec.ts

@@ -56,7 +56,7 @@ const containerInfoUIMock: ContainerInfoUI = {
  ports: [],
  portsAsString: 'foobar',
  displayPort: 'foobar',
- command: 'foobar',
+ command: ['foobar'],
  hasPublicPort: false,
  groupInfo: {
  name: 'foobar',

packages/renderer/src/lib/container/ContainerDetails.spec.ts

@@ -45,7 +45,7 @@ const myContainer: ContainerInfo = {
  Names: ['name0'],
  Image: '',
  ImageID: '',
- Command: '',
+ Command: [''],
  Created: 0,
  Ports: [],
  State: '',

packages/renderer/src/lib/container/ContainerDetailsSummary.spec.ts

@@ -0,0 +1,51 @@
+/**********************************************************************
+ * Copyright (C) 2023 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 } from '@testing-library/svelte';
+import { describe, expect, test } from 'vitest';
+
+import ContainerDetailsSummary from './ContainerDetailsSummary.svelte';
+import type { ContainerInfoUI } from './ContainerInfoUI';
+
+test('Expect container command to be displayed as an array', async () => {
+ const container: ContainerInfoUI = {
+ shortId: 'myContainer',
+ command: ['sh', '-c', 'something', 'else'],
+ state: 'RUNNING',
+ hasPublicPort: false,
+ } as unknown as ContainerInfoUI;
+
+ render(ContainerDetailsSummary, { container });
+ expect(screen.getByTestId('container-details-command-td')).toHaveTextContent('["sh", "-c", "something", "else"]');
+});
+
+describe('Expect command to be hidden if command is an empty array or undefined', async () => {
+ // eslint-disable-next-line no-null/no-null
+ test.each([[], undefined, null])('given %p should not be visible', async command => {
+ const container: ContainerInfoUI = {
+ shortId: 'myContainer',
+ command: command,
+ state: 'RUNNING',
+ hasPublicPort: false,
+ } as unknown as ContainerInfoUI;
+
+ render(ContainerDetailsSummary, { container });
+ expect(screen.getByTestId('container-details-command-tr').classList.contains('hidden')).to.be.true;
+ });
+});

packages/renderer/src/lib/container/ContainerDetailsSummary.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+import { ContainerUtils } from './container-utils';
 import type { ContainerInfoUI } from './ContainerInfoUI';
 
 export let container: ContainerInfoUI;
+const containerUtils = new ContainerUtils();
 </script>
 
 <div class="flex px-5 py-4 flex-col h-full overflow-auto">
@@ -12,9 +14,10 @@ export let container: ContainerInfoUI;
  <td class="pr-2">Id</td>
  <td>{container.shortId}</td>
  </tr>
- <tr class:hidden="{!container.command}">
+ <tr data-testid="container-details-command-tr" class:hidden="{!container.command?.length}">
  <td class="pr-2">Command</td>
- <td>{container.command}</td>
+ <td data-testid="container-details-command-td"
+ >{container.command && containerUtils.formatContainerCommand(container.command)}</td>
  </tr>
  <tr>
  <td class="pr-2">State</td>

packages/renderer/src/lib/container/ContainerInfoUI.ts

@@ -59,7 +59,7 @@ export interface ContainerInfoUI {
  ports: Port[];
  portsAsString: string;
  displayPort: string;
- command?: string;
+ command?: readonly string[];
  hasPublicPort: boolean;
  openingUrl?: string;
  groupInfo: ContainerGroupPartInfoUI;

packages/renderer/src/lib/container/ContainerStatistics.spec.ts

@@ -40,7 +40,7 @@ const myContainer: ContainerInfoUI = {
  ports: [],
  portsAsString: 'foobar',
  displayPort: 'foobar',
- command: 'foobar',
+ command: ['foobar'],
  hasPublicPort: false,
  groupInfo: {
  name: 'foobar',

packages/renderer/src/lib/container/container-utils.ts

@@ -65,6 +65,11 @@ export class ContainerUtils {
  return humanizeDuration(uptimeInMs, { round: true, largest: 1 });
  }
 
+ formatContainerCommand(command: readonly string[]): string {
+ const commandArrayString = command.map(commandPiece => `"` + commandPiece + `"`).join(', ');
+ return `[${commandArrayString}]`;
+ }
+
  refreshUptime(containerInfoUI: ContainerInfoUI): string {
  if (containerInfoUI.state !== 'RUNNING' || !containerInfoUI.startedAt) {
  return '';