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/log-viewer/log-viewer.js

@@ -6,6 +6,6 @@ angular.module('portainer.docker').component('logViewer', {
     displayTimestamps: '=',
     logCollectionChange: '<',
     sinceTimestamp: '=',
-    lineCount: '='
-  }
+    lineCount: '=',
+  },
 });

app/docker/components/log-viewer/logViewer.html

@@ -11,7 +11,11 @@
                 <portainer-tooltip position="bottom" message="Disabling this option allows you to pause the log collection process and the auto-scrolling."></portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px;">
-                <input type="checkbox" ng-model="$ctrl.state.logCollection" ng-change="$ctrl.state.autoScroll = $ctrl.state.logCollection; $ctrl.logCollectionChange($ctrl.state.logCollection)"><i></i>
+                <input
+                  type="checkbox"
+                  ng-model="$ctrl.state.logCollection"
+                  ng-change="$ctrl.state.autoScroll = $ctrl.state.logCollection; $ctrl.logCollectionChange($ctrl.state.logCollection)"
+                /><i></i>
               </label>
             </div>
           </div>
@@ -20,9 +24,7 @@
               <label for="tls" class="control-label text-left">
                 Wrap lines
               </label>
-              <label class="switch" style="margin-left: 20px;">
-                <input type="checkbox" ng-model="$ctrl.state.wrapLines"><i></i>
-              </label>
+              <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="$ctrl.state.wrapLines" /><i></i> </label>
             </div>
           </div>
           <div class="form-group">
@@ -30,9 +32,7 @@
               <label for="tls" class="control-label text-left">
                 Display timestamps
               </label>
-              <label class="switch" style="margin-left: 20px;">
-               <input type="checkbox" ng-model="$ctrl.displayTimestamps"><i></i>
-               </label>
+              <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="$ctrl.displayTimestamps" /><i></i> </label>
             </div>
           </div>
           <div class="form-group">
@@ -51,7 +51,7 @@
               Search
             </label>
             <div class="col-sm-11">
-              <input class="form-control" type="text" name="logs_search" ng-model="$ctrl.state.search" ng-change="$ctrl.state.selectedLines.length = 0;" placeholder="Filter...">
+              <input class="form-control" type="text" name="logs_search" ng-model="$ctrl.state.search" ng-change="$ctrl.state.selectedLines.length = 0;" placeholder="Filter..." />
             </div>
           </div>
           <div class="form-group">
@@ -59,7 +59,7 @@
               Lines
             </label>
             <div class="col-sm-11">
-              <input class="form-control" type="number" name="lines_count" ng-model="$ctrl.lineCount" placeholder="Enter no of lines...">
+              <input class="form-control" type="number" name="lines_count" ng-model="$ctrl.lineCount" placeholder="Enter no of lines..." />
             </div>
           </div>
           <div class="form-group" ng-if="$ctrl.state.copySupported">
@@ -67,9 +67,21 @@
               Actions
             </label>
             <div class="col-sm-11">
-              <button class="btn btn-primary btn-sm" ng-click="$ctrl.copy()" ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</button>
-              <button class="btn btn-primary btn-sm" ng-click="$ctrl.copySelection()" ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length || !$ctrl.state.selectedLines.length"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy selected lines</button>
-              <button class="btn btn-primary btn-sm" ng-click="$ctrl.clearSelection()" ng-disabled="$ctrl.state.selectedLines.length === 0"><i class="fa fa-times space-right" aria-hidden="true"></i>Unselect</button>
+              <button
+                class="btn btn-primary btn-sm"
+                ng-click="$ctrl.copy()"
+                ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length"
+                ><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</button
+              >
+              <button
+                class="btn btn-primary btn-sm"
+                ng-click="$ctrl.copySelection()"
+                ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length || !$ctrl.state.selectedLines.length"
+                ><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy selected lines</button
+              >
+              <button class="btn btn-primary btn-sm" ng-click="$ctrl.clearSelection()" ng-disabled="$ctrl.state.selectedLines.length === 0"
+                ><i class="fa fa-times space-right" aria-hidden="true"></i>Unselect</button
+              >
               <span>
                 <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none;"></i>
               </span>
@@ -81,9 +93,9 @@
   </div>
 </div>
 
