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/integrations/storidge/components/cluster-events-datatable/storidgeClusterEventsDatatable.html

@@ -2,13 +2,19 @@
   <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-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover">
@@ -45,7 +51,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.Time }}</td>
               <td>{{ item.Category }}</td>
               <td>{{ item.Module }}</td>

app/integrations/storidge/components/cluster-events-datatable/storidgeClusterEventsDatatable.js

@@ -7,6 +7,6 @@ angular.module('portainer.integrations.storidge').component('storidgeClusterEven
     dataset: '<',
     tableKey: '@',
     orderBy: '@',
-    reverseOrder: '<'
-  }
+    reverseOrder: '<',
+  },
 });

app/integrations/storidge/components/drives-datatable/storidgeDrivesDatatable.html

@@ -2,18 +2,22 @@
   <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="actionBar">
-        <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.rescanAction()">
-          <i class="fa fa-sync space-right" aria-hidden="true"></i>Rescan drives
-        </button>
+        <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.rescanAction()"> <i class="fa fa-sync space-right" aria-hidden="true"></i>Rescan drives </button>
       </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-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover">
@@ -74,7 +78,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>
                 <a ui-sref="storidge.drives.drive({id: item.Id})"> {{ item.Id }}</a>
               </td>
@@ -84,11 +91,17 @@
               <td>{{ item.Use }}</td>
               <td>{{ item.Type }}</td>
               <td>
-                <span class="label label-{{ item.Status|drivestatusbadge }}">{{ item.Status|capitalize }}</span>
+                <span class="label label-{{ item.Status | drivestatusbadge }}">{{ item.Status | capitalize }}</span>
               </td>
               <td>
-                <button ng-if="item.Status === 'available'" type="button" class="btn btn-sm btn-primary btn-datatable"
-                  ng-click="$ctrl.addAction(item, $index)" button-spinner="$ctrl.additionInProgress[$index]" ng-disabled="$ctrl.actionInProgress">
+                <button
+                  ng-if="item.Status === 'available'"
+                  type="button"
+                  class="btn btn-sm btn-primary btn-datatable"
+                  ng-click="$ctrl.addAction(item, $index)"
+                  button-spinner="$ctrl.additionInProgress[$index]"
+                  ng-disabled="$ctrl.actionInProgress"
+                >
                   <span ng-hide="$ctrl.additionInProgress[$index]"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add to storage pool</span>
                   <span ng-show="$ctrl.additionInProgress[$index]">Addition in progress...</span>
                 </button>
@@ -104,9 +117,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/integrations/storidge/components/drives-datatable/storidgeDrivesDatatable.js

@@ -12,6 +12,6 @@ angular.module('portainer.integrations.storidge').component('storidgeDrivesDatat
     addAction: '<',
     rescanAction: '<',
     actionInProgress: '<',
-    additionInProgress: '<'
-  }
+    additionInProgress: '<',
+  },
 });

app/integrations/storidge/components/drives-datatable/storidgeDrivesDatatableController.js

@@ -1,43 +1,45 @@
-angular.module('portainer.docker')
-  .controller('StoridgeDrivesDatatableController', ['$scope', '$controller', 'DatatableService',
-    function ($scope, $controller, DatatableService) {
-      angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
+angular.module('portainer.docker').controller('StoridgeDrivesDatatableController', [
+  '$scope',
+  '$controller',
+  'DatatableService',
+  function ($scope, $controller, DatatableService) {
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
-      this.allowSelection = function (item) {
-        return item.Status !== 'normal';
-      };
+    this.allowSelection = function (item) {
+      return item.Status !== 'normal';
+    };
 
-      this.$onInit = function() {
-        this.setDefaults();
-        this.prepareTableFromDataset();
+    this.$onInit = function () {
+      this.setDefaults();
+      this.prepareTableFromDataset();
 
-        this.state.orderBy = this.orderBy;
-        var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-        if (storedOrder !== null) {
-          this.state.reverseOrder = storedOrder.reverse;
-          this.state.orderBy = storedOrder.orderBy;
-        }
+      this.state.orderBy = this.orderBy;
+      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
+      if (storedOrder !== null) {
+        this.state.reverseOrder = storedOrder.reverse;
+        this.state.orderBy = storedOrder.orderBy;
+      }
 
-        var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-        if (textFilter !== null) {
-          this.state.textFilter = textFilter;
-          this.onTextFilterChange();
-        }
+      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
+      if (textFilter !== null) {
+        this.state.textFilter = textFilter;
+        this.onTextFilterChange();
+      }
 
-        var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-        if (storedFilters !== null) {
-          this.filters = storedFilters;
-        }
-        if (this.filters && this.filters.state) {
-          this.filters.state.open = false;
-        }
+      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
+      if (storedFilters !== null) {
+        this.filters = storedFilters;
+      }
+      if (this.filters && this.filters.state) {
+        this.filters.state.open = false;
+      }
 
-        var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
-        if (storedSettings !== null) {
-          this.settings = storedSettings;
-          this.settings.open = false;
-        }
-        this.onSettingsRepeaterChange();
-      };
-  }
-]);
+      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+      if (storedSettings !== null) {
+        this.settings = storedSettings;
+        this.settings.open = false;
+      }
+      this.onSettingsRepeaterChange();
+    };
+  },
+]);

