mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2025-12-30 05:49:31 +00:00
MikroWizard Initial commit | MikroFront Welcome to the world :)
This commit is contained in:
sepehr
commit
b97aec6b97
203 changed files with 41097 additions and 0 deletions
21
src/app/views/device_logs/devlogs-routing.module.ts
Normal file
21
src/app/views/device_logs/devlogs-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { DevLogsComponent } from './devlogs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: DevLogsComponent,
|
||||
data: {
|
||||
title: $localize`Device Logs`
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DevLogsRoutingModule {
|
||||
}
|
||||
139
src/app/views/device_logs/devlogs.component.html
Normal file
139
src/app/views/device_logs/devlogs.component.html
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<c-row>
|
||||
<c-col xs>
|
||||
<c-card class="mb-4">
|
||||
<c-card-header>
|
||||
<c-row>
|
||||
<c-col xs [lg]="11">
|
||||
Device LOGS
|
||||
</c-col>
|
||||
<c-col xs [lg]="1">
|
||||
<button (click)="toggleCollapse()" cButton class="me-1" color="primary"><i
|
||||
class="fa-solid fa-filter mr-1"></i>Filter</button>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</c-card-header>
|
||||
<c-card-body>
|
||||
<c-row>
|
||||
<div [visible]="filters_visible" cCollapse>
|
||||
<c-col xs [lg]="12" class="example-form">
|
||||
<mat-form-field>
|
||||
<mat-label>Start date</mat-label>
|
||||
<input matInput [matDatepicker]="picker1" (dateChange)="reinitgrid('start',$event)"
|
||||
[(ngModel)]="filters['start_time']" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker1></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>End date</mat-label>
|
||||
<input matInput [matDatepicker]="picker2" (dateChange)="reinitgrid('end',$event)"
|
||||
[(ngModel)]="filters['end_time']" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker2></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="event_types_filtered.length>0">
|
||||
<mat-label>Select event type</mat-label>
|
||||
<mat-select placeholder="Event Type" [multiple]="true" (ngModelChange)="reinitgrid('detail',$event)"
|
||||
[(ngModel)]="filters['detail']" #multiSelect>
|
||||
<mat-option>
|
||||
<ngx-mat-select-search [showToggleAllCheckbox]="true" placeholderLabel="Find type..."
|
||||
[formControl]="bankMultiFilterCtrl"></ngx-mat-select-search>
|
||||
</mat-option>
|
||||
<mat-option *ngFor="let bank of event_types_filtered " [value]="bank">
|
||||
{{bank}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Select event type</mat-label>
|
||||
<mat-select placeholder="Event Level" (ngModelChange)="reinitgrid('level',$event)"
|
||||
[(ngModel)]="filters['level']" #multiSelect>
|
||||
<mat-option value="All">All</mat-option>
|
||||
<mat-option *ngFor="let level of ['Critical','Warning','Error','info'] " [value]="level">
|
||||
{{level}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Status</mat-label>
|
||||
<mat-select placeholder="Event Status" (ngModelChange)="reinitgrid('status',$event)"
|
||||
[(ngModel)]="filters['status']" #multiSelect>
|
||||
<mat-option value="All">All</mat-option>
|
||||
<mat-option [value]="true">Fixed</mat-option>
|
||||
<mat-option [value]="false">Not Fixed</mat-option>
|
||||
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Comment</mat-label>
|
||||
<input (ngModelChange)="reinitgrid('comment',$event)" [(ngModel)]="filters['comment']" matInput>
|
||||
</mat-form-field>
|
||||
</c-col>
|
||||
|
||||
</div>
|
||||
|
||||
</c-row>
|
||||
<gui-grid wid [rowDetail]="rowDetail" [horizontalGrid]="true" [rowHeight]="52" [source]="source"
|
||||
[columnMenu]="columnMenu" [paging]="paging" [sorting]="sorting" [infoPanel]="infoPanel"
|
||||
[autoResizeWidth]="true">
|
||||
<gui-grid-column header="#No" type="NUMBER" field="index" width="1" align="CENTER">
|
||||
<ng-template let-value="item.index" let-item="item" let-index="index">
|
||||
{{ value }}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
|
||||
<gui-grid-column header="level" width='90' wid field="level">
|
||||
<ng-template let-value="item.level" let-item="item" let-index="index">
|
||||
<c-badge style="cursor: pointer; font-weight: normal" color="danger" *ngIf="value == 'Critical'">{{ value
|
||||
}}</c-badge>
|
||||
<c-badge style="cursor: pointer; font-weight: normal" color="warning" *ngIf="value == 'Error'">{{ value
|
||||
}}</c-badge>
|
||||
<c-badge style="cursor: pointer; font-weight: normal" color="warning" *ngIf="value == 'Warning'">{{ value
|
||||
}}</c-badge>
|
||||
<c-badge style="cursor: pointer; font-weight: normal; min-width: 60px;" color="info"
|
||||
*ngIf="value == 'info'">{{ value }}</c-badge>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Event" width='200' field="detail">
|
||||
<ng-template let-value="item.detail" let-item="item" let-index="index">
|
||||
{{ value }}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Detail" field="comment">
|
||||
<ng-template let-value="item.comment" let-item="item" let-index="index">
|
||||
|
||||
<div class="gui-dev-info">
|
||||
{{ value }}
|
||||
</div>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Source" width='90' field="src">
|
||||
<ng-template let-value="item.src" let-item="item" let-index="index">
|
||||
{{ value }}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="status" width='100' field="status" align="CENTER">
|
||||
<ng-template let-value="item.status" let-item="item" let-index="index">
|
||||
<c-badge style=" cursor: pointer; font-weight: normal" color="success"
|
||||
*ngIf="value == true">Fixed</c-badge>
|
||||
<c-badge style="cursor: pointer; font-weight: normal" color="danger" *ngIf="value != true">Not
|
||||
Fixed</c-badge>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="eventtime" width='200' field="eventtime">
|
||||
<ng-template let-value="item.eventtime" let-item="item" let-index="index">
|
||||
{{ value }}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Device" width='200' field="name">
|
||||
<ng-template let-value="item.name" let-item="item" let-index="index">
|
||||
<div class="gui-dev-info">
|
||||
<span class="gui-dev-info-name">{{ value }}</span>
|
||||
<span class="gui-dev-info-ip">{{ item.devip }}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
</gui-grid>
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
</c-col>
|
||||
</c-row>
|
||||
125
src/app/views/device_logs/devlogs.component.scss
Normal file
125
src/app/views/device_logs/devlogs.component.scss
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
@use '@angular/material' as mat;
|
||||
|
||||
:host {
|
||||
.legend {
|
||||
small {
|
||||
font-size: x-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .gui-drawer-content{
|
||||
// background-color: #efefef!important;
|
||||
|
||||
// }
|
||||
.log-detail{
|
||||
padding:30px 10px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.log-detail h1{
|
||||
font-size:2em;
|
||||
font-weight:bold;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.log-detail small{
|
||||
position:relative;
|
||||
top:-7px;
|
||||
padding:0;
|
||||
font-weight:bold;
|
||||
font-size:1.1em;
|
||||
}
|
||||
.log-detail table {
|
||||
width: 100%;
|
||||
border-collapse: collapse!important;
|
||||
margin: 5px 0 0 0;
|
||||
padding: 0;
|
||||
background-color: #ffffff29 !important;
|
||||
color: #000;
|
||||
}
|
||||
.log-detail th {
|
||||
text-align: left;
|
||||
}
|
||||
.log-detail th,
|
||||
.log-detail td {
|
||||
border: 1px solid #ffffff4a!important;
|
||||
padding: 0.5rem!important;
|
||||
}
|
||||
.gui-close-icon-wrapper .gui-close-icon:after,.gui-close-icon-wrapper .gui-close-icon:before {
|
||||
background-color: #ffffff !important;
|
||||
|
||||
}
|
||||
.log-detail code{
|
||||
padding:5px!important;
|
||||
display:block;
|
||||
background:#1d1f21;
|
||||
color:#c5c8c6;
|
||||
border-bottom-left-radius:3px;
|
||||
border-bottom-right-radius:3px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.log-detail .code-title{
|
||||
background-color:#393e42!important;;
|
||||
width:100%;
|
||||
padding:2px 15px;
|
||||
display:inline-block;
|
||||
margin-top:10px;
|
||||
color:#d2d2d2;
|
||||
border-top-left-radius:3px;
|
||||
border-top-right-radius:3px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.gui-row-detail{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.gui-dev-info {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
white-space: normal;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.gui-dev-info-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gui-dev-info-ip {
|
||||
color: #525252;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gui-row-detail > div{
|
||||
height:100%;
|
||||
}
|
||||
.gui-row-detail .log-detail{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.gui-structure{
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
|
||||
.example-form {
|
||||
@include mat.button-density(-5);
|
||||
|
||||
@include mat.form-field-density(-5);
|
||||
@include mat.button-toggle-density(-5);
|
||||
@include mat.datepicker-density(-5);
|
||||
@include mat.all-component-densities(-5);
|
||||
@include mat.icon-button-density(-5);
|
||||
@include mat.icon-density(-5);
|
||||
.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label { display: inline; }
|
||||
mat-form-field *{
|
||||
font-size:13px!important;
|
||||
}
|
||||
.mat-mdc-form-field-infix{
|
||||
width:150px;
|
||||
}
|
||||
}
|
||||
234
src/app/views/device_logs/devlogs.component.ts
Normal file
234
src/app/views/device_logs/devlogs.component.ts
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
import { Component, OnInit, ViewEncapsulation } from "@angular/core";
|
||||
import { FormControl } from "@angular/forms";
|
||||
import { dataProvider } from "../../providers/mikrowizard/data";
|
||||
import { Router, ActivatedRoute } from "@angular/router";
|
||||
import { loginChecker } from "../../providers/login_checker";
|
||||
import {
|
||||
GuiRowDetail,
|
||||
GuiInfoPanel,
|
||||
GuiColumn,
|
||||
GuiColumnMenu,
|
||||
GuiPaging,
|
||||
GuiPagingDisplay,
|
||||
GuiRowSelectionMode,
|
||||
GuiRowSelection,
|
||||
GuiRowSelectionType,
|
||||
} from "@generic-ui/ngx-grid";
|
||||
import { formatInTimeZone } from "date-fns-tz";
|
||||
import { takeUntil } from "rxjs/operators";
|
||||
import { Subject } from "rxjs";
|
||||
|
||||
|
||||
@Component({
|
||||
templateUrl: "devlogs.component.html",
|
||||
styleUrls: ["devlogs.component.scss"],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class DevLogsComponent implements OnInit {
|
||||
public uid: number;
|
||||
public uname: string;
|
||||
public tz: string = "UTC"
|
||||
public filterText: string;
|
||||
public filters: any = {
|
||||
start_time: false,
|
||||
end_time: false,
|
||||
detail: [],
|
||||
level: false,
|
||||
comment: "",
|
||||
status: "all",
|
||||
};
|
||||
public event_types: any = [];
|
||||
public event_types_filtered: any = [];
|
||||
public filters_visible: boolean = false;
|
||||
constructor(
|
||||
private data_provider: dataProvider,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
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.tz = res.tz;
|
||||
const userId = _self.uid;
|
||||
|
||||
if (res.role != "admin") {
|
||||
setTimeout(function () {
|
||||
_self.router.navigate(["/user/dashboard"]);
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
//get datagrid data
|
||||
function isNotEmpty(value: any): boolean {
|
||||
return value !== undefined && value !== null && value !== "";
|
||||
}
|
||||
}
|
||||
public source: Array<any> = [];
|
||||
public columns: Array<GuiColumn> = [];
|
||||
public loading: boolean = true;
|
||||
public rows: any = [];
|
||||
public Selectedrows: any;
|
||||
public devid: number = 0;
|
||||
public sorting = {
|
||||
enabled: true,
|
||||
multiSorting: true,
|
||||
};
|
||||
public bankMultiFilterCtrl: FormControl = new FormControl<string>("");
|
||||
protected _onDestroy = new Subject<void>();
|
||||
|
||||
public campaignOnestart: any;
|
||||
public campaignOneend: any;
|
||||
rowDetail: GuiRowDetail = {
|
||||
enabled: true,
|
||||
template: (item) => {
|
||||
return `
|
||||
<div class='log-detail' style="color:#fff;background-color:${(() => {
|
||||
if (item.level == "Critical") return "#e55353";
|
||||
else if (item.level == "Warning") return "#f9b115";
|
||||
else item.level == "Info";
|
||||
return "#3399ff";
|
||||
})()}">
|
||||
<h1>Device :</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Device Name</td>
|
||||
<td>${item.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Device IP</td>
|
||||
<td>${item.devip}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Device MAC</td>
|
||||
<td>${item.mac}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h1 style="margin-top: 10px;">Alert Detail :
|
||||
|
||||
</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Event</td>
|
||||
<td>${item.detail}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Event Status</td>
|
||||
<td><span (click)="logger(${item})" style="display:inline-block;background-color:${
|
||||
item.status ? "green" : "#db4848"
|
||||
} ;padding: 4px 10px;border-radius: 5px;line-height: 10px;color: rgba(255, 255, 255, 0.87);">${
|
||||
item.status ? "Fixed" : "Not Fixed"
|
||||
}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Event Category</td>
|
||||
<td>${item.eventtype}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Exec time</td>
|
||||
<td>${item.eventtime}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Detail</td>
|
||||
<td>${item.comment}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Source</td>
|
||||
<td>${item.src}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>`;
|
||||
},
|
||||
};
|
||||
|
||||
public paging: GuiPaging = {
|
||||
enabled: true,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [5, 10, 25, 50],
|
||||
display: GuiPagingDisplay.ADVANCED,
|
||||
};
|
||||
|
||||
public columnMenu: GuiColumnMenu = {
|
||||
enabled: true,
|
||||
sort: true,
|
||||
columnsManager: true,
|
||||
};
|
||||
|
||||
public infoPanel: GuiInfoPanel = {
|
||||
enabled: true,
|
||||
infoDialog: false,
|
||||
columnsManager: true,
|
||||
schemaManager: true,
|
||||
};
|
||||
|
||||
public rowSelection: boolean | GuiRowSelection = {
|
||||
enabled: true,
|
||||
type: GuiRowSelectionType.CHECKBOX,
|
||||
mode: GuiRowSelectionMode.MULTIPLE,
|
||||
};
|
||||
ngOnInit(): void {
|
||||
var _self = this;
|
||||
this.devid = Number(this.route.snapshot.paramMap.get("devid"));
|
||||
if (this.devid > 0) {
|
||||
this.filters["devid"] = this.devid;
|
||||
}
|
||||
this.initGridTable();
|
||||
|
||||
this.bankMultiFilterCtrl.valueChanges
|
||||
.pipe(takeUntil(this._onDestroy))
|
||||
.subscribe(() => {
|
||||
let search = this.bankMultiFilterCtrl.value;
|
||||
if (!search) {
|
||||
this.event_types_filtered = this.event_types;
|
||||
}
|
||||
_self.event_types_filtered = _self.event_types_filtered.filter(
|
||||
(item: any) => item.toLowerCase().indexOf(search.toLowerCase()) > -1
|
||||
);
|
||||
console.dir(_self.event_types_filtered);
|
||||
});
|
||||
}
|
||||
toggleCollapse(): void {
|
||||
this.filters_visible = !this.filters_visible;
|
||||
}
|
||||
logger(item: any) {
|
||||
console.dir(item);
|
||||
}
|
||||
reinitgrid(field: string, $event: any) {
|
||||
if (field == "start") this.filters["start_time"] = $event.target.value;
|
||||
else if (field == "end") this.filters["end_time"] = $event.target.value;
|
||||
else if (field == "detail") this.filters["detail"] = $event;
|
||||
else if (field == "level") this.filters["level"] = $event;
|
||||
else if (field == "comment") this.filters["comment"] = $event;
|
||||
else if (field == "status") this.filters["status"] = $event;
|
||||
this.initGridTable();
|
||||
}
|
||||
initGridTable(): void {
|
||||
var _self = this;
|
||||
this.data_provider.get_dev_logs(this.filters).then((res) => {
|
||||
let index = 1;
|
||||
this.source = res.map((d: any) => {
|
||||
d.index = index;
|
||||
if (d.detail.indexOf("Link Down") >= 0) d.detail = "Link Down";
|
||||
else if (d.detail.indexOf("Link Up") >= 0) d.detail = "Link Up";
|
||||
if (!_self.event_types.includes(d.detail))
|
||||
_self.event_types.push(d.detail);
|
||||
d.eventtime = formatInTimeZone(
|
||||
d.eventtime.split(".")[0] + ".000Z",
|
||||
_self.tz,
|
||||
"yyyy-MM-dd HH:mm:ss XXX"
|
||||
);
|
||||
index += 1;
|
||||
return d;
|
||||
});
|
||||
_self.event_types_filtered = _self.event_types;
|
||||
console.dir(this.source);
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
47
src/app/views/device_logs/devlogs.module.ts
Normal file
47
src/app/views/device_logs/devlogs.module.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { ReactiveFormsModule } from "@angular/forms";
|
||||
|
||||
import {
|
||||
ButtonGroupModule,
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
FormModule,
|
||||
GridModule,
|
||||
CollapseModule,
|
||||
BadgeModule,
|
||||
} from "@coreui/angular";
|
||||
import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
|
||||
import { DevLogsRoutingModule } from "./devlogs-routing.module";
|
||||
import { DevLogsComponent } from "./devlogs.component";
|
||||
import { GuiGridModule } from "@generic-ui/ngx-grid";
|
||||
import { MatDatepickerModule } from "@angular/material/datepicker";
|
||||
import { MatInputModule } from "@angular/material/input";
|
||||
import { MatFormFieldModule } from "@angular/material/form-field";
|
||||
import { FormsModule } from "@angular/forms";
|
||||
|
||||
import { MatSelectModule } from "@angular/material/select";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
DevLogsRoutingModule,
|
||||
CardModule,
|
||||
CommonModule,
|
||||
GridModule,
|
||||
ReactiveFormsModule,
|
||||
FormsModule,
|
||||
FormModule,
|
||||
ButtonModule,
|
||||
ButtonGroupModule,
|
||||
GuiGridModule,
|
||||
CollapseModule,
|
||||
BadgeModule,
|
||||
MatInputModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
NgxMatSelectSearchModule,
|
||||
MatDatepickerModule,
|
||||
],
|
||||
declarations: [DevLogsComponent],
|
||||
})
|
||||
export class DevLogsModule {}
|
||||
Loading…
Add table
Add a link
Reference in a new issue