Commit abeb5032 authored by Gert Paimla's avatar Gert Paimla

health, various fixes

parent 7eb218f9
......@@ -29,6 +29,8 @@ import {BarChartModule} from '@swimlane/ngx-charts';
import {NzSwitchModule} from 'ng-zorro-antd/switch';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { HealthComponent } from './health/health.component';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
registerLocaleData(en);
@NgModule({
......@@ -62,6 +64,8 @@ registerLocaleData(en);
NzProgressModule,
NzSwitchModule,
BarChartModule,
NzCardModule,
NzSkeletonModule,
BrowserAnimationsModule
],
providers: [{provide: NZ_I18N, useValue: en_GB}],
......
......@@ -22,7 +22,6 @@
<nz-spin *ngIf="isLoading" [nzSize]="'large'" [nzSpinning]="isLoading" nzSimple></nz-spin>
<ng-container *ngIf="resultSource?.length > 0 && !this.isLoading">
<div class="legend">
<span>Language: {{language}}</span>
<div>
<nz-tag *ngFor="let color of COLORKEYS" [nzColor]="COLORS[color]">{{color}}
</nz-tag>
......@@ -42,6 +41,9 @@
</ng-container>
</div>
</div>
<div>
<span>Language: {{language}}</span>
</div>
</div>
</ng-container>
</div>
......
import {Component, OnInit} from '@angular/core';
import {Component, OnDestroy, OnInit} from '@angular/core';
import {AnalyzersService} from '../core/analyzers.service';
import {LogService} from '../core/log.service';
import {HttpErrorResponse} from '@angular/common/http';
import {UtilityFunctions} from '../shared/UtilityFunctions';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@Component({
selector: 'app-entity-extraction',
templateUrl: './article-analyzer.component.html',
styleUrls: ['./article-analyzer.component.less']
})
export class ArticleAnalyzerComponent implements OnInit {
export class ArticleAnalyzerComponent implements OnInit, OnDestroy {
readonly COLORS = UtilityFunctions.COLORS;
readonly COLORKEYS = Object.keys(this.COLORS);
text: string;
......@@ -17,6 +19,7 @@ export class ArticleAnalyzerComponent implements OnInit {
resultSource: string[];
isLoading = false;
language: string;
destroyed$: Subject<boolean> = new Subject<boolean>();
constructor(private analyzersService: AnalyzersService,
private logService: LogService) {
......@@ -29,7 +32,7 @@ export class ArticleAnalyzerComponent implements OnInit {
this.isLoading = true;
this.resultSource = [];
this.results = {};
this.analyzersService.analyzeKeywords({text: this.text}).subscribe(x => {
this.analyzersService.analyzeKeywords({text: this.text}).pipe(takeUntil(this.destroyed$)).subscribe(x => {
if (x && !(x instanceof HttpErrorResponse)) {
this.resultSource = x.analyzers;
for (const item of this.resultSource) {
......@@ -54,4 +57,8 @@ export class ArticleAnalyzerComponent implements OnInit {
this.results[item.source].push(item);
}
}
ngOnDestroy(): void {
this.destroyed$.next(true);
this.destroyed$.complete();
}
}
import {Component, OnInit} from '@angular/core';
import {Component, OnDestroy, OnInit} from '@angular/core';
import {GeneratorsService} from '../core/generators.service';
import {HttpErrorResponse} from '@angular/common/http';
import {LogService} from '../core/log.service';
import {Choice} from '../shared/types/GeneratorOptions';
import {GeneratorResponse} from '../shared/types/GeneratorResponse';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@Component({
selector: 'app-article-generation',
templateUrl: './article-generation.component.html',
styleUrls: ['./article-generation.component.less']
})
export class ArticleGenerationComponent implements OnInit {
export class ArticleGenerationComponent implements OnInit, OnDestroy {
isLoading = false;
dataset: Choice[] = [];
......@@ -19,13 +21,14 @@ export class ArticleGenerationComponent implements OnInit {
selectedLocation: string;
selectedDataset: string;
selectedLanguage: string;
results: GeneratorResponse;
results: GeneratorResponse | null;
destroyed$: Subject<boolean> = new Subject<boolean>();
constructor(private generatorsService: GeneratorsService, private logService: LogService) {
}
ngOnInit(): void {
this.generatorsService.getGeneratorsOptions().subscribe(x => {
this.generatorsService.getGeneratorsOptions().pipe(takeUntil(this.destroyed$)).subscribe(x => {
if (x && !(x instanceof HttpErrorResponse)) {
this.dataset = x.actions.POST.dataset.choices;
this.selectedDataset = this.dataset[0].value;
......@@ -41,6 +44,7 @@ export class ArticleGenerationComponent implements OnInit {
submitForm() {
this.isLoading = true;
this.results = null;
this.generatorsService.generateText(
{location: this.selectedLocation, dataset: this.selectedDataset, language: this.selectedLanguage}).subscribe(x => {
if (x && !(x instanceof HttpErrorResponse)) {
......@@ -51,4 +55,8 @@ export class ArticleGenerationComponent implements OnInit {
}, () => null, () => this.isLoading = false);
}
ngOnDestroy(): void {
this.destroyed$.next(true);
this.destroyed$.complete();
}
}
@font-size: calc(14px + 5 * ((100vw - 320px) / 680));
.status-block {
align-items: center;
align-items: baseline;
h1 {
font-size: @font-size;
margin-bottom: 0;
......
import {Component, OnInit} from '@angular/core';
import {Component, OnDestroy, OnInit} from '@angular/core';
import {AnalyzersService} from '../core/analyzers.service';
import {LogService} from '../core/log.service';
import {HttpErrorResponse} from '@angular/common/http';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@Component({
selector: 'app-hate-speech-detection',
templateUrl: './comment-analyzer.component.html',
styleUrls: ['./comment-analyzer.component.less']
})
export class CommentAnalyzerComponent implements OnInit {
export class CommentAnalyzerComponent implements OnInit, OnDestroy {
text: string;
analyzers: string[] = [];
results: any = {};
isLoading = false;
destroyed$: Subject<boolean> = new Subject<boolean>();
constructor(private analyzersService: AnalyzersService,
private logService: LogService) {
......@@ -26,7 +29,7 @@ export class CommentAnalyzerComponent implements OnInit {
this.isLoading = true;
this.results = {};
this.analyzers = [];
this.analyzersService.analyzeHateSpeech({text: this.text}).subscribe(x => {
this.analyzersService.analyzeHateSpeech({text: this.text}).pipe(takeUntil(this.destroyed$)).subscribe(x => {
if (x && !(x instanceof HttpErrorResponse)) {
this.analyzers = x.analyzers;
for (const item of this.analyzers) {
......@@ -40,5 +43,9 @@ export class CommentAnalyzerComponent implements OnInit {
}
}, () => null, () => this.isLoading = false);
}
ngOnDestroy(): void {
this.destroyed$.next(true);
this.destroyed$.complete();
}
}
......@@ -75,7 +75,7 @@
<div class="container">
<h1>Trending Entities & Keywords in Articles</h1>
<div class="flex-row mw entities-actions">
<nz-select (ngModelChange)="getSelectedFacts($event, selectedRange, tags)" [(ngModel)]="selectedFact"
<nz-select (ngModelChange)="factSelectionChanged($event)" [(ngModel)]="selectedFact"
class="fact-select"
nzMaxTagCount="2"
nzMode="multiple" nzPlaceHolder="Choose">
......
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnInit} from '@angular/core';
import {UtilityFunctions} from '../shared/UtilityFunctions';
interface GraphData {
name: string;
value: number;
extra: { date: Date };
}
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
......@@ -13,7 +19,7 @@ export class DashboardComponent implements OnInit {
strokeWidth = 9; // %
blockedByModelProgressWidth = 0;
commentsOkProgressWidth = 0;
tags = {
tags: { PER: GraphData[], LOC: GraphData[], KEYWORD: GraphData[] } = {
PER: [],
LOC: [],
KEYWORD: []
......@@ -28,14 +34,14 @@ export class DashboardComponent implements OnInit {
showYAxisLabel = true;
yAxisLabel = 'Entities & Keywords';
selectedFact;
graphData = [];
graphData: GraphData[] = [];
isLoading = false;
selectedDataset: string;
selectedRange;
dataset = [{value: 'test', display_name: 'test2'}];
customColors = [];
customColors: { name: string, value: string }[] = [];
constructor(private changeDetectorRef: ChangeDetectorRef) {
}
......@@ -87,8 +93,10 @@ export class DashboardComponent implements OnInit {
}
}
getSelectedFacts(facts, dateRange: [Date, Date], data): any[] {
const temp = [];
getSelectedFacts(facts, dateRange: [Date, Date], data): GraphData[] {
console.log(facts);
console.log(data);
const temp: GraphData[] = [];
for (const key of facts) {
if (data[key]) {
temp.push(...data[key].filter(y => y.extra.date.getTime() >= dateRange[0].getTime() && y.extra.date.getTime() <= dateRange[1].getTime()));
......@@ -98,6 +106,10 @@ export class DashboardComponent implements OnInit {
return temp;
}
factSelectionChanged(val) {
this.graphData = this.getSelectedFacts(val, this.selectedRange, this.tags);
}
submitForm() {
this.isLoading = true;
this.selectedFact = ['PER', 'LOC', 'KEYWORD'];
......
<!--
<nz-progress nzType="dashboard" nzStrokeLinecap="square" nzStrokeWidth="9" [nzPercent]="cpu" nzStatus="normal" ></nz-progress>
<nz-progress nzType="dashboard" nzStrokeLinecap="square" nzStrokeWidth="9" [nzPercent]="disk" nzStatus="normal"></nz-progress>
<nz-progress nzType="dashboard" nzStrokeLinecap="square" nzStrokeWidth="9" [nzPercent]="memory" nzStatus="normal"></nz-progress>
-->
<div class="flex-col mw mh align-center container-padding">
<h1>EMBEDDIA Toolkit API status</h1>
<nz-spin class="margin-10" [nzSpinning]="loading"></nz-spin>
<div *ngIf="!loading">
<nz-card>
<div class="flex-row flex-wrap">
<div class="margin-10" *ngFor="let service of services">
<nz-tag [nzColor]="service.value ? '#66bb6a' : '#ef5350'" class="tag" nz-tooltip [nzTooltipTitle]="service.value ? 'ONLINE' : 'OFFLINE'">{{service.key}}</nz-tag>
</div>
</div>
</nz-card>
<nz-card>
<div class="flex-row justify-content-space-evenly">
<div class="flex-col align-center">
<label class="fw-medium">CPU USAGE</label>
<nz-progress [nzPercent]="cpu" nzStatus="normal" nzStrokeLinecap="square" nzStrokeWidth="9"
nzType="dashboard"></nz-progress>
</div>
<div class="flex-col align-center">
<label class="fw-medium">DISK SPACE</label>
<nz-progress [nzPercent]="disk" nzStatus="normal" nzStrokeLinecap="square" nzStrokeWidth="9"
nzType="dashboard"></nz-progress>
<label class="margin-10">{{diskObj.used | number: '1.0-2'}} / {{diskObj.total | number: '1.0-2'}} {{diskObj.unit}}</label>
</div>
<div class="flex-col align-center">
<label class="fw-medium">MEMORY</label>
<nz-progress [nzPercent]="memory" nzStatus="normal" nzStrokeLinecap="square" nzStrokeWidth="9"
nzType="dashboard"></nz-progress>
<label class="margin-10">{{memoryObj.used | number: '1.0-2'}} / {{memoryObj.total | number: '1.0-2'}} {{memoryObj.unit}}</label>
</div>
</div>
</nz-card>
</div>
</div>
nz-space{
font-size: 16px;
}
.tag{
font-size: 16px;
}
.font-07{
font-size: 0.7em
}
import {Component, OnInit} from '@angular/core';
import {Component, OnDestroy, OnInit} from '@angular/core';
import {CoreService} from '../core/core.service';
import {HttpErrorResponse} from '@angular/common/http';
import {Disk, Memory} from '../shared/types/Health';
import {takeUntil} from 'rxjs/operators';
import {Subject} from 'rxjs';
@Component({
selector: 'app-health',
templateUrl: './health.component.html',
styleUrls: ['./health.component.less']
})
export class HealthComponent implements OnInit {
export class HealthComponent implements OnInit, OnDestroy {
disk = 0;
cpu = 0;
memory = 0;
memoryObj: Memory;
diskObj: Disk;
services: { key: string, value: boolean }[];
loading = true;
destroyed$: Subject<boolean> = new Subject<boolean>();
constructor(private coreService: CoreService) {
}
// router reuse strat? endpoint is slow
ngOnInit(): void {
this.coreService.getHealth().subscribe(x => {
this.coreService.getHealth().pipe(takeUntil(this.destroyed$)).subscribe(x => {
if (x && !(x instanceof HttpErrorResponse)) {
this.memoryObj = x.memory;
this.diskObj = x.disk;
this.cpu = x.cpu.percent;
this.disk = Math.ceil(x.disk.used / x.disk.total * 100);
this.disk = Math.ceil(x.disk.used / x.disk.total * 100);
this.memory = Math.ceil(x.memory.used / x.memory.total * 100);
this.services = Object.keys(x.services).flatMap(y => [{key: y, value: x.services[y]}]);
}
});
}, () => null, () => this.loading = false);
}
ngOnDestroy(): void {
this.destroyed$.next(true);
this.destroyed$.complete();
}
}
@font-size: calc(14px + 5 * ((100vw - 320px) / 680));
@font-size: calc(12px + 4 * ((100vw - 320px) / 680));
.ant-tag {
font-size: @font-size;
border-radius: 5px;
line-height: 45px;
padding: 0 10px;
padding: 0.4em;
margin: 0;
min-width: 100px;
text-align: center;
......
@import "~ng-zorro-antd/ng-zorro-antd.dark.less";
// @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
@import "library-overrides";
.container-padding{
padding: 5%;
}
.flex-row {
display: flex;
flex-direction: row;
......@@ -46,7 +48,7 @@
width: 100%;
.container {
padding: 5%;
&:extend(.container-padding);
display: flex;
flex-direction: column;
width: 100%;
......@@ -79,6 +81,12 @@
.align-center {
align-items: center;
}
.justify-content-center{
justify-content: center;
}
.justify-content-space-evenly {
justify-content: space-evenly;
}
.flex-wrap {
flex-wrap: wrap;
......
......@@ -12,9 +12,10 @@
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"es2019",
"dom"
]
],
"strictNullChecks": true
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment