Configure Formatter

.githooks/pre-push

@@ -4,8 +4,10 @@ set -e
 
 cd diagnostics-app
 npm run script:ci
+npm run format:check
 cd ..
 
 cd diagnostics-extension
 npm run script:ci
+npm run format:check
 cd ..

README.md

@@ -23,6 +23,9 @@ header:
 - In case git hooks don't work as intended, run this command to set necessary permissions:
  `cd .githooks && chmod +x *`
 
+To run the code formatter on either the Diagnostics App or the Diagnostics extension project, Run:
+```npm run format```
+
 ### Diagnostics App PWA
 
 1. ```cd diagnostics-app```

diagnostics-app/.prettierrc.js

@@ -0,0 +1,38 @@
+// Copyright 2023 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+const shared = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  quoteProps: 'preserve',
+  bracketSpacing: false,
+  trailingComma: 'all',
+  arrowParens: 'always',
+  embeddedLanguageFormatting: 'off',
+  htmlWhitespaceSensitivity: 'strict',
+};
+
+const config = {
+  overrides: [
+    {
+      files: '*.ts',
+      options: shared,
+    },
+    {
+      files: '*.js',
+      options: shared,
+    },
+    {
+      files: '*.html',
+      options: {
+        printWidth: 100,
+      },
+    },
+  ],
+};
+
+module.exports = config;

diagnostics-app/package.json

@@ -9,7 +9,9 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "test:ci": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
-    "script:ci": "sh ./scripts/ci.sh"
+    "script:ci": "sh ./scripts/ci.sh",
+    "format": "npx prettier --config .prettierrc.js --write src",
+    "format:check": "npx prettier --config .prettierrc.js --check src"
   },
   "private": true,
   "engines": {

diagnostics-app/src/app/app-routing.module.ts

@@ -8,23 +8,23 @@
  */
 
 import {APP_BASE_HREF} from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { TelemetryDashboardComponent } from './telemetry/telemetry-dashboard/telemetry-dashboard.component';
-import { DiagnosticsDashboardComponent } from './diagnostics/diagnostics-dashboard/diagnostics-dashboard.component';
-import { EventsDashboardComponent } from './events/events-dashboard/events-dashboard.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {TelemetryDashboardComponent} from './telemetry/telemetry-dashboard/telemetry-dashboard.component';
+import {DiagnosticsDashboardComponent} from './diagnostics/diagnostics-dashboard/diagnostics-dashboard.component';
+import {EventsDashboardComponent} from './events/events-dashboard/events-dashboard.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/telemetry', pathMatch: 'full' },
-  { path: 'telemetry', component: TelemetryDashboardComponent },
-  { path: 'diagnostics', component: DiagnosticsDashboardComponent },
-  { path: 'events', component: EventsDashboardComponent },
-  { path: '**', redirectTo: '/telemetry' },
+  {path: '', redirectTo: '/telemetry', pathMatch: 'full'},
+  {path: 'telemetry', component: TelemetryDashboardComponent},
+  {path: 'diagnostics', component: DiagnosticsDashboardComponent},
+  {path: 'events', component: EventsDashboardComponent},
+  {path: '**', redirectTo: '/telemetry'},
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
-  providers: [{provide: APP_BASE_HREF, useValue: '/'}]
+  providers: [{provide: APP_BASE_HREF, useValue: '/'}],
 })
 export class AppRoutingModule {}

diagnostics-app/src/app/app.component.it.spec.ts

@@ -6,14 +6,14 @@
  * @fileoverview Integration tests for app.component
  */
 
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
 
