Revize 5849958b

Re #7816: Logování ve FE

- přidána service pro logování
- implementovány log levely: INFO, WARN, DEBUG, ERROR
- návod na wiki v záložce Nástroje -> logování FE

fe/fulltextsearch/src/app/app.module.ts

@@ -28 +28 @@
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
+import { DatePipe } from '@angular/common';
 
 @NgModule({
   declarations: [
@@ -62 +63 @@
     MatSidenavModule,
     MatListModule
   ],
-  providers: [],
+  providers: [DatePipe],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

fe/fulltextsearch/src/app/components/pages/browse/browse.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
-import {DocumentResponse} from '../../../model/DocumentResponse';
-import {QueryService} from '../../../services/query.service';
+import { DocumentResponse } from '../../../model/DocumentResponse';
+import { QueryService } from '../../../services/query/query.service';
+import { LoggerService } from '../../../services/logger/logger.service';
 
 @Component({
   selector: 'app-browse',
@@ -10 +11 @@
 export class BrowseComponent implements OnInit {
   documents: DocumentResponse[] = null;
 
-  constructor( private queryService: QueryService ) { }
+  constructor( private queryService: QueryService, private LOGGER: LoggerService ) { }
 
   ngOnInit(): void {
+    this.LOGGER.info('browse component on init');
     this.queryService.getDocuments().subscribe( documents => {
       this.documents = documents;
     });

fe/fulltextsearch/src/app/components/pages/browse/table/table.component.ts

@@ -4 +4 @@
 import { MatTable } from '@angular/material/table';
 import { TableDataSource } from './table-datasource';
 import { DocumentResponse } from '../../../../model/DocumentResponse';
-import {QueryService} from '../../../../services/query.service';
+import { QueryService } from '../../../../services/query/query.service';
 
 @Component({
   selector: 'app-table-browse',

fe/fulltextsearch/src/app/components/pages/help/help.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
+import { LoggerService } from '../../../services/logger/logger.service';
 
 @Component({
   selector: 'app-help',
@@ -7 +8 @@
 })
 export class HelpComponent implements OnInit {
 
-  constructor() { }
+  constructor( private LOGGER: LoggerService ) { }
 
   ngOnInit(): void {
+    this.LOGGER.info('help component on init');
   }
 
 }

fe/fulltextsearch/src/app/components/pages/home/home.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
+import { LoggerService } from '../../../services/logger/logger.service';
 
 @Component({
   selector: 'app-home',
@@ -7 +8 @@
 })
 export class HomeComponent implements OnInit {
 
+  constructor( private LOGGER: LoggerService ) {}
+
   ngOnInit() {
+    this.LOGGER.info('home component on init');
   }
 
 }

fe/fulltextsearch/src/app/components/pages/search/search.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
+import { LoggerService } from '../../../services/logger/logger.service';
 
 @Component({
   selector: 'app-search',
@@ -7 +8 @@
 })
 export class SearchComponent implements OnInit {
 
-  constructor() { }
+  constructor( private LOGGER: LoggerService ) { }
 
   ngOnInit(): void {
+    this.LOGGER.info('search component on init');
   }
 
 }

fe/fulltextsearch/src/app/components/pages/upload/upload.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
-import {QueryService} from '../../../services/query.service';
-import {HttpEventType} from '@angular/common/http';
+import { QueryService } from '../../../services/query/query.service';
+import { HttpEventType } from '@angular/common/http';
 import Utils from '../../../../Utils';
+import { LoggerService } from '../../../services/logger/logger.service';
 
 @Component({
   selector: 'app-upload',
@@ -13 +14 @@
   resultMessage: string = null;
   progress = 0;
 
-  constructor( private queryService: QueryService ) { }
+  constructor( private queryService: QueryService, private LOGGER: LoggerService ) { }
 
   ngOnInit(): void {
+    this.LOGGER.info('upload component on init');
   }
 
   onFilesSelected(event) {
@@ -25 +27 @@
   }
 
   onUpload() {
-    console.log(this.selectedFiles);
+    this.LOGGER.info('Selected files: ' + this.selectedFiles);
 
     if (!this.checkFiles(this.selectedFiles)) {
-      console.log('Files are not valid');
+      this.LOGGER.warn('Files are not valid');
       return;
     }
 
@@ -38 +40 @@
       } else if (event.type === HttpEventType.Response ) {
         this.resultMessage = 'Successfully uploaded ' + this.selectedFiles.length + ' files';
         this.selectedFiles = null;
+        this.LOGGER.info('Files successfully uploaded');
       }
     });
   }

fe/fulltextsearch/src/app/components/shared-components/search-box/search-box.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
 import { SearchRequest } from '../../../model/SearchRequest';
-import { QueryService } from '../../../services/query.service';
+import { QueryService } from '../../../services/query/query.service';
 import { Router } from '@angular/router';
 
 @Component({

fe/fulltextsearch/src/app/services/logger/logger.service.spec.ts

@@ +1 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoggerService } from './logger.service';
+
+describe('LoggerService', () => {
+  let service: LoggerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoggerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

fe/fulltextsearch/src/app/services/logger/logger.service.ts

@@ +1 @@
+import { Injectable } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoggerService {
+
+  // log config
+  private dateFormat = 'yyyy-MM-dd HH:mm:ss.SSS';
+  private DEBUG = 'DEBUG';
+  private DEBUG_STYLE = 'color: ';
+  private INFO = 'INFO';
+  private INFO_STYLE = 'color: #4CCF27';
+  private WARN = 'WARN';
+  private WARN_STYLE = 'color: #FAC837';
+  private ERROR = 'ERROR';
+  private ERROR_STYLE = 'color: #FA3737';
+
+  constructor(public datePipe: DatePipe) {
+  }
+
+  private log(message: any, logLevel, style) {
+    console.log('%c' + this.getFormattedDate() + '\t\t' + logLevel + '\t' + JSON.stringify(message), style);
+  }
+
+  private getFormattedDate(): string {
+    return this.datePipe.transform(new Date(), this.dateFormat);
+  }
+
+  info(message: any) {
+    this.log(message, this.INFO, this.INFO_STYLE);
+  }
+
+  debug(message: any) {
+    this.log(message, this.DEBUG, this.DEBUG_STYLE);
+  }
+
+  warn(message: any) {
+    this.log(message, this.WARN, this.WARN_STYLE);
+  }
+
+  error(message: any) {
+    this.log(message, this.ERROR, this.ERROR_STYLE);
+  }
+}

fe/fulltextsearch/src/app/services/query.service.spec.ts

@@ -1 @@
-import { TestBed } from '@angular/core/testing';
-
-import { QueryService } from './query.service';
-import {HttpClientModule} from '@angular/common/http';
-
-describe('QueryService', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [HttpClientModule]
-  }));
-
-  it('should be created', () => {
-    const service: QueryService = TestBed.get(QueryService);
-    expect(service).toBeTruthy();
-  });
-});

fe/fulltextsearch/src/app/services/query.service.ts

@@ -1 @@
-import {Injectable} from '@angular/core';
-import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {Observable} from 'rxjs';
-import {DocumentResponse} from '../model/DocumentResponse';
-import {SearchResponse} from '../model/SearchResponse';
-import {SearchRequest} from '../model/SearchRequest';
-
-const httpOptions = {
-  headers: new HttpHeaders( {
-    'Content-Type': 'application/json'
-  })
-};
-
-@Injectable({
-  providedIn: 'root'
-})
-export class QueryService {
-
-  backendUrl = 'http://localhost:8080/';
-  uploadFileUrl = 'upload';
-  documentsUrl = 'documents';
-
-  constructor(private httpClient: HttpClient) {}
-
-  searchPost(searchRequest: SearchRequest): Observable<SearchResponse> {
-    return this.httpClient.post<SearchResponse>(this.backendUrl, searchRequest, httpOptions);
-  }
-
-
-  uploadFile(files: File[]): Observable<any> {
-    const formDate = new FormData();
-    for (const file of files) {
-      formDate.append('file', file);
-    }
-    return this.httpClient.post(this.backendUrl + this.uploadFileUrl, formDate, {
-      reportProgress: true,
-      observe: 'events'
-    });
-  }
-
-  getDocuments(): Observable<DocumentResponse[]> {
-    return this.httpClient.get<DocumentResponse[]>(this.backendUrl + this.documentsUrl, httpOptions);
-  }
-
-
-}

fe/fulltextsearch/src/app/services/query/query.service.spec.ts

@@ +1 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QueryService } from './query.service';
+import { HttpClientModule } from '@angular/common/http';
+
+describe('QueryService', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [HttpClientModule]
+  }));
+
+  it('should be created', () => {
+    const service: QueryService = TestBed.get(QueryService);
+    expect(service).toBeTruthy();
+  });
+});

fe/fulltextsearch/src/app/services/query/query.service.ts

@@ +1 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { DocumentResponse } from '../../model/DocumentResponse';
+import { SearchResponse } from '../../model/SearchResponse';
+import { SearchRequest } from '../../model/SearchRequest';
+
+const httpOptions = {
+  headers: new HttpHeaders( {
+    'Content-Type': 'application/json'
+  })
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QueryService {
+
+  backendUrl = 'http://localhost:8080/';
+  uploadFileUrl = 'upload';
+  documentsUrl = 'documents';
+
+  constructor(private httpClient: HttpClient) {}
+
+  searchPost(searchRequest: SearchRequest): Observable<SearchResponse> {
+    return this.httpClient.post<SearchResponse>(this.backendUrl, searchRequest, httpOptions);
+  }
+
+
+  uploadFile(files: File[]): Observable<any> {
+    const formDate = new FormData();
+    for (const file of files) {
+      formDate.append('file', file);
+    }
+    return this.httpClient.post(this.backendUrl + this.uploadFileUrl, formDate, {
+      reportProgress: true,
+      observe: 'events'
+    });
+  }
+
+  getDocuments(): Observable<DocumentResponse[]> {
+    return this.httpClient.get<DocumentResponse[]>(this.backendUrl + this.documentsUrl, httpOptions);
+  }
+
+
+}