Support listing volumes

Author: jelly

src/app.jsx

@@ -22,6 +22,7 @@ import { superuser } from "superuser";
 import ContainerHeader from './ContainerHeader.jsx';
 import Containers from './Containers.jsx';
 import Images from './Images.jsx';
+import Volumes from './Volumes.jsx';
 import * as client from './client.js';
 import detect_quadlets from './detect-quadlets.py';
 import rest from './rest.js';
@@ -46,7 +47,7 @@ class Application extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            // currently connected services per user: { con, uid, name, dbus: { client, subscription }, imagesLoaded, containersLoaded, podsLoaded, quadletsLoaded }
+            // currently connected services per user: { con, uid, name, dbus: { client, subscription }, imagesLoaded, containersLoaded, podsLoaded, quadletsLoaded, volumesLoaded }
             // start with dummy state to wait for initialization
             users: [{ con: null, uid: 0, name: _("system"), dbus: null }, { con: null, uid: null, name: _("user"), dbus: null }],
             images: null,
@@ -60,6 +61,7 @@ class Application extends React.Component {
             quadletContainers: {},
             // { "$uid-$name-pod.service": { source_path, name } }
             quadletPods: {},
+            volumes: null,
             textFilter: "",
             ownerFilter: "all",
             dropDownValue: 'Everything',
@@ -196,6 +198,30 @@ class Application extends React.Component {
                 .catch(e => console.warn("initContainers uid", con.uid, "getContainers failed:", e.toString()));
     }
 
+    initVolumes(con) {
+        return client.getVolumes(con)
+                .then(volumesList => {
+                    console.log(volumesList);
+                    this.setState(prevState => {
+                        const copyVolumes = {};
+                        Object.entries(prevState.volumes || {}).forEach(([id, volume]) => {
+                            if (volume.uid !== con.uid)
+                                copyVolumes[id] = volume;
+                        });
+
+                        for (const volume of volumesList || []) {
+                            volume.uid = con.uid;
+                            volume.key = makeKey(con.uid, volume.Name);
+                            copyVolumes[volume.key] = volume;
+                        }
+
+                        const users = prevState.users.map(u => u.uid === con.uid ? { ...u, volumesLoaded: true } : u);
+                        return { volumes: copyVolumes, users };
+                    });
+                })
+                .catch(ex => console.warn("Failed to fetch volumes for uid", con.uid, ":", JSON.stringify(ex)));
+    }
+
     updateImages(con) {
         client.getImages(con)
                 .then(reply => {
@@ -418,6 +444,24 @@ class Application extends React.Component {
         }
     }
 
+    handleVolumeEvent(event, con) {
+        console.log(event, con);
+        switch (event.Action) {
+        case 'create':
+            this.initVolumes(con);
+            break;
+        case 'remove':
+            this.setState(prevState => {
+                const volumes = { ...prevState.volumes };
+                delete volumes[makeKey(con.uid, event.Actor.Attributes.name)];
+                return { volumes };
+            });
+            break;
+        default:
+            console.warn('Unhandled event type ', event.Type, event.Action);
+        }
+    }
+
     handleEvent(event, con) {
         switch (event.Type) {
         case 'container':
@@ -429,6 +473,9 @@ class Application extends React.Component {
         case 'pod':
             this.handlePodEvent(event, con);
             break;
+        case 'volume':
+            this.handleVolumeEvent(event, con);
+            break;
         default:
             console.warn('Unhandled event type ', event.Type);
         }
@@ -638,7 +685,7 @@ class Application extends React.Component {
             const reply = await client.getInfo(con);
             this.setState(prevState => {
                 const users = prevState.users.filter(u => u.uid !== uid);
-                users.push({ con, uid, name: username, containersLoaded: false, podsLoaded: false, imagesLoaded: false, quadletsLoaded: false });
+                users.push({ con, uid, name: username, containersLoaded: false, podsLoaded: false, imagesLoaded: false, quadletsLoaded: false, volumesLoaded: false });
                 // keep a nice sort order for dialogs
                 users.sort(compareUser);
                 debug("init uid", uid, "username", username, "new users:", users);
@@ -660,6 +707,7 @@ class Application extends React.Component {
         this.updateImages(con);
         this.initContainers(con);
         this.initQuadlets(con);
+        this.initVolumes(con);
         this.subscribeDaemonReload(con);
         this.updatePods(con);
 
@@ -878,6 +926,7 @@ class Application extends React.Component {
         const loadingContainers = this.state.users.find(u => u.con && !u.containersLoaded);
         const loadingPods = this.state.users.find(u => u.con && !u.podsLoaded);
         const loadingQuadlets = this.state.users.find(u => u.con && !u.quadletsLoaded);
+        const loadingVolumes = this.state.users.find(u => u.con && !u.volumesLoaded);
 
         const imageList = (
             <Images
@@ -912,6 +961,16 @@ class Application extends React.Component {
             />
         );
 
+        const volumeList = (
+            <Volumes
+                key="volumeList"
+                users={this.state.users}
+                textFilter={this.state.textFilter}
+                ownerFilter={this.state.ownerFilter}
+                volumes={loadingVolumes ? null : this.state.volumes}
+            />
+        );
+
         const notificationList = (
             <AlertGroup isToast>
                 {this.state.notifications.map((notification, index) => {
@@ -953,6 +1012,7 @@ class Application extends React.Component {
                         <PageSection hasBodyWrapper={false} className='ct-pagesection-mobile'>
                             <Stack hasGutter>
                                 {imageList}
+                                {volumeList}
                                 {containerList}
                             </Stack>
                         </PageSection>

src/client.ts

@@ -161,3 +161,5 @@ export const imageHistory = (con: Connection, id: string) => podmanJson(con, `li
 export const imageExists = (con: Connection, id: string) => podmanCall(con, "libpod/images/" + id + "/exists", "GET", {});
 
 export const containerExists = (con: Connection, id: string) => podmanCall(con, "libpod/containers/" + id + "/exists", "GET", {});
+
+export const getVolumes = (con: Connection) => podmanJson(con, "libpod/volumes/json", "GET", {});

src/podman.scss

@@ -5,11 +5,11 @@
 // For pf-v6-line-clamp
 @use "@patternfly/patternfly/sass-utilities/mixins.scss";
 
-#app .pf-v6-c-card.containers-containers, #app .pf-v6-c-card.containers-images {
+#app .pf-v6-c-card.containers-containers, #app .pf-v6-c-card.containers-images, #app .pf-v6-c-card.containers-volumes {
     @extend .ct-card;
 }
 
-#containers-images, #containers-containers {
+#containers-images, #containers-containers, #containers-volumes {
     // Decrease padding for the image/container toggle button list
     .pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle {
         padding-inline-start: 0;

test/check-application

@@ -3728,6 +3728,21 @@ ContainerName=guitarq1
             b.wait_in_text(f"{sel} + tr", "sleep infinity")
             b.wait_not_in_text(f"{sel} + tr", "systemd service")
 
+    def _testVolumes(self, *, system: bool = False):
+        volume_name = "nextcloud-data"
+
+        self.execute(f"podman volume create {volume_name}", system=system)
+        self.execute(f"podman run -d --name nextcloud --stop-timeout 0 --volume {volume_name}:/data {IMG_ALPINE} sh",
+                     system=system)
+
+        self.login()
+
+    def testVolumesUser(self):
+        self._testVolumes(system=False)
+
+    def testVolumesSystem(self):
+        self._testVolumes(system=True)
+
 
 if __name__ == '__main__':
     testlib.test_main()