Commit 427b27b4 authored by Evgeny Stepanovych's avatar Evgeny Stepanovych
Browse files

NAS-114413: Porting changes

parents 191e0f03 de0ac49e
No related merge requests found
Showing with 58 additions and 27 deletions
+58 -27
......@@ -117,6 +117,8 @@ export interface ReportingParams {
identifier: string;
}
export type ReportingAggregationKeys = 'min' | 'mean' | 'max';
export interface ReportingData {
end: number;
identifier: string;
......@@ -126,8 +128,6 @@ export interface ReportingData {
step: number;
data: number[][];
aggregations: {
min: number[];
mean: number[];
max: number[];
[key in ReportingAggregationKeys]: string[];
};
}
......@@ -68,7 +68,7 @@
<mat-card-content fxLayout="row wrap" fxLayout.gt-xs="row wrap" fxLayoutAlign="space-between start" fxFlex="100" *ngIf="!report?.errorConf">
<!-- Chart -->
<div class="chart-wrapper-outer" fxFlex="calc(100% - 400px)">
<div class="chart-wrapper-outer" fxFlex="calc(100% - 420px)">
<div class="chart-wrapper">
<linechart
*ngIf="report && data && chartColors"
......@@ -116,7 +116,7 @@
</div>
</div>
<section class="legend" #legendElement fxFlex="400px" fxLayout="column" fxLayoutAlign="start">
<section class="legend" #legendElement fxFlex="420px" fxLayout="column" fxLayoutAlign="start">
<div *ngIf="report && data && data.legend" class="legend-timestamp" fxFlex="32px">
<div>
<span *ngIf="data && legendData && legendData.xHTML">
......@@ -165,7 +165,7 @@
<ng-container *ngIf="data && data.aggregations">
<td *ngFor="let key of aggregationKeys" class="report-analytics">
<span>
{{ data.aggregations[aggregationKey(key)][i] ? data.aggregations[aggregationKey(key)][i] : 'null' }}
{{ data.aggregations[key][i] ? data.aggregations[key][i] : 'null' }}
</span>
</td>
</ng-container>
......
......@@ -37,7 +37,7 @@
table.legend-table {
display: table;
margin-right: 36px;
width: 400px;
width: 420px;
}
tr.header th {
......@@ -236,7 +236,7 @@ span.disk-detail-subtitle {
.disk-detail-temps-bar {
border-bottom: solid 3px;
border-image: linear-gradient(to right, lightseagreen, yellow 45%, red 55%)15;
border-image: linear-gradient(to right, lightseagreen, yellow 45%, red 55%);
padding-bottom: 5px;
}
......
......@@ -14,12 +14,13 @@ import { Store } from '@ngrx/store';
import { TranslateService } from '@ngx-translate/core';
import { UUID } from 'angular2-uuid';
import { add, sub } from 'date-fns';
import _ from 'lodash';
import { filter, take } from 'rxjs/operators';
import { ProductType } from 'app/enums/product-type.enum';
import { CoreEvent } from 'app/interfaces/events';
import { ThemeChangedEvent, ThemeDataEvent } from 'app/interfaces/events/theme-events.interface';
import { ReportingGraph } from 'app/interfaces/reporting-graph.interface';
import { ReportingData } from 'app/interfaces/reporting.interface';
import { ReportingAggregationKeys, ReportingData } from 'app/interfaces/reporting.interface';
import { Theme } from 'app/interfaces/theme.interface';
import { EmptyConfig, EmptyType } from 'app/modules/entity/entity-empty/entity-empty.component';
import { WidgetComponent } from 'app/pages/dashboard/components/widget/widget.component';
......@@ -82,8 +83,8 @@ export class ReportComponent extends WidgetComponent implements AfterViewInit, O
return this.identifier ? trimmed.replace(/{identifier}/, this.identifier) : this.report.title;
}
get aggregationKeys(): (keyof ReportingData['aggregations'])[] {
return Object.keys(this.data.aggregations) as (keyof ReportingData['aggregations'])[];
get aggregationKeys(): ReportingAggregationKeys[] {
return Object.keys(this.data.aggregations) as ReportingAggregationKeys[];
}
legendData: any = {};
......@@ -135,6 +136,47 @@ export class ReportComponent extends WidgetComponent implements AfterViewInit, O
return result.toLowerCase() !== 'invalid date' ? result : null;
}
formatInterfaceUnit(value: string): string {
if (value && value.split(' ', 2)[0] !== '0') {
if (value.split(' ', 2)[1]) {
value += '/s';
} else {
value += 'b/s';
}
}
return value;
}
formatLegendSeries(series: any[], data: ReportingData): any[] {
switch (data.name) {
case 'interface':
series.forEach((element) => {
element.yHTML = this.formatInterfaceUnit(element.yHTML);
});
break;
default:
break;
}
return series;
}
formatData(data: ReportingData): ReportingData {
switch (data.name) {
case 'interface':
if (data.aggregations) {
for (const key in data.aggregations) {
_.set(data.aggregations, key, data.aggregations[key as ReportingAggregationKeys].map(
(value) => this.formatInterfaceUnit(value),
));
}
}
break;
default:
break;
}
return data;
}
constructor(
public router: Router,
public translate: TranslateService,
......@@ -150,13 +192,14 @@ export class ReportComponent extends WidgetComponent implements AfterViewInit, O
this.core.register({ observerClass: this, eventName: 'ReportData-' + this.chartId }).pipe(
untilDestroyed(this),
).subscribe((evt: CoreEvent) => {
this.data = evt.data;
this.data = this.formatData(evt.data);
this.handleError(evt);
});
this.core.register({ observerClass: this, eventName: 'LegendEvent-' + this.chartId }).pipe(untilDestroyed(this)).subscribe((evt: CoreEvent) => {
const clone = { ...evt.data };
clone.xHTML = this.formatTime(evt.data.xHTML);
clone.series = this.formatLegendSeries(evt.data.series, this.data);
this.legendData = clone;
});
......@@ -202,11 +245,6 @@ export class ReportComponent extends WidgetComponent implements AfterViewInit, O
}
}
// TODO: Helps with template type checking. To be removed when 'strict' checks are enabled.
aggregationKey(key: keyof ReportingData['aggregations']): keyof ReportingData['aggregations'] {
return key;
}
private async setupData(changes: SimpleChanges): Promise<void> {
const zoom = this.zoomLevels[this.timeZoomIndex];
const rrdOptions = await this.convertTimespan(zoom.timespan);
......
......@@ -2,16 +2,12 @@
class="wrapper"
gdGap="8px"
gdRows="fit-content(30vh)"
gdColumns="100% 100%"
gdColumns="100%"
gdColumns.gt-xs="50% 50%"
gdAreas="data-card1 | data-card2 | sysctl-card | data-card3 | cron-card | initshutdown-card | data-card7 | data-card9 | data-card8"
gdAreas.gt-xs="data-card1 data-card2 | sysctl-card cron-card | initshutdown-card data-card7 | data-card9 data-card8"
>
<ng-container *ngFor="let card of dataCards; index as i">
<mat-card
*ngIf="[CardId.Cron, CardId.InitShutdown, CardId.Sysctl].includes(card.id) === false"
class="data-card{{ i + 1 }}"
gdArea="data-card{{ i + 1 }}"
*ngIf="card.items"
>
<mat-toolbar-row>
<h3>{{ card.title | translate }}</h3>
......@@ -36,9 +32,8 @@
</mat-card>
<app-table
*ngIf="[CardId.Cron, CardId.InitShutdown, CardId.Sysctl].includes(card.id)"
*ngIf="card.tableConf"
[conf]="card.tableConf"
[gdArea]="card.id + '-card'"
></app-table>
</ng-container>
</div>
......@@ -213,8 +213,6 @@ export class AdvancedSettingsComponent implements OnInit {
},
};
readonly CardId = AdvancedCardId;
constructor(
private ws: WebSocketService,
private modalService: ModalService,
......
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