feat(services): display clearer information about services

app/components/containers/containers.html

@@ -105,7 +105,7 @@
               <td><span class="label label-{{ container.Status|containerstatusbadge }}">{{ container.Status }}</span></td>
               <td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername}}</a></td>
               <td ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
-              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
+              <td><a ui-sref="image({id: container.Image})">{{ container.Image | hideshasum }}</a></td>
               <td ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
               <td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">{{ container.hostIP }}</td>
               <td>

app/components/services/services.html

@@ -70,11 +70,13 @@
               <tr dir-paginate="service in (state.filteredServices = ( services | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
                 <td><input type="checkbox" ng-model="service.Checked" ng-change="selectItem(service)"/></td>
                 <td><a ui-sref="service({id: service.Id})">{{ service.Name }}</a></td>
-                <td>{{ service.Image }}</td>
+                <td>{{ service.Image | hideshasum }}</td>
                 <td>
                   {{ service.Mode }}
+                  <code data-toggle="tooltip" title="Replicas">{{ service.Running }}</code>
+                  /
+                  <code data-toggle="tooltip" title="Replicas">{{ service.Replicas }}</code>
                   <span ng-if="service.Mode === 'replicated' && !service.Scale">
-                    <code data-toggle="tooltip" title="Replicas">{{ service.Replicas }}</code>
                     <a class="interactive" ng-click="service.Scale = true; service.ReplicaCount = service.Replicas;"><i class="fa fa-arrows-v" aria-hidden="true"></i> Scale</a>
                   </span>
                   <span ng-if="service.Mode === 'replicated' && service.Scale">

app/components/services/servicesController.js

@@ -1,6 +1,6 @@
 angular.module('services', [])
-.controller('ServicesController', ['$q', '$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Messages', 'Pagination', 'Authentication', 'UserService', 'ModalService', 'ResourceControlService',
+.controller('ServicesController', ['$q', '$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Messages', 'Pagination', 'Task', 'Node', 'Authentication', 'UserService', 'ModalService', 'ResourceControlService',
-function ($q, $scope, $stateParams, $state, Service, ServiceHelper, Messages, Pagination, Authentication, UserService, ModalService, ResourceControlService) {
+function ($q, $scope, $stateParams, $state, Service, ServiceHelper, Messages, Pagination, Task, Node, Authentication, UserService, ModalService, ResourceControlService) {
   $scope.state = {};
   $scope.state.selectedItemCount = 0;
   $scope.state.pagination_count = Pagination.getPaginationCount('services');
@@ -127,30 +127,41 @@ function ($q, $scope, $stateParams, $state, Service, ServiceHelper, Messages, Pa
 
   function fetchServices() {
     $('#loadServicesSpinner').show();
+
     var userDetails = Authentication.getUserDetails();
     $scope.user = userDetails;
 
-    Service.query({}, function (d) {
+    $q.all({
-      $scope.services = d.map(function (service) {
+      services: Service.query({}).$promise,
-        return new ServiceViewModel(service);
+      tasks: Task.query({filters: {'desired-state': ['running']}}).$promise,
+      nodes: Node.query({}).$promise,
+    })
+    .then(function success(data) {
+      $scope.services = data.services.map(function (service) {
+        var serviceTasks = data.tasks.filter(function (task) {
+          return task.ServiceID === service.ID;
+        });
+        var taskNodes = data.nodes.filter(function (node) {
+          return node.Spec.Availability === 'active' && node.Status.State === 'ready';
+        });
+        return new ServiceViewModel(service, serviceTasks, taskNodes);
       });
       if (userDetails.role === 1) {
         UserService.users()
         .then(function success(data) {
           mapUsersToServices(data);
         })
-        .catch(function error(err) {
-          Messages.error("Failure", err, "Unable to retrieve users");
-        })
         .finally(function final() {
           $('#loadServicesSpinner').hide();
         });
       }
-      $('#loadServicesSpinner').hide();
+    })
-    }, function(e) {
+    .catch(function error(err) {
-      $('#loadServicesSpinner').hide();
-      Messages.error("Failure", e, "Unable to retrieve services");
       $scope.services = [];
+      Messages.error("Failure", err, "Unable to retrieve services");
+    })
+    .finally(function final() {
+      $('#loadServicesSpinner').hide();
     });
   }
 

app/filters/filters.js

@@ -228,4 +228,13 @@ angular.module('portainer.filters', [])
     }
     return '';
   };
+})
+.filter('hideshasum', function () {
+  'use strict';
+  return function (imageName) {
+    if (imageName) {
+      return imageName.split('@sha')[0];
+    }
+    return '';
+  };
 });

app/models/service.js

@@ -1,4 +1,4 @@
-function ServiceViewModel(data) {
+function ServiceViewModel(data, runningTasks, nodes) {
   this.Model = data;
   this.Id = data.ID;
   this.Name = data.Spec.Name;
@@ -9,6 +9,12 @@ function ServiceViewModel(data) {
     this.Replicas = data.Spec.Mode.Replicated.Replicas;
   } else {
     this.Mode = 'global';
+    if (nodes) {
+      this.Replicas = nodes.length;
+    }
+  }
+  if (runningTasks) {
+    this.Running = runningTasks.length;
   }
   this.Labels = data.Spec.Labels;
   if (data.Spec.TaskTemplate.ContainerSpec) {