Volumes support

po/cs.po

@@ -995,6 +995,18 @@ msgstr "nepoužito"
 msgid "user:"
 msgstr "uživatel:"
 
+#: src/Volumes.jsx:128
+msgid "Volume"
+msgstr "Svazek"
+
+#: src/Volumes.jsx:210
+msgid "Hide volumes"
+msgstr "Skrýt svazky"
+
+#: src/Volumes.jsx:210
+msgid "Show volumes"
+msgstr "Zobrazit svazky"
+
 #~ msgid "Default with single selectable"
 #~ msgstr "Výchozí s jedním k výběru"
 

src/ContainerDetails.jsx

@@ -33,15 +33,56 @@ const render_container_published_ports = (ports) => {
     return <List isPlain>{result}</List>;
 };
 
+const render_container_mounts = (mounts) => {
+    if (!mounts)
+        return null;
+
+    const result = mounts.map(mount => {
+        const name = mount.Name;
+        const type = mount.Type;
+        const driver = mount.Driver;
+        const source = mount.Source;
+        const destination = mount.Destination;
+        return (
+            <ListItem key={ name }>
+                { name } &rarr; { destination } <br />
+                <small> { driver } { type }: <br />
+                    { source }</small>
+            </ListItem>
+        );
+    });
+
+    return <List isPlain>{result}</List>;
+};
+
+const render_container_env = (env) => {
+    if (!env)
+        return null;
+
+    const result = env.map(value => {
+        const keyvalue = value.split("=");
+        return (
+            <ListItem key={ keyvalue[0] }>
+                { keyvalue[0] } = <small>{ keyvalue[1] }</small>
+            </ListItem>
+        );
+    });
+
+    return <List isPlain>{result}</List>;
+};
+
 const ContainerDetails = ({ container, containerDetail }) => {
     const ports = render_container_published_ports(container.Ports);
+    const mounts = (containerDetail && containerDetail.Mounts.length !== 0) ? render_container_mounts(containerDetail.Mounts) : null;
+    const env = (containerDetail && containerDetail.Config) ? render_container_env(containerDetail.Config.Env) : null;
     const networkOptions = (
         containerDetail &&
         [
             containerDetail.NetworkSettings.IPAddress,
             containerDetail.NetworkSettings.Gateway,
             containerDetail.NetworkSettings.MacAddress,
-            ports
+            ports,
+            mounts
         ].some(itm => !!itm)
     );
 
@@ -64,7 +105,7 @@ const ContainerDetails = ({ container, containerDetail }) => {
                 </DescriptionList>
             </FlexItem>
             <FlexItem>
-                {networkOptions && <DescriptionList columnModifier={{ default: '2Col' }} className='container-details-networking'>
+                {networkOptions && <DescriptionList className='container-details-networking'>
                     {ports && <DescriptionListGroup>
                         <DescriptionListTerm>{_("Ports")}</DescriptionListTerm>
                         <DescriptionListDescription>{ports}</DescriptionListDescription>
@@ -83,6 +124,22 @@ const ContainerDetails = ({ container, containerDetail }) => {
                     </DescriptionListGroup>}
                 </DescriptionList>}
             </FlexItem>
+            <FlexItem>
+                <DescriptionList className='container-details-mounts'>
+                    {mounts && <DescriptionListGroup>
+                        <DescriptionListTerm>{_("Mounts")}</DescriptionListTerm>
+                        <DescriptionListDescription>{mounts}</DescriptionListDescription>
+                    </DescriptionListGroup>}
+                </DescriptionList>
+            </FlexItem>
+            <FlexItem>
+                <DescriptionList className='container-details-env'>
+                    {env && <DescriptionListGroup>
+                        <DescriptionListTerm>{_("ENV")}</DescriptionListTerm>
+                        <DescriptionListDescription>{env}</DescriptionListDescription>
+                    </DescriptionListGroup>}
+                </DescriptionList>
+            </FlexItem>
             <FlexItem>
                 <DescriptionList className='container-details-state'>
                     <DescriptionListGroup>

src/Images.jsx

@@ -267,7 +267,7 @@ class Images extends React.Component {
                         <FlexItem grow={{ default: 'grow' }}>
                             <Flex>
                                 <Text className="images-title" component={TextVariants.h3}>{_("Images")}</Text>
-                                <Flex style={{ "row-gap": "var(--pf-global--spacer--xs)" }}>{imageTitleStats}</Flex>
+                                <Flex style={{ rowGap: "var(--pf-global--spacer--xs)" }}>{imageTitleStats}</Flex>
                             </Flex>
                         </FlexItem>
                         <FlexItem>

src/PruneUnusedVolumesModal.jsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Button, Checkbox, Flex, List, ListItem, Modal, } from '@patternfly/react-core';
+import cockpit from 'cockpit';
+
+import * as client from './client.js';
+
+import "@patternfly/patternfly/utilities/Spacing/spacing.css";
+
+const _ = cockpit.gettext;
+
+function VolumeOptions({ volumes, checked, isSystem, handleChange, name, showCheckbox }) {
+    const [isExpanded, onToggle] = useState(false);
+    let shownVolumes = volumes;
+    if (!isExpanded) {
+        shownVolumes = shownVolumes.slice(0, 5);
+    }
+
+    if (shownVolumes.length === 0) {
+        return null;
+    }
+    const listNameId = "list-" + name;
+
+    return (
+        <Flex flex={{ default: 'column' }}>
+            {showCheckbox &&
+                <Checkbox
+                  label={isSystem ? _("Delete unused system volumes:") : _("Delete unused user volumes:")}
+                  isChecked={checked}
+                  id={name}
+                  name={name}
+                  onChange={handleChange}
+                  aria-owns={listNameId}
+                />
+            }
+            <List id={listNameId}>
+                {shownVolumes.map((volume, index) =>
+                    <ListItem className="pf-u-ml-md" key={index}>
+                        {volume.Name}
+                    </ListItem>
+                )}
+                {!isExpanded && volumes.length > 5 &&
+                <Button onClick={onToggle} variant="link" isInline>
+                    {_("Show more")}
+                </Button>
+                }
+            </List>
+        </Flex>
+    );
+}
+
+class PruneUnusedVolumesModal extends React.Component {
+    constructor(props) {
+        super(props);
+        const isSystem = this.props.userServiceAvailable && this.props.systemServiceAvailable;
+        this.state = {
+            deleteUserVolumes: true,
+            deleteSystemVolumes: isSystem,
+            isPruning: false,
+        };
+    }
+
+    handlePruneUnusedVolumes = () => {
+        this.setState({ isPruning: true });
+
+        const actions = [];
+        if (this.state.deleteUserVolumes) {
+            actions.push(client.pruneUnusedVolumes(false));
+        }
+        if (this.state.deleteSystemVolumes) {
+            actions.push(client.pruneUnusedVolumes(true));
+        }
+        Promise.all(actions).then(this.props.close)
+                .catch(ex => {
+                    const error = _("Failed to prune unused volumes");
+                    this.props.onAddNotification({ type: 'danger', error, errorDetail: ex.message });
+                    this.props.close();
+                });
+    }
+
+    handleChange = (checked, event) => {
+        this.setState({ [event.target.name]: checked });
+    }
+
+    render() {
+        const isSystem = this.props.userServiceAvailable && this.props.systemServiceAvailable;
+        const userVolumes = this.props.unusedVolumes.filter(volume => !volume.isSystem);
+        const systemVolumes = this.props.unusedVolumes.filter(volume => volume.isSystem);
+        const showCheckboxes = userVolumes.length > 0 && systemVolumes.length > 0;
+        return (
+            <Modal isOpen
+                   onClose={this.props.close}
+                   position="top" variant="medium"
+                   title={cockpit.format(_("Prune unused volumes"))}
+                   footer={<>
+                       <Button id="btn-img-delete" variant="danger"
+                               spinnerAriaValueText={this.state.isPruning ? _("Pruning volumes") : undefined}
+                               isLoading={this.state.isPruning}
+                               isDisabled={!this.state.deleteUserVolumes && !this.state.deleteSystemVolumes}
+                               onClick={this.handlePruneUnusedVolumes}>
+                           {this.state.isPruning ? _("Pruning volumes") : _("Prune")}
+                       </Button>
+                       <Button variant="link" onClick={() => this.props.close()}>{_("Cancel")}</Button>
+                   </>}
+            >
+                <Flex flex={{ default: 'column' }}>
+                    {isSystem && <VolumeOptions
+                  volumes={systemVolumes}
+                  name="deleteSystemVolumes"
+                  checked={this.state.deleteSystemVolumes}
+                  handleChange={this.handleChange}
+                  showCheckbox={showCheckboxes}
+                  isSystem
+                    />
+                    }
+                    <VolumeOptions
+                  volumes={userVolumes}
+                  name="deleteUserVolumes"
+                  checked={this.state.deleteUserVolumes}
+                  handleChange={this.handleChange}
+                  showCheckbox={showCheckboxes}
+                  isSystem={false}
+                    />
+                </Flex>
+            </Modal>
+        );
+    }
+}
+
+export default PruneUnusedVolumesModal;