From 8256e82eceb917bff194f9e9c610afbb53d76428 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tspmelo@gmail.com>
Date: Tue, 25 Sep 2018 15:43:35 +0100
Subject: [PATCH] mgr/dashboard: Add html linter and fix lint errors

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../frontend/html-linter.config.json          | 12 ++++
 .../mgr/dashboard/frontend/package-lock.json  | 11 ++++
 .../mgr/dashboard/frontend/package.json       |  4 +-
 .../block/rbd-form/rbd-form.component.html    | 35 ++++++-----
 .../block/rbd-list/rbd-list.component.html    |  6 +-
 .../rbd-snapshot-form.component.html          | 14 +++--
 .../cephfs-list/cephfs-list.component.html    |  2 +-
 .../osd/osd-list/osd-list.component.html      |  7 ++-
 .../dashboard/health/health.component.html    | 56 ++++++++++--------
 .../info-card/info-card.component.html        | 11 ++--
 .../auth/user-form/user-form.component.html   | 59 +++++++++----------
 .../navigation/navigation.component.html      | 23 --------
 .../datatable/table/table.component.html      |  5 +-
 13 files changed, 133 insertions(+), 112 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard/frontend/html-linter.config.json

diff --git a/src/pybind/mgr/dashboard/frontend/html-linter.config.json b/src/pybind/mgr/dashboard/frontend/html-linter.config.json
new file mode 100644
index 0000000000000..bf91475d80ff8
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/html-linter.config.json
@@ -0,0 +1,12 @@
+{
+  "files": ["src/**/*.html"],
+  "indentation": {
+    "char": "space",
+    "number": 2
+  },
+  "attributes": {
+    "quotes": "double",
+    "whitespace": 0,
+    "vertical-align": true
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
index 92f0325e761a8..a7e597617e18a 100644
--- a/src/pybind/mgr/dashboard/frontend/package-lock.json
+++ b/src/pybind/mgr/dashboard/frontend/package-lock.json
@@ -5072,6 +5072,17 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
+    "html-linter": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/html-linter/-/html-linter-1.0.8.tgz",
+      "integrity": "sha1-pAnzgLFh0mlhqQyO1m+aWzpdRtI=",
+      "dev": true,
+      "requires": {
+        "colors": "^1.1.2",
+        "commander": "^2.12.2",
+        "glob": "^7.1.2"
+      }
+    },
     "html-minifier": {
       "version": "3.5.20",
       "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.20.tgz",
diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
index 15b2709610af1..7678416a5991b 100644
--- a/src/pybind/mgr/dashboard/frontend/package.json
+++ b/src/pybind/mgr/dashboard/frontend/package.json
@@ -11,7 +11,8 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "prettier": "prettier --write \"{src,e2e}/**/*.{ts,scss}\"",
-    "prettier:lint": "prettier --list-different \"{src,e2e}/**/*.{ts,scss}\""
+    "prettier:lint": "prettier --list-different \"{src,e2e}/**/*.{ts,scss}\"",
+    "lint:html": "html-linter --config html-linter.config.json"
   },
   "private": true,
   "jest": {
@@ -74,6 +75,7 @@
     "@types/node": "8.10.23",
     "babel-preset-env": "1.7.0",
     "codelyzer": "4.4.3",
+    "html-linter": "1.0.8",
     "jasmine-core": "3.1.0",
     "jasmine-spec-reporter": "4.2.1",
     "jest": "23.4.2",
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
index d03f3edfeff43..aeacc06f161e3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
@@ -238,9 +238,9 @@
             </label>
             <div class="col-sm-9">
               <select id="obj_size"
-                    name="obj_size"
-                    class="form-control"
-                    formControlName="obj_size">
+                      name="obj_size"
+                      class="form-control"
+                      formControlName="obj_size">
                 <option *ngFor="let objectSize of objectSizes"
                         [value]="objectSize">{{ objectSize }}</option>
               </select>
@@ -252,15 +252,18 @@
                [ngClass]="{'has-error': rbdForm.showError('stripingUnit', formDir)}">
             <label class="control-label col-sm-3"
                    for="stripingUnit">
-              <span i18n>Stripe unit</span><span class="required"
-                                 *ngIf="rbdForm.getValue('stripingCount')"></span>
+              <span i18n>Stripe unit</span>
+              <span class="required"
+                    *ngIf="rbdForm.getValue('stripingCount')">
+              </span>
             </label>
             <div class="col-sm-9">
               <select id="stripingUnit"
-                    name="stripingUnit"
-                    class="form-control"
-                    formControlName="stripingUnit">
-                <option i18n [ngValue]="null">-- Select stripe unit --</option>
+                      name="stripingUnit"
+                      class="form-control"
+                      formControlName="stripingUnit">
+                <option i18n
+                        [ngValue]="null">-- Select stripe unit --</option>
                 <option *ngFor="let objectSize of objectSizes"
                         [value]="objectSize">{{ objectSize }}</option>
               </select>
@@ -270,10 +273,10 @@
                 This field is required because stripe count is defined!
               </span>
               <span i18n
-                  class="help-block"
-                  *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')">
-              Stripe unit is greater than object size.
-            </span>
+                    class="help-block"
+                    *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')">
+                Stripe unit is greater than object size.
+              </span>
             </div>
           </div>
 
@@ -282,8 +285,10 @@
                [ngClass]="{'has-error': rbdForm.showError('stripingCount', formDir)}">
             <label class="control-label col-sm-3"
                    for="stripingCount">
-              <span i18n>Stripe count</span><span class="required"
-                                  *ngIf="rbdForm.getValue('stripingUnit')"></span>
+              <span i18n>Stripe count</span>
+              <span class="required"
+                    *ngIf="rbdForm.getValue('stripingUnit')">
+              </span>
             </label>
             <div class="col-sm-9">
               <input id="stripingCount"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
index 686c749fa9a84..af73500de7887 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
@@ -11,9 +11,9 @@
           selectionType="single"
           (updateSelection)="updateSelection($event)">
   <cd-table-actions class="table-actions"
-    [permission]="permission"
-    [selection]="selection"
-    [tableActions]="tableActions">
+                    [permission]="permission"
+                    [selection]="selection"
+                    [tableActions]="tableActions">
   </cd-table-actions>
   <cd-rbd-details cdTableDetail
                   [selection]="selection">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
index 38ca9d07f688c..61fbf0237f583 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
@@ -1,6 +1,9 @@
 <div class="modal-header">
   <h4 class="modal-title pull-left">{{ editing ? 'Rename' : 'Create' }} RBD Snapshot</h4>
-  <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+  <button type="button"
+          class="close pull-right"
+          aria-label="Close"
+          (click)="modalRef.hide()">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
@@ -30,8 +33,8 @@
         <span i18n
               class="help-block"
               *ngIf="snapshotForm.showError('snapshotName', formDir, 'required')">
-              This field is required.
-            </span>
+          This field is required.
+        </span>
       </div>
     </div>
 
@@ -43,8 +46,9 @@
                         (submitAction)="submit()">
         {{ editing ? 'Rename' : 'Create' }} Snapshot
       </cd-submit-button>
-      <button type="button" class="btn btn-sm btn-default" (click)="modalRef.hide()">Close</button>
+      <button type="button"
+              class="btn btn-sm btn-default"
+              (click)="modalRef.hide()">Close</button>
     </div>
   </div>
 </form>
-
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
index b3fecb3eca39b..5f1b3a3f6c6c7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.html
@@ -7,6 +7,6 @@
           selectionType="single"
           (updateSelection)="updateSelection($event)">
   <cd-cephfs-detail cdTableDetail
-             [selection]="selection">
+                    [selection]="selection">
   </cd-cephfs-detail>
 </cd-table>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index b0148ccb796ea..71d6fec3e3858 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -27,10 +27,13 @@
   </cd-osd-details>
 </cd-table>
 
-<ng-template #statusColor let-value="value">
+<ng-template #statusColor
+             let-value="value">
   <span *ngFor="let state of value; last as last">
     <span class="label"
-           [ngClass]="{'label-success': ['in', 'up'].includes(state), 'label-danger': ['down', 'out'].includes(state)}">{{ state }}</span>
+          [ngClass]="{'label-success': ['in', 'up'].includes(state), 'label-danger': ['down', 'out'].includes(state)}">
+      {{ state }}
+    </span>
     <span *ngIf="!last">&nbsp;</span>
   </span>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
index f579e3873858a..4d93b698e9ee9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
@@ -1,4 +1,5 @@
-<div *ngIf="contentData" class="container-fluid">
+<div *ngIf="contentData"
+     class="container-fluid">
   <cd-info-group groupTitle="Status"
                  i18n-groupTitle
                  class="row info-group">
@@ -10,7 +11,8 @@
                   contentClass="content-highlight"
                   (click)="contentData.health.checks.length > 0 ? healthChecksTarget.toggle() : ''">
       <ng-template #healthChecks>
-        <p class="logs-link" i18n>
+        <p class="logs-link"
+           i18n>
           &rarr; See <a (click)="viewportScroller.scrollToAnchor('logs')">Logs</a> for more details.
         </p>
         <ul>
@@ -21,10 +23,10 @@
       </ng-template>
       <div class="health-popover-wrapper">
         <div [ngStyle]="contentData.health.status | healthColor"
-              [popover]="contentData.health.checks.length > 0 ? healthChecks : ''"
-              triggers=""
-              #healthChecksTarget="bs-popover"
-              placement="bottom">
+             [popover]="contentData.health.checks.length > 0 ? healthChecks : ''"
+             triggers=""
+             #healthChecksTarget="bs-popover"
+             placement="bottom">
           {{ contentData.health.status }}
         </div>
       </div>
@@ -45,7 +47,8 @@
                   class="col-sm-6 col-md-4 col-lg-3"
                   contentClass="content-highlight"
                   *ngIf="contentData.osd_map">
-      <span *ngFor="let result of (contentData.osd_map | osdSummary)" [ngStyle]="result.style">
+      <span *ngFor="let result of (contentData.osd_map | osdSummary)"
+            [ngStyle]="result.style">
         {{ result.content }}
       </span>
     </cd-info-card>
@@ -201,7 +204,8 @@
                   contentClass="card-chart"
                   (click)="pgStatusTarget.toggle()">
       <ng-template #pgStatus>
-        <p class="logs-link" i18n>
+        <p class="logs-link"
+           i18n>
           &rarr; See <a (click)="viewportScroller.scrollToAnchor('logs')">Logs</a> for more details.
         </p>
         <ul>
@@ -212,9 +216,9 @@
       </ng-template>
       <div class="pg-status-popover-wrapper">
         <div [popover]="pgStatus"
-              triggers=""
-              #pgStatusTarget="bs-popover"
-              placement="bottom">
+             triggers=""
+             #pgStatusTarget="bs-popover"
+             placement="bottom">
           <cd-health-pie [data]="contentData"
                          chartType="pie"
                          [displayLegend]="true"
@@ -236,13 +240,13 @@
                   cardClass="card-medium"
                   contentClass="no-center scroll text-monospace"
                   *ngIf="contentData.clog">
-        <p *ngFor="let line of contentData.clog">
-          {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
-          <span [ngStyle]="line | logColor">
-            {{ line.message }}
-            <br>
-          </span>
-        </p>
+      <p *ngFor="let line of contentData.clog">
+        {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
+        <span [ngStyle]="line | logColor">
+          {{ line.message }}
+          <br>
+        </span>
+      </p>
     </cd-info-card>
     <cd-info-card cardTitle="Audit"
                   i18n-cardTitle
@@ -250,15 +254,15 @@
                   cardClass="card-medium"
                   contentClass="no-center scroll text-monospace"
                   *ngIf="contentData.audit_log">
-        <p *ngFor="let line of contentData.audit_log">
-          {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
-          <span [ngStyle]="line | logColor">
-            <span style="font-weight: bold;">
-              {{ line.message }}
-            </span>
-            <br>
+      <p *ngFor="let line of contentData.audit_log">
+        {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
+        <span [ngStyle]="line | logColor">
+          <span style="font-weight: bold;">
+            {{ line.message }}
           </span>
-        </p>
+          <br>
+        </span>
+      </p>
     </cd-info-card>
   </cd-info-group>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.html
index 74324485b6413..ae672510a8ccc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.html
@@ -1,11 +1,14 @@
-<div class="card" [ngClass]="cardClass">
+<div class="card"
+     [ngClass]="cardClass">
   <div class="card-title">
-    <a *ngIf="link; else noLinkTitle" [routerLink]="link">{{ cardTitle }}</a>
+    <a *ngIf="link; else noLinkTitle"
+       [routerLink]="link">{{ cardTitle }}</a>
     <ng-template #noLinkTitle>
       {{ cardTitle }}
     </ng-template>
   </div>
-  <div class="card-body" [ngClass]="contentClass">
-      <ng-content></ng-content>
+  <div class="card-body"
+       [ngClass]="contentClass">
+    <ng-content></ng-content>
   </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
index f42d8e7c6e006..8639cd6e64865 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
@@ -46,19 +46,19 @@
           </label>
           <div class="col-sm-9">
             <div class="input-group">
-                <input class="form-control"
-                       type="password"
-                       placeholder="Password..."
-                       id="password"
-                       name="password"
-                       formControlName="password">
-                <span class="input-group-btn">
-                  <button type="button"
-                          class="btn btn-default"
-                          cdPasswordButton="password">
-                  </button>
-                </span>
-              </div>
+              <input class="form-control"
+                     type="password"
+                     placeholder="Password..."
+                     id="password"
+                     name="password"
+                     formControlName="password">
+              <span class="input-group-btn">
+                <button type="button"
+                        class="btn btn-default"
+                        cdPasswordButton="password">
+                </button>
+              </span>
+            </div>
             <span i18n
                   class="help-block"
                   *ngIf="userForm.showError('password', formDir, 'required')">
@@ -76,19 +76,19 @@
           </label>
           <div class="col-sm-9">
             <div class="input-group">
-                <input class="form-control"
-                       type="password"
-                       placeholder="Confirm password..."
-                       id="confirmpassword"
-                       name="confirmpassword"
-                       formControlName="confirmpassword">
-                <span class="input-group-btn">
-                  <button type="button"
-                          class="btn btn-default"
-                          cdPasswordButton="confirmpassword">
-                  </button>
-                </span>
-              </div>
+              <input class="form-control"
+                     type="password"
+                     placeholder="Confirm password..."
+                     id="confirmpassword"
+                     name="confirmpassword"
+                     formControlName="confirmpassword">
+              <span class="input-group-btn">
+                <button type="button"
+                        class="btn btn-default"
+                        cdPasswordButton="confirmpassword">
+                </button>
+              </span>
+            </div>
             <span i18n
                   class="help-block"
                   *ngIf="userForm.showError('confirmpassword', formDir, 'required')">
@@ -147,10 +147,9 @@
         </label>
         <div class="col-sm-9">
           <span class="form-control no-border full-height">
-            <cd-select-badges
-                [data]="userForm.controls.roles.value"
-                [options]="allRoles"
-                emptyMessage="There are no roles."></cd-select-badges>
+            <cd-select-badges [data]="userForm.controls.roles.value"
+                              [options]="allRoles"
+                              emptyMessage="There are no roles."></cd-select-badges>
           </span>
         </div>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index beae9ebf90622..910e759212aaa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -146,20 +146,6 @@
            routerLink="/cephfs">Filesystems
         </a>
       </li>
-      <!--
-  <li routerLinkActive="active"
-          class="tc_menuitem tc_menuitem_ceph_osds">
-        <a i18n
-           routerLink="/cephOsds">OSDs
-        </a>
-      </li>
-      <li routerLinkActive="active"
-          class="tc_menuitem tc_menuitem_ceph_pools">
-        <a i18n
-           routerLink="/cephPools">Pools
-        </a>
-      </li>
-      -->
 
       <!-- Object Gateway -->
       <li dropdown
@@ -197,15 +183,6 @@
           </li>
         </ul>
       </li>
-
-      <!--
-      <li routerLinkActive="active"
-          class="tc_menuitem tc_submenuitem_settings">
-        <a i18n
-           routerLink="/settings">Settings
-        </a>
-      </li>
-      -->
     </ul>
     <!-- /.navbar-primary -->
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 7054312f83ae0..d9b68758d0603 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -19,7 +19,7 @@
       <input class="form-control"
              type="text"
              [(ngModel)]="search"
-             (keyup)='updateFilter($event)'>
+             (keyup)="updateFilter($event)">
       <span class="input-group-btn">
         <button type="button"
                 class="btn btn-default clear-input tc_clearInputBtn"
@@ -138,7 +138,8 @@
 <ng-template #sparklineTpl
              let-row="row"
              let-value="value">
-  <cd-sparkline [data]="value" [isBinary]="row.cdIsBinary"></cd-sparkline>
+  <cd-sparkline [data]="value"
+                [isBinary]="row.cdIsBinary"></cd-sparkline>
 </ng-template>
 
 <ng-template #routerLinkTpl
-- 
2.39.5