web: Improve table of space actions

- Use description from backend.
- Simplify columns.

web/src/components/storage/ProposalSpacePolicyField.jsx

@@ -96,9 +96,9 @@ const SPACE_POLICIES = [
 // Names of the columns for the policy actions.
 const columnNames = {
   device: N_("Used device"),
-  content: N_("Current content"),
+  content: N_("Details"),
   size: N_("Size"),
-  details: N_("Details"),
+  details: N_("Size details"),
   action: N_("Action")
 };
 
@@ -110,63 +110,23 @@ const columnNames = {
  * @param {StorageDevice} props.device
  */
 const DeviceDescriptionColumn = ({ device }) => {
-  return (
-    <>
-      <div>{device.name}</div>
-      <If
-        condition={device.isDrive}
-        then={<div className="fs-small">{`${device.vendor} ${device.model}`}</div>}
-      />
-    </>
-  );
+  if (device.isDrive || device.type === "lvmVg") return device.name;
+
+  return device.name.split("/").pop();
 };
 
 /**
- * Column content with information about the current content of the device.
+ * Column content with details about the device.
  * @component
  *
  * @param {object} props
  * @param {StorageDevice} props.device
  */
 const DeviceContentColumn = ({ device }) => {
-  const PartitionTableContent = () => {
-    return (
-      <div>
-        {/* TRANSLATORS: %s is replaced by partition table type (e.g., GPT) */}
-        {sprintf(_("%s partition table"), device.partitionTable.type.toUpperCase())}
-      </div>
-    );
-  };
-
-  const BlockContent = () => {
-    const renderContent = () => {
-      const systems = device.systems;
-      if (systems.length > 0) return systems.join(", ");
+  const systems = device.systems;
+  if (systems.length > 0) return systems.join(", ");
 
-      const filesystem = device.filesystem;
-      if (filesystem?.isEFI) return _("EFI system partition");
-      if (filesystem) {
-        // TRANSLATORS: %s is replaced by a file system type (e.g., btrfs).
-        return sprintf(_("%s file system"), filesystem?.type);
-      }
-
-      const component = device.component;
-      switch (component?.type) {
-        case "physical_volume":
-          // TRANSLATORS: %s is replaced by a LVM volume group name (e.g., /dev/vg0).
-          return sprintf(_("LVM physical volume of %s"), component.deviceNames[0]);
-        case "md_device":
-          // TRANSLATORS: %s is replaced by a RAID name (e.g., /dev/md0).
-          return sprintf(_("Member of RAID %s"), component.deviceNames[0]);
-        default:
-          return _("Not identified");
-      }
-    };
-
-    return <div>{renderContent()}</div>;
-  };
-
-  return (device.partitionTable ? <PartitionTableContent /> : <BlockContent />);
+  return device.description;
 };
 
 /**
@@ -177,7 +137,7 @@ const DeviceContentColumn = ({ device }) => {
  * @param {StorageDevice} props.device
  */
 const DeviceSizeColumn = ({ device }) => {
-  return <div>{deviceSize(device.size)}</div>;
+  return deviceSize(device.size);
 };
 
 /**
@@ -192,26 +152,16 @@ const DeviceDetailsColumn = ({ device }) => {
     if (device.filesystem) return null;
 
     const unused = device.partitionTable?.unpartitionedSize || 0;
-
-    return (
-      <div>
-        {/* TRANSLATORS: %s is replaced by a disk size (e.g., 20 GiB) */}
-        {sprintf(_("%s unused"), deviceSize(unused))}
-      </div>
-    );
+    // TRANSLATORS: %s is replaced by a disk size (e.g., 20 GiB)
+    return sprintf(_("%s unused"), deviceSize(unused));
   };
 
   const RecoverableSize = () => {
     const size = device.recoverableSize;
-
     if (size === 0) return null;
 
-    return (
-      <div>
-        {/* TRANSLATORS: %s is replaced by a disk size (e.g., 2 GiB) */}
-        {sprintf(_("Shrinkable by %s"), deviceSize(device.recoverableSize))}
-      </div>
-    );
+    // TRANSLATORS: %s is replaced by a disk size (e.g., 2 GiB)
+    return sprintf(_("Shrinkable by %s"), deviceSize(device.recoverableSize));
   };
 
   return (