diogo/spark-art-dashboard
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add ingestion rate controller

Browse Source 
Fix sla loader assync bug
This commit is contained in:
Diogo Cordeiro 2018-09-29 18:40:22 +01:00
parent 5930a29cdf
commit 10104b95a2
3 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
chart.js
View File

@ -1,11 +1,13 @@
// SLA Data // SLA Data
sla = null sla = null
const request = async () => { var xhttp = new XMLHttpRequest();
const response = await fetch('sla') xhttp.onreadystatechange = function() {
sla = await response.json(); if (this.readyState == 4 && this.status == 200) {
sla = sla[0] sla = this.responseText;
} }
request(); };
xhttp.open("GET", "sla.json", false);
xhttp.send();
// Charts colors // Charts colors
const chartColors = [ const chartColors = [

15
index.html
View File

@ -17,11 +17,6 @@
#chart-container > canvas { #chart-container > canvas {
height: 400px; height: 400px;
} }
#ingestion-rate-box {
position: fixed;
top: 1em;
right: 25em;
}
</style> </style>
</head> </head>
<body> <body>
@ -34,6 +29,11 @@
</ul> </ul>
</nav> </nav>
<h1>ART Dashboard</h1> <h1>ART Dashboard</h1>
<div id="ingestion-rate-box">
<label for="ingestion-rate-controller">Ingestion Rate</label>
<input id="ingestion-rate" type="number">
<input id="ingestion-rate-update" type="submit" value="Update">
</div>
</header> </header>
<div id="chart-container"> <div id="chart-container">
<canvas id="chart-ingestionRate"></canvas> <canvas id="chart-ingestionRate"></canvas>
@ -43,13 +43,10 @@
<canvas id="chart-Delay (ms)"></canvas> <canvas id="chart-Delay (ms)"></canvas>
<canvas id="chart-execTime (ms)"></canvas> <canvas id="chart-execTime (ms)"></canvas>
</div> </div>
<div id="ingestion-rate-box">
<label for="ingestion-rate-controller">Ingestion Rate</label>
<input id="ingestion-rate" type="number">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<script src="chart.js"></script> <script src="chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.slim.js"></script>
<script src="ingestion-rate.js"></script> <script src="ingestion-rate.js"></script>
<footer id="footer"> <footer id="footer">
<p><a href="https://github.com/diogogithub/spark-art-dashboard">ART Dashboard</a> and <a href="https://github.com/diogogithub/excalibur_template/">Excalibur template</a> by <a href="https://www.diogo.site/">Diogo Cordeiro</a> - <a href="https://www.inesc-id.pt/">INESC-ID</a> <p><a href="https://github.com/diogogithub/spark-art-dashboard">ART Dashboard</a> and <a href="https://github.com/diogogithub/excalibur_template/">Excalibur template</a> by <a href="https://www.diogo.site/">Diogo Cordeiro</a> - <a href="https://www.inesc-id.pt/">INESC-ID</a>

22
ingestion-rate.js Normal file
View File

@ -0,0 +1,22 @@
var current_ingestion_rate = document.getElementById("ingestion-rate").value;
var ws = new WebSocket('ws://localhost:3030/');
ws.addEventListener('open', function open() {
console.log('connected');
ws.send(Date.now().toString(), {mask: true});
});
ws.addEventListener('close', function close() {
console.log('disconnected');
});
ws.addEventListener('message', function message(data, flags) {
console.log('Server response: ' + data.data, flags);
});
document.getElementById("ingestion-rate-update").addEventListener('click', function() {
if (document.getElementById("ingestion-rate").value != current_ingestion_rate) {
ws.send(document.getElementById("ingestion-rate").value, {mask: true});
current_ingestion_rate = document.getElementById("ingestion-rate").value;
}
});