feat(web): show filesystem labels

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Tue Feb 25 15:57:49 UTC 2025 - Ancor Gonzalez Sosa <ancor@suse.com>
+
+- Display the file system labels in most selectors for disks and
+  partitions (gh#agama-project/agama#2070).
+
 -------------------------------------------------------------------
 Tue Feb 25 13:08:43 UTC 2025 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

web/src/components/storage/AddExistingDeviceMenu.tsx

@@ -31,6 +31,9 @@ import {
   MenuToggleElement,
   MenuToggle,
   Divider,
+  Split,
+  Flex,
+  Label,
 } from "@patternfly/react-core";
 import { MenuHeader } from "~/components/core";
 import MenuDeviceDescription from "./MenuDeviceDescription";
@@ -90,7 +93,16 @@ export default function AddExistingDeviceMenu() {
               description={<MenuDeviceDescription device={device} />}
               onClick={() => modelHook.addDrive(device.name)}
             >
-              {deviceLabel(device)}
+              <Split hasGutter>
+                {deviceLabel(device)}
+                <Flex columnGap={{ default: "columnGapXs" }}>
+                  {device.systems.map((s, i) => (
+                    <Label key={i} isCompact>
+                      {s}
+                    </Label>
+                  ))}
+                </Flex>
+              </Split>
             </DropdownItem>
           ))}
         </DropdownGroup>

web/src/components/storage/DriveEditor.tsx

@@ -32,7 +32,7 @@ import { STORAGE as PATHS } from "~/routes/paths";
 import { useDrive } from "~/queries/storage/config-model";
 import * as driveUtils from "~/components/storage/utils/drive";
 import * as partitionUtils from "~/components/storage/utils/partition";
-import { typeDescription, contentDescription } from "~/components/storage/utils/device";
+import { contentDescription } from "~/components/storage/utils/device";
 import { Icon } from "../layout";
 import { MenuHeader } from "~/components/core";
 import MenuDeviceDescription from "./MenuDeviceDescription";
@@ -273,6 +273,26 @@ const SearchSelectorIntro = ({ drive }: { drive: configModel.Drive }) => {
   return <MenuHeader title={mainText()} description={extraText()} />;
 };
 
