feat(images): Add column to image list for diskless deployment suppor…

…t MAASENG-2155 (#5182)

- Added new column to images table for diskless support
- Added `canDeployToMemory` to base `BootResource` type and factory

src/app/images/components/ImagesTable/ImagesTable.test.tsx

@@ -476,4 +476,47 @@ describe("ImagesTable", () => {
       expect(row).toHaveTextContent(resourcesByReleaseTitle[i].title);
     });
   });
+
+  it("can show support for deploying to memory", async () => {
+    const supported_resource = resourceFactory({ canDeployToMemory: true });
+    const unsupported_resource = resourceFactory({ canDeployToMemory: false });
+    renderWithMockStore(
+      <ImagesTable
+        handleClear={jest.fn()}
+        images={[]}
+        resources={[supported_resource, unsupported_resource]}
+      />,
+      { state }
+    );
+
+    const tableBody = screen.getAllByRole("rowgroup")[1];
+    const rows = within(tableBody).getAllByRole("row");
+
+    expect(
+      within(rows[0]).getByRole("gridcell", { name: "supported" })
+    ).toBeInTheDocument();
+    expect(
+      within(rows[1]).getByRole("gridcell", { name: "not supported" })
+    ).toBeInTheDocument();
+
+    await userEvent.click(
+      within(rows[0]).getByRole("button", { name: "supported" })
+    );
+
+    expect(
+      screen.getByRole("tooltip", {
+        name: "This image can be deployed in memory.",
+      })
+    ).toBeInTheDocument();
+
+    await userEvent.click(
+      within(rows[1]).getByRole("button", { name: "not supported" })
+    );
+
+    expect(
+      screen.getByRole("tooltip", {
+        name: "This image cannot be deployed in memory.",
+      })
+    ).toBeInTheDocument();
+  });
 });

src/app/images/components/ImagesTable/ImagesTable.tsx

@@ -8,6 +8,7 @@ import DeleteImageConfirm from "./DeleteImageConfirm";
 
 import DoubleRow from "app/base/components/DoubleRow";
 import TableActions from "app/base/components/TableActions";
+import TooltipButton from "app/base/components/TooltipButton/TooltipButton";
 import type { ImageValue } from "app/images/types";
 import type { BootResource } from "app/store/bootresource/types";
 import { splitResourceName } from "app/store/bootresource/utils";
@@ -36,6 +37,26 @@ export enum Labels {
   MachineCount = "Machine count",
 }
 
+const EphemeralSupportIcon = ({
+  canDeployToMemory,
+}: {
+  canDeployToMemory: boolean | null;
+}) => {
+  return canDeployToMemory ? (
+    <TooltipButton
+      iconName="task-outstanding"
+      iconProps={{ "aria-label": "supported" }}
+      message="This image can be deployed in memory."
+    />
+  ) : (
+    <TooltipButton
+      iconName="close"
+      iconProps={{ "aria-label": "not supported" }}
+      message="This image cannot be deployed in memory."
+    />
+  );
+};
+
 /**
  * Check whether a given resource matches a form image value.
  * @param resource - the resource to check.
@@ -150,6 +171,14 @@ const generateResourceRow = ({
       { content: resource.title, className: "release-col" },
       { content: resource.arch, className: "arch-col" },
       { content: resource.size, className: "size-col" },
+      {
+        content: (
+          <EphemeralSupportIcon
+            canDeployToMemory={resource.canDeployToMemory}
+          />
+        ),
+        className: "diskless-col",
+      },
       {
         content: (
           <DoubleRow
@@ -271,6 +300,7 @@ const ImagesTable = ({
         { content: "Release", className: "release-col", sortKey: "title" },
         { content: "Architecture", className: "arch-col", sortKey: "arch" },
         { content: "Size", className: "size-col", sortKey: "size" },
+        { content: "Deployable in memory", className: "diskless-col" },
         {
           content: <span className="p-double-row__header-spacer">Status</span>,
           className: "status-col",

src/app/images/components/ImagesTable/_index.scss

@@ -1,7 +1,7 @@
 @mixin ImagesTable {
   .images-table {
     .release-col {
-      @include breakpoint-widths(0.25, 0.25, 0.2, 0.2, 0.2, true);
+      @include breakpoint-widths(0.25, 0.25, 0.2, 0.2, 0.15, true);
     }
 
     .arch-col {
@@ -13,7 +13,7 @@
     }
 
     .status-col {
-      @include breakpoint-widths(0.25, 0.45, 0.3, 0.35, 0.25, true);
+      @include breakpoint-widths(0.25, 0.45, 0.3, 0.35, 0.2, true);
     }
 
     .actions-col {
@@ -27,5 +27,9 @@
     .last-deployed-col {
       @include breakpoint-widths(0, 0, 0.15, 0.2, 0.15, true);
     }
+
+    .diskless-col {
+      @include breakpoint-widths(0, 0, 0, 0, 0.1, true);
+    }
   }
 }

src/app/store/bootresource/types/base.ts

@@ -11,6 +11,7 @@ export type BaseImageFields = {
 
 export type BootResource = Model & {
   arch: string;
+  canDeployToMemory: boolean;
   complete: boolean;
   downloading: boolean;
   icon: "in-progress" | "queued" | "succeeded" | "waiting";

src/scss/index.scss

@@ -27,6 +27,7 @@
 @include vf-p-icon-units;
 @include vf-p-icon-tag;
 @include vf-p-icon-connected;
+@include vf-p-icon-task-outstanding;
 
 // Import MAAS overrides of Vanilla patterns
 @import "./vanilla-overrides";

src/testing/factories/bootresource.ts

@@ -36,6 +36,7 @@ export const bootResource = extend<Model, BootResource>(model, {
   numberOfNodes: 0,
   lastUpdate: "Tue, 08 Jun. 2021 02:12:47",
   lastDeployed: "Tue, 08 Jun. 2021 02:12:47",
+  canDeployToMemory: true,
 });
 
 export const bootResourceUbuntu = define<BootResourceUbuntu>({