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/docker/components/host-view-panels/devices-panel/devices-panel.html

@@ -12,8 +12,8 @@
           </thead>
           <tbody>
             <tr ng-if="$ctrl.devices && $ctrl.devices.length" ng-repeat="device in $ctrl.devices">
-              <td>{{device.Name}}</td>
-              <td>{{device.Vendor}}</td>
+              <td>{{ device.Name }}</td>
+              <td>{{ device.Vendor }}</td>
             </tr>
             <tr ng-if="!$ctrl.devices">
               <td colspan="2" class="text-center text-muted">Loading...</td>
@@ -28,4 +28,4 @@
       </rd-widget-body>
     </rd-widget>
   </div>
-</div>
+</div>

app/docker/components/host-view-panels/devices-panel/devices-panel.js

@@ -1,6 +1,6 @@
 angular.module('portainer.docker').component('devicesPanel', {
   templateUrl: './devices-panel.html',
   bindings: {
-    devices: '<'
-  }
+    devices: '<',
+  },
 });

app/docker/components/host-view-panels/disks-panel/disks-panel.html

@@ -12,8 +12,8 @@
           </thead>
           <tbody>
             <tr ng-if="$ctrl.disks" ng-repeat="disk in $ctrl.disks">
-              <td>{{disk.Vendor}}</td>
-              <td>{{disk.Size | humansize}}</td>
+              <td>{{ disk.Vendor }}</td>
+              <td>{{ disk.Size | humansize }}</td>
             </tr>
             <tr ng-if="!$ctrl.disks">
               <td colspan="2" class="text-center text-muted">Loading...</td>
@@ -28,4 +28,4 @@
       </rd-widget-body>
     </rd-widget>
   </div>
-</div>
+</div>

app/docker/components/host-view-panels/disks-panel/disks-panel.js

@@ -1,6 +1,6 @@
 angular.module('portainer.docker').component('disksPanel', {
   templateUrl: './disks-panel.html',
   bindings: {
-    disks: '<'
-  }
+    disks: '<',
+  },
 });

app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.html

@@ -7,7 +7,9 @@
           <tbody>
             <tr>
               <td>Version</td>
-              <td>{{ $ctrl.engine.releaseVersion }} <span ng-if="$ctrl.engine.apiVersion">(API: {{ $ctrl.engine.apiVersion }})</span></td>
+              <td
+                >{{ $ctrl.engine.releaseVersion }} <span ng-if="$ctrl.engine.apiVersion">(API: {{ $ctrl.engine.apiVersion }})</span></td
+              >
             </tr>
             <tr ng-if="$ctrl.engine.rootDirectory">
               <td>Root directory</td>
@@ -31,11 +33,11 @@
             </tr>
             <tr ng-if="$ctrl.engine.engineLabels.length">
               <td>Engine Labels</td>
-              <td>{{ $ctrl.engine.engineLabels | labelsToStr:', ' }}</td>
+              <td>{{ $ctrl.engine.engineLabels | labelsToStr: ', ' }}</td>
             </tr>
           </tbody>
         </table>
       </rd-widget-body>
     </rd-widget>
   </div>
-</div>
+</div>

app/docker/components/host-view-panels/engine-details-panel/engine-details-panel.js

@@ -1,6 +1,6 @@
 angular.module('portainer.docker').component('engineDetailsPanel', {
   templateUrl: './engine-details-panel.html',
   bindings: {
-    engine: '<'
-  }
+    engine: '<',
+  },
 });

app/docker/components/host-view-panels/host-details-panel/host-details-panel.html

@@ -11,8 +11,7 @@
             </tr>
             <tr ng-if="$ctrl.host.os">
               <td>OS Information</td>
-              <td>{{ $ctrl.host.os.type }} {{$ctrl.host.os.arch}}
-                {{$ctrl.host.os.name}}</td>
+              <td>{{ $ctrl.host.os.type }} {{ $ctrl.host.os.arch }} {{ $ctrl.host.os.name }}</td>
             </tr>
             <tr ng-if="$ctrl.host.kernelVersion">
               <td>Kernel Version</td>
@@ -28,10 +27,10 @@
             </tr>
             <tr ng-if="$ctrl.isBrowseEnabled || $ctrl.isJobEnabled">
               <td colspan="2">
