feat(dashboard): SIEM log + escalations + office collaboration lines
B - SIEM 로그 + 경보:
- backend/rails: GET /api/rails/transitions (filter by pipelineId, eventType)
- backend/rails: GET /api/rails/escalations (filter by resolved)
- frontend/app/rails/log/page.tsx — 결정론적 이벤트 스트림
필터: pipelineId / eventType / 초기화
timestamp / event badge / pipeline pill / state transition / 클릭 → 필터링
이벤트 타입별 색상 (REQUEST_CHANGES=주황, ERROR=빨강, 등)
- frontend/app/rails/escalations/page.tsx — 경보 카드 뷰
탭: 전체 / 미해결 / 해결됨
카드: reason, category 태그, attempts, stage, 시간
context snapshot 펼침 (JSON pretty)
- sidebar: 로그 / 경보 메뉴 추가
C - Office collaboration lines:
- OfficeFloor 의 4자매 책상 위에 SVG overlay
- harang→narang→narang→darang→darang→erang 흐름선
- active stage 가 있으면 점선 애니메이션 (flowDash keyframe)
- 비활성 시 흐릿한 정적 점선
- 화살표 마커로 방향 표시
This commit is contained in:
364
frontend/app/rails/log/page.tsx
Normal file
364
frontend/app/rails/log/page.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { API_URL } from '@/lib/config';
|
||||
import { useRailsSocket } from '@/lib/useRailsSocket';
|
||||
|
||||
interface Transition {
|
||||
id: number;
|
||||
pipelineId: string;
|
||||
fromState: string;
|
||||
toState: string;
|
||||
eventType: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
const Page = styled.main`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 32px 36px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Header = styled.header`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Title = styled.h1`
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
letter-spacing: -0.01em;
|
||||
`;
|
||||
|
||||
const Subtitle = styled.p`
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const Live = styled.span<{ $on: boolean }>`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: ${({ $on }) => ($on ? '#22c55e' : 'var(--text-secondary)')};
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: ${({ $on }) => ($on ? '#22c55e' : '#525252')};
|
||||
box-shadow: ${({ $on }) =>
|
||||
$on ? '0 0 0 4px rgba(34, 197, 94, 0.15)' : 'none'};
|
||||
}
|
||||
`;
|
||||
|
||||
const Filters = styled.div`
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
min-width: 280px;
|
||||
`;
|
||||
|
||||
const Select = styled.select`
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
`;
|
||||
|
||||
const ClearBtn = styled.button`
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: #5fafff;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
`;
|
||||
|
||||
const Counter = styled.div`
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
const LogTable = styled.div`
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const Row = styled.div<{ $type: string }>`
|
||||
display: grid;
|
||||
grid-template-columns: 180px 90px 130px minmax(200px, 1fr) 130px;
|
||||
gap: 16px;
|
||||
padding: 12px 18px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
`;
|
||||
|
||||
const HeaderRow = styled(Row)`
|
||||
background: var(--bg-surface);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
`;
|
||||
|
||||
const Time = styled.span`
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
const EventBadge = styled.span<{ $type: string }>`
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: ${({ $type }) => eventColor($type)};
|
||||
`;
|
||||
|
||||
const StateChip = styled.span<{ $state: string }>`
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
background: ${({ $state }) => stateColor($state)}30;
|
||||
color: ${({ $state }) => stateColor($state)};
|
||||
border: 1px solid ${({ $state }) => stateColor($state)}60;
|
||||
`;
|
||||
|
||||
const Arrow = styled.span`
|
||||
color: var(--text-secondary);
|
||||
margin: 0 6px;
|
||||
`;
|
||||
|
||||
const PidChip = styled.button`
|
||||
background: transparent;
|
||||
border: 1px dashed var(--border-color);
|
||||
color: var(--text-primary);
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: #5fafff;
|
||||
border-style: solid;
|
||||
}
|
||||
`;
|
||||
|
||||
const Empty = styled.div`
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
function eventColor(type: string): string {
|
||||
switch (type) {
|
||||
case 'REQUEST':
|
||||
return '#8b5cf6';
|
||||
case 'PLAN_READY':
|
||||
case 'IMPL_DONE':
|
||||
case 'APPROVE':
|
||||
case 'DEPLOY_DONE':
|
||||
return '#22c55e';
|
||||
case 'REQUEST_CHANGES':
|
||||
return '#f97316';
|
||||
case 'ERROR':
|
||||
case 'TIMEOUT':
|
||||
return '#ef4444';
|
||||
case 'ABORT':
|
||||
return '#525252';
|
||||
case 'RESUME':
|
||||
case 'RETRY':
|
||||
return '#5fafff';
|
||||
default:
|
||||
return '#6b7280';
|
||||
}
|
||||
}
|
||||
|
||||
function stateColor(state: string): string {
|
||||
switch (state) {
|
||||
case 'idle':
|
||||
return '#6b7280';
|
||||
case 'planning':
|
||||
case 'implementing':
|
||||
case 'reviewing':
|
||||
case 'deploying':
|
||||
return '#f97316';
|
||||
case 'done':
|
||||
return '#22c55e';
|
||||
case 'escalated':
|
||||
return '#ef4444';
|
||||
case 'aborted':
|
||||
return '#525252';
|
||||
default:
|
||||
return '#6b7280';
|
||||
}
|
||||
}
|
||||
|
||||
const EVENT_TYPES = [
|
||||
'',
|
||||
'REQUEST',
|
||||
'PLAN_READY',
|
||||
'IMPL_DONE',
|
||||
'APPROVE',
|
||||
'REQUEST_CHANGES',
|
||||
'DEPLOY_DONE',
|
||||
'ERROR',
|
||||
'TIMEOUT',
|
||||
'ABORT',
|
||||
'RESUME',
|
||||
];
|
||||
|
||||
export default function RailsLogPage() {
|
||||
const [transitions, setTransitions] = useState<Transition[]>([]);
|
||||
const [pipelineFilter, setPipelineFilter] = useState('');
|
||||
const [eventFilter, setEventFilter] = useState('');
|
||||
const [tick, setTick] = useState(0);
|
||||
|
||||
const { connected } = useRailsSocket({
|
||||
onPipelineUpdated: () => setTick((n) => n + 1),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams();
|
||||
params.set('limit', '300');
|
||||
if (pipelineFilter) params.set('pipelineId', pipelineFilter);
|
||||
if (eventFilter) params.set('eventType', eventFilter);
|
||||
fetch(`${API_URL}/api/rails/transitions?${params.toString()}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((data: { transitions: Transition[] }) => setTransitions(data.transitions))
|
||||
.catch(() => setTransitions([]));
|
||||
}, [pipelineFilter, eventFilter, tick]);
|
||||
|
||||
const visible = useMemo(() => transitions, [transitions]);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Header>
|
||||
<div>
|
||||
<Title>SIEM Log</Title>
|
||||
<Subtitle>Rails state transitions — 결정론적 이벤트 스트림</Subtitle>
|
||||
</div>
|
||||
<Live $on={connected}>{connected ? 'LIVE' : 'OFFLINE'}</Live>
|
||||
</Header>
|
||||
|
||||
<Filters>
|
||||
<Input
|
||||
placeholder="pipeline id 필터 (ULID)"
|
||||
value={pipelineFilter}
|
||||
onChange={(e) => setPipelineFilter(e.target.value.trim())}
|
||||
/>
|
||||
<Select
|
||||
value={eventFilter}
|
||||
onChange={(e) => setEventFilter(e.target.value)}
|
||||
>
|
||||
{EVENT_TYPES.map((t) => (
|
||||
<option key={t || 'all'} value={t}>
|
||||
{t || '— all events —'}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{(pipelineFilter || eventFilter) && (
|
||||
<ClearBtn
|
||||
onClick={() => {
|
||||
setPipelineFilter('');
|
||||
setEventFilter('');
|
||||
}}
|
||||
>
|
||||
필터 초기화
|
||||
</ClearBtn>
|
||||
)}
|
||||
<Counter>{visible.length} entries</Counter>
|
||||
</Filters>
|
||||
|
||||
<LogTable>
|
||||
<HeaderRow $type="">
|
||||
<span>Timestamp</span>
|
||||
<span>Event</span>
|
||||
<span>Pipeline</span>
|
||||
<span>Transition</span>
|
||||
<span>—</span>
|
||||
</HeaderRow>
|
||||
{visible.length === 0 ? (
|
||||
<Empty>No transitions matching the filters.</Empty>
|
||||
) : (
|
||||
visible.map((t) => (
|
||||
<Row key={t.id} $type={t.eventType}>
|
||||
<Time>{new Date(t.timestamp).toLocaleString('ko-KR')}</Time>
|
||||
<EventBadge $type={t.eventType}>{t.eventType}</EventBadge>
|
||||
<PidChip onClick={() => setPipelineFilter(t.pipelineId)}>
|
||||
{t.pipelineId.slice(0, 12)}...
|
||||
</PidChip>
|
||||
<span>
|
||||
<StateChip $state={t.fromState}>{t.fromState}</StateChip>
|
||||
<Arrow>→</Arrow>
|
||||
<StateChip $state={t.toState}>{t.toState}</StateChip>
|
||||
</span>
|
||||
<span />
|
||||
</Row>
|
||||
))
|
||||
)}
|
||||
</LogTable>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user