feat(global): display a message when no item available in a list view (#263)

app/components/containers/containers.html

@@ -98,6 +98,9 @@
                 <span ng-if="container.Ports.length == 0" >-</span>
               </td>
             </tr>
+            <tr ng-if="containers.length == 0">
+              <td colspan="8" class="text-center text-muted">No containers available.</td>
+            </tr>
           </tbody>
         </table>
       </div>

app/components/containers/containersController.js

@@ -1,7 +1,6 @@
 angular.module('containers', [])
 .controller('ContainersController', ['$scope', 'Container', 'ContainerHelper', 'Info', 'Settings', 'Messages', 'Config',
 function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config) {
-
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
   $scope.state.displayIP = false;
@@ -9,6 +8,7 @@ function ($scope, Container, ContainerHelper, Info, Settings, Messages, Config)
   $scope.sortReverse = false;
   $scope.state.selectedItemCount = 0;
   $scope.swarm_mode = false;
+  $scope.containers = [];
 
   $scope.order = function (sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;

app/components/images/images.html

@@ -107,6 +107,9 @@
                 <td>{{ image.VirtualSize|humansize }}</td>
                 <td>{{ image.Created|getisodatefromtimestamp }}</td>
               </tr>
+              <tr ng-if="images.length == 0">
+                <td colspan="5" class="text-center text-muted">No images available.</td>
+              </tr>
             </tbody>
           </table>
         </div>

app/components/images/imagesController.js

@@ -5,6 +5,7 @@ function ($scope, $state, Config, Image, Messages) {
   $scope.sortType = 'RepoTags';
   $scope.sortReverse = true;
   $scope.state.selectedItemCount = 0;
+  $scope.images = [];
 
   $scope.config = {
     Image: '',

app/components/networks/networks.html

@@ -131,6 +131,9 @@
                 <td>{{ network.IPAM.Config[0].Subnet ? network.IPAM.Config[0].Subnet : '-' }}</td>
                 <td>{{ network.IPAM.Config[0].Gateway ? network.IPAM.Config[0].Gateway : '-' }}</td>
               </tr>
+              <tr ng-if="networks.length == 0">
+                <td colspan="8" class="text-center text-muted">No networks available.</td>
+              </tr>
             </tbody>
           </table>
         </div>

app/components/networks/networksController.js

@@ -6,6 +6,7 @@ function ($scope, $state, Network, Config, Messages) {
   $scope.state.advancedSettings = false;
   $scope.sortType = 'Name';
   $scope.sortReverse = false;
+  $scope.networks = [];
 
   $scope.config = {
     Name: ''

app/components/templates/templates.html

@@ -82,6 +82,9 @@
             <div class="title">{{ tpl.title }}</div>
             <div class="description">{{ tpl.description }}</div>
           </div>
+          <div ng-if="templates.length == 0" class="text-center text-muted">
+            No templates available.
+          </div>
         </div>
       </rd-widget-body>
     </rd-widget>

app/components/templates/templatesController.js

@@ -7,6 +7,7 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper,
     network: "",
     name: ""
   };
+  $scope.templates = [];
 
   var selectedItem = -1;
 

app/components/volumes/volumes.html

@@ -59,6 +59,9 @@
               <td>{{ volume.Driver }}</td>
               <td>{{ volume.Mountpoint }}</td>
             </tr>
+            <tr ng-if="volumes.length == 0">
+              <td colspan="4" class="text-center text-muted">No volumes available.</td>
+            </tr>
           </tbody>
         </table>
       </div>

app/components/volumes/volumesController.js

@@ -5,6 +5,7 @@ function ($scope, $state, Volume, Messages) {
   $scope.state.selectedItemCount = 0;
   $scope.sortType = 'Name';
   $scope.sortReverse = true;
+  $scope.volumes = [];
 
   $scope.config = {
     Name: ''

assets/css/app.css

@@ -238,12 +238,12 @@ input[type="radio"] {
 }
 
 .container-template--selected {
-  background-color: #f6f6f6;
+  background-color: #ececec;
   color: #2d3e63;
 }
 
 .container-template:hover {
-  background-color: #f6f6f6;
+  background-color: #ececec;
   color: #2d3e63;
 }