Commit 7eb218f9 authored by Gert Paimla's avatar Gert Paimla

dash date filtering, health service

parent cd57a931
......@@ -4,6 +4,7 @@ import {CommentAnalyzerComponent} from './comment-analyzer/comment-analyzer.comp
import {ArticleAnalyzerComponent} from './article-analyzer/article-analyzer.component';
import {ArticleGenerationComponent} from './article-generation/article-generation.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import {HealthComponent} from './health/health.component';
const routes: Routes = [
......@@ -27,6 +28,11 @@ const routes: Routes = [
pathMatch: 'full',
component: DashboardComponent
},
{
path: '',
pathMatch: 'full',
component: HealthComponent
},
{
path: '**',
redirectTo: ''
......
<nz-layout class="mh">
<nz-header class="flex-row">
<h3>Embeddia demo</h3>
<ul nz-menu nzMode="horizontal" nzTheme="dark">
<li nz-menu-item nzMatchRouter [nzMatchRouterExact]="true"><a class="fw-medium color-w" [routerLink]="['']">Embeddia demo</a></li>
<li nz-menu-item nzMatchRouter><a [routerLink]="['comment-analyzer']">Comment Analyzer</a></li>
<li nz-menu-item nzMatchRouter><a [routerLink]="['article-analyzer']">Article Analyzer</a></li>
<li nz-menu-item nzMatchRouter><a [routerLink]="['article-generation']">Article Generator</a></li>
......
......@@ -28,6 +28,7 @@ import {NzMenuModule, NzProgressModule} from 'ng-zorro-antd';
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';
registerLocaleData(en);
@NgModule({
......@@ -36,7 +37,8 @@ registerLocaleData(en);
CommentAnalyzerComponent,
ArticleAnalyzerComponent,
ArticleGenerationComponent,
DashboardComponent
DashboardComponent,
HealthComponent
],
imports: [
BrowserModule,
......
import { TestBed } from '@angular/core/testing';
import { CoreService } from './core.service';
describe('CoreService', () => {
let service: CoreService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(CoreService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import {Injectable} from '@angular/core';
import {environment} from '../../environments/environment';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {LogService} from './log.service';
import {Observable} from 'rxjs';
import {GeneratorResponse} from '../shared/types/GeneratorResponse';
import {catchError, tap} from 'rxjs/operators';
import {Health} from '../shared/types/Health';
@Injectable({
providedIn: 'root'
})
export class CoreService {
apiUrl = environment.apiHost + environment.apiBasePath;
constructor(private http: HttpClient, private logService: LogService) {
}
getHealth(): Observable<Health | HttpErrorResponse> {
return this.http.get<Health>(
`${this.apiUrl}/health/`
).pipe(
tap(e => this.logService.logStatus(e, 'getHealth')),
catchError(this.logService.handleError<Health>('getHealth')));
}
}
......@@ -29,11 +29,11 @@
</button>
</form>
<nz-space class="flex-col progress" nzDirection="vertical" nzSize="small" *ngIf="graphData.length>0">
<nz-space *ngIf="graphData.length>0" class="flex-col progress" nzDirection="vertical" nzSize="small">
<nz-space-item class="flex-col overall-health align-center">
<h1>Overall Health</h1>
<nz-progress [nzFormat]="formatComments" [nzPercent]="81" [nzStrokeLinecap]="strokeCap"
[nzStrokeWidth]="strokeWidth" [nzWidth]="commentsOkProgressWidth"
[nzStrokeWidth]="strokeWidth" [nzWidth]="commentsOkProgressWidth" nzStatus="normal"
nzStrokeColor="green" nzType="dashboard"></nz-progress>
<ng-template #formatComments let-number>
<div class="flex-col">{{number}}%<span>Comments OK</span></div>
......@@ -41,27 +41,27 @@
</nz-space-item>
<div class="flex-col blocked-by-model align-center">
<h1>Blocked by Model</h1>
<nz-space class="flex-row wrap-space-evenly"
[nzDirection]="'horizontal'" nzSize="small">
<nz-space [nzDirection]="'horizontal'"
class="flex-row wrap-space-evenly" nzSize="small">
<nz-space-item>
<nz-progress [nzFormat]="moderate" [nzPercent]="5" [nzStrokeLinecap]="strokeCap"
[nzStrokeWidth]="strokeWidth" [nzWidth]="blockedByModelProgressWidth"
[nzStrokeWidth]="strokeWidth" [nzWidth]="blockedByModelProgressWidth" nzStatus="normal"
nzType="dashboard"></nz-progress>
<ng-template #moderate let-number>
<div class="flex-col">{{number}}%<span>TEXTA Moderate</span></div>
</ng-template>
</nz-space-item>
<nz-space-item>
<nz-progress [nzFormat]="delete" [nzPercent]="4" [nzStrokeLinecap]="strokeCap"
[nzStrokeWidth]="strokeWidth" [nzWidth]="blockedByModelProgressWidth"
<nz-progress [nzFormat]="Tdelete" [nzPercent]="4" [nzStrokeLinecap]="strokeCap"
[nzStrokeWidth]="strokeWidth" [nzWidth]="blockedByModelProgressWidth" nzStatus="normal"
nzType="dashboard"></nz-progress>
<ng-template #delete let-number>
<ng-template #Tdelete let-number>
<div class="flex-col">{{number}}%<span>TEXTA Delete</span></div>
</ng-template>
</nz-space-item>
<nz-space-item>
<nz-progress [nzFormat]="QMUL" [nzPercent]="10" [nzStrokeLinecap]="strokeCap"
[nzStrokeWidth]="strokeWidth" [nzWidth]="blockedByModelProgressWidth"
[nzStrokeWidth]="strokeWidth" [nzWidth]="blockedByModelProgressWidth" nzStatus="normal"
nzType="dashboard"></nz-progress>
<ng-template #QMUL let-number>
<div class="flex-col">{{number}}%<span>QMUL</span></div>
......@@ -75,25 +75,25 @@
<div class="container">
<h1>Trending Entities & Keywords in Articles</h1>
<div class="flex-row mw entities-actions">
<nz-select (ngModelChange)="factSelected($event)" [(ngModel)]="selectedFact"
<nz-select (ngModelChange)="getSelectedFacts($event, selectedRange, tags)" [(ngModel)]="selectedFact"
class="fact-select"
nzMaxTagCount="2"
nzMode="multiple" nzPlaceHolder="Choose">
<nz-option *ngFor="let key of this.tagsKeys" nzLabel="{{key}}" nzValue="{{key}}"></nz-option>
</nz-select>
</div>
<div class="flex-col mh mw dark">
<ngx-charts-bar-horizontal *ngIf="graphData.length>0"
[customColors]="customColors"
[results]="graphData"
[roundEdges]="false"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[xAxis]="showXAxis"
[yAxisLabel]="yAxisLabel"
[yAxisTickFormatting]="formatYAxisTicks"
[yAxis]="showYAxis">
<div *ngIf="!isLoading && this.graphData.length > 0" class="flex-col mh mw dark">
<ngx-charts-bar-horizontal
[customColors]="customColors"
[results]="graphData"
[roundEdges]="false"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[xAxis]="showXAxis"
[yAxisLabel]="yAxisLabel"
[yAxisTickFormatting]="formatYAxisTicks"
[yAxis]="showYAxis">
</ngx-charts-bar-horizontal>
</div>
</div>
......
......@@ -34,7 +34,7 @@ export class DashboardComponent implements OnInit {
isLoading = false;
selectedDataset: string;
selectedRange;
dataset = [{value: 'test', display_name: 'test2'}, {value: 'test5', display_name: 'test3'}];
dataset = [{value: 'test', display_name: 'test2'}];
customColors = [];
constructor(private changeDetectorRef: ChangeDetectorRef) {
......@@ -49,23 +49,23 @@ export class DashboardComponent implements OnInit {
for (let f = 0; f <= 10; f++) {
const perName = Math.random().toString(36).substring(Math.random() * 10);
this.tags.PER.push({
name: perName, value: Math.floor(Math.random() * 100)
name: perName, value: Math.floor(Math.random() * 100), extra: {date: this.randomDate(new Date(2012, 0, 1), new Date())}
});
this.customColors.push({name: perName, value: this.COLORS.PER});
const keyName = Math.random().toString(36).substring(Math.random() * 10);
this.tags.KEYWORD.push({
name: keyName, value: Math.floor(Math.random() * 100)
name: keyName, value: Math.floor(Math.random() * 100), extra: {date: this.randomDate(new Date(2012, 0, 1), new Date())}
});
this.customColors.push({name: keyName, value: this.COLORS.KEYWORD});
const locName = Math.random().toString(36).substring(Math.random() * 10);
this.tags.LOC.push({
name: locName,
value: Math.floor(Math.random() * 100)
value: Math.floor(Math.random() * 100), extra: {date: this.randomDate(new Date(2012, 0, 1), new Date())}
});
this.customColors.push({name: locName, value: this.COLORS.LOC});
}
this.selectedFact = ['PER', 'LOC', 'KEYWORD'];
this.factSelected(this.selectedFact);
this.selectedDataset = this.dataset[0].value;
this.selectedRange = [new Date(2012, 0, 1), new Date()];
this.calculateProgressBarSize();
}
......@@ -75,7 +75,7 @@ export class DashboardComponent implements OnInit {
if (windowHeight <= 790) {
this.blockedByModelProgressWidth = 88;
this.commentsOkProgressWidth = 108;
}else if (windowHeight <= 876) {
} else if (windowHeight <= 876) {
this.blockedByModelProgressWidth = 100;
this.commentsOkProgressWidth = 115;
} else if (windowHeight <= 960) {
......@@ -87,19 +87,22 @@ export class DashboardComponent implements OnInit {
}
}
factSelected(val) {
getSelectedFacts(facts, dateRange: [Date, Date], data): any[] {
const temp = [];
for (const key of val) {
temp.push(...this.tags[key]);
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()));
}
}
temp.sort((a, b) => (a.value < b.value) ? 1 : -1);
this.graphData = temp;
console.log(this.graphData);
return temp;
}
submitForm() {
console.log(this.selectedRange);
console.log(this.selectedDataset);
this.isLoading = true;
this.selectedFact = ['PER', 'LOC', 'KEYWORD'];
this.graphData = this.getSelectedFacts(this.selectedFact, this.selectedRange, this.tags);
this.isLoading = false;
}
formatYAxisTicks(val) {
......@@ -114,4 +117,9 @@ export class DashboardComponent implements OnInit {
}
return val.length === stringValue.trim().length ? stringValue : stringValue + '...';
}
randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
}
<!--
<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>
-->
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HealthComponent } from './health.component';
describe('HealthComponent', () => {
let component: HealthComponent;
let fixture: ComponentFixture<HealthComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HealthComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HealthComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import {Component, OnInit} from '@angular/core';
import {CoreService} from '../core/core.service';
import {HttpErrorResponse} from '@angular/common/http';
@Component({
selector: 'app-health',
templateUrl: './health.component.html',
styleUrls: ['./health.component.less']
})
export class HealthComponent implements OnInit {
disk = 0;
cpu = 0;
memory = 0;
constructor(private coreService: CoreService) {
}
// router reuse strat? endpoint is slow
ngOnInit(): void {
this.coreService.getHealth().subscribe(x => {
if (x && !(x instanceof HttpErrorResponse)) {
this.cpu = x.cpu.percent;
this.disk = Math.ceil(x.disk.used / x.disk.total * 100);
this.memory = Math.ceil(x.memory.used / x.memory.total * 100);
}
});
}
}
export interface Disk {
free: number;
total: number;
used: number;
unit: string;
}
export interface Memory {
free: number;
total: number;
used: number;
unit: string;
}
export interface Cpu {
percent: number;
}
export interface Services {
[key: string]: boolean;
}
export interface Health {
service: string;
disk: Disk;
memory: Memory;
cpu: Cpu;
services: Services;
}
@import "~ng-zorro-antd/ng-zorro-antd.dark.less";
// @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
@import "library-overrides";
.flex-row {
display: flex;
flex-direction: row;
}
.wrap-space-evenly{
.wrap-space-evenly {
flex-wrap: wrap;
justify-content: space-evenly;
}
.flex-col {
display: flex;
flex-direction: column;
......@@ -41,7 +44,8 @@
display: flex;
flex-direction: column;
width: 100%;
.container{
.container {
padding: 5%;
display: flex;
flex-direction: column;
......@@ -55,24 +59,35 @@
.mh {
height: 100%;
}
.mw{
.mw {
width: 100%;
}
.m-5 {
margin: 5% 0;
}
.margin-10{
.margin-10 {
margin: 10px;
}
.m-r-a{
.m-r-a {
margin-right: auto;
}
.align-center{
.align-center {
align-items: center;
}
.flex-wrap{
.flex-wrap {
flex-wrap: wrap;
}
.fw-medium {
font-weight: 500;
}
@black: rgb(20, 20, 20);
.dark {
/**
......
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