Feature/interface improvements (#24)

* build.prod pass * #8 primeng setup * include p-calendar in search page * #8 primeng setup * #8 primeng setup * include p-calendar in search page * include p-calendar in search page * calendar module import * #8 search action start with * include p-calendar in search page * #8 basic pagination in memory * #8 criteria query with count * #8 Pagination on server * #8 Pagination on server results per page * #13 Export current page * #7 Message in response to error in client * #12 WIP LoadingBarInterceptor * update package.json * fix client test with chrome * fix broke package.json in merge * pagination and download working but dirty * remove create, this project cant update database * fix client test * fix wercker build
giovannicandido · May 14, 2017 · 725d6fc · 725d6fc
1 parent b04e4f9
commit 725d6fc
Show file tree

Hide file tree

Showing 20 changed files with 1,320 additions and 486 deletions.
diff --git a/build.gradle b/build.gradle
@@ -59,6 +59,7 @@ dependencies {
 
 
 	compile group: 'info.atende.audition', name: 'audit-model', version: '1.0.0-SNAPSHOT', changing: true
+	compile group: 'commons-lang', name: 'commons-lang', version: '2.6'
 	runtime('org.postgresql:postgresql')
 	testCompile('org.springframework.boot:spring-boot-starter-test')
 }

diff --git a/client/build.gradle b/client/build.gradle
@@ -35,7 +35,7 @@ task testJS(type: NpmTask) {
   inputs.dir "src"
   inputs.file "packages.json"
   outputs.dir "dist"
-  args = ['run', 'test:once']
+  args = ['run', 'test:ci']
 }
 
 test.dependsOn testJS

diff --git a/client/karma.conf.js b/client/karma.conf.js
@@ -12,6 +12,14 @@ module.exports = function (config) {
       require('karma-coverage-istanbul-reporter'),
       require('@angular/cli/plugins/karma')
     ],
+    customLaunchers: {
+      // From the CLI. Not used here but interesting
+      // chrome setup for travis CI using chromium
+      Chrome_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },

diff --git a/client/package.json b/client/package.json
@@ -10,32 +10,34 @@
     "build.prod": "ng build --prod",
     "test": "ng test",
     "test:once": "ng test --single-run",
+    "test:ci": "ng test --single-run --browsers Chrome_ci",
     "pree2e": "webdriver-manager update --standalone false --gecko false",
     "e2e": "protractor"
   },
   "private": true,
   "dependencies": {
     "@angular/animations": "^4.1.2",
-    "@angular/common": "^4.1.2",
-    "@angular/compiler": "^4.1.2",
-    "@angular/core": "^4.1.2",
-    "@angular/forms": "^4.1.2",
-    "@angular/http": "^4.1.2",
-    "@angular/platform-browser": "^4.1.2",
-    "@angular/platform-browser-dynamic": "^4.1.2",
-    "@angular/router": "^4.1.2",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "angular-spa": "^0.3.7",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
     "file-saver": "^1.3.3",
     "font-awesome": "^4.7.0",
+    "ng2-slim-loading-bar": "^4.0.0",
     "primeng": "^4.0.0",
-    "rxjs": "^5.4.0",
-    "zone.js": "^0.8.10"
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "1.0.3",
-    "@angular/compiler-cli": "^4.1.2",
+    "@angular/compiler-cli": "^4.0.0",
     "@types/filesaver": "^0.0.30",
     "@types/jasmine": "2.5.47",
     "@types/node": "^7.0.18",
@@ -48,7 +50,7 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.1",
+    "protractor": "~5.1.0",
     "ts-node": "~3.0.4",
     "tslint": "~5.2.0",
     "typescript": "~2.3.2"

diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
@@ -17,30 +17,30 @@
           <input name="id" type="text" class="form-control" [(ngModel)]="filtro.id" placeholder="ID do Log">
 
           <br><span>Data Início: </span><br>
-          <p-calendar name="dataInicio" dateFormat="dd.mm.yy" [(ngModel)]="dateStart" [maxDate]="dateEnd" [showTime]="true" [showIcon]="true"></p-calendar>
-
+          <input name="dataInicio" type="datetime-local" class="input form-control primary-border" [(ngModel)]="dateStart"
+                 placeholder="dd/mm/aaaa --:--">
 
           <br><span>Data Fim: </span><br>
-          <p-calendar name="dataFim" dateFormat="dd.mm.yy" [(ngModel)]="dateEnd" [minDate]="dateStart" [showTime]="true" [showIcon]="true"></p-calendar>
+          <input name="dataFim" type="datetime-local" class="input form-control primary-border" [(ngModel)]="dateEnd"
+                 placeholder="dd/mm/aaaa --:--">
 
           <br><span>Ip: </span><br>
           <input name="ip" type="text" class="input form-control primary-border" [(ngModel)]="filtro.ip" placeholder="IP">
 
-          <br>Criticidade
-          <br><select name="securitySevel" class="form-control"
+
+          <br><br><select name="securitySevel" class="form-control"
                           [(ngModel)]="filtro.securityLevel">
 
-          <option value="">---Criticidade---</option> <!-- not selected / blank option -->
+          <option value="" selected>---Criticidade---</option> <!-- not selected / blank option -->
           <option *ngFor="let crit  of criticidades" value="{{crit}}"> {{crit}}</option>
 
-          </select>
+        </select>
 
-          <br>Aplicação
-          <br><select name="applicationName" class="form-control"
+          <select name="applicationName" class="form-control"
                   [(ngModel)]="filtro.applicationName">
 
             <option value="" selected>---Aplicação---</option> <!-- not selected / blank option -->
-            <option *ngFor="let aplic  of aplicacoes" value="{{aplic}}" > {{aplic}}</option>
+            <option *ngFor="let aplic  of aplicacoes" value="{{aplic}}"> {{aplic}}</option>
 
           </select>
 
@@ -81,7 +81,9 @@
                      [rows]="10"
                      [paginator]="true"
                      [pageLinks]="3"
-                     [rowsPerPageOptions]="[5,10,20]">
+                     lazy="true"
+                     [totalRecords]="totalRecords"
+                     (onLazyLoad)="onLazyLoad($event)">
           <p-header>Lista de Eventos</p-header>
           <p-column field="id" header="ID"></p-column>
           <p-column field="applicationName" header="Aplicação"></p-column>

diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts
@@ -1,10 +1,8 @@
 import {Component, OnInit} from '@angular/core';
-import {Http, RequestOptions, Response, Headers} from '@angular/http';
-
+import {Http, Headers, Response} from '@angular/http';
 import { saveAs } from 'file-saver';
 import {AppService} from "../app.service";
 import {Message} from 'primeng/primeng';
-
 /**
  * This class represents the lazy loaded AboutComponent.
  */
@@ -17,14 +15,18 @@ export class SearchComponent implements OnInit {
   filtro: any = {};
   criticidades = ['LOW', 'NORMAL', 'HIGHT'];
   aplicacoes = [];
-  resourcesTypes = [];
   logSelecionado: any = {
     resource: {},
     dateTime: {}
   };
   eventos = [];
   dateStart;
   dateEnd;
+  filtrados: any = [];
+  resourcesTypes: any = []
+  totalRecords = 0
+  rows = 100
+  down = false
   constructor(private http: Http, private appService: AppService) {
 
   }
@@ -33,7 +35,6 @@ export class SearchComponent implements OnInit {
     this.loadApplications();
     this.loadResourceTypes();
     this.popular();
-
     this.filtro.dateStart = "null";
     this.filtro.dateEnd = "null";
   }
@@ -65,48 +66,53 @@ export class SearchComponent implements OnInit {
     return true;
   }
 
-  search(down){
-    let url = 'rest/auditevent/search';
-
-    if(this.dateStart != undefined && this.dateEnd != undefined){
-      this.filtro.dateStart = this.dateStart;
-      this.filtro.dateEnd = this.dateEnd;
-    }else{
-      this.filtro.dateStart = "null";
-      this.filtro.dateEnd = "null";
-    }
-    let headers = new Headers();
-    if(down) {
-      headers.append("Accept", "application/csv");
-    }
-    this.http.post(url, this.filtro, {headers: headers}).subscribe(response => {
-      if(response.headers.get("Content-Type") == "application/csv") {
-        this.download(response);
-      }else if(response.status >= 200 && response.status < 300) {
-        this.eventos = response.json();
-      }else { // Error 500
-        this.showError(response.text())
-      }
-    }, error => {
-      this.showError(error)
-    });
-  }
   showError(e) {
     let message: Message = {severity: 'error', summary: 'Ocorreu um erro no servidor', detail: e}
     this.appService.showMessage(message)
   }
   download(response: Response) {
-      const contentType = {type: "application/csv"};
-      const blob = new Blob([response.arrayBuffer()], contentType);
-      saveAs(blob, 'planilha.csv');
+    const contentType = {type: "application/csv"};
+    const blob = new Blob([response.arrayBuffer()], contentType);
+    saveAs(blob, 'planilha.csv');
   };
 
-
+  search(download) {
+    this.down = download;
+    // Max java int
+    let rows = download ? 2147483647 : this.rows
+    this.onLazyLoad({first: 0, rows: rows})
+  }
   popular() {
-    if (this.checkDate()) {
-      this.http.post('rest/auditevent/search', this.filtro).subscribe(function (response) {
-        this.eventos = response.json();
-      });
+    this.down = false;
+    this.onLazyLoad({first: 0, rows: this.rows})
+  }
+  onLazyLoad(event) {
+    let url = 'rest/auditevent/search'
+    let requestHeaders = new Headers()
+    requestHeaders.append("first", event.first)
+    requestHeaders.append("max", event.first + event.rows)
+    if (this.down) {
+      requestHeaders.append("Accept", "application/csv");
+      this.down = false;
+    }
+    if (this.dateStart != undefined && this.dateEnd != undefined) {
+      requestHeaders.append("dateStart", this.dateStart);
+      requestHeaders.append("dateEnd", this.dateEnd)
+
     }
+    this.http.post(url, this.filtro, {headers: requestHeaders}).subscribe(response => {
+
+      if (response.headers.get("Content-Type") == "application/csv") {
+        this.download(response);
+      } else if (response.status >= 200 && response.status < 300) {
+        let json = response.json();
+        let data = json.data
+        let total = json.total
+        this.eventos = data;
+        this.totalRecords = total
+      } else { // Error 500
+        this.showError(response.text())
+      }
+    });
   }
 }
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
@@ -1,4 +1,5 @@
-<p-growl [value]="messages"></p-growl>
+<p-growl [value]="msgs"></p-growl>
+<ng2-slim-loading-bar height="4px"></ng2-slim-loading-bar>
 <app-toolbar></app-toolbar>
 <app-navbar></app-navbar>
 <router-outlet></router-outlet>
diff --git a/client/src/app/app.component.spec.ts b/client/src/app/app.component.spec.ts
@@ -1,11 +1,11 @@
 /* tslint:disable:no-unused-variable */
 
 import {TestBed, async} from '@angular/core/testing';
-import {AppModule} from './app.module';
 import {AppComponent} from './app.component';
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {APP_BASE_HREF} from '@angular/common';
 import {AppService} from "./app.service";
+import {SlimLoadingBarModule} from "ng2-slim-loading-bar";
 
 describe('App: Notification Server', () => {
   beforeEach(() => {
@@ -17,7 +17,10 @@ describe('App: Notification Server', () => {
       declarations: [
         AppComponent
       ],
-      schemas:      [ NO_ERRORS_SCHEMA ]
+      schemas:      [ NO_ERRORS_SCHEMA ],
+      imports: [
+        SlimLoadingBarModule.forRoot(),
+      ]
     }).compileComponents();
   });
 

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
@@ -1,21 +1,41 @@
-import {Component, OnInit} from '@angular/core';
-import {Message} from 'primeng/primeng'
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from "@angular/core";
+import {Message} from "primeng/primeng";
 import {AppService} from "./app.service";
+import {SlimLoadingBarService} from "ng2-slim-loading-bar";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit {
-  messages: Message[] = []
 
-  constructor(private appService: AppService) {
+  msgs: Message[] = []
 
+  constructor(private appService: AppService,
+              private changeDetectionRef: ChangeDetectorRef,
+              private slimBarService: SlimLoadingBarService
+  ) {
   }
+
   ngOnInit() {
-    this.appService.onMessage.subscribe(message => {
-      this.messages.push(message)
+    this.slimBarService.interval = 50;
+    this.appService.onMessage.subscribe(e => {
+
+      // For some reason the change detection for the first item in array doesn't work
+      // Create a copy of array then empty array, trigger the detection and then put the previous copy
+      // + new message and detect again :-)
+      let previous = this.msgs.slice()
+      this.msgs = []
+      setTimeout(() => {
+        previous.push(e)
+        this.msgs = previous
+        this.changeDetectionRef.detectChanges()
+      })
+
+      this.changeDetectionRef.detectChanges()
+
     })
+
   }
 
 }