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

Signed-off-by: Eli Atzaba <eliat123@gmail.com>
eliat123 · May 23, 2017 · 144d00f · 144d00f
1 parent 5b47427
commit 144d00f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/app/app.js b/app/app.js
@@ -423,7 +423,7 @@ angular.module('portainer', [
       }
     })
     .state('service', {
-      url: '^/service/:id/',
+      url: '^/service/:id/:page_anchor',
       views: {
         'content@': {
           templateUrl: 'app/components/service/service.html',

diff --git a/app/components/service/service.html b/app/components/service/service.html
@@ -100,16 +100,16 @@
       <rd-widget-header icon="fa-bars" title="Quick navigation"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <ul class="nav nav-pills nav-stacked">
-          <li><a href ng-click="goToItem('service-env-variables')">Environment variables</a></li>
-          <li><a href ng-click="goToItem('service-container-labels')">Container labels</a></li>
-          <li><a href ng-click="goToItem('service-mounts')">Mounts</a></li>
-          <li><a href ng-click="goToItem('service-network-specs')">Network &amp; published ports</a></li>
-          <li><a href ng-click="goToItem('service-resources')">Resource limits &amp; reservations</a></li>
-          <li><a href ng-click="goToItem('service-placement-constraints')">Placement constraints</a></li>
-          <li><a href ng-click="goToItem('service-restart-policy')">Restart policy</a></li>
-          <li><a href ng-click="goToItem('service-update-config')">Update configuration</a></li>
-          <li><a href ng-click="goToItem('service-labels')">Service labels</a></li>
-          <li><a href ng-click="goToItem('service-tasks')">Tasks</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-env-variables">Environment variables</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-container-labels">Container labels</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-mounts">Mounts</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-network-specs">Network &amp; published ports</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-resources">Resource limits &amp; reservations</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-placement-constraints">Placement constraints</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-restart-policy">Restart policy</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-update-config">Update configuration</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-labels">Service labels</a></li>
+          <li><a href="#/service/{{ service.Id }}/service-tasks">Tasks</a></li>
         <ul>
       </rd-widget-body>
     </rd-widget>

diff --git a/app/components/service/serviceController.js b/app/components/service/serviceController.js
@@ -260,6 +260,9 @@ function ($scope, $stateParams, $state, $location, $anchorScroll, Service, Servi
 
   function fetchServiceDetails() {
     $('#loadingViewSpinner').show();
+
+    page_anchor = $stateParams.page_anchor;
+
     Service.get({id: $stateParams.id}, function (d) {
       var service = new ServiceViewModel(d);
       $scope.isUpdating = $scope.lastVersion >= service.Version;
@@ -278,6 +281,9 @@ function ($scope, $stateParams, $state, $location, $anchorScroll, Service, Servi
             return new TaskViewModel(task, nodes);
           });
           $('#loadingViewSpinner').hide();
+          if(page_anchor) {
+              $scope.goToItem(page_anchor);
+          }
         }, function (e) {
           $('#loadingViewSpinner').hide();
           $scope.tasks = tasks.map(function (task) {