mirror of
https://github.com/pcvolkmer/onco-analytics-monitor.git
synced 2025-04-19 19:16:52 +00:00
112 lines
3.8 KiB
HTML
112 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>onco-analytics-monitor</title>
|
|
<link rel="stylesheet" th:href="@{/css/style.css}" />
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>onco-analytics-monitor</h1>
|
|
<p>
|
|
Überwachung der einzelnen Kafka Topics und enthaltener Conditions - aufgeteilt nach ICD10-Gruppe.
|
|
</p>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<div class="step">
|
|
<div class="item">
|
|
<img class="logo" th:src="@{/images/db.png}" alt="db"/>
|
|
<div class="description">Onkostar Database</div>
|
|
</div>
|
|
</div><div class="step">
|
|
<div class="item">
|
|
<img class="logo" th:src="@{/images/kafka.png}" alt="kafka"/>
|
|
<div class="description">Kafka Connect</div>
|
|
</div>
|
|
</div><div class="step">
|
|
<div class="item">
|
|
<img class="logo" th:src="@{/images/topic.png}" alt="topic"/>
|
|
<div class="description">Kafka Topic<br/>oBDS XML</div>
|
|
<div class="statistics">
|
|
<table id="obdsxml"></table>
|
|
</div>
|
|
</div>
|
|
</div><div class="step">
|
|
<div class="item">
|
|
<img class="logo" th:src="@{/images/job.png}" alt="job"/>
|
|
<div class="description">oBDS-to-fhir</div>
|
|
</div>
|
|
</div><div class="step">
|
|
<div class="item">
|
|
<img class="logo" th:src="@{/images/topic.png}" alt="topic"/>
|
|
<div class="description">Kafka Topic<br/>oBDS FHIR</div>
|
|
<div class="statistics">
|
|
<table id="fhirobds"></table>
|
|
</div>
|
|
</div>
|
|
</div><div class="step">
|
|
<div class="item">
|
|
<img class="logo" th:src="@{/images/job.png}" alt="job"/>
|
|
<div class="description">fhir-pseudonymizer</div>
|
|
</div>
|
|
</div><div class="step">
|
|
<div class="item">
|
|
<img class="logo" th:src="@{/images/topic.png}" alt="topic"/>
|
|
<div class="description">Kafka Topic<br/>FHIR pseudonymized</div>
|
|
<div class="statistics">
|
|
<table id="fhirpseudonymized"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
const prevData = [];
|
|
|
|
function updateData(data, elemName) {
|
|
let elem = document.getElementById(elemName);
|
|
|
|
elem.parentElement.parentElement.style.backgroundColor = '#00800055';
|
|
setTimeout(() => {
|
|
elem.parentElement.parentElement.style.backgroundColor = '';
|
|
}, 250);
|
|
|
|
let diff = data.entries
|
|
.filter((entry, idx) => prevData[elemName] !== undefined && prevData[elemName][idx].count !== entry.count)
|
|
.map(entry => entry.name);
|
|
|
|
elem.innerHTML = '<thead><tr><th>ICD10-Gruppe</th><th>Anzahl</th></tr></thead>'
|
|
+ Array.from(data.entries)
|
|
.map(entry => (Array.from(diff).includes(entry.name)) ? `<tr class="changed"><td>${entry.name}</td><td>${entry.count}</td></tr>` : `<tr><td>${entry.name}</td><td>${entry.count}</td></tr>`)
|
|
.join('');
|
|
|
|
prevData[elemName] = data.entries;
|
|
}
|
|
|
|
fetch('/statistics/obdsxml').then(res => res.json()).then(data => updateData(data, 'obdsxml'));
|
|
fetch('/statistics/fhirobds').then(res => res.json()).then(data => updateData(data, 'fhirobds'));
|
|
fetch('/statistics/fhirpseudonymized').then(res => res.json()).then(data => updateData(data, 'fhirpseudonymized'));
|
|
|
|
window.addEventListener('load', () => {
|
|
const evtSource = new EventSource('/events');
|
|
|
|
evtSource.addEventListener('obdsxml', (event) => {
|
|
updateData(JSON.parse(event.data), 'obdsxml')
|
|
});
|
|
|
|
evtSource.addEventListener('fhirobds', (event) => {
|
|
updateData(JSON.parse(event.data), 'fhirobds')
|
|
});
|
|
|
|
evtSource.addEventListener('fhirpseudonymized', (event) => {
|
|
updateData(JSON.parse(event.data), 'fhirpseudonymized')
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |