dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Expand activity journal color cues
Build and Deploy Gateway / build-and-push (push) Successful in 37s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-08-25 16:42:05 +03:00
parent f451c65b2f
commit 4a566e082a
5 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/features/activity-journal/ActivityJournalFeature.tsx
+7 -9
View File
@@ -156,15 +156,13 @@ export function ActivityJournalPanel({ feature, loadPage }: {
<ol>{group.items.map((item) => {
const { event } = item;
const [title, details] = refreshStreakCopy(item) || eventCopy(event);
return <li key={event.id} className={event.severity === 'error'
? 'client-journal-event is-error'
: event.severity === 'warning'
? 'client-journal-event is-warning'
: event.type === 'failover.switched' && event.data.toRole === 'primary'
? 'client-journal-event is-switch-primary'
: event.type === 'failover.switched' && event.data.toRole === 'reserve'
? 'client-journal-event is-switch-reserve'
: 'client-journal-event'}>
return <li
key={event.id}
className="client-journal-event"
data-event-type={event.type}
data-severity={event.severity}
data-target-role={event.type === 'failover.switched' ? event.data.toRole : undefined}
>
<div className="client-journal-time"><time dateTime={event.occurredAt}>{new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit' }).format(new Date(event.occurredAt))}</time><span>{event.source}</span></div>
<div><strong>{title}</strong>{details && <span>{details}</span>}{event.severity !== 'info' && <em>{event.severity === 'error' ? 'Ошибка' : 'Внимание'}</em>}</div>
</li>;
src/web/styles/features/activity-journal.css
+16 -11
View File
@@ -16,17 +16,22 @@
.client-journal-time span, .client-journal-groups li span { color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); overflow-wrap: anywhere; }
.client-journal-time span { text-transform: var(--type-label-transform); }
.client-journal-groups li strong { font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); }
.client-journal-groups li em { width: fit-content; color: oklch(0.68 0.15 28); font: var(--type-label); font-style: normal; letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
.client-journal-event.is-switch-primary::before,
.client-journal-event.is-switch-reserve::before,
.client-journal-event.is-warning::before,
.client-journal-event.is-error::before { content: ''; position: absolute; inset: 9px auto 9px -8px; width: 3px; border-radius: 999px; }
.client-journal-event.is-switch-primary::before { background: var(--harbor-connect); }
.client-journal-event.is-switch-reserve::before { background: var(--harbor-gateway); }
.client-journal-event.is-warning::before { background: oklch(0.68 0.14 72); }
.client-journal-event.is-error::before { background: oklch(0.68 0.15 28); }
.client-journal-event.is-warning em { color: oklch(0.68 0.14 72); }
.client-journal-event.is-error em { color: oklch(0.68 0.15 28); }
.client-journal-groups li em { width: fit-content; color: var(--client-journal-tone); font: var(--type-label); font-style: normal; letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
.client-journal-event { --client-journal-tone: var(--client-muted); }
.client-journal-event::before { content: ''; position: absolute; inset: 9px auto 9px -8px; width: 3px; border-radius: 999px; background: var(--client-journal-tone); }
.client-journal-event .client-journal-time span { color: var(--client-journal-tone); }
.client-journal-event[data-event-type='connection.started'],
.client-journal-event[data-event-type='subscription.added'],
.client-journal-event[data-event-type='subscription.refreshed'],
.client-journal-event[data-event-type='failover.enabled'],
.client-journal-event[data-event-type='failover.resumed'],
.client-journal-event[data-event-type='failover.recovered'],
.client-journal-event[data-event-type='failover.switched'][data-target-role='primary'] { --client-journal-tone: var(--harbor-connect); }
.client-journal-event[data-event-type='failover.switched'][data-target-role='reserve'] { --client-journal-tone: var(--harbor-gateway); }
.client-journal-event[data-event-type='failover.waiting_for_idle'],
.client-journal-event[data-event-type='failover.paused'],
.client-journal-event[data-severity='warning'] { --client-journal-tone: oklch(0.68 0.14 72); }
.client-journal-event[data-severity='error'] { --client-journal-tone: oklch(0.68 0.15 28); }
.client-journal-error, .client-journal-empty { min-height: 80px; margin: 0 8px; color: var(--client-muted); font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); }
.client-journal-error button, .client-journal-footer button { border: 0; background: transparent; color: var(--client-accent); font: var(--type-control); letter-spacing: var(--type-control-tracking); text-transform: var(--type-control-transform); cursor: pointer; }
.client-journal-skeleton { display: grid; gap: 14px; margin: 0 8px; }