Add monitoring wall

This commit is contained in:
sepehr 2024-07-20 16:10:35 +03:30
parent b3f92a6455
commit 8d4a8f453d
8 changed files with 620 additions and 2 deletions

View file

@ -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: () =>

View file

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

View file

@ -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,

View 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 {
}

View 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>

View 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%
}

View 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);
}
}

View 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 {}