Add monitoring wall

src/app/app-routing.module.ts

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

src/app/containers/default-layout/_nav.ts

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

src/app/providers/mikrowizard/data.ts

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

src/app/views/monitoring/monitoring-routing.module.ts

@@ -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 {
+}

src/app/views/monitoring/monitoring.component.html

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

src/app/views/monitoring/monitoring.component.scss

@@ -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%
+}

src/app/views/monitoring/monitoring.component.ts

@@ -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);
+  }
+}

src/app/views/monitoring/monitoring.module.ts

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