-                <button class="btn btn-primary btn-sm" title="Browse" ng-if="$ctrl.isBrowseEnabled" ui-sref="{{$ctrl.browseUrl}}">
+                <button class="btn btn-primary btn-sm" title="Browse" ng-if="$ctrl.isBrowseEnabled" ui-sref="{{ $ctrl.browseUrl }}">
                   Browse
                 </button>
-                <button class="btn btn-primary btn-sm" title="Execute job" ng-if="$ctrl.isJobEnabled" ui-sref="{{$ctrl.jobUrl}}">
+                <button class="btn btn-primary btn-sm" title="Execute job" ng-if="$ctrl.isJobEnabled" ui-sref="{{ $ctrl.jobUrl }}">
                   Execute job
                 </button>
               </td>

app/docker/components/host-view-panels/host-details-panel/host-details-panel.js

@@ -5,6 +5,6 @@ angular.module('portainer.docker').component('hostDetailsPanel', {
     isJobEnabled: '<',
     isBrowseEnabled: '<',
     browseUrl: '@',
-    jobUrl: '@'
-  }
+    jobUrl: '@',
+  },
 });

app/docker/components/host-view-panels/node-availability-select/node-availability-select-controller.js

@@ -1,11 +1,9 @@
-angular
-  .module('portainer.docker')
-  .controller('NodeAvailabilitySelectController', [
-    function NodeAvailabilitySelectController() {
-      this.onChange = onChange;
+angular.module('portainer.docker').controller('NodeAvailabilitySelectController', [
+  function NodeAvailabilitySelectController() {
+    this.onChange = onChange;
 
-      function onChange() {
-        this.onSave({ availability: this.availability });
-      }
+    function onChange() {
+      this.onSave({ availability: this.availability });
     }
-  ]);
+  },
+]);

app/docker/components/host-view-panels/node-availability-select/node-availability-select.html

@@ -1,8 +1,7 @@
 <div class="input-group input-group-sm">
-  <select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability"
-    ng-change="$ctrl.onChange()">
+  <select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability" ng-change="$ctrl.onChange()">
     <option value="active">Active</option>
     <option value="pause">Pause</option>
     <option value="drain">Drain</option>
   </select>
-</div>
+</div>

app/docker/components/host-view-panels/node-availability-select/node-availability-select.js

@@ -4,6 +4,6 @@ angular.module('portainer.docker').component('nodeAvailabilitySelect', {
   bindings: {
     availability: '<',
     originalValue: '<',
-    onSave: '&'
-  }
+    onSave: '&',
+  },
 });

app/docker/components/host-view-panels/node-labels-table/node-labels-table-controller.js

@@ -12,12 +12,9 @@ angular.module('portainer.docker').controller('NodeLabelsTableController', [
     }
 
     function updateLabel(label) {
-      if (
-        label.value !== label.originalValue ||
-        label.key !== label.originalKey
-      ) {
+      if (label.value !== label.originalValue || label.key !== label.originalKey) {
         ctrl.onChangedLabels({ labels: ctrl.labels });
       }
     }
-  }
+  },
 ]);

app/docker/components/host-view-panels/node-labels-table/node-labels-table.html

@@ -14,15 +14,13 @@
       <td>
         <div class="input-group input-group-sm">
           <span class="input-group-addon fit-text-size">Name</span>
-          <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo"
-            ng-change="$ctrl.updateLabel(label)">
+          <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="$ctrl.updateLabel(label)" />
         </div>
       </td>
       <td>
         <div class="input-group input-group-sm">
           <span class="input-group-addon fit-text-size">Value</span>
-          <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar"
-            ng-change="$ctrl.updateLabel(label)">
+          <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="$ctrl.updateLabel(label)" />
           <span class="input-group-btn">
             <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLabel($index)">
               <i class="fa fa-trash" aria-hidden="true"></i>
@@ -32,4 +30,4 @@
       </td>
     </tr>
   </tbody>
-</table>
+</table>

app/docker/components/host-view-panels/node-labels-table/node-labels-table.js

