web: add Result section to Storage page

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")

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,94 @@ 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 {
+ width: 1%;
+ padding-inline-end: var(--spacer-normal);
+ }
+
+ @media (width <= 768px) {
+ td:empty,
+ td div:empty {
+ display: none;
+ }
+ }
+}
+
+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 {
+ background: red;
+ display: none;
+}
+
+tbody th .pf-v5-c-table__tree-view-main {
+ padding-inline-start: var(--spacer-normal);
+ flex-direction: row-reverse;
+ cursor: auto;
+}
+/** 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 +574,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;