101 lines
4.1 KiB
TypeScript
101 lines
4.1 KiB
TypeScript
import React, { useState, useCallback } from 'react'
|
|
import { View, Text, FlatList, TouchableOpacity, StyleSheet, Alert, RefreshControl } from 'react-native'
|
|
import { useFocusEffect } from 'expo-router'
|
|
import { COLORS } from '../../constants/Config'
|
|
import { getAISOCEvents } from '../../services/api'
|
|
|
|
const SEV_COLOR: Record<string, string> = {
|
|
CRITICAL: COLORS.danger,
|
|
HIGH: '#F97316',
|
|
MEDIUM: COLORS.warning,
|
|
LOW: COLORS.success,
|
|
}
|
|
|
|
export default function AISOCScreen() {
|
|
const [events, setEvents] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [expanded, setExpanded] = useState<Set<number>>(new Set())
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true)
|
|
try { const r = await getAISOCEvents(); setEvents(r.data?.items ?? r.data ?? []) }
|
|
catch { setEvents([]) }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
useFocusEffect(useCallback(() => { load() }, [load]))
|
|
|
|
const toggle = (id: number) => {
|
|
const next = new Set(expanded)
|
|
next.has(id) ? next.delete(id) : next.add(id)
|
|
setExpanded(next)
|
|
}
|
|
|
|
const resolve = (item: any) => {
|
|
Alert.alert('대응 완료', `"${item.event_type ?? '인시던트'}"을 대응 완료로 표시하시겠습니까?`, [
|
|
{ text: '취소', style: 'cancel' },
|
|
{ text: '완료', onPress: () => {
|
|
setEvents(prev => prev.map(e => e.id === item.id ? { ...e, status: 'resolved' } : e))
|
|
}},
|
|
])
|
|
}
|
|
|
|
const renderItem = ({ item }: { item: any }) => {
|
|
const sev = (item.severity ?? item.grade ?? 'MEDIUM').toUpperCase()
|
|
const isOpen = expanded.has(item.id)
|
|
return (
|
|
<TouchableOpacity style={[s.card, item.status === 'resolved' && s.cardResolved]} onPress={() => toggle(item.id)}>
|
|
<View style={s.row}>
|
|
<View style={[s.sevBadge, { backgroundColor: SEV_COLOR[sev] ?? COLORS.muted }]}>
|
|
<Text style={s.sevText}>{sev}</Text>
|
|
</View>
|
|
<Text style={s.eventType} numberOfLines={1}>{item.event_type ?? item.title ?? '보안 이벤트'}</Text>
|
|
<Text style={s.status}>{item.status ?? 'open'}</Text>
|
|
</View>
|
|
<Text style={s.time}>{item.detected_at?.slice(0, 16).replace('T', ' ') ?? item.created_at?.slice(0, 16).replace('T', ' ')}</Text>
|
|
|
|
{isOpen && (
|
|
<View style={s.detail}>
|
|
<Text style={s.detailText}>{item.description ?? item.detail ?? '-'}</Text>
|
|
{item.status !== 'resolved' && (
|
|
<TouchableOpacity style={s.resolveBtn} onPress={() => resolve(item)}>
|
|
<Text style={s.resolveBtnText}>대응 완료</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<View style={s.container}>
|
|
<FlatList
|
|
data={events}
|
|
keyExtractor={i => String(i.id ?? Math.random())}
|
|
renderItem={renderItem}
|
|
refreshControl={<RefreshControl refreshing={loading} onRefresh={load} />}
|
|
ListEmptyComponent={<Text style={s.empty}>보안 인시던트가 없습니다.</Text>}
|
|
contentContainerStyle={{ padding: 12 }}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: COLORS.bg },
|
|
card: { backgroundColor: '#fff', borderRadius: 10, padding: 14, marginBottom: 8, elevation: 1 },
|
|
cardResolved: { opacity: 0.6 },
|
|
row: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 4 },
|
|
sevBadge: { borderRadius: 4, paddingHorizontal: 6, paddingVertical: 2 },
|
|
sevText: { fontSize: 10, color: '#fff', fontWeight: '800' },
|
|
eventType: { flex: 1, fontSize: 13, fontWeight: '600', color: COLORS.text },
|
|
status: { fontSize: 11, color: COLORS.muted },
|
|
time: { fontSize: 11, color: COLORS.muted },
|
|
detail: { marginTop: 10, paddingTop: 10, borderTopWidth: 1, borderTopColor: COLORS.border },
|
|
detailText: { fontSize: 13, color: COLORS.text, lineHeight: 20, marginBottom: 10 },
|
|
resolveBtn: { backgroundColor: COLORS.success, borderRadius: 6, padding: 8, alignItems: 'center' },
|
|
resolveBtnText: { color: '#fff', fontWeight: '700', fontSize: 13 },
|
|
empty: { textAlign: 'center', color: COLORS.muted, marginTop: 40 },
|
|
})
|