From 0b7ba4fbfea0d5102e557a924c2de58b15842949 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carsten=20G=C3=B6tzinger?= Date: Wed, 19 Apr 2023 13:35:02 +0200 Subject: [PATCH] feat(ipv4-range-expander): expands a given IPv4 start and end address to a valid IPv4 subnet --- components.d.ts | 1 + src/components/SpanCopyable.vue | 35 +++++++ src/tools/index.ts | 3 +- src/tools/ipv4-range-expander/index.ts | 13 +++ .../ipv4-range-expander.e2e.spec.ts | 32 +++++++ .../ipv4-range-expander.service.test.ts | 21 +++++ .../ipv4-range-expander.service.ts | 70 ++++++++++++++ .../ipv4-range-expander.vue | 92 +++++++++++++++++++ src/tools/ipv4-range-expander/result-row.vue | 27 ++++++ .../ipv4-subnet-calculator.vue | 4 +- 10 files changed, 295 insertions(+), 3 deletions(-) create mode 100644 src/components/SpanCopyable.vue create mode 100644 src/tools/ipv4-range-expander/index.ts create mode 100644 src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts create mode 100644 src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts create mode 100644 src/tools/ipv4-range-expander/ipv4-range-expander.service.ts create mode 100644 src/tools/ipv4-range-expander/ipv4-range-expander.vue create mode 100644 src/tools/ipv4-range-expander/result-row.vue diff --git a/components.d.ts b/components.d.ts index 8c75790d..caaa50a6 100644 --- a/components.d.ts +++ b/components.d.ts @@ -67,6 +67,7 @@ declare module '@vue/runtime-core' { RouterView: typeof import('vue-router')['RouterView'] SearchBar: typeof import('./src/components/SearchBar.vue')['default'] SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default'] + SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default'] TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default'] ToolCard: typeof import('./src/components/ToolCard.vue')['default'] } diff --git a/src/components/SpanCopyable.vue b/src/components/SpanCopyable.vue new file mode 100644 index 00000000..caac35d0 --- /dev/null +++ b/src/components/SpanCopyable.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/src/tools/index.ts b/src/tools/index.ts index ad6167e1..016286c2 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -1,6 +1,7 @@ import { tool as base64FileConverter } from './base64-file-converter'; import { tool as base64StringConverter } from './base64-string-converter'; import { tool as basicAuthGenerator } from './basic-auth-generator'; +import { tool as ipv4RangeExpander } from './ipv4-range-expander'; import { tool as httpStatusCodes } from './http-status-codes'; import { tool as yamlToJson } from './yaml-to-json-converter'; import { tool as jsonToYaml } from './json-to-yaml-converter'; @@ -111,7 +112,7 @@ export const toolsByCategory: ToolCategory[] = [ }, { name: 'Network', - components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator], + components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator], }, { name: 'Math', diff --git a/src/tools/ipv4-range-expander/index.ts b/src/tools/ipv4-range-expander/index.ts new file mode 100644 index 00000000..233f7cc4 --- /dev/null +++ b/src/tools/ipv4-range-expander/index.ts @@ -0,0 +1,13 @@ +import { UnfoldMoreOutlined } from '@vicons/material'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'IPv4 range expander', + path: '/ipv4-range-expander', + description: + 'Given a start and an end IPv4 address this tool calculates a valid IPv4 network with its CIDR notation.', + keywords: ['ipv4', 'range', 'expander', 'subnet', 'creator', 'cidr'], + component: () => import('./ipv4-range-expander.vue'), + icon: UnfoldMoreOutlined, + createdAt: new Date('2023-04-19'), +}); diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts b/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts new file mode 100644 index 00000000..ae5188e5 --- /dev/null +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts @@ -0,0 +1,32 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Tool - IPv4 range expander', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/ipv4-range-expander'); + }); + + test('Has correct title', async ({ page }) => { + await expect(page).toHaveTitle('IPv4 range expander - IT Tools'); + }); + + test('Calculates correct for valid input', async ({ page }) => { + await page.getByPlaceholder('Start IPv4 address...').fill('192.168.1.1'); + await page.getByPlaceholder('End IPv4 address...').fill('192.168.7.255'); + + expect(await page.getByTestId('start-address.old').textContent()).toEqual('192.168.1.1'); + expect(await page.getByTestId('start-address.new').textContent()).toEqual('192.168.0.0'); + expect(await page.getByTestId('end-address.old').textContent()).toEqual('192.168.7.255'); + expect(await page.getByTestId('end-address.new').textContent()).toEqual('192.168.7.255'); + expect(await page.getByTestId('addresses-in-range.old').textContent()).toEqual('1,791'); + expect(await page.getByTestId('addresses-in-range.new').textContent()).toEqual('2,048'); + expect(await page.getByTestId('cidr.old').textContent()).toEqual(''); + expect(await page.getByTestId('cidr.new').textContent()).toEqual('192.168.0.0/21'); + }); + + test('Hides result for invalid input', async ({ page }) => { + await page.getByPlaceholder('Start IPv4 address...').fill('192.168.1.1'); + await page.getByPlaceholder('End IPv4 address...').fill('192.168.0.255'); + + await expect(page.getByTestId('result')).not.toBeVisible(); + }); +}); diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts b/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts new file mode 100644 index 00000000..66a9137a --- /dev/null +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts @@ -0,0 +1,21 @@ +import { expect, describe, it } from 'vitest'; +import { calculateCidr } from './ipv4-range-expander.service'; + +describe('ipv4RangeExpander', () => { + describe('when there are two valid ipv4 addresses given', () => { + it('should calculate valid cidr for given addresses', () => { + const result = calculateCidr({ startIp: '192.168.1.1', endIp: '192.168.7.255' }); + + expect(result).toBeDefined(); + expect(result?.oldSize).toEqual(1791); + expect(result?.newSize).toEqual(2048); + expect(result?.newStart).toEqual('192.168.0.0'); + expect(result?.newEnd).toEqual('192.168.7.255'); + expect(result?.newCidr).toEqual('192.168.0.0/21'); + }); + + it('should return empty result for invalid input', () => { + expect(calculateCidr({ startIp: '192.168.7.1', endIp: '192.168.6.255' })).not.toBeDefined(); + }); + }); +}); diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts b/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts new file mode 100644 index 00000000..db7681cc --- /dev/null +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts @@ -0,0 +1,70 @@ +import { convertBase } from '../integer-base-converter/integer-base-converter.model'; +import { ipv4ToInt } from '../ipv4-address-converter/ipv4-address-converter.service'; +class Ipv4RangeExpanderResult { + oldSize?: number; + newStart?: string; + newEnd?: string; + newCidr?: string; + newSize?: number; +} + +export { calculateCidr, Ipv4RangeExpanderResult }; + +function bits2ip(ipInt: number) { + return (ipInt >>> 24) + '.' + ((ipInt >> 16) & 255) + '.' + ((ipInt >> 8) & 255) + '.' + (ipInt & 255); +} + +function getRangesize(start: string, end: string) { + if (start == null || end == null) return -1; + + return 1 + parseInt(end, 2) - parseInt(start, 2); +} + +function getCidr(start: string, end: string) { + if (start == null || end == null) return null; + + const range = getRangesize(start, end); + if (range < 1) { + return null; + } + + let mask = 32; + for (let i = 0; i < 32; i++) { + if (start[i] !== end[i]) { + mask = i; + break; + } + } + + const newStart = start.substring(0, mask) + '0'.repeat(32 - mask); + const newEnd = end.substring(0, mask) + '1'.repeat(32 - mask); + + return { start: newStart, end: newEnd, mask: mask }; +} + +function calculateCidr({ startIp, endIp }: { startIp: string; endIp: string }) { + const start = convertBase({ + value: ipv4ToInt({ ip: startIp }).toString(), + fromBase: 10, + toBase: 2, + }); + const end = convertBase({ + value: ipv4ToInt({ ip: endIp }).toString(), + fromBase: 10, + toBase: 2, + }); + + const cidr = getCidr(start, end); + if (cidr != null) { + const result = new Ipv4RangeExpanderResult(); + result.newEnd = bits2ip(parseInt(cidr.end, 2)); + result.newStart = bits2ip(parseInt(cidr.start, 2)); + result.newCidr = result.newStart + '/' + cidr.mask; + result.newSize = getRangesize(cidr.start, cidr.end); + + result.oldSize = getRangesize(start, end); + return result; + } + + return undefined; +} diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue new file mode 100644 index 00000000..26d70ddd --- /dev/null +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/src/tools/ipv4-range-expander/result-row.vue b/src/tools/ipv4-range-expander/result-row.vue new file mode 100644 index 00000000..0a021ff6 --- /dev/null +++ b/src/tools/ipv4-range-expander/result-row.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue index 7b488c9c..48b96fa1 100644 --- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue +++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue @@ -12,7 +12,7 @@ {{ label }} - + {{ undefinedFallback }} @@ -41,8 +41,8 @@ import { useValidation } from '@/composable/validation'; import { isNotThrowing } from '@/utils/boolean'; import { useStorage } from '@vueuse/core'; import { ArrowLeft, ArrowRight } from '@vicons/tabler'; +import SpanCopyable from '@/components/SpanCopyable.vue'; import { getIPClass } from './ipv4-subnet-calculator.models'; -import CopyableIpLike from './copyable-ip-like.vue'; const ip = useStorage('ipv4-subnet-calculator:ip', '192.168.0.1/24');