angular-material-app documentation
  1. Components
  2. ScriptComponent

File

src/app/apm/script/script.component.ts

Implements

OnInit

Metadata

selector apm-script
styleUrls ./script.component.scss
templateUrl ./script.component.html

Index

Properties
Methods

Constructor

constructor(service: ScriptService, datePipe: DatePipe)
Defined in src/app/apm/script/script.component.ts:43
Parameters :
Name Type Optional
service ScriptService No
datePipe DatePipe No

Methods

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 :
Name Optional
row No
Returns : void

Properties

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: ''
      }
    ];
  }
}
Copy
<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>
Copy

./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;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""