Skip to content

Commit 4087530

Browse files
dmlemeshkodmlemeshko
committed
[scout] embed the styles directly in the HTML instead of CDN link
1 parent 43f6448 commit 4087530

1 file changed

Lines changed: 165 additions & 13 deletions

File tree

  • src/platform/packages/private/kbn-scout-reporting/src/reporting/report/failed_test

‎src/platform/packages/private/kbn-scout-reporting/src/reporting/report/failed_test/html.ts‎

Lines changed: 165 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -44,62 +44,192 @@ export const buildFailureHtml = (testFailure: TestFailure): string => {
4444
<head>
4545
<meta charset="utf-8" />
4646
<meta name="viewport" content="width=device-width, initial-scale=1" />
47-
<link
48-
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
49-
rel="stylesheet"
50-
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
51-
crossorigin="anonymous"
52-
/>
5347
<style>
48+
/* Reset and base styles */
49+
* {
50+
box-sizing: border-box;
51+
}
52+
5453
body {
55-
font-family: Arial, sans-serif;
54+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
5655
font-size: 14px;
5756
line-height: 1.6;
5857
margin: 0;
5958
padding: 0;
6059
background-color: #f8f9fa;
60+
color: #212529;
61+
}
62+
63+
/* Container */
64+
.container {
65+
width: 100%;
66+
max-width: 1200px;
67+
margin: 0 auto;
68+
padding: 0 15px;
6169
}
6270
71+
.my-5 {
72+
margin-top: 3rem;
73+
margin-bottom: 3rem;
74+
}
75+
76+
/* Typography */
6377
h4, h5 {
6478
margin-top: 20px;
6579
margin-bottom: 10px;
80+
font-weight: 600;
81+
line-height: 1.2;
82+
}
83+
84+
h4 {
85+
font-size: 1.5rem;
86+
}
87+
88+
h5 {
89+
font-size: 1.25rem;
6690
}
6791
6892
hr {
6993
margin: 20px 0;
94+
border: 0;
95+
border-top: 1px solid #dee2e6;
96+
}
97+
98+
strong {
99+
font-weight: 600;
70100
}
71101
102+
em {
103+
font-style: italic;
104+
}
105+
106+
/* Tables */
72107
.table-details {
73108
width: 100%;
74109
margin-top: 15px;
75-
border: 1px solid #dee2e6;
110+
border-collapse: collapse;
111+
background-color: #fff;
76112
}
77113
78114
.table-details td {
79-
padding: 8px;
115+
padding: 12px;
80116
border: 1px solid #dee2e6;
117+
vertical-align: top;
81118
}
82119
83-
.plugin-info {
84-
margin-top: 10px;
120+
.table-details tr td:first-child {
121+
background-color: #f8f9fa;
122+
width: 200px;
123+
font-weight: 600;
85124
}
86125
126+
/* Pre and code */
87127
pre {
128+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
88129
font-size: 0.9em;
89130
background-color: #f8f9fa;
90-
padding: 10px;
131+
padding: 12px;
91132
border-radius: 5px;
92133
border: 1px solid #dee2e6;
93134
overflow-x: auto;
135+
white-space: pre-wrap;
136+
word-wrap: break-word;
137+
margin: 10px 0;
94138
}
95139
140+
/* Details and summary */
141+
details {
142+
margin: 10px 0;
143+
padding: 10px;
144+
border: 1px solid #dee2e6;
145+
border-radius: 5px;
146+
background-color: #fff;
147+
}
148+
149+
summary {
150+
cursor: pointer;
151+
font-weight: 600;
152+
padding: 5px;
153+
user-select: none;
154+
}
155+
156+
summary:hover {
157+
background-color: #f8f9fa;
158+
}
159+
160+
/* Badge */
161+
.badge {
162+
display: inline-block;
163+
padding: 0.35em 0.65em;
164+
font-size: 0.75em;
165+
font-weight: 600;
166+
line-height: 1;
167+
color: #fff;
168+
text-align: center;
169+
white-space: nowrap;
170+
vertical-align: baseline;
171+
border-radius: 0.375rem;
172+
}
173+
174+
.rounded-pill {
175+
border-radius: 50rem;
176+
}
177+
178+
.bg-danger {
179+
background-color: #dc3545;
180+
}
181+
182+
/* Links */
183+
a {
184+
color: #0d6efd;
185+
text-decoration: none;
186+
}
187+
188+
a:hover {
189+
color: #0a58ca;
190+
text-decoration: underline;
191+
}
192+
193+
/* Images */
194+
img {
195+
max-width: 100%;
196+
height: auto;
197+
}
198+
199+
.img-fluid {
200+
max-width: 100%;
201+
height: auto;
202+
}
203+
204+
.img-thumbnail {
205+
padding: 0.25rem;
206+
background-color: #fff;
207+
border: 1px solid #dee2e6;
208+
border-radius: 0.375rem;
209+
}
96210
97211
img.screenshot {
98212
cursor: pointer;
99213
margin: 5px 0;
214+
transition: transform 0.2s;
215+
}
216+
217+
img.screenshot:hover {
218+
transform: scale(1.02);
100219
}
220+
221+
.screenshotContainer {
222+
margin: 15px 0;
223+
padding: 10px;
224+
background-color: #fff;
225+
border: 1px solid #dee2e6;
226+
border-radius: 5px;
227+
}
228+
101229
.screenshotContainer:not(.expanded) img.screenshot {
102230
height: 200px;
231+
width: auto;
232+
object-fit: contain;
103233
}
104234
105235
.screenshotContainer:not(.fs) img.screenshot.fs,
@@ -114,10 +244,32 @@ export const buildFailureHtml = (testFailure: TestFailure): string => {
114244
border: none;
115245
margin: 0 0 0 5px;
116246
vertical-align: top;
247+
cursor: pointer;
248+
padding: 5px;
249+
font-size: 1.2em;
250+
}
251+
252+
.screenshotContainer .toggleFs:hover {
253+
opacity: 0.7;
117254
}
118255
256+
/* Sections */
119257
.section {
120-
margin-bottom: 20px;
258+
margin-bottom: 30px;
259+
background-color: #fff;
260+
padding: 20px;
261+
border-radius: 5px;
262+
border: 1px solid #dee2e6;
263+
}
264+
265+
/* Plugin info */
266+
.plugin-info {
267+
margin-top: 10px;
268+
}
269+
270+
/* Utility classes */
271+
main {
272+
display: block;
121273
}
122274
</style>
123275
<title>Scout Test Failure Report</title>

0 commit comments

Comments
 (0)