chore(webpack): split mirage js chunk

package.json

@@ -5,7 +5,6 @@
   "repository": "https://github.com/cryostatio/cryostat-web.git",
   "license": "UPL",
   "private": true,
-  "sideEffects": false,
   "scripts": {
     "build": "npm-run-all -l build:notests test",
     "build:notests": "webpack --config webpack.prod.js",

src/app/Shared/Services/Api.service.tsx

@@ -41,7 +41,6 @@ import { EventType } from '@app/Events/EventTypes';
 import { Notifications } from '@app/Notifications/Notifications';
 import { RecordingLabel } from '@app/RecordingMetadata/RecordingLabel';
 import { Rule } from '@app/Rules/Rules';
-import { Service } from '@app/Shared/Services/typings';
 import { EnvironmentNode } from '@app/Topology/typings';
 import { createBlobURL, jvmIdToSubdirectoryName } from '@app/utils/utils';
 import { ValidatedOptions } from '@patternfly/react-core';
@@ -91,24 +90,17 @@ export const isHttpOk = (statusCode: number) => {
   return statusCode >= 200 && statusCode < 300;
 };
 
-export class ApiService implements Service {
+export class ApiService {
   private readonly archiveEnabled = new ReplaySubject<boolean>(1);
   private readonly cryostatVersionSubject = new ReplaySubject<string>(1);
   private readonly grafanaDatasourceUrlSubject = new ReplaySubject<string>(1);
   private readonly grafanaDashboardUrlSubject = new ReplaySubject<string>(1);
-  initialized = false;
 
   constructor(
     private readonly target: TargetService,
     private readonly notifications: Notifications,
     private readonly login: LoginService
-  ) {}
-
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
+  ) {
     // show recording archives when recordings available
     this.login
       .getSessionState()

src/app/Shared/Services/AuthCredentials.service.tsx

@@ -39,27 +39,17 @@ import { Locations } from '@app/Settings/CredentialsStorage';
 import { getFromLocalStorage } from '@app/utils/LocalStorage';
 import { Observable, of } from 'rxjs';
 import { ApiService } from './Api.service';
-import { Service } from './typings';
 
 export interface Credential {
   username: string;
   password: string;
 }
 
-export class AuthCredentials implements Service {
+export class AuthCredentials {
   // TODO replace with Redux?
   private readonly store = new Map<string, Credential>();
-  initialized = false;
-
   constructor(private readonly api: () => ApiService) {}
 
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
-  }
-
   setCredential(targetId: string, username: string, password: string): Observable<boolean> {
     const location = getFromLocalStorage('CREDENTIAL_LOCATION', Locations.BACKEND.key);
     switch (location) {

src/app/Shared/Services/Login.service.tsx

@@ -44,7 +44,6 @@ import { Credential, AuthCredentials } from './AuthCredentials.service';
 import { isQuotaExceededError } from './Report.service';
 import { SettingsService } from './Settings.service';
 import { TargetService } from './Target.service';
-import { Service } from './typings';
 
 export enum SessionState {
   NO_USER_SESSION,
@@ -59,7 +58,7 @@ export enum AuthMethod {
   UNKNOWN = '',
 }
 
-export class LoginService implements Service {
+export class LoginService {
   private readonly TOKEN_KEY: string = 'token';
   private readonly USER_KEY: string = 'user';
   private readonly AUTH_METHOD_KEY: string = 'auth_method';
@@ -69,21 +68,13 @@ export class LoginService implements Service {
   private readonly username = new ReplaySubject<string>(1);
   private readonly sessionState = new ReplaySubject<SessionState>(1);
   readonly authority: string;
-  initialized = false;
 
   constructor(
     private readonly target: TargetService,
     private readonly authCredentials: AuthCredentials,
     private readonly settings: SettingsService
   ) {
     this.authority = process.env.CRYOSTAT_AUTHORITY || '';
-  }
-
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
     this.token.next(this.getCacheItem(this.TOKEN_KEY));
     this.username.next(this.getCacheItem(this.USER_KEY));
     this.authMethod.next(this.getCacheItem(this.AUTH_METHOD_KEY) as AuthMethod);

src/app/Shared/Services/NotificationChannel.service.tsx

@@ -45,7 +45,6 @@ import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 import { AuthMethod, LoginService, SessionState } from './Login.service';
 import { Target } from './Target.service';
 import { TargetDiscoveryEvent } from './Targets.service';
-import { Service } from './typings';
 
 export enum NotificationCategory {
   WsClientActivity = 'WsClientActivity',
@@ -323,19 +322,12 @@ interface NotificationMessageMapper {
   hidden?: boolean;
 }
 
-export class NotificationChannel implements Service {
+export class NotificationChannel {
   private ws: WebSocketSubject<NotificationMessage> | null = null;
   private readonly _messages = new Subject<NotificationMessage>();
   private readonly _ready = new BehaviorSubject<ReadyState>({ ready: false });
-  initialized = false;
 
-  constructor(private readonly notifications: Notifications, private readonly login: LoginService) {}
-
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
+  constructor(private readonly notifications: Notifications, private readonly login: LoginService) {
     messageKeys.forEach((value, key) => {
       if (!value || !value.body || !value.variant) {
         return;

src/app/Shared/Services/Report.service.tsx

@@ -42,19 +42,10 @@ import { fromFetch } from 'rxjs/fetch';
 import { concatMap, first, tap } from 'rxjs/operators';
 import { isActiveRecording, RecordingState, Recording } from './Api.service';
 import { LoginService } from './Login.service';
-import { Service } from './typings';
 
-export class ReportService implements Service {
-  initialized = false;
+export class ReportService {
   constructor(private login: LoginService, private notifications: Notifications) {}
 
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
-  }
-
   report(recording: Recording): Observable<string> {
     if (!recording.reportUrl) {
       return throwError(() => new Error('No recording report URL'));

src/app/Shared/Services/Settings.service.tsx

@@ -50,7 +50,6 @@ import {
   RecordingAttributes,
 } from './Api.service';
 import { NotificationCategory } from './NotificationChannel.service';
-import { Service } from './typings';
 
 export enum FeatureLevel {
   DEVELOPMENT = 0,
@@ -78,8 +77,16 @@ export const automatedAnalysisConfigToRecordingAttributes = (
     },
   } as RecordingAttributes;
 };
-export class SettingsService implements Service {
-  initialized = false;
+export class SettingsService {
+  constructor() {
+    this._featureLevel$.subscribe((featureLevel: FeatureLevel) => saveToLocalStorage('FEATURE_LEVEL', featureLevel));
+    this._visibleNotificationsCount$.subscribe((count: number) =>
+      saveToLocalStorage('VISIBLE_NOTIFICATIONS_COUNT', count)
+    );
+    this._datetimeFormat$.subscribe((format: DatetimeFormat) => saveToLocalStorage('DATETIME_FORMAT', format));
+    this._theme$.subscribe((theme: ThemeSetting) => saveToLocalStorage('THEME', theme));
+  }
+
   private readonly _featureLevel$ = new BehaviorSubject<FeatureLevel>(
     getFromLocalStorage('FEATURE_LEVEL', FeatureLevel.PRODUCTION)
   );
@@ -94,19 +101,6 @@ export class SettingsService implements Service {
 
   private readonly _theme$ = new BehaviorSubject<ThemeSetting>(getFromLocalStorage('THEME', ThemeSetting.AUTO));
 
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
-    this._featureLevel$.subscribe((featureLevel: FeatureLevel) => saveToLocalStorage('FEATURE_LEVEL', featureLevel));
-    this._visibleNotificationsCount$.subscribe((count: number) =>
-      saveToLocalStorage('VISIBLE_NOTIFICATIONS_COUNT', count)
-    );
-    this._datetimeFormat$.subscribe((format: DatetimeFormat) => saveToLocalStorage('DATETIME_FORMAT', format));
-    this._theme$.subscribe((theme: ThemeSetting) => saveToLocalStorage('THEME', theme));
-  }
-
   media(query: string): Observable<MediaQueryList> {
     const mediaQuery = window.matchMedia(query);
     return fromEvent<MediaQueryList>(mediaQuery, 'change').pipe(startWith(mediaQuery));

src/app/Shared/Services/Target.service.tsx

@@ -36,7 +36,6 @@
  * SOFTWARE.
  */
 import { Observable, Subject, BehaviorSubject } from 'rxjs';
-import { Service } from './typings';
 
 export const NO_TARGET = {} as Target;
 
@@ -74,19 +73,11 @@ export interface Target {
   };
 }
 
-class TargetService implements Service {
+class TargetService {
   private readonly _target: Subject<Target> = new BehaviorSubject(NO_TARGET);
   private readonly _authFailure: Subject<void> = new Subject();
   private readonly _authRetry: Subject<void> = new Subject();
   private readonly _sslFailure: Subject<void> = new Subject();
-  initialized = false;
-
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
-  }
 
   setTarget(target: Target): void {
     if (target === NO_TARGET || !!target.connectUrl) {

src/app/Shared/Services/Targets.service.tsx

@@ -44,30 +44,22 @@ import { ApiService } from './Api.service';
 import { LoginService, SessionState } from './Login.service';
 import { NotificationCategory, NotificationChannel } from './NotificationChannel.service';
 import { Target } from './Target.service';
-import { Service } from './typings';
 
 export interface TargetDiscoveryEvent {
   kind: 'LOST' | 'FOUND' | 'MODIFIED';
   serviceRef: Target;
 }
 
-export class TargetsService implements Service {
+export class TargetsService {
   private readonly _targets$: BehaviorSubject<Target[]> = new BehaviorSubject<Target[]>([] as Target[]);
-  initialized = false;
 
   constructor(
     private readonly api: ApiService,
     private readonly notifications: Notifications,
-    private readonly login: LoginService,
+    login: LoginService,
     private readonly notificationChannel: NotificationChannel
-  ) {}
-
-  init() {
-    if (this.initialized) {
-      return;
-    }
-    this.initialized = true;
-    this.login
+  ) {
+    login
       .getSessionState()
       .pipe(concatMap((sessionState) => (sessionState === SessionState.USER_SESSION ? this.queryForTargets() : EMPTY)))
       .subscribe(() => {

src/app/index.tsx

@@ -51,8 +51,6 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { JoyrideProvider } from './Joyride/JoyrideProvider';
-import { isService } from './Shared/Services/typings';
-import { fakeServices } from './utils/fakeData';
 
 export const App: React.FC = () => (
   <ServiceContext.Provider value={defaultServices}>
@@ -69,14 +67,3 @@ export const App: React.FC = () => (
     </NotificationsContext.Provider>
   </ServiceContext.Provider>
 );
-
-// Initialize services
-// Services will be initialized once (i.e. duplicate initialization is ignored)
-export const initilizeServices = () => {
-  Object.values(defaultServices)
-    .filter(isService)
-    .map((s) => s.init());
-  Object.values(fakeServices)
-    .filter(isService)
-    .map((s) => s.init());
-};

src/index.tsx

@@ -36,8 +36,7 @@
  * SOFTWARE.
  */
 
-import { App, initilizeServices } from '@app/index';
-import startMirage from '@mirage/createServer';
+import { App } from '@app/index';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -55,12 +54,4 @@ if (process.env.NODE_ENV !== 'production') {
   axe(React, ReactDOM, 1000, config);
 }
 
-if (process.env.PREVIEW === 'true') {
-  // Start Mirage
-  startMirage();
-}
-
-// Initialize services
-initilizeServices();
-
 ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);

src/mirage/createServer.ts → src/mirage/index.ts

@@ -643,4 +643,4 @@ export const startMirage = ({ environment = 'development' } = {}) => {
   });
 };
 
-export default startMirage;
+startMirage({ environment: process.env.NODE_ENV });

tsconfig.json

@@ -21,7 +21,6 @@
     "resolveJsonModule": true,
     "paths": {
       "@app/*": ["src/app/*"],
-      "@mirage/*": ["src/mirage/*"],
       "@test/*": ["src/test/*"],
       "@i18n/*": ["src/i18n/*"],
       "@assets/*": ["node_modules/@patternfly/react-core/dist/styles/assets/*"]