Skip to content

Commit 33fa61b

Browse files
wuriyanto48wuriyanto48
committed
feat: ssl status using tables
1 parent 8009686 commit 33fa61b

File tree

2 files changed

+112
-42
lines changed

2 files changed

+112
-42
lines changed

‎dashboard/ui/src/pages/dashboard.js‎

Lines changed: 108 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -102,27 +102,31 @@ function Dashboard() {
102102
opacity: 1;
103103
}
104104
50% {
105-
opacity: 0.7;
105+
opacity: 0.2;
106106
}
107107
100% {
108108
opacity: 1;
109109
}
110110
}
111111
`;
112112

113-
const getStatusStyle = (status) => ({
114-
padding: '5px 10px',
115-
borderRadius: '4px',
116-
color: '#fff',
117-
fontWeight: 'bold',
118-
backgroundColor:
119-
status === 'UP' ? '#28a745' :
120-
status === 'DOWN' ? '#dc3545' :
121-
'#ffc107',
122-
whiteSpace: 'nowrap',
123-
animation: 'pulse 1s infinite',
124-
flexShrink: 0,
125-
});
113+
const getStatusStyle = (status) => {
114+
const randomDuration = Math.random() * 0.2 + 0.7;
115+
116+
return {
117+
padding: '5px 10px',
118+
borderRadius: '4px',
119+
color: '#000',
120+
fontWeight: 'bold',
121+
backgroundColor:
122+
status === 'UP' ? '#28a745' :
123+
status === 'DOWN' ? '#dc3545' :
124+
'#ffc107',
125+
whiteSpace: 'nowrap',
126+
animation: `pulse ${randomDuration.toFixed(2)}s infinite`,
127+
flexShrink: 0,
128+
};
129+
};
126130

127131

128132

@@ -135,20 +139,20 @@ function Dashboard() {
135139
});
136140

137141
const getTagStyle = () => ({
138-
backgroundColor: '#fff',
139-
color: '#333',
140-
borderRadius: '12px',
141-
padding: '3px 8px',
142+
backgroundColor: 'rgba(255, 255, 255, 0.08)',
143+
color: '#ccc',
144+
borderRadius: '8px',
145+
padding: '2px 6px',
142146
fontSize: '12px',
143-
border: '1px solid #ddd',
144-
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
147+
border: '1px solid rgba(255, 255, 255, 0.15)',
148+
fontWeight: '500',
145149
cursor: 'pointer',
146150
});
147151

148152
const getSeverityColor = (line) => {
149153
if (line.includes('Warning')) return '#967205';
150154
if (line.includes('Critical') || line.includes('Danger')) return '#dc3545';
151-
if (line.includes('Info')) return '#17a2b8';
155+
if (line.includes('Info')) return '#04a0bf';
152156
return '#212529';
153157
};
154158

@@ -169,7 +173,7 @@ function Dashboard() {
169173
});
170174

171175
return (
172-
<div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', backgroundColor: '#f4f4f4' }}>
176+
<div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', backgroundColor: '#212121', color: '#f5f5f5', minHeight: '100vh' }}>
173177
<div style={{
174178
display: 'flex',
175179
justifyContent: 'space-between',
@@ -183,20 +187,21 @@ function Dashboard() {
183187
title='Tob the Bot (https://github.com/telkomdev/tob)'
184188
alt="Logo"
185189
style={{
186-
width: '100px',
190+
width: '90px',
187191
height: 'auto',
192+
borderRadius: '50%',
188193
}}
189194
/>
190195
</div>
191196
<div style={{ flex: '1 1 auto', textAlign: 'center' }}>
192-
<h1>{dashboardTitle}</h1>
197+
<h2>{dashboardTitle}</h2>
193198
</div>
194199
<div style={{ flex: '1 1 auto', textAlign: 'right' }}>
195200
<button
196201
onClick={logout}
197202
style={{
198203
padding: '10px 20px',
199-
backgroundColor: '#007bff',
204+
backgroundColor: '#04a0bf',
200205
color: '#fff',
201206
border: 'none',
202207
borderRadius: '5px',
@@ -221,8 +226,10 @@ function Dashboard() {
221226
maxWidth: '600px',
222227
padding: '10px',
223228
borderRadius: '8px',
224-
border: '1px solid #ddd',
225-
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
229+
border: '1px solid #444',
230+
backgroundColor: '#1e1e1e',
231+
color: '#f5f5f5',
232+
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.6)',
226233
margin: '0 auto',
227234
}}
228235
/>
@@ -234,14 +241,14 @@ function Dashboard() {
234241
<ul style={{ maxWidth: '800px', margin: '0 auto', padding: '0', listStyle: 'none' }}>
235242
{filteredServices.map((service, index) => (
236243
<li key={index} style={{
237-
backgroundColor: '#fff',
244+
backgroundColor: '#353535',
238245
margin: '10px 0',
239246
padding: '15px',
240247
borderRadius: '8px',
241248
display: 'flex',
242249
flexDirection: 'column',
243250
alignItems: 'flex-start',
244-
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
251+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.6)',
245252
}}>
246253

247254
<style>{keyframes}</style>
@@ -275,12 +282,72 @@ function Dashboard() {
275282
</div>
276283

277284
{service.messageDetails && service.kind === 'sslstatus' ? (
278-
<div style={{ fontSize: '14px', marginBottom: '10px' }}>
279-
{service.messageDetails.split('\n').map((line, index) => (
280-
<div key={index} style={{ color: getSeverityColor(line)}}>
281-
{line}
282-
</div>
283-
))}
285+
<div style={{ fontSize: '11px', marginBottom: '10px' }}>
286+
<table style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #ccc' }}>
287+
<thead>
288+
<tr>
289+
<th style={{ border: '1px solid #ccc', padding: '8px', textAlign: 'left' }}>Severity</th>
290+
<th style={{ border: '1px solid #ccc', padding: '8px', textAlign: 'left' }}>Domain</th>
291+
<th style={{ border: '1px solid #ccc', padding: '8px', textAlign: 'left' }}>Message</th>
292+
<th style={{ border: '1px solid #ccc', padding: '8px', textAlign: 'left' }}>Expiration Date</th>
293+
</tr>
294+
</thead>
295+
<tbody>
296+
{service.messageDetails.split('\n').map((line, index) => {
297+
const parts = line.split('|').map(part => part.trim());
298+
299+
if (parts.length >= 4) {
300+
const status = parts[0];
301+
const domain = parts[1];
302+
const remainingTime = parts[2];
303+
const detail = parts[3];
304+
305+
// color by status
306+
let rowColor = '';
307+
if (status.toLowerCase().includes('danger')) {
308+
rowColor = '#dc3545'; // red
309+
} else if (status.toLowerCase().includes('warning')) {
310+
rowColor = '#ffc107'; // yellow
311+
} else if (status.toLowerCase().includes('info')) {
312+
rowColor = '#28a745'; // green
313+
}
314+
315+
return (
316+
<tr key={index} style={{ color: rowColor }}>
317+
<td style={{ border: '1px solid #ccc', padding: '8px' }}>{status}</td>
318+
<td style={{ border: '1px solid #ccc', padding: '8px' }}>{domain}</td>
319+
<td style={{ border: '1px solid #ccc', padding: '8px' }}>{remainingTime}</td>
320+
<td style={{ border: '1px solid #ccc', padding: '8px' }}>{detail}</td>
321+
</tr>
322+
);
323+
} else if (parts.length === 3) {
324+
// handle when there is no date or time
325+
const status = parts[0];
326+
const domain = parts[1];
327+
const detail = parts[2];
328+
329+
let rowColor = '';
330+
if (status.toLowerCase().includes('danger')) {
331+
rowColor = '#dc3545';
332+
} else if (status.toLowerCase().includes('warning')) {
333+
rowColor = '#ffc107';
334+
} else if (status.toLowerCase().includes('info')) {
335+
rowColor = '#28a745';
336+
}
337+
338+
return (
339+
<tr key={index} style={{ color: rowColor }}>
340+
<td style={{ border: '1px solid #ccc', padding: '8px' }}>{status}</td>
341+
<td style={{ border: '1px solid #ccc', padding: '8px' }}>{domain}</td>
342+
<td style={{ border: '1px solid #ccc', padding: '8px' }}></td> {}
343+
<td style={{ border: '1px solid #ccc', padding: '8px' }}>{detail}</td>
344+
</tr>
345+
);
346+
}
347+
return null;
348+
})}
349+
</tbody>
350+
</table>
284351
</div>
285352
)
286353
:
@@ -304,8 +371,11 @@ function Dashboard() {
304371
</span>
305372
)}
306373

307-
<span style={{ fontSize: '13px', color: '#555' }}>
308-
<span style={{ color: '#593f03' }}>Last checked: {service.latestCheckTime}</span>
374+
<span style={{ fontSize: '12px', color: '#aaa' }}>
375+
<span style={{ color: '#d4af37', fontWeight: 500 }}>
376+
Last checked:
377+
</span>{' '}
378+
{service.latestCheckTime}
309379
</span>
310380

311381
{service.tags && (
@@ -315,7 +385,7 @@ function Dashboard() {
315385
key={tagIndex}
316386
style={{
317387
...getTagStyle(),
318-
backgroundColor: selectedTag === tag ? '#007bff' : '#fff',
388+
backgroundColor: selectedTag === tag ? '#04a0bf' : '#fff',
319389
color: selectedTag === tag ? '#fff' : '#333',
320390
}}
321391
onClick={() => handleTagClick(tag)}>

‎services/sslstatus/sslcheck.go‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ func checkSSLExpiry(domain string, logger *log.Logger) string {
3535
// checking whether the certificate matches the domain being checked
3636
if err := cert.VerifyHostname(cleanDomain); err != nil {
3737
status = "Danger"
38-
return fmt.Sprintf("%s: invalid SSL: cert for %s does not match (%s)\n",
38+
return fmt.Sprintf("%s | %s | does not match (%s) |\n",
3939
status,
4040
cleanDomain,
4141
cert.Subject.CommonName)
@@ -49,7 +49,7 @@ func checkSSLExpiry(domain string, logger *log.Logger) string {
4949

5050
if cert.NotAfter.Before(time.Now()) {
5151
status = "Danger"
52-
return fmt.Sprintf("%s: SSL %s expired on %s\n",
52+
return fmt.Sprintf("%s | %s | expired on %s |\n",
5353
status,
5454
cleanDomain,
5555
expiredDate)
@@ -65,15 +65,15 @@ func checkSSLExpiry(domain string, logger *log.Logger) string {
6565
status = "Warning"
6666
}
6767

68-
return fmt.Sprintf("%s: SSL %s will expire in %d days (%s)\n",
68+
return fmt.Sprintf("%s | %s | expire in %d days | (%s)\n",
6969
status,
7070
cleanDomain,
7171
daysLeft,
7272
expiredDate)
7373
}
7474

7575
status = "Danger"
76-
return fmt.Sprintf("%s: failed to perform a TLS handshake for the domain: %s\n",
76+
return fmt.Sprintf("%s | %s | failed to perform a TLS handshake |\n",
7777
status,
7878
cleanDomain)
7979
}

0 commit comments

Comments
 (0)