File
Implements
Metadata
| selector |
apm-performance |
| styleUrls |
./performance.component.scss |
| templateUrl |
./performance.component.html |
Methods
|
onDetailClicked
|
onDetailClicked(row)
|
|
|
|
|
|
onRowClicked
|
onRowClicked(row)
|
|
|
|
|
|
analysisDom_time
|
Type : number
|
Default value : 62
|
|
|
|
count
|
Type : number
|
Default value : 13
|
|
|
|
dataBrowserChart
|
Type : []
|
Default value : []
|
|
|
|
dataSource
|
Type : any
|
Default value : new MatTableDataSource([])
|
|
|
|
devicesDataSource
|
Type : []
|
Default value : []
|
|
|
|
displayedColumns
|
Type : string[]
|
Default value : [
'url',
'load_time',
'white_time',
'dom_time',
'analysisDom_time',
'dns_time',
'tcp_time',
'redirect_time',
'unload_time',
'request_time',
'ready_time',
'create_time',
'start'
]
|
|
|
|
dns_time
|
Type : number
|
Default value : 0
|
|
|
|
dom_time
|
Type : number
|
Default value : 72.38461538461539
|
|
|
|
doughnut
|
Default value : false
|
|
|
|
eventDataSource
|
Type : []
|
Default value : []
|
|
|
|
isLoadingResults
|
Default value : true
|
|
|
|
isRateLimitReached
|
Default value : false
|
|
|
|
load_time
|
Type : number
|
Default value : 134.15384615384616
|
|
|
|
paginator
|
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator, {static: true})
|
|
|
|
ready_time
|
Type : number
|
Default value : 4.538461538461538
|
|
|
|
request_time
|
Type : number
|
Default value : 4.923076923076923
|
|
|
|
resultsLength
|
Type : number
|
Default value : 0
|
|
|
|
search
|
Type : SearchComponent
|
Decorators :
@ViewChild(SearchComponent, {static: true})
|
|
|
|
showLabels
|
Default value : false
|
|
|
|
showLegend
|
Default value : false
|
|
|
|
sidenav
|
Type : MatSidenav
|
Decorators :
@ViewChild(MatSidenav, {static: true})
|
|
|
|
tcp_time
|
Type : number
|
Default value : 0
|
|
|
|
white_time
|
Type : number
|
Default value : 9.153846153846153
|
|
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import {
MatPaginator,
MatTableDataSource,
MatSidenav
} from '@angular/material';
import { merge, of as observableOf } from 'rxjs';
import { catchError, map, startWith, switchMap } from 'rxjs/operators';
import { SearchComponent } from '../../component';
import { PerformanceService } from './performance.service';
@Component({
selector: 'apm-performance',
templateUrl: './performance.component.html',
styleUrls: ['./performance.component.scss']
})
export class PerformanceComponent implements OnInit {
displayedColumns: string[] = [
'url',
'load_time',
'white_time',
'dom_time',
'analysisDom_time',
'dns_time',
'tcp_time',
'redirect_time',
'unload_time',
'request_time',
'ready_time',
'create_time',
'start'
];
dataSource: any = new MatTableDataSource([]);
resultsLength = 0;
isLoadingResults = true;
isRateLimitReached = false;
devicesDataSource = [];
eventDataSource = [];
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSidenav, { static: true }) sidenav: MatSidenav;
@ViewChild(SearchComponent, { static: true }) search: SearchComponent;
analysisDom_time = 62;
count = 13;
dns_time = 0;
dom_time = 72.38461538461539;
load_time = 134.15384615384616;
ready_time = 4.538461538461538;
request_time = 4.923076923076923;
tcp_time = 0;
white_time = 9.153846153846153;
// chart
dataBrowserChart = [];
// options
showLegend = false;
// pie
showLabels = false;
doughnut = false;
constructor(private service: PerformanceService, private router: Router) { }
ngOnInit() {
this.search.onSearch.subscribe(() => (this.paginator.pageIndex = 0));
merge(this.search.onSearch, this.paginator.page)
.pipe(
startWith({}),
switchMap(search => {
return this.service.getList(this.paginator.pageIndex, search);
}),
map(data => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.data.totalNum;
return data.data.datalist;
}),
catchError(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
return observableOf([]);
})
)
.subscribe(data => (this.dataSource = data));
this.dataBrowserChart.push({ name: 'Chrome', value: 13 });
this.dataBrowserChart.push({ name: 'IE', value: 1 });
}
onRowClicked(row) {
console.log(row);
}
onDetailClicked(row) {
this.router.navigateByUrl(`${this.router.url}/${row._id}`);
}
}
<div fxLayout="row wrap" fxLayoutGap="12px grid">
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="load_time / 1000 | number: '0.3-3'"
icon="group_add"
backgroundcolor="linear-gradient(-134deg, #8C99E0 0%, #6572B8 100%)"
textcolor="white"
property="平均加载耗时"
changeicon="trending_up"
valuesubfix="ms"
></stb-widget-state>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="white_time | number: '0.3-3'"
icon="pageview"
backgroundcolor="linear-gradient(-134deg, #4DD0E2 0%, #4CA8BA 100%)"
textcolor="white"
property="平均白屏耗时"
changeicon="trending_up"
valuesubfix="ms"
></stb-widget-state>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="dom_time | number: '0.3-3'"
icon="monetization_on"
backgroundcolor="linear-gradient(-134deg, #81C683 0%, #62A864 100%)"
textcolor="white"
property="平均DOM构建耗时"
changeicon="trending_down"
valuesubfix="s"
></stb-widget-state>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="count"
icon="playlist_add"
backgroundcolor="linear-gradient(-134deg, #EAC459 0%, #DCAC3F 100%)"
textcolor="white"
property="调用次数"
changeicon="trending_up"
></stb-widget-state>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="analysisDom_time | number: '0.3-3'"
icon="group_add"
backgroundcolor="linear-gradient(-134deg, #ff6e40 0%, #8e24aa 100%)"
textcolor="white"
property="平均解析DOM耗时"
changeicon="trending_up"
valuesubfix="ms"
></stb-widget-state>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="dns_time | number: '0.3-3'"
icon="pageview"
backgroundcolor="linear-gradient(45deg, #FF5252 0%, #f48fb1 100%)"
textcolor="white"
property="平均DNS解析耗时"
changeicon="trending_up"
valuesubfix="ms"
></stb-widget-state>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="tcp_time | number: '0.3-3'"
icon="monetization_on"
backgroundcolor="linear-gradient(45deg, #ff6f00 0%, #ffca28 100%)"
textcolor="white"
property="平均TCP连接耗时"
changeicon="trending_down"
valuesubfix="ms"
></stb-widget-state>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="request_time | number: '0.3-3'"
icon="playlist_add"
backgroundcolor="linear-gradient(45deg, #43A047 0%, #1de9b6 100%)"
textcolor="white"
property="平均request请求耗时"
changeicon="trending_up"
valuesubfix="ms"
></stb-widget-state>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<stb-widget-state
[value]="ready_time | number: '0.3-3'"
icon="playlist_add"
backgroundcolor="linear-gradient(to bottom right,#8200fb,#c000ff)"
textcolor="white"
property="平均页面准备耗时"
changeicon="trending_up"
valuesubfix="ms"
></stb-widget-state>
</div>
</div>
<div class="m-t-12 m-b-12">
<div fxLayout="row wrap" fxLayoutGap="12px grid">
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<mat-card>
<mat-card-header>
<mat-card-title>浏览器分类统计</mat-card-title>
</mat-card-header>
<mat-card-content class="chart-container">
<ngx-charts-pie-chart
*ngIf="dataBrowserChart?.length"
[results]="dataBrowserChart"
[legend]="showLegend"
[labels]="showLabels"
[doughnut]="doughnut"
>
</ngx-charts-pie-chart>
</mat-card-content>
</mat-card>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<mat-card>
<mat-card-header>
<mat-card-title>系统分类统计</mat-card-title>
</mat-card-header>
<mat-card-content class="chart-container">
<ngx-charts-pie-chart
*ngIf="dataBrowserChart?.length"
[results]="dataBrowserChart"
[legend]="showLegend"
[labels]="showLabels"
[doughnut]="doughnut"
>
</ngx-charts-pie-chart>
</mat-card-content>
</mat-card>
</div>
<div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
<mat-card>
<mat-card-header>
<mat-card-title>地理位置分类统计</mat-card-title>
</mat-card-header>
<mat-card-content class="chart-container">
<ngx-charts-pie-chart
*ngIf="dataBrowserChart?.length"
[results]="dataBrowserChart"
[legend]="showLegend"
[labels]="showLabels"
[doughnut]="doughnut"
>
</ngx-charts-pie-chart>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
<stbui-search
placeholder="输入资源名称"
class="mat-elevation-z4 m-b-16"
></stbui-search>
<div class="mat-elevation-z4">
<div class="table-container">
<table class="table-hover" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="url">
<th mat-header-cell *matHeaderCellDef>URL</th>
<td mat-cell *matCellDef="let element">{{ element.url }}</td>
</ng-container>
<ng-container matColumnDef="load_time">
<th mat-header-cell *matHeaderCellDef>页面加载时间</th>
<td mat-cell *matCellDef="let element">
{{ element.load_time / 1000 | number: '0.3-3' }}s
</td>
</ng-container>
<ng-container matColumnDef="white_time">
<th mat-header-cell *matHeaderCellDef>白屏时间</th>
<td mat-cell *matCellDef="let element">
{{ element.white_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="dom_time">
<th mat-header-cell *matHeaderCellDef>DOM构建时间</th>
<td mat-cell *matCellDef="let element">
{{ element.dom_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="analysisDom_time">
<th mat-header-cell *matHeaderCellDef>解析dom耗时</th>
<td mat-cell *matCellDef="let element">
{{ element.analysisDom_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="dns_time">
<th mat-header-cell *matHeaderCellDef>DNS解析时间</th>
<td mat-cell *matCellDef="let element">
{{ element.dns_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="tcp_time">
<th mat-header-cell *matHeaderCellDef>TCP连接时间</th>
<td mat-cell *matCellDef="let element">
{{ element.tcp_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="redirect_time">
<th mat-header-cell *matHeaderCellDef>页面重定向时间</th>
<td mat-cell *matCellDef="let element">
{{ element.redirect_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="unload_time">
<th mat-header-cell *matHeaderCellDef>unload时间</th>
<td mat-cell *matCellDef="let element">
{{ element.unload_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="request_time">
<th mat-header-cell *matHeaderCellDef>request请求耗时</th>
<td mat-cell *matCellDef="let element">
{{ element.request_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="ready_time">
<th mat-header-cell *matHeaderCellDef>页面准备时间</th>
<td mat-cell *matCellDef="let element">
{{ element.ready_time | number: '0.2-2' }}ms
</td>
</ng-container>
<ng-container matColumnDef="create_time">
<th mat-header-cell *matHeaderCellDef>页面请求时间</th>
<td mat-cell *matCellDef="let element">
{{ element.create_time | date: 'yyyy-MM-dd hh:mm:ss' }}
</td>
</ng-container>
<ng-container matColumnDef="start">
<th mat-header-cell *matHeaderCellDef>操作</th>
<td
mat-cell
*matCellDef="let element"
(click)="onDetailClicked(element); $event.stopPropagation()"
>
详情
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="onRowClicked(row)"
></tr>
</table>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
:host {
display: block;
margin: 24px;
}
.table-container {
position: relative;
overflow: auto;
}
table {
width: 100%;
}
.chart-container {
min-height: 400px;
}
Legend
Html element with directive