-import { Theme } from './core/enums/global.enums';
-import { ThemeService } from './core/services/theme.service';
+import {Theme} from './core/enums/global.enums';
+import {ThemeService} from './core/services/theme.service';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 
 describe('integration: component: app', () => {
   let fixture: ComponentFixture<AppComponent>;

diagnostics-app/src/app/app.component.ts

@@ -7,11 +7,11 @@
  * Imported by app.module.ts
  */
 
-import { Component, HostBinding, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
+import {Component, HostBinding, OnInit} from '@angular/core';
+import {Subscription} from 'rxjs';
 
-import { Theme } from 'src/app/core/enums/global.enums';
-import { ThemeService } from './core/services/theme.service';
+import {Theme} from 'src/app/core/enums/global.enums';
+import {ThemeService} from './core/services/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -34,7 +34,7 @@ export class AppComponent implements OnInit {
     this._themeSubscription = this._themeService.subscribeOnThemeChange(
       (theme: Theme) => {
         this._cssClass = theme;
-      }
+      },
     );
   }
 

diagnostics-app/src/app/app.component.unit.spec.ts

@@ -6,13 +6,13 @@
  * @fileoverview Unit tests for app.component
  */
 
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import {NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
 
-import { Theme } from './core/enums/global.enums';
+import {Theme} from './core/enums/global.enums';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 
 describe('unit: component: app', () => {
   let fixture: ComponentFixture<AppComponent>;

diagnostics-app/src/app/app.module.ts

@@ -7,28 +7,30 @@
  * Imports all the submodules and global dependencies of the project.
  */
 
-import { HashLocationStrategy, LocationStrategy } from '@angular/common';
-import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { ServiceWorkerModule } from '@angular/service-worker';
+import {HashLocationStrategy, LocationStrategy} from '@angular/common';
+import {APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServiceWorkerModule} from '@angular/service-worker';
 
-import { environment } from '../environments/environment';
+import {environment} from '../environments/environment';
 
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-import { ContentLayoutComponent } from './layout/content-layout/content-layout.component';
-import { CoreModule } from './core/core.module';
-import { DiagnosticsModule } from './diagnostics/diagnostics.module';
-import { EventsModule } from './events/events.module';
-import { HeaderComponent } from './layout/header/header.component';
-import { SharedModule } from './shared/shared.module';
-import { SideNavComponent } from './layout/side-nav/side-nav.component';
-import { TelemetryModule } from './telemetry/telemetry.module';
-import { EventsService } from './core/services/events.service';
+import {AppComponent} from './app.component';
+import {AppRoutingModule} from './app-routing.module';
+import {ContentLayoutComponent} from './layout/content-layout/content-layout.component';
+import {CoreModule} from './core/core.module';
+import {DiagnosticsModule} from './diagnostics/diagnostics.module';
+import {EventsModule} from './events/events.module';
+import {HeaderComponent} from './layout/header/header.component';
+import {SharedModule} from './shared/shared.module';
+import {SideNavComponent} from './layout/side-nav/side-nav.component';
+import {TelemetryModule} from './telemetry/telemetry.module';
+import {EventsService} from './core/services/events.service';
 
-const initializeEventService = (eventsService: EventsService): () => Promise<any> => {
-  return () => eventsService.Init();;
-}
+const initializeEventService = (
+  eventsService: EventsService,
+): (() => Promise<any>) => {
+  return () => eventsService.Init();
+};
 
 @NgModule({
   declarations: [
@@ -50,20 +52,21 @@ const initializeEventService = (eventsService: EventsService): () => Promise<any
       registrationStrategy: 'registerWhenStable:30000',
     }),
     SharedModule,
-    TelemetryModule
+    TelemetryModule,
   ],
   providers: [
     EventsService,
     {
       provide: APP_INITIALIZER,
       useFactory: initializeEventService,
       multi: true,
-      deps: [EventsService]
+      deps: [EventsService],
     },
     {
       provide: LocationStrategy,
-      useClass: HashLocationStrategy
-    }],
+      useClass: HashLocationStrategy,
+    },
+  ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

diagnostics-app/src/app/core/config/data-refresh-intervals.ts

@@ -1,13 +1,13 @@
-import { TelemetryInfoType } from '@common/message';
+import {TelemetryInfoType} from '@common/message';
 
 export const defaultTelemetryRefreshInterval = 10000;
 export const defaultDiagnosticsRefreshInterval = 500;
 
 export const refreshIntervals = {
-    telemetry: new Map<string, number> ([
-        [TelemetryInfoType.BATTERY, 1000],
-        [TelemetryInfoType.CPU, 1000],
-        [TelemetryInfoType.STATEFUL_PARTITION, 60000]
-    ]),
-    diagnostics: new Map<string, number> ([]),
-}
+  telemetry: new Map<string, number>([
+    [TelemetryInfoType.BATTERY, 1000],
+    [TelemetryInfoType.CPU, 1000],
+    [TelemetryInfoType.STATEFUL_PARTITION, 60000],
+  ]),
+  diagnostics: new Map<string, number>([]),
+};