feat(service-details): add quick navigation menu anchors (#875)

app/components/service/includes/constraints.html

@@ -1,4 +1,4 @@
-<div ng-if="service.ServiceConstraints">
+<div ng-if="service.ServiceConstraints" id="service-placement-constraints">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Placement constraints">
       <div class="nopadding">

app/components/service/includes/containerlabels.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-container-labels">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Container labels">
       <div class="nopadding">

app/components/service/includes/environmentvariables.html

@@ -1,4 +1,4 @@
-<div ng-if="service.EnvironmentVariables">
+<div ng-if="service.EnvironmentVariables" id="service-env-variables">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Environment variables">
       <div class="nopadding">

app/components/service/includes/mounts.html

@@ -1,4 +1,4 @@
-<div ng-if="service.ServiceMounts">
+<div ng-if="service.ServiceMounts" id="service-mounts">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Mounts">
       <div class="nopadding">

app/components/service/includes/networks.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-network-specs">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Networks"></rd-widget-header>
     <rd-widget-body ng-if="!service.VirtualIPs || service.VirtualIPs.length === 0">

app/components/service/includes/resources.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-resources">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Resource limits and reservations">
     </rd-widget-header>

app/components/service/includes/restart.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-restart-policy">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Restart policy">
     </rd-widget-header>

app/components/service/includes/secrets.html

@@ -1,4 +1,4 @@
-<div ng-if="applicationState.endpoint.apiVersion >= 1.25">
+<div ng-if="applicationState.endpoint.apiVersion >= 1.25" id="service-secrets">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Secrets">
     </rd-widget-header>

app/components/service/includes/servicelabels.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-labels">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Service labels">
       <div class="nopadding">

app/components/service/includes/tasks.html

@@ -1,4 +1,4 @@
-<div ng-if="tasks.length > 0 && nodes">
+<div ng-if="tasks.length > 0 && nodes" id="service-tasks">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Associated tasks">
       <div class="pull-right">
@@ -57,9 +57,10 @@
         </tr>
       </tbody>
       </table>
-      <div ng-if="tasks" class="pagination-controls">
+      <div ng-if="tasks" class="pagination-controls" >
       <dir-pagination-controls></dir-pagination-controls>
       </div>
     </rd-widget-body>
   </rd-widget>
 </div>
+

app/components/service/includes/updateconfig.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-update-config">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Update configuration">
     </rd-widget-header>

app/components/service/service.html

@@ -111,7 +111,7 @@
           <li><a href ng-click="goToItem('service-labels')">Service labels</a></li>
           <li><a href ng-click="goToItem('service-secrets')">Secrets</a></li>
           <li><a href ng-click="goToItem('service-tasks')">Tasks</a></li>
-        <ul>
+        </ul>
       </rd-widget-body>
     </rd-widget>
   </div>

app/components/service/serviceController.js

@@ -1,6 +1,6 @@
 angular.module('service', [])
-.controller('ServiceController', ['$q', '$scope', '$stateParams', '$state', '$location', '$anchorScroll', 'ServiceService', 'Secret', 'SecretHelper', 'Service', 'ServiceHelper', 'TaskService', 'NodeService', 'Notifications', 'Pagination', 'ModalService', 'ControllerDataPipeline',
+.controller('ServiceController', ['$q', '$scope', '$stateParams', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'Secret', 'SecretHelper', 'Service', 'ServiceHelper', 'TaskService', 'NodeService', 'Notifications', 'Pagination', 'ModalService', 'ControllerDataPipeline',
-function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceService, Secret, SecretHelper, Service, ServiceHelper, TaskService, NodeService, Notifications, Pagination, ModalService, ControllerDataPipeline) {
+function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll, ServiceService, Secret, SecretHelper, Service, ServiceHelper, TaskService, NodeService, Notifications, Pagination, ModalService, ControllerDataPipeline) {
 
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('service_tasks');
@@ -37,7 +37,11 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
   };
 
   $scope.goToItem = function(hash) {
-    $anchorScroll(hash);
+      if ($location.hash() !== hash) {
+        $location.hash(hash);
+      } else {
+        $anchorScroll();
+      }
   };
 
   $scope.addEnvironmentVariable = function addEnvironmentVariable(service) {
@@ -291,15 +295,22 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
     .then(function success(data) {
       $scope.tasks = data.tasks;
       $scope.nodes = data.nodes;
+
       $scope.secrets = data.secrets.map(function (secret) {
         return new SecretViewModel(secret);
       });
+
+      $timeout(function() {
+        $anchorScroll();
+      });
+
     })
     .catch(function error(err) {
       $scope.secrets = [];
       Notifications.error('Failure', err, 'Unable to retrieve service details');
     })
     .finally(function final() {
+
       $('#loadingViewSpinner').hide();
     });
   }