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:
@@ -1 +1 @@
|
||||
1775812327
|
||||
1775812935
|
||||
|
||||
@@ -53,6 +53,35 @@ export class RailsController {
|
||||
return detail;
|
||||
}
|
||||
|
||||
@Get('transitions')
|
||||
async transitions(
|
||||
@Query('pipelineId') pipelineId?: string,
|
||||
@Query('eventType') eventType?: string,
|
||||
@Query('limit') limit?: string,
|
||||
) {
|
||||
const opts: { pipelineId?: string; eventType?: string; limit?: number } = {};
|
||||
if (pipelineId) opts.pipelineId = pipelineId;
|
||||
if (eventType) opts.eventType = eventType;
|
||||
if (limit) opts.limit = parseInt(limit, 10);
|
||||
const transitions = await this.rails.listTransitions(opts);
|
||||
return { transitions };
|
||||
}
|
||||
|
||||
@Get('escalations')
|
||||
async escalations(
|
||||
@Query('pipelineId') pipelineId?: string,
|
||||
@Query('resolved') resolved?: string,
|
||||
@Query('limit') limit?: string,
|
||||
) {
|
||||
const opts: { pipelineId?: string; resolved?: boolean; limit?: number } = {};
|
||||
if (pipelineId) opts.pipelineId = pipelineId;
|
||||
if (resolved === 'true') opts.resolved = true;
|
||||
else if (resolved === 'false') opts.resolved = false;
|
||||
if (limit) opts.limit = parseInt(limit, 10);
|
||||
const escalations = await this.rails.listEscalations(opts);
|
||||
return { escalations };
|
||||
}
|
||||
|
||||
@Post('pipelines/start')
|
||||
async start(
|
||||
@Body() body: { project: string; requirements: string },
|
||||
|
||||
@@ -80,6 +80,36 @@ export class RailsService {
|
||||
}
|
||||
}
|
||||
|
||||
async listTransitions(opts: {
|
||||
pipelineId?: string;
|
||||
eventType?: string;
|
||||
limit?: number;
|
||||
}): Promise<unknown[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (opts.pipelineId) params.set('pipelineId', opts.pipelineId);
|
||||
if (opts.eventType) params.set('eventType', opts.eventType);
|
||||
params.set('limit', String(opts.limit ?? 100));
|
||||
const data = await this.fetchJson<{ transitions: unknown[] }>(
|
||||
`/api/transitions?${params.toString()}`,
|
||||
);
|
||||
return data.transitions ?? [];
|
||||
}
|
||||
|
||||
async listEscalations(opts: {
|
||||
pipelineId?: string;
|
||||
resolved?: boolean;
|
||||
limit?: number;
|
||||
}): Promise<unknown[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (opts.pipelineId) params.set('pipelineId', opts.pipelineId);
|
||||
if (opts.resolved !== undefined) params.set('resolved', String(opts.resolved));
|
||||
params.set('limit', String(opts.limit ?? 50));
|
||||
const data = await this.fetchJson<{ escalations: unknown[] }>(
|
||||
`/api/escalations?${params.toString()}`,
|
||||
);
|
||||
return data.escalations ?? [];
|
||||
}
|
||||
|
||||
async startPipeline(input: {
|
||||
project: string;
|
||||
requirements: string;
|
||||
|
||||
284
frontend/app/rails/escalations/page.tsx
Normal file
284
frontend/app/rails/escalations/page.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { API_URL } from '@/lib/config';
|
||||
|
||||
interface Escalation {
|
||||
id: string;
|
||||
pipelineId: string;
|
||||
reason: string;
|
||||
errorCategory: string;
|
||||
stage: string;
|
||||
attempts: number;
|
||||
contextSnapshot: string;
|
||||
resolvedAt: string | null;
|
||||
resolution: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
const Page = styled.main`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 32px 36px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Header = styled.header`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
`;
|
||||
|
||||
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 Filters = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
`;
|
||||
|
||||
const FilterBtn = styled.button<{ $active: boolean }>`
|
||||
padding: 8px 16px;
|
||||
background: ${({ $active }) => ($active ? '#5fafff' : 'transparent')};
|
||||
color: ${({ $active }) => ($active ? '#0a0a0a' : 'var(--text-primary)')};
|
||||
border: 1px solid ${({ $active }) => ($active ? '#5fafff' : 'var(--border-color)')};
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const Cards = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
`;
|
||||
|
||||
const Card = styled.div<{ $resolved: boolean }>`
|
||||
background: var(--bg-input);
|
||||
border: 1px solid ${({ $resolved }) => ($resolved ? 'var(--border-color)' : '#ef444460')};
|
||||
border-left: 4px solid ${({ $resolved }) => ($resolved ? '#525252' : '#ef4444')};
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
`;
|
||||
|
||||
const CardHeader = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Reason = styled.h3`
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
`;
|
||||
|
||||
const Tags = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Tag = styled.span<{ $color: string }>`
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border-radius: 12px;
|
||||
background: ${({ $color }) => $color}20;
|
||||
color: ${({ $color }) => $color};
|
||||
border: 1px solid ${({ $color }) => $color}60;
|
||||
`;
|
||||
|
||||
const Meta = styled.div`
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Snapshot = styled.details`
|
||||
margin-top: 4px;
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 8px 0 0;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const Empty = styled.div`
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
`;
|
||||
|
||||
function categoryColor(c: string): string {
|
||||
switch (c) {
|
||||
case 'timeout':
|
||||
return '#f97316';
|
||||
case 'rate_limit':
|
||||
return '#eab308';
|
||||
case 'network':
|
||||
return '#3b82f6';
|
||||
case 'permission':
|
||||
return '#ef4444';
|
||||
case 'config':
|
||||
return '#a855f7';
|
||||
case 'invariant':
|
||||
return '#ec4899';
|
||||
default:
|
||||
return '#6b7280';
|
||||
}
|
||||
}
|
||||
|
||||
function relTime(iso: string): string {
|
||||
try {
|
||||
const ms = Date.now() - new Date(iso).getTime();
|
||||
const sec = Math.floor(ms / 1000);
|
||||
if (sec < 60) return `${sec}s 전`;
|
||||
if (sec < 3600) return `${Math.floor(sec / 60)}m 전`;
|
||||
if (sec < 86400) return `${Math.floor(sec / 3600)}h 전`;
|
||||
return `${Math.floor(sec / 86400)}d 전`;
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
|
||||
export default function EscalationsPage() {
|
||||
const [escalations, setEscalations] = useState<Escalation[]>([]);
|
||||
const [filter, setFilter] = useState<'all' | 'unresolved' | 'resolved'>('all');
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams();
|
||||
params.set('limit', '100');
|
||||
if (filter === 'unresolved') params.set('resolved', 'false');
|
||||
if (filter === 'resolved') params.set('resolved', 'true');
|
||||
|
||||
fetch(`${API_URL}/api/rails/escalations?${params.toString()}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((data: { escalations: Escalation[] }) => setEscalations(data.escalations))
|
||||
.catch(() => setEscalations([]));
|
||||
}, [filter]);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Header>
|
||||
<div>
|
||||
<Title>Escalations</Title>
|
||||
<Subtitle>
|
||||
자동 재시도 후에도 실패한 파이프라인 — 사용자 개입 대기
|
||||
</Subtitle>
|
||||
</div>
|
||||
<Filters>
|
||||
<FilterBtn $active={filter === 'all'} onClick={() => setFilter('all')}>
|
||||
전체
|
||||
</FilterBtn>
|
||||
<FilterBtn
|
||||
$active={filter === 'unresolved'}
|
||||
onClick={() => setFilter('unresolved')}
|
||||
>
|
||||
미해결
|
||||
</FilterBtn>
|
||||
<FilterBtn
|
||||
$active={filter === 'resolved'}
|
||||
onClick={() => setFilter('resolved')}
|
||||
>
|
||||
해결됨
|
||||
</FilterBtn>
|
||||
</Filters>
|
||||
</Header>
|
||||
|
||||
{escalations.length === 0 ? (
|
||||
<Empty>
|
||||
{filter === 'unresolved' ? '미해결 에스컬레이션 없음 ✓' : '에스컬레이션 없음'}
|
||||
</Empty>
|
||||
) : (
|
||||
<Cards>
|
||||
{escalations.map((e) => (
|
||||
<Card key={e.id} $resolved={!!e.resolvedAt}>
|
||||
<CardHeader>
|
||||
<Reason>{e.reason}</Reason>
|
||||
<Tags>
|
||||
<Tag $color={categoryColor(e.errorCategory)}>
|
||||
{e.errorCategory}
|
||||
</Tag>
|
||||
{e.stage && <Tag $color="#6b7280">stage: {e.stage}</Tag>}
|
||||
<Tag $color="#a855f7">attempts: {e.attempts}</Tag>
|
||||
{e.resolvedAt ? (
|
||||
<Tag $color="#22c55e">{e.resolution ?? 'resolved'}</Tag>
|
||||
) : (
|
||||
<Tag $color="#ef4444">unresolved</Tag>
|
||||
)}
|
||||
</Tags>
|
||||
</CardHeader>
|
||||
<Meta>
|
||||
<span>id: {e.id}</span>
|
||||
<span>pipeline: {e.pipelineId.slice(0, 12)}...</span>
|
||||
<span>created: {relTime(e.createdAt)}</span>
|
||||
{e.resolvedAt && <span>resolved: {relTime(e.resolvedAt)}</span>}
|
||||
</Meta>
|
||||
{e.contextSnapshot && (
|
||||
<Snapshot>
|
||||
<summary>Context snapshot</summary>
|
||||
<pre>
|
||||
{(() => {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(e.contextSnapshot), null, 2);
|
||||
} catch {
|
||||
return e.contextSnapshot;
|
||||
}
|
||||
})()}
|
||||
</pre>
|
||||
</Snapshot>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</Cards>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,8 @@ import { useAuth } from '@/lib/AuthContext';
|
||||
const NAV_ITEMS = [
|
||||
{ href: '/', label: '대시' },
|
||||
{ href: '/rails', label: '레일' },
|
||||
{ href: '/rails/log', label: '로그' },
|
||||
{ href: '/rails/escalations', label: '경보' },
|
||||
{ href: '/office', label: '오피스' },
|
||||
{ href: '/projects', label: '프로' },
|
||||
{ href: '/activities', label: '활동' },
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import styled, { keyframes, css } from 'styled-components';
|
||||
import type { RailsSubTaskNode, RailsPipelineSummary } from '@/lib/useRailsSocket';
|
||||
import SisterAvatar from '@/components/common/SisterAvatar';
|
||||
|
||||
@@ -46,28 +46,32 @@ const Floor = styled.div`
|
||||
padding: 28px;
|
||||
min-height: 540px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 28px;
|
||||
right: 28px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
const Overlay = styled.svg`
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
`;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 28px;
|
||||
bottom: 28px;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, transparent, var(--border-color), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
const flowDash = keyframes`
|
||||
to { stroke-dashoffset: -8; }
|
||||
`;
|
||||
|
||||
const FlowLine = styled.line<{ $flowing: boolean }>`
|
||||
stroke: ${({ $flowing }) =>
|
||||
$flowing ? '#5fafff' : 'rgba(95, 175, 255, 0.15)'};
|
||||
stroke-width: 0.4;
|
||||
stroke-dasharray: ${({ $flowing }) => ($flowing ? '1.6 1.2' : '0.6 0.6')};
|
||||
animation: ${({ $flowing }) =>
|
||||
$flowing
|
||||
? css`
|
||||
${flowDash} 1.2s linear infinite
|
||||
`
|
||||
: 'none'};
|
||||
`;
|
||||
|
||||
const pulse = keyframes`
|
||||
@@ -82,6 +86,7 @@ const blink = keyframes`
|
||||
|
||||
const Desk = styled.button<{ $color: string; $active: boolean; $running: boolean; $selected: boolean }>`
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: ${({ $color }) => `${$color}10`};
|
||||
border: 1.5px solid ${({ $color, $selected }) => ($selected ? $color : `${$color}50`)};
|
||||
border-radius: 12px;
|
||||
@@ -288,9 +293,66 @@ export default function OfficeFloor({
|
||||
return map;
|
||||
}, [pipelines, treesByPipeline]);
|
||||
|
||||
// Determine which stages are currently running for animation
|
||||
const activeStages = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
for (const sister of SISTERS) {
|
||||
const stats = statsFor(workersBySister.get(sister.key) ?? []);
|
||||
if (stats.running > 0) set.add(sister.key);
|
||||
}
|
||||
return set;
|
||||
}, [workersBySister]);
|
||||
|
||||
// SVG flow lines: harang→narang→darang→erang following the pipeline order
|
||||
// Coordinates are normalized 0-100 (viewBox 100x100)
|
||||
const POS: Record<string, { x: number; y: number }> = {
|
||||
harang: { x: 25, y: 25 },
|
||||
narang: { x: 75, y: 25 },
|
||||
darang: { x: 25, y: 75 },
|
||||
erang: { x: 75, y: 75 },
|
||||
};
|
||||
// Order: plan→implement→review→deploy
|
||||
const FLOW: Array<[keyof typeof POS, keyof typeof POS]> = [
|
||||
['harang', 'narang'],
|
||||
['narang', 'darang'],
|
||||
['darang', 'erang'],
|
||||
];
|
||||
|
||||
return (
|
||||
<Wrap>
|
||||
<Floor>
|
||||
<Overlay viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<marker
|
||||
id="arrowhead"
|
||||
markerWidth="10"
|
||||
markerHeight="10"
|
||||
refX="9"
|
||||
refY="5"
|
||||
orient="auto"
|
||||
>
|
||||
<polygon points="0 0, 10 5, 0 10" fill="#5fafff" />
|
||||
</marker>
|
||||
</defs>
|
||||
{FLOW.map(([from, to]) => {
|
||||
const fromActive = activeStages.has(from);
|
||||
const toActive = activeStages.has(to);
|
||||
const flowing = fromActive || toActive;
|
||||
const a = POS[from]!;
|
||||
const b = POS[to]!;
|
||||
return (
|
||||
<FlowLine
|
||||
key={`${from}-${to}`}
|
||||
x1={a.x}
|
||||
y1={a.y}
|
||||
x2={b.x}
|
||||
y2={b.y}
|
||||
$flowing={flowing}
|
||||
markerEnd="url(#arrowhead)"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Overlay>
|
||||
{SISTERS.map((sister) => {
|
||||
const workers = workersBySister.get(sister.key) ?? [];
|
||||
const stats = statsFor(workers);
|
||||
|
||||
Reference in New Issue
Block a user