init
This commit is contained in:
jhartworks
@@ -0,0 +1,426 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import ViewerShortcutButton from '../components/ViewerShortcutButton'
|
||||
import { api, apiPost } from '../lib/visuApi'
|
||||
|
||||
const RANGE_OPTIONS = [
|
||||
{ value: '15m', label: '15 Min' },
|
||||
{ value: '1h', label: '1 h' },
|
||||
{ value: '6h', label: '6 h' },
|
||||
{ value: '12h', label: '12 h' },
|
||||
{ value: '24h', label: '24 h' },
|
||||
{ value: '7d', label: '7 Tage' },
|
||||
{ value: '30d', label: '30 Tage' },
|
||||
{ value: '90d', label: '90 Tage' },
|
||||
{ value: '180d', label: '6 Monate' },
|
||||
]
|
||||
|
||||
const INTERVAL_OPTIONS = ['auto', '10s', '30s', '1m', '5m', '10m', '15m', '30m', '1h', '6h', '12h', '1d']
|
||||
|
||||
const AGGREGATES = [
|
||||
{ value: 'mean', label: 'Mittelwert' },
|
||||
{ value: 'last', label: 'Letzter Wert' },
|
||||
{ value: 'min', label: 'Minimum' },
|
||||
{ value: 'max', label: 'Maximum' },
|
||||
]
|
||||
|
||||
function pointKey(point) {
|
||||
return ['influx', point.database || '', point.measurement || '', point.tag_key || '', point.tag_value || ''].join('|')
|
||||
}
|
||||
|
||||
function pointMeasurement(point) {
|
||||
return String(point?.measurement || '').trim()
|
||||
}
|
||||
|
||||
function csvEscape(value, delimiter = ',') {
|
||||
const text = String(value ?? '')
|
||||
return /["\r\n]/.test(text) || text.includes(delimiter)
|
||||
? `"${text.replace(/"/g, '""')}"`
|
||||
: text
|
||||
}
|
||||
|
||||
function downloadBlob(blob, filename) {
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = filename
|
||||
a.click()
|
||||
setTimeout(() => URL.revokeObjectURL(url), 1000)
|
||||
}
|
||||
|
||||
function chunks(items, size = 8) {
|
||||
const out = []
|
||||
for (let i = 0; i < items.length; i += size) out.push(items.slice(i, i + size))
|
||||
return out
|
||||
}
|
||||
|
||||
function lastNonNull(series) {
|
||||
const row = [...(series?.values || [])].reverse().find((item) => item.value !== null && item.value !== undefined && item.value !== '')
|
||||
return row ? { value: row.value, time: row.time } : { value: '', time: '' }
|
||||
}
|
||||
|
||||
export default function MonitoringData() {
|
||||
const [databases, setDatabases] = useState([])
|
||||
const [database, setDatabase] = useState('')
|
||||
const [points, setPoints] = useState([])
|
||||
const [selection, setSelection] = useState([])
|
||||
const [savedSelections, setSavedSelections] = useState([])
|
||||
const [activeSelectionId, setActiveSelectionId] = useState(0)
|
||||
const [selectionName, setSelectionName] = useState('Neue Selection')
|
||||
const [q, setQ] = useState('')
|
||||
const [measurementFilter, setMeasurementFilter] = useState('')
|
||||
const [range, setRange] = useState('24h')
|
||||
const [interval, setIntervalValue] = useState('auto')
|
||||
const [aggregate, setAggregate] = useState('last')
|
||||
const [delimiter, setDelimiter] = useState(';')
|
||||
const [lastValues, setLastValues] = useState({})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [savingSelection, setSavingSelection] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
async function loadSavedSelections() {
|
||||
const data = await api('monitoring_selections')
|
||||
setSavedSelections(data.selections || [])
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadSavedSelections().catch((err) => setError(err.message))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
api('trend_sources', { database })
|
||||
.then((data) => {
|
||||
if (!alive) return
|
||||
setDatabases(data.databases || [])
|
||||
setDatabase((current) => current || data.selected_database || data.databases?.[0] || '')
|
||||
setPoints(data.points || [])
|
||||
})
|
||||
.catch((err) => {
|
||||
if (alive) setError(err.message)
|
||||
})
|
||||
.finally(() => {
|
||||
if (alive) setLoading(false)
|
||||
})
|
||||
|
||||
return () => {
|
||||
alive = false
|
||||
}
|
||||
}, [database])
|
||||
|
||||
useEffect(() => {
|
||||
if (!measurementFilter) return
|
||||
|
||||
if (!points.some((point) => pointMeasurement(point) === measurementFilter)) {
|
||||
setMeasurementFilter('')
|
||||
}
|
||||
}, [measurementFilter, points])
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true
|
||||
|
||||
async function loadLastValues() {
|
||||
if (!selection.length) {
|
||||
setLastValues({})
|
||||
return
|
||||
}
|
||||
|
||||
const next = {}
|
||||
|
||||
for (const group of chunks(selection, 8)) {
|
||||
const res = await apiPost('trend_data', {
|
||||
series_json: JSON.stringify(group.map((point, index) => ({
|
||||
...point,
|
||||
id: pointKey(point) || `selection-${index}`,
|
||||
label: point.tag_value || point.label,
|
||||
}))),
|
||||
range,
|
||||
interval: 'auto',
|
||||
aggregate: 'last',
|
||||
})
|
||||
|
||||
;(res.data?.series || []).forEach((serie) => {
|
||||
next[pointKey(serie)] = lastNonNull(serie)
|
||||
})
|
||||
}
|
||||
|
||||
if (alive) setLastValues(next)
|
||||
}
|
||||
|
||||
loadLastValues().catch((err) => {
|
||||
if (alive) setError(err.message)
|
||||
})
|
||||
|
||||
return () => {
|
||||
alive = false
|
||||
}
|
||||
}, [selection, range])
|
||||
|
||||
const measurements = useMemo(() => (
|
||||
Array.from(new Set(points.map(pointMeasurement).filter(Boolean))).sort((a, b) => (
|
||||
a.localeCompare(b, 'de', { numeric: true, sensitivity: 'base' })
|
||||
))
|
||||
), [points])
|
||||
|
||||
const filteredPoints = useMemo(() => {
|
||||
const needle = q.trim().toLowerCase()
|
||||
return points.filter((point) => {
|
||||
const hay = `${point.measurement} ${point.tag_key} ${point.tag_value} ${point.label}`.toLowerCase()
|
||||
const matchesSearch = !needle || hay.includes(needle)
|
||||
const matchesMeasurement = !measurementFilter || pointMeasurement(point) === measurementFilter
|
||||
return matchesSearch && matchesMeasurement
|
||||
})
|
||||
}, [points, q, measurementFilter])
|
||||
|
||||
const selectionKeys = new Set(selection.map(pointKey))
|
||||
|
||||
function addPoint(point) {
|
||||
if (selectionKeys.has(pointKey(point))) return
|
||||
setSelection((old) => [...old, point])
|
||||
}
|
||||
|
||||
function removePoint(key) {
|
||||
setSelection((old) => old.filter((point) => pointKey(point) !== key))
|
||||
}
|
||||
|
||||
async function saveCurrentSelection() {
|
||||
const name = selectionName.trim() || `Selection ${savedSelections.length + 1}`
|
||||
setError('')
|
||||
setSavingSelection(true)
|
||||
|
||||
try {
|
||||
const data = await apiPost('monitoring_selection_save', {
|
||||
selection_id: activeSelectionId || '',
|
||||
name,
|
||||
database_name: database,
|
||||
range_value: range,
|
||||
interval_value: interval,
|
||||
aggregate_value: aggregate,
|
||||
csv_delimiter: delimiter,
|
||||
points_json: JSON.stringify(selection),
|
||||
})
|
||||
|
||||
setActiveSelectionId(data.selection_id || activeSelectionId)
|
||||
setSelectionName(name)
|
||||
await loadSavedSelections()
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setSavingSelection(false)
|
||||
}
|
||||
}
|
||||
|
||||
function loadSelection(item) {
|
||||
setSelection(item.points || [])
|
||||
setSelectionName(item.name || 'Selection')
|
||||
setActiveSelectionId(Number(item.id || 0))
|
||||
setDatabase(item.database_name || database)
|
||||
setRange(item.range_value || '24h')
|
||||
setIntervalValue(item.interval_value || 'auto')
|
||||
setAggregate(item.aggregate_value || 'last')
|
||||
setDelimiter(item.csv_delimiter || item.delimiter_value || ';')
|
||||
}
|
||||
|
||||
async function deleteSelection(item) {
|
||||
if (!item?.id) return
|
||||
setError('')
|
||||
|
||||
try {
|
||||
await apiPost('monitoring_selection_delete', { selection_id: item.id })
|
||||
if (Number(item.id) === Number(activeSelectionId)) setActiveSelectionId(0)
|
||||
await loadSavedSelections()
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
function exportLastValuesCsv() {
|
||||
const header = ['Datenpunkt', 'Measurement', 'Tag', 'Wert', 'Zeit', 'Datenbank']
|
||||
const lines = [
|
||||
header.map((cell) => csvEscape(cell, delimiter)).join(delimiter),
|
||||
...selection.map((point) => {
|
||||
const last = lastValues[pointKey(point)] || {}
|
||||
return [point.tag_value, point.measurement, point.tag_key, last.value ?? '', last.time ?? '', point.database]
|
||||
.map((cell) => csvEscape(cell, delimiter)).join(delimiter)
|
||||
}),
|
||||
]
|
||||
downloadBlob(new Blob([`\uFEFF${lines.join('\r\n')}`], { type: 'text/csv;charset=utf-8' }), `${selectionName || 'monitoring_selection'}_lastvalues.csv`)
|
||||
}
|
||||
|
||||
async function exportTrendData(kind = 'csv') {
|
||||
const rows = new Map()
|
||||
const headers = ['Zeit', ...selection.map((point) => point.tag_value || point.label)]
|
||||
|
||||
for (const group of chunks(selection, 8)) {
|
||||
const res = await apiPost('trend_data', {
|
||||
series_json: JSON.stringify(group.map((point) => ({
|
||||
...point,
|
||||
id: pointKey(point),
|
||||
label: point.tag_value || point.label,
|
||||
}))),
|
||||
range,
|
||||
interval,
|
||||
aggregate,
|
||||
})
|
||||
|
||||
;(res.data?.series || []).forEach((serie) => {
|
||||
;(serie.values || []).forEach((row) => {
|
||||
if (!rows.has(row.time)) rows.set(row.time, { Zeit: row.time })
|
||||
rows.get(row.time)[serie.label] = row.value ?? ''
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const sortedRows = Array.from(rows.values()).sort((a, b) => String(a.Zeit).localeCompare(String(b.Zeit)))
|
||||
|
||||
if (kind === 'xls') {
|
||||
const html = [
|
||||
'<table>',
|
||||
`<tr>${headers.map((cell) => `<th>${String(cell).replace(/[<>&]/g, '')}</th>`).join('')}</tr>`,
|
||||
...sortedRows.map((row) => `<tr>${headers.map((cell) => `<td>${String(row[cell] ?? '').replace(/[<>&]/g, '')}</td>`).join('')}</tr>`),
|
||||
'</table>',
|
||||
].join('')
|
||||
downloadBlob(new Blob([html], { type: 'application/vnd.ms-excel;charset=utf-8' }), `${selectionName || 'monitoring_selection'}_trend.xls`)
|
||||
return
|
||||
}
|
||||
|
||||
const lines = [
|
||||
headers.map((cell) => csvEscape(cell, delimiter)).join(delimiter),
|
||||
...sortedRows.map((row) => headers.map((cell) => csvEscape(row[cell] ?? '', delimiter)).join(delimiter)),
|
||||
]
|
||||
downloadBlob(new Blob([`\uFEFF${lines.join('\r\n')}`], { type: 'text/csv;charset=utf-8' }), `${selectionName || 'monitoring_selection'}_trend.csv`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page-shell full viewer-full">
|
||||
<section className="glass-card visu-workspace monitoring-page">
|
||||
<div className="section-head visu-topbar">
|
||||
<div>
|
||||
<div className="eyebrow">Monitoring</div>
|
||||
<h1>Datenpunkt-Uebersicht</h1>
|
||||
<p className="subline">Datenpunkte auswaehlen, Selections speichern und manuelle CSV- oder Excel-Exporte ziehen.</p>
|
||||
</div>
|
||||
<div className="designer-actions">
|
||||
<ViewerShortcutButton />
|
||||
<a href="/visu/?mode=dashboard" className="btn">Dashboard</a>
|
||||
<a href="/visu/?mode=manage" className="btn">Verwaltung</a>
|
||||
<a href="/visu/?mode=templates" className="btn">Templates</a>
|
||||
<a href="/visu/?mode=monitoring" className="btn primary">Datenpunkte</a>
|
||||
<a href="/visu/?mode=virtual_points" className="btn">Virtuelle Datenpunkte</a>
|
||||
<a href="/visu/?mode=csv_exports" className="btn">CSV Exporte</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="error-box small">{error}</div>}
|
||||
|
||||
<div className="monitoring-layout">
|
||||
<div className="monitoring-panel">
|
||||
<div className="prop-grid-2">
|
||||
<div className="field">
|
||||
<label>Influx DB</label>
|
||||
<select value={database} onChange={(e) => setDatabase(e.target.value)}>
|
||||
{databases.map((db) => <option key={db} value={db}>{db}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Measurement / FROM</label>
|
||||
<select value={measurementFilter} onChange={(e) => setMeasurementFilter(e.target.value)}>
|
||||
<option value="">Alle Measurements</option>
|
||||
{measurements.map((measurement) => <option key={measurement} value={measurement}>{measurement}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Suchen</label>
|
||||
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Measurement, Tag, Datenpunkt..." />
|
||||
</div>
|
||||
{loading && <div className="small-muted">Datenpunkte werden geladen...</div>}
|
||||
<div className="monitoring-point-list">
|
||||
{filteredPoints.map((point) => (
|
||||
<button key={pointKey(point)} type="button" className={`monitoring-point-row ${selectionKeys.has(pointKey(point)) ? 'is-selected' : ''}`} onClick={() => addPoint(point)}>
|
||||
<strong>{point.tag_value}</strong>
|
||||
<span>{point.measurement} - {point.tag_key}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="monitoring-panel">
|
||||
<div className="monitoring-selection-head">
|
||||
<div className="field">
|
||||
<label>Selection Name</label>
|
||||
<input value={selectionName} onChange={(e) => setSelectionName(e.target.value)} />
|
||||
</div>
|
||||
<button type="button" className="btn primary" disabled={savingSelection} onClick={saveCurrentSelection}>
|
||||
{savingSelection ? 'Speichert...' : 'Speichern'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="prop-grid-2">
|
||||
<div className="field">
|
||||
<label>Zeitbereich</label>
|
||||
<select value={range} onChange={(e) => setRange(e.target.value)}>
|
||||
{RANGE_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Intervall</label>
|
||||
<select value={interval} onChange={(e) => setIntervalValue(e.target.value)}>
|
||||
{INTERVAL_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Aggregation</label>
|
||||
<select value={aggregate} onChange={(e) => setAggregate(e.target.value)}>
|
||||
{AGGREGATES.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>CSV Trennzeichen</label>
|
||||
<select value={delimiter} onChange={(e) => setDelimiter(e.target.value)}>
|
||||
<option value=",">Komma (,)</option>
|
||||
<option value=";">Semikolon (;)</option>
|
||||
<option value="\t">Tab</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="designer-actions">
|
||||
<button type="button" className="btn small" disabled={!selection.length} onClick={exportLastValuesCsv}>LastValues CSV</button>
|
||||
<button type="button" className="btn small" disabled={!selection.length} onClick={() => exportTrendData('csv')}>Trend CSV</button>
|
||||
<button type="button" className="btn small" disabled={!selection.length} onClick={() => exportTrendData('xls')}>Excel</button>
|
||||
<a href="/visu/?mode=csv_exports" className="btn small">Zyklische Exporte</a>
|
||||
</div>
|
||||
|
||||
<div className="monitoring-selection-list">
|
||||
{selection.map((point) => {
|
||||
const last = lastValues[pointKey(point)] || {}
|
||||
return (
|
||||
<div key={pointKey(point)} className="monitoring-selection-row">
|
||||
<div>
|
||||
<strong>{point.tag_value}</strong>
|
||||
<span>{last.value !== '' && last.value !== undefined ? last.value : '...'} {last.time ? `- ${new Date(last.time).toLocaleString('de-DE')}` : ''}</span>
|
||||
</div>
|
||||
<button type="button" className="mini-btn danger" onClick={() => removePoint(pointKey(point))}>Entfernen</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="monitoring-saved-list">
|
||||
<div className="small-title">Gespeicherte Selections</div>
|
||||
{savedSelections.map((item) => (
|
||||
<div key={item.id || item.name} className="monitoring-saved-row">
|
||||
<button type="button" className="mini-btn" onClick={() => loadSelection(item)}>{item.name}</button>
|
||||
<button type="button" className="mini-btn danger" onClick={() => deleteSelection(item)}>Loeschen</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user