CyberMind-FR
7a9de56ba1
- dashboard.js: KISS stats grid, source chips, type cards, recent devices table - devices.js: KISS filter bar, device table with inline actions, edit/detail modals - emulators.js: KISS emulator cards with status badges, mini tables - mesh.js: KISS peer cards grid, remote devices table Removes external CSS loading (cssLink pattern) and di-* class prefixes. Uses KissTheme.E(), kiss-* classes, and CSS variables throughout. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
331 lines
11 KiB
JavaScript
331 lines
11 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require dom';
|
|
'require ui';
|
|
'require device-intel/api as api';
|
|
'require secubox/kiss-theme';
|
|
|
|
/**
|
|
* Device Intel - Devices List - KISS Style
|
|
* Copyright (C) 2025 CyberMind.fr
|
|
*/
|
|
|
|
return view.extend({
|
|
load: function() {
|
|
return Promise.all([
|
|
api.getDevices(),
|
|
api.getDeviceTypes()
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var devResult = data[0] || {};
|
|
var typesResult = data[1] || {};
|
|
var devices = devResult.devices || [];
|
|
var types = typesResult.types || [];
|
|
var self = this;
|
|
var K = KissTheme;
|
|
|
|
// Build type lookup
|
|
var typeMap = {};
|
|
types.forEach(function(t) { typeMap[t.id] = t; });
|
|
|
|
var inputStyle = 'padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px;';
|
|
|
|
// ── Filter Bar ──
|
|
var filterInput, typeFilter, statusFilter;
|
|
|
|
var filterBar = K.E('div', { 'style': 'display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: center;' }, [
|
|
filterInput = K.E('input', {
|
|
'type': 'text',
|
|
'placeholder': 'Search MAC, hostname, IP, vendor...',
|
|
'style': inputStyle + ' width: 280px;',
|
|
'input': function() { self.applyFilters(devices, typeMap); }
|
|
}),
|
|
typeFilter = K.E('select', {
|
|
'style': inputStyle,
|
|
'change': function() { self.applyFilters(devices, typeMap); }
|
|
}, [
|
|
K.E('option', { value: '' }, 'All Types')
|
|
].concat(types.map(function(t) {
|
|
return K.E('option', { value: t.id }, t.name);
|
|
})).concat([
|
|
K.E('option', { value: 'unknown' }, 'Unknown')
|
|
])),
|
|
statusFilter = K.E('select', {
|
|
'style': inputStyle,
|
|
'change': function() { self.applyFilters(devices, typeMap); }
|
|
}, [
|
|
K.E('option', { value: '' }, 'All Status'),
|
|
K.E('option', { value: 'online' }, 'Online'),
|
|
K.E('option', { value: 'offline' }, 'Offline')
|
|
]),
|
|
K.E('button', {
|
|
'class': 'kiss-btn kiss-btn-blue',
|
|
'style': 'padding: 10px 16px;',
|
|
'click': function() {
|
|
api.refresh().then(function() {
|
|
window.location.href = window.location.pathname + '?' + Date.now();
|
|
});
|
|
}
|
|
}, '🔄 Refresh')
|
|
]);
|
|
|
|
// Store filter elements for later
|
|
this._filterInput = filterInput;
|
|
this._typeFilter = typeFilter;
|
|
this._statusFilter = statusFilter;
|
|
this._typeMap = typeMap;
|
|
|
|
// ── Device Table ──
|
|
var tbody = K.E('tbody', { 'id': 'di-device-tbody' });
|
|
this.renderDeviceRows(tbody, devices, typeMap);
|
|
|
|
var table = K.E('table', { 'class': 'kiss-table' }, [
|
|
K.E('thead', {}, K.E('tr', {}, [
|
|
K.E('th', { 'style': 'width: 40px;' }, ''),
|
|
K.E('th', {}, 'Device'),
|
|
K.E('th', {}, 'MAC'),
|
|
K.E('th', {}, 'IP'),
|
|
K.E('th', {}, 'Vendor'),
|
|
K.E('th', {}, 'Type'),
|
|
K.E('th', {}, 'Zone'),
|
|
K.E('th', {}, 'Source'),
|
|
K.E('th', { 'style': 'width: 140px;' }, 'Actions')
|
|
])),
|
|
tbody
|
|
]);
|
|
|
|
var content = K.E('div', {}, [
|
|
// Page Header
|
|
K.E('div', { 'style': 'margin-bottom: 20px;' }, [
|
|
K.E('h2', { 'style': 'margin: 0; font-size: 24px; display: flex; align-items: center; gap: 10px;' }, [
|
|
K.E('span', {}, '📱'),
|
|
'Devices'
|
|
]),
|
|
K.E('p', { 'style': 'margin: 4px 0 0; color: var(--kiss-muted, #94a3b8); font-size: 14px;' },
|
|
'Network devices discovered across all data sources')
|
|
]),
|
|
|
|
// Filter and Table Card
|
|
K.E('div', { 'class': 'kiss-card' }, [
|
|
filterBar,
|
|
table
|
|
])
|
|
]);
|
|
|
|
return KissTheme.wrap(content, 'admin/secubox/services/device-intel/devices');
|
|
},
|
|
|
|
vendorDisplay: function(d) {
|
|
var vendor = d.vendor || '';
|
|
var mac = (d.mac || '').toLowerCase();
|
|
|
|
// Locally-administered MAC detection (bit 1 of second hex digit)
|
|
var isLocal = false;
|
|
if (mac.length >= 2) {
|
|
var c = mac.charAt(1);
|
|
if ('2367abef'.indexOf(c) !== -1) isLocal = true;
|
|
}
|
|
|
|
// Emoji by vendor/type
|
|
if (mac.indexOf('mesh-') === 0)
|
|
return ['\u{1F310} ', vendor || 'Mesh Peer'];
|
|
if (vendor === 'Docker')
|
|
return ['\u{1F4E6} ', vendor];
|
|
if (vendor === 'QEMU/KVM')
|
|
return ['\u{1F5A5} ', vendor];
|
|
if (d.randomized)
|
|
return ['\u{1F3AD} ', vendor || 'Randomized'];
|
|
if (isLocal && !vendor)
|
|
return ['\u{1F47B} ', 'Virtual'];
|
|
|
|
// IoT flag from common vendors
|
|
var iotVendors = ['Espressif', 'Tuya', 'Shelly', 'Sonoff', 'Xiaomi',
|
|
'Philips Hue', 'TP-Link', 'Silicon Labs', 'Bosch'];
|
|
if (vendor && iotVendors.indexOf(vendor) !== -1)
|
|
return ['\u{1F4E1} ', vendor];
|
|
|
|
return ['', vendor || '-'];
|
|
},
|
|
|
|
renderDeviceRows: function(tbody, devices, typeMap) {
|
|
var self = this;
|
|
var K = KissTheme;
|
|
dom.content(tbody, devices.map(function(d) {
|
|
var typeInfo = typeMap[d.device_type] || {};
|
|
return K.E('tr', { 'data-mac': d.mac }, [
|
|
K.E('td', {}, K.E('span', {
|
|
'style': 'display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ' + (d.online ? 'var(--kiss-green, #22c55e)' : 'var(--kiss-muted, #64748b)') + ';',
|
|
'title': d.online ? 'Online' : 'Offline'
|
|
})),
|
|
K.E('td', {}, [
|
|
K.E('strong', {}, d.label || d.hostname || '-'),
|
|
d.emulator_source
|
|
? K.E('small', { 'style': 'display: block; color: var(--kiss-muted); font-size: 11px;' },
|
|
d.emulator_source)
|
|
: null
|
|
].filter(Boolean)),
|
|
K.E('td', { 'style': 'font-family: monospace; font-size: 12px;' }, d.mac || '-'),
|
|
K.E('td', {}, d.ip || '-'),
|
|
K.E('td', {}, (function() {
|
|
var v = self.vendorDisplay(d);
|
|
return [v[0], v[1]].join('');
|
|
})()),
|
|
K.E('td', {}, [
|
|
typeInfo.name
|
|
? K.E('span', {
|
|
'style': 'border-left: 3px solid ' + (typeInfo.color || '#6c757d') + '; padding-left: 8px;'
|
|
}, typeInfo.name)
|
|
: K.E('span', { 'style': 'color: var(--kiss-muted);' }, d.device_type || '-')
|
|
]),
|
|
K.E('td', {}, d.cg_zone || '-'),
|
|
K.E('td', {}, d.source_node || 'local'),
|
|
K.E('td', {}, [
|
|
K.E('button', {
|
|
'class': 'kiss-btn kiss-btn-blue',
|
|
'style': 'padding: 4px 10px; font-size: 12px; margin-right: 6px;',
|
|
'click': function() { self.handleEditDevice(d, typeMap); }
|
|
}, 'Edit'),
|
|
K.E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'padding: 4px 10px; font-size: 12px;',
|
|
'click': function() { self.handleShowDetail(d); }
|
|
}, 'Detail')
|
|
])
|
|
]);
|
|
}));
|
|
|
|
if (devices.length === 0) {
|
|
dom.content(tbody, K.E('tr', {},
|
|
K.E('td', { 'colspan': '9', 'style': 'text-align: center; color: var(--kiss-muted); padding: 40px;' },
|
|
'No devices found')));
|
|
}
|
|
},
|
|
|
|
applyFilters: function(allDevices, typeMap) {
|
|
var text = (this._filterInput.value || '').toLowerCase();
|
|
var typeVal = this._typeFilter.value;
|
|
var statusVal = this._statusFilter.value;
|
|
|
|
var filtered = allDevices.filter(function(d) {
|
|
// Text filter
|
|
if (text) {
|
|
var searchable = [d.mac, d.ip, d.hostname, d.label, d.vendor]
|
|
.filter(Boolean).join(' ').toLowerCase();
|
|
if (searchable.indexOf(text) === -1) return false;
|
|
}
|
|
// Type filter
|
|
if (typeVal && (d.device_type || 'unknown') !== typeVal) return false;
|
|
// Status filter
|
|
if (statusVal === 'online' && !d.online) return false;
|
|
if (statusVal === 'offline' && d.online) return false;
|
|
return true;
|
|
});
|
|
|
|
var tbody = document.getElementById('di-device-tbody');
|
|
if (tbody) this.renderDeviceRows(tbody, filtered, typeMap);
|
|
},
|
|
|
|
handleEditDevice: function(device, typeMap) {
|
|
var typeSelect, labelInput;
|
|
var types = Object.keys(typeMap);
|
|
var inputStyle = 'width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--kiss-line, #1e293b); background: var(--kiss-bg2, #111827); color: var(--kiss-text, #e2e8f0); font-size: 14px; margin-top: 6px;';
|
|
|
|
ui.showModal('✏️ Edit Device: ' + (device.label || device.hostname || device.mac), [
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 16px;' }, [
|
|
E('div', {}, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase;' }, 'Label'),
|
|
labelInput = E('input', {
|
|
'type': 'text',
|
|
'value': device.label || '',
|
|
'placeholder': device.hostname || device.mac,
|
|
'style': inputStyle
|
|
})
|
|
]),
|
|
E('div', {}, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted); text-transform: uppercase;' }, 'Device Type'),
|
|
typeSelect = E('select', { 'style': inputStyle }, [
|
|
E('option', { value: '' }, '-- Auto --')
|
|
].concat(types.map(function(tid) {
|
|
var opt = E('option', { value: tid }, typeMap[tid].name);
|
|
if (device.device_type === tid) opt.selected = true;
|
|
return opt;
|
|
})))
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'padding: 10px 20px;',
|
|
'click': ui.hideModal
|
|
}, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'style': 'padding: 10px 20px;',
|
|
'click': function() {
|
|
var newType = typeSelect.value;
|
|
var newLabel = labelInput.value.trim();
|
|
|
|
ui.hideModal();
|
|
api.setDeviceMeta(device.mac, newType, newLabel).then(function(res) {
|
|
if (res && res.success) {
|
|
ui.addNotification(null, E('p', {}, 'Device updated.'), 'info');
|
|
window.location.href = window.location.pathname + '?' + Date.now();
|
|
} else {
|
|
ui.addNotification(null, E('p', {},
|
|
'Update failed: ' + (res ? res.error : '')), 'danger');
|
|
}
|
|
});
|
|
}
|
|
}, '💾 Save')
|
|
])
|
|
]);
|
|
},
|
|
|
|
handleShowDetail: function(device) {
|
|
var rows = [
|
|
['MAC', device.mac],
|
|
['IP', device.ip || '-'],
|
|
['Hostname', device.hostname || '-'],
|
|
['Label', device.label || '-'],
|
|
['Vendor', device.vendor || '-'],
|
|
['Online', device.online ? '🟢 Yes' : '⚫ No'],
|
|
['Connection', device.connection_type || '-'],
|
|
['Interface', device.iface || '-'],
|
|
['Randomized MAC', device.randomized ? 'Yes' : 'No'],
|
|
['MAC Guardian Status', device.mg_status || '-'],
|
|
['NAC Zone', device.cg_zone || '-'],
|
|
['NAC Status', device.cg_status || '-'],
|
|
['Device Type', device.device_type || '-'],
|
|
['Type Source', device.device_type_source || '-'],
|
|
['Emulator', device.emulator_source || '-'],
|
|
['Risk Score', String(device.risk_score || 0)],
|
|
['RX Bytes', String(device.rx_bytes || 0)],
|
|
['TX Bytes', String(device.tx_bytes || 0)],
|
|
['Source Node', device.source_node || 'local']
|
|
];
|
|
|
|
ui.showModal('🔍 Device Detail: ' + (device.label || device.hostname || device.mac), [
|
|
E('table', { 'style': 'width: 100%; border-collapse: collapse;' },
|
|
rows.map(function(r) {
|
|
return E('tr', {}, [
|
|
E('td', { 'style': 'font-weight: bold; padding: 8px 16px 8px 0; color: var(--kiss-muted); border-bottom: 1px solid var(--kiss-line, #1e293b);' }, r[0]),
|
|
E('td', { 'style': 'padding: 8px 0; border-bottom: 1px solid var(--kiss-line, #1e293b);' }, r[1])
|
|
]);
|
|
})
|
|
),
|
|
E('div', { 'style': 'text-align: right; margin-top: 20px;' },
|
|
E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'padding: 10px 20px;',
|
|
'click': ui.hideModal
|
|
}, 'Close'))
|
|
]);
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|