From 7b5327e2637d9ba8bba0e3589d6b8c8b1e80bb43 Mon Sep 17 00:00:00 2001 From: Tim deBoer Date: Fri, 27 Sep 2024 12:40:43 -0400 Subject: [PATCH] feat: details page for disk images Modifies the build logs to have a proper details page for disk images, similar to how Podman Desktop handles Images or Containers. The two tabs are Summary and Build Logs. The summary page is simple for now but could be expanded; the build logs doesn't really match what we typically have in Podman Desktop, but it fits in better here than a standalone page. Fixes #856. Signed-off-by: Tim deBoer --- packages/frontend/src/App.svelte | 8 +-- .../frontend/src/lib/BootcActions.spec.ts | 2 +- packages/frontend/src/lib/BootcActions.svelte | 5 +- .../frontend/src/lib/BootcImageColumn.spec.ts | 11 ++++ .../frontend/src/lib/BootcImageColumn.svelte | 13 +++- .../lib/disk-image/DiskImageDetails.spec.ts | 66 +++++++++++++++++++ .../lib/disk-image/DiskImageDetails.svelte | 65 ++++++++++++++++++ .../disk-image/DiskImageDetailsBuild.spec.ts} | 27 ++++---- .../disk-image/DiskImageDetailsBuild.svelte} | 57 +++++++--------- .../DiskImageDetailsSummary.spec.ts | 59 +++++++++++++++++ .../disk-image/DiskImageDetailsSummary.svelte | 36 ++++++++++ .../src/lib/upstream/DetailsCell.svelte | 8 +++ .../src/lib/upstream/DetailsTable.svelte | 7 ++ .../src/lib/upstream/DetailsTitle.svelte | 3 + packages/frontend/src/lib/upstream/Util.ts | 30 +++++++++ 15 files changed, 337 insertions(+), 60 deletions(-) create mode 100644 packages/frontend/src/lib/disk-image/DiskImageDetails.spec.ts create mode 100644 packages/frontend/src/lib/disk-image/DiskImageDetails.svelte rename packages/frontend/src/{Logs.spec.ts => lib/disk-image/DiskImageDetailsBuild.spec.ts} (81%) rename packages/frontend/src/{Logs.svelte => lib/disk-image/DiskImageDetailsBuild.svelte} (69%) create mode 100644 packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.spec.ts create mode 100644 packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.svelte create mode 100644 packages/frontend/src/lib/upstream/DetailsCell.svelte create mode 100644 packages/frontend/src/lib/upstream/DetailsTable.svelte create mode 100644 packages/frontend/src/lib/upstream/DetailsTitle.svelte create mode 100644 packages/frontend/src/lib/upstream/Util.ts diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte index eda7e464..3fa59ec4 100644 --- a/packages/frontend/src/App.svelte +++ b/packages/frontend/src/App.svelte @@ -9,7 +9,7 @@ import { getRouterState } from './api/client'; import Homepage from './Homepage.svelte'; import { rpcBrowser } from '/@/api/client'; import { Messages } from '/@shared/src/messages/Messages'; -import Logs from './Logs.svelte'; +import DiskImageDetails from './lib/disk-image/DiskImageDetails.svelte'; router.mode.hash(); @@ -36,10 +36,8 @@ onMount(() => { - - + + diff --git a/packages/frontend/src/lib/BootcActions.spec.ts b/packages/frontend/src/lib/BootcActions.spec.ts index b97cd13a..ae8b9763 100644 --- a/packages/frontend/src/lib/BootcActions.spec.ts +++ b/packages/frontend/src/lib/BootcActions.spec.ts @@ -78,5 +78,5 @@ test('Test clicking on logs button', async () => { const logsButton = screen.getAllByRole('button', { name: 'Build Logs' })[0]; logsButton.click(); - expect(window.location.href).toContain('/logs'); + expect(window.location.href).toContain('/build'); }); diff --git a/packages/frontend/src/lib/BootcActions.svelte b/packages/frontend/src/lib/BootcActions.svelte index fded053d..01ba4141 100644 --- a/packages/frontend/src/lib/BootcActions.svelte +++ b/packages/frontend/src/lib/BootcActions.svelte @@ -15,10 +15,7 @@ async function deleteBuild(): Promise { // Navigate to the build async function gotoLogs(): Promise { - // Convert object.folder to base64 - const base64FolderLocation = btoa(object.folder); - const base64BuildImageName = btoa(object.image); - router.goto(`/logs/${base64BuildImageName}/${base64FolderLocation}`); + router.goto(`/details/${btoa(object.id)}/build`); } diff --git a/packages/frontend/src/lib/BootcImageColumn.spec.ts b/packages/frontend/src/lib/BootcImageColumn.spec.ts index 0107b303..cd7355a5 100644 --- a/packages/frontend/src/lib/BootcImageColumn.spec.ts +++ b/packages/frontend/src/lib/BootcImageColumn.spec.ts @@ -38,3 +38,14 @@ test('Expect to render as name:tag', async () => { const name = screen.getByText('image1:latest'); expect(name).not.toBeNull(); }); + +test('Expect click goes to details page', async () => { + render(BootcImageColumn, { object: mockHistoryInfo }); + + const name = screen.getByText('image1:latest'); + expect(name).not.toBeNull(); + + name.click(); + + expect(window.location.href).toContain('/summary'); +}); diff --git a/packages/frontend/src/lib/BootcImageColumn.svelte b/packages/frontend/src/lib/BootcImageColumn.svelte index 39a27a32..b2909176 100644 --- a/packages/frontend/src/lib/BootcImageColumn.svelte +++ b/packages/frontend/src/lib/BootcImageColumn.svelte @@ -1,9 +1,16 @@ -
- {object.image}:{object.tag} -
+ diff --git a/packages/frontend/src/lib/disk-image/DiskImageDetails.spec.ts b/packages/frontend/src/lib/disk-image/DiskImageDetails.spec.ts new file mode 100644 index 00000000..7b0f1ffe --- /dev/null +++ b/packages/frontend/src/lib/disk-image/DiskImageDetails.spec.ts @@ -0,0 +1,66 @@ +/********************************************************************** + * Copyright (C) 2024 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 { beforeEach, expect, test, vi } from 'vitest'; +import { bootcClient } from '/@/api/client'; + +import DiskImageDetails from './DiskImageDetails.svelte'; +import type { BootcBuildInfo } from '/@shared/src/models/bootc'; +import { tick } from 'svelte'; + +const image: BootcBuildInfo = { + id: 'id1', + image: 'my-image', + imageId: 'image-id', + tag: 'latest', + engineId: 'podman', + type: ['ami'], + folder: '/bootc', +}; + +vi.mock('/@/api/client', async () => { + return { + bootcClient: { + listHistoryInfo: vi.fn(), + }, + rpcBrowser: { + subscribe: () => { + return { + unsubscribe: () => {}, + }; + }, + }, + }; +}); + +beforeEach(() => { + vi.clearAllMocks(); +}); + +test('Confirm renders disk image details', async () => { + vi.mocked(bootcClient.listHistoryInfo).mockResolvedValue([image]); + + render(DiskImageDetails, { id: btoa(image.id) }); + + // allow UI time to update + await tick(); + + expect(screen.getByText(image.image + ':' + image.tag)).toBeInTheDocument(); +}); diff --git a/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte b/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte new file mode 100644 index 00000000..ea3ee00d --- /dev/null +++ b/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/frontend/src/Logs.spec.ts b/packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.spec.ts similarity index 81% rename from packages/frontend/src/Logs.spec.ts rename to packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.spec.ts index 74bb50d2..9730be1c 100644 --- a/packages/frontend/src/Logs.spec.ts +++ b/packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.spec.ts @@ -17,14 +17,21 @@ import { render, screen, waitFor } from '@testing-library/svelte'; import { vi, test, expect, beforeAll } from 'vitest'; -import Logs from './Logs.svelte'; -import { bootcClient } from './api/client'; +import DiskImageDetailsBuild from './DiskImageDetailsBuild.svelte'; +import { bootcClient } from '/@/api/client'; -vi.mock('./api/client', async () => ({ +vi.mock('/@/api/client', async () => ({ bootcClient: { loadLogsFromFolder: vi.fn(), getConfigurationValue: vi.fn(), }, + rpcBrowser: { + subscribe: () => { + return { + unsubscribe: () => {}, + }; + }, + }, })); beforeAll(() => { @@ -59,10 +66,8 @@ test('Render logs and terminal setup', async () => { vi.mocked(bootcClient.loadLogsFromFolder).mockResolvedValue(mockLogs); vi.mocked(bootcClient.getConfigurationValue).mockResolvedValue(14); - const base64FolderLocation = btoa('/path/to/logs'); - const base64BuildImageName = btoa('test-image'); - - render(Logs, { base64FolderLocation, base64BuildImageName }); + const folderLocation = '/path/to/logs'; + render(DiskImageDetailsBuild, { folder: folderLocation }); // Wait for the logs to be shown await waitFor(() => { @@ -77,12 +82,10 @@ test('Handles empty logs correctly', async () => { vi.mocked(bootcClient.loadLogsFromFolder).mockResolvedValue(''); vi.mocked(bootcClient.getConfigurationValue).mockResolvedValue(14); - const base64FolderLocation = btoa('/empty/logs'); - const base64BuildImageName = btoa('empty-image'); - - render(Logs, { base64FolderLocation, base64BuildImageName }); + const folderLocation = '/empty/logs'; + render(DiskImageDetailsBuild, { folder: folderLocation }); // Verify no logs message is displayed when logs are empty - const emptyMessage = await screen.findByText(/Unable to read image-build.log file from \/empty\/logs/); + const emptyMessage = await screen.findByText('Unable to read image-build.log file from /empty/logs'); expect(emptyMessage).toBeDefined(); }); diff --git a/packages/frontend/src/Logs.svelte b/packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.svelte similarity index 69% rename from packages/frontend/src/Logs.svelte rename to packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.svelte index e32ff5be..cf532a31 100644 --- a/packages/frontend/src/Logs.svelte +++ b/packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.svelte @@ -1,21 +1,15 @@ - - - - - +