nezumi/uptime-monitoring
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/uptime-monitoring.git synced 2026-09-22 13:48:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve the ui for incidents page

Browse Source
This commit is contained in:
nezumi
2026-08-31 19:12:53 +07:00
parent e8341da9a6
commit a4955286c7
3 changed files with 245 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/components/IncidentTimeline.tsx
+29 -14
View File
@@ -4,19 +4,34 @@ const timestamp = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', time
export function IncidentTimeline({ updates }: { updates: PublicIncidentUpdate[] }) { export function IncidentTimeline({ updates }: { updates: PublicIncidentUpdate[] }) {
return ( return (
<ol className="incident-timeline"> <section className="incident-timeline-section" aria-labelledby="incident-updates-title">
{updates.map((update, index) => ( <header className="incident-timeline-heading">
<li key={`${update.createdAt}-${index}`}> <div>
<span className="incident-timeline-dot" aria-hidden="true" /> <p className="overline">Activity</p>
<div> <h2 id="incident-updates-title">Incident updates</h2>
<header> </div>
<strong>{update.status}</strong> <span>
<time dateTime={update.createdAt}>{timestamp.format(new Date(update.createdAt))}</time> {updates.length} {updates.length === 1 ? 'update' : 'updates'}
</header> </span>
<p>{update.body}</p> </header>
</div> {updates.length > 0 ? (
</li> <ol className="incident-timeline">
))} {updates.map((update, index) => (
</ol> <li key={`${update.createdAt}-${index}`}>
<span className="incident-timeline-dot" aria-hidden="true" />
<div className="incident-timeline-entry">
<header>
<strong>{update.status}</strong>
<time dateTime={update.createdAt}>{timestamp.format(new Date(update.createdAt))}</time>
</header>
<p>{update.body}</p>
</div>
</li>
))}
</ol>
) : (
<p className="incident-timeline-empty">No updates have been posted for this incident.</p>
)}
</section>
); );
} }
src/client/pages/IncidentDetailPage.tsx
+25 -11
View File
@@ -23,33 +23,47 @@ export function IncidentDetailPage({ id }: { id: number }) {
</header> </header>
<main className="status-main incident-detail-page"> <main className="status-main incident-detail-page">
<button className="incident-back" type="button" onClick={() => navigate('/')}> <button className="incident-back" type="button" onClick={() => navigate('/')}>
<ArrowLeft /> All service status <ArrowLeft aria-hidden="true" /> All service status
</button> </button>
{query.isPending ? ( {query.isPending ? (
<p className="status-loading" aria-busy="true"> <p className="status-loading" aria-busy="true">
Loading incident… Loading incident…
</p> </p>
) : query.isError || !query.data ? ( ) : query.isError || !query.data ? (
<section className="incident-detail-card"> <section className="incident-detail-card incident-detail-error">
<TriangleAlert /> <TriangleAlert aria-hidden="true" />
<h1>Incident not found</h1> <h1>Incident not found</h1>
<p>{query.error?.message}</p> <p>{query.error?.message ?? 'The requested incident could not be loaded.'}</p>
</section> </section>
) : ( ) : (
<article className="incident-detail-card"> <article className="incident-detail-card">
<header className="incident-detail-header"> <header className="incident-detail-header">
<div> <div className="incident-detail-title">
<p className="overline">Incident report</p> <p className="overline">Incident report</p>
<h1>{query.data.incident.title}</h1> <h1>{query.data.incident.title}</h1>
</div> </div>
<Badge variant={query.data.incident.status === 'resolved' ? 'online' : 'offline'}>{query.data.incident.status}</Badge> <Badge variant={query.data.incident.status === 'resolved' ? 'online' : 'offline'}>{query.data.incident.status}</Badge>
</header> </header>
<p className="incident-detail-meta">Started {dateTime.format(new Date(query.data.incident.startedAt))}</p> <dl className="incident-detail-summary">
{query.data.incident.services.length > 0 && ( <div>
<p className="incident-detail-services"> <dt>Started</dt>
<strong>Affected services:</strong> {query.data.incident.services.map((service) => service.name).join(', ')} <dd>
</p> <time dateTime={query.data.incident.startedAt}>{dateTime.format(new Date(query.data.incident.startedAt))}</time>
)} </dd>
</div>
<div>
<dt>Impact</dt>
<dd className="incident-detail-impact">{query.data.incident.impact}</dd>
</div>
<div>
<dt>Affected services</dt>
<dd>
{query.data.incident.services.length > 0
? query.data.incident.services.map((service) => service.name).join(', ')
: 'General service incident'}
</dd>
</div>
</dl>
<IncidentTimeline updates={query.data.incident.updates ?? []} /> <IncidentTimeline updates={query.data.incident.updates ?? []} />
</article> </article>
)} )}
src/client/styles.css
+191 -31
View File
@@ -3545,79 +3545,205 @@ button {
inset 0 1px rgb(255 255 255 / 0.28); inset 0 1px rgb(255 255 255 / 0.28);
} }
.incident-detail-card { .incident-detail-card {
margin-top: 32px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--card);
overflow: hidden; overflow: hidden;
padding: 22px 24px; margin-top: 26px;
padding: 30px 32px 8px;
border: 1px solid #e3e3e3;
border-radius: 10px;
background: var(--card);
box-shadow: 0 12px 36px rgb(0 0 0 / 0.035);
}
.incident-detail-page {
padding-top: 34px;
} }
.incident-back { .incident-back {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 7px;
margin-top: 28px; padding: 0;
border: 0; border: 0;
font-size: 13px;
background: transparent; background: transparent;
color: var(--muted-foreground); color: var(--muted);
cursor: pointer; cursor: pointer;
} }
.incident-back svg { .incident-back:hover {
width: 16px; color: var(--ink);
} }
.incident-detail-header, .incident-back svg {
.incident-timeline header { width: 15px;
height: 15px;
}
.incident-detail-header {
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 18px; gap: 18px;
} }
.incident-detail-header h1 { .incident-detail-title {
margin-top: 6px; min-width: 0;
font-size: clamp(28px, 5vw, 46px);
} }
.incident-detail-meta, .incident-detail-title .overline {
.incident-detail-services { margin-bottom: 7px;
color: var(--muted-foreground); }
.incident-detail-header h1 {
margin: 0;
font-size: clamp(24px, 3vw, 30px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.65px;
}
.incident-detail-header > [data-slot='badge'] {
flex: 0 0 auto;
text-transform: capitalize;
}
.incident-detail-summary {
display: grid;
grid-template-columns: minmax(190px, 1.15fr) minmax(100px, 0.6fr) minmax(190px, 1fr);
margin: 28px -32px 0;
padding: 0 32px;
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
background: #fcfcfc;
}
.incident-detail-summary > div {
min-width: 0;
padding: 17px 20px 18px 0;
}
.incident-detail-summary > div + div {
padding-left: 20px;
border-left: 1px solid #e9e9e9;
}
.incident-detail-summary dt {
margin-bottom: 6px;
font:
500 10px/1.35 'IBM Plex Mono',
monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--faint);
}
.incident-detail-summary dd {
margin: 0;
font-size: 13px;
font-weight: 500;
line-height: 1.45;
color: #4f4f4f;
}
.incident-detail-impact {
text-transform: capitalize;
}
.incident-timeline-section {
padding-top: 27px;
}
.incident-timeline-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
}
.incident-timeline-heading .overline {
margin-bottom: 4px;
}
.incident-timeline-heading h2 {
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.2px;
}
.incident-timeline-heading > span {
font-size: 11px;
color: var(--faint);
} }
.incident-timeline { .incident-timeline {
display: grid; display: grid;
gap: 0; gap: 0;
margin-top: 30px; margin: 22px 0 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.incident-timeline li { .incident-timeline li {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: 20px 1fr; grid-template-columns: 14px minmax(0, 1fr);
gap: 14px; gap: 13px;
padding-bottom: 28px; padding-bottom: 25px;
} }
.incident-timeline li:not(:last-child)::before { .incident-timeline li:not(:last-child)::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 6px; left: 5px;
top: 15px; top: 12px;
bottom: 0; bottom: 0;
width: 2px; width: 1px;
background: var(--border); background: var(--border);
} }
.incident-timeline-dot { .incident-timeline-dot {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 14px; width: 11px;
height: 14px; height: 11px;
margin-top: 3px;
border: 3px solid var(--card); border: 3px solid var(--card);
border-radius: 50%; border-radius: 50%;
background: var(--primary); background: var(--primary-deep);
box-shadow: 0 0 0 1px rgb(36 180 126 / 0.24);
}
.incident-timeline-entry header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
} }
.incident-timeline strong { .incident-timeline strong {
font-size: 13px;
font-weight: 600;
text-transform: capitalize; text-transform: capitalize;
} }
.incident-timeline time { .incident-timeline time {
font-size: 12px; font:
color: var(--muted-foreground); 400 10px/1.4 'IBM Plex Mono',
monospace;
color: var(--faint);
white-space: nowrap;
}
.incident-timeline-entry p {
max-width: 720px;
margin: 7px 0 0;
font-size: 14px;
line-height: 1.6;
color: #555;
}
.incident-timeline-empty {
margin: 22px 0 28px;
padding: 18px;
border: 1px dashed #dcdcdc;
border-radius: 7px;
font-size: 13px;
color: var(--muted);
background: #fcfcfc;
}
.incident-detail-error {
display: grid;
place-items: center;
padding: 64px 32px;
text-align: center;
}
.incident-detail-error > svg {
width: 24px;
height: 24px;
color: #ae3d3d;
}
.incident-detail-error h1 {
margin: 14px 0 0;
font-size: 20px;
font-weight: 500;
}
.incident-detail-error p {
margin: 7px 0 0;
font-size: 13px;
color: var(--muted);
} }
.incident-detail-link { .incident-detail-link {
display: inline-flex; display: inline-flex;
@@ -3631,6 +3757,40 @@ button {
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.incident-detail-page {
padding-top: 26px;
}
.incident-detail-card {
margin-top: 22px;
padding: 24px 20px 5px;
}
.incident-detail-header {
align-items: flex-start;
flex-direction: column;
gap: 13px;
}
.incident-detail-header h1 {
font-size: 24px;
}
.incident-detail-summary {
grid-template-columns: 1fr;
margin-right: -20px;
margin-left: -20px;
padding: 4px 20px;
}
.incident-detail-summary > div {
padding: 13px 0;
}
.incident-detail-summary > div + div {
padding-left: 0;
border-top: 1px solid #ededed;
border-left: 0;
}
.incident-timeline-entry header {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
.incident-dialog { .incident-dialog {
padding: 22px; padding: 22px;
} }