feat(home): add the ability to edit an endpoint (#2305)

* feat(home): add edit button

* feat(home): style edit button

* feat(home): make endpoint editable on admin only

app/portainer/components/endpoint-list/endpoint-item/endpoint-item-controller.js

@@ -0,0 +1,12 @@
+angular.module('portainer.app').controller('EndpointItemController', [
+  function EndpointItemController() {
+    var ctrl = this;
+
+    ctrl.editEndpoint = editEndpoint;
+
+    function editEndpoint(event) {
+      event.stopPropagation();
+      ctrl.onEdit(ctrl.model.Id);
+    }
+  }
+]);

app/portainer/components/endpoint-list/endpoint-item/endpointItem.html

@@ -21,8 +21,16 @@
 
           </span>
         </span>
-        <span class="small">
+        <span>
-          Group: {{ $ctrl.model.GroupName }}
+
+          <span class="small">
+            Group: {{ $ctrl.model.GroupName }}
+          </span>
+          <button
+            ng-if="$ctrl.isAdmin" 
+            class="btn btn-link btn-xs"
+            ng-click="$ctrl.editEndpoint($event)"><i class="fa fa-pencil-alt"></i>
+          </button>
         </span>
       </div>
 

app/portainer/components/endpoint-list/endpoint-item/endpointItem.js

@@ -2,6 +2,9 @@ angular.module('portainer.app').component('endpointItem', {
   templateUrl: 'app/portainer/components/endpoint-list/endpoint-item/endpointItem.html',
   bindings: {
     model: '<',
-    onSelect: '<'
+    onSelect: '<',
-  }
+    onEdit: '<',
+    isAdmin:'<'
+  },
+  controller: 'EndpointItemController'
 });

app/portainer/components/endpoint-list/endpoint-list.js

@@ -11,6 +11,8 @@ angular.module('portainer.app').component('endpointList', {
     endpoints: '<',
     dashboardAction: '<',
     snapshotAction: '<',
-    showSnapshotAction: '<'
+    showSnapshotAction: '<',
+    editAction: '<',
+    isAdmin:'<'
   }
 });

app/portainer/components/endpoint-list/endpointList.html

@@ -24,6 +24,8 @@
           ng-repeat="endpoint in $ctrl.endpoints | filter:$ctrl.state.textFilter"
           model="endpoint"
           on-select="$ctrl.dashboardAction"
+          on-edit="$ctrl.editAction"
+          is-admin="$ctrl.isAdmin"
         ></endpoint-item>
         <div ng-if="!$ctrl.endpoints" class="text-center text-muted">
           Loading...

app/portainer/views/home/home.html

@@ -44,6 +44,8 @@
       dashboard-action="goToDashboard"
       show-snapshot-action="!applicationState.application.authentication || isAdmin"
       snapshot-action="triggerSnapshot"
+      edit-action="goToEdit"
+      is-admin="isAdmin"
     ></endpoint-list>
   </div>
 </div>

app/portainer/views/home/homeController.js

@@ -62,6 +62,12 @@ function ($q, $scope, $state, Authentication, EndpointService, EndpointHelper, G
     });
   }
 
+  $scope.goToEdit = goToEdit;
+
+  function goToEdit(id) {
+    $state.go('portainer.endpoints.endpoint', { id: id });
+  }
+
   function initView() {
     $scope.isAdmin = Authentication.getUserDetails().role === 1;