@@ -3,6 +3,6 @@ angular.module('portainer.docker').component('nodeLabelsTable', {
   controller: 'NodeLabelsTableController',
   bindings: {
     labels: '<',
-    onChangedLabels: '&'
-  }
+    onChangedLabels: '&',
+  },
 });

app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel-controller.js

@@ -1,96 +1,91 @@
-angular
-  .module('portainer.docker')
-  .controller('SwarmNodeDetailsPanelController', [
-    'NodeService', 'LabelHelper', 'Notifications', '$state',
-    function SwarmNodeDetailsPanelController(NodeService, LabelHelper, Notifications, $state) {
-      var ctrl = this;
-      ctrl.state = {
-        managerAddress: '',
-        hasChanges: false
-      };
-      ctrl.$onChanges = $onChanges;
-      ctrl.addLabel = addLabel;
-      ctrl.updateNodeLabels = updateNodeLabels;
-      ctrl.updateNodeAvailability = updateNodeAvailability;
-      ctrl.saveChanges = saveChanges;
-      ctrl.cancelChanges = cancelChanges;
+angular.module('portainer.docker').controller('SwarmNodeDetailsPanelController', [
+  'NodeService',
+  'LabelHelper',
+  'Notifications',
+  '$state',
+  function SwarmNodeDetailsPanelController(NodeService, LabelHelper, Notifications, $state) {
+    var ctrl = this;
+    ctrl.state = {
+      managerAddress: '',
+      hasChanges: false,
+    };
+    ctrl.$onChanges = $onChanges;
+    ctrl.addLabel = addLabel;
+    ctrl.updateNodeLabels = updateNodeLabels;
+    ctrl.updateNodeAvailability = updateNodeAvailability;
+    ctrl.saveChanges = saveChanges;
+    ctrl.cancelChanges = cancelChanges;
 
-      var managerRole = 'manager';
+    var managerRole = 'manager';
 
-      function $onChanges() {
-        if (!ctrl.details) {
-          return;
-        }
-        if (ctrl.details.role === managerRole) {
-          ctrl.state.managerAddress = '(' + ctrl.details.managerAddress + ')';
-        }
+    function $onChanges() {
+      if (!ctrl.details) {
+        return;
       }
-
-      function addLabel() {
-        ctrl.details.nodeLabels.push({
-          key: '',
-          value: '',
-          originalValue: '',
-          originalKey: ''
-        });
-      }
-
-      function updateNodeLabels(labels) {
-        ctrl.details.nodeLabels = labels;
-        ctrl.state.hasChanges = true;
-      }
-
-      function updateNodeAvailability(availability) {
-        ctrl.details.availability = availability;
-        ctrl.state.hasChanges = true;
-      }
-
-      function saveChanges() {
-        var originalNode = ctrl.originalNode;
-        var config = {
-          Name: originalNode.Name,
-          Availability: ctrl.details.availability,
-          Role: originalNode.Role,
-          Labels: LabelHelper.fromKeyValueToLabelHash(ctrl.details.nodeLabels),
-          Id: originalNode.Id,
-          Version: originalNode.Version
-        };
-
-        NodeService.updateNode(config)
-          .then(onUpdateSuccess)
-          .catch(notifyOnError);
-
-        function onUpdateSuccess() {
-          Notifications.success('Node successfully updated', 'Node updated');
-          $state.go(
-            'docker.nodes.node',
-            { id: originalNode.Id },
-            { reload: true }
-          );
-        }
-
-        function notifyOnError(error) {
-          Notifications.error('Failure', error, 'Failed to update node');
-        }
-      }
-
-      function cancelChanges() {
-        cancelLabelChanges();
-        ctrl.details.availability = ctrl.originalNode.Availability;
-        ctrl.state.hasChanges = false;
-      }
-
-      function cancelLabelChanges() {
-        ctrl.details.nodeLabels = ctrl.details.nodeLabels
-          .filter(function(label) {
-            return label.originalValue || label.originalKey;
-          })
-          .map(function(label) {
-            return Object.assign(label, {
-              value: label.originalValue,
-              key: label.originalKey
-            });
-          });
+      if (ctrl.details.role === managerRole) {
+        ctrl.state.managerAddress = '(' + ctrl.details.managerAddress + ')';
       }
     }
-  ]);
+
+    function addLabel() {
+      ctrl.details.nodeLabels.push({
+        key: '',
+        value: '',
+        originalValue: '',
+        originalKey: '',
+      });
+    }
+
+    function updateNodeLabels(labels) {
+      ctrl.details.nodeLabels = labels;
+      ctrl.state.hasChanges = true;
+    }
+
+    function updateNodeAvailability(availability) {
+      ctrl.details.availability = availability;
+      ctrl.state.hasChanges = true;
+    }
+
+    function saveChanges() {
+      var originalNode = ctrl.originalNode;
+      var config = {
+        Name: originalNode.Name,
+        Availability: ctrl.details.availability,
+        Role: originalNode.Role,
+        Labels: LabelHelper.fromKeyValueToLabelHash(ctrl.details.nodeLabels),
+        Id: originalNode.Id,
+        Version: originalNode.Version,
+      };
+
+      NodeService.updateNode(config).then(onUpdateSuccess).catch(notifyOnError);
+
+      function onUpdateSuccess() {
+        Notifications.success('Node successfully updated', 'Node updated');
+        $state.go('docker.nodes.node', { id: originalNode.Id }, { reload: true });
+      }
+
+      function notifyOnError(error) {
+        Notifications.error('Failure', error, 'Failed to update node');
+      }
+    }
+
+    function cancelChanges() {
+      cancelLabelChanges();
+      ctrl.details.availability = ctrl.originalNode.Availability;
+      ctrl.state.hasChanges = false;
+    }
+
+    function cancelLabelChanges() {
+      ctrl.details.nodeLabels = ctrl.details.nodeLabels
+        .filter(function (label) {
+          return label.originalValue || label.originalKey;
+        })
+        .map(function (label) {
+          return Object.assign(label, {
+            value: label.originalValue,
+            key: label.originalKey,
+          });
+        });
+    }
+  },
+]);

app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html

@@ -16,22 +16,24 @@
             <tr>
               <td>Availability</td>
               <td>
-                <node-availability-select on-save="$ctrl.updateNodeAvailability(availability)"
-                  availability="$ctrl.details.availability" original-value="$ctrl.details.availability">
+                <node-availability-select
+                  on-save="$ctrl.updateNodeAvailability(availability)"
+                  availability="$ctrl.details.availability"
+                  original-value="$ctrl.details.availability"
+                >
                 </node-availability-select>
               </td>
             </tr>
             <tr>
               <td>Status</td>
-              <td><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{
-                  $ctrl.details.status }}</span></td>
+              <td
+                ><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{ $ctrl.details.status }}</span></td
+              >
             </tr>
             <tr>
               <td>
                 <div class="nopadding">
-                  <a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)">
-                    <i class="fa fa-plus-circle" aria-hidden="true"></i> label
-                  </a>
+                  <a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> label </a>
                 </div>
                 Node Labels
               </td>
