-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (114 loc) · 3.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
border: 1px solid #000000;
}
.testdata {
display: grid;
grid-template-rows: auto;
font-family: monospace;
}
.sectionstart {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 9px;
transition: all 0.6s;
opacity: 0;
}
.sectionend {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
font-size: 9px;
transition: all 0.6s;
opacity: 0;
}
.suite {
background: linear-gradient(to right, #c5f79b 0%,#c5f79b 30%,#c5f79b 30%,#9ee067 30%,#9ee067 100%);
}
.test {
background: linear-gradient(to right, #aaf0ff 0%,#aaf0ff 20%,#aaf0ff 20%,#78d3e8 20%,#78d3e8 100%);
}
.keyword {
background: linear-gradient(to right, #d8d8d8 0%,#d8d8d8 15%,#d8d8d8 15%,#b7b7b7 15%,#b7b7b7 100%);
}
.failed {
background-color: red;
}
.show {
opacity: 1;
}
div {
text-align: center;
}
</style>
</head>
<body>
<div id='testdata' class='testdata'>
</div>
<script>
var HOST = location.origin.replace(/^http/, 'ws');
var ws = new WebSocket(HOST);
var el = document.getElementById('testdata');
var logs = {};
var freeLanes = [];
var columns = 0;
var maxrow = 1;
var rows = {};
ws.onmessage = function (event) {
var node = document.createElement("div");
var data = JSON.parse(event.data);
console.log(data);
if (data && data.length === 2) {
if (freeLanes.length > 0) {
console.log(freeLanes.length);
logs[data[0]] = freeLanes.shift();
} else {
console.log("FREE LANES ZERO");
el.style.gridTemplateRows += " 1fr";
columns++;
logs[data[0]] = columns;
rows[columns] = 0;
}
};
console.log(logs);
if (data && data.length > 2) {
if ("START" === data[2]) {
node.className = "sectionstart";
};
if ("END" === data[2]) {
node.className = "sectionend";
};
if ("CLOSE" === data[2]) {
freeLanes.push(logs[data[0]]);
};
if ("KEYWORD" === data[3]) {
node.className += " keyword";
};
if ("SUITE" === data[3]) {
node.className += " suite";
};
if ("TEST" === data[3]) {
node.className += " test";
};
if (data[4].indexOf("FAIL") !== -1) {
node.className += " failed";
};
var text = document.createTextNode(data[4]);
node.style.gridColumn = logs[data[0]];
var row = Math.max(rows[logs[data[0]]] + 1, maxrow);
maxrow = Math.max(maxrow, row);
rows[logs[data[0]]] = row;
node.style.gridRow = row;
node.appendChild(text);
setTimeout(function() {
node.className = node.className + " show";
}, 10);
el.appendChild(node);
window.scrollTo(0,document.body.scrollHeight);
};
};
</script>
</body>
</html>