CC-5462: Simplify containers images list output (#9620)

Use a simple table (one row for each entry) instead of a fancy table
with badly drawn box characters. Print one row for each name:tag
combination.

Co-authored-by: Carmen Popoviciu <[email protected]>

Author: gpanders

.changeset/hungry-garlics-flow.md

@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+Simplify containers images list output format

packages/wrangler/src/__tests__/cloudchamber/images.test.ts

@@ -230,15 +230,13 @@ describe("cloudchamber image list", () => {
 		await runWrangler("cloudchamber images list");
 		expect(std.err).toMatchInlineSnapshot(`""`);
 		expect(std.out).toMatchInlineSnapshot(`
-			"┌─┬─┐
-			│ REPOSITORY │ TAG │
-			├─┼─┤
-			│ one │ hundred ten │
-			├─┼─┤
-			│ two │ thousand twenty │
-			├─┼─┤
-			│ three │ million thirty │
-			└─┴─┘"
+			"REPOSITORY  TAG
+			one         hundred
+			one         ten
+			two         thousand
+			two         twenty
+			three       million
+			three       thirty"
 		`);
 	});
 	it("should list images with a filter", async () => {
@@ -276,11 +274,9 @@ describe("cloudchamber image list", () => {
 		await runWrangler("cloudchamber images list --filter '^two$'");
 		expect(std.err).toMatchInlineSnapshot(`""`);
 		expect(std.out).toMatchInlineSnapshot(`
-			"┌─┬─┐
-			│ REPOSITORY │ TAG │
-			├─┼─┤
-			│ two │ thousand twenty │
-			└─┴─┘"
+			"REPOSITORY  TAG
+			two         thousand
+			two         twenty"
 		`);
 	});
 	it("should filter out repos with no non-sha tags", async () => {
@@ -320,15 +316,13 @@ describe("cloudchamber image list", () => {
 		await runWrangler("cloudchamber images list");
 		expect(std.err).toMatchInlineSnapshot(`""`);
 		expect(std.out).toMatchInlineSnapshot(`
-			"┌─┬─┐
-			│ REPOSITORY │ TAG │
-			├─┼─┤
-			│ one │ hundred ten │
-			├─┼─┤
-			│ two │ thousand twenty │
-			├─┼─┤
-			│ three │ million thirty │
-			└─┴─┘"
+			"REPOSITORY  TAG
+			one         hundred
+			one         ten
+			two         thousand
+			two         twenty
+			three       million
+			three       thirty"
 		`);
 	});
 	it("should list repos with json flag set", async () => {

packages/wrangler/src/cloudchamber/images/list.ts

@@ -3,6 +3,7 @@ import {
 	ImageRegistriesService,
 } from "@cloudflare/containers-shared";
 import { logger } from "../../logger";
+import { getAccountId } from "../../user";
 import { handleFailure, promiseSpinner } from "../common";
 import type { Config } from "../../config";
 import type { containersScope } from "../../containers";
@@ -100,7 +101,7 @@ async function handleDeleteImageCommand(
 						`Failed to delete image ${args.image}: ${gcResponse.status} ${gcResponse.statusText}`
 					);
 				}
-				await logger.log(`Deleted tag: ${args.image}`);
+				logger.log(`Deleted tag: ${args.image}`);
 			}),
 			{ message: "Deleting", json: args.json }
 		);
@@ -111,24 +112,27 @@ async function handleDeleteImageCommand(
 
 async function handleListImagesCommand(
 	args: StrictYargsOptionsToInterfaceJSON<typeof listImagesYargs>,
-	_config: Config
+	config: Config
 ) {
 	try {
 		return await promiseSpinner(
 			getCreds().then(async (creds) => {
 				const repos = await listRepos(creds);
-				const tags: TagsResponse[] = [];
+				const responses: TagsResponse[] = [];
+				const accountId = config.account_id || (await getAccountId(config));
+				const accountIdPrefix = new RegExp(`^${accountId}/`);
+				const filter = new RegExp(args.filter ?? "");
 				for (const repo of repos) {
 					const stripped = repo.replace(/^\/+/, "");
-					const regex = new RegExp(args.filter ?? "");
-					if (regex.test(stripped)) {
+					if (filter.test(stripped)) {
 						// get all tags for repo
-						const repoTags = await listTags(stripped, creds);
-						tags.push({ name: stripped, tags: repoTags });
+						const tags = await listTags(stripped, creds);
+						const name = stripped.replace(accountIdPrefix, "");
+						responses.push({ name, tags });
 					}
 				}
 
-				await ListTags(tags, false, args.json);
+				await ListTags(responses, false, args.json);
 			}),
 			{ message: "Listing", json: args.json }
 		);
@@ -157,15 +161,21 @@ async function ListTags(
 	if (json) {
 		logger.log(JSON.stringify(responses, null, 2));
 	} else {
-		const rows = responses
-			.map((resp) => {
-				return {
-					REPOSITORY: resp.name,
-					TAG: resp.tags.join(" "),
-				};
-			})
-			.flat();
-		logger.table(rows);
+		const rows = responses.flatMap((r) => r.tags.map((t) => [r.name, t]));
+		const headers = ["REPOSITORY", "TAG"];
+		const widths = new Array(headers.length).fill(0);
+
+		// Find the maximum length of each column (except for the last)
+		for (let i = 0; i < widths.length - 1; i++) {
+			widths[i] = rows
+				.map((r) => r[i].length)
+				.reduce((a, b) => Math.max(a, b), headers[i].length);
+		}
+
+		logger.log(headers.map((h, i) => h.padEnd(widths[i], " ")).join("  "));
+		for (const row of rows) {
+			logger.log(row.map((v, i) => v.padEnd(widths[i], " ")).join("  "));
+		}
 	}
 }