Skip to content

Commit d87c918

Browse files
mgaudetmgaudet
committed
Add SpiderMonkey Bug Dashboard
Creates a live dashboard that queries the Bugzilla API to display key metrics for the SpiderMonkey project. Features: - High severity bugs (S1 & S2) displayed first for immediate visibility - Recently opened bugs (last 30 days) - Recently resolved bugs (last 30 days) - All assigned but still open bugs (limited to 30 for performance) - Celebration emoji when no bugs found in a category - Compact layout optimized for quick scanning
1 parent 1d42dcd commit d87c918

3 files changed

Lines changed: 815 additions & 0 deletions

File tree

‎dashboard/dashboard.css‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
/* SpiderMonkey Dashboard Styles */
2+
3+
/* Import site fonts and variables */
4+
@font-face {
5+
font-family: ZillaSlab-Regular;
6+
src: url("/assets/fonts/ZillaSlab-Regular.ttf");
7+
}
8+
9+
@font-face {
10+
font-family: PT-Sans-S55;
11+
src: url("/assets/fonts/pt-sans/PTS55F-webfont.woff");
12+
}
13+
14+
/* Override styles to match site theme */
15+
.main-content {
16+
font-family: PT-Sans-S55;
17+
font-size: 1rem;
18+
}
19+
20+
h1 {
21+
font-family: ZillaSlab-Regular;
22+
font-size: 2.5rem;
23+
margin-bottom: 1.5rem;
24+
}
25+
26+
h2 {
27+
background-color: var(--color-primary);
28+
color: var(--color-bg);
29+
display: inline-block;
30+
font-size: 1.5em;
31+
padding: 0 10px;
32+
margin-top: 2rem;
33+
margin-bottom: 1rem;
34+
font-family: ZillaSlab-Regular;
35+
}
36+
37+
h2 a {
38+
color: var(--color-bg);
39+
text-decoration: none;
40+
}
41+
42+
h2 a:hover {
43+
color: var(--color-bg);
44+
background-color: transparent;
45+
text-decoration: underline;
46+
}
47+
48+
/* Quick Links Section */
49+
.quick-links {
50+
background-color: var(--color-dim-bg);
51+
padding: 12px 15px;
52+
border-radius: 8px;
53+
margin-bottom: 20px;
54+
display: flex;
55+
gap: 40px;
56+
flex-wrap: wrap;
57+
}
58+
59+
.link-group {
60+
flex: 1;
61+
min-width: 250px;
62+
}
63+
64+
.link-group strong {
65+
display: block;
66+
margin-bottom: 8px;
67+
color: var(--color-primary);
68+
font-family: ZillaSlab-Regular;
69+
font-size: 1rem;
70+
}
71+
72+
.link-group ul {
73+
list-style-type: none;
74+
padding-left: 0;
75+
margin: 0;
76+
}
77+
78+
.link-group li {
79+
margin-bottom: 4px;
80+
}
81+
82+
.link-group a {
83+
color: var(--color-primary);
84+
font-weight: 550;
85+
padding: 2px;
86+
font-size: 0.85rem;
87+
}
88+
89+
.link-group a:hover {
90+
color: var(--color-bg);
91+
background-color: var(--color-primary);
92+
text-decoration: none;
93+
}
94+
95+
@media (max-width: 768px) {
96+
.quick-links {
97+
flex-direction: column;
98+
gap: 20px;
99+
}
100+
}
101+
102+
/* Bug Tables */
103+
.bug-table-container {
104+
margin-bottom: 20px;
105+
min-height: auto;
106+
}
107+
108+
.bug-table-container p {
109+
margin: 10px 0;
110+
color: var(--color-dim-primary);
111+
}
112+
113+
.bug-table {
114+
width: 100%;
115+
border-collapse: collapse;
116+
font-family: PT-Sans-S55;
117+
font-size: 0.85rem;
118+
}
119+
120+
.bug-table thead {
121+
background-color: var(--color-primary);
122+
}
123+
124+
.bug-table thead th {
125+
color: var(--color-bg);
126+
font-family: ZillaSlab-Regular;
127+
font-weight: 550;
128+
font-size: 0.9rem;
129+
}
130+
131+
.bug-table thead th.sortable {
132+
cursor: pointer;
133+
user-select: none;
134+
}
135+
136+
.bug-table thead th.sortable:hover {
137+
background-color: rgba(0, 0, 0, 0.1);
138+
}
139+
140+
.bug-table th,
141+
.bug-table td {
142+
padding: 8px;
143+
text-align: left;
144+
border-bottom: 1px solid var(--color-primary);
145+
}
146+
147+
.bug-table tbody tr {
148+
cursor: pointer;
149+
}
150+
151+
.bug-table tbody tr:hover {
152+
background-color: var(--color-dim-bg);
153+
}
154+
155+
.bug-table a {
156+
color: var(--color-primary);
157+
font-weight: 550;
158+
padding: 2px;
159+
}
160+
161+
.bug-table a:hover {
162+
color: var(--color-bg);
163+
background-color: var(--color-primary);
164+
text-decoration: none;
165+
}
166+
167+
.summary {
168+
max-width: 500px;
169+
}
170+
171+
/* Priority Styling - removed coloring */
172+
173+
/* Severity Styling */
174+
.severity-s1 {
175+
color: #ff4444;
176+
font-weight: bold;
177+
}
178+
179+
.severity-s2 {
180+
color: #ff4444;
181+
font-weight: bold;
182+
}
183+
184+
.severity-s3 {
185+
color: var(--color-primary);
186+
}
187+
188+
.severity-s4 {
189+
color: var(--color-dim-primary);
190+
}
191+
192+
/* Loading and Error States */
193+
.loading {
194+
text-align: center;
195+
padding: 40px;
196+
color: var(--color-dim-primary);
197+
font-style: italic;
198+
font-family: PT-Sans-S55;
199+
}
200+
201+
.error {
202+
color: #ff4444;
203+
text-align: center;
204+
padding: 20px;
205+
background-color: rgba(255, 68, 68, 0.1);
206+
border-radius: 4px;
207+
font-family: PT-Sans-S55;
208+
}
209+
210+
/* Last Updated */
211+
.last-updated {
212+
text-align: right;
213+
color: var(--color-dim-primary);
214+
font-size: 0.85rem;
215+
margin-top: 20px;
216+
font-style: italic;
217+
font-family: PT-Sans-S55;
218+
}
219+
220+
/* View More Button */
221+
.view-more-container {
222+
text-align: center;
223+
margin-top: 10px;
224+
}
225+
226+
.view-more-button {
227+
background-color: var(--color-primary);
228+
color: var(--color-bg);
229+
border: none;
230+
padding: 10px 20px;
231+
font-family: ZillaSlab-Regular;
232+
font-size: 1rem;
233+
cursor: pointer;
234+
border-radius: 4px;
235+
transition: background-color 0.2s;
236+
}
237+
238+
.view-more-button:hover {
239+
background-color: var(--color-dim-primary);
240+
}
241+
242+
/* Responsive Design */
243+
@media (max-width: 768px) {
244+
.bug-table {
245+
font-size: 14px;
246+
}
247+
248+
.bug-table th,
249+
.bug-table td {
250+
padding: 8px;
251+
}
252+
253+
.summary {
254+
max-width: 300px;
255+
}
256+
}

0 commit comments

Comments
 (0)