nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-1450: Update monitor tabs with MD (#1329) 

* TSK-1450: Update monitor tabs with MD

* TSK-1450: fix CI error

* TSK-1450: fix error

* TSK-1450: adapt requested changes

* TSK-1450: remove request in progress service

* TSK-1450: update requested changes

Co-authored-by: Chi Nguyen <6671583+cnguyen-de@users.noreply.github.com>
This commit is contained in:
Franzi321 2020-11-16 22:18:00 +01:00 committed by GitHub
parent 6b1443fdfb
commit ca88a68bfc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 104 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/app/monitor/components/classification-report/classification-report.component.ts
View File

@ -3,7 +3,6 @@ import { RestConnectorService } from 'app/monitor/services/rest-connector.servic
import { ChartData } from 'app/monitor/models/chart-data';
import { ReportData } from '../../models/report-data';
import { ChartColorsDefinition } from '../../models/chart-colors';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-classification-report',
@ -23,17 +22,12 @@ export class ClassificationReportComponent implements OnInit {
lineChartColors = ChartColorsDefinition.getColors();
constructor(
private restConnectorService: RestConnectorService,
private requestInProgressService: RequestInProgressService
) {}
constructor(private restConnectorService: RestConnectorService) {}
async ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.reportData = await this.restConnectorService.getClassificationTasksReport().toPromise();
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
this.lineChartLabels = this.reportData.meta.header;
this.requestInProgressService.setRequestInProgress(false);
}
getTitle(): string {

48
web/src/app/monitor/components/monitor/monitor.component.html
View File

@ -1,37 +1,11 @@
<div>
<ul class="nav nav-tabs" role="tablist">
<li>
<a style="display: none"></a>
</li>
<li (click)="selectTab('tasks')" [ngClass]="{'active':tabSelected === 'tasks'}" class="active"
role="presentation">
<a aria-controls="Tasks" aria-expanded="true" data-toggle="tab" href="#tasks-tab" role="tab">Tasks</a>
</li>
<li (click)="selectTab('workbaskets')" [ngClass]="{'active':tabSelected === 'workbaskets'}">
<a aria-controls="Workbaskets" aria-expanded="true" data-toggle="tab" href="#workbaskets-tab" role="tab">Workbaskets</a>
</li>
<li (click)="selectTab('classifications')" [ngClass]="{'active':tabSelected === 'classifications'}">
<a aria-controls="Classifications" aria-expanded="true" data-toggle="tab" href="#classifications-tab"
role="tab">Classifications</a>
</li>
<li (click)="selectTab('timestamp')" [ngClass]="{'active':tabSelected === 'timestamp'}">
<a aria-controls="Timestamp" aria-expanded="true" data-toggle="tab" href="#timestamp-tab"
role="tab">Timestamp</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tasks-tab" role="tabpanel">
<taskana-monitor-task-report></taskana-monitor-task-report>
</div>
<div class="tab-pane" id="workbaskets-tab" role="tabpanel">
<taskana-monitor-workbasket-report></taskana-monitor-workbasket-report>
</div>
<div class="tab-pane" id="classifications-tab" role="tabpanel">
<taskana-monitor-classification-report></taskana-monitor-classification-report>
</div>
<div class="tab-pane" id="timestamp-tab" role="tabpanel">
<taskana-monitor-timestamp-report></taskana-monitor-timestamp-report>
</div>
</div>
</div>
<nav mat-tab-nav-bar class="nav-bar">
<a mat-tab-link class="nav-bar__tasks" routerLink="/taskana/monitor/tasks" [active]="selectedTab === 'tasks'"
(click)="selectedTab = 'tasks'">Tasks</a>
<a mat-tab-link class="nav-bar__workbaskets" routerLink="/taskana/monitor/workbaskets"
[active]="selectedTab === 'workbaskets'" (click)="selectedTab = 'workbaskets'">Workbaskets</a>
<a mat-tab-link class="nav-bar__classifications" routerLink="/taskana/monitor/classifications"
[active]="selectedTab === 'classifications'" (click)="selectedTab = 'classifications'">Classifications</a>
<a mat-tab-link class="nav-bar__timestamp" routerLink="/taskana/monitor/timestamp"
[active]="selectedTab === 'timestamp'" (click)="selectedTab = 'timestamp'">Timestamp</a>
</nav>
<router-outlet></router-outlet>

17
web/src/app/monitor/components/monitor/monitor.component.scss
View File

@ -0,0 +1,17 @@
@import '../../../../theme/colors';
.nav-bar {
background-color: $light-grey;
position: relative;
border: none;
}
.mat-tab-link {
color: #1a202c !important;
}
.mat-tab-label-active {
font-weight: bolder !important;
color: unset;
opacity: 1;
}

32
web/src/app/monitor/components/monitor/monitor.component.spec.ts Normal file
View File

@ -0,0 +1,32 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { MonitorComponent } from './monitor.component';
import { MatTabsModule } from '@angular/material/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
describe('MonitorComponent', () => {
let component: MonitorComponent;
let fixture: ComponentFixture<MonitorComponent>;
let debugElement: DebugElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MonitorComponent],
imports: [MatTabsModule, RouterModule, RouterTestingModule, HttpClientTestingModule, BrowserAnimationsModule]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MonitorComponent);
debugElement = fixture.debugElement;
component = fixture.debugElement.componentInstance;
fixture.detectChanges();
});
it('should create component', () => {
expect(component).toBeTruthy();
});
});

