WIP - towards cards

pkg/storaged/block/create-pages.jsx

@@ -21,7 +21,7 @@ import cockpit from "cockpit";
 import React from "react";
 import client from "../client";
 
-import { get_partitions, fmt_size } from "../utils.js";
+import { get_partitions } from "../utils.js";
 import { get_fstab_config } from "../filesystem/utils.jsx";
 
 import { format_dialog } from "./format-dialog.jsx";
@@ -38,10 +38,10 @@ import { make_swap_page } from "../swap/swap.jsx";
 import { make_partition_table_page } from "../partitions/partition-table.jsx";
 import { make_legacy_vdo_page } from "../legacy-vdo/legacy-vdo.jsx";
 
-import { make_partition_container, delete_partition } from "../partitions/partition.jsx";
-import { make_encryption_container } from "../crypto/encryption.jsx";
+import { make_partition_card, delete_partition } from "../partitions/partition.jsx";
+import { make_encryption_card } from "../crypto/encryption.jsx";
 
-import { new_page } from "../pages.jsx";
+import { new_page, new_card } from "../pages.jsx";
 
 const _ = cockpit.gettext;
 
@@ -61,14 +61,9 @@ function make_partition_pages(parent, block) {
  const block_ptable = client.blocks_ptable[block.path];
 
  function make_free_space_page(parent, start, size, enable_dos_extended) {
- new_page({
- parent,
- name: _("Free space"),
- columns: [
- null,
- null,
- <StorageSize key="s" size={size} />,
- ],
+ const card = new_card({
+ page_name: _("Free space"),
+ page_size: <StorageSize size={size} />,
  actions: [
  {
  title: _("Create partition"),
@@ -77,21 +72,18 @@ function make_partition_pages(parent, block) {
  }
  ],
  });
+ new_page(parent, card);
  }
 
  function make_extended_partition_page(parent, partition) {
- const page = new_page({
- parent,
- name: _("Extended partition"),
- columns: [
- null,
- null,
- fmt_size(partition.size),
- ],
+ const card = new_card({
+ page_name: _("Extended partition"),
+ page_size: <StorageSize size={partition.size} />,
  actions: [
  { title: _("Delete"), action: () => delete_partition(partition.block, page), danger: true },
  ]
  });
+ const page = new_page(parent, card);
  process_partitions(page, partition.partitions, false);
  }
 
@@ -104,8 +96,8 @@ function make_partition_pages(parent, block) {
  else if (p.type == 'container')
  make_extended_partition_page(parent, p);
  else {
- const container = make_partition_container(null, p.block);
- make_block_page(parent, p.block, container);
+ const card = make_partition_card(null, p.block);
+ make_block_page(parent, p.block, card);
  }
  }
  }
@@ -114,7 +106,7 @@ function make_partition_pages(parent, block) {
  block_ptable.Type == 'dos');
 }
 
-export function make_block_page(parent, block, container) {
+export function make_block_page(parent, block, card) {
  let is_crypto = block.IdUsage == 'crypto';
  let content_block = is_crypto ? client.blocks_cleartext[block.path] : block;
  const fstab_config = get_fstab_config(content_block || block, true);
@@ -128,12 +120,12 @@ export function make_block_page(parent, block, container) {
  block_stratis_stopped_pool);
 
  if (client.blocks_ptable[block.path]) {
- make_partition_table_page(parent, block, container);
+ make_partition_table_page(parent, block, card);
  return;
  }
 
  if (legacy_vdo) {
- make_legacy_vdo_page(parent, legacy_vdo, block, container);
+ make_legacy_vdo_page(parent, legacy_vdo, block, card);
  return;
  }
 
@@ -144,14 +136,14 @@ export function make_block_page(parent, block, container) {
  }
 
  if (is_crypto)
- container = make_encryption_container(container, block);
+ card = make_encryption_card(card, block);
 
  if (!content_block) {
  // assert(is_crypto);
  if (fstab_config.length > 0) {
- make_filesystem_page(parent, block, null, fstab_config, container);
+ make_filesystem_page(parent, block, null, fstab_config, card);
  } else {
- make_locked_encrypted_data_page(parent, block, container);
+ make_locked_encrypted_data_page(parent, block, card);
  }
  return;
  }
@@ -161,20 +153,20 @@ export function make_block_page(parent, block, container) {
  const block_swap = client.blocks_swap[content_block.path];
 
  if (is_filesystem) {
- make_filesystem_page(parent, block, content_block, fstab_config, container);
+ make_filesystem_page(parent, block, content_block, fstab_config, card);
  } else if ((content_block.IdUsage == "raid" && content_block.IdType == "LVM2_member") ||
  (block_pvol && client.vgroups[block_pvol.VolumeGroup])) {
- make_lvm2_physical_volume_page(parent, block, content_block, container);
+ make_lvm2_physical_volume_page(parent, block, content_block, card);
  } else if (is_stratis) {
- make_stratis_blockdev_page(parent, block, content_block, container);
+ make_stratis_blockdev_page(parent, block, content_block, card);
  } else if ((content_block.IdUsage == "raid") ||
  (client.mdraids[content_block.MDRaidMember])) {
- make_mdraid_disk_page(parent, block, content_block, container);
+ make_mdraid_disk_page(parent, block, content_block, card);
  } else if (block_swap || (content_block && content_block.IdUsage == "other" && content_block.IdType == "swap")) {
- make_swap_page(parent, block, content_block, container);
+ make_swap_page(parent, block, content_block, card);
  } else if (client.blocks_available[content_block.path]) {
- make_unformatted_data_page(parent, block, content_block, container);
+ make_unformatted_data_page(parent, block, content_block, card);
  } else {
- make_unrecognized_data_page(parent, block, content_block, container);
+ make_unrecognized_data_page(parent, block, content_block, card);
  }
 }

pkg/storaged/block/other.jsx

@@ -23,9 +23,8 @@ import React from "react";
 import { DescriptionList } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
 import { CardBody } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 
-import { SCard } from "../utils/card.jsx";
 import { SDesc } from "../utils/desc.jsx";
-import { ActionButtons, new_container, block_location } from "../pages.jsx";
+import { StorageCard, new_card, block_location } from "../pages.jsx";
 import { block_name } from "../utils.js";
 import { partitionable_block_actions } from "../partitions/actions.jsx";
 
@@ -34,27 +33,28 @@ import { make_block_page } from "../block/create-pages.jsx";
 const _ = cockpit.gettext;
 
 export function make_other_page(parent, block) {
- const container = new_container({
+ const card = new_card({
+ title: _("Block device"),
  parent: null,
  page_location: ["other", block_location(block)],
  component: OtherContainer,
  props: { block },
  actions: partitionable_block_actions(block),
  });
 
- make_block_page(parent, block, container);
+ make_block_page(parent, block, card);
 }
 
-const OtherContainer = ({ container, block }) => {
+const OtherContainer = ({ card, block }) => {
  return (
- <SCard title={_("Block device")} actions={<ActionButtons container={container} />}>
+ <StorageCard card={card}>
  <CardBody>
  <DescriptionList className="pf-m-horizontal-on-sm">
  <SDesc title={_("Device number")}
  value={Math.floor(block.DeviceNumber / 256) + ":" + block.DeviceNumber % 256} />
  <SDesc title={_("Device file")} value={block_name(block)} />
  </DescriptionList>
  </CardBody>
- </SCard>
+ </StorageCard>
  );
 };

pkg/storaged/block/resize.jsx

@@ -151,7 +151,7 @@ function lvol_or_part_and_fsys_resize(client, lvol_or_part, size, offline, passp
  // HACK - https://bugzilla.redhat.com/show_bug.cgi?id=1934567
  //
  // block_fsys.MountedAt might be out of synch with reality
- // here if resizing the crypto container accidentally
+ // here if resizing the crypto card accidentally
  // triggered an unmount. Thus, we check synchronously
  // whether or not we should be doing a offline resize or
  // not.
@@ -313,7 +313,7 @@ export function free_space_after_part(client, part) {
  for (const p of parts) {
  if (p.type == "free" && p.start == part.Offset + part.Size)
  return p.size;
- if (p.type == "container") {
+ if (p.type == "card") {
  const s = find_it(p.partitions);
  if (s)
  return s;

pkg/storaged/block/unformatted-data.jsx

@@ -18,49 +18,27 @@
  */
 
 import cockpit from "cockpit";
-import React from "react";
 import client from "../client";
 
-import { Stack, StackItem } from "@patternfly/react-core/dist/esm/layouts/Stack/index.js";
-
 import {
- PageContainerStackItems,
- new_page, block_location, ActionButtons, page_type,
+ StorageCard, new_page, new_card,
 } from "../pages.jsx";
-import { SCard } from "../utils/card.jsx";
 import { format_dialog } from "./format-dialog.jsx";
-import { block_name } from "../utils.js";
 import { std_lock_action } from "../crypto/actions.jsx";
-import { StorageSize } from "../storage-controls.jsx";
 
 const _ = cockpit.gettext;
 
-export function make_unformatted_data_page(parent, backing_block, content_block, container) {
- new_page({
- location: [block_location(backing_block)],
- parent,
- container,
- name: block_name(backing_block),
- columns: [
- _("Unformatted data"),
- null,
- <StorageSize key="s" size={backing_block.Size} />,
- ],
- component: UnformattedDataPage,
- props: { backing_block, content_block },
+export function make_unformatted_data_page(parent, backing_block, content_block, card) {
+ const unformatted_card = new_card({
+ title: _("Unformatted data"),
+ parent: card,
+ page_block: backing_block,
+ component: StorageCard,
  actions: [
  std_lock_action(backing_block, content_block),
  { title: _("Format"), action: () => format_dialog(client, backing_block.path) },
  ]
  });
-}
 
-export const UnformattedDataPage = ({ page, backing_block, content_block }) => {
- return (
- <Stack hasGutter>
- <StackItem>
- <SCard title={page_type(page)} actions={<ActionButtons page={page} />} />
- </StackItem>
- <PageContainerStackItems page={page} />
- </Stack>);
-};
+ new_page(parent, unformatted_card);
+}

pkg/storaged/block/unrecognized-data.jsx

@@ -22,14 +22,12 @@ import React from "react";
 import client from "../client";
 
 import { CardBody } from "@patternfly/react-core/dist/esm/components/Card/index.js";
-import { Stack, StackItem } from "@patternfly/react-core/dist/esm/layouts/Stack/index.js";
 import { DescriptionList } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
 
 import {
- PageContainerStackItems,
- new_page, block_location, ActionButtons, page_type,
+ StorageCard,
+ new_page, new_card, block_location,
 } from "../pages.jsx";
-import { SCard } from "../utils/card.jsx";
 import { SDesc } from "../utils/desc.jsx";
 import { format_dialog } from "./format-dialog.jsx";
 import { block_name } from "../utils.js";
@@ -38,39 +36,31 @@ import { StorageSize } from "../storage-controls.jsx";
 
 const _ = cockpit.gettext;
 
-export function make_unrecognized_data_page(parent, backing_block, content_block, container) {
- new_page({
- location: [block_location(backing_block)],
- parent,
- container,
- name: block_name(backing_block),
- columns: [
- _("Unrecognized data"),
- null,
- <StorageSize key="s" size={backing_block.Size} />,
- ],
- component: UnrecognizedDataPage,
+export function make_unrecognized_data_page(parent, backing_block, content_block, card) {
+ const unrec_card = new_card({
+ title: _("Unrecognized data"),
+ parent: card,
+ page_block: backing_block,
+ component: UnrecognizedDataCard,
  props: { backing_block, content_block },
  actions: [
  std_lock_action(backing_block, content_block),
  { title: _("Format"), action: () => format_dialog(client, backing_block.path), danger: true },
  ]
  });
+
+ new_page(parent, unrec_card);
 }
 
-export const UnrecognizedDataPage = ({ page, backing_block, content_block }) => {
+export const UnrecognizedDataCard = ({ card, backing_block, content_block }) => {
  return (
- <Stack hasGutter>
- <StackItem>
- <SCard title={page_type(page)} actions={<ActionButtons page={page} />}>
- <CardBody>
- <DescriptionList className="pf-m-horizontal-on-sm">
- <SDesc title={_("Usage")} value={content_block.IdUsage || "-"} />
- <SDesc title={_("Type")} value={content_block.IdType || "-"} />
- </DescriptionList>
- </CardBody>
- </SCard>
- </StackItem>
- <PageContainerStackItems page={page} />
- </Stack>);
+ <StorageCard card={card}>
+ <CardBody>
+ <DescriptionList className="pf-m-horizontal-on-sm">
+ <SDesc title={_("Usage")} value={content_block.IdUsage || "-"} />
+ <SDesc title={_("Type")} value={content_block.IdType || "-"} />
+ </DescriptionList>
+ </CardBody>
+ </StorageCard>
+ );
 };

pkg/storaged/crypto/encryption.jsx

@@ -27,22 +27,22 @@ import { useObject, useEvent } from "hooks";
 import * as python from "python.js";
 import * as timeformat from "timeformat.js";
 
-import { SCard } from "../utils/card.jsx";
 import { SDesc } from "../utils/desc.jsx";
 import { dialog_open, TextInput, PassInput } from "../dialog.jsx";
 import { block_name, encode_filename, decode_filename, parse_options, unparse_options, extract_option, edit_crypto_config } from "../utils.js";
-import { new_container } from "../pages.jsx";
+import { StorageCard, new_card } from "../pages.jsx";
 import luksmeta_monitor_hack_py from "./luksmeta-monitor-hack.py";
 import { is_mounted } from "../filesystem/utils.jsx";
 import { StorageLink } from "../storage-controls.jsx";
 import { CryptoKeyslots } from "./keyslots.jsx";
 
 const _ = cockpit.gettext;
 
-export function make_encryption_container(parent, block) {
- return new_container({
+export function make_encryption_card(parent, block) {
+ return new_card({
+ title: _("Encryption"),
  parent,
- type_format: _("$0 (encrypted)"), // XXX - icon?
+ type_extra: _("encrypted"),
  component: EncryptionContainer,
  props: { block },
  });
@@ -128,7 +128,7 @@ function monitor_mtime(path) {
  return self;
 }
 
-const EncryptionContainer = ({ container, block }) => {
+const EncryptionContainer = ({ card, block }) => {
  const luks_info = useObject(() => monitor_luks(block),
  m => m.stop(),
  [block]);
@@ -220,7 +220,7 @@ const EncryptionContainer = ({ container, block }) => {
  const options = option_parts.join(", ");
 
  return (
- <SCard title={_("Encryption")}>
+ <StorageCard card={card}>
  <CardBody>
  <DescriptionList className="pf-m-horizontal-on-sm ct-wide-labels">
  <SDesc title={_("Encryption type")}>
@@ -240,5 +240,5 @@ const EncryptionContainer = ({ container, block }) => {
  <CryptoKeyslots client={client} block={block}
  slots={luks_info.slots} slot_error={luks_info.slot_error}
  max_slots={luks_info.max_slots} />
- </SCard>);
+ </StorageCard>);
 };