MikroWizard Initial commit | MikroFront Welcome to the world :)

src/app/views/syslog/syslog.component.ts

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