@webwriter/network
Version:
Visualization of network topologies. Can represent different kinds of networks.
289 lines (255 loc) • 12.3 kB
text/typescript
import { SlButton, SlDetails, SlInput } from '@shoelace-style/shoelace';
import { NetworkComponent } from '../..';
import { DataHandlingDecorator } from '../components/dataDecorators/DataHandlingDecorator';
import { RoutableDecorator } from '../components/dataDecorators/Routable';
import { SwitchableDecorator } from '../components/dataDecorators/Switchable';
import { TableType } from '../event-handlers/packet-simulator';
import { AlertHelper } from './AlertHelper';
import { RoutingData } from './routingData';
import { msg } from '@lit/localize';
export class TableHelper {
static addRow(tableID: string, tableType: TableType, network: NetworkComponent, tableData?: any[]) {
var table = network.renderRoot.querySelector('#' + tableID) as HTMLTableElement;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1: HTMLTableCellElement = row.insertCell(0);
var element1 = document.createElement('input');
element1.type = 'checkbox';
element1.name = 'chkbox[]';
cell1.appendChild(element1);
switch (tableType) {
case 'ArpTable':
var cell2 = row.insertCell(1);
var element2 = document.createElement('sl-input') as SlInput;
element2.placeholder = '0.0.0.0';
element2.pattern = '^(?:[0-9]{1,3}.){3}[0-9]{1,3}$';
if (tableData != undefined) element2.value = tableData[0];
var cell3 = row.insertCell(2);
var element3 = document.createElement('sl-input') as SlInput;
element3.placeholder = 'FF:FF:FF:FF:FF:FF';
element3.pattern = '/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/';
if (tableData != undefined) element3.value = tableData[1];
cell2.appendChild(element2);
cell3.appendChild(element3);
break;
case 'RoutingTable':
var cell2 = row.insertCell(1);
var element2 = document.createElement('sl-input') as SlInput;
element2.placeholder = '0.0.0.0';
element2.pattern = '^(?:[0-9]{1,3}.){3}[0-9]{1,3}$';
if (tableData != undefined) element2.value = tableData[0];
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement('sl-input') as SlInput;
element3.placeholder = 'on-link / 0.0.0.0';
if (tableData != undefined) element3.value = tableData[1];
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement('sl-input') as SlInput;
element4.type = 'number';
element4.min = 0;
element4.max = 32;
if (tableData != undefined) element4.value = tableData[2];
cell4.appendChild(element4);
var cell = row.insertCell(4);
var element = document.createElement('sl-input') as SlInput;
element.type = 'number';
element.min = '0';
if (tableData != undefined) element.value = tableData[3];
cell.appendChild(element);
break;
case 'MacAddressTable':
var cell2 = row.insertCell(1);
var element2 = document.createElement('sl-input') as SlInput;
element2.type = 'number';
element2.min = '0';
if (tableData != undefined) element2.value = tableData[0];
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement('sl-input') as SlInput;
element3.placeholder = 'FF:FF:FF:FF:FF:FF';
element3.pattern = '/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/';
if (tableData != undefined) element3.value = tableData[1];
cell3.appendChild(element3);
break;
}
}
static deleteRow(tableID: string, network: NetworkComponent) {
try {
var table = network.renderRoot.querySelector('#' + tableID) as HTMLTableElement;
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0] as HTMLInputElement;
if (null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
static updateTable(tableID: string, tableType: TableType, network: NetworkComponent) {
//gets table
var oTable = network.renderRoot.querySelector('#' + tableID) as HTMLTableElement;
//gets rows of table
var rowLength = oTable.rows.length;
let nodeId: string;
let node: DataHandlingDecorator;
switch (tableType) {
case 'ArpTable':
nodeId = tableID.split('-')[2];
node = network._graph.$('#' + nodeId).data() as RoutableDecorator;
(node as RoutableDecorator).arpTableIpMac = new Map();
(node as RoutableDecorator).arpTableMacIp = new Map();
break;
case 'MacAddressTable':
nodeId = tableID.split('-')[3];
node = network._graph.$('#' + nodeId).data() as SwitchableDecorator;
(node as SwitchableDecorator).macAddressTable = new Map();
break;
case 'RoutingTable':
nodeId = tableID.split('-')[2];
node = network._graph.$('#' + nodeId).data() as RoutableDecorator;
(node as RoutableDecorator).routingTable = new Map();
break;
}
//loops through rows (skip header row)
for (let i = 1; i < rowLength; i++) {
//gets cells of current row
var oCells = oTable.rows.item(i)!.cells;
//gets amount of cells of current row
var cellLength = oCells.length;
let cellData = [];
//loops through each cell in current row
for (var j = 1; j < cellLength; j++) {
var cellVal: SlInput = oCells.item(j)!.childNodes[0] as SlInput;
cellData.push(cellVal.value);
}
switch (tableType) {
case 'ArpTable':
(node as RoutableDecorator).arpTableIpMac.set(cellData[0], cellData[1]);
(node as RoutableDecorator).arpTableMacIp.set(cellData[1], cellData[0]);
break;
case 'MacAddressTable':
(node as SwitchableDecorator).macAddressTable.set(cellData[0], +cellData[1]);
break;
case 'RoutingTable':
let port: number = +cellData[3];
(node as RoutableDecorator).routingTable.set(
cellData[0],
new RoutingData(
cellData[0],
cellData[1],
+cellData[2],
node.portData.get(port)!.get('Name'),
port
)
);
break;
}
}
AlertHelper.toastAlert('success', 'check2-circle', '', msg('Your table is saved!'));
}
/**
*
* @param tableId
* @param tableType
* @param tableData (ip,mac) for ArpTable
* @param network
*/
static reloadTable(tableId: string, tableType: TableType, tableData: any, network: NetworkComponent) {
var table = network.renderRoot.querySelector('#' + tableId) as HTMLTableElement;
switch (tableType) {
case 'ArpTable':
table.innerHTML = '<tr><td></td><td>IP</td><td>MAC</td></tr>';
(tableData as Map<string, string>).forEach((mac, ip) => {
TableHelper.addRow(tableId, tableType, network, [ip, mac]);
});
break;
case 'MacAddressTable':
table.innerHTML = '<tr><td></td><td>Port</td><td>MAC</td></tr>';
(tableData as Map<string, number>).forEach((port, mac) => {
TableHelper.addRow(tableId, tableType, network, [port, mac]);
});
break;
case 'RoutingTable':
table.innerHTML = `<tr><td></td><td>ID</td><td>${msg('Gateway')}</td><td>${msg('Bitmask')}</td><td>Port</td></tr>`;
(tableData as Map<string, RoutingData>).forEach((routingData) => {
TableHelper.addRow(tableId, tableType, network, [
routingData.destination,
routingData.gateway,
routingData.bitmask,
routingData.port,
]);
});
break;
}
}
static initTable(nodeId: string, tableType: TableType, network: NetworkComponent): void {
let label = '';
let tableId = '';
let tableCols = '';
switch (tableType) {
case 'ArpTable':
label = msg('ARP Table');
tableId = 'arp-table-' + nodeId;
tableCols = '<tr><td></td><td>IP</td><td>MAC</td></tr>';
break;
case 'RoutingTable':
label = msg('Routing Table');
tableId = 'routing-table-' + nodeId;
tableCols = `<tr><td></td><td>ID</td><td>${msg('Gateway')}</td><td>${msg('Bitmask')}</td><td>Port</td></tr>`;
break;
case 'MacAddressTable':
label = msg('Mac Address Table');
tableId = 'mac-address-table-' + nodeId;
tableCols = '<tr><td></td><td>Port</td><td>MAC</td></tr>';
break;
}
let detail = network.renderRoot.querySelector('#details-for-' + tableId) as SlDetails;
if (detail == null) {
detail = document.createElement('sl-details') as SlDetails;
detail.id = '#details-for-' + tableId;
detail.summary = label + ' of ' + nodeId;
detail.className = 'details-for-table';
detail.open = true;
(network.renderRoot.querySelector('#tables-for-packet-simulator') as SlDetails).appendChild(detail);
}
switch (tableType) {
case 'ArpTable':
detail.innerHTML +=
`<table class="fixedArp" id="arp-table-` + nodeId + `">` + tableCols + `</table></div><br/>`;
break;
case 'RoutingTable':
detail.innerHTML +=
`<table class="fixedRout" id="routing-table-` + nodeId + `">` + tableCols + `</table></div><br/>`;
break;
case 'MacAddressTable':
detail.innerHTML +=
`<table class="fixedMac" id="mac-address-table-` +
nodeId +
`">` +
tableCols +
`</table></div><br/>`;
break;
}
let addButton = document.createElement('sl-button') as SlButton;
addButton.size = 'small';
addButton.innerHTML = msg('Add');
addButton.addEventListener('click', () => TableHelper.addRow(tableId, tableType, network));
let removeButton = document.createElement('sl-button') as SlButton;
removeButton.size = 'small';
removeButton.innerHTML = msg('Remove');
removeButton.addEventListener('click', () => TableHelper.deleteRow(tableId, network));
let saveButton = document.createElement('sl-button') as SlButton;
saveButton.size = 'small';
saveButton.innerHTML = msg('Save');
saveButton.addEventListener('click', () => TableHelper.updateTable(tableId, tableType, network));
detail.append(addButton);
detail.append(removeButton);
detail.append(saveButton);
}
}