From 83cc7888d46dd0f7923c1169c9fe5b576d7d95a3 Mon Sep 17 00:00:00 2001 From: Timo Bejan Date: Fri, 23 Oct 2020 19:49:26 +0300 Subject: [PATCH] first version of state monitoring --- .../file-preview-screen.component.ts | 10 ++-- .../project-listing-screen.component.ts | 29 +++++----- .../project-overview-screen.component.ts | 6 +- .../red-ui/src/app/state/app-state.service.ts | 57 ++++++++++++++----- 4 files changed, 69 insertions(+), 33 deletions(-) diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index 1ad80dedb..6bd5c696c 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -82,6 +82,12 @@ export class FilePreviewScreenComponent implements OnInit { // PDFTRON cache fix localStorage.clear(); this._reloadFiles(); + this.appStateService.fileStatusChanged.subscribe((fileStatus) => { + if(fileStatus.fileId === this.fileId) { + console.log(fileStatus); + this._reloadFiles(); + } + }) } private _reloadFiles() { @@ -156,10 +162,6 @@ export class FilePreviewScreenComponent implements OnInit { public openManualRedactionDialog($event: ManualRedactionEntry) { this.ngZone.run(() => { this._dialogService.openManualRedactionDialog($event, () => { - setTimeout(() => { - console.log('reload files after 5 seconds'); - this._reloadFiles(); - }, 5000) }); }); diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index 5a979f033..9d2351002 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -1,11 +1,11 @@ -import { Component, OnInit } from '@angular/core'; -import { Project } from '@redaction/red-ui-http'; -import { AppStateService, ProjectWrapper } from '../../state/app-state.service'; -import { UserService } from '../../user/user.service'; -import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; -import { SortingOption } from '../../utils/types'; -import { groupBy } from '../../utils/functions'; -import { DialogService } from '../../dialogs/dialog.service'; +import {Component, OnInit} from '@angular/core'; +import {Project} from '@redaction/red-ui-http'; +import {AppStateService, ProjectWrapper} from '../../state/app-state.service'; +import {UserService} from '../../user/user.service'; +import {DoughnutChartConfig} from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; +import {SortingOption} from '../../utils/types'; +import {groupBy} from '../../utils/functions'; +import {DialogService} from '../../dialogs/dialog.service'; @Component({ selector: 'redaction-project-listing-screen', @@ -16,8 +16,8 @@ export class ProjectListingScreenComponent implements OnInit { public projectsChartData: DoughnutChartConfig [] = []; public documentsChartData: DoughnutChartConfig [] = []; public sortingOptions: SortingOption[] = [ - { label: 'project-listing.sorting.recent.label', order: 'desc', column: 'projectDate' }, - { label: 'project-listing.sorting.alphabetically.label', order: 'asc', column: 'project.projectName' } + {label: 'project-listing.sorting.recent.label', order: 'desc', column: 'projectDate'}, + {label: 'project-listing.sorting.alphabetically.label', order: 'asc', column: 'project.projectName'} ]; public sortingOption: SortingOption = this.sortingOptions[0]; @@ -31,17 +31,20 @@ export class ProjectListingScreenComponent implements OnInit { ngOnInit(): void { this.appStateService.reset(); this._calculateData(); + this.appStateService.fileStatusChanged.subscribe(() => { + this._calculateData(); + }) } private _calculateData() { this.projectsChartData = [ - { value: this.activeProjects, color: 'ACTIVE', label: 'active' }, - { value: this.inactiveProjects, color: 'DELETED', label: 'archived' } + {value: this.activeProjects, color: 'ACTIVE', label: 'active'}, + {value: this.inactiveProjects, color: 'DELETED', label: 'archived'} ]; const groups = groupBy(this.appStateService.aggregatedFiles, 'status'); this.documentsChartData = []; for (const key of Object.keys(groups)) { - this.documentsChartData.push({ value: groups[key].length, color: key, label: key }); + this.documentsChartData.push({value: groups[key].length, color: key, label: key}); } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index 9e309ea8a..7c792c1f2 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -12,8 +12,6 @@ import {SortingOption} from '../../utils/types'; import {DoughnutChartConfig} from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; import {groupBy} from '../../utils/functions'; import {DialogService} from '../../dialogs/dialog.service'; -import {interval} from "rxjs"; -import {flatMap, tap} from "rxjs/operators"; @Component({ @@ -48,6 +46,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this._activatedRoute.params.subscribe(params => { this.appStateService.activateProject(params.projectId); }); + + this.appStateService.fileStatusChanged.subscribe(() => { + this._calculateChartConfig(); + }) } ngOnInit(): void { diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts index 8aad4cee4..92a90e2b8 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/apps/red-ui/src/app/state/app-state.service.ts @@ -1,4 +1,4 @@ -import {Injectable, EventEmitter} from "@angular/core"; +import {EventEmitter, Injectable} from "@angular/core"; import { FileStatus, Project, @@ -41,8 +41,7 @@ export class AppStateService { private _appState: AppState; - public fileStatusChanged = new EventEmitter(); - + public fileStatusChanged = new EventEmitter(); constructor( private readonly _router: Router, @@ -59,11 +58,11 @@ export class AppStateService { } interval(5000).pipe(tap(() => { - this.reloadActiveProjectFiles(); + this.reloadActiveProjectFiles(); })).subscribe(); interval(30000).pipe(tap(() => { - this.loadAllProjects(); + this.loadAllProjects(); })).subscribe(); } @@ -128,20 +127,49 @@ export class AppStateService { async loadAllProjects() { const projects = await this._projectControllerService.getProjects().toPromise(); if (projects) { - this._appState.projects = projects.map(p => { - return new ProjectWrapper(p, []); + + let mappedProjects = projects.map(p => { + return new ProjectWrapper(p, this._getExistingFiles(p)); }); - for (const project of projects) { - await this.getFiles(project.projectId); + + for (const project of mappedProjects) { + await this.getFiles(project); } + + this._appState.projects = mappedProjects; this._computeStats(); } } - async getFiles(projectId: string) { - const files = await this._statusControllerService.getProjectStatus(projectId).toPromise(); - const project = this.getProjectById(projectId); + private _getExistingFiles(project: Project) { + const found = this._appState.projects.find(p => p.project.projectId === project.projectId); + return found ? found.files : []; + } + + async getFiles(project?: ProjectWrapper) { + const files = await this._statusControllerService.getProjectStatus(project.project.projectId).toPromise(); + const oldFiles = [...project.files]; + + for (let file of files) { + let found = false; + for (let oldFile of oldFiles) { + if (oldFile.fileId === file.fileId) { + // emit when analysis count changed + if (oldFile.numberOfAnalyses !== file.numberOfAnalyses) { + this.fileStatusChanged.emit(oldFile); + } + found = true; + break; + } + } + // emit for new file + if (!found) { + this.fileStatusChanged.emit(file); + } + } + project.files = files; + this._computeStats(); return files; } @@ -213,8 +241,8 @@ export class AppStateService { } async reloadActiveProjectFiles() { - if(this._appState.activeProject?.project) { - await this.getFiles(this._appState.activeProject.project.projectId); + if (this._appState.activeProject) { + await this.getFiles(this._appState.activeProject); } } @@ -229,4 +257,5 @@ export class AppStateService { await this.reloadActiveProjectFiles(); } + }