NAS-117704 / 22.12 / NAS-117704: Enforce linting rules in CI (#6984)

.github/actions/prepare/action.yml

+name: 'Prepare: Checkout and Install'
+description: 'Prepares the repo for a job by checking out and installing dependencies'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: '16'
+        cache: 'yarn'
+    - name: Install packages
+      shell: bash
+      run: yarn install --frozen-lockfile

.github/workflows/main.yml

-name: CI
+name: WebUI
 on:
   push:
+    branches:
+      - main
   pull_request:
-    types: [synchronize]
+    branches:
+      - '**'
 jobs:
+  install:
+    name: Checkout and Install
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install
+        uses: ./.github/actions/prepare
+
   build:
-    name: Build and Test
+    name: Build
+    needs: [install]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '16'
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - run: yarn run extract # Extracts messages again to make sure they are not broken
-      - run: yarn build:prod:aot
-      - run: yarn test:pr
-      - uses: codecov/codecov-action@v3
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install
+        uses: ./.github/actions/prepare
+      - name: Build
+        run: yarn build:prod:aot
+
+  lint:
+    name: Validate code style
+    needs: [install]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install
+        uses: ./.github/actions/prepare
+      - name: Build
+        run: yarn lint
+
+  lint-translations:
+    name: Validate translation strings
+    needs: [install]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install
+        uses: ./.github/actions/prepare
+      - name: Build
+        run: yarn run extract
+
+  test:
+    name: Run tests
+    needs: [install]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install
+        uses: ./.github/actions/prepare
+      - name: Run tests
+        run: yarn test:pr
+      - name: Upload coverage to codecov
+        uses: codecov/codecov-action@v3
         with:
           name: webui
           fail_ci_if_error: true

src/app/pages/data-protection/cloudsync/cloudsync-list/cloudsync-list.component.ts

 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
 import { JobState } from 'app/enums/job-state.enum';
@@ -78,7 +78,7 @@ export class CloudsyncListComponent implements EntityTableConfig<CloudSyncTaskUi
     },
   };
 
-  private dataset: string = '';
+  private dataset = '';
 
   constructor(
     protected ws: WebSocketService,
@@ -101,12 +101,11 @@ export class CloudsyncListComponent implements EntityTableConfig<CloudSyncTaskUi
     });
   }
 
