mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2025-12-10 06:52:05 +01:00
Code Issues Projects Releases Wiki Activity

Improve VPC view

Browse Source
This commit is contained in:
Borys_Levytskyi
2021-04-23 21:15:31 +03:00
parent 99dba2ba2b
commit cb28d5ecc0
2 changed files with 80 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/networking/components/VpcView.css
View File

@@ -3,10 +3,6 @@
text-align: right;
}
.vpc-view td {
padding-right: 15px;
}
.vpc-view {
margin-bottom: 20px;
}
@@ -15,9 +11,24 @@
border-bottom: solid 1px;
}
.vpc-view .address-space button {
margin: 0;
}
.vpc-view .address-space {
font-size: 1.5em;
vertical-align: middle;
}
.vpc-view .address-space-label {
font-size: 0.8em;
vertical-align: center;
}
.vpc-view button {
margin:0 3px;
}
.vpc-view .ip-address-col { min-width: 8.5em;}
.vpc-details {
margin-top: 20px;
}

91
src/networking/components/VpcView.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import BinaryStringView from '../../core/components/BinaryString';
import './SubnetView.css';
import './VpcView.css';
import { getNetworkAddress, getBroadCastAddress, createSubnetMaskIp, getAddressSpaceSize } from '../subnet-utils';
import { chunkifyString } from '../../core/utils';
import IpAddressBinaryString from './IpAddressBinaryString';
@@ -11,61 +11,98 @@ function SubnetView(props : {vpc : VpcCommand}) {
const [vpc, setVpc] = useState(VpcModel.create(props.vpc));
const subnetMask = vpc.cidr.maskBits + vpc.subnetBits;
const subnetMaskSize = vpc.cidr.maskBits + vpc.subnetBits;
const vpcPart = getNetworkAddress(vpc.cidr).toBinaryString(true).substring(0, vpc.cidr.maskBits);
const subnetsPart = padLeft("0", vpc.subnetBits, "0");
const lastPart = padLeft("0", 32 - (vpc.cidr.maskBits + vpc.subnetBits), "0");
const maxSubnets = Math.pow(2, vpc.subnetBits);
const hostsPerSubnet = getAddressSpaceSize(subnetMaskSize);
const decrSubnet = () => setVpc(vpc.changeSubnetBits(vpc.subnetBits-1));
const incrSubnet = () => setVpc(vpc.changeSubnetBits(vpc.subnetBits+1));
const incrSubnet = () => setVpc(vpc.changeSubnetBits(vpc.subnetBits+1));
const incrVpc = () => setVpc(vpc.changeVpcCidr(new IpAddressWithSubnetMask(vpc.cidr.ipAddress, vpc.cidr.maskBits+1)));
const decrVpc = () => setVpc(vpc.changeVpcCidr(new IpAddressWithSubnetMask(vpc.cidr.ipAddress, vpc.cidr.maskBits-1)));
return <React.Fragment>
<div className="expression vpc-view">
<table>
<tr>
<td>
VPC Address Space
</td>
<td>
<BinaryStringView binaryString={vpcPart} /><BinaryStringView binaryString={subnetsPart} className="accent-background" /><BinaryStringView binaryString={lastPart} />
</td>
<div>
<table>
<tr>
<td className="address-space-label">
VPC
</td>
<td className="address-space-label">
Subnets
</td>
<td className="address-space-label">
Hosts
</td>
</tr>
<tr>
<td>
<button onClick={decrVpc} disabled={vpc.cidr.maskBits <= 1} title="Increase vpc space">-</button>
<BinaryStringView binaryString={vpcPart} className="address-space" />
<button onClick={incrVpc} disabled={subnetMaskSize >= 31} title="Decrease vpc space">+</button>
</td>
<td>
<button onClick={decrSubnet} disabled={vpc.subnetBits <= 1} title="Increase subnet space">-</button>
<BinaryStringView binaryString={subnetsPart} className="address-space" />
<button onClick={incrSubnet} disabled={vpc.cidr.maskBits + vpc.subnetBits >= 31} title="Decrease subnet space">+</button>
</td>
<td>
<BinaryStringView binaryString={lastPart} className="address-space" />
</td>
</tr>
</table>
</div>
<table className="vpc-details">
<tr>
<td>
VPC Mask:
<td className="soft">
VPC Network Address:
</td>
<td>
<button onClick={decrVpc} disabled={vpc.cidr.maskBits <= 1} title="Increase vpc space">-</button>
/{vpc.cidr.maskBits}
<button onClick={incrVpc} disabled={subnetMask >= 31} title="Decrease vpc space">+</button>
{getNetworkAddress(vpc.cidr).toString()}
</td>
</tr>
<tr>
<td className="soft">
VPC CIDR Mask:
</td>
<td>
/{vpc.cidr.maskBits}
</td>
</tr>
<tr>
<td>
Subnet Mask:
<td className="soft">
Subnet CIDR Mask:
</td>
<td>
<button onClick={decrSubnet} disabled={vpc.subnetBits <= 1} title="Increase subnet space">-</button>
/{subnetMask}
<button onClick={incrSubnet} disabled={vpc.cidr.maskBits + vpc.subnetBits >= 31} title="Decrease subnet space">+</button>
/{subnetMaskSize}
</td>
</tr>
<tr>
<td>
Max Subnets:
<td className="soft">
Max Subnets in VPC:
</td>
<td>
{Math.pow(2, vpc.subnetBits)}
{maxSubnets}
</td>
</tr>
<tr>
<td>
Subnet Network Size:
<td className="soft">
Max Hosts in VPC:
</td>
<td>
{getAddressSpaceSize(subnetMask)}
{maxSubnets*hostsPerSubnet}
</td>
</tr>
<tr>
<td className="soft">
Hosts Per Subnet:
</td>
<td>
{hostsPerSubnet}
</td>
</tr>
</table>