Windows 事件日志在获取和显示数据时耗时过多

Question

我正在尝试获取并显示 windows 事件登录到 table。在客户端获取和显示它需要将近 7 秒 windows 日志条目超过 150000，并且随着时间的推移而增加。我需要使用分页显示 table 中的数据。我需要有关使用 angular 2 显示数据的分页的帮助，以及有关显示日志的时间的其他帮助，因为日志是实时生成的，但不知道它是如何发生的。以及我在客户端或服务器端实现分页概念的位置。

Api 控制器

[HttpGet]
public IEnumerable<Eventlogg> Get()
{
 EventLog eventLog = new EventLog("Application", "nb-ahja1", "EventLoggingApp");

            var model = new List<Eventlogg>();
            foreach (EventLogEntry log in eventLog.Entries)
            { 
                var demo = new Eventlogg();
                demo.Source = log.Source;
                demo.Id = log.EventID;
                demo.Level = log.EntryType.ToString();
                demo.Date = log.TimeGenerated;
                demo.Category = log.Category;
                model.Add(demo);
            }
            return model.OrderByDescending(x => x.Date).ToList();
        }

Angular 2 网络 api 呼叫

import {Component} from 'angular2/core';
import {EventLogModel} from '../models/eventlogmodel';
import {Http, HTTP_PROVIDERS, Response} from 'angular2/http';
import 'rxjs/Rx';
@Component({
    template: `
<table class="table table-hover" id="myTable">
            <tr>
                <td class="col-md-3"><b>Level</b></td>
                <td class="col-md-3"><b>Date</b></td>
                <td class="col-md-3"><b>Source</b></td>
                <td class="col-md-3"><b>Id</b></td>
                <td class="col-md-3"><b>Category</b></td>
            </tr>

            <tr *ngFor="let model of models">
                <td class="col-md-3">{{model.level}}</td>
                <td class="col-md-3">{{model.date}}</td>
                <td class="col-md-3">{{model.source}}</td>
                <td class="col-md-3">{{model.id}}</td>
                <td class="col-md-3">{{model.category}}</td>
            </tr>
        </table>
`
})

export class BootstrapJavascriptComponent {

    models: Array<EventLogModel> = [];

    constructor(public http: Http) {
        this.getData();
    }
    //api calling from server
    getData() {
        this.http.get('http://localhost:54363/api/data')
            .map(res => (<Response>res).json())
            .map((models: Array<any>) => {
                let result: Array<EventLogModel> = [];
                if (models) {
                    models.forEach(model => {
                        result.push(
                            new EventLogModel(
                                model.id,
                                model.source,
                                model.level,
                                model.category,
                                new Date(model.date)
                                ));
                    });
                }

                return result;
            }).
            subscribe(
            data => {
                this.models = data;
                console.log(this.models);
            },
            err => console.log(err)
            );
    }
}

型号

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace PocDashboard.Models
{
    public class Eventlogg
    {
        public string Source { get; set; }
        public int Id { get; set; }
        public string Level { get; set; }
        public DateTime Date { get; set; }
        public string Category { get; set; }
    }
}

Answer 1

where i implement the pagination concept client side or server side

服务器端分页更适合：

大数据集
更快的初始页面加载
非运行 JavaScript
复杂的视图业务逻辑
对并发变化的弹性

客户端分页更适合：

小数据集
后续页面加载速度更快
完全支持排序和过滤要求（除非结果大于最大大小）。

How to do paging in AngularJS?

Windows 事件日志在获取和显示数据时耗时过多

Windows event log consuming too much time while fetch and display the data

angular

asp.net-web-api2

asp.net-core-mvc

typescript1.8

Api 控制器

Angular 2 网络 api 呼叫

型号