app/integrations/storidge/components/nodes-datatable/storidgeNodesDatatable.html

@@ -2,16 +2,12 @@
   <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="actionBar">
         <div class="row">
-          <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.addNodeAction()">
-            <i class="fa fa-plus space-right" aria-hidden="true"></i>Add node
-          </button>
-          <div  style="margin-bottom: 0px;">
+          <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.addNodeAction()"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add node </button>
+          <div style="margin-bottom: 0px;">
             <span ng-if="$ctrl.addInfo" class="text-muted small">
               To add a node to this cluster, run the following command on your new node
               <code>
@@ -27,7 +23,15 @@
       </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-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover">
@@ -64,7 +68,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>
                 <a ui-sref="storidge.cluster.node({name: item.Name})"> {{ item.Name }}</a>
               </td>

app/integrations/storidge/components/nodes-datatable/storidgeNodesDatatable.js

@@ -7,6 +7,6 @@ angular.module('portainer.integrations.storidge').component('storidgeNodesDatata
     dataset: '<',
     tableKey: '@',
     orderBy: '@',
-    reverseOrder: '<'
-  }
+    reverseOrder: '<',
+  },
 });

app/integrations/storidge/components/nodes-datatable/storidgeNodesDatatableController.js

@@ -1,56 +1,62 @@
-angular.module('portainer.integrations.storidge')
-.controller('StoridgeNodesDatatableController', ['$scope', '$controller', 'clipboard', 'Notifications', 'StoridgeNodeService', 'DatatableService',
-function($scope, $controller, clipboard, Notifications, StoridgeNodeService, DatatableService) {
-  angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
+angular.module('portainer.integrations.storidge').controller('StoridgeNodesDatatableController', [
+  '$scope',
+  '$controller',
+  'clipboard',
+  'Notifications',
+  'StoridgeNodeService',
+  'DatatableService',
+  function ($scope, $controller, clipboard, Notifications, StoridgeNodeService, DatatableService) {
+    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
-  var ctrl = this;
+    var ctrl = this;
 
-  this.addNodeAction = function() {
-    StoridgeNodeService.add()
-      .then(function sucess(data) {
-        ctrl.addInfo = data.content;
-      })
-      .catch(function error(err) {
-        Notifications.error('Failure', err, 'Unable to retrieve the "add node" command');
-      });
-  };
+    this.addNodeAction = function () {
+      StoridgeNodeService.add()
+        .then(function sucess(data) {
+          ctrl.addInfo = data.content;
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to retrieve the "add node" command');
+        });
+    };
 
-  this.copyAddNodeCommand = function() {
-    clipboard.copyText(ctrl.addInfo);
-    $('#copyNotification').show();
-    $('#copyNotification').fadeOut(2000);
-  };
+    this.copyAddNodeCommand = function () {
+      clipboard.copyText(ctrl.addInfo);
+      $('#copyNotification').show();
+      $('#copyNotification').fadeOut(2000);
+    };
 
-  this.$onInit = function() {
-    this.setDefaults();
-    this.prepareTableFromDataset();
+    this.$onInit = function () {
+      this.setDefaults();
+      this.prepareTableFromDataset();
 
-    this.state.orderBy = this.orderBy;
-    var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-    if (storedOrder !== null) {
-      this.state.reverseOrder = storedOrder.reverse;
-      this.state.orderBy = storedOrder.orderBy;
-    }
+      this.state.orderBy = this.orderBy;
+      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
+      if (storedOrder !== null) {
+        this.state.reverseOrder = storedOrder.reverse;
+        this.state.orderBy = storedOrder.orderBy;
+      }
 
-    var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-    if (textFilter !== null) {
-      this.state.textFilter = textFilter;
-      this.onTextFilterChange();
-    }
+      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
+      if (textFilter !== null) {
+        this.state.textFilter = textFilter;
+        this.onTextFilterChange();
+      }
 
-    var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-    if (storedFilters !== null) {
-      this.filters = storedFilters;
-    }
-    if (this.filters && this.filters.state) {
-      this.filters.state.open = false;
-    }
+      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
+      if (storedFilters !== null) {
+        this.filters = storedFilters;
+      }
+      if (this.filters && this.filters.state) {
+        this.filters.state.open = false;
+      }
 
-    var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
-    if (storedSettings !== null) {
-      this.settings = storedSettings;
-      this.settings.open = false;
-    }
-    this.onSettingsRepeaterChange();
-  };
-}]);
+      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+      if (storedSettings !== null) {
+        this.settings = storedSettings;
+        this.settings.open = false;
+      }
+      this.onSettingsRepeaterChange();
+    };
+  },
+]);