+const DiskSelectorTitle = ({ device, isSelected = false }) => {
+  const Name = () => (isSelected ? <b>{deviceLabel(device)}</b> : deviceLabel(device));
+  const Systems = () => (
+    <Flex columnGap={{ default: "columnGapXs" }}>
+      {device.systems.map((s, i) => (
+        <Label key={i} isCompact>
+          {s}
+        </Label>
+      ))}
+    </Flex>
+  );
+
+  return (
+    <Split hasGutter>
+      <Name />
+      <Systems />
+    </Split>
+  );
+};
+
 const SearchSelectorMultipleOptions = ({ selected, withNewVg = false, onChange }) => {
   const navigate = useNavigate();
   const devices = useAvailableDevices();
@@ -296,9 +316,7 @@ const SearchSelectorMultipleOptions = ({ selected, withNewVg = false, onChange }
   return (
     <>
       {devices.map((device) => {
-        const isSelected = device === selected;
-        // FIXME: use PF/Content with #component prop instead when migrating to PF6
-        const Name = () => (isSelected ? <b>{deviceLabel(device)}</b> : deviceLabel(device));
+        const isSelected = device.sid === selected.sid;
 
         return (
           <MenuItem
@@ -308,7 +326,7 @@ const SearchSelectorMultipleOptions = ({ selected, withNewVg = false, onChange }
             description={<MenuDeviceDescription device={device} />}
             onClick={() => onChange(device.name)}
           >
-            <Name />
+            <DiskSelectorTitle device={device} isSelected={isSelected} />
           </MenuItem>
         );
       })}
@@ -323,9 +341,9 @@ const SearchSelectorSingleOption = ({ selected }) => {
       isSelected
       key={selected.sid}
       itemId={selected.sid}
-      description={<>{typeDescription(selected)}</>}
+      description={<MenuDeviceDescription device={selected} />}
     >
-      <b>{deviceLabel(selected)}</b>
+      <DiskSelectorTitle device={selected} isSelected />
     </MenuItem>
   );
 };

web/src/components/storage/MenuDeviceDescription.tsx

@@ -21,8 +21,12 @@
  */
 
 import React from "react";
-import { Stack, Split, Label } from "@patternfly/react-core";
-import { typeDescription, contentDescription } from "~/components/storage/utils/device";
+import { Stack, Flex, Split, Label } from "@patternfly/react-core";
+import {
+  typeDescription,
+  contentDescription,
+  filesystemLabels,
+} from "~/components/storage/utils/device";
 import { StorageDevice } from "~/types/storage";
 
 /**
@@ -38,13 +42,13 @@ export default function MenuDeviceDescription({ device }: { device: StorageDevic
         <span>{typeDescription(device)}</span>
         <span>{contentDescription(device)}</span>
       </Split>
-      <Split hasGutter>
-        {device.systems.map((s, i) => (
-          <Label key={i} isCompact>
+      <Flex columnGap={{ default: "columnGapXs" }}>
+        {filesystemLabels(device).map((s, i) => (
+          <Label key={i} variant="outline" isCompact>
             {s}
           </Label>
         ))}
-      </Split>
+      </Flex>
     </Stack>
   );
 }

web/src/components/storage/PartitionPage.tsx

@@ -33,11 +33,13 @@ import {
   FormHelperText,
   HelperText,
   HelperTextItem,
+  Label,
   SelectGroup,
   SelectList,
   SelectOption,
   SelectOptionProps,
   Split,
+  SplitItem,
   Stack,
   TextInput,
 } from "@patternfly/react-core";
@@ -54,7 +56,13 @@ import {
   editPartition,
 } from "~/queries/storage/config-model";
 import { StorageDevice } from "~/types/storage";
-import { baseName, deviceSize, filesystemLabel, parseToBytes } from "~/components/storage/utils";
+import {
+  baseName,
+  deviceSize,
+  deviceLabel,
+  filesystemLabel,
+  parseToBytes,
+} from "~/components/storage/utils";
 import { _, formatList } from "~/i18n";
 import { sprintf } from "sprintf-js";
 import { configModel } from "~/api/storage/types";
@@ -491,10 +499,18 @@ type PartitionDescriptionProps = {
 };
 
 function PartitionDescription({ partition }: PartitionDescriptionProps): React.ReactNode {
+  const label = partition.filesystem?.label;
+
   return (
     <Split hasGutter>
-      <span>{partition.description}</span>
-      <span>{deviceSize(partition.size)}</span>
+      <SplitItem>{partition.description}</SplitItem>
+      {label && (
+        <SplitItem>
+          <Label isCompact variant="outline">
+            {label}
+          </Label>
+        </SplitItem>
+      )}
     </Split>
   );
 }
@@ -515,7 +531,7 @@ function TargetOptions(): React.ReactNode {
             value={partition.name}
             description={<PartitionDescription partition={partition} />}
           >
-            {partition.name}
+            {deviceLabel(partition)}
           </SelectOption>
         ))}
         {partitions.length === 0 && (

web/src/components/storage/utils/device.tsx

@@ -25,6 +25,7 @@
 import { _ } from "~/i18n";
 import { sprintf } from "sprintf-js";
 import { StorageDevice } from "~/types/storage";
+import { compact } from "~/utils";
 
 /*
  * Description of the device type.
@@ -91,4 +92,16 @@ const contentDescription = (device: StorageDevice): string => {
   return device.description;
 };
 
-export { typeDescription, contentDescription };
+/*
+ * Labels of the filesystems included at the device
+ */
+const filesystemLabels = (device: StorageDevice): string[] => {
+  if (device.partitionTable) {
+    return compact(device.partitionTable.partitions.map((p) => p.filesystem?.label));
+  }
+
+  const label = device.filesystem?.label;
+  return label ? [label] : [];
+};
+
+export { typeDescription, contentDescription, filesystemLabels };