feat: move all frontend projects under the same Angular workspace (#1141)

* feat: move all frontend projects under the same Angular workspace

* Refactor/angular workspace (#1154)

* update frontend build steps

Co-authored-by: waterplea <alexander@inkin.ru>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/diagnostic-ui/src/app/services/api/api.service.ts

@@ -0,0 +1,22 @@
+export abstract class ApiService {
+  abstract getError (): Promise<GetErrorRes>
+  abstract restart (): Promise<void>
+  abstract forgetDrive (): Promise<void>
+  abstract getLogs (params: GetLogsReq): Promise<GetLogsRes>
+}
+
+export interface GetErrorRes {
+  code: number,
+  message: string,
+  data: { details: string }
+}
+
+export type GetLogsReq = { cursor?: string, before_flag?: boolean, limit?: number }
+export type GetLogsRes = LogsRes
+
+export type LogsRes = { entries: Log[], 'start-cursor'?: string, 'end-cursor'?: string }
+
+export interface Log {
+  timestamp: string
+  message: string
+}

frontend/projects/diagnostic-ui/src/app/services/api/live-api.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from "@angular/core"
+import { HttpService } from "../http.service"
+import { ApiService, GetErrorRes, GetLogsReq, GetLogsRes } from "./api.service"
+
+@Injectable()
+export class LiveApiService extends ApiService {
+
+  constructor (
+    private readonly http: HttpService,
+  ) { super() }
+
+  getError (): Promise<GetErrorRes> {
+    return this.http.rpcRequest<GetErrorRes>({
+      method: 'diagnostic.error',
+      params: { },
+    })
+  }
+
+  restart (): Promise<void> {
+    return this.http.rpcRequest<void>({
+      method: 'diagnostic.restart',
+      params: { },
+    })
+  }
+
+  forgetDrive (): Promise<void> {
+    return this.http.rpcRequest<void>({
+      method: 'diagnostic.forget-disk',
+      params: { },
+    })
+  }
+
+  getLogs (params: GetLogsReq): Promise<GetLogsRes> {
+    return this.http.rpcRequest<GetLogsRes>({
+      method: 'diagnostic.logs',
+      params,
+    })
+  }
+}

frontend/projects/diagnostic-ui/src/app/services/api/mock-api.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from "@angular/core"
+import { pauseFor } from "../../util/misc.util"
+import { ApiService, GetErrorRes, GetLogsReq, GetLogsRes, Log } from "./api.service"
+
+@Injectable()
+export class MockApiService extends ApiService {
+
+  constructor () { super() }
+
+  async getError (): Promise<GetErrorRes> {
+    await pauseFor(1000)
+    return {
+      code: 15,
+      message: 'Unknown Embassy',
+      data: { details: 'Some details about the error here' }
+    }
+  }
+
+  async restart (): Promise<void> {
+    await pauseFor(1000)
+    return null
+  }
+
+  async forgetDrive (): Promise<void> {
+    await pauseFor(1000)
+    return null
+  }
+
+  async getLogs (params: GetLogsReq): Promise<GetLogsRes> {
+    await pauseFor(1000)
+    let entries: Log[]
+    if (Math.random() < .2) {
+      entries = packageLogs
+    } else {
+      const arrLength = params.limit ? Math.ceil(params.limit / packageLogs.length) : 10
+      entries = new Array(arrLength).fill(packageLogs).reduce((acc, val) => acc.concat(val), [])
+    }
+    return {
+      entries,
+      'start-cursor': 'startCursor',
+      'end-cursor': 'endCursor',
+    }
+  }
+}
+
+const packageLogs = [
+  {
+    timestamp: '2019-12-26T14:20:30.872Z',
+    message: '****** START *****',
+  },
+  {
+    timestamp: '2019-12-26T14:21:30.872Z',
+    message: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
+  },
+  {
+    timestamp: '2019-12-26T14:22:30.872Z',
+    message: '****** FINISH *****',
+  },
+]

frontend/projects/diagnostic-ui/src/app/services/global-error-handler.service.ts

@@ -0,0 +1,13 @@
+import { ErrorHandler, Injectable } from '@angular/core'
+
+@Injectable()
+export class GlobalErrorHandler implements ErrorHandler {
+
+  handleError (error: any): void {
+   const chunkFailedMessage = /Loading chunk [\d]+ failed/
+
+    if (chunkFailedMessage.test(error.message)) {
+      window.location.reload()
+    }
+  }
+}

frontend/projects/diagnostic-ui/src/app/services/http.service.ts

@@ -0,0 +1,97 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpErrorResponse } from '@angular/common/http'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HttpService {
+
+  constructor (
+    private readonly http: HttpClient,
+  ) { }
+
+  async rpcRequest<T> (options: RPCOptions): Promise<T> {
+    const res = await this.httpRequest<RPCResponse<T>>(options)
+    if (isRpcError(res)) throw new RpcError(res.error)
+    if (isRpcSuccess(res)) return res.result
+  }
+
+  async httpRequest<T> (body: RPCOptions): Promise<T> {
+    const url = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/rpc/v1`
+    return this.http.post(url, body)
+      .toPromise().then(a => a as T)
+      .catch(e => { throw new HttpError(e) })
+  }
+}
+
+function RpcError (e: RPCError['error']): void {
+  const { code, message, data } = e
+
+  this.code = code
+  this.message = message
+
+  if (typeof data === 'string') {
+    this.details = e.data
+    this.revision = null
+  } else {
+    this.details = data.details
+  }
+}
+
+function HttpError (e: HttpErrorResponse): void {
+  const { status, statusText } = e
+
+  this.code = status
+  this.message = statusText
+  this.details = null
+  this.revision = null
+}
+
+function isRpcError<Error, Result> (arg: { error: Error } | { result: Result}): arg is { error: Error } {
+  return !!(arg as any).error
+}
+
+function isRpcSuccess<Error, Result> (arg: { error: Error } | { result: Result}): arg is { result: Result } {
+  return !!(arg as any).result
+}
+
+export interface RPCOptions {
+  method: string
+  params: { [param: string]: Params }
+}
+
+export interface RequestError {
+  code: number
+  message: string
+  details: string
+}
+
+export type Params = string | number | boolean | object | string[] | number[]
+
+interface RPCBase {
+  jsonrpc: '2.0'
+  id: string
+}
+
+export interface RPCRequest<T> extends RPCBase {
+  method: string
+  params?: T
+}
+
+export interface RPCSuccess<T> extends RPCBase {
+  result: T
+}
+
+export interface RPCError extends RPCBase {
+  error: {
+    code: number,
+    message: string
+    data?: {
+      details: string
+    } | string
+  }
+}
+
+export type RPCResponse<T> = RPCSuccess<T> | RPCError
+
+type HttpError = HttpErrorResponse & { error: { code: string, message: string } }