IP pool utilization

[david-crespo]

Closes #2070

• Show v4 and v6 counts in a column on IP pools table
• Fancy display logic for big numbers
• Show v4 and v6 counts in properties table on IP pool detail
• Make mock handler use the actual ranges
• Put utilization on IP pool detail page

2024-03-20-ip-pool-utilization.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Mar 21, 2024 5:12pm

[david-crespo]

these bigint literals are the reason for the target: es2020 bump in the tsconfig

[david-crespo]

This is so we can use bigint literals, e.g., 1123901234n. target seems primarily relevant in that it determines lib if you're not also setting lib (we are not). There is no change in our bundle size from this, which is weird. Will add more detail to this comment later.

https://www.typescriptlang.org/tsconfig#target
https://www.typescriptlang.org/tsconfig#lib

[david-crespo]

According to the compat table (ironically, works poorly in FF but well in Chrome), these are the features for each version:

These are the ones for es2020 specifically, and they all have been supported since 2019 or early 2020.

• https://caniuse.com/mdn-javascript_builtins_string_matchall
• https://caniuse.com/bigint
• https://caniuse.com/mdn-javascript_builtins_promise_allsettled
• https://caniuse.com/mdn-javascript_builtins_globalthis
• https://caniuse.com/mdn-javascript_operators_optional_chaining
• https://caniuse.com/mdn-javascript_operators_nullish_coalescing

I looked through most of the other features and I think we could go as high as es2022, but I don't think there's much advantage to doing that.

[david-crespo]

Ah. Of course. This explains why it had no effect on bundle size.

We should also note that TypeScript's target only impacts your runtime code if you're using TypeScript to transpile your source files to JavaScript. If you're using another tool to transpile, such as Babel, ESBuild, or SWC, then that tool's settings will be what determines the syntax used in your output JavaScript code.

https://www.learningtypescript.com/articles/why-increase-your-tsconfig-target#target-might-not-impact-your-runtime-code

I'm embarrassed not to have known this, but here's how Vite handles it.

build.target

Browser compatibility target for the final bundle. The default value is a Vite special value, 'modules', which targets browsers with native ES Modules, native ESM dynamic import, and import.meta support. Vite will replace 'modules' to ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']

Note the build will fail if the code contains features that cannot be safely transpiled by esbuild. See esbuild docs for more details.

https://vitejs.dev/config/build-options.html#build-target

Note that by default, Vite only handles syntax transforms and does not cover polyfills.

https://vitejs.dev/guide/build.html#browser-compatibility

The linked page from the esbuild docs about what features are in what version is better than anything I found yesterday while researching this stuff.

https://esbuild.github.io/content-types/#javascript

It also gave me a good example of too-new syntax to test it with:

x Build failed in 7.97s
error during build:
Error: [vite:esbuild-transpile] Transform failed with 1 error:
assets/app-!~{001}~.js:62912:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
62910|  };
62911|  const colHelper = createColumnHelper();
62912|  await new Promise((res) => res(1));
   |  ^
62913|  function SiloAccessPage() {
62914|    const [addModalOpen, setAddModalOpen] = reactExports.useState(false);

Conclusion

So in theory, Vite has us covered for making sure we are okay on syntax, and TS target should prevent us from using new built-in things we can't use. That said, I couldn't find a good example of something like that being rejected by TS.

[david-crespo]

This component is getting out of hand. I will make an issue about breaking it up into composable components.

[david-crespo]

I’m going to pull this logic out into a function so I can unit test the hell out of it.

[david-crespo]

generic is so we can let provisioned and allocated be number | bigint while enforcing that they are the same type

[david-crespo]

This should be what users see because they almost certainly have no IPv6 ranges.

[david-crespo]

took a slightly different approach here than the possibly too clever "if there is IPv6, show both, otherwise just show IPv4 with no v4 label" in the table cell. Here we just show whichever ones are present, including possibly both or none.

[charliepark]

Love that you included these

[charliepark]

Really nice!