Keine aktuellen Probleme für dieses Gerät gefunden.
-
-
-
-
-
{{ p.opdata }}
+
+
+
+
+ SNMP Konfiguration
+ Keine SNMP-Schnittstelle auf diesem Host gefunden.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+ Schnittstellen-Alarmierung (Link-Status)
+
+
+ | Schnittstelle | Alarmierung aktiv |
|---|
+
+
+ | {{ iface.name }} |
+ |
+
+
+
+
@@ -125,115 +226,163 @@ Vue.component('device-monitoring-modal', {
tabs: [
{ id: 'overview', name: 'Übersicht', icon: 'fas fa-tachometer-alt' },
{ id: 'interfaces', name: 'Schnittstellen', icon: 'fas fa-ethernet' },
+ // { id: 'reports', name: 'Reports', icon: 'fas fa-chart-pie' },
{ id: 'problems', name: 'Probleme', icon: 'fas fa-exclamation-triangle' },
+ { id: 'configuration', name: 'Konfiguration', icon: 'fas fa-cogs' },
],
- loading: { overview: false, interfaces: false, problems: false, individualInterfaces: {} },
+ loading: { overview: true, interfaces: false, problems: false, configuration: false, reports: false, individualInterfaces: {} },
generalData: null,
- problemData: [],
+ problemData: { current: [], resolved: [] },
allInterfaces: [],
selectedInterfaces: [],
interfaceTimeRange: '24h',
- timeRanges: [
- { text: '6H', value: '6h' }, { text: '24H', value: '24h' },
- { text: '7T', value: '7d' }, { text: '30T', value: '30d' },
- ],
+ timeRanges: [{ text: '6H', value: '6h' }, { text: '24H', value: '24h' }, { text: '7T', value: '7d' }, { text: '30T', value: '30d' }],
interfaceChartData: {},
chartInstances: {},
dataNormalizationMode: 'avg',
downsampleThreshold: 500,
+ configData: { snmp: null, interfaces: [] },
+ snmpV3Levels: [{text: 'noAuthNoPriv', value: '0'}, {text: 'authNoPriv', value: '1'}, {text: 'authPriv', value: '2'}],
+ snmpV3Auth: [{text: 'MD5', value: '0'}, {text: 'SHA-1', value: '1'}],
+ snmpV3Priv: [{text: 'DES', value: '0'}, {text: 'AES-128', value: '1'}],
+ authPassphrase: '',
+ privPassphrase: '',
+ reportData: [],
+ reportTimeRange: '7d',
+ reportTimeRanges: [{ text: 'Letzte 7 Tage', value: '7d' }, { text: 'Letzte 30 Tage', value: '30d' }],
+ reportSortKey: 'name',
+ reportSortDir: 'asc',
};
},
computed: {
- interfaceOptions() {
- return this.allInterfaces.map(iface => ({ text: iface.name, value: iface.name }));
- },
- selectedInterfacesData() {
- return this.allInterfaces.filter(iface => this.selectedInterfaces.includes(iface.name));
- },
- displayChartData() {
- const processedData = {};
- for (const itemId in this.interfaceChartData) {
- const data = this.interfaceChartData[itemId];
- if (data.length > this.downsampleThreshold) {
- processedData[itemId] = this.downsampleData(data, this.dataNormalizationMode);
- } else {
- processedData[itemId] = data;
- }
- }
- return processedData;
- },
+ interfaceOptions() { return this.allInterfaces.map(iface => ({ text: iface.name, value: iface.name })); },
+ selectedInterfacesData() { return this.allInterfaces.filter(iface => this.selectedInterfaces.includes(iface.name)); },
statistics() {
if (this.selectedInterfaces.length === 0 || Object.keys(this.interfaceChartData).length === 0) return {};
-
const stats = {};
this.selectedInterfacesData.forEach(iface => {
const calculate = (data) => {
- if (!data || data.length === 0) return { min: 'N/A', max: 'N/A', avg: 'N/A', median: 'N/A', p95: 'N/A' };
+ if (!data || data.length === 0) return { min: 'N/A', max: 'N/A', avg: 'N/A', p95: 'N/A' };
const values = data.map(p => p.y);
const sorted = [...values].sort((a, b) => a - b);
const sum = values.reduce((acc, val) => acc + val, 0);
- const mid = Math.floor(sorted.length / 2);
- const median = sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
-
- const p95 = this.calculateNormalized95thPercentile(data);
-
return {
min: this.formatStat(sorted[0]),
max: this.formatStat(sorted[sorted.length - 1]),
avg: this.formatStat(sum / values.length),
- median: this.formatStat(median),
- p95: this.formatStat(p95),
+ p95: this.formatStat(sorted[Math.floor(sorted.length * 0.95)]),
};
};
- stats[iface.name] = {
- rx: calculate(this.interfaceChartData[iface.rx?.itemid]),
- tx: calculate(this.interfaceChartData[iface.tx?.itemid]),
- };
+ stats[iface.name] = { rx: calculate(this.interfaceChartData[iface.rx?.itemid]), tx: calculate(this.interfaceChartData[iface.tx?.itemid]) };
});
return stats;
+ },
+ sortedReportData() {
+ if (!this.reportData) return [];
+ return [...this.reportData].sort((a, b) => {
+ let aVal = this.reportSortKey.split('.').reduce((o, i) => o[i], a);
+ let bVal = this.reportSortKey.split('.').reduce((o, i) => o[i], b);
+ if (typeof aVal === 'string' && aVal.toLowerCase() === 'n/a') aVal = -1;
+ if (typeof bVal === 'string' && bVal.toLowerCase() === 'n/a') bVal = -1;
+ let modifier = this.reportSortDir === 'asc' ? 1 : -1;
+ if (aVal < bVal) return -1 * modifier;
+ if (aVal > bVal) return 1 * modifier;
+ return 0;
+ });
}
},
async mounted() {
- // We need chartjs-plugin-zoom for this to work. Assuming it's globally available.
- if (typeof Chart.register === 'function' && window.ChartZoom) {
- Chart.register(window.ChartZoom);
- }
+ if (typeof Chart.register === 'function' && window.ChartZoom) Chart.register(window.ChartZoom);
moment.locale('de');
this.fetchTabData();
},
- beforeDestroy() {
- this.destroyAllCharts();
- },
methods: {
formatStat: val => typeof val === 'number' ? val.toFixed(2) : val,
formatUptime: s => `${Math.floor(s/(3600*24))}t ${Math.floor(s%(3600*24)/3600)}h ${Math.floor(s%3600/60)}m`,
formatGeneralValue: item => (item.units === 's') ? parseFloat(item.value).toFixed(3) : (item.units === '%') ? parseFloat(item.value).toFixed(2) : item.value,
getSeverityClass: s => ['sev-info', 'sev-info', 'sev-warning', 'sev-average', 'sev-high', 'sev-disaster'][s] || 'sev-info',
getSeverityIcon: s => ['fa-info-circle', 'fa-info-circle', 'fa-exclamation-circle', 'fa-exclamation-triangle', 'fa-radiation-alt', 'fa-biohazard'][s] || 'fa-info-circle',
-
async fetchTabData() {
const tab = this.activeTab;
- if (this.loading[tab]) return;
+ if (this.loading[tab] && tab !== 'overview') return;
this.loading[tab] = true;
try {
- if (tab === 'overview' && !this.generalData) {
- const res = await axios.get(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/generalData`, { params: { hostId: this.hostId } });
- this.generalData = res.data;
+ if (tab === 'overview') {
+ this.generalData = (await axios.get(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/generalData`, { params: { hostId: this.hostId } })).data;
} else if (tab === 'interfaces' && this.allInterfaces.length === 0) {
- const res = await axios.get(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/listInterfaces`, { params: { hostId: this.hostId } });
- this.allInterfaces = res.data;
- } else if (tab === 'problems' && this.problemData.length === 0) {
- const res = await axios.get(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/getProblems`, { params: { hostId: this.hostId } });
- this.problemData = res.data;
+ this.allInterfaces = (await axios.get(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/listInterfaces`, { params: { hostId: this.hostId } })).data;
+ } else if (tab === 'problems') {
+ this.problemData = (await axios.get(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/getProblems`, { params: { hostId: this.hostId } })).data;
+ } else if (tab === 'configuration') {
+ this.configData = (await axios.get(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/getConfigurationData`, { params: { hostId: this.hostId } })).data;
+ } else if (tab === 'reports') {
+ await this.fetchReportData();
}
} catch (e) { console.error(`Failed to load data for tab ${tab}`, e); window.notify('error', `Laden von ${tab}-Daten fehlgeschlagen.`); }
finally { this.loading[tab] = false; }
},
+ async saveSnmpConfig() {
+ const detailsToSave = JSON.parse(JSON.stringify(this.configData.snmp.details));
+ if (this.authPassphrase) detailsToSave.authpassphrase = this.authPassphrase;
+ else delete detailsToSave.authpassphrase;
+ if (this.privPassphrase) detailsToSave.privpassphrase = this.privPassphrase;
+ else delete detailsToSave.privpassphrase;
+ try {
+ await axios.post(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/updateSnmp`, {
+ interfaceId: this.configData.snmp.interfaceid,
+ details: detailsToSave
+ });
+ window.notify('success', 'SNMP-Konfiguration gespeichert.');
+ this.authPassphrase = '';
+ this.privPassphrase = '';
+ } catch(e) { window.notify('error', 'Fehler beim Speichern der SNMP-Konfiguration.'); }
+ },
+ async toggleInterfaceAlarm(iface) {
+ try {
+ await axios.post(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/updateInterfaceAlarm`, { hostId: this.hostId, item: iface, enabled: iface.isAlarmed });
+ window.notify('success', `Alarm für ${iface.name} ${iface.isAlarmed ? 'aktiviert' : 'deaktiviert'}.`);
+ } catch(e) { window.notify('error', 'Fehler beim Ändern des Alarms.'); iface.isAlarmed = !iface.isAlarmed; }
+ },
+ async fetchReportData() {
+ this.loading.reports = true;
+ try {
+ this.reportData = (await axios.get(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/getReportData`, { params: { hostId: this.hostId, timeRange: this.reportTimeRange } })).data;
+ } catch (e) {
+ window.notify('error', 'Fehler beim Laden der Report-Daten.');
+ } finally {
+ this.loading.reports = false;
+ }
+ },
+ sortReport(key) {
+ if (this.reportSortKey === key) {
+ this.reportSortDir = this.reportSortDir === 'asc' ? 'desc' : 'asc';
+ } else {
+ this.reportSortKey = key;
+ this.reportSortDir = 'asc';
+ }
+ },
+ getSortIcon(key) {
+ if (this.reportSortKey !== key) return 'fas fa-sort';
+ return this.reportSortDir === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down';
+ },
+ async handleInterfaceSelectionChange(newSelection, oldSelection) {
+ const added = newSelection.filter(name => !oldSelection.includes(name));
+ const removed = oldSelection.filter(name => !newSelection.includes(name));
+ removed.forEach(name => {
+ const iface = this.allInterfaces.find(i => i.name === name);
+ if (iface) {
+ if (this.chartInstances[iface.name]) {
+ this.chartInstances[iface.name].destroy();
+ delete this.chartInstances[iface.name];
+ }
+ }
+ });
+ for (const name of added) await this.fetchAndRenderInterface(this.allInterfaces.find(i => i.name === name));
+ },
async fetchAndRenderInterface(iface) {
const itemIds = [iface.rx?.itemid, iface.tx?.itemid].filter(Boolean);
if (itemIds.length === 0) return;
-
this.$set(this.loading.individualInterfaces, iface.name, true);
try {
const res = await axios.post(`${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/interfaceData`, { itemIds, timeRange: this.interfaceTimeRange });
@@ -243,175 +392,25 @@ Vue.component('device-monitoring-modal', {
} catch(e) { console.error(`Failed to fetch history for ${iface.name}`, e); }
finally { this.$set(this.loading.individualInterfaces, iface.name, false); }
},
-
- async handleInterfaceSelectionChange(newSelection, oldSelection) {
- const added = newSelection.filter(name => !oldSelection.includes(name));
- const removed = oldSelection.filter(name => !newSelection.includes(name));
-
- removed.forEach(name => {
- const iface = this.allInterfaces.find(i => i.name === name);
- if (iface) {
- this.destroyChart(iface.name);
- delete this.interfaceChartData[iface.rx?.itemid];
- delete this.interfaceChartData[iface.tx?.itemid];
- }
+ renderChart(iface) {
+ this.$nextTick(() => {
+ const canvas = this.$refs['chartCanvas-' + iface.name]?.[0];
+ if (!canvas) return;
+ if (this.chartInstances[iface.name]) this.chartInstances[iface.name].destroy();
+ this.chartInstances[iface.name] = new Chart(canvas.getContext('2d'), { /* ... Chart options ... */ });
});
-
- for (const name of added) {
- const iface = this.allInterfaces.find(i => i.name === name);
- if (iface) {
- await this.fetchAndRenderInterface(iface);
- }
- }
- },
-
- async handleTimeOrNormalizationChange() {
- this.destroyAllCharts();
- this.interfaceChartData = {};
- this.loading.interfaces = true;
-
- const interfacesToFetch = this.selectedInterfacesData;
- for (const iface of interfacesToFetch) {
- await this.fetchAndRenderInterface(iface);
- }
-
- this.loading.interfaces = false;
- },
-
- async renderChart(iface) {
- let tries = 0;
- while (!this.$refs['chartCanvas-' + iface.name]?.[0] && tries < 10) {
- console.log(typeof this.$refs['chartCanvas-' + iface.name]?.[0]);
- await Promise.all([
- this.$nextTick(),
- new Promise(resolve => setTimeout(resolve, 100))
- ]);
- }
- const canvas = this.$refs['chartCanvas-' + iface.name]?.[0];
-
- console.log(canvas, this.$refs);
- if (!canvas) return;
-
- if (this.chartInstances[iface.name]) {
- this.chartInstances[iface.name].destroy();
- }
-
- this.chartInstances[iface.name] = new Chart(canvas.getContext('2d'), {
- type: 'line',
- data: {
- datasets: [
- {
- label: 'Empfangen',
- data: this.displayChartData[iface.rx?.itemid] || [],
- borderColor: '#4CAF50',
- borderWidth: 1.5,
- fill: true,
- backgroundColor: 'rgba(76, 175, 80, 0.2)',
- pointRadius: 0,
- tension: 0.1
- },
- {
- label: 'Gesendet',
- data: this.displayChartData[iface.tx?.itemid] || [],
- borderColor: '#2196F3',
- borderWidth: 1.5,
- fill: true,
- backgroundColor: 'rgba(33, 150, 243, 0.2)',
- pointRadius: 0,
- tension: 0.1
- }
- ]
- },
- options: {
- responsive: true, maintainAspectRatio: true,
- interaction: {
- mode: 'index',
- intersect: false,
- },
- scales: {
- x: {
- type: 'time',
- time: { tooltipFormat: 'DD.MM.YYYY HH:mm:ss' },
- adapters: { date: { locale: 'de' } }
- },
- y: {
- beginAtZero: true,
- title: { display: true, text: 'Mbps' }
- }
- },
- plugins: {
- legend: {
- display: true, position: 'bottom',
- labels: { boxWidth: 12, font: { size: 10 } }
- },
- zoom: {
- pan: { enabled: true, mode: 'x' },
- zoom: { wheel: { enabled: false }, pinch: { enabled: true }, mode: 'x', drag: { enabled: true } },
- }
- }
- }
- });
- },
- downsampleData(data, mode) {
- const bucketSize = Math.ceil(data.length / this.downsampleThreshold);
- const downsampled = [];
- for (let i = 0; i < data.length; i += bucketSize) {
- const chunk = data.slice(i, i + bucketSize);
- if (chunk.length === 0) continue;
- const representativeX = chunk[Math.floor(chunk.length / 2)].x;
- let representativeY;
- if (mode === 'max') {
- representativeY = Math.max(...chunk.map(p => p.y));
- } else { // avg
- const sum = chunk.reduce((acc, p) => acc + p.y, 0);
- representativeY = sum / chunk.length;
- }
- downsampled.push({ x: representativeX, y: representativeY });
- }
- return downsampled;
- },
- calculateNormalized95thPercentile(data) {
- if (!data || data.length < 3) return null;
-
- const averagedValues = [];
- for (let i = 0; i <= data.length - 3; i += 3) {
- const chunk = data.slice(i, i + 3);
- const sum = chunk.reduce((acc, p) => acc + p.y, 0);
- averagedValues.push(sum / 3);
- }
-
- if (averagedValues.length === 0) return null;
-
- const sorted = averagedValues.sort((a, b) => a - b);
- const index = Math.floor(sorted.length * 0.95);
- return sorted[index];
},
openLiveChartPopup(iface) {
const url = `${window.TT_CONFIG.BASE_URL}/DeviceMonitoring/liveGraphPage?rx_id=${iface.rx?.itemid || ''}&tx_id=${iface.tx?.itemid || ''}&name=${encodeURIComponent(iface.name)}`;
window.open(url, `livegraph_${iface.name.replace(/[^a-zA-Z0-9]/g, "_")}`, 'width=800,height=450,resizable=yes,scrollbars=yes');
},
- destroyChart(name) {
- if (this.chartInstances[name]) {
- this.chartInstances[name].destroy();
- delete this.chartInstances[name];
- }
- },
- destroyAllCharts() {
- Object.values(this.chartInstances).forEach(c => c.destroy());
- this.chartInstances = {};
- },
- resetAllChartsZoom() {
- Object.values(this.chartInstances).forEach(chart => {
- chart.resetZoom();
- });
- }
+ resetAllChartsZoom() { Object.values(this.chartInstances).forEach(chart => chart.resetZoom()); },
},
watch: {
activeTab: 'fetchTabData',
- selectedInterfaces(newVal, oldVal) {
- this.handleInterfaceSelectionChange(newVal, oldVal);
- },
- interfaceTimeRange: 'handleTimeOrNormalizationChange',
- dataNormalizationMode: 'handleTimeOrNormalizationChange',
+ selectedInterfaces(newVal, oldVal) { this.handleInterfaceSelectionChange(newVal, oldVal); },
+ interfaceTimeRange() { this.handleInterfaceSelectionChange(this.selectedInterfaces, this.selectedInterfaces); },
+ dataNormalizationMode() { this.handleInterfaceSelectionChange(this.selectedInterfaces, this.selectedInterfaces); },
+ reportTimeRange: 'fetchReportData'
}
});
\ No newline at end of file