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/syslog/syslog-routing.module.ts
Normal file
21
src/app/views/syslog/syslog-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { SyslogComponent } from './syslog.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: SyslogComponent,
|
||||
data: {
|
||||
title: $localize`Mikrowizard System Logs`
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class SyslogRoutingModule {
|
||||
}
|
||||
104
src/app/views/syslog/syslog.component.html
Normal file
104
src/app/views/syslog/syslog.component.html
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<c-row>
|
||||
<c-col xs>
|
||||
<c-card class="mb-4">
|
||||
<c-card-header>
|
||||
<c-row>
|
||||
<c-col xs [lg]="11">
|
||||
Devices
|
||||
</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>
|
||||
<mat-label>Select section</mat-label>
|
||||
<mat-select placeholder="Event Section" (ngModelChange)="reinitgrid('section',$event)"
|
||||
[(ngModel)]="filters['section']" #multiSelect>
|
||||
<mat-option value="All">All</mat-option>
|
||||
<mat-option *ngFor="let sec of event_section " [value]="sec">
|
||||
{{sec}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Select action</mat-label>
|
||||
<mat-select placeholder="Event action" (ngModelChange)="reinitgrid('action',$event)"
|
||||
[(ngModel)]="filters['action']" #multiSelect>
|
||||
<mat-option value="All">All</mat-option>
|
||||
<mat-option *ngFor="let ac of event_action" [value]="ac">
|
||||
{{ac}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>IP</mat-label>
|
||||
<input (ngModelChange)="reinitgrid('ip',$event)" [(ngModel)]="filters['ip']" 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="username" field="username">
|
||||
<ng-template let-value="item.username" 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.first_name }} {{ item.last_name }}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Section" field="section">
|
||||
<ng-template let-value="item.section" let-item="item" let-index="index">
|
||||
{{ value }}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="action" field="action">
|
||||
<ng-template let-value="item.action" let-item="item" let-index="index">
|
||||
{{ value }}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="ip" field="ip">
|
||||
<ng-template let-value="item.ip" let-item="item" let-index="index">
|
||||
{{ value }}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Time" field="created">
|
||||
<ng-template let-value="item.created" let-item="item" let-index="index">
|
||||
{{ value }}
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
</gui-grid>
|
||||
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
</c-col>
|
||||
</c-row>
|
||||
128
src/app/views/syslog/syslog.component.scss
Normal file
128
src/app/views/syslog/syslog.component.scss
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
@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.3rem!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%;
|
||||
min-height: unset!important;
|
||||
height: 100px!important;
|
||||
overflow-y: scroll!important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
204
src/app/views/syslog/syslog.component.ts
Normal file
204
src/app/views/syslog/syslog.component.ts
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
import { Component, OnInit, ViewEncapsulation } from "@angular/core";
|
||||
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";
|
||||
|
||||
|
||||
@Component({
|
||||
templateUrl: "syslog.component.html",
|
||||
styleUrls: ["syslog.component.scss"],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class SyslogComponent implements OnInit {
|
||||
public uid: number;
|
||||
public uname: string;
|
||||
public tz: string= "UTC";
|
||||
public filterText: string;
|
||||
public filters: any = {
|
||||
start_time: false,
|
||||
end_time: false,
|
||||
section: "All",
|
||||
action: "All",
|
||||
ip: "",
|
||||
};
|
||||
public event_section: any = [];
|
||||
public event_action: 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 userid: number = 0;
|
||||
public sorting = {
|
||||
enabled: true,
|
||||
multiSorting: true,
|
||||
};
|
||||
public campaignOnestart: any;
|
||||
public campaignOneend: any;
|
||||
rowDetail: GuiRowDetail = {
|
||||
enabled: true,
|
||||
template: (item) => {
|
||||
return `
|
||||
<div class='log-detail' style="color:#fff;background-color:#3399ff">
|
||||
<h2>System Log :</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Section</td>
|
||||
<td>${item.section}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Action</td>
|
||||
<td>${item.action}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Time</td>
|
||||
<td>${item.created}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2 style="margin-top: 5px;">User Detail :
|
||||
</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td>User</td>
|
||||
<td>${item.username}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>FirstName</td>
|
||||
<td>${item.first_name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>LastName</td>
|
||||
<td>${item.last_name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IP</td>
|
||||
<td>${item.ip}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agent</td>
|
||||
<td><div style="height: 40px;overflow-y: scroll;">${item.agent}</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="code-title">data</div>
|
||||
<code>
|
||||
${item.data}
|
||||
</code>
|
||||
</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.userid = Number(this.route.snapshot.paramMap.get("userid"));
|
||||
if (this.userid > 0) {
|
||||
this.filters["userid"] = this.userid;
|
||||
}
|
||||
this.initGridTable();
|
||||
}
|
||||
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 == "section") this.filters["section"] = $event;
|
||||
else if (field == "action") this.filters["action"] = $event;
|
||||
else if (field == "ip") this.filters["ip"] = $event;
|
||||
this.initGridTable();
|
||||
}
|
||||
initGridTable(): void {
|
||||
var _self = this;
|
||||
_self.event_section = [];
|
||||
_self.event_action = [];
|
||||
this.data_provider.get_syslog(this.filters).then((res) => {
|
||||
let index = 1;
|
||||
this.source = res.map((d: any) => {
|
||||
d.index = index;
|
||||
if (!_self.event_section.includes(d.section))
|
||||
_self.event_section.push(d.section);
|
||||
|
||||
if (!_self.event_action.includes(d.action))
|
||||
_self.event_action.push(d.action);
|
||||
d.created = formatInTimeZone(
|
||||
d.created.split(".")[0] + ".000Z",
|
||||
_self.tz,
|
||||
"yyyy-MM-dd HH:mm:ss XXX"
|
||||
);
|
||||
index += 1;
|
||||
return d;
|
||||
});
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
41
src/app/views/syslog/syslog.module.ts
Normal file
41
src/app/views/syslog/syslog.module.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { CommonModule } from "@angular/common";
|
||||
|
||||
import {
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
GridModule,
|
||||
CollapseModule,
|
||||
DropdownModule,
|
||||
} from "@coreui/angular";
|
||||
import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
|
||||
import { SyslogRoutingModule } from "./syslog-routing.module";
|
||||
import { SyslogComponent } from "./syslog.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: [
|
||||
SyslogRoutingModule,
|
||||
CardModule,
|
||||
CommonModule,
|
||||
GridModule,
|
||||
FormsModule,
|
||||
ButtonModule,
|
||||
GuiGridModule,
|
||||
CollapseModule,
|
||||
DropdownModule,
|
||||
MatInputModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
NgxMatSelectSearchModule,
|
||||
MatDatepickerModule,
|
||||
],
|
||||
declarations: [SyslogComponent],
|
||||
})
|
||||
export class SyslogModule {}
|
||||
Loading…
Add table
Add a link
Reference in a new issue