-<div class="row" style="height:54%;">
-  <div class="col-sm-12" style="height:100%;">
-    <pre ng-class="{ 'wrap_lines': $ctrl.state.wrapLines }" class="log_viewer" scroll-glue="$ctrl.state.autoScroll" force-glue>
+<div class="row" style="height: 54%;">
+  <div class="col-sm-12" style="height: 100%;">
+    <pre ng-class="{ wrap_lines: $ctrl.state.wrapLines }" class="log_viewer" scroll-glue="$ctrl.state.autoScroll" force-glue>
       <div ng-repeat="line in $ctrl.state.filteredLogs = ($ctrl.data | filter:$ctrl.state.search) track by $index" class="line" ng-if="line"><p class="inner_line" ng-click="$ctrl.selectLine(line)" ng-class="{ 'line_selected': $ctrl.state.selectedLines.indexOf(line) > -1 }">{{ line }}</p></div>
       <div ng-if="!$ctrl.state.filteredLogs.length" class="line"><p class="inner_line">No log line matching the '{{ $ctrl.state.search }}' filter</p></div>
       <div ng-if="$ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]" class="line"><p class="inner_line">No logs available</p></div>

app/docker/components/log-viewer/logViewerController.js

@@ -1,47 +1,47 @@
 import moment from 'moment';
 
-angular.module('portainer.docker')
-.controller('LogViewerController', ['clipboard',
-function (clipboard) {
+angular.module('portainer.docker').controller('LogViewerController', [
+  'clipboard',
+  function (clipboard) {
+    this.state = {
+      availableSinceDatetime: [
+        { desc: 'Last day', value: moment().subtract(1, 'days').format() },
+        { desc: 'Last 4 hours', value: moment().subtract(4, 'hours').format() },
+        { desc: 'Last hour', value: moment().subtract(1, 'hours').format() },
+        { desc: 'Last 10 minutes', value: moment().subtract(10, 'minutes').format() },
+      ],
+      copySupported: clipboard.supported,
+      logCollection: true,
+      autoScroll: true,
+      wrapLines: true,
+      search: '',
+      filteredLogs: [],
+      selectedLines: [],
+    };
 
-  this.state = {
-    availableSinceDatetime: [
-      { desc: 'Last day', value: moment().subtract(1, 'days').format() },
-      { desc: 'Last 4 hours', value: moment().subtract(4, 'hours').format() },
-      { desc: 'Last hour', value: moment().subtract(1, 'hours').format() },
-      { desc: 'Last 10 minutes', value: moment().subtract(10, 'minutes').format() }
-    ],
-    copySupported: clipboard.supported,
-    logCollection: true,
-    autoScroll: true,
-    wrapLines: true,
-    search: '',
-    filteredLogs: [],
-    selectedLines: []
-  };
+    this.copy = function () {
+      clipboard.copyText(this.state.filteredLogs);
+      $('#refreshRateChange').show();
+      $('#refreshRateChange').fadeOut(2000);
+    };
 
-  this.copy = function() {
-    clipboard.copyText(this.state.filteredLogs);
-    $('#refreshRateChange').show();
-    $('#refreshRateChange').fadeOut(2000);
-  };
+    this.copySelection = function () {
+      clipboard.copyText(this.state.selectedLines);
+      $('#refreshRateChange').show();
+      $('#refreshRateChange').fadeOut(2000);
+    };
 
-  this.copySelection = function() {
-    clipboard.copyText(this.state.selectedLines);
-    $('#refreshRateChange').show();
-    $('#refreshRateChange').fadeOut(2000);
-  };
+    this.clearSelection = function () {
+      this.state.selectedLines = [];
+    };
 
-  this.clearSelection = function() {
-    this.state.selectedLines = [];
-  };
-
-  this.selectLine = function(line) {
-    var idx = this.state.selectedLines.indexOf(line);
-    if (idx === -1) {
-      this.state.selectedLines.push(line);
-    } else {
-      this.state.selectedLines.splice(idx, 1);
-    }
-  };
-}]);
+    this.selectLine = function (line) {
+      var idx = this.state.selectedLines.indexOf(line);
+      if (idx === -1) {
+        this.state.selectedLines.push(line);
+      } else {
+        this.state.selectedLines.splice(idx, 1);
+      }
+    };
+  },
+]);