@@ -39,20 +41,17 @@
             </tr>
             <tr>
               <td colspan="2">
-                <node-labels-table labels="$ctrl.details.nodeLabels"
-                  on-changed-labels="$ctrl.updateNodeLabels(labels)"></node-labels-table>
+                <node-labels-table labels="$ctrl.details.nodeLabels" on-changed-labels="$ctrl.updateNodeLabels(labels)"></node-labels-table>
               </td>
             </tr>
             <tr>
               <td>
                 <div class="btn-toolbar" role="toolbar">
                   <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-primary btn-sm"
-                      ng-disabled="!$ctrl.state.hasChanges" ng-click="$ctrl.saveChanges()">
+                    <button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.state.hasChanges" ng-click="$ctrl.saveChanges()">
                       Apply changes
                     </button>
-                    <button type="button" class="btn btn-default btn-sm dropdown-toggle"
-                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu">
@@ -64,8 +63,7 @@
             </tr>
           </tbody>
         </table>
-
       </rd-widget-body>
     </rd-widget>
   </div>
-</div>
+</div>

app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.js

@@ -3,6 +3,6 @@ angular.module('portainer.docker').component('swarmNodeDetailsPanel', {
   controller: 'SwarmNodeDetailsPanelController',
   bindings: {
     details: '<',
-    originalNode: '<'
-  }
+    originalNode: '<',
+  },
 });