src/app/apm/script/script.component.ts
| selector | apm-script |
| styleUrls | ./script.component.scss |
| templateUrl | ./script.component.html |
Properties |
Methods |
constructor(service: ScriptService, datePipe: DatePipe)
|
|||||||||
|
Defined in src/app/apm/script/script.component.ts:43
|
|||||||||
|
Parameters :
|
| isAllSelected |
isAllSelected()
|
|
Defined in src/app/apm/script/script.component.ts:72
|
|
Returns :
boolean
|
| masterToggle |
masterToggle()
|
|
Defined in src/app/apm/script/script.component.ts:78
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/apm/script/script.component.ts:47
|
|
Returns :
void
|
| onRowClicked | ||||
onRowClicked(row)
|
||||
|
Defined in src/app/apm/script/script.component.ts:84
|
||||
|
Parameters :
Returns :
void
|
| dataSource |
Default value : new MatTableDataSource([])
|
|
Defined in src/app/apm/script/script.component.ts:31
|
| devicesDataSource |
Type : []
|
Default value : []
|
|
Defined in src/app/apm/script/script.component.ts:38
|
| displayedColumns |
Type : string[]
|
Default value : [
'resource_url',
'category',
'fullurl',
'line',
'col',
'method',
'msg',
'create_time'
]
|
|
Defined in src/app/apm/script/script.component.ts:20
|
| eventDataSource |
Type : []
|
Default value : []
|
|
Defined in src/app/apm/script/script.component.ts:39
|
| isLoadingResults |
Default value : true
|
|
Defined in src/app/apm/script/script.component.ts:35
|
| isRateLimitReached |
Default value : false
|
|
Defined in src/app/apm/script/script.component.ts:36
|
| paginator |
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator, {static: true})
|
|
Defined in src/app/apm/script/script.component.ts:41
|
| resultsLength |
Type : number
|
Default value : 0
|
|
Defined in src/app/apm/script/script.component.ts:34
|
| search |
Type : SearchComponent
|
Decorators :
@ViewChild(SearchComponent, {static: true})
|
|
Defined in src/app/apm/script/script.component.ts:43
|
| selection |
Default value : new SelectionModel(true, [])
|
|
Defined in src/app/apm/script/script.component.ts:32
|
| sidenav |
Type : MatSidenav
|
Decorators :
@ViewChild(MatSidenav, {static: true})
|
|
Defined in src/app/apm/script/script.component.ts:42
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { DatePipe } from '@angular/common';
import {
MatPaginator,
MatTableDataSource,
MatSidenav
} from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { merge, of as observableOf } from 'rxjs';
import { catchError, map, startWith, switchMap } from 'rxjs/operators';
import { SearchComponent } from '../../component';
import { ScriptService } from './script.service';
@Component({
selector: 'apm-script',
templateUrl: './script.component.html',
styleUrls: ['./script.component.scss']
})
export class ScriptComponent implements OnInit {
displayedColumns: string[] = [
'resource_url',
'category',
'fullurl',
'line',
'col',
'method',
'msg',
'create_time'
];
dataSource = new MatTableDataSource([]);
selection = new SelectionModel(true, []);
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;
constructor(private service: ScriptService, private datePipe: DatePipe) { }
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));
}
//
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
masterToggle() {
this.isAllSelected()
? this.selection.clear()
: this.dataSource.data.forEach(row => this.selection.select(row));
}
onRowClicked(row) {
this.selection.toggle(row);
this.sidenav.open();
this.eventDataSource = [
{
name: '错误资源',
value: row.resource_url
},
{
name: '出错行号',
value: row.line
},
{
name: '出错列号',
value: row.col
},
{
name: '错误详情',
value: row.msg
},
{
name: '错误类型',
value: row.category
},
{
name: '生成时间',
value: this.datePipe.transform(row.create_time, 'yyyy-MM-dd hh:mm:ss')
}
];
this.devicesDataSource = [
{
name: 'IP地址',
value: ''
},
{
name: '来源城市',
value: ''
},
{
name: '浏览器',
value: ''
},
{
name: '操作系统',
value: ''
},
{
name: 'language',
value: ''
},
{
name: 'userAgent',
value: ''
}
];
}
}
<mat-sidenav-container class="script-container">
<mat-sidenav #sidenav mode="over" position="end">
<!-- <button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>close</mat-icon>
</button> -->
<apm-script-detail
[eventDataSource]="eventDataSource"
[devicesDataSource]="devicesDataSource"
></apm-script-detail>
</mat-sidenav>
<mat-sidenav-content>
<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="select" sticky>
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container> -->
<ng-container matColumnDef="resource_url">
<th mat-header-cell *matHeaderCellDef>错误资源</th>
<td mat-cell *matCellDef="let element">
{{ element.resource_url }}
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>id</th>
<td mat-cell *matCellDef="let element">{{ element._id }}</td>
</ng-container>
<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef>错误类型</th>
<td mat-cell *matCellDef="let element">{{ element.category }}</td>
</ng-container>
<ng-container matColumnDef="fullurl">
<th mat-header-cell *matHeaderCellDef>所属URL</th>
<td mat-cell *matCellDef="let element">{{ element.fullurl }}</td>
</ng-container>
<ng-container matColumnDef="line">
<th mat-header-cell *matHeaderCellDef>出错行号</th>
<td mat-cell *matCellDef="let element">{{ element.line }}</td>
</ng-container>
<ng-container matColumnDef="col">
<th mat-header-cell *matHeaderCellDef>出错列号</th>
<td mat-cell *matCellDef="let element">{{ element.col }}</td>
</ng-container>
<ng-container matColumnDef="method">
<th mat-header-cell *matHeaderCellDef>请求方式</th>
<td mat-cell *matCellDef="let element">{{ element.method }}</td>
</ng-container>
<ng-container matColumnDef="msg">
<th mat-header-cell *matHeaderCellDef>错误信息</th>
<td mat-cell *matCellDef="let element">{{ element.msg }}</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="star" stickyEnd>
<th mat-header-cell *matHeaderCellDef>操作</th>
<td mat-cell *matCellDef="let element">详情</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="onRowClicked(row, $event)"
></tr>
</table>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
./script.component.scss
.table-container {
position: relative;
overflow: auto;
}
table {
width: 100%;
}
.script-container {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mat-sidenav-content {
padding: 24px;
}
}