Show toolbox & distrobox containers different in containers listing

fixes #865
cockpit-project · Sep 27, 2023 · f115398 · f115398
1 parent 0071d6c
commit f115398
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/src/Containers.jsx b/src/Containers.jsx
@@ -375,6 +375,8 @@ class Containers extends React.Component {
     renderRow(containersStats, container, localImages) {
         const containerStats = containersStats[container.Id + container.isSystem.toString()];
         const image = container.ImageName;
+        const isToolboxContainer = container.Config?.Labels?.["com.github.containers.toolbox"] === "true";
+        const isDistroboxContainer = container.Config?.Labels?.manager === "distrobox";
         let localized_health = null;
 
         // this needs to get along with stub containers from image run dialog, where most properties don't exist yet
@@ -397,7 +399,11 @@ class Containers extends React.Component {
         }
         const info_block = (
             <div className="container-block">
-                <span className="container-name">{container.Name}</span>
+                <Flex alignItems={{ default: 'alignItemsCenter' }}>
+                    <span className="container-name">{container.Name}</span>
+                    {isToolboxContainer && <Badge className='ct-badge-toolbox'>toolbox</Badge>}
+                    {isDistroboxContainer && <Badge className='ct-badge-distrobox'>distrobox</Badge>}
+                </Flex>
                 <small>{image}</small>
                 <small>{utils.quote_cmdline(container.Config?.Cmd)}</small>
             </div>

diff --git a/src/podman.scss b/src/podman.scss
@@ -69,6 +69,26 @@
   color: white;
 }
 
+.ct-badge-toolbox {
+    background-color: var(--pf-v5-global--palette--purple-100);
+    color: var(--pf-v5-global--palette--purple-600);
+
+    .pf-v5-theme-dark & {
+        background-color: var(--pf-v5-global--palette--purple-500);
+        color: white;
+    }
+}
+
+.ct-badge-distrobox {
+    background-color: var(--pf-v5-global--palette--gold-100);
+    color: var(--pf-v5-global--palette--gold-600);
+
+    .pf-v5-theme-dark & {
+        background-color: var(--pf-v5-global--palette--gold-500);
+        color: white;
+    }
+}
+
 .green {
     color: var(--pf-v5-global--success-color--100);
 }

diff --git a/test/check-application b/test/check-application
@@ -2607,6 +2607,27 @@ class TestApplication(testlib.MachineCase):
         for i in range(31):
             self.execute(True, f"podman rm -f container{i}")
 
+    def testSpecialContainers(self):
+        m = self.machine
+        b = self.browser
+
+        toolbox_label = "com.github.containers.toolbox=true"
+        distrobox_label = "manager=distrobox"
+
+        container_1_id = m.execute(f"podman run -d --name container_1 -l {toolbox_label} {IMG_BUSYBOX}").strip()
+        container_2_id = m.execute(f"podman run -d --name container_2 -l {distrobox_label} {IMG_BUSYBOX}").strip()
+
+        self.login()
+
+        self.waitContainerRow('container_1')
+        self.waitContainerRow('container_2')
+
+        container_1_sel = f"#containers-containers tbody tr[data-row-id=\"{container_1_id}{'true'}\"]"
+        container_2_sel = f"#containers-containers tbody tr[data-row-id=\"{container_2_id}{'true'}\"]"
+
+        b.wait_visible(container_1_sel + " .ct-badge-toolbox:contains('toolbox')")
+        b.wait_visible(container_2_sel + " .ct-badge-distrobox:contains('distrobox')")
+
     def testCreatePodSystem(self):
         self._createPod(True)