web: add Result section to Storage page (#1088)

Replace the `Actions` section in the storage proposal for a `Result` one
which presents the proposal result in a more appealing way displaying
how the storage would look after installation instead of just the list
of actions. Among others bits, it hints the user about things like
file-systems are going to be created, resized actions and a subtle
emphasis in deletions, if any.

The full, plain list of actions is now available in a modal dialog
linked right before the new introduced table.

service/lib/agama/dbus/storage/interfaces/device/filesystem.rb

@@ -45,6 +45,15 @@ def self.apply?(storage_device)
             FILESYSTEM_INTERFACE = "org.opensuse.Agama.Storage1.Filesystem"
             private_constant :FILESYSTEM_INTERFACE
 
+            # SID of the file system.
+            #
+            # It is useful to detect whether a file system is new.
+            #
+            # @return [Integer]
+            def filesystem_sid
+              storage_device.filesystem.sid
+            end
+
             # File system type.
             #
             # @return [String] e.g., "ext4"
@@ -68,7 +77,8 @@ def filesystem_label
 
             def self.included(base)
               base.class_eval do
-                dbus_interface FILESYSTEM_INTERFACE  do
+                dbus_interface FILESYSTEM_INTERFACE do
+                  dbus_reader :filesystem_sid, "u", dbus_name: "SID"
                   dbus_reader :filesystem_type, "s", dbus_name: "Type"
                   dbus_reader :filesystem_mount_path, "s", dbus_name: "MountPath"
                   dbus_reader :filesystem_label, "s", dbus_name: "Label"

service/test/agama/dbus/storage/interfaces/device/filesystem_examples.rb

@@ -28,6 +28,12 @@
 
     let(:device) { devicegraph.find_by_name("/dev/mapper/0QEMU_QEMU_HARDDISK_mpath1") }
 
+    describe "#filesystem_sid" do
+      it "returns the file system SID" do
+        expect(subject.filesystem_sid).to eq(45)
+      end
+    end
+
     describe "#filesystem_type" do
       it "returns the file system type" do
         expect(subject.filesystem_type).to eq("ext4")

service/test/fixtures/trivial_lvm.yml

@@ -6,7 +6,7 @@
     partitions:
 
     - partition:
-        size:         unlimited
+        size:         100 GiB
         name:         /dev/sda1
         id:           lvm
 
@@ -18,7 +18,7 @@
 
     lvm_lvs:
         - lvm_lv:
-            size:         unlimited
+            size:         100 GiB
             lv_name:      lv1
             file_system:  btrfs
             mount_point:  /

web/.eslintignore

@@ -1,2 +1,3 @@
 node_modules/*
 src/lib/*
+src/**/test-data/*

web/cspell.json

@@ -5,7 +5,8 @@
   "ignorePaths": [
     "src/lib/cockpit.js",
     "src/lib/cockpit-po-plugin.js",
-    "src/manifest.json"
+    "src/manifest.json",
+    "src/**/test-data/*"
   ],
   "import": [
     "@cspell/dict-css/cspell-ext.json",

web/src/assets/styles/blocks.scss

@@ -403,6 +403,143 @@ ul[data-type="agama/list"][role="grid"] {
   }
 }
 
+[data-type="agama/tag"] {
+  font-size: var(--fs-small);
+
+  &[data-variant="teal"] {
+    color: var(--color-teal);
+  }
+
+  &[data-variant="orange"] {
+    color: var(--color-orange);
+  }
+
+  &[data-variant="gray-highlight"] {
+    padding: var(--spacer-smaller);
+    color: var(--color-gray-darkest);
+    background: var(--color-gray);
+    border: 1px solid var(--color-gray-dark);
+    border-radius: 5px;
+    margin-inline-start: var(--spacer-smaller);
+  }
+}
+
+table[data-type="agama/tree-table"] {
+  th:first-child {
+    block-size: fit-content;
+    padding-inline-end: var(--spacer-normal);
+  }
+
+  th.fit-content {
+    block-size: fit-content;
+    overflow: visible;
+    text-overflow: unset;
+  }
+
+  /**
+   * Temporary PF/Table overrides for small devices
+   **/
+  @media (width <= 768px) {
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="1"] td {
+      padding-inline-start: var(--spacer-medium);
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="2"] th {
+      padding-inline-start: calc(var(--spacer-large) * 1.1);
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="2"] td {
+      padding-inline-start: calc(var(--spacer-large) * 1.4);
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
+      padding-block-end: var(--spacer-smaller);
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:empty,
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td *:empty,
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:has(> *:empty) {
+      display: none;
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:has(> *:not(:empty)) {
+      display: inherit;
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
+      inset-inline-start: 0;
+    }
+
+    &.pf-v5-c-table.pf-m-compact tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:last-child {
+      padding-inline-end: 8px;
+    }
+
+    tbody th:first-child {
+      font-size: var(--fs-large);
+      padding-block-start: var(--spacer-small);
+    }
+  }
+}
+
+table.proposal-result {
+  tr.dimmed-row {
+    background-color: #fff;
+    opacity: 0.8;
+    background: repeating-linear-gradient( -45deg, #fcfcff, #fcfcff 3px, #fff 3px, #fff 10px );
+
+    td {
+      color: var(--color-gray-dimmed);
+      padding-block: 0;
+    }
+
+  }
+
+  /**
+   * Temporary hack because the collapse/expand callback was not given to the
+   * tree table
+   **/
+  th button {
+    display: none;
+  }
+
+  tbody th .pf-v5-c-table__tree-view-main {
+    padding-inline-start: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft);
+    cursor: auto;
+  }
+
+  tbody tr[aria-level="2"] th .pf-v5-c-table__tree-view-main {
+    padding-inline-start: calc(
+       var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft) + var(--spacer-large)
+    );
+  }
+  /** End of temporary hack */
+
+  @media (width > 768px) {
+    th.details-column {
+      padding-inline-start: calc(60px + var(--spacer-smaller) * 2);
+    }
+
+    td.details-column {
+      display: grid;
+      gap: var(--spacer-smaller);
+      grid-template-columns: 60px 1fr;
+
+      :first-child {
+        text-align: end;
+      }
+    }
+
+    th.sizes-column,
+    td.sizes-column {
+      text-align: end;
+
+      div.split {
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+
 // compact lists in popover
 .pf-v5-c-popover li + li {
   margin: 0;
@@ -486,7 +623,24 @@ ul[data-type="agama/list"][role="grid"] {
 
   h4 {
     color: var(--accent-color);
-    margin-block-end: var(--spacer-smaller);
+  }
+
+  h4 ~ * {
+    margin-block-start: var(--spacer-small);
+  }
+}
+
+section [data-type="agama/reminder"] {
+  margin-inline: 0;
+}
+
+[data-type="agama/reminder"][data-variant="subtle"] {
+  --accent-color: var(--color-primary);
+  padding-block: 0;
+  border-inline-start-width: 1px;
+
+  h4 {
+    font-size: var(--fs-normal);
   }
 }
 

web/src/assets/styles/variables.scss

@@ -51,8 +51,12 @@
   --color-gray: #f2f2f2;
   --color-gray-dark: #efefef; // Fog
   --color-gray-darker: #999;
+  --color-gray-darkest: #333;
   --color-gray-dimmed: #888;
   --color-gray-dimmest: #666;
+  --color-teal: #279c9c;
+  --color-blue: #0d4ea6;
+  --color-orange: #e86427;
 
   --color-link: #0c322c;
   --color-link-hover: #30ba78;