gustavosantos/MIKROTIK-RMM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: non-blocking bulk-add, CORS hardening, credential preset access control (#31)

Browse Source 
* devices: hide discovered neighbors that are already managed

Discovered Devices showed every unresolved MikroTik neighbor, even when
the neighbor was obviously the same device a managed node is reporting
through a different link / MAC / alias. Since we already know every
managed device interface MAC, primary IP, and system identity, we can
flag those rows.

- /api/devices/discovered now annotates each row with duplicate_of_device_id
  and duplicate_of_device_name when the neighbor matches a managed device
  by interface MAC, primary IP, or system identity.
- Add a Hide duplicates of managed devices toggle (default on) above the
  table, with a count of how many matches were found. When enabled, the
  list hides matched rows; when disabled, matches stay visible but are
  dimmed and tagged Already managed so the origin is clear.
- Suppress the Add to Manager action for rows that are already a
  managed device, since adding them would create a second record for the
  same hardware.

Co-authored-by: Denis <denis-ev@users.noreply.github.com>

* devices: safer duplicate handling, try-all safeguards, and timezone/firmware fixes

Co-authored-by: Denis <denis-ev@users.noreply.github.com>

* Non-blocking follow-ups: parsePort util, tests, bulk-add queue, preset rate limit

Co-authored-by: Denis <denis-ev@users.noreply.github.com>

* fix(security): tighten CORS, Redis rate limits, and preset access controls

Require explicit CORS origins in production, align Socket.IO CORS with HTTP,
default Docker Compose to local HTTPS origins, and remove the in-memory
mutation limiter in favor of Redis. Also add operator-use flags for credential
presets in the UI and harden bulk-add job access and client error messages.

Co-authored-by: Denis <denis-ev@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
This commit is contained in:
Denis
2026-04-21 19:54:35 -07:00
committed by GitHub
co-authored by Cursor Agent
parent 87a6d9161a
commit a12f52ebc7
28 changed files with 1912 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/devices/AddDeviceModal.tsx
+3 -2
View File
@@ -7,6 +7,7 @@ import {
type DuplicateSerialError,
} from '../../services/api';
import ConfirmDuplicateModal from './ConfirmDuplicateModal';
import { parsePort } from '../../utils/parsePort';
interface Props {
onClose: () => void;
@@ -62,10 +63,10 @@ export default function AddDeviceModal({ onClose, onSuccess, prefill }: Props) {
return {
name: form.name,
ip_address: form.ip_address,
api_port: parseInt(form.api_port, 10),
api_port: parsePort(form.api_port, 8728),
api_username: form.api_username,
api_password: form.api_password,
ssh_port: parseInt(form.ssh_port, 10),
ssh_port: parsePort(form.ssh_port, 22),
ssh_username: form.ssh_username || undefined,
ssh_password: form.ssh_password || undefined,
device_type: form.device_type as import('../../types').DeviceType,
frontend/src/components/devices/EditDeviceModal.tsx
+3 -2
View File
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState, FormEvent } from 'react';
import { useQuery } from '@tanstack/react-query';
import { X, CheckCircle, AlertCircle, Loader2, Network } from 'lucide-react';
import { devicesApi } from '../../services/api';
import { parsePort } from '../../utils/parsePort';
import type { Device, DeviceType, IpAddress } from '../../types';
interface Props {
@@ -90,9 +91,9 @@ export default function EditDeviceModal({ device, onClose, onSuccess }: Props) {
const payload: Record<string, unknown> = {
name: form.name,
ip_address: form.ip_address,
api_port: parseInt(form.api_port, 10) || 8728,
api_port: parsePort(form.api_port, 8728),
api_username: form.api_username,
ssh_port: parseInt(form.ssh_port, 10) || 22,
ssh_port: parsePort(form.ssh_port, 22),
ssh_username: form.ssh_username || null,
device_type: form.device_type as DeviceType,
notes: form.notes,
frontend/src/components/devices/TryAllDiscoveredModal.tsx
+113 -61
View File
@@ -1,13 +1,14 @@
import { useMemo, useRef, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { X, Loader2, CheckCircle, AlertCircle, KeyRound } from 'lucide-react';
import {
credentialPresetsApi,
devicesApi,
type BulkAddDeviceItem,
type DiscoveredDevice,
type DuplicateSerialError,
} from '../../services/api';
import type { DeviceType } from '../../types';
import { parsePort } from '../../utils/parsePort';
interface Props {
discoveredDevices: DiscoveredDevice[];
@@ -17,11 +18,6 @@ interface Props {
type ResultItem = { ip: string; identity: string; ok: boolean; message: string };
function isDuplicateSerialError(v: unknown): v is DuplicateSerialError {
if (!v || typeof v !== 'object') return false;
const obj = v as { error?: unknown; code?: unknown; existing_device?: unknown };
return obj.error === 'duplicate_serial' && obj.code === 'duplicate_serial' && !!obj.existing_device;
}
export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSuccess }: Props) {
const [mode, setMode] = useState<'preset' | 'manual'>('preset');
const [presetId, setPresetId] = useState<number | null>(null);
@@ -37,13 +33,14 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
const [running, setRunning] = useState(false);
const [results, setResults] = useState<ResultItem[] | null>(null);
const [cancelled, setCancelled] = useState(false);
const [jobId, setJobId] = useState<string | null>(null);
const [progress, setProgress] = useState<{ current: number; total: number; currentName: string }>({
current: 0,
total: 0,
currentName: '',
});
const [error, setError] = useState('');
const cancelRef = useRef(false);
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
const { data: presets = [] } = useQuery({
queryKey: ['credential-presets'],
@@ -56,11 +53,75 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
[discoveredDevices]
);
useEffect(() => {
return () => {
if (pollRef.current) clearInterval(pollRef.current);
};
}, []);
const buildItems = (): BulkAddDeviceItem[] => {
return targets.map((d) => {
const name = d.identity || d.address;
if (mode === 'preset') {
return {
name,
ip_address: d.address,
credential_preset_id: presetId!,
};
}
return {
name,
ip_address: d.address,
api_username: manual.api_username,
api_password: manual.api_password,
api_port: parsePort(manual.api_port, 8728),
ssh_username: manual.ssh_username || undefined,
ssh_password: manual.ssh_password || undefined,
ssh_port: parsePort(manual.ssh_port, 22),
device_type: manual.device_type,
};
});
};
const pollOnce = async (id: string) => {
try {
const { data } = await devicesApi.bulkAddStatus(id);
const total = typeof data.total === 'number' ? data.total : 0;
const processed = typeof data.processed === 'number' ? data.processed : 0;
const currentName = typeof data.current_name === 'string' ? data.current_name : '';
setProgress({
current: Math.min(processed, total || 1),
total: total || targets.length,
currentName,
});
if (Array.isArray(data.results)) {
setResults(data.results as ResultItem[]);
}
const st = String(data.status || '');
if (st === 'completed' || st === 'failed' || st === 'cancelled') {
if (pollRef.current) {
clearInterval(pollRef.current);
pollRef.current = null;
}
setRunning(false);
setJobId(null);
if (st === 'cancelled') setCancelled(true);
if (st === 'failed' && data.error) {
setError(String(data.error));
}
const ok = (data.results as ResultItem[] | undefined)?.filter((r) => r.ok).length ?? 0;
if (ok > 0) onSuccess();
}
} catch {
// keep polling unless job missing
}
};
const handleRun = async () => {
setError('');
setCancelled(false);
cancelRef.current = false;
setResults(null);
setJobId(null);
if (!targets.length) {
setError('No discovered devices with a usable IP address.');
return;
@@ -76,52 +137,36 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
setRunning(true);
setProgress({ current: 0, total: targets.length, currentName: '' });
const out: ResultItem[] = [];
for (let i = 0; i < targets.length; i++) {
if (cancelRef.current) break;
const d = targets[i];
const name = d.identity || d.address;
setProgress({ current: i + 1, total: targets.length, currentName: name });
const payload =
mode === 'preset'
? {
name,
ip_address: d.address,
credential_preset_id: presetId!,
}
: {
name,
ip_address: d.address,
api_username: manual.api_username,
api_password: manual.api_password,
api_port: parseInt(manual.api_port, 10) || 8728,
ssh_username: manual.ssh_username || undefined,
ssh_password: manual.ssh_password || undefined,
ssh_port: parseInt(manual.ssh_port, 10) || 22,
device_type: manual.device_type,
};
try {
await devicesApi.create(payload);
out.push({ ip: d.address, identity: name, ok: true, message: 'Added' });
setResults([...out]);
} catch (err: unknown) {
const data = (err as { response?: { data?: unknown } })?.response?.data;
const msg = isDuplicateSerialError(data)
? `Duplicate serial mismatch: candidate ${data.candidate.serial_number}, existing ${data.existing_device.serial_number}. Review manually before combining.`
: ((data as { message?: string; error?: string } | undefined)?.message ||
(typeof (data as { error?: unknown } | undefined)?.error === 'string'
? String((data as { error?: string }).error)
: '') ||
'Failed');
out.push({ ip: d.address, identity: name, ok: false, message: msg });
setResults([...out]);
try {
const items = buildItems();
const { data } = await devicesApi.bulkAddEnqueue(items);
const id = data.job_id;
setJobId(id);
setProgress({ current: 0, total: data.total, currentName: '' });
await pollOnce(id);
if (pollRef.current) clearInterval(pollRef.current);
pollRef.current = setInterval(() => {
void pollOnce(id);
}, 1200);
} catch (err: unknown) {
const msg =
(err as { response?: { data?: { error?: string } } })?.response?.data?.error ||
'Failed to start bulk add job';
setError(msg);
setRunning(false);
}
};
const handleCancel = async () => {
if (jobId) {
try {
await devicesApi.bulkAddCancel(jobId);
} catch {
// ignore
}
}
setResults(out);
setRunning(false);
setProgress((p) => ({ ...p, currentName: '' }));
if (cancelRef.current) setCancelled(true);
setCancelled(true);
};
const okCount = results?.filter((r) => r.ok).length ?? 0;
@@ -140,12 +185,14 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
<div className="p-5 space-y-4">
<p className="text-sm text-gray-600 dark:text-slate-300">
Attempt to add <strong>{targets.length}</strong> discovered device(s) in one run.
Progress runs <strong>on the server</strong> — you can leave this page and reopen later (job id is shown while running).
</p>
<div className="flex gap-2">
<button
type="button"
onClick={() => setMode('preset')}
disabled={running}
className={`px-3 py-1.5 rounded-lg text-sm border ${mode === 'preset' ? 'bg-blue-600 text-white border-blue-600' : 'text-gray-600 dark:text-slate-300 border-gray-300 dark:border-slate-600'}`}
>
Use Preset
@@ -153,6 +200,7 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
<button
type="button"
onClick={() => setMode('manual')}
disabled={running}
className={`px-3 py-1.5 rounded-lg text-sm border ${mode === 'manual' ? 'bg-blue-600 text-white border-blue-600' : 'text-gray-600 dark:text-slate-300 border-gray-300 dark:border-slate-600'}`}
>
Enter Manually
@@ -162,7 +210,7 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
{mode === 'preset' ? (
<div>
<label className="label flex items-center gap-1.5"><KeyRound className="w-3.5 h-3.5" />Credential Preset</label>
<select className="input" value={presetId ?? ''} onChange={(e) => setPresetId(e.target.value ? parseInt(e.target.value, 10) : null)}>
<select className="input" value={presetId ?? ''} onChange={(e) => setPresetId(e.target.value ? parseInt(e.target.value, 10) : null)} disabled={running}>
<option value="">Select preset...</option>
{presets.map((p) => (
<option key={p.id} value={p.id}>
@@ -175,31 +223,35 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
<div className="grid grid-cols-2 gap-3">
<div>
<label className="label">API Username *</label>
<input className="input" value={manual.api_username} onChange={(e) => setManual((m) => ({ ...m, api_username: e.target.value }))} />
<input className="input" value={manual.api_username} disabled={running} onChange={(e) => setManual((m) => ({ ...m, api_username: e.target.value }))} />
</div>
<div>
<label className="label">API Port</label>
<input className="input" type="number" value={manual.api_port} onChange={(e) => setManual((m) => ({ ...m, api_port: e.target.value }))} />
<input className="input" type="number" value={manual.api_port} disabled={running} onChange={(e) => setManual((m) => ({ ...m, api_port: e.target.value }))} />
</div>
<div className="col-span-2">
<label className="label">API Password *</label>
<input className="input" type="password" value={manual.api_password} onChange={(e) => setManual((m) => ({ ...m, api_password: e.target.value }))} />
<input className="input" type="password" value={manual.api_password} disabled={running} onChange={(e) => setManual((m) => ({ ...m, api_password: e.target.value }))} />
</div>
<div>
<label className="label">SSH Username</label>
<input className="input" value={manual.ssh_username} onChange={(e) => setManual((m) => ({ ...m, ssh_username: e.target.value }))} />
<input className="input" value={manual.ssh_username} disabled={running} onChange={(e) => setManual((m) => ({ ...m, ssh_username: e.target.value }))} />
</div>
<div>
<label className="label">SSH Port</label>
<input className="input" type="number" value={manual.ssh_port} onChange={(e) => setManual((m) => ({ ...m, ssh_port: e.target.value }))} />
<input className="input" type="number" value={manual.ssh_port} disabled={running} onChange={(e) => setManual((m) => ({ ...m, ssh_port: e.target.value }))} />
</div>
<div className="col-span-2">
<label className="label">SSH Password</label>
<input className="input" type="password" value={manual.ssh_password} onChange={(e) => setManual((m) => ({ ...m, ssh_password: e.target.value }))} />
<input className="input" type="password" value={manual.ssh_password} disabled={running} onChange={(e) => setManual((m) => ({ ...m, ssh_password: e.target.value }))} />
</div>
</div>
)}
{jobId && running && (
<p className="text-xs text-gray-500 dark:text-slate-400 font-mono break-all">Job: {jobId}</p>
)}
{error && (
<div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
<AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" />
@@ -226,7 +278,7 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
<div className="flex justify-end">
<button
type="button"
onClick={() => { cancelRef.current = true; }}
onClick={() => void handleCancel()}
className="btn-secondary text-xs py-1 px-2"
>
Stop / Cancel
@@ -279,7 +331,7 @@ export default function TryAllDiscoveredModal({ discoveredDevices, onClose, onSu
<button type="button" onClick={onClose} className="btn-secondary">Close</button>
<button
type="button"
onClick={handleRun}
onClick={() => void handleRun()}
disabled={running}
className="btn-primary flex items-center gap-2"
>
frontend/src/components/settings/CredentialPresetsSettings.tsx
+31 -2
View File
@@ -9,6 +9,7 @@ import {
type CredentialPreset,
type CredentialPresetInput,
} from '../../services/api';
import { parsePort } from '../../utils/parsePort';
interface FormState {
name: string;
@@ -20,6 +21,7 @@ interface FormState {
ssh_port: string;
notes: string;
clear_ssh_password: boolean;
allow_operator_use: boolean;
}
const EMPTY_FORM: FormState = {
@@ -32,20 +34,22 @@ const EMPTY_FORM: FormState = {
ssh_port: '22',
notes: '',
clear_ssh_password: false,
allow_operator_use: true,
};
function toInput(f: FormState, isEdit: boolean): CredentialPresetInput {
const input: CredentialPresetInput = {
name: f.name || undefined,
api_username: f.api_username || undefined,
api_port: f.api_port ? parseInt(f.api_port, 10) : null,
api_port: f.api_port ? parsePort(f.api_port, 8728) : null,
ssh_username: f.ssh_username || null,
ssh_port: f.ssh_port ? parseInt(f.ssh_port, 10) : null,
ssh_port: f.ssh_port ? parsePort(f.ssh_port, 22) : null,
notes: f.notes || null,
};
if (f.api_password) input.api_password = f.api_password;
if (f.ssh_password) input.ssh_password = f.ssh_password;
else if (isEdit && f.clear_ssh_password) input.clear_ssh_password = true;
input.allow_operator_use = f.allow_operator_use;
return input;
}
@@ -80,6 +84,7 @@ export default function CredentialPresetsSettings({ isAdmin }: { isAdmin: boolea
ssh_port: p.ssh_port != null ? String(p.ssh_port) : '',
notes: p.notes ?? '',
clear_ssh_password: false,
allow_operator_use: p.allow_operator_use !== false,
});
setError('');
setModal({ mode: 'edit', id: p.id });
@@ -159,6 +164,11 @@ export default function CredentialPresetsSettings({ isAdmin }: { isAdmin: boolea
<th className="table-header px-4 py-2.5 text-left">API</th>
<th className="table-header px-4 py-2.5 text-left">SSH</th>
<th className="table-header px-4 py-2.5 text-left">Notes</th>
{isAdmin && (
<th className="table-header px-4 py-2.5 text-left whitespace-nowrap">
Operator access
</th>
)}
<th className="table-header px-4 py-2.5 w-24" />
</tr>
</thead>
@@ -190,6 +200,11 @@ export default function CredentialPresetsSettings({ isAdmin }: { isAdmin: boolea
<td className="px-4 py-2.5 text-xs text-gray-500 dark:text-slate-400 max-w-xs truncate">
{p.notes || <span className="text-gray-300 dark:text-slate-600">—</span>}
</td>
{isAdmin && (
<td className="px-4 py-2.5 text-xs text-gray-500 dark:text-slate-400 whitespace-nowrap">
{p.allow_operator_use !== false ? 'All users' : 'Admins only'}
</td>
)}
<td className="px-4 py-2.5">
{isAdmin && (
<div className="flex items-center gap-1">
@@ -351,6 +366,20 @@ export default function CredentialPresetsSettings({ isAdmin }: { isAdmin: boolea
/>
</div>
<label className="flex items-start gap-2 text-sm text-gray-600 dark:text-slate-400 select-none">
<input
type="checkbox"
className="rounded mt-0.5"
checked={form.allow_operator_use}
onChange={(e) => set('allow_operator_use', e.target.checked)}
/>
<span>
Allow operator accounts to select this preset when adding or
updating devices. Uncheck for admin-only presets (for example
shared break-glass credentials).
</span>
</label>
{error && (
<div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
<AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" />