chore(project): add prettier for code format (#3645)

* chore(project): install prettier and lint-staged

* chore(project): apply prettier to html too

* chore(project): git ignore eslintcache

* chore(project): add a comment about format script

* chore(prettier): update printWidth

* chore(prettier): remove useTabs option

* chore(prettier): add HTML validation

* refactor(prettier): fix closing tags

* feat(prettier): define angular parser for html templates

* style(prettier): run prettier on codebase

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>

app/extensions/rbac/__module.js

@@ -1,19 +1,23 @@
-angular.module('portainer.extensions.rbac', ['ngResource'])
+angular
+  .module('portainer.extensions.rbac', ['ngResource'])
   .constant('API_ENDPOINT_ROLES', 'api/roles')
-  .config(['$stateRegistryProvider', function ($stateRegistryProvider) {
-    'use strict';
+  .config([
+    '$stateRegistryProvider',
+    function ($stateRegistryProvider) {
+      'use strict';
 
-    var roles = {
-      name: 'portainer.roles',
-      url: '/roles',
-      views: {
-        'content@': {
-          templateUrl: './views/roles/roles.html',
-          controller: 'RolesController',
-          controllerAs: 'ctrl'
-        }
-      }
-    };
+      var roles = {
+        name: 'portainer.roles',
+        url: '/roles',
+        views: {
+          'content@': {
+            templateUrl: './views/roles/roles.html',
+            controller: 'RolesController',
+            controllerAs: 'ctrl',
+          },
+        },
+      };
 
-    $stateRegistryProvider.register(roles);
-  }]);
+      $stateRegistryProvider.register(roles);
+    },
+  ]);

app/extensions/rbac/components/access-viewer/accessViewer.html

@@ -1,44 +1,38 @@
-  <div class="col-sm-12" style="margin-bottom: 0px;">
-    <rd-widget ng-if="ctrl.users">
-      <rd-widget-header icon="fa-user-lock" title-text="Effective access viewer"></rd-widget-header>
-      <rd-widget-body>
-        <form class="form-horizontal">
-          <div class="col-sm-12 form-section-title">
-            User
-          </div>
-          <div class="form-group">
-            <div class="col-sm-12">
-              <span class="small text-muted" ng-if="ctrl.users.length === 0">
-                No user available
-              </span>
-              <ui-select ng-if="ctrl.users.length > 0" ng-model="ctrl.selectedUser" ng-change="ctrl.onUserSelect()">
-                <ui-select-match placeholder="Select a user">
-                  <span>{{ $select.selected.Username }}</span>
-                </ui-select-match>
-                <ui-select-choices repeat="item in (ctrl.users | filter: $select.search)">
-                  <span>{{ item.Username }}</span>
-                </ui-select-choices>
-              </ui-select>
-            </div>
+<div class="col-sm-12" style="margin-bottom: 0px;">
+  <rd-widget ng-if="ctrl.users">
+    <rd-widget-header icon="fa-user-lock" title-text="Effective access viewer"></rd-widget-header>
+    <rd-widget-body>
+      <form class="form-horizontal">
+        <div class="col-sm-12 form-section-title">
+          User
+        </div>
+        <div class="form-group">
+          <div class="col-sm-12">
+            <span class="small text-muted" ng-if="ctrl.users.length === 0">
+              No user available
+            </span>
+            <ui-select ng-if="ctrl.users.length > 0" ng-model="ctrl.selectedUser" ng-change="ctrl.onUserSelect()">
+              <ui-select-match placeholder="Select a user">
+                <span>{{ $select.selected.Username }}</span>
+              </ui-select-match>
+              <ui-select-choices repeat="item in (ctrl.users | filter: $select.search)">
+                <span>{{ item.Username }}</span>
+              </ui-select-choices>
+            </ui-select>
           </div>
+        </div>
 
-          <div class="col-sm-12 form-section-title">
-            Access
+        <div class="col-sm-12 form-section-title">
+          Access
+        </div>
+        <div>
+          <div class="small text-muted" style="margin-bottom: 15px;">
+            <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+            Effective role for each endpoint will be displayed for the selected user
           </div>
-          <div>
-            <div class="small text-muted" style="margin-bottom: 15px;">
-              <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
-              Effective role for each endpoint will be displayed for the selected user
-            </div>
-          </div>
-            <access-viewer-datatable
-                    ng-if="ctrl.users"
-                    table-key="access_viewer"
-                    dataset="ctrl.userRoles"
-                    order-by="EndpointName"
-            >
-            </access-viewer-datatable>
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
+        </div>
+        <access-viewer-datatable ng-if="ctrl.users" table-key="access_viewer" dataset="ctrl.userRoles" order-by="EndpointName"> </access-viewer-datatable>
+      </form>
+    </rd-widget-body>
+  </rd-widget>
+</div>

app/extensions/rbac/components/access-viewer/accessViewer.js

@@ -1,5 +1,5 @@
 angular.module('portainer.app').component('accessViewer', {
   templateUrl: './accessViewer.html',
   controller: 'AccessViewerController',
-  controllerAs: 'ctrl'
+  controllerAs: 'ctrl',
 });

app/extensions/rbac/components/access-viewer/accessViewerController.js

@@ -20,9 +20,9 @@ class AccessViewerController {
     this.userRoles = [];
     const userRoles = {};
     const user = this.selectedUser;
-    const userMemberships = _.filter(this.teamMemberships, {UserId: user.Id});
+    const userMemberships = _.filter(this.teamMemberships, { UserId: user.Id });
 
-    for (const [,endpoint] of _.entries(this.endpoints)) {
+    for (const [, endpoint] of _.entries(this.endpoints)) {
       let role = this.getRoleFromUserEndpointPolicy(user, endpoint);
       if (role) {
         userRoles[endpoint.Id] = role;
@@ -57,23 +57,23 @@ class AccessViewerController {
   getRoleFromUserEndpointPolicy(user, endpoint) {
     const policyRoles = [];
     const policy = endpoint.UserAccessPolicies[user.Id];
-      if (policy) {
-        const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, null, null);
-        policyRoles.push(accessPolicy);
-      }
+    if (policy) {
+      const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, null, null);
+      policyRoles.push(accessPolicy);
+    }
     return this.findLowestRole(policyRoles);
   }
-  
+
   getRoleFromUserEndpointGroupPolicy(user, endpoint) {
     const policyRoles = [];
     const policy = this.groupUserAccessPolicies[endpoint.GroupId][user.Id];
-      if (policy) {
-        const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, this.groups[endpoint.GroupId], null);
-        policyRoles.push(accessPolicy);
-      }
+    if (policy) {
+      const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, this.groups[endpoint.GroupId], null);
+      policyRoles.push(accessPolicy);
+    }
     return this.findLowestRole(policyRoles);
   }
-  
+
   getRoleFromTeamEndpointPolicies(memberships, endpoint) {
     const policyRoles = [];
     for (const membership of memberships) {
@@ -85,11 +85,11 @@ class AccessViewerController {
     }
     return this.findLowestRole(policyRoles);
   }
-  
+
   getRoleFromTeamEndpointGroupPolicies(memberships, endpoint) {
     const policyRoles = [];
     for (const membership of memberships) {
-      const policy = this.groupTeamAccessPolicies[endpoint.GroupId][membership.TeamId]
+      const policy = this.groupTeamAccessPolicies[endpoint.GroupId][membership.TeamId];
       if (policy) {
         const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, this.groups[endpoint.GroupId], this.teams[membership.TeamId]);
         policyRoles.push(accessPolicy);
@@ -107,7 +107,7 @@ class AccessViewerController {
         const groups = await this.GroupService.groups();
         this.groupUserAccessPolicies = {};
         this.groupTeamAccessPolicies = {};
-        _.forEach(groups, group => {
+        _.forEach(groups, (group) => {
           this.groupUserAccessPolicies[group.Id] = group.UserAccessPolicies;
           this.groupTeamAccessPolicies[group.Id] = group.TeamAccessPolicies;
         });
@@ -117,12 +117,10 @@ class AccessViewerController {
         this.teamMemberships = await this.TeamMembershipService.memberships();
       }
     } catch (err) {
-      this.Notifications.error("Failure", err, "Unable to retrieve accesses");
+      this.Notifications.error('Failure', err, 'Unable to retrieve accesses');
     }
   }
 }
 
 export default AccessViewerController;
-angular
-  .module("portainer.app")
-  .controller("AccessViewerController", AccessViewerController);
+angular.module('portainer.app').controller('AccessViewerController', AccessViewerController);

app/extensions/rbac/components/access-viewer/datatable/accessViewerDatatable.html

@@ -1,74 +1,73 @@
 <div class="datatable">
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..." ng-model-options="{ debounce: 300 }">
-      </div>
-      <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
-          <thead>
-            <tr>
-              <th>
-                <a ng-click="$ctrl.changeOrderBy('EndpointName')">
-                  Endpoint
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true"
-                    ng-if="$ctrl.state.orderBy === 'EndpointName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true"
-                    ng-if="$ctrl.state.orderBy === 'EndpointName' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-              <th>
-                <a ng-click="$ctrl.changeOrderBy('RoleName')">
-                  Role
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true"
-                    ng-if="$ctrl.state.orderBy === 'RoleName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true"
-                    ng-if="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-              <th>Access origin</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit)) track by $index">
-              <td>{{ item.EndpointName }}</td>
-              <td>{{ item.RoleName }}</td>
-              <td>{{ item.TeamName ? 'Team' : 'User'}} <code ng-if="item.TeamName">{{ item.TeamName }}</code> access defined on {{ item.AccessLocation }} <code ng-if="item.GroupName">{{item.GroupName}}</code>
-                <a ng-if="item.AccessLocation === 'endpoint'" ui-sref="portainer.endpoints.endpoint.access({id: item.EndpointId})"><i style="margin-left: 5px;" class="fa fa-users" aria-hidden="true"></i> Manage access </a>
-                <a ng-if="item.AccessLocation === 'endpoint group'" ui-sref="portainer.groups.group.access({id: item.GroupId})"><i style="margin-left: 5px;" class="fa fa-users" aria-hidden="true"></i> Manage access </a>
-              </td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-center text-muted">Select a user to show associated access and role</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-center text-muted">The selected user does not have access to any endpoint(s)</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
-        <div class="paginationControls">
-          <form class="form-inline">
-            <span class="limitSelector">
-              <span style="margin-right: 5px;">
-                Items per page
-              </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit"
-                ng-change="$ctrl.changePaginationLimit()">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-</div>
+  <div class="searchBar">
+    <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+    <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." ng-model-options="{ debounce: 300 }" />
+  </div>
+  <div class="table-responsive">
+    <table class="table table-hover nowrap-cells">
+      <thead>
+        <tr>
+          <th>
+            <a ng-click="$ctrl.changeOrderBy('EndpointName')">
+              Endpoint
+              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EndpointName' && !$ctrl.state.reverseOrder"></i>
+              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EndpointName' && $ctrl.state.reverseOrder"></i>
+            </a>
+          </th>
+          <th>
+            <a ng-click="$ctrl.changeOrderBy('RoleName')">
+              Role
+              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RoleName' && !$ctrl.state.reverseOrder"></i>
+              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"></i>
+            </a>
+          </th>
+          <th>Access origin</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit)) track by $index"
+        >
+          <td>{{ item.EndpointName }}</td>
+          <td>{{ item.RoleName }}</td>
+          <td
+            >{{ item.TeamName ? 'Team' : 'User' }} <code ng-if="item.TeamName">{{ item.TeamName }}</code> access defined on {{ item.AccessLocation }}
+            <code ng-if="item.GroupName">{{ item.GroupName }}</code>
+            <a ng-if="item.AccessLocation === 'endpoint'" ui-sref="portainer.endpoints.endpoint.access({id: item.EndpointId})"
+              ><i style="margin-left: 5px;" class="fa fa-users" aria-hidden="true"></i> Manage access
+            </a>
+            <a ng-if="item.AccessLocation === 'endpoint group'" ui-sref="portainer.groups.group.access({id: item.GroupId})"
+              ><i style="margin-left: 5px;" class="fa fa-users" aria-hidden="true"></i> Manage access
+            </a>
+          </td>
+        </tr>
+        <tr ng-if="!$ctrl.dataset">
+          <td colspan="3" class="text-center text-muted">Select a user to show associated access and role</td>
+        </tr>
+        <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+          <td colspan="3" class="text-center text-muted">The selected user does not have access to any endpoint(s)</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="footer" ng-if="$ctrl.dataset">
+    <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
+    <div class="paginationControls">
+      <form class="form-inline">
+        <span class="limitSelector">
+          <span style="margin-right: 5px;">
+            Items per page
+          </span>
+          <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+            <option value="0">All</option>
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </span>
+        <dir-pagination-controls max-size="5"></dir-pagination-controls>
+      </form>
+    </div>
+  </div>
+</div>

app/extensions/rbac/components/access-viewer/datatable/accessViewerDatatable.js

@@ -6,6 +6,6 @@ angular.module('portainer.app').component('accessViewerDatatable', {
     titleIcon: '@',
     tableKey: '@',
     orderBy: '@',
-    dataset: '<'
-  }
+    dataset: '<',
+  },
 });

app/extensions/rbac/components/roles-datatable/rolesDatatable.html

@@ -1,14 +1,21 @@
-<div class="datatable" ng-class="{'portainer-disabled-datatable': !$ctrl.rbacEnabled}">
+<div class="datatable" ng-class="{ 'portainer-disabled-datatable': !$ctrl.rbacEnabled }">
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle">
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
+        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus ng-disabled="!$ctrl.rbacEnabled" ng-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-disabled="!$ctrl.rbacEnabled"
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
@@ -31,7 +38,10 @@
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
               <td>{{ item.Name }}</td>
               <td>{{ item.Description }}</td>
             </tr>
@@ -45,9 +55,7 @@
         </table>
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
-          {{ $ctrl.state.selectedItemCount }} item(s) selected
-        </div>
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">

app/extensions/rbac/components/roles-datatable/rolesDatatable.js

@@ -8,6 +8,6 @@ angular.module('portainer.extensions.rbac').component('rolesDatatable', {
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    rbacEnabled: '<'
-  }
+    rbacEnabled: '<',
+  },
 });

