mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2026-05-14 15:51:29 +00:00
524 lines
14 KiB
TypeScript
524 lines
14 KiB
TypeScript
import { Component, OnDestroy, OnInit, ViewEncapsulation, ViewChild } from "@angular/core";
|
|
import { Router, ActivatedRoute } from "@angular/router";
|
|
import { dataProvider } from "../../providers/mikrowizard/data";
|
|
import { loginChecker } from "../../providers/login_checker";
|
|
import { Table } from 'primeng/table';
|
|
import { __setFunctionName } from "tslib";
|
|
interface IUser {
|
|
name: string;
|
|
state: string;
|
|
registered: string;
|
|
country: string;
|
|
usage: number;
|
|
period: string;
|
|
payment: string;
|
|
activity: string;
|
|
avatar: string;
|
|
status: string;
|
|
color: string;
|
|
}
|
|
|
|
type radiodata = {
|
|
[key: string]: any;
|
|
};
|
|
|
|
@Component({
|
|
templateUrl: "device.component.html",
|
|
styleUrls: ["device.component.scss"],
|
|
encapsulation: ViewEncapsulation.None,
|
|
})
|
|
export class DeviceComponent implements OnInit, OnDestroy {
|
|
public uid!: number;
|
|
public sessionloaded: boolean = false;
|
|
public uname!: string;
|
|
public tz!: string;
|
|
public ispro: boolean = false;
|
|
public small_screen=false;
|
|
public show_dev_logs: boolean = false;
|
|
public show_auth_logs: boolean = false;
|
|
public show_acc_logs: boolean = false;
|
|
public actice_tab_index: number = 0;
|
|
public reloading: boolean = false;
|
|
constructor(
|
|
private data_provider: dataProvider,
|
|
private route: ActivatedRoute,
|
|
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.tz = res.tz;
|
|
_self.ispro = res.ISPRO;
|
|
_self.sessionloaded = true;
|
|
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 devdata: any;
|
|
public devsensors: any;
|
|
public radiodata!: radiodata;
|
|
public radio_devsensors!: any;
|
|
|
|
@ViewChild('dtInterfaces') dtInterfaces!: Table;
|
|
|
|
public loading: boolean = true;
|
|
public radio_loading: boolean = true;
|
|
public InterfaceChartModalVisible: boolean = false;
|
|
public rows: any = [];
|
|
public Selectedrows: any;
|
|
public devid: number = 0;
|
|
public data_interval: any;
|
|
public delta: string = "live";
|
|
public total_type: string = "bps";
|
|
public interface_rate: any = {};
|
|
public options: any;
|
|
public is_radio: boolean = false;
|
|
public dhcp_server_available: boolean = false;
|
|
public dhcp_server_data: any = {};
|
|
|
|
public interfaces: Array<any> = [];
|
|
|
|
applyFilterGlobal($event: any, stringVal: string) {
|
|
this.dtInterfaces.filterGlobal(($event.target as HTMLInputElement).value, stringVal);
|
|
}
|
|
reload_dhcp_server(){
|
|
this.get_DHCP_data();
|
|
}
|
|
Chartoptions = {
|
|
responsive: true,
|
|
_self :this,
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context: any) {
|
|
const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
|
|
let label = context.dataset.label || "";
|
|
var res = context.parsed.y;
|
|
let unitIndex = 0;
|
|
// if (res>8) res /=8;
|
|
while (res >= 1024 && unitIndex < units.length - 1) {
|
|
res /= 1024;
|
|
unitIndex++;
|
|
}
|
|
switch (context.dataset.unit) {
|
|
case "rx":
|
|
return "rx/s :" + res.toFixed(3) + " " + units[unitIndex];
|
|
break;
|
|
case "tx":
|
|
return "tx/s :" + res.toFixed(3) + " " + units[unitIndex];
|
|
break;
|
|
case "rxp":
|
|
return "rxp/s :" + context.parsed.y;
|
|
break;
|
|
case "txp":
|
|
return "txp/s :" + context.parsed.y;
|
|
break;
|
|
default:
|
|
return context.parsed.y;
|
|
break;
|
|
}
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
display: true,
|
|
},
|
|
},
|
|
maintainAspectRatio: true,
|
|
scales: {
|
|
x: {
|
|
|
|
title: {
|
|
display: true,
|
|
text: 'Time',
|
|
color: '#333',
|
|
},
|
|
ticks: {
|
|
autoSkip: true,
|
|
maxTicksLimit: 30,
|
|
color: '#333',
|
|
}
|
|
},
|
|
yA: {
|
|
display: true,
|
|
stacked: true,
|
|
position: "left",
|
|
type: "linear",
|
|
color: "#17522f",
|
|
grid: {
|
|
color: "rgba(23, 82, 47, 0.3)",
|
|
borderDash: [5, 5],
|
|
},
|
|
ticks: {
|
|
color: "#17522f",
|
|
callback: (value: any) => {
|
|
if(this.total_type=="pps")
|
|
return value + " pps";
|
|
const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
|
|
var res = value;
|
|
let unitIndex = 0;
|
|
while (res >= 1024 && unitIndex < units.length - 1) {
|
|
res /= 1024;
|
|
unitIndex++;
|
|
}
|
|
return res.toFixed(3) + " " + units[unitIndex];
|
|
},
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
},
|
|
},
|
|
yB: {
|
|
display: true,
|
|
stacked: true,
|
|
position: "right",
|
|
type: "linear",
|
|
grid: {
|
|
color: "rgba(23, 25, 81, 0.3)",
|
|
borderDash: [8, 8],
|
|
},
|
|
border: {
|
|
width: 2,
|
|
},
|
|
ticks: {
|
|
color: "#171951",
|
|
callback: (value: any) =>{
|
|
if(this.total_type=="pps")
|
|
return value + " pps";
|
|
const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
|
|
var res = value;
|
|
let unitIndex = 0;
|
|
while (res >= 1024 && unitIndex < units.length - 1) {
|
|
res /= 1024;
|
|
unitIndex++;
|
|
}
|
|
return res.toFixed(3) + " " + units[unitIndex];
|
|
},
|
|
},
|
|
},
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 1,
|
|
tension: 0.1,
|
|
},
|
|
point: {
|
|
radius: 4,
|
|
hitRadius: 10,
|
|
hoverRadius: 6,
|
|
},
|
|
},
|
|
};
|
|
|
|
ngOnInit(): void {
|
|
|
|
if (window.innerWidth <= 1200) {
|
|
this.small_screen = true;
|
|
}
|
|
window.onresize = () => (this.small_screen = window.innerWidth <= 1200);
|
|
this.devid = Number(this.route.snapshot.paramMap.get("id"));
|
|
this.options = this.Chartoptions;
|
|
// wait untill sessionloaded is set
|
|
let interval = setInterval(() => {
|
|
if (this.sessionloaded) {
|
|
clearInterval(interval);
|
|
this.initDeviceInfo();
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
optionsDefault = {
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
maintainAspectRatio: true,
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
drawBorder: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
y: {
|
|
display: false,
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 1,
|
|
tension: 0.4,
|
|
},
|
|
point: {
|
|
radius: 4,
|
|
hitRadius: 10,
|
|
hoverRadius: 6,
|
|
},
|
|
},
|
|
};
|
|
setOptions() {
|
|
for (let idx = 0; idx < 5; idx++) {
|
|
const options = JSON.parse(JSON.stringify(this.optionsDefault));
|
|
switch (idx) {
|
|
case 0: {
|
|
this.options.push(options);
|
|
break;
|
|
}
|
|
case 1: {
|
|
options.scales.y.min = -9;
|
|
options.scales.y.max = 39;
|
|
this.options.push(options);
|
|
break;
|
|
}
|
|
case 2: {
|
|
options.scales.x = { display: false };
|
|
options.scales.y = { display: false };
|
|
options.elements.line.borderWidth = 2;
|
|
options.elements.point.radius = 2;
|
|
this.options.push(options);
|
|
break;
|
|
}
|
|
case 3: {
|
|
options.scales.x.grid = { display: false, drawTicks: false };
|
|
options.scales.x.grid = {
|
|
display: false,
|
|
drawTicks: false,
|
|
drawBorder: false,
|
|
};
|
|
options.scales.y.min = undefined;
|
|
options.scales.y.max = undefined;
|
|
options.elements = {};
|
|
this.options.push(options);
|
|
break;
|
|
}
|
|
case 4: {
|
|
options.plugins = {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context: any) {
|
|
const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
|
|
let label = context.dataset.label || "";
|
|
var res = context.parsed.y;
|
|
let unitIndex = 0;
|
|
// if (res>8) res /=8;
|
|
while (res >= 1024 && unitIndex < units.length - 1) {
|
|
res /= 1024;
|
|
unitIndex++;
|
|
}
|
|
switch (context.dataset.unit) {
|
|
case "rx":
|
|
return "rx/s :" + res.toFixed(3) + " " + units[unitIndex];
|
|
break;
|
|
case "tx":
|
|
return "tx/s :" + res.toFixed(3) + " " + units[unitIndex];
|
|
break;
|
|
case "rxp":
|
|
return "rxp/s :" + context.parsed.y;
|
|
break;
|
|
case "txp":
|
|
return "txp/s :" + context.parsed.y;
|
|
break;
|
|
default:
|
|
return context.parsed.y;
|
|
break;
|
|
}
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
display: false,
|
|
},
|
|
};
|
|
options.scales = {
|
|
x: { display: false },
|
|
yA: {
|
|
display: false,
|
|
stacked: true,
|
|
position: "left",
|
|
type: "linear",
|
|
scaleLabel: {
|
|
display: true,
|
|
},
|
|
},
|
|
yB: {
|
|
display: false,
|
|
stacked: true,
|
|
position: "right",
|
|
type: "linear",
|
|
},
|
|
};
|
|
options.elements.line.borderWidth = 2;
|
|
options.elements.point.radius = 2;
|
|
this.options.push(options);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
logger(item: any) {
|
|
console.dir(item);
|
|
}
|
|
switch_total() {
|
|
this.total_type = this.total_type == "bps" ? "pps" : "bps";
|
|
this.updateData();
|
|
}
|
|
updateData(): void {
|
|
var _self = this;
|
|
this.data_provider.get_dev_info(this.devid).then((res) => {
|
|
_self.devdata = res;
|
|
_self.interfaces = res.interfaces;
|
|
if ("is_radio" in res) _self.is_radio = res.is_radio;
|
|
_self.data_provider
|
|
.get_dev_sensors(_self.devid, _self.delta, _self.total_type)
|
|
.then((res) => {
|
|
_self.devsensors = res;
|
|
_self.loading = false;
|
|
});
|
|
if (_self.is_radio) _self.get_radio_data();
|
|
});
|
|
}
|
|
checkitem(item: any) {
|
|
if (item.value && !item.key.match("sensors|id|_availble|interfaces")) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
convert_bw_human(mynumber: number = 0, unit: string) {
|
|
const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
|
|
let unitIndex = 0;
|
|
while (mynumber >= 1024 && unitIndex < units.length - 1) {
|
|
mynumber /= 1024;
|
|
unitIndex++;
|
|
}
|
|
switch (unit) {
|
|
case "rx":
|
|
return mynumber.toFixed(3) + " " + units[unitIndex];
|
|
break;
|
|
case "tx":
|
|
return mynumber.toFixed(3) + " " + units[unitIndex];
|
|
break;
|
|
default:
|
|
return mynumber;
|
|
break;
|
|
}
|
|
}
|
|
|
|
show_interface_rate(name: string) {
|
|
var _self = this;
|
|
_self.InterfaceChartModalVisible = false;
|
|
this.data_provider
|
|
.get_dev_ifstat(_self.devid, _self.delta, name, _self.total_type)
|
|
.then((res) => {
|
|
_self.interface_rate = res["data"];
|
|
_self.InterfaceChartModalVisible = true;
|
|
});
|
|
}
|
|
|
|
get_radio_data() {
|
|
if(!this.ispro)
|
|
return;
|
|
var _self = this;
|
|
_self.data_provider
|
|
.get_dev_radio_sensors(_self.devid, _self.delta)
|
|
.then((res) => {
|
|
_self.radio_devsensors = res;
|
|
_self.radio_loading = false;
|
|
});
|
|
}
|
|
|
|
get_DHCP_data() {
|
|
if(!this.ispro)
|
|
return;
|
|
var _self = this;
|
|
if(_self.reloading)
|
|
return;
|
|
_self.reloading = true;
|
|
_self.data_provider
|
|
.get_dev_dhcp_info(_self.devid)
|
|
.then((res) => {
|
|
_self.dhcp_server_available = Boolean(res.length);
|
|
_self.dhcp_server_data = res;
|
|
// loop in dhcp_server_data and create a new object with the data for chart for each dhcp server
|
|
_self.reloading = false;
|
|
_self.dhcp_server_data.forEach((element:any) => {
|
|
if(element.pools.length>0){
|
|
var pooldata=element.pools[0];
|
|
element.chartpools = {
|
|
labels: ['Used', 'Free'],
|
|
datasets: [{
|
|
backgroundColor: [ '#E46651','#41B883'],
|
|
data: [pooldata.used_ips, pooldata.available_ips]
|
|
}]
|
|
};
|
|
}
|
|
});
|
|
});
|
|
}
|
|
reload_device(): void {
|
|
this.initDeviceInfo();
|
|
}
|
|
initDeviceInfo(): void {
|
|
var _self = this;
|
|
if (this.reloading) return;
|
|
clearInterval(this.data_interval);
|
|
if(_self.ispro) _self.get_DHCP_data();
|
|
this.updateData();
|
|
this.data_interval = setInterval(() => {
|
|
this.reloading = true;
|
|
this.data_provider.get_dev_info(this.devid).then((res) => {
|
|
_self.devdata = res;
|
|
if ("is_radio" in res) _self.is_radio = res.is_radio;
|
|
_self.interfaces = res.interfaces;
|
|
_self.data_provider
|
|
.get_dev_sensors(_self.devid, _self.delta, _self.total_type)
|
|
.then((res) => {
|
|
_self.devsensors = res;
|
|
_self.loading = false;
|
|
_self.reloading = false;
|
|
|
|
if (_self.is_radio) _self.get_radio_data();
|
|
|
|
});
|
|
});
|
|
}, 30000);
|
|
}
|
|
show_history(itme:any) {
|
|
return
|
|
}
|
|
objectlen(object:any){
|
|
return object ? Object.keys(object).length : 0;
|
|
}
|
|
strangth_at_rate_extract(data:string){
|
|
return data ? data.split(',') : [];
|
|
}
|
|
ngOnDestroy() {
|
|
clearInterval(this.data_interval);
|
|
}
|
|
}
|