marcus/mitm-webserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improv FE
All checks were successful
Build and Deploy MITM Webserver / build (push) Successful in 9s
Details

Browse Source
This commit is contained in:
malmert
2026-02-11 21:56:08 +01:00
parent 0389dd77aa
commit dfa9a4a343
1 changed files with 64 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/components/FirewallRuleBuilder.tsx
View File

@@ -29,14 +29,11 @@ interface RuleBuilderProps {
onCreated?: () => Promise<void> | void;
}
/**
* Helper: create an nft JSON 'expr' array from form values.
* The produced expr is intentionally conservative and designed to be renderable by the backend's renderer.
*/
/* ---------- helpers ---------- */
function buildExprFromValues(values: any): Expr[] {
const expr: Expr[] = [];
// protocol
const protoChoice = values.protocolChoice ?? 'preset';
if (protoChoice === 'preset') {
const preset = values.protocolPreset;
@@ -90,7 +87,6 @@ function buildExprFromValues(values: any): Expr[] {
}
}
// source/destination addresses
if (values.saddr) {
expr.push({
match: {
@@ -110,7 +106,6 @@ function buildExprFromValues(values: any): Expr[] {
});
}
// ports for tcp/udp
if (values.sport) {
const useUdp =
values.protocolPreset === 'udp' ||
@@ -130,7 +125,6 @@ function buildExprFromValues(values: any): Expr[] {
expr.push(obj);
}
// advanced free-text (try JSON, otherwise string token)
if (values.advanced) {
const adv = values.advanced.trim();
try {
@@ -141,7 +135,6 @@ function buildExprFromValues(values: any): Expr[] {
}
}
// action
const action = values.action || 'drop';
if (action === 'drop') expr.push({ drop: null });
else if (action === 'accept') expr.push({ accept: null });
@@ -150,9 +143,6 @@ function buildExprFromValues(values: any): Expr[] {
return expr;
}
/**
* Deterministic short textual serializer for expr (preview)
*/
function textFromExpr(expr: Expr): string {
if (expr == null) return '';
if (Array.isArray(expr)) {
@@ -211,12 +201,15 @@ function textFromExpr(expr: Expr): string {
return String(expr);
}
/* ---------- component ---------- */
export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
const [loading, setLoading] = useState(false);
const [tables, setTables] = useState<TableOut[]>([]);
const [form] = Form.useForm();
const [preview, setPreview] = useState('');
const [exprPreview, setExprPreview] = useState<Expr | null>(null);
const [cmdPreview, setCmdPreview] = useState<string>('');
const [requestJsonPreview, setRequestJsonPreview] = useState<any>(null);
// fetch tables/chains on mount
useEffect(() => {
@@ -269,8 +262,35 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
const updatePreviews = useCallback(() => {
const vals = form.getFieldsValue();
const expr = buildExprFromValues(vals);
setExprPreview(expr);
setPreview(textFromExpr(expr));
// compute family/table/chain choices for cmd + request JSON
let family = 'inet';
let tableName = 'filter';
let chain = 'input';
const tableSelect = vals.tableSelect;
if (tableSelect && tableSelect !== '__manual__') {
const [f, n] = String(tableSelect).split(':');
family = f || family;
tableName = n || tableName;
} else {
family = vals.familyManual || family;
tableName = vals.tableManual || tableName;
}
const chainVal = vals.chainSelect;
if (!chainVal || chainVal === '__manual_chain__') {
chain = vals.chainManual || chain;
} else {
chain = chainVal;
}
const short = textFromExpr(expr);
const cmd = `add rule ${family} ${tableName} ${chain} ${short}`.trim();
setCmdPreview(cmd);
const reqObj = { family, table: tableName, chain, expr };
setRequestJsonPreview(reqObj);
}, [form]);
useEffect(() => {
@@ -302,6 +322,8 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
}
const expr = buildExprFromValues(values);
const cmd = `add rule ${family} ${tableName} ${chain} ${textFromExpr(expr)}`.trim();
const reqObj = { family, table: tableName, chain, expr };
Modal.confirm({
title: 'Create rule (JSON)',
@@ -314,25 +336,23 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
</b>
</Text>
<Divider />
<Text strong>Preview:</Text>
<pre style={{ whiteSpace: 'pre-wrap', marginTop: 8 }}>{preview || '(no textual preview available)'}</pre>
<Text strong>Generated nft command:</Text>
<pre style={{ whiteSpace: 'pre-wrap', marginTop: 8 }}>{cmd || '(no textual preview available)'}</pre>
<Divider />
<Text strong>Expression (JSON):</Text>
<pre style={{ whiteSpace: 'pre-wrap', marginTop: 8 }}>{JSON.stringify(expr, null, 2)}</pre>
<Text strong>Full JSON NFT request:</Text>
<pre style={{ whiteSpace: 'pre-wrap', marginTop: 8 }}>{JSON.stringify(reqObj, null, 2)}</pre>
</div>
),
okText: 'Create',
onOk: async () => {
setLoading(true);
try {
const req = { family, table: tableName, chain, expr };
const res = await createRuleJson(req);
const res = await createRuleJson(reqObj);
if (res && res.rc === 0) {
message.success('Rule created');
if (onCreated) await onCreated();
form.resetFields(['advanced']);
} else {
// server returned 2xx but rc != 0
message.error(`Create failed: ${res?.stderr ?? 'unknown error'}`);
}
} catch (err: any) {
@@ -366,7 +386,7 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
},
});
},
[form, preview, onCreated],
[form, onCreated],
);
// prepare chain options for currently selected table
@@ -412,6 +432,7 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
onFinish={handleCreate}
onValuesChange={onValuesChange}
>
{/* Table selection */}
<Row gutter={16}>
<Col xs={24} sm={12}>
<Form.Item name="tableSelect" label="Table (family:name)" rules={[{ required: true }]}>
@@ -446,6 +467,7 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
</Col>
</Row>
{/* Chain selection */}
<Row gutter={16}>
<Col xs={24} sm={12}>
<Form.Item name="chainSelect" label="Chain (select)">
@@ -467,6 +489,7 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
</Col>
</Row>
{/* Protocol / addresses */}
<Row gutter={16}>
<Col xs={24} sm={8}>
<Form.Item label="Protocol selection" style={{ marginBottom: 0 }}>
@@ -510,6 +533,7 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
</Col>
</Row>
{/* Ports / action */}
<Row gutter={16}>
<Col xs={24} sm={6}>
<Form.Item name="sport" label="Source Port">
@@ -532,6 +556,7 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
</Col>
</Row>
{/* Advanced */}
<Row>
<Col span={24}>
<Form.Item name="advanced" label="Advanced (optional)">
@@ -551,22 +576,28 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
<Form.Item label="Preview">
<Space style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ flex: 1, marginRight: 12 }}>
<Text strong>Short preview:</Text>
<Text strong>nft command preview:</Text>
<div style={{ marginTop: 6 }}>
<Text code copyable={{ text: preview || '' }}>
{preview || '(no textual preview available)'}
<Text code copyable={{ text: cmdPreview || '' }}>
{cmdPreview || '(no textual preview available)'}
</Text>
</div>
</div>
<div style={{ width: 320 }}>
<Tooltip title="Copy JSON expr">
<Tooltip title="Click to copy expr JSON. Shift+click to copy full request JSON.">
<Button
icon={<CopyOutlined />}
size="small"
onClick={() => {
if (!exprPreview) return;
navigator.clipboard?.writeText(JSON.stringify(exprPreview, null, 2));
onClick={(e) => {
// shiftKey => copy full request JSON
if (e.shiftKey && requestJsonPreview) {
navigator.clipboard?.writeText(JSON.stringify(requestJsonPreview, null, 2));
message.success('Full request JSON copied');
return;
}
if (!cmdPreview) return;
navigator.clipboard?.writeText(JSON.stringify(cmdPreview, null, 2));
message.success('Expression JSON copied');
}}
/>
@@ -580,9 +611,9 @@ export const RuleBuilder: React.FC<RuleBuilderProps> = ({ onCreated }) => {
</Form>
<Divider />
<Text strong>Expression (JSON):</Text>
<Text strong>Full JSON NFT request:</Text>
<pre style={{ whiteSpace: 'pre-wrap', background: '#f6f6f6', padding: 12 }}>
{JSON.stringify(exprPreview, null, 2)}
{JSON.stringify(requestJsonPreview, null, 2)}
</pre>
</Card>
);