beenull/visualsubnetcalc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'release/v1.1.0'

Browse source
This commit is contained in:
Caesar Kabalan 2023-06-05 13:35:02 -07:00
commit 52e14b8b67
No known key found for this signature in database
GPG key ID: DDFEF5FF6CFAB608
4 changed files with 53 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/icon/browserconfig.xml vendored
View file

@ -2,7 +2,7 @@
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/icon/mstile-150x150.png"/>
<square150x150logo src="icon/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>

4
dist/icon/site.webmanifest vendored
View file

@ -3,12 +3,12 @@
"short_name": "Visual Subnet Calc",
"icons": [
{
"src": "/icon/android-chrome-192x192.png",
"src": "icon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon/android-chrome-512x512.png",
"src": "icon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}

20
dist/index.html vendored
View file

@ -4,15 +4,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Subnet Calculator</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet">
<meta name="description" content="Quickly design and collaborate on network design. Visual Subnet Calculator focuses on expediting the work of network administrators, not academic subnetting math.">
<meta name="robots" content="index, follow" />
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
<link rel="manifest" href="/icon/site.webmanifest">
<link rel="mask-icon" href="/icon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
<link rel="manifest" href="icon/site.webmanifest">
<link rel="mask-icon" href="icon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
@ -72,7 +72,7 @@
<th id="subnetHeader" style="display: table-cell;">Subnet address</th>
<th id="netmaskHeader" style="display: none;">Netmask</th>
<th id="rangeHeader" style="display: table-cell;">Range of addresses</th>
<th id="useableHeader" style="display: table-cell;">Useable IPs</th>
<th id="useableHeader" style="display: table-cell;">Usable IPs</th>
<th id="hostsHeader" style="display: table-cell;">Hosts</th>
<th id="noteHeader" colspan="100%" style="display: table-cell;">
Note
@ -196,8 +196,8 @@
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>
<script src="/js/lz-string.min.js"></script>
<script src="/js/main.js"></script>
<script src="js/lz-string.min.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>
</html>

57
dist/js/main.js vendored
View file

@ -3,8 +3,8 @@ let subnetNotes = {};
let maxNetSize = 0;
let infoColumnCount = 5
// NORMAL mode:
// - Smallest subnet: /30
// - Two reserved addresses per subnet:
// - Smallest subnet: /32
// - Two reserved addresses per subnet of size <= 30:
// - Network Address (network + 0)
// - Broadcast Address (last network address)
// AWS mode (future):
@ -17,7 +17,7 @@ let infoColumnCount = 5
// - Broadcast Address (last network address)
let operatingMode = 'NORMAL'
let noteTimeout;
let minSubnetSize = 30
let minSubnetSize = 32
let inflightColor = 'NONE'
let urlVersion = '1'
let configVersion = '1'
@ -83,7 +83,7 @@ function reset() {
if (operatingMode === 'AWS') {
minSubnetSize = 28
} else {
minSubnetSize = 30
minSubnetSize = 32
}
let cidrInput = $('#network').val() + '/' + $('#netsize').val()
let rootNetwork = get_network($('#network').val(), $('#netsize').val())
@ -150,26 +150,30 @@ function addRowTree(subnetTree, depth, maxDepth) {
}
function addRow(network, netSize, colspan, note, notesWidth, color) {
// TODO: do some checking here for smaller networks like /32, probably some edge cases to watch for.
let addressFirst = ip2int(network)
let addressLast = subnet_last_address(addressFirst, netSize)
// Will need to adjust this for AWS mode
let usableFirst = addressFirst + 1
if (operatingMode === 'AWS') {
// https://docs.aws.amazon.com/vpc/latest/userguide/subnet-sizing.html
usableFirst += 3
}
let usableLast = addressLast - 1
let usableFirst = subnet_usable_first(addressFirst, netSize, operatingMode)
let usableLast = subnet_usable_last(addressFirst, netSize)
let hostCount = 1 + usableLast - usableFirst
let styleTag = ''
if (color !== '') {
styleTag = ' style="background-color: ' + color + '"'
}
let rangeCol, usableCol;
if (netSize < 32) {
rangeCol = int2ip(addressFirst) + ' - ' + int2ip(addressLast);
usableCol = int2ip(usableFirst) + ' - ' + int2ip(usableLast);
} else {
rangeCol = int2ip(addressFirst);
usableCol = int2ip(usableFirst);
}
let newRow =
' <tr id="row_' + network.replace('.', '-') + '_' + netSize + '"' + styleTag + '>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_address">' + network + '/' + netSize + '</td>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_range">' + int2ip(addressFirst) + ' - ' + int2ip(addressLast) + '</td>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_usable">' + int2ip(usableFirst) + ' - ' + int2ip(usableLast) + '</td>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_range">' + rangeCol + '</td>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_usable">' + usableCol + '</td>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_hosts">' + hostCount + '</td>\n' +
' <td class="note" style="width:' + notesWidth + '"><label><input type="text" class="form-control shadow-none p-0" data-subnet="' + network + '/' + netSize + '" value="' + note + '"></label></td>\n' +
' <td rowspan="1" colspan="' + colspan + '" class="split rotate" data-subnet="' + network + '/' + netSize + '" data-mutate-verb="split"><span>/' + netSize + '</span></td>\n'
@ -209,6 +213,25 @@ function subnet_addresses(netSize) {
return 2**(32-netSize);
}
function subnet_usable_first(network, netSize, operatingMode) {
if (netSize < 31) {
// https://docs.aws.amazon.com/vpc/latest/userguide/subnet-sizing.html
// AWS reserves 3 additional IPs
return network + (operatingMode === 'AWS' ? 4 : 1);
} else {
return network;
}
}
function subnet_usable_last(network, netSize) {
let last_address = subnet_last_address(network, netSize);
if (netSize < 31) {
return last_address - 1;
} else {
return last_address;
}
}
function get_dict_max_depth(dict, curDepth) {
let maxDepth = curDepth
for (let mapKey in dict) {
@ -424,9 +447,6 @@ function processConfigUrl() {
renameKey(urlConfig, 'v', 'config_version')
renameKey(urlConfig, 's', 'subnets')
expandKeys(urlConfig['subnets'])
let subnet_split = Object.keys(urlConfig['subnets'])[0].split('/')
$('#network').val(subnet_split[0])
$('#netsize').val(subnet_split[1])
importConfig(urlConfig)
return true
}
@ -483,6 +503,9 @@ function renameKey(obj, oldKey, newKey) {
function importConfig(text) {
// TODO: Probably need error checking here
if (text['config_version'] === '1') {
let subnet_split = Object.keys(text['subnets'])[0].split('/')
$('#network').val(subnet_split[0])
$('#netsize').val(subnet_split[1])
subnetMap = text['subnets'];
renderTable()
}