Enabled Angular strict mode

web/angular.json

@@ -5,6 +5,9 @@
     "dapr-dashboard": {
       "projectType": "application",
       "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        },
         "@schematics/angular:component": {
           "style": "scss"
         }
@@ -17,7 +20,8 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "allowedCommonJsDependencies": [
-              "js-yaml"
+              "js-yaml",
+              "rxjs"
             ],
             "outputPath": "dist",
             "index": "src/index.html",
@@ -63,13 +67,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
               ]
             }

web/package.json

@@ -71,6 +71,7 @@
   "build": {
     "appId": "com.daprio.dapr-dashboard"
   },
+  "sideEffects": false,
   "husky": {
     "hooks": {
       "pre-push": "ng lint"

web/src/app/features/features.service.ts

@@ -9,6 +9,6 @@ export class FeaturesService {
   constructor(private http: HttpClient) { }
 
   get() {
-    return this.http.get('/api/features');
+    return this.http.get<string[]>('/api/features');
   }
 }

web/src/app/pages/configuration/configuration-detail/configuration-detail.component.ts

@@ -14,13 +14,13 @@ import { GlobalsService } from 'src/app/globals/globals.service';
 })
 export class ConfigurationDetailComponent implements OnInit {
 
-  private name: string;
+  private name: string | undefined;
   public configuration: any;
-  public configurationManifest: string;
-  public loadedConfiguration: boolean;
-  public loadedApps: boolean;
-  public configurationApps: Instance[];
-  public platform: string;
+  public configurationManifest!: string;
+  public loadedConfiguration = false;
+  public loadedApps = false;
+  public configurationApps: Instance[] = [];
+  public platform!: string;
 
   constructor(
     private route: ActivatedRoute,
@@ -32,8 +32,10 @@ export class ConfigurationDetailComponent implements OnInit {
   ngOnInit(): void {
     this.name = this.route.snapshot.params.name;
     this.checkPlatform();
-    this.getConfiguration(this.name);
-    this.getConfigurationApps(this.name);
+    if (typeof this.name !== 'undefined') {
+      this.getConfiguration(this.name);
+      this.getConfigurationApps(this.name);
+    }
   }
 
   checkPlatform(): void {

web/src/app/pages/configuration/configuration.component.ts

@@ -11,10 +11,10 @@ import { GlobalsService } from 'src/app/globals/globals.service';
 })
 export class ConfigurationComponent implements OnInit, OnDestroy {
 
-  public config: DaprConfiguration[];
+  public config: DaprConfiguration[] = [];
   public displayedColumns: string[] = [];
-  public configurationsLoaded: boolean;
-  private intervalHandler;
+  public configurationsLoaded = false;
+  private intervalHandler: any;
 
   constructor(
     private configurationService: ConfigurationsService,

web/src/app/pages/controlplane/controlplane.component.ts

@@ -9,10 +9,10 @@ import { Status } from 'src/app/types/types';
 })
 export class ControlPlaneComponent implements OnInit, OnDestroy {
 
-  public data: Status[];
+  public data: Status[] = [];
   public displayedColumns: string[] = ['service', 'name', 'namespace', 'healthy', 'status', 'version', 'age', 'created'];
-  public controlPlaneLoaded: boolean;
-  private intervalHandler;
+  public controlPlaneLoaded = false;
+  private intervalHandler: any;
 
   constructor(
     private statusService: InstanceService,

web/src/app/pages/dapr-components/dapr-component-detail/dapr-component-detail.component.ts

@@ -12,10 +12,10 @@ import { ThemeService } from 'src/app/theme/theme.service';
 })
 export class DaprComponentDetailComponent implements OnInit {
 
-  private name: string;
+  private name: string | undefined;
   public component: any;
-  public componentManifest: string;
-  public loadedComponent: boolean;
+  public componentManifest!: string;
+  public loadedComponent = false;
 
   constructor(
     private route: ActivatedRoute,
@@ -25,7 +25,9 @@ export class DaprComponentDetailComponent implements OnInit {
 
   ngOnInit(): void {
     this.name = this.route.snapshot.params.name;
-    this.getComponent(this.name);
+    if (typeof this.name !== 'undefined') {
+      this.getComponent(this.name);
+    }
   }
 
   getComponent(name: string): void {

web/src/app/pages/dapr-components/dapr-components.component.ts

@@ -10,10 +10,10 @@ import { DaprComponent } from 'src/app/types/types';
 })
 export class DaprComponentsComponent implements OnInit, OnDestroy {
 
-  public components: DaprComponent[];
-  public componentsLoaded: boolean;
+  public components: DaprComponent[] = [];
+  public componentsLoaded = false;
   public displayedColumns: string[] = ['img', 'name', 'status', 'age', 'created'];
-  private intervalHandler;
+  private intervalHandler: any;
 
   constructor(
     private componentsService: ComponentsService,

web/src/app/pages/dashboard/dashboard.component.ts

@@ -13,14 +13,14 @@ import { ScopesService } from 'src/app/scopes/scopes.service';
 
 export class DashboardComponent implements OnInit, OnDestroy {
 
-  public instances: Instance[];
+  public instances: Instance[] = [];
   public displayedColumns: string[] = [];
-  public daprHealthiness: string;
-  public daprVersion: string;
-  public tableLoaded: boolean;
-  public controlPlaneLoaded: boolean;
-  public platform: string;
-  private intervalHandler;
+  public daprHealthiness: 'Healthy' | 'Unhealthy' = 'Unhealthy';
+  public daprVersion = '';
+  public tableLoaded = false;
+  public controlPlaneLoaded = false;
+  public platform = '';
+  private intervalHandler: any;
 
   constructor(
     private instanceService: InstanceService,
@@ -67,9 +67,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   getControlPlaneData(): void {
     this.instanceService.getControlPlaneStatus().subscribe((data: Status[]) => {
-      this.daprHealthiness = data.every((service) => {
-        return service.healthy === 'True';
-      }) ? 'Healthy' : 'Unhealthy';
+      this.daprHealthiness = data.every((service) => service.healthy === 'True') ? 'Healthy' : 'Unhealthy';
       if (data.length === 0) {
         this.daprHealthiness = 'Unhealthy';
       }

web/src/app/pages/dashboard/detail/detail.component.html

@@ -24,9 +24,9 @@ <h2 class="page-header-left" *ngIf="loadedInstance">Application: {{ instance.app
               <td class="table-label">Dapr gRPC Port</td>
               <td class="table-data">{{ instance.grpcPort }}</td>
             </tr>
-            <tr *ngIf="metadata && metadata.extended && metadata.extended['appCommand']; else noMetadataCommand">
+            <tr *ngIf="metadata && metadata.extended && metadata.extended.get('appCommand'); else noMetadataCommand">
               <td class="table-label">Command</td>
-              <td class="table-data">{{ metadata.extended['appCommand'] }}</td>
+              <td class="table-data">{{ metadata.extended.get('appCommand') }}</td>
             </tr>
             <ng-template #noMetadataCommand>
               <tr *ngIf="instance.command">

web/src/app/pages/dashboard/detail/detail.component.ts

@@ -13,17 +13,17 @@ import { ThemeService } from 'src/app/theme/theme.service';
 })
 export class DetailComponent implements OnInit, OnDestroy {
 
-  private id: string;
-  public model: string;
+  private id: string | undefined;
+  public model!: string;
   public modelYAML: any;
-  public annotations: string[];
-  public instance: Instance;
-  public loadedConfiguration: boolean;
-  public loadedInstance: boolean;
-  public loadedMetadata: boolean;
-  public metadata: Metadata;
-  public platform: string;
-  private intervalHandler;
+  public annotations: string[] = [];
+  public instance!: Instance;
+  public loadedConfiguration = false;
+  public loadedInstance = false;
+  public loadedMetadata = false;
+  public metadata!: Metadata;
+  public platform!: string;
+  private intervalHandler: any;
 
   constructor(
     private route: ActivatedRoute,
@@ -38,7 +38,9 @@ export class DetailComponent implements OnInit, OnDestroy {
     this.loadData();
 
     this.intervalHandler = setInterval(() => {
-      this.getMetadata(this.id);
+      if (this.id) {
+        this.getMetadata(this.id);
+      }
     }, 10000);
   }
 
@@ -78,9 +80,11 @@ export class DetailComponent implements OnInit, OnDestroy {
   }
 
   loadData(): void {
-    this.getConfiguration(this.id);
-    this.getInstance(this.id);
-    this.getMetadata(this.id);
+    if (typeof this.id !== 'undefined') {
+      this.getConfiguration(this.id);
+      this.getInstance(this.id);
+      this.getMetadata(this.id);
+    }
   }
 
   isDarkTheme() {

web/src/app/pages/dashboard/detail/logs/logs.component.ts

@@ -12,12 +12,12 @@ import { Log } from 'src/app/types/types';
 
 export class LogsComponent implements OnInit, OnDestroy {
 
-  public id: string;
-  public containers: string[];
+  public id = '';
+  public containers: string[] = [];
   public showFiltered = true;
   public filterValue = '';
   public containerValue = 'daprd';
-  public since: number;
+  public since!: number;
   public sinceUnit = '';
   public logs: Map<string, Log[]> = new Map();
 

web/src/app/pages/pages.component.ts

@@ -21,17 +21,16 @@ export interface DialogData {
 })
 export class PagesComponent implements OnInit, OnDestroy {
 
-  @HostBinding('class') public componentCssClass: string;
+  @HostBinding('class') public componentCssClass!: string;
   @ViewChild('drawer', { static: false })
-  public drawer: MatSidenav;
+  public drawer!: MatSidenav;
   public menu: MenuItem[] = MENU_ITEMS;
   public isMenuOpen = false;
-  public themeSelectorEnabled: boolean;
   public scopeValue = 'All';
-  public scopes: string[];
-  public version: string;
-  public versionLoaded: boolean;
-  private intervalHandler;
+  public scopes: string[] = [];
+  public version: string | undefined;
+  public versionLoaded = false;
+  private intervalHandler: any;
 
   constructor(
     private featuresService: FeaturesService,
@@ -136,7 +135,7 @@ export class PagesComponent implements OnInit, OnDestroy {
   `]
 })
 export class AboutDialogComponent {
-  @ViewChild('info', { static: true }) public info: ElementRef;
+  @ViewChild('info', { static: true }) public info!: ElementRef;
   public version = VERSION;
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) { }

web/src/app/shared/editor/editor.component.ts

@@ -8,10 +8,10 @@ import { YamlViewerOptions } from '../../types/types';
 })
 export class EditorComponent implements OnInit {
 
-  @Input() model: string;
+  @Input() model = '';
   @Output() modelChange = new EventEmitter<string>();
 
-  options: YamlViewerOptions;
+  options!: YamlViewerOptions;
 
   constructor(
     private themeService: ThemeService,

web/src/app/theme/theme.service.ts

@@ -14,7 +14,7 @@ export class ThemeService {
     constructor() { }
 
     getTheme(): string {
-        const savedThemeItem = localStorage.getItem(STORAGE_THEME_KEY);
+        const savedThemeItem = localStorage.getItem(STORAGE_THEME_KEY) ?? '';
         const savedThemeIndex = parseInt(savedThemeItem, 10);
 
         if (!isNaN(savedThemeIndex) && savedThemeIndex < this.themes.length) {

web/src/app/types/types.ts

@@ -88,5 +88,5 @@ export interface YamlViewerOptions {
     theme: string;
     contextmenu?: boolean;
     scrollBeyondLastLine?: boolean;
-    lineNumbers?: boolean;
+    lineNumbers?: boolean | any;
 }

web/src/app/websocket/websocket.service.ts

@@ -12,7 +12,7 @@ export class WebsocketService {
 
   private subjects: Map<string, Subject<MessageEvent>>;
 
-  public connect(url): Subject<MessageEvent> {
+  public connect(url: string): Subject<MessageEvent> {
     this.disconnect(url);
     const origin = window.location.origin.replace('https://', 'wss://').replace('http://', 'ws://');
     const subject = this.create(origin + url);
@@ -21,16 +21,16 @@ export class WebsocketService {
     return subject;
   }
 
-  public disconnect(url): void {
+  public disconnect(url: string): void {
     if (this.subjects.has(url)) {
       const oldSubject = this.subjects.get(url);
-      oldSubject.complete();
+      oldSubject?.complete();
       this.subjects.delete(url);
       console.log('Successfully disconnected: ' + url);
     }
   }
 
-  private create(url): Subject<MessageEvent> {
+  private create(url: string): Subject<MessageEvent> {
     const ws = new WebSocket(url);
 
     const observable = new Observable<MessageEvent>((obs) => {

web/tsconfig.json

@@ -14,10 +14,14 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictTemplates": true
   }
 }

web/tslint.json

@@ -144,5 +144,6 @@
   },
   "rulesDirectory": [
     "codelyzer"
-  ]
+  ],
+  "no-any": true
 }