mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2025-08-01 08:44:30 +02:00
Add monitoring wall
This commit is contained in:
parent
b3f92a6455
commit
8d4a8f453d
8 changed files with 620 additions and 2 deletions
|
@ -24,6 +24,11 @@ const routes: Routes = [
|
|||
loadChildren: () =>
|
||||
import('./views/dashboard/dashboard.module').then((m) => m.DashboardModule)
|
||||
},
|
||||
{
|
||||
path: 'monitoring',
|
||||
loadChildren: () =>
|
||||
import('./views/monitoring/monitoring.module').then((m) => m.MonitoringModule)
|
||||
},
|
||||
{
|
||||
path: 'devices',
|
||||
loadChildren: () =>
|
||||
|
|
|
@ -7,6 +7,12 @@ export const navItems: INavData[] = [
|
|||
iconComponent: { name: 'cil-speedometer' },
|
||||
|
||||
},
|
||||
{
|
||||
name: 'Monitoring Wall',
|
||||
url: '/monitoring',
|
||||
icon:'fa-solid fa-tv',
|
||||
attributes: { 'pro':true }
|
||||
},
|
||||
{
|
||||
title: true,
|
||||
name: 'Device Managment'
|
||||
|
@ -153,6 +159,6 @@ export const navItems: INavData[] = [
|
|||
name: 'Buy Pro',
|
||||
url: 'https://mikrowizard.com/pricing/',
|
||||
icon:'fa-solid fa-money-check-dollar',
|
||||
attributes: { target: '_blank' }
|
||||
attributes: { 'free':true,target: '_blank' }
|
||||
}
|
||||
];
|
||||
|
|
|
@ -77,7 +77,30 @@ export class dataProvider {
|
|||
}
|
||||
return this.MikroWizardRPC.sendJsonRequest("/api/dashboard/stats", data);
|
||||
}
|
||||
monitoring_devices_events(){
|
||||
|
||||
return this.MikroWizardRPC.sendJsonRequest("/api/monitoring/devs/get", {});
|
||||
}
|
||||
|
||||
monitoring_events_fix(event_id:number){
|
||||
var data={
|
||||
'event_id':event_id
|
||||
}
|
||||
return this.MikroWizardRPC.sendJsonRequest("/api/monitoring/events/fix", data);
|
||||
}
|
||||
|
||||
monitoring_all_events(devid:number){
|
||||
var data={
|
||||
'devid':devid
|
||||
}
|
||||
return this.MikroWizardRPC.sendJsonRequest("/api/monitoring/events/get", data);
|
||||
}
|
||||
monitoring_unfixed_events(devid:number){
|
||||
var data={
|
||||
'devid':devid
|
||||
}
|
||||
return this.MikroWizardRPC.sendJsonRequest("/api/monitoring/eventunfixed/get", data);
|
||||
}
|
||||
dashboard_traffic(delta:string){
|
||||
var data={
|
||||
'delta':delta
|
||||
|
@ -137,7 +160,13 @@ export class dataProvider {
|
|||
}
|
||||
return this.MikroWizardRPC.sendJsonRequest("/api/dev/sensors", data);
|
||||
}
|
||||
|
||||
get_dev_radio_sensors(id: number, delta:string="5m"){
|
||||
var data={
|
||||
'devid':id,
|
||||
'delta':delta
|
||||
}
|
||||
return this.MikroWizardRPC.sendJsonRequest("/api/dev/radio/sensors", data);
|
||||
}
|
||||
get_dev_ifstat(id: number,delta:string="5m",iface:string="ether1",type:string="bps") {
|
||||
var data={
|
||||
'devid':id,
|
||||
|
|
21
src/app/views/monitoring/monitoring-routing.module.ts
Normal file
21
src/app/views/monitoring/monitoring-routing.module.ts
Normal file
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { MonitoringComponent } from './monitoring.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: MonitoringComponent,
|
||||
data: {
|
||||
title: $localize`Monitoring Wall`
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MonitoringRoutingModule {
|
||||
}
|
204
src/app/views/monitoring/monitoring.component.html
Normal file
204
src/app/views/monitoring/monitoring.component.html
Normal file
|
@ -0,0 +1,204 @@
|
|||
<c-row style="height: calc(100vh - 10rem);" (click)="disableContextMenu()" >
|
||||
<c-col xs="3" style="height:100%;">
|
||||
<c-card style="height:100%">
|
||||
<c-card-header>
|
||||
<c-row><c-col md="10">Devices</c-col>
|
||||
<c-col style="text-align: right;" md="2">
|
||||
<i class="fa-regular fa-circle-question" style="cursor: pointer;" [cTooltip]="iconstooltip"></i>
|
||||
</c-col></c-row>
|
||||
</c-card-header>
|
||||
<c-card-body *ngIf="devices" style="padding: 4px;">
|
||||
<ng-scrollbar pointerEventsMethod="scrollbar">
|
||||
<ul cListGroup oncontextmenu="return false;" flush>
|
||||
<li cListGroupItem (click)="filter_device(0)" style="cursor: pointer;padding: 5px 8px;"
|
||||
class="d-flex justify-content-between align-items-center">
|
||||
<div><i style="color:rgb(9, 44, 9)" class="fa-solid fa-hard-drive"></i>
|
||||
| All Devices
|
||||
</div>
|
||||
<div class="d-flex"
|
||||
style="min-width: 135px;border-left: 1px solid #ccc;height: 100%;/* text-align: right; */display: flex;flex-direction: row-reverse;">
|
||||
<c-badge *ngIf="CCount" color="danger" style="margin: 0 0 0 1px;" size="sm"
|
||||
shape="rounded-pill">{{CCount}}
|
||||
Critical</c-badge>
|
||||
<c-badge *ngIf="ECount" color="danger" size="sm"
|
||||
style="margin: 0 0 0 1px;background-color: #f58c8c !important;" shape="rounded-pill">{{ECount}}
|
||||
Error</c-badge>
|
||||
<c-badge *ngIf="WCount" color="warning" size="sm" style="margin: 0 0 0 1px;"
|
||||
shape="rounded-pill">{{WCount}}
|
||||
Warning</c-badge>
|
||||
</div>
|
||||
</li>
|
||||
<li *ngFor="let x of devices" cListGroupItem style="cursor: pointer;padding: 5px 8px;"
|
||||
(click)="filter_device(x)" (contextmenu)="onrightClick($event,x,true)" class="d-flex justify-content-between align-items-center"
|
||||
[ngStyle]="{'background-color':(selected_devid==x.devid)? 'rgb(239 239 239)' : false}">
|
||||
<div>
|
||||
<i *ngIf="x.data" style="color:red;--fa-animation-duration: 2s;" class="fa-solid fa-beat"
|
||||
[class.fa-hard-drive]="x.router_type=='router'" [class.fa-satellite-dish]="x.router_type=='bridge'"
|
||||
[class.fa-tower-cell]="x.router_type=='ap-bridge' || x.router_type=='wds-slave'"
|
||||
[class.fa-house-signal]="x.router_type=='station'"
|
||||
[class.fa-tower-broadcast]="x.router_type=='special'"></i>
|
||||
<i *ngIf="!x.data" style="color:green" class="fa-solid " [class.fa-hard-drive]="x.router_type=='router'"
|
||||
[class.fa-satellite-dish]="x.router_type=='bridge'"
|
||||
[class.fa-tower-cell]="x.router_type=='ap-bridge' || x.router_type=='wds-slave'"
|
||||
[class.fa-house-signal]="x.router_type=='station'"
|
||||
[class.fa-tower-broadcast]="x.router_type=='special'"></i>
|
||||
| {{x.name}}
|
||||
</div>
|
||||
<div class="d-flex"
|
||||
style="min-width: 135px;border-left: 1px solid #ccc;height: 100%;display: flex;flex-direction: row-reverse;">
|
||||
<c-badge *ngIf="x.CCount" color="danger" style="margin: 0 0 0 1px;" size="sm"
|
||||
shape="rounded-pill">{{x.CCount}}
|
||||
Critical</c-badge>
|
||||
<c-badge *ngIf="x.ECount" color="danger" size="sm" style="margin: 0 0 0 1px;background-color:orangered"
|
||||
shape="rounded-pill">{{x.ECount}} Error</c-badge>
|
||||
<c-badge *ngIf="x.WCount" color="warning" size="sm" style="margin: 0 0 0 1px;"
|
||||
shape="rounded-pill">{{x.WCount}}
|
||||
Warning</c-badge>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ng-scrollbar>
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
</c-col>
|
||||
<c-col style="padding-left: 0;" xs="9" (click)="disableContextMenu()">
|
||||
<c-card style="height:60%">
|
||||
<c-card-header><c-row><c-col md="10">Alerts past 24 hours</c-col><c-col style="text-align: right;" md="2">
|
||||
<c-badge color="info" style="cursor: pointer;font-size: 0.85em;" (click)="reload_data()"><i
|
||||
class="fa-solid fa-arrows-rotate"></i>reload</c-badge>
|
||||
<c-badge color="primary" style="font-size: 0.85em;" class="mx-1"> <i
|
||||
class="fa-solid fa-clock-rotate-left mx-1"></i>{{display}}</c-badge></c-col></c-row></c-card-header>
|
||||
<c-card-body style="padding: 4px;">
|
||||
<ng-scrollbar #scrollable="ngScrollbar">
|
||||
|
||||
<table class="alarms24" small bordered responsive hover style="margin-bottom:0;white-space: nowrap;" cTable>
|
||||
<thead>
|
||||
<tr style="position: sticky;top: -1px;background: #fff;">
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Level</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">IP</th>
|
||||
<th scope="col">fixed/event time</th>
|
||||
<th scope="col">event</th>
|
||||
<th scope="col">type</th>
|
||||
<th scope="col">source</th>
|
||||
<th scope="col">comment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- {
|
||||
"id": 2,
|
||||
"mac": "6C:3B:6B:86:66:5B",
|
||||
} -->
|
||||
<tr *ngFor="let item of eventsall" style="vertical-align: middle" [cTableColor]="set_table_color(item)">
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.index}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false) ? '#f58c8c' : false)">
|
||||
{{item.level}}
|
||||
</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.name}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.devip}}</th>
|
||||
<th [class.fixed_time]="item.fixtime"
|
||||
[style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
<div *ngIf="item.fixtime" class="fixed_time"><span><c-badge *ngIf="item.status==true" color="danger" style="margin: 0;" size="sm"
|
||||
shape="rounded-pill">Event</c-badge> {{item.time}}</span><span>
|
||||
<c-badge *ngIf="item.status==true" color="success" style="margin: 0;" size="sm"
|
||||
shape="rounded-pill">Fixed</c-badge> {{item.fixtime}}</span>
|
||||
</div>
|
||||
<span *ngIf="!item.fixtime">{{item.time}}</span>
|
||||
</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.detail}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.eventtype}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.src}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.comment}}</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</ng-scrollbar>
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
<c-card style="height:40%">
|
||||
<c-card-header>All Active Alerts</c-card-header>
|
||||
<c-card-body style="padding: 4px;">
|
||||
<ng-scrollbar #scrollable2="ngScrollbar">
|
||||
<table small bordered responsive hover style="margin-bottom:0" cTable oncontextmenu="return false;">
|
||||
<thead>
|
||||
<tr style="position: sticky;top: -1px;background: #fff;">
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Level</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">IP</th>
|
||||
<th scope="col">time</th>
|
||||
<th scope="col">event</th>
|
||||
<th scope="col">type</th>
|
||||
<th scope="col">source</th>
|
||||
<th scope="col">comment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of eventUnfixedsall" (contextmenu)="onrightClick($event,item)"
|
||||
[cTableColor]="set_table_color(item)">
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.index}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.level}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.name}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.devip}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.time}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.detail}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.eventtype}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.src}}</th>
|
||||
<th [style.background-color]="((item.level=='Critical' && item.status==false)? '#f58c8c' : false)">
|
||||
{{item.comment}}</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</ng-scrollbar>
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
</c-col>
|
||||
</c-row>
|
||||
<div *ngIf="contextmenu">
|
||||
<div class="contextmenu" [ngStyle]="{'left.px': contextmenuX, 'top.px': contextmenuY}">
|
||||
<c-card style="padding: 1px;">
|
||||
<small
|
||||
[style.background-color]="((contexItem.level=='Critical')? '#e55353' : ((contexItem.level=='Error') ? '#f58c8c' : '#f9b115'))"
|
||||
style="text-align: center;font-weight: bold;padding: 5px 3px;color: #fff;">{{contexItem.level}} :
|
||||
{{contexItem.name}} ({{contexItem.devip}})</small>
|
||||
<button cButton (click)="fix_event()" size="sm" shape="rounded-0" color="light" style="padding: 0px 10px;">Mark as
|
||||
Fixed</button>
|
||||
</c-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="contextmainmenu">
|
||||
<div class="contextmenu" [ngStyle]="{'left.px': contextmenuX, 'top.px': contextmenuY}">
|
||||
<c-card style="padding: 1px;">
|
||||
<small style="text-align: center;font-weight: bold;color: #fff;background-color: #ccc;font-size: 100%;">Device Menu</small>
|
||||
<button cButton (click)="go_device()" size="sm" shape="rounded-0" color="light" style="padding: 0px 10px;font-size: 0.7rem;">Device detail</button>
|
||||
<button cButton (click)="go_logs()" size="sm" shape="rounded-0" color="light" style="padding: 0px 10px;font-size: 0.7rem;">Device detail</button>
|
||||
</c-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #iconstooltip>
|
||||
<div style="text-align:left">
|
||||
<i style="color:#fff" class="fa-solid fa-hard-drive"></i> : routers<br>
|
||||
<i style="color:#fff" class="fa-solid fa-satellite-dish"></i> : Bridge<br>
|
||||
<i style="color:#fff" class="fa-solid fa-tower-cell"></i> : AP Bridge<br>
|
||||
<i style="color:#fff" class="fa-solid fa-house-signal"></i> : Station<br>
|
||||
<i style="color:#fff" class="fa-solid fa-tower-broadcast"></i> : special Wireless
|
||||
</div>
|
||||
</ng-template>
|
41
src/app/views/monitoring/monitoring.component.scss
Normal file
41
src/app/views/monitoring/monitoring.component.scss
Normal file
|
@ -0,0 +1,41 @@
|
|||
:host {
|
||||
.legend {
|
||||
small {
|
||||
font-size: x-small;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.mdc-line-ripple.mdc-line-ripple--deactivating.ng-star-inserted {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
::ng-deep .main-container{
|
||||
padding:0!important;
|
||||
margin-top:-10px;
|
||||
}
|
||||
|
||||
::ng-deep .header{
|
||||
margin-bottom: 0.9rem!important;
|
||||
}
|
||||
|
||||
.contextmenu{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.fixed_time{
|
||||
display:flex;
|
||||
flex-direction: column-reverse;
|
||||
padding: 1px 0px;
|
||||
}
|
||||
|
||||
.alarms24 tbody th{
|
||||
font-weight:normal!important;
|
||||
|
||||
}
|
||||
.fixed_time span{
|
||||
font-weight:normal;
|
||||
line-height:110%
|
||||
}
|
259
src/app/views/monitoring/monitoring.component.ts
Normal file
259
src/app/views/monitoring/monitoring.component.ts
Normal file
|
@ -0,0 +1,259 @@
|
|||
import { Component, OnInit,OnDestroy, ViewChild, ElementRef } from "@angular/core";
|
||||
import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
|
||||
import { dataProvider } from "../../providers/mikrowizard/data";
|
||||
import { loginChecker } from "../../providers/login_checker";
|
||||
import { Router } from "@angular/router";
|
||||
import { formatInTimeZone } from "date-fns-tz";
|
||||
import { NgScrollbar } from "ngx-scrollbar";
|
||||
|
||||
@Component({
|
||||
templateUrl: "monitoring.component.html",
|
||||
styleUrls: ["monitoring.component.scss"],
|
||||
})
|
||||
export class MonitoringComponent implements OnInit,OnDestroy {
|
||||
public uid: number;
|
||||
public uname: string;
|
||||
public ispro: boolean = false;
|
||||
public tz: string;
|
||||
public copy_msg: any = false;
|
||||
public devices: any = false;
|
||||
public eventsall: any = {};
|
||||
public eventUnfixedsall: any = {};
|
||||
public list_update_timer : any;
|
||||
public timer_interval : any;
|
||||
public ECount: number = 0;
|
||||
public WCount: number = 0;
|
||||
public CCount: number = 0;
|
||||
public display: any;
|
||||
public selected_devid : number =0;
|
||||
public contexItem:any=false;
|
||||
contextmenu : any= false;
|
||||
contextmainmenu: any= false;
|
||||
contextmenuX : any= 0;
|
||||
contextmenuY : any= 0;
|
||||
|
||||
constructor(
|
||||
private data_provider: dataProvider,
|
||||
private router: Router,
|
||||
private login_checker: loginChecker
|
||||
) {
|
||||
var _self = this;
|
||||
if (!this.login_checker.isLoggedIn()) {
|
||||
setTimeout(function () {
|
||||
_self.router.navigate(["login"]);
|
||||
}, 100);
|
||||
}
|
||||
this.data_provider.getSessionInfo().then((res) => {
|
||||
_self.uid = res.uid;
|
||||
_self.uname = res.name;
|
||||
_self.ispro = res.ISPRO;
|
||||
// This is a pro Feature not availble for free users
|
||||
if (!_self.ispro)
|
||||
setTimeout(function () {
|
||||
_self.router.navigate(["dashboard"]);
|
||||
}, 100);
|
||||
_self.tz = res.tz;
|
||||
const userId = _self.uid;
|
||||
});
|
||||
//get datagrid data
|
||||
function isNotEmpty(value: any): boolean {
|
||||
return value !== undefined && value !== null && value !== "";
|
||||
}
|
||||
}
|
||||
@ViewChild("scrollable") scrollable: NgScrollbar;
|
||||
@ViewChild("scrollable2") scrollable2: NgScrollbar;
|
||||
|
||||
public trafficRadioGroup = new UntypedFormGroup({
|
||||
trafficRadio: new UntypedFormControl("5m"),
|
||||
});
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initEvents();
|
||||
this.initAllalerts();
|
||||
this.initUnfixedalerts();
|
||||
this.update_tables();
|
||||
}
|
||||
set_table_color(item:any,bypass=true){
|
||||
if('status' in item && item.status==true && bypass) {
|
||||
return 'light';
|
||||
}
|
||||
if(item.level=='Critical') return 'danger';
|
||||
else if(item.level=='Warning') return 'warning';
|
||||
else if(item.level=='Error') return 'danger';
|
||||
else return 'danger';
|
||||
}
|
||||
scroll() {
|
||||
this.scrollable.scrollTo({ bottom: 0, duration: 500 });
|
||||
}
|
||||
onrightClick(event:any,item:any,main=false){
|
||||
this.contexItem=item;
|
||||
this.contextmenuX=event.clientX
|
||||
this.contextmenuY=event.clientY
|
||||
if (!main){
|
||||
this.contextmenu=true;
|
||||
this.contextmainmenu=false;
|
||||
}
|
||||
else{
|
||||
this.contextmainmenu=true;
|
||||
this.contextmenu=false;
|
||||
}
|
||||
}
|
||||
//disables the menu
|
||||
disableContextMenu(){
|
||||
this.contexItem=false;
|
||||
this.contextmenu= false;
|
||||
this.contextmainmenu= false;
|
||||
}
|
||||
fix_event(){
|
||||
var _self=this;
|
||||
if (!this.contexItem)
|
||||
return
|
||||
this.data_provider.monitoring_events_fix(this.contexItem.id).then((res) => {
|
||||
if('status' in res && res['status']=='failed')
|
||||
return;
|
||||
_self.reload_data();
|
||||
});
|
||||
}
|
||||
initEvents() {
|
||||
var _self = this;
|
||||
//init radio buttons
|
||||
_self.ECount = 0;
|
||||
_self.WCount = 0;
|
||||
_self.CCount = 0;
|
||||
this.data_provider.monitoring_devices_events().then((res) => {
|
||||
_self.devices = res.map((d: any) => {
|
||||
d.ECount = 0;
|
||||
d.WCount = 0;
|
||||
d.CCount = 0;
|
||||
if (d.data)
|
||||
d.data.forEach((z: any) => {
|
||||
if (z.level == "Error") {
|
||||
d.ECount++;
|
||||
_self.ECount++;
|
||||
} else if (z.level == "Warning") {
|
||||
d.WCount++;
|
||||
_self.WCount++;
|
||||
} else if (z.level == "Critical") {
|
||||
d.CCount++;
|
||||
_self.CCount++;
|
||||
}
|
||||
});
|
||||
return d;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
initAllalerts(){
|
||||
var _self = this;
|
||||
this.data_provider.monitoring_all_events(_self.selected_devid).then((res) => {
|
||||
var index=1;
|
||||
_self.eventsall = res.map((d: any) => {
|
||||
d.time = formatInTimeZone(
|
||||
d.eventtime.split(".")[0] + ".000Z",
|
||||
_self.tz,
|
||||
"yyyy-MM-dd HH:mm:ss"
|
||||
);
|
||||
if(d.fixtime)
|
||||
d.fixtime = formatInTimeZone(
|
||||
d.fixtime.split(".")[0] + ".000Z",
|
||||
_self.tz,
|
||||
"yyyy-MM-dd HH:mm:ss"
|
||||
);
|
||||
d.index = index++;
|
||||
return d
|
||||
});
|
||||
console.dir(res)
|
||||
setTimeout(function() {
|
||||
_self.scrollable.scrollTo({ bottom: 0, duration: 500 });
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
initUnfixedalerts(){
|
||||
var _self = this;
|
||||
this.data_provider.monitoring_unfixed_events(_self.selected_devid).then((res) => {
|
||||
var index=1;
|
||||
_self.eventUnfixedsall = res.map((d: any) => {
|
||||
d.time = formatInTimeZone(
|
||||
d.eventtime.split(".")[0] + ".000Z",
|
||||
_self.tz,
|
||||
"yyyy-MM-dd HH:mm:ss XXX"
|
||||
);
|
||||
d.index = index++;
|
||||
return d
|
||||
});
|
||||
setTimeout(function() {
|
||||
_self.scrollable2.scrollTo({ bottom: 0, duration: 500 });
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
timer(minute:any) {
|
||||
// let minute = 1;
|
||||
let seconds: number = minute * 60;
|
||||
let textSec: any = "0";
|
||||
let statSec: number = 60;
|
||||
var _self=this;
|
||||
const prefix = minute < 10 ? "0" : "";
|
||||
|
||||
this.timer_interval = setInterval(() => {
|
||||
seconds--;
|
||||
if (statSec != 0) statSec--;
|
||||
else statSec = 59;
|
||||
|
||||
if (statSec < 10) {
|
||||
textSec = "0" + statSec;
|
||||
} else textSec = statSec;
|
||||
|
||||
this.display = `${prefix}${Math.floor(seconds / 60)}:${textSec}`;
|
||||
|
||||
if (seconds == 0) {
|
||||
clearInterval(_self.timer_interval);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
filter_device(item:any){
|
||||
if(item == 0)
|
||||
this.selected_devid=0;
|
||||
else if ('devid' in item)
|
||||
this.selected_devid=item.devid;
|
||||
this.reload_data();
|
||||
}
|
||||
reload_data(){
|
||||
clearTimeout(this.list_update_timer);
|
||||
clearTimeout(this.timer_interval);
|
||||
this.initEvents();
|
||||
this.initAllalerts();
|
||||
this.initUnfixedalerts();
|
||||
this.update_tables();
|
||||
}
|
||||
go_device(){
|
||||
this.router.navigate(["/device-stats", { id: this.contexItem.devid }]);
|
||||
}
|
||||
|
||||
go_logs(){
|
||||
this.router.navigate(["/devlogs", { devid: this.contexItem.devid }]);
|
||||
|
||||
}
|
||||
update_tables(){
|
||||
// update initAllalerts and initUnfixedalerts every 1 minute
|
||||
var _self = this;
|
||||
clearTimeout(this.list_update_timer);
|
||||
clearTimeout(this.timer_interval);
|
||||
this.timer(1)
|
||||
this.list_update_timer = setTimeout(() => {
|
||||
_self.initEvents();
|
||||
_self.initAllalerts();
|
||||
_self.initUnfixedalerts();
|
||||
_self.update_tables();
|
||||
}, 60000);
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy(){
|
||||
clearTimeout(this.list_update_timer);
|
||||
clearTimeout(this.timer_interval);
|
||||
}
|
||||
}
|
53
src/app/views/monitoring/monitoring.module.ts
Normal file
53
src/app/views/monitoring/monitoring.module.ts
Normal file
|
@ -0,0 +1,53 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { ReactiveFormsModule } from "@angular/forms";
|
||||
|
||||
import {
|
||||
ButtonGroupModule,
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
GridModule,
|
||||
WidgetModule,
|
||||
ProgressModule,
|
||||
TemplateIdDirective,
|
||||
TooltipModule,
|
||||
BadgeModule,
|
||||
CarouselModule,
|
||||
ListGroupModule,
|
||||
TableModule,
|
||||
UtilitiesModule
|
||||
} from "@coreui/angular";
|
||||
|
||||
import { ChartjsModule } from "@coreui/angular-chartjs";
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
|
||||
import { MonitoringRoutingModule } from "./monitoring-routing.module";
|
||||
import { MonitoringComponent } from "./monitoring.component";
|
||||
import { ClipboardModule } from "@angular/cdk/clipboard";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
MonitoringRoutingModule,
|
||||
CardModule,
|
||||
WidgetModule,
|
||||
CommonModule,
|
||||
GridModule,
|
||||
ProgressModule,
|
||||
ReactiveFormsModule,
|
||||
ButtonModule,
|
||||
TemplateIdDirective,
|
||||
ButtonModule,
|
||||
ButtonGroupModule,
|
||||
ChartjsModule,
|
||||
CarouselModule,
|
||||
BadgeModule,
|
||||
ClipboardModule,
|
||||
ListGroupModule,
|
||||
NgScrollbarModule,
|
||||
TableModule,
|
||||
TooltipModule,
|
||||
UtilitiesModule
|
||||
],
|
||||
declarations: [MonitoringComponent],
|
||||
})
|
||||
export class MonitoringModule {}
|
Loading…
Add table
Add a link
Reference in a new issue