docker: Fix regression that removed the "waiting" spinner

We used to show a spinner when we were performing an action on an image or container. Lets show this properly again. Closes #5686
cockpit-project · Jan 9, 2017 · d0fe711 · d0fe711
1 parent 807ba73
commit d0fe711
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/pkg/docker/containers-view.jsx b/pkg/docker/containers-view.jsx
@@ -209,13 +209,20 @@ var ContainerList = React.createClass({
         var rows = filtered.map(function (container) {
             var isRunning = !!container.State.Running;
 
+            var state;
+            if (this.props.client.waiting[container.Id]) {
+                state = { element: <div className="spinner"></div>, tight: true }
+            } else {
+                state = util.render_container_status(container.State)
+            }
+
             var columns = [
                 { name: container.Name.replace(/^\//, ''), header: true },
                 docker.truncate_id(container.Image),
                 util.render_container_cmdline(container),
                 util.format_cpu_usage(container.CpuUsage),
                 util.format_memory_and_limit(container.MemoryUsage, container.MemoryLimit),
-                util.render_container_status(container.State)
+                state,
             ];
 
             var startStopActions = [];
@@ -509,16 +516,23 @@ var ImageList = React.createClass({
                 );
         }
 
+        var element;
+        if (this.props.client.waiting[image.Id]) {
+            element = <div className="spinner"></div>
+        } else {
+            element = <button className="btn btn-default btn-control-ct fa fa-play"
+                    onClick={ this.showRunImageDialog.bind(this) }
+                    data-image={image.Id} />
+        }
+
         var columns = [
             { name: image.RepoTags[0], header: true },
             vulnerabilityColumn,
             moment.unix(image.Created).fromNow(),
             cockpit.format_bytes(image.VirtualSize),
             {
-                element: <button className="btn btn-default btn-control-ct fa fa-play"
-                    onClick={ this.showRunImageDialog.bind(this) }
-                    data-image={image.Id} />,
-                    tight: true
+                element: element,
+                tight: true
             }
         ];
 

diff --git a/pkg/docker/docker.css b/pkg/docker/docker.css
@@ -31,6 +31,10 @@
     width: 5px;
 }
 
+div.spinner {
+    display: inline-block;
+}
+
 /*
  * For showing and filtering disabled unimportant rows in a table
  *

diff --git a/pkg/docker/image.js b/pkg/docker/image.js
@@ -105,7 +105,7 @@
             }), document.querySelector('#image-details .content'));
 
             var waiting = !!(this.client.waiting[this.image_id]);
-            $('#image-details-buttons div.waiting').toggle(info && waiting);
+            $('#image-details-buttons div.spinner').toggle(info && waiting);
             $('#image-details-buttons button').toggle(info && !waiting);
 
             if (info) {