app/integrations/storidge/components/profileSelector/storidgeProfileSelector.js

@@ -2,6 +2,6 @@ angular.module('portainer.integrations.storidge').component('storidgeProfileSele
   templateUrl: './storidgeProfileSelector.html',
   controller: 'StoridgeProfileSelectorController',
   bindings: {
-    'storidgeProfile': '='
-  }
+    storidgeProfile: '=',
+  },
 });

app/integrations/storidge/components/profileSelector/storidgeProfileSelectorController.js

@@ -1,17 +1,19 @@
-angular.module('portainer.integrations.storidge')
-.controller('StoridgeProfileSelectorController', ['StoridgeProfileService', 'Notifications',
-function (StoridgeProfileService, Notifications) {
-  var ctrl = this;
+angular.module('portainer.integrations.storidge').controller('StoridgeProfileSelectorController', [
+  'StoridgeProfileService',
+  'Notifications',
+  function (StoridgeProfileService, Notifications) {
+    var ctrl = this;
 
-  function initComponent() {
-    StoridgeProfileService.profiles()
-    .then(function success(data) {
-      ctrl.profiles = data;
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve Storidge profiles');
-    });
-  }
+    function initComponent() {
+      StoridgeProfileService.profiles()
+        .then(function success(data) {
+          ctrl.profiles = data;
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to retrieve Storidge profiles');
+        });
+    }
 
-  initComponent();
-}]);
+    initComponent();
+  },
+]);

app/integrations/storidge/components/profiles-datatable/storidgeProfilesDatatable.html

@@ -2,19 +2,24 @@
   <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="actionBar">
-        <button type="button" class="btn btn-sm btn-danger"
-          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
       </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-model-options="{ debounce: 300 }">
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+        />
       </div>
       <div class="table-responsive">
         <table class="table table-hover">
@@ -34,10 +39,13 @@
             </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>
                 <span class="md-checkbox">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
                   <label for="select_{{ $index }}"></label>
                 </span>
                 <a ui-sref="storidge.profiles.profile({id: item.Name})">{{ item.Name }}</a>
@@ -53,9 +61,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/integrations/storidge/components/profiles-datatable/storidgeProfilesDatatable.js

@@ -8,6 +8,6 @@ angular.module('portainer.integrations.storidge').component('storidgeProfilesDat
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    removeAction: '<'
-  }
+    removeAction: '<',
+  },
 });

app/integrations/storidge/components/snapshot-creation/storidgeSnapshotCreation.html

@@ -1,18 +1,22 @@
 <rd-widget>
