storage: Unified overview panel

pkg/storaged/block-details.jsx

@@ -20,24 +20,107 @@
 import cockpit from "cockpit";
 import React from "react";
 
-import { Card, CardBody, CardTitle } from "@patternfly/react-core/dist/esm/components/Card/index.js";
+import { Card, CardHeader, CardBody, CardTitle } from "@patternfly/react-core/dist/esm/components/Card/index.js";
 import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
+import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
+import { fmt_to_fragments } from "utils.jsx";
 
 import * as utils from "./utils.js";
 import { StdDetailsLayout } from "./details.jsx";
-import * as Content from "./content-views.jsx";
+import { block_description, create_tabs } from "./content-views.jsx";
+import { StorageButton } from "./storage-controls.jsx";
 
 const _ = cockpit.gettext;
 
+export function block_nav_parents(client, block) {
+    // XXX - terrible. The client should build a proper hierachical model.
+
+    const drive = client.drives[block.Drive];
+    const drive_block = drive && client.drives_block[drive.path];
+    if (drive && drive_block) {
+        return [
+            {
+                location: ["drive", utils.block_name(drive_block).replace(/^\/dev\//, "")],
+                title: utils.drive_name(drive)
+            }
+        ];
+    }
+
+    const mdraid = client.mdraids[block.MDRaid];
+    if (mdraid) {
+        return [{ location: ["md", mdraid.UUID], title: "XXX - mdraid" }];
+    }
+
+    const lvol = client.blocks_lvm2[block.path] && client.lvols[client.blocks_lvm2[block.path].LogicalVolume];
+    const pool = lvol && client.lvols[lvol.Pool];
+    const vgroup = lvol && client.vgroups[lvol.VolumeGroup];
+
+    if (lvol && vgroup && pool) {
+        return [{ location: ["vg", vgroup.Name, pool.Name], title: pool.Name },
+            { location: ["vg", vgroup.Name], title: vgroup.Name }
+        ];
+    }
+
+    if (lvol && vgroup) {
+        return [{ location: ["vg", vgroup.Name], title: vgroup.Name }];
+    }
+
+    const stratis_fsys = client.blocks_stratis_fsys[block.path];
+    const stratis_pool = stratis_fsys && client.stratis_pools[stratis_fsys.Pool];
+    if (stratis_fsys && stratis_pool) {
+        return [{ location: ["pool", stratis_pool.Uuid], title: stratis_pool.Name }];
+    }
+
+    return [];
+}
+
 export class BlockDetails extends React.Component {
     render() {
+        const client = this.props.client;
         const block = this.props.block;
+        const tabs = create_tabs(this.props.client, block, {});
+
+        const actions = tabs.actions;
+        tabs.menu_actions.forEach(a => {
+            if (!a.only_narrow)
+                actions.push(<StorageButton onClick={a.func}>{a.title}</StorageButton>);
+        });
+        tabs.menu_danger_actions.forEach(a => {
+            if (!a.only_narrow)
+                actions.push(<StorageButton kind="danger" onClick={a.func}>{a.title}</StorageButton>);
+        });
+
+        const cparts = utils.get_block_link_parts(client, block.path);
+
+        function is_container(r) {
+            return r.name == _("Logical volume") || r.name == _("Partition");
+        }
+
+        const container_renderers = tabs.renderers.filter(is_container);
+        const content_renderers = tabs.renderers.filter(r => !is_container(r));
 
         const header = (
             <Card>
-                <CardTitle component="h2">{_("Block")}</CardTitle>
+                <CardHeader actions={{ actions }}>
+                    <CardTitle component="h2">
+                        {block_description(client, block, {}).type}
+                    </CardTitle>
+                </CardHeader>
                 <CardBody>
                     <DescriptionList className="pf-m-horizontal-on-sm">
+                        <DescriptionListGroup>
+                            <DescriptionListTerm>{_("Stored on")}</DescriptionListTerm>
+                            <DescriptionListDescription>
+                                {fmt_to_fragments(
+                                    cparts.format,
+                                    <Button variant="link"
+                                            isInline
+                                            role="link"
+                                            onClick={() => cockpit.location.go(cparts.location)}>
+                                        {cparts.link}
+                                    </Button>)}
+                            </DescriptionListDescription>
+                        </DescriptionListGroup>
                         <DescriptionListGroup>
                             <DescriptionListTerm>{_("storage", "Capacity")}</DescriptionListTerm>
                             <DescriptionListDescription>{ utils.fmt_size_long(block.Size) }</DescriptionListDescription>
@@ -47,11 +130,24 @@ export class BlockDetails extends React.Component {
                             <DescriptionListDescription>{ utils.block_name(block) }</DescriptionListDescription>
                         </DescriptionListGroup>
                     </DescriptionList>
+                    { content_renderers.map(t => <React.Fragment key={t.name}><br /><t.renderer {...t.data} /></React.Fragment>) }
                 </CardBody>
             </Card>
         );
 
-        const content = <Content.Block client={this.props.client} block={block} />;
+        const content = container_renderers.map(t => {
+            return (
+                <Card key={t.name}>
+                    <CardHeader>
+                        <CardTitle component="h2">
+                            {t.name}
+                        </CardTitle>
+                    </CardHeader>
+                    <CardBody>
+                        <t.renderer {...t.data} />
+                    </CardBody>
+                </Card>);
+        });
 
         return <StdDetailsLayout client={this.props.client} header={header} content={content} />;
     }

pkg/storaged/client.js

@@ -331,6 +331,93 @@ function update_indices() {
         client.lvols_pool_members[path].sort(function (a, b) { return a.Name.localeCompare(b.Name) });
     }
 
+    function summarize_stripe(lv_size, segments) {
+        const pvs = { };
+        let total_size = 0;
+        for (const [, size, pv] of segments) {
+            if (!pvs[pv])
+                pvs[pv] = 0;
+            pvs[pv] += size;
+            total_size += size;
+        }
+        if (total_size < lv_size)
+            pvs["/"] = lv_size - total_size;
+        return pvs;
+    }
+
+    client.lvols_stripe_summary = { };
+    client.lvols_status = { };
+    for (path in client.lvols) {
+        const struct = client.lvols[path].Structure;
+        const lvol = client.lvols[path];
+
+        let summary;
+        let status = "";
+        if (lvol.Layout != "thin" && struct && struct.segments) {
+            summary = summarize_stripe(struct.size.v, struct.segments.v);
+            if (summary["/"])
+                status = "partial";
+        } else if (struct && struct.data && struct.metadata &&
+                   (struct.data.v.length == struct.metadata.v.length || struct.metadata.v.length == 0)) {
+            summary = [];
+            const n_total = struct.data.v.length;
+            let n_missing = 0;
+            for (let i = 0; i < n_total; i++) {
+                const data_lv = struct.data.v[i];
+                const metadata_lv = struct.metadata.v[i] || { size: { v: 0 }, segments: { v: [] } };
+
+                if (!data_lv.segments || (metadata_lv && !metadata_lv.segments)) {
+                    summary = undefined;
+                    break;
+                }
+
+                const s = summarize_stripe(data_lv.size.v + metadata_lv.size.v,
+                                           data_lv.segments.v.concat(metadata_lv.segments.v));
+                if (s["/"])
+                    n_missing += 1;
+
+                summary.push(s);
+            }
+            if (n_missing > 0) {
+                status = "partial";
+                if (lvol.Layout == "raid1") {
+                    if (n_total - n_missing >= 1)
+                        status = "degraded";
+                }
+                if (lvol.Layout == "raid10") {
+                    // This is correct for two-way mirroring, which is
+                    // the only setup supported by lvm2.
+                    if (n_missing > n_total / 2) {
+                        // More than half of the PVs are gone -> at
+                        // least one mirror has definitely lost both
+                        // halves.
+                        status = "partial";
+                    } else if (n_missing > 1) {
+                        // Two or more PVs are lost -> one mirror
+                        // might have lost both halves
+                        status = "degraded-maybe-partial";
+                    } else {
+                        // Only one PV is missing -> no mirror has
+                        // lost both halves.
+                        status = "degraded";
+                    }
+                }
+                if (lvol.Layout == "raid4" || lvol.Layout == "raid5") {
+                    if (n_missing <= 1)
+                        status = "degraded";
+                }
+                if (lvol.Layout == "raid6") {
+                    if (n_missing <= 2)
+                        status = "degraded";
+                }
+            }
+        }
+        if (summary) {
+            client.lvols_stripe_summary[path] = summary;
+            client.lvols_status[path] = status;
+        }
+    }
+
     client.stratis_poolnames_pool = { };
     for (path in client.stratis_pools) {
         pool = client.stratis_pools[path];
@@ -457,6 +544,26 @@ function update_indices() {
         client.blocks_partitions[path].sort(function (a, b) { return a.Offset - b.Offset });
     }
 
+    client.iscsi_sessions_drives = { };
+    client.drives_iscsi_session = { };
+    for (path in client.drives) {
+        const block = client.drives_block[path];
+        if (!block)
+            continue;
+        for (const session_path in client.iscsi_sessions) {
+            const session = client.iscsi_sessions[session_path];
+            for (i = 0; i < block.Symlinks.length; i++) {
+                console.log("??", block.Symlinks[i], session.data.target_name);
+                if (utils.decode_filename(block.Symlinks[i]).includes(session.data.target_name)) {
+                    client.drives_iscsi_session[path] = session;
+                    if (!client.iscsi_sessions_drives[session_path])
+                        client.iscsi_sessions_drives[session_path] = [];
+                    client.iscsi_sessions_drives[session_path].push(client.drives[path]);
+                }
+            }
+        }
+    }
+
     client.path_jobs = { };
     function enter_job(job) {
         if (!job.Objects || !job.Objects.length)