-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathstatuspage.html
157 lines (135 loc) · 4.66 KB
/
statuspage.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{.ProjectName}} Build status</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
</head>
<body>
<section class="section">
<div class="container">
<div class="box has-text-centered neelu-box">
<h1 class="title is-1">Build Status</h1>
<h3 class="subtitle is-5" id="lastBuildStart">{{.DateTimeString}}</h3>
<p class="subtitle"><span id="buildstatus">{{.BuildStatus}}</span>
<br><span id="coverage">{{.Coverage}}%</span>
</p>
</div>
<div class="columns is-centered">
<div class="column is-two-thirds">
<progress class="progress is-large" id="localprogressbar" value="{{.Coverage}}" max="100">
{{.Coverage}}%
</progress>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h1 class="title is-2 has-text-centered">Steps</h1>
{{range $1,$e := .Steps}}
<div class="columns is-centered">
<div class="column is-two-thirds">
<details id="{{$1}}" class="steps box neelu-box">
<summary>
<strong>{{.Command}}</strong>
<span style="float: right;">{{.Status}}</span>
</summary>
<pre class="my-4">{{.CommandOutput}}</pre>
<blockquote>
{{.Description}}
</blockquote>
</details>
</div>
</div>
{{end}}
</div>
</section>
</body>
<style>
.neelu-box {
border-style: solid;
border-width: 2px;
border-color: #4a4a4a;
border-radius: 0px;
}
.progress {
padding: 4px;
border-radius: 0px;
border-style: solid;
border-color: #4a4a4a;
border-width: 1px;
width: 100%;
}
</style>
<script>
const SUCCESS_MARK = "✓";
const FAILED_MARK = "✗"
const PENDING_MARK = "❍"
function formatAMPM(dateString) {
let date = new Date(dateString);
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var month = date.getMonth() + 1;
var day = date.getDate();
var year = date.getFullYear();
if (month <= 9) {
month = "0" + month.toString();
}
if (day <= 9) {
day = "0" + day.toString();
}
var strTime = year + "-" + month + "-" + day + " " + hours + ':' + minutes + ' ' + ampm;
return strTime;
}
var lastBuildStart = document.getElementById("lastBuildStart");
var buildstatus = document.getElementById("buildstatus");
var coverage = document.getElementById("coverage");
var localprogressbar = document.getElementById("localprogressbar");
var time = formatAMPM(lastBuildStart.innerHTML);
lastBuildStart.innerHTML = time;
var socket = new WebSocket("{{.WebSocketRoute}}");
socket.onmessage = function (message) {
if (message.data != null) {
var event = JSON.parse(message.data);
// console.log(message.data);
lastBuildStart.innerHTML = formatAMPM(event.lastBuildStart);
buildstatus.innerHTML = event.buildStatus;
coverage.innerHTML = event.coverage + "%";
localprogressbar.innerHTML = event.coverage + "%";
localprogressbar.setAttribute("value", event.coverage);
buildstatus.innerHTML = event.buildStatus;
// on build start flush everything steps
if (event.stepResults != null && event.stepResults.length <= 1) {
var allDetails = document.getElementsByClassName("steps");
for (const item of allDetails) {
item.getElementsByTagName("span")[0].innerHTML = PENDING_MARK;
item.getElementsByTagName("pre")[0].innerHTML = "";
item.getElementsByTagName("blockquote")[0].innerHTML = "";
}
}
event.stepResults.forEach((element, i) => {
var details = document.getElementById(i.toString());
var stepStatus = details.getElementsByTagName("span");
var commandOutput = details.getElementsByTagName("pre");
var description = details.getElementsByTagName("blockquote");
if (element.error === null) {
stepStatus[0].innerHTML = SUCCESS_MARK;
} else if (element.error != null) {
stepStatus[0].innerHTML = FAILED_MARK;
}
commandOutput[0].innerHTML = element.output;
description[0].innerHTML = element.description;
});
if (event.coverage == 100) {
buildstatus.innerHTML = "success"
}
}
}
</script>
</html>