diff --git a/src/components/PacksTable/PackTable.test.tsx b/src/components/PacksTable/PackTable.test.tsx
index 15f0d79c44..08bc4eb144 100644
--- a/src/components/PacksTable/PackTable.test.tsx
+++ b/src/components/PacksTable/PackTable.test.tsx
@@ -85,4 +85,21 @@ describe("FilteredTable Tests", () => {
expect(screen.getByText("Failed to load Deprecated Packs")).toBeInTheDocument();
});
});
+
+ it("should properly format cloud types", async () => {
+ const customMockPacks = [
+ {
+ ...mockPacks[0],
+ cloudTypesFormatted: "eks,vsphere"
+ }
+ ];
+
+ fetchMock.mockResponseOnce(JSON.stringify({ dateCreated: "2022-08-25", Packs: customMockPacks }));
+ render();
+
+ await waitFor(() => screen.getByText("Alpine"));
+
+ expect(screen.getByText("EKS, vSphere")).toBeInTheDocument();
+ });
+
});
diff --git a/src/components/PacksTable/PacksTable.tsx b/src/components/PacksTable/PacksTable.tsx
index beda1595f9..ef2ab8ff60 100644
--- a/src/components/PacksTable/PacksTable.tsx
+++ b/src/components/PacksTable/PacksTable.tsx
@@ -27,6 +27,37 @@ const statusClassNames: Record = {
disabled: styles.disabled,
};
+
+// Format the cloud type strings so they display properly
+const formatCloudType = (type: string): string => {
+ const cloudTypeMapping: Record = {
+ "aws": "AWS",
+ "eks": "EKS",
+ "vsphere": "vSphere",
+ "maas": "MaaS",
+ "gcp": "GCP",
+ "libvirt": "libvirt",
+ "openstack": "OpenStack",
+ "edge-native": "Edge",
+ "tke": "TKE",
+ "aks": "AKS",
+ "coxedge": "Cox Edge",
+ "gke": "GKE",
+ "all": "All",
+ "azure": "Azure"
+ // ... add other special cases as needed
+ };
+
+ return type.split(',')
+ .map(part => cloudTypeMapping[part.trim()] || capitalizeWord(part))
+ .join(', ');
+}
+
+// Capitalize the word as a default option
+const capitalizeWord = (string: string): string => {
+ return string.toUpperCase();
+}
+
interface PacksColumn {
title: string;
dataIndex: keyof Pack;
@@ -44,6 +75,14 @@ const columns: PacksColumn[] = [
sorter: (a: Pack, b: Pack) => a.displayName.localeCompare(b.displayName),
width: 200,
},
+ {
+ title: "Cloud Types",
+ dataIndex: "cloudTypesFormatted",
+ key: "cloudTypesFormatted",
+ sorter: (a: Pack, b: Pack) => a.cloudTypesFormatted.localeCompare(b.cloudTypesFormatted),
+ render: (value: string) => formatCloudType(value),
+ width: 200,
+ },
{
title: "Version",
dataIndex: "version",