Skip to content
This repository was archived by the owner on Oct 26, 2022. It is now read-only.

Commit 29edcb5

Browse files
the-ericwang35the-ericwang35
authored
Make style changes to summary page (#53)
1 parent 7216ea7 commit 29edcb5

File tree

4 files changed

+142
-54
lines changed

4 files changed

+142
-54
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,6 @@
1717
# Test binary, built with `go test -c`
1818
*.test
1919

20+
# Static assets
21+
/static/fonts
22+
/static/vendor

‎cmd/mock_server.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ func startStandaloneServer() {
9090

9191
// writeSummaryPage creates summary.html from the results and the template HTML.
9292
func writeSummaryPage(results []*cloudtrace.Span) {
93-
outputFile, err := os.Create("summary.html")
93+
outputFile, err := os.Create("../static/summary.html")
9494
if err != nil {
9595
panic(err)
9696
}

‎static/css/main.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body, html {
8+
height: 100%;
9+
font-family: sans-serif;
10+
}
11+
12+
.container-summary {
13+
width: 100%;
14+
min-height: 100vh;
15+
background: #fff;
16+
17+
display: -webkit-box;
18+
display: -webkit-flex;
19+
display: -moz-box;
20+
display: -ms-flexbox;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
flex-wrap: wrap;
25+
padding: 33px 30px;
26+
}
27+
28+
.summary {
29+
background-color: #fff;
30+
border-radius: 10px;
31+
overflow: hidden;
32+
position: relative;
33+
padding-top: 60px;
34+
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
35+
-moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
36+
-webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
37+
-o-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
38+
-ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
39+
}
40+
41+
table {
42+
width: 100%;
43+
table-layout: fixed;
44+
border-collapse: collapse;
45+
}
46+
47+
th, td {
48+
font-weight: unset;
49+
padding-right: 10px;
50+
}
51+
52+
.cell {
53+
padding-left: 40px;
54+
padding-right: 40px;
55+
word-wrap: break-word;
56+
}
57+
58+
.summary-head th {
59+
padding-top: 18px;
60+
padding-bottom: 18px;
61+
}
62+
63+
.summary-body td {
64+
padding-top: 16px;
65+
padding-bottom: 16px;
66+
}
67+
68+
.summary-head {
69+
text-align: left;
70+
position: absolute;
71+
width: 100%;
72+
top: 0;
73+
left: 0;
74+
}
75+
76+
.summary-body {
77+
max-height: 585px;
78+
overflow: auto;
79+
}
80+
81+
.summary th {
82+
font-family: Verdana, sans-serif;
83+
font-size: 18px;
84+
color: #fff;
85+
line-height: 1.4;
86+
background-color: #6c7ae0;
87+
}
88+
89+
.summary td {
90+
font-family: Verdana, sans-serif;
91+
font-size: 14px;
92+
color: #808080;
93+
line-height: 1.4;
94+
}

‎static/summary_template.html‎

100644100755
Lines changed: 44 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,44 @@
1-
<!DOCTYPE html>
2-
<title>Mock Server Summary</title>
3-
4-
<html>
5-
<head>
6-
<style>
7-
#summary {
8-
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
9-
border-collapse: collapse;
10-
width: 100%;
11-
}
12-
13-
#summary td, #summary th {
14-
border: 1px solid #ddd;
15-
padding: 8px;
16-
}
17-
18-
#summary th {
19-
padding-top: 12px;
20-
padding-bottom: 12px;
21-
text-align: left;
22-
background-color: #2DFEE9;
23-
color: black;
24-
}
25-
</style>
26-
</head>
27-
<body>
28-
29-
<h1 style="text-align:center;">Trace Summary</h1>
30-
31-
<table id="summary">
32-
<tr>
33-
<th>Span Name</th>
34-
<th>Display Name</th>
35-
<th>Status</th>
36-
</tr>
37-
38-
{{ range $index, $span := . }}
39-
{{ if eq $span.Status.Message "OK" }}
40-
<tr>
41-
{{ else }}
42-
<tr style="background-color: indianred">
43-
{{ end }}
44-
<td>{{ $span.Name }}</td>
45-
<td>{{ $span.DisplayName.Value }}</td>
46-
<td>{{ $span.Status.Message }}</td>
47-
<tr>
48-
{{ end }}
49-
</table>
50-
51-
</body>
52-
</html>
53-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Mock Server Summary</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" type="text/css" href="css/main.css">
8+
</head>
9+
<body>
10+
<div class="container-summary">
11+
<div class="summary">
12+
<div class="summary-head">
13+
<table>
14+
<thead>
15+
<tr class="head">
16+
<th class="cell">Span Name</th>
17+
<th class="cell">Display Name</th>
18+
<th class="cell">Status</th>
19+
</tr>
20+
</thead>
21+
</table>
22+
</div>
23+
24+
<div class="summary-body">
25+
<table>
26+
<tbody>
27+
{{ range $index, $span := . }}
28+
{{ if eq $span.Status.Message "OK" }}
29+
<tr class="body">
30+
{{ else }}
31+
<tr class="body" style="border: solid 2px red;">
32+
{{ end }}
33+
<td class="cell">{{ $span.Name }}</td>
34+
<td class="cell">{{ $span.DisplayName.Value }}</td>
35+
<td class="cell">{{ $span.Status.Message }}</td>
36+
</tr>
37+
{{ end }}
38+
</tbody>
39+
</table>
40+
</div>
41+
</div>
42+
</div>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)