-  resourceTransformIncomingRestData(data: CloudSyncTask[]): CloudSyncTaskUi[] {
-    const _data = data.filter((cloud) =>
-      cloud.path.replace('/mnt/', '') === this.dataset ||
-      cloud.path.includes(`${this.dataset}/`)
-    );
-    return _data.map((task) => {
+  resourceTransformIncomingRestData(tasks: CloudSyncTask[]): CloudSyncTaskUi[] {
+    const tasksToShow = tasks.filter((cloud) => {
+      return cloud.path.replace('/mnt/', '') === this.dataset || cloud.path.includes(`${this.dataset}/`);
+    });
+    return tasksToShow.map((task) => {
       const transformed = { ...task } as CloudSyncTaskUi;
       const formattedCronSchedule = `${task.schedule.minute} ${task.schedule.hour} ${task.schedule.dom} ${task.schedule.month} ${task.schedule.dow}`;
       transformed.credential = task.credentials.name;

src/app/pages/data-protection/data-protection.routing.ts

@@ -55,7 +55,7 @@ export const dataProtectionRoutes: Routes = [{
         component: SnapshotListComponent,
         data: { title: 'Periodic Snapshot Tasks', breadcrumb: 'Periodic Snapshot Tasks' },
       }],
-    },{
+    }, {
       path: 'replication',
       data: { title: 'Replication Tasks', breadcrumb: 'Replication Tasks', icon: 'event_note' },
       children: [{
@@ -87,7 +87,7 @@ export const dataProtectionRoutes: Routes = [{
         path: '',
         component: RsyncTaskListComponent,
         data: { title: 'Rsync Tasks', breadcrumb: 'Rsync Tasks' },
-      },{
+      }, {
         path: ':dataset',
         component: RsyncTaskListComponent,
         data: { title: 'Rsync Tasks', breadcrumb: 'Rsync Tasks' },

src/app/pages/data-protection/replication/replication-list/replication-list.component.ts

 import { DatePipe } from '@angular/common';
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
 import { filter } from 'rxjs/operators';
@@ -79,7 +79,7 @@ export class ReplicationListComponent implements EntityTableConfig {
     },
   };
 
-  private dataset: string = '';
+  private dataset = '';
 
   constructor(
     private ws: WebSocketService,
@@ -102,12 +102,10 @@ export class ReplicationListComponent implements EntityTableConfig {
   }
 
   resourceTransformIncomingRestData(tasks: ReplicationTask[]): ReplicationTaskUi[] {
-    const _tasks = tasks.filter((task) =>
-      task.target_dataset === this.dataset ||
-      task.source_datasets.includes(this.dataset) ||
-      task.name.includes(`${this.dataset}/`)
-    );
-    return _tasks.map((task) => {
+    const tasksToShow = tasks.filter((task) => task.target_dataset === this.dataset
+      || task.source_datasets.includes(this.dataset)
+      || task.name.includes(`${this.dataset}/`));
+    return tasksToShow.map((task) => {
       return {
         ...task,
         ssh_connection: task.ssh_credentials ? (task.ssh_credentials as any).name : '-',

src/app/pages/data-protection/rsync-task/rsync-task-list/rsync-task-list.component.ts

@@ -67,7 +67,7 @@ export class RsyncTaskListComponent implements EntityTableConfig {
     },
   };
 
-  private dataset: string = '';
+  private dataset = '';
 
   constructor(
     protected ws: WebSocketService,
@@ -145,12 +145,12 @@ export class RsyncTaskListComponent implements EntityTableConfig {
     }];
   }
 
-  resourceTransformIncomingRestData(data: RsyncTaskUi[]): RsyncTaskUi[] {
-    const _data = data.filter((task) =>
-      task.path.replace('/mnt/', '') === this.dataset ||
-      task.path.includes(`${this.dataset}/`)
-    );
-    return _data.map((task) => {
+  resourceTransformIncomingRestData(tasks: RsyncTaskUi[]): RsyncTaskUi[] {
+    const tasksToShow = tasks.filter((task) => {
+      return task.path.replace('/mnt/', '') === this.dataset
+        || task.path.includes(`${this.dataset}/`);
+    });
+    return tasksToShow.map((task) => {
       task.cron_schedule = `${task.schedule.minute} ${task.schedule.hour} ${task.schedule.dom} ${task.schedule.month} ${task.schedule.dow}`;
       task.next_run = this.taskService.getTaskNextRun(task.cron_schedule);
       task.frequency = this.taskService.getTaskCronDescription(task.cron_schedule);

src/app/pages/data-protection/snapshot/snapshot-list/snapshot-list.component.ts

@@ -53,7 +53,7 @@ export class SnapshotListComponent implements EntityTableConfig<PeriodicSnapshot
     },
   };
 
-  private dataset: string = '';
+  private dataset = '';
 
   constructor(
     private dialogService: DialogService,
@@ -73,12 +73,12 @@ export class SnapshotListComponent implements EntityTableConfig<PeriodicSnapshot
     });
   }
 
-  resourceTransformIncomingRestData(data: PeriodicSnapshotTask[]): PeriodicSnapshotTaskUi[] {
-    const _data = data.filter((row) =>
-      row.dataset === this.dataset ||
-      row.dataset.includes(`${this.dataset}/`)
-    );
-    return _data.map((task) => {
+  resourceTransformIncomingRestData(tasks: PeriodicSnapshotTask[]): PeriodicSnapshotTaskUi[] {
+    const tasksToShow = tasks.filter((row) => {
+      return row.dataset === this.dataset
+        || row.dataset.includes(`${this.dataset}/`);
+    });
+    return tasksToShow.map((task) => {
       const transformedTask = {
         ...task,
         keepfor: `${task.lifetime_value} ${task.lifetime_unit}(S)`,

src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.spec.ts

 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ActivatedRoute } from '@angular/router';
 import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { MockPipe } from 'ng-mocks';
 import { FileSizePipe } from 'ngx-filesize';
-import { ActivatedRoute } from '@angular/router';
 import { CoreComponents } from 'app/core/core-components.module';
 import { FormatDateTimePipe } from 'app/core/pipes/format-datetime.pipe';
 import { mockCall, mockWebsocket } from 'app/core/testing/utils/mock-websocket.utils';
@@ -90,8 +90,8 @@ describe('SnapshotListComponent', () => {
               },
             },
           },
-        }
-      ]
+        },
+      ],
     });
     loader = TestbedHarnessEnvironment.loader(spectator.fixture);
     store$ = spectator.inject(MockStore);

src/app/pages/datasets/modules/snapshots/snapshot-list/snapshot-list.component.ts

 import {
   Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, OnInit, TemplateRef, AfterViewInit,
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSort, Sort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { select, Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
@@ -80,7 +80,7 @@ export class SnapshotListComponent implements OnInit, AfterViewInit {
   readonly defaultColumns: string[] = ['select', 'dataset', 'snapshot_name', 'actions'];
   readonly defaultExtraColumns: string[] = ['select', 'dataset', 'snapshot_name', 'used', 'created', 'referenced', 'actions'];
   displayedColumns: string[] = this.defaultColumns;
-  private dataset: string = '';
+  private dataset = '';
 
   constructor(
     private dialogService: DialogService,
@@ -125,11 +125,11 @@ export class SnapshotListComponent implements OnInit, AfterViewInit {
       select(selectSnapshots),
       untilDestroyed(this),
     ).subscribe((snapshots) => {
-      const _snapshots = snapshots.filter((snapshot) =>
-        snapshot.dataset === this.dataset ||
-        snapshot.dataset.includes(`${this.dataset}/`)
-      );
-      this.createDataSource(_snapshots);
+      const snapshotsToShow = snapshots.filter((snapshot) => {
+        return snapshot.dataset === this.dataset
+        || snapshot.dataset.includes(`${this.dataset}/`);
+      });
+      this.createDataSource(snapshotsToShow);
       this.cdr.markForCheck();
     }, () => {
       this.createDataSource();