ClickHouse/utils/tests-visualizer/index.html

190 lines
5.1 KiB
HTML
Raw Normal View History

2022-01-06 21:35:02 +00:00
<html id="html">
<head>
<meta charset="UTF-8">
2022-01-06 21:35:02 +00:00
<style>
body {
color: white;
background: black;
font-family: sans-serif;
}
2022-01-07 09:26:17 +00:00
.hide {
display: none;
}
2022-01-06 21:35:02 +00:00
#loading {
margin-top: 1em;
}
#loading img {
width: 130px;
display: block;
margin: 30px auto;
2023-04-29 21:48:45 +00:00
animation: spin 10s ease-in-out infinite;
2022-01-06 21:35:02 +00:00
}
2022-01-07 09:26:17 +00:00
h1 {
2022-01-06 21:35:02 +00:00
text-align: center;
}
#info {
position: sticky;
top: 1rem;
z-index: 1;
margin: 1rem;
float: right;
font-size: 16pt;
padding: 0.5rem;
2022-01-07 19:20:47 +00:00
border: 1px solid #111;
2022-01-06 21:35:02 +00:00
}
canvas {
position: absolute;
cursor: pointer;
}
@keyframes spin {
2023-04-29 21:48:45 +00:00
50% { transform:scale(150%); }
100% { transform:scale(100%); }
2022-01-06 21:35:02 +00:00
}
</style>
</head>
2022-01-06 21:35:02 +00:00
<body>
2022-01-07 09:26:17 +00:00
<pre id="info" class="hide"></pre>
<h1 id="fail-message" class="hide">Data not load</h1>
2022-01-06 21:35:02 +00:00
<div id="loading">
2022-08-10 02:46:43 +00:00
<img src="https://presentations.clickhouse.com/images/logo.svg">
2022-01-07 11:59:07 +00:00
<h1>Loading (~10 seconds, ~20 MB)</h1>
2022-01-06 21:35:02 +00:00
</div>
<canvas id="canvas"></canvas>
<script type="text/javascript">
2023-04-29 21:48:45 +00:00
let start_date = '2021-12-01';
2022-01-06 21:35:02 +00:00
const canvasNode = document.getElementById('canvas');
const infoNode = document.getElementById('info');
const loadingNode = document.getElementById('loading');
2022-01-07 09:26:17 +00:00
const failMessageNode = document.getElementById('fail-message');
2022-01-06 21:35:02 +00:00
let render_data_query = `
WITH '${start_date}'::Date AS start_date
SELECT groupArray([d, n, fail]) FROM
(
SELECT n, check_start_time::Date - start_date AS d, max(test_status LIKE 'F%' OR test_status LIKE 'E%') AS fail
2023-04-29 21:48:45 +00:00
FROM checks
INNER JOIN
(
2023-04-29 21:48:45 +00:00
SELECT test_name, toUInt16(row_number() OVER (ORDER BY test_name)) AS n FROM
(
SELECT DISTINCT test_name
2023-04-29 21:48:45 +00:00
FROM checks
WHERE match(test_name, '^\\d+_') AND check_name ILIKE '%stateless%' AND check_start_time > now() - INTERVAL 1 DAY
)
) AS nums
USING (test_name)
WHERE
check_name ILIKE '%stateless%'
AND pull_request_number = 0
AND check_start_time >= start_date
GROUP BY d, n
ORDER BY d, n
)
FORMAT TSV`;
2022-01-06 21:35:02 +00:00
let test_names_query = `
2023-04-29 21:48:45 +00:00
SELECT test_name, toUInt16(row_number() OVER (ORDER BY test_name)) AS n FROM
2022-01-06 21:35:02 +00:00
(
SELECT DISTINCT test_name
2023-04-29 21:48:45 +00:00
FROM checks
2022-01-06 21:35:02 +00:00
WHERE match(test_name, '^\\d+_') AND check_name ILIKE '%stateless%' AND check_start_time > now() - INTERVAL 1 DAY
2022-01-07 09:26:17 +00:00
) FORMAT JSONCompact`;
2022-01-06 21:35:02 +00:00
2022-01-07 09:26:17 +00:00
(async () => {
try {
const [render_data, test_names_data] = await Promise.all([
loadDataByQuery(render_data_query),
loadDataByQuery(test_names_query),
]);
2023-04-29 21:48:45 +00:00
2022-01-07 09:26:17 +00:00
renderResponse(render_data);
saveTestNames(test_names_data);
} catch (e) {
alert(e);
showFailMessage();
} finally {
hideLoader();
}
})()
2022-01-06 21:35:02 +00:00
async function loadDataByQuery(query) {
const response = await fetch(
2022-04-03 02:52:54 +00:00
"https://play.clickhouse.com?user=play&add_http_cors_header=1",
{ method: "POST", body: query }
)
2022-01-06 21:35:02 +00:00
if (!response.ok) throw new Error(`Data download failed\nHTTP status ${response.status}`);
const json = await response.json();
return json;
}
2022-01-06 21:35:02 +00:00
function renderResponse(data) {
const last_pixel = data[data.length - 1];
2022-01-06 21:35:02 +00:00
canvasNode.width = last_pixel[0] + 1;
canvasNode.height = last_pixel[1] + 1;
2022-01-06 21:35:02 +00:00
document.getElementById('html').style.height = canvasNode.height + 10 + 'px';
document.body.style.height = canvasNode.height + 10 + 'px';
2022-01-06 21:35:02 +00:00
let ctx = canvasNode.getContext('2d');
let image = ctx.createImageData(canvasNode.width, canvasNode.height);
let {data: pixels} = image;
data.map(elem => {
let x = elem[0];
2022-01-06 21:35:02 +00:00
let y = canvasNode.height - elem[1];
2022-01-06 21:35:02 +00:00
pixels[(x + y * canvasNode.width) * 4 + 0] = elem[2] ? 255 : 0; // r
pixels[(x + y * canvasNode.width) * 4 + 1] = elem[2] ? 0 : 100; // g
pixels[(x + y * canvasNode.width) * 4 + 2] = 0; // b
pixels[(x + y * canvasNode.width) * 4 + 3] = 255; // a
});
ctx.putImageData(image, 0, 0);
}
2022-01-06 21:35:02 +00:00
function saveTestNames(data) {
let {data: test_names} = data;
2022-01-06 21:35:02 +00:00
canvasNode.addEventListener('mousemove', (event) => {
2022-01-07 11:59:07 +00:00
infoNode.style.display = 'block';
2022-01-06 21:35:02 +00:00
const x = event.layerX;
const y = event.layerY;
2022-01-06 21:35:02 +00:00
let date = new Date(start_date);
date.setDate(date.getDate() + x);
[date] = date.toISOString().split('T');
let [test] = test_names[canvasNode.height - y];
let {data: pixel} = canvasNode.getContext('2d').getImageData(x, y, 1, 1);
2022-01-07 11:59:07 +00:00
2022-01-06 21:35:02 +00:00
updateInfo(date, test, pixel);
})
}
2022-01-06 21:35:02 +00:00
function updateInfo(date, test, pixel) {
infoNode.innerText = `${date}, ${test}`;
infoNode.style.background = pixel[0] > 0 ? '#F00' : (pixel[3] > 0 ? '#006400' : '#000');
}
2022-01-06 21:35:02 +00:00
function hideLoader() {
loadingNode.style.display = 'none';
}
2022-01-07 09:26:17 +00:00
function showFailMessage() {
failMessageNode.style.display = 'block';
}
</script>
</body>
</html>