17
web/src/app/monitor/components/monitor/monitor.component.ts
View File

@ -1,18 +1,19 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'taskana-monitor',
templateUrl: './monitor.component.html',
styleUrls: ['./monitor.component.scss']
})
export class MonitorComponent implements OnInit, OnDestroy {
tabSelected = 'tasks';
export class MonitorComponent implements OnInit {
selectedTab = '';
ngOnInit(): void {}
constructor(public router: Router) {
this.router.navigate(['/taskana/monitor/tasks']);
}
ngOnDestroy(): void {}
selectTab(tab) {
this.tabSelected = tab;
ngOnInit(): void {
this.selectedTab = 'tasks';
}
}

8
web/src/app/monitor/components/task-report/task-report.component.ts
View File

@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ReportData } from 'app/monitor/models/report-data';
import { RestConnectorService } from '../../services/rest-connector.service';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-task-report',
@ -14,19 +13,14 @@ export class TaskReportComponent implements OnInit {
pieChartType = 'pie';
reportData: ReportData;
constructor(
private restConnectorService: RestConnectorService,
private requestInProgressService: RequestInProgressService
) {}
constructor(private restConnectorService: RestConnectorService) {}
async ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.reportData = await this.restConnectorService.getTaskStatusReport().toPromise();
this.pieChartLabels = this.reportData.meta.header;
this.reportData.sumRow[0].cells.forEach((c) => {
this.pieChartData.push(c);
});
this.requestInProgressService.setRequestInProgress(false);
}
getTitle(): string {

8
web/src/app/monitor/components/workbasket-report-due-date/workbasket-report-due-date.component.ts
View File

@ -4,7 +4,6 @@ import { ChartData } from '../../models/chart-data';
import { ChartColorsDefinition } from '../../models/chart-colors';
import { RestConnectorService } from '../../services/rest-connector.service';
import { MetaInfoData } from '../../models/meta-info-data';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-workbasket-report-due-date',
@ -27,17 +26,12 @@ export class WorkbasketReportDueDateComponent implements OnInit {
lineChartColors = ChartColorsDefinition.getColors();
constructor(
private restConnectorService: RestConnectorService,
private requestInProgressService: RequestInProgressService
) {}
constructor(private restConnectorService: RestConnectorService) {}
async ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.reportData = await this.restConnectorService.getWorkbasketStatisticsQueryingByDueDate().toPromise();
this.metaInformation.emit(this.reportData.meta);
this.lineChartLabels = this.reportData.meta.header;
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
this.requestInProgressService.setRequestInProgress(false);
}
}

8
web/src/app/monitor/components/workbasket-report-planned-date/workbasket-report-planned-date.component.ts
View File

@ -4,7 +4,6 @@ import { ChartData } from '../../models/chart-data';
import { ChartColorsDefinition } from '../../models/chart-colors';
import { RestConnectorService } from '../../services/rest-connector.service';
import { MetaInfoData } from '../../models/meta-info-data';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-workbasket-report-planned-date',
@ -28,17 +27,12 @@ export class WorkbasketReportPlannedDateComponent implements OnInit {
lineChartColors = ChartColorsDefinition.getColors();
constructor(
private restConnectorService: RestConnectorService,
private requestInProgressService: RequestInProgressService
) {}
constructor(private restConnectorService: RestConnectorService) {}
async ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.reportData = await this.restConnectorService.getWorkbasketStatisticsQueryingByPlannedDate().toPromise();
this.metaInformation.emit(this.reportData.meta);
this.lineChartLabels = this.reportData.meta.header;
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
this.requestInProgressService.setRequestInProgress(false);
}
}

29
web/src/app/monitor/monitor-routing.module.ts
View File

@ -1,11 +1,38 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MonitorComponent } from './components/monitor/monitor.component';
import { TaskReportComponent } from './components/task-report/task-report.component';
import { WorkbasketReportComponent } from './components/workbasket-report/workbasket-report.component';
import { ClassificationReportComponent } from './components/classification-report/classification-report.component';
import { TimestampReportComponent } from './components/timestamp-report/timestamp-report.component';
const routes: Routes = [
{
path: '',
component: MonitorComponent
component: MonitorComponent,
children: [
{
path: 'tasks',
component: TaskReportComponent
},
{
path: 'workbaskets',
component: WorkbasketReportComponent
},
{
path: 'classifications',
component: ClassificationReportComponent
},
{
path: 'timestamp',
component: TimestampReportComponent
}
]
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
},
{
path: '**',

4
web/src/app/monitor/monitor.module.ts
View File

@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';
import { ChartsModule } from 'ng2-charts';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { MatTabsModule } from '@angular/material/tabs';
import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule } from 'angular-svg-icon';
import { MapToIterable } from 'app/shared/pipes/map-to-iterable.pipe';
@ -32,7 +33,8 @@ const MODULES = [
TabsModule.forRoot(),
HttpClientModule,
AngularSvgIconModule,
SharedModule
SharedModule,
MatTabsModule
];
const DECLARATIONS = [
ReportTableComponent,