This commit is contained in:
276
frontend/src/components/SnifferManager.tsx
Normal file
276
frontend/src/components/SnifferManager.tsx
Normal file
@@ -0,0 +1,276 @@
|
||||
// src/components/Sniffing.tsx
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
PlayCircleOutlined,
|
||||
PlusOutlined,
|
||||
ReloadOutlined,
|
||||
StopOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Card, Form, List, message, Modal, Radio, Select, Space, Spin, Tag, Tooltip, Typography } from 'antd';
|
||||
import { ReactElement, useMemo, useState } from 'react';
|
||||
import { startSniffer, stopSniffer, stopSnifferByInterface } from '../api/apiClient';
|
||||
import { BridgeInfo, InterfaceInfo } from '../types/network';
|
||||
import { InterfaceSnifferStatus } from '../types/sniffer';
|
||||
|
||||
const { Text } = Typography;
|
||||
const { Option } = Select;
|
||||
|
||||
interface SnifferManagerProps {
|
||||
interfaces: InterfaceInfo[];
|
||||
bridges: BridgeInfo[];
|
||||
statusMap: Record<string, InterfaceSnifferStatus>;
|
||||
refreshAll: () => Promise<void>;
|
||||
refreshStatus: () => Promise<void>;
|
||||
loading: boolean;
|
||||
statusLoading: boolean;
|
||||
}
|
||||
|
||||
export default function SnifferManager(props: SnifferManagerProps): ReactElement {
|
||||
// local UI state
|
||||
|
||||
// modal / form
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [startMode, setStartMode] = useState<'interface' | 'bridge'>('interface');
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// derived entries
|
||||
const statusEntries = useMemo(
|
||||
() => Object.entries(props.statusMap) as [string, InterfaceSnifferStatus][],
|
||||
[props.statusMap],
|
||||
);
|
||||
|
||||
// open/close modal
|
||||
const onOpenStartModal = () => {
|
||||
form.resetFields();
|
||||
setStartMode('interface');
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const onCloseModal = () => setIsModalOpen(false);
|
||||
|
||||
// start submit
|
||||
const handleStartSubmit = async (values: any) => {
|
||||
const { target } = values;
|
||||
if (!target) {
|
||||
message.warning('Please select a target to start sniffing on.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const payload = startMode === 'interface' ? { interface: target } : { bridge: target };
|
||||
const res = await startSniffer(payload);
|
||||
message.success(`Sniffer started on ${target} (session ${res.session_id})`);
|
||||
await props.refreshAll();
|
||||
setIsModalOpen(false);
|
||||
} catch (err: any) {
|
||||
console.error('startSniffer error', err);
|
||||
message.error(err?.message ?? 'Failed to start sniffer');
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
// stop all
|
||||
const handleStopAll = async () => {
|
||||
try {
|
||||
await stopSniffer();
|
||||
message.success('All sniffers stopped');
|
||||
await props.refreshStatus();
|
||||
} catch (err: any) {
|
||||
console.error('stopSniffer error', err);
|
||||
message.error(err?.message ?? 'Failed to stop sniffers');
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
// stop per-interface
|
||||
const handleStopFromList = async (ifaceName: string, session_id?: string | null) => {
|
||||
try {
|
||||
// prefer stop by interface
|
||||
await stopSnifferByInterface(ifaceName);
|
||||
message.success(`Stopped sniffing on ${ifaceName}`);
|
||||
await props.refreshStatus();
|
||||
return;
|
||||
} catch (err: any) {
|
||||
console.error('stopSnifferByInterface error', err);
|
||||
// try stop by session as fallback
|
||||
if (session_id) {
|
||||
try {
|
||||
await stopSniffer({ session_id });
|
||||
message.success(`Stopped session ${session_id}`);
|
||||
await props.refreshStatus();
|
||||
return;
|
||||
} catch (err2: any) {
|
||||
console.error('stopSniffer by session fallback failed', err2);
|
||||
}
|
||||
}
|
||||
message.error(err?.message ?? 'Failed to stop sniffer');
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sniffing-manager">
|
||||
<Card
|
||||
title="Sniffer sessions"
|
||||
style={{ marginBottom: 16 }}
|
||||
extra={
|
||||
<Space>
|
||||
<Tooltip title="Start a new sniffer session">
|
||||
<Button icon={<PlusOutlined />} onClick={onOpenStartModal} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Refresh status">
|
||||
<Button icon={<ReloadOutlined />} onClick={() => props.refreshStatus()} />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Stop all sniffers">
|
||||
<Button danger icon={<StopOutlined />} onClick={handleStopAll} />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{props.statusLoading ? (
|
||||
<div style={{ textAlign: 'center', padding: 24 }}>
|
||||
<Spin />
|
||||
</div>
|
||||
) : statusEntries.length === 0 ? (
|
||||
<div style={{ padding: 12 }}>
|
||||
<Text type="secondary">No status information available.</Text>
|
||||
</div>
|
||||
) : (
|
||||
<List
|
||||
dataSource={statusEntries}
|
||||
renderItem={([name, st]: [string, InterfaceSnifferStatus]) => {
|
||||
const running = st.running;
|
||||
const exists = st.exists;
|
||||
const up = st.up;
|
||||
const session_id = st.session_id ?? null;
|
||||
const session_label = st.session_label ?? null;
|
||||
|
||||
return (
|
||||
<List.Item
|
||||
actions={[
|
||||
running ? (
|
||||
<Button
|
||||
key="stop"
|
||||
size="small"
|
||||
icon={<StopOutlined />}
|
||||
onClick={() => handleStopFromList(name, session_id)}
|
||||
disabled={props.loading}
|
||||
>
|
||||
Stop
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
key="start"
|
||||
size="small"
|
||||
type="primary"
|
||||
icon={<PlayCircleOutlined />}
|
||||
onClick={async () => {
|
||||
// start on this interface
|
||||
try {
|
||||
const res = await startSniffer({ interface: name });
|
||||
message.success(`Started sniffer on ${name} (session ${res.session_id})`);
|
||||
await props.refreshStatus();
|
||||
} catch (err: any) {
|
||||
console.error('startSniffer quick', err);
|
||||
message.error(err?.message ?? 'Failed to start sniffer');
|
||||
} finally {
|
||||
}
|
||||
}}
|
||||
>
|
||||
Start
|
||||
</Button>
|
||||
),
|
||||
]}
|
||||
>
|
||||
<List.Item.Meta
|
||||
title={
|
||||
<Space>
|
||||
<Text strong>{name}</Text>
|
||||
{running ? (
|
||||
<Tag icon={<CheckCircleOutlined />} color="success">
|
||||
running
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag icon={<ExclamationCircleOutlined />} color="default">
|
||||
stopped
|
||||
</Tag>
|
||||
)}
|
||||
|
||||
{!exists && <Tag color="error">missing</Tag>}
|
||||
{exists && !up && <Tag color="warning">down</Tag>}
|
||||
{exists && up && <Tag color="processing">up</Tag>}
|
||||
|
||||
{session_id && (
|
||||
<Tag>
|
||||
{session_label ? `${session_label}` : 'session'}:{' '}
|
||||
<Text code copyable={{ text: session_id }}>
|
||||
{session_id.slice(0, 8)}
|
||||
</Text>
|
||||
</Tag>
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
description={<Text type="secondary">interface: {name}</Text>}
|
||||
/>
|
||||
</List.Item>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Start sniffer modal */}
|
||||
<Modal
|
||||
title="Start sniffer session"
|
||||
open={isModalOpen}
|
||||
onCancel={onCloseModal}
|
||||
onOk={() => form.submit()}
|
||||
confirmLoading={props.loading}
|
||||
okText="Start"
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={handleStartSubmit} initialValues={{ target: undefined }}>
|
||||
<Form.Item label="Mode" name="mode">
|
||||
<Radio.Group
|
||||
value={startMode}
|
||||
onChange={(e) => {
|
||||
setStartMode(e.target.value);
|
||||
form.setFieldsValue({ target: undefined });
|
||||
}}
|
||||
>
|
||||
<Radio value="interface">Interface</Radio>
|
||||
<Radio value="bridge">Bridge</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={startMode === 'interface' ? 'Interface' : 'Bridge'}
|
||||
name="target"
|
||||
rules={[{ required: true, message: 'Please select a target' }]}
|
||||
>
|
||||
<Select
|
||||
showSearch
|
||||
placeholder={startMode === 'interface' ? 'Select interface' : 'Select bridge'}
|
||||
optionFilterProp="children"
|
||||
filterOption={(input, option) =>
|
||||
(option?.children as unknown as string)?.toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
>
|
||||
{startMode === 'interface'
|
||||
? props.interfaces.map((i) => (
|
||||
<Option key={`if:${i.name}`} value={i.name}>
|
||||
{i.name}
|
||||
</Option>
|
||||
))
|
||||
: props.bridges.map((b) => (
|
||||
<Option key={`br:${b.ifname}`} value={b.ifname}>
|
||||
{b.ifname} ({b.members.map((m) => m.ifname).join(', ')})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user