app/extensions/rbac/directives/authorization.js

@@ -1,6 +1,8 @@
-angular.module('portainer.extensions.rbac').directive('authorization', ['Authentication', 'ExtensionService', '$async',
-  function(Authentication, ExtensionService, $async) {
-
+angular.module('portainer.extensions.rbac').directive('authorization', [
+  'Authentication',
+  'ExtensionService',
+  '$async',
+  function (Authentication, ExtensionService, $async) {
     async function linkAsync(scope, elem, attrs) {
       elem.hide();
       try {
@@ -13,7 +15,7 @@ angular.module('portainer.extensions.rbac').directive('authorization', ['Authent
         elem.show();
         return;
       }
-      var authorizations = attrs.authorization.split(",");
+      var authorizations = attrs.authorization.split(',');
       for (var i = 0; i < authorizations.length; i++) {
         authorizations[i] = authorizations[i].trim();
       }
@@ -30,8 +32,9 @@ angular.module('portainer.extensions.rbac').directive('authorization', ['Authent
 
     return {
       restrict: 'A',
-      link: function(scope, elem, attrs) {
+      link: function (scope, elem, attrs) {
         return $async(linkAsync, scope, elem, attrs);
-      }
-    }
-  }]);
+      },
+    };
+  },
+]);

app/extensions/rbac/directives/disable-authorization.js

@@ -1,6 +1,8 @@
-angular.module('portainer.extensions.rbac')
-  .directive('disableAuthorization', ['Authentication', 'ExtensionService', '$async', function(Authentication, ExtensionService, $async) {
-
+angular.module('portainer.extensions.rbac').directive('disableAuthorization', [
+  'Authentication',
+  'ExtensionService',
+  '$async',
+  function (Authentication, ExtensionService, $async) {
     async function linkAsync(scope, elem, attrs) {
       try {
         const rbacEnabled = await ExtensionService.extensionEnabled(ExtensionService.EXTENSIONS.RBAC);
@@ -11,7 +13,7 @@ angular.module('portainer.extensions.rbac')
         return;
       }
 
-      var authorizations = attrs.disableAuthorization.split(",");
+      var authorizations = attrs.disableAuthorization.split(',');
       for (var i = 0; i < authorizations.length; i++) {
         authorizations[i] = authorizations[i].trim();
       }
@@ -28,6 +30,7 @@ angular.module('portainer.extensions.rbac')
       restrict: 'A',
       link: function (scope, elem, attrs) {
         return $async(linkAsync, scope, elem, attrs);
-      }
-    }
-  }]);
+      },
+    };
+  },
+]);

app/extensions/rbac/models/access.js

@@ -5,11 +5,11 @@ export default function AccessViewerPolicyModel(policy, endpoint, roles, group,
   this.RoleName = roles[policy.RoleId].Name;
   if (group) {
     this.GroupId = group.Id;
-    this.GroupName = group.Name
+    this.GroupName = group.Name;
   }
   if (team) {
     this.TeamId = team.Id;
     this.TeamName = team.Name;
   }
   this.AccessLocation = group ? 'endpoint group' : 'endpoint';
-}
+}

app/extensions/rbac/rest/role.js

@@ -1,11 +1,18 @@
-angular.module('portainer.app')
-.factory('Roles', ['$resource', 'API_ENDPOINT_ROLES', function RolesFactory($resource, API_ENDPOINT_ROLES) {
-  'use strict';
-  return $resource(API_ENDPOINT_ROLES + '/:id', {}, {
-    create: { method: 'POST', ignoreLoadingBar: true },
-    query: { method: 'GET', isArray: true },
-    get: { method: 'GET', params: { id: '@id' } },
-    update: { method: 'PUT', params: { id: '@id' } },
-    remove: { method: 'DELETE', params: { id: '@id'} }
-  });
-}]);
+angular.module('portainer.app').factory('Roles', [
+  '$resource',
+  'API_ENDPOINT_ROLES',
+  function RolesFactory($resource, API_ENDPOINT_ROLES) {
+    'use strict';
+    return $resource(
+      API_ENDPOINT_ROLES + '/:id',
+      {},
+      {
+        create: { method: 'POST', ignoreLoadingBar: true },
+        query: { method: 'GET', isArray: true },
+        get: { method: 'GET', params: { id: '@id' } },
+        update: { method: 'PUT', params: { id: '@id' } },
+        remove: { method: 'DELETE', params: { id: '@id' } },
+      }
+    );
+  },
+]);

app/extensions/rbac/services/roleService.js

@@ -4,44 +4,46 @@ import {
   // EndpointRoleUpdateRequest
 } from '../models/role';
 
-angular.module('portainer.extensions.rbac')
-.factory('RoleService', ['$q', 'Roles',
-function RoleService($q, Roles) {
-  'use strict';
-  var service = {};
+angular.module('portainer.extensions.rbac').factory('RoleService', [
+  '$q',
+  'Roles',
+  function RoleService($q, Roles) {
+    'use strict';
+    var service = {};
 
-  service.role = function(roleId) {
-    var deferred = $q.defer();
+    service.role = function (roleId) {
+      var deferred = $q.defer();
 
-    Roles.get({ id: roleId }).$promise
-    .then(function success(data) {
-      var role = new RoleViewModel(data);
-      deferred.resolve(role);
-    })
-    .catch(function error(err) {
-      deferred.reject({ msg: 'Unable to retrieve role', err: err });
-    });
+      Roles.get({ id: roleId })
+        .$promise.then(function success(data) {
+          var role = new RoleViewModel(data);
+          deferred.resolve(role);
+        })
+        .catch(function error(err) {
+          deferred.reject({ msg: 'Unable to retrieve role', err: err });
+        });
 
-    return deferred.promise;
-  };
+      return deferred.promise;
+    };
 
-  service.roles = function() {
-    return Roles.query({}).$promise;
-  };
+    service.roles = function () {
+      return Roles.query({}).$promise;
+    };
 
-  // service.createRole = function(model, endpoints) {
-  //   var payload = new EndpointRoleCreateRequest(model, endpoints);
-  //   return EndpointRoles.create(payload).$promise;
-  // };
-  //
-  // service.updateRole = function(model, endpoints) {
-  //   var payload = new EndpointRoleUpdateRequest(model, endpoints);
-  //   return EndpointRoles.update(payload).$promise;
-  // };
+    // service.createRole = function(model, endpoints) {
+    //   var payload = new EndpointRoleCreateRequest(model, endpoints);
+    //   return EndpointRoles.create(payload).$promise;
+    // };
+    //
+    // service.updateRole = function(model, endpoints) {
+    //   var payload = new EndpointRoleUpdateRequest(model, endpoints);
+    //   return EndpointRoles.update(payload).$promise;
+    // };
 
-  service.deleteRole = function(roleId) {
-    return Roles.remove({ id: roleId }).$promise;
-  };
+    service.deleteRole = function (roleId) {
+      return Roles.remove({ id: roleId }).$promise;
+    };
 
-  return service;
-}]);
+    return service;
+  },
+]);

app/extensions/rbac/views/roles/roles.html

@@ -11,26 +11,26 @@
   <span class="small">
     <p class="text-muted">
       <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
-      The <a ui-sref="portainer.extensions.extension({id: 3})"
-        tooltip-append-to-body="true" tooltip-placement="bottom" tooltip-class="portainer-tooltip"
-        uib-tooltip="Feature available via an extension">Role-Based Access Control extension</a>
-        is required to use this feature.
+      The
+      <a
+        ui-sref="portainer.extensions.extension({id: 3})"
+        tooltip-append-to-body="true"
+        tooltip-placement="bottom"
+        tooltip-class="portainer-tooltip"
+        uib-tooltip="Feature available via an extension"
+        >Role-Based Access Control extension</a
+      >
+      is required to use this feature.
     </p>
   </span>
 </information-panel>
 
 <div class="row">
   <div class="col-sm-12">
-    <roles-datatable
-    title-text="Roles" title-icon="fa-file-code"
-    dataset="ctrl.roles" table-key="roles"
-    order-by="Name"
-    rbac-enabled="ctrl.rbacEnabled"
-    ></roles-datatable>
+    <roles-datatable title-text="Roles" title-icon="fa-file-code" dataset="ctrl.roles" table-key="roles" order-by="Name" rbac-enabled="ctrl.rbacEnabled"></roles-datatable>
   </div>
 </div>
 
 <div class="row">
-  <access-viewer ng-if="ctrl.rbacEnabled">
-  </access-viewer>
-</div>
+  <access-viewer ng-if="ctrl.rbacEnabled"> </access-viewer>
+</div>

app/extensions/rbac/views/roles/rolesController.js

@@ -1,7 +1,6 @@
 import angular from 'angular';
 
 class RolesController {
-
   /* @ngInject */
   constructor(Notifications, RoleService, ExtensionService) {
     this.Notifications = Notifications;