-  <rd-widget-header icon="fa-plus" title-text="Create snapshot">
-  </rd-widget-header>
+  <rd-widget-header icon="fa-plus" title-text="Create snapshot"> </rd-widget-header>
   <rd-widget-body>
     <form class="form-horizontal">
       <div class="form-group">
         <label for="description" class="col-sm-3 col-lg-2 control-label text-left">Description</label>
         <div class="col-sm-9 col-lg-10">
-          <input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description">
+          <input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description" />
         </div>
       </div>
       <div class="form-group">
         <div class="col-sm-12">
-          <button type="button" class="btn btn-primary btn-sm" ng-disabled="$ctrl.state.actionInProgress"
-            ng-click="$ctrl.createSnapshot()" button-spinner="$ctrl.state.actionInProgress">
+          <button
+            type="button"
+            class="btn btn-primary btn-sm"
+            ng-disabled="$ctrl.state.actionInProgress"
+            ng-click="$ctrl.createSnapshot()"
+            button-spinner="$ctrl.state.actionInProgress"
+          >
             <span ng-hide="$ctrl.state.actionInProgress">Create snapshot</span>
             <span ng-show="$ctrl.state.actionInProgress">Creating snapshot...</span>
           </button>

app/integrations/storidge/components/snapshot-creation/storidgeSnapshotCreation.js

@@ -2,6 +2,6 @@ angular.module('portainer.docker').component('storidgeSnapshotCreation', {
   templateUrl: './storidgeSnapshotCreation.html',
   controller: 'StoridgeSnapshotCreationController',
   bindings: {
-    volumeId: '<'
-  }
+    volumeId: '<',
+  },
 });

app/integrations/storidge/components/snapshot-creation/storidgeSnapshotCreationController.js

@@ -1,26 +1,28 @@
-angular.module('portainer.docker')
-.controller('StoridgeSnapshotCreationController', ['StoridgeSnapshotService', 'Notifications', '$state',
-function (StoridgeSnapshotService, Notifications, $state) {
-  var ctrl = this;
+angular.module('portainer.docker').controller('StoridgeSnapshotCreationController', [
+  'StoridgeSnapshotService',
+  'Notifications',
+  '$state',
+  function (StoridgeSnapshotService, Notifications, $state) {
+    var ctrl = this;
 
-  this.formValues = {};
-  this.state = {
-    actionInProgress: false
-  };
+    this.formValues = {};
+    this.state = {
+      actionInProgress: false,
+    };
 
-  this.createSnapshot = function () {
-    ctrl.state.actionInProgress = true;
-    StoridgeSnapshotService.create(ctrl.volumeId, ctrl.formValues.Description)
-      .then(function success() {
-        Notifications.success('Success', 'Snapshot successfully created');
-        $state.reload();
-      })
-      .catch(function error(err) {
-        Notifications.error('Failure', err, 'Unable to create snapshot');
-      })
-      .finally(function final() {
-        ctrl.state.actionInProgress = false;
-      });
-  };
-
-}]);
+    this.createSnapshot = function () {
+      ctrl.state.actionInProgress = true;
+      StoridgeSnapshotService.create(ctrl.volumeId, ctrl.formValues.Description)
+        .then(function success() {
+          Notifications.success('Success', 'Snapshot successfully created');
+          $state.reload();
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to create snapshot');
+        })
+        .finally(function final() {
+          ctrl.state.actionInProgress = false;
+        });
+    };
+  },
+]);

app/integrations/storidge/components/snapshots-datatable/storidgeSnapshotsDatatable.html

@@ -2,19 +2,23 @@
   <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="actionBar">
-        <button type="button" class="btn btn-sm btn-danger"
-          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
       </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 }">
+        <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">
@@ -48,10 +52,13 @@
             </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>
                 <span class="md-checkbox">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" ng-disabled="item.Status === 'normal'"/>
+                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" ng-disabled="item.Status === 'normal'" />
                   <label for="select_{{ $index }}"></label>
                 </span>
                 <a ui-sref="docker.volumes.volume.snapshot({snapshotId: item.Id})"> {{ item.Id }}</a>
@@ -69,9 +76,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/integrations/storidge/components/snapshots-datatable/storidgeSnapshotsDatatable.js

@@ -8,6 +8,6 @@ angular.module('portainer.integrations.storidge').component('storidgeSnapshotsDa
     tableKey: '@',
     orderBy: '@',
     reverseOrder: '<',
-    removeAction: '<'
-  }
+    removeAction: '<',
+  },
 });

app/integrations/storidge/components/volume-storidge-info/volumeStoridgeInfo.html

@@ -80,31 +80,31 @@
         </tr>
         <tr>
           <td>IP</td>
-          <td>{{ $ctrl.volume.IP}}</td>
+          <td>{{ $ctrl.volume.IP }}</td>
         </tr>
         <tr>
           <td>Drive Type</td>
-          <td>{{ $ctrl.volume.DriveType}}</td>
+          <td>{{ $ctrl.volume.DriveType }}</td>
         </tr>
         <tr>
           <td>Encryption</td>
-          <td>{{ $ctrl.volume.Encryption}}</td>
+          <td>{{ $ctrl.volume.Encryption }}</td>
         </tr>
         <tr>
           <td>Snapshot Enabled</td>
-          <td>{{ $ctrl.volume.SnapshotEnabled}}</td>
+          <td>{{ $ctrl.volume.SnapshotEnabled }}</td>
         </tr>
         <tr>
           <td>Snapshot Interval</td>
-          <td>{{ $ctrl.volume.SnapshotInterval}} minute(s)</td>
+          <td>{{ $ctrl.volume.SnapshotInterval }} minute(s)</td>
         </tr>
         <tr>
           <td>Max Snapshots</td>
-          <td>{{ $ctrl.volume.SnapshotMax}}</td>
+          <td>{{ $ctrl.volume.SnapshotMax }}</td>
         </tr>
         <tr>
           <td>Filesystem</td>
-          <td>{{ $ctrl.volume.Filesystem}}</td>
+          <td>{{ $ctrl.volume.Filesystem }}</td>
         </tr>
         <tr ng-if="$ctrl.volume.Labels">
           <td>Labels</td>
@@ -126,7 +126,7 @@
       <div class="form-group">
         <label for="volume_node" class="col-sm-2 col-lg-1 control-label text-left">Node</label>
         <div class="col-sm-10 col-lg-11">
-          <input type="text" class="form-control" ng-model="$ctrl.formValues.Node" name="volume_node" placeholder="2">
+          <input type="text" class="form-control" ng-model="$ctrl.formValues.Node" name="volume_node" placeholder="2" />
         </div>
       </div>
       <!-- !Node -->
@@ -134,7 +134,7 @@
       <div class="form-group">
         <label for="volume_capacity" class="col-sm-2 col-lg-1 control-label text-left">Capacity</label>
         <div class="col-sm-10 col-lg-11">
-          <input type="text" class="form-control" ng-model="$ctrl.formValues.Capacity" name="volume_capacity" placeholder="2">
+          <input type="text" class="form-control" ng-model="$ctrl.formValues.Capacity" name="volume_capacity" placeholder="2" />
         </div>
       </div>
       <!-- !Capacity -->
@@ -142,13 +142,13 @@
       <div class="form-group">
         <label for="min_iops" class="col-sm-2 col-lg-1 control-label text-left">Min IOPS</label>
         <div class="col-sm-10 col-lg-11">
-          <input type="number" class="form-control" ng-model="$ctrl.formValues.IOPSMin" name="min_iops" placeholder="100">
+          <input type="number" class="form-control" ng-model="$ctrl.formValues.IOPSMin" name="min_iops" placeholder="100" />
         </div>
       </div>
       <div class="form-group">
         <label for="max_iops" class="col-sm-2 col-lg-1 control-label text-left">Max IOPS</label>
         <div class="col-sm-10 col-lg-11">
-          <input type="number" class="form-control" ng-model="$ctrl.formValues.IOPSMax" name="max_iops" placeholder="2000">
+          <input type="number" class="form-control" ng-model="$ctrl.formValues.IOPSMax" name="max_iops" placeholder="2000" />
         </div>
       </div>
       <!-- !IOPS -->
@@ -156,13 +156,13 @@
       <div class="form-group">
         <label for="min_bandwidth" class="col-sm-2 col-lg-1 control-label text-left">Min Bandwidth</label>
         <div class="col-sm-10 col-lg-11">
-          <input type="number" class="form-control" ng-model="$ctrl.formValues.BandwidthMin" name="min_bandwidth" placeholder="100">
+          <input type="number" class="form-control" ng-model="$ctrl.formValues.BandwidthMin" name="min_bandwidth" placeholder="100" />
         </div>
       </div>
       <div class="form-group">
         <label for="max_bandwidth" class="col-sm-2 col-lg-1 control-label text-left">Max Bandwidth</label>
         <div class="col-sm-10 col-lg-11">
-          <input type="number" class="form-control" ng-model="$ctrl.formValues.BandwidthMax" name="max_bandwidth" placeholder="2000">
+          <input type="number" class="form-control" ng-model="$ctrl.formValues.BandwidthMax" name="max_bandwidth" placeholder="2000" />
         </div>
       </div>
       <!-- !Bandwidth -->
@@ -179,11 +179,11 @@
           <div ng-repeat="label in $ctrl.formValues.Labels" style="margin-top: 2px;">
             <div class="input-group col-sm-5 input-group-sm">
               <span class="input-group-addon">name</span>
-              <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+              <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" />
             </div>
             <div class="input-group col-sm-5 input-group-sm">
               <span class="input-group-addon">value</span>
-              <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+              <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
             </div>
             <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLabel($index)">
               <i class="fa fa-trash" aria-hidden="true"></i>
@@ -195,4 +195,4 @@
       <!-- !labels -->
     </form>
   </rd-widget-body>
-</rd-widget>
+</rd-widget>

app/integrations/storidge/components/volume-storidge-info/volumeStoridgeInfo.js

@@ -2,6 +2,6 @@ angular.module('portainer.docker').component('volumeStoridgeInfo', {
   templateUrl: './volumeStoridgeInfo.html',
   controller: 'VolumeStoridgeInfoController',
   bindings: {
-    volume: '<'
-  }
+    volume: '<',
+  },
 });

app/integrations/storidge/components/volume-storidge-info/volumeStoridgeInfoController.js

@@ -1,103 +1,105 @@
-angular.module('portainer.docker')
-.controller('VolumeStoridgeInfoController', ['$state', 'StoridgeVolumeService', 'Notifications',
-function ($state, StoridgeVolumeService, Notifications) {
-  var ctrl = this;
+angular.module('portainer.docker').controller('VolumeStoridgeInfoController', [
+  '$state',
+  'StoridgeVolumeService',
+  'Notifications',
+  function ($state, StoridgeVolumeService, Notifications) {
+    var ctrl = this;
 
-  this.state = {
-    updateInProgress: false,
-    isUpdating: false
-  };
-
-  this.addLabel = function() {
-    this.formValues.Labels.push({ name: '', value: ''});
-  };
-
-  this.removeLabel = function(index) {
-    this.formValues.Labels.splice(index, 1);
-  };
-
-  this.initLabels = function() {
-    var labels = this.volume.Labels;
-    if (labels) {
-      this.formValues.Labels = Object.keys(labels).map(function(key) {
-        return { name:key, value:labels[key] };
-      });
-    }
-  };
-
-  this.updateVolume = function() {
-    this.state.updateInProgress = true;
-    this.formValues = {
-      IOPSMin: this.volume.IOPSMin,
-      IOPSMax: this.volume.IOPSMax,
-      Node: this.volume.Node,
-      Capacity: this.volume.Capacity,
-      BandwidthMin: this.volume.BandwidthMin,
-      BandwidthMax: this.volume.BandwidthMax,
-      Labels: []
+    this.state = {
+      updateInProgress: false,
+      isUpdating: false,
     };
-    this.initLabels();
-  };
 
-  this.cancelUpdate = function() {
-    this.state.updateInProgress = false;
-    this.formValues = {};
-  };
+    this.addLabel = function () {
+      this.formValues.Labels.push({ name: '', value: '' });
+    };
 
-  this.prepareLabels = function(volume) {
-    var labels = {};
-    this.formValues.Labels.forEach(function (label) {
-      if (label.name && label.value) {
-        labels[label.name] = label.value;
+    this.removeLabel = function (index) {
+      this.formValues.Labels.splice(index, 1);
+    };
+
+    this.initLabels = function () {
+      var labels = this.volume.Labels;
+      if (labels) {
+        this.formValues.Labels = Object.keys(labels).map(function (key) {
+          return { name: key, value: labels[key] };
+        });
       }
-    });
-    volume.Labels = labels;
-  };
+    };
 
-  this.prepareVolume = function() {
-    var volume = angular.copy(this.formValues);
-    var data = this.volume;
-    
-    if (volume.Node === data.Node || !volume.Node) {
-      delete volume.Node;
-    }
-    if (volume.Capacity === data.Capacity || !volume.Capacity) {
-      delete volume.Capacity;
-    }
-    if (volume.IOPSMin === data.IOPSMin || !volume.IOPSMin) {
-      delete volume.IOPSMin;
-    } else {
-      volume.IOPSMin = volume.IOPSMin.toString();
-    }
-    if (volume.IOPSMax === data.IOPSMax || !volume.IOPSMax) {
-      delete volume.IOPSMax;
-    } else {
-      volume.IOPSMax = volume.IOPSMax.toString();
-    }
-    if (volume.BandwidthMin === data.BandwidthMin || !volume.BandwidthMin) {
-      delete volume.BandwidthMin;
-    }
-    if (volume.BandwidthMax === data.BandwidthMax || !volume.BandwidthMax) {
-      delete volume.BandwidthMax;
-    }
-    this.prepareLabels(volume);
-    return volume;
-  };
+    this.updateVolume = function () {
+      this.state.updateInProgress = true;
+      this.formValues = {
+        IOPSMin: this.volume.IOPSMin,
+        IOPSMax: this.volume.IOPSMax,
+        Node: this.volume.Node,
+        Capacity: this.volume.Capacity,
+        BandwidthMin: this.volume.BandwidthMin,
+        BandwidthMax: this.volume.BandwidthMax,
+        Labels: [],
+      };
+      this.initLabels();
+    };
 
-  this.confirmUpdate = function() {
-    this.state.isUpdating = true;
+    this.cancelUpdate = function () {
+      this.state.updateInProgress = false;
+      this.formValues = {};
+    };
 
-    var volume = this.prepareVolume();
-    volume.Name = this.volume.Name;
-    StoridgeVolumeService.update(volume)
-    .then(function success() {
-      Notifications.success('Volume successfully updated');
-      $state.reload();
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update volume');
-      ctrl.state.isUpdating = false;
-    });
-  };
+    this.prepareLabels = function (volume) {
+      var labels = {};
+      this.formValues.Labels.forEach(function (label) {
+        if (label.name && label.value) {
+          labels[label.name] = label.value;
+        }
+      });
+      volume.Labels = labels;
+    };
 
-}]);
+    this.prepareVolume = function () {
+      var volume = angular.copy(this.formValues);
+      var data = this.volume;
+
+      if (volume.Node === data.Node || !volume.Node) {
+        delete volume.Node;
+      }
+      if (volume.Capacity === data.Capacity || !volume.Capacity) {
+        delete volume.Capacity;
+      }
+      if (volume.IOPSMin === data.IOPSMin || !volume.IOPSMin) {
+        delete volume.IOPSMin;
+      } else {
+        volume.IOPSMin = volume.IOPSMin.toString();
+      }
+      if (volume.IOPSMax === data.IOPSMax || !volume.IOPSMax) {
+        delete volume.IOPSMax;
+      } else {
+        volume.IOPSMax = volume.IOPSMax.toString();
+      }
+      if (volume.BandwidthMin === data.BandwidthMin || !volume.BandwidthMin) {
+        delete volume.BandwidthMin;
+      }
+      if (volume.BandwidthMax === data.BandwidthMax || !volume.BandwidthMax) {
+        delete volume.BandwidthMax;
+      }
+      this.prepareLabels(volume);
+      return volume;
+    };
+
+    this.confirmUpdate = function () {
+      this.state.isUpdating = true;
+
+      var volume = this.prepareVolume();
+      volume.Name = this.volume.Name;
+      StoridgeVolumeService.update(volume)
+        .then(function success() {
+          Notifications.success('Volume successfully updated');
+          $state.reload();
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to update volume');
+          ctrl.state.isUpdating = false;
+        });
+    };
+  },
+]);