dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-19 08:09:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Nano instance to pricing page

Browse Source
This commit is contained in:
Wen Bo Xie committed 2024-04-06 17:55:26 -07:00
1 parent 80b1791cc4
commit 22eb9f6abf
5 files changed
+99 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/www/components/Pricing/ComputePricingCalculator.tsx
+35 -18
View File
@@ -26,7 +26,7 @@ const plans = [
},
]
const findIntanceValueByColumn = (instance: any, column: string) =>
const findInstanceValueByColumn = (instance: any, column: string) =>
instance.columns?.find((col: any) => col.key === column)?.value
const parsePrice = (price: string) => parseInt(price?.toString().replace('$', '').replace(',', ''))
@@ -34,18 +34,19 @@ const parsePrice = (price: string) => parseInt(price?.toString().replace('$', ''
const ComputePricingCalculator = () => {
const computeInstances = pricingAddOn.database.rows
const priceSteps = computeInstances.map((instance) =>
parsePrice(findIntanceValueByColumn(instance, 'pricing'))
parsePrice(findInstanceValueByColumn(instance, 'pricing'))
)
// Base discount credits that come with every paid plan
const COMPUTE_CREDITS = 10
const [activePlan, setActivePlan] = useState(plans[0])
const [activeInstances, setActiveInstances] = useState([{ ...computeInstances[0], position: 0 }])
const [computeCredits, setComputeCredits] = useState(0)
// Final calculated price: plan cost + compute aggregate - compute credits
const [activePrice, setActivePrice] = useState(activePlan.price + priceSteps[0] - COMPUTE_CREDITS)
const [activePrice, setActivePrice] = useState(activePlan.price + priceSteps[0] - computeCredits)
useEffect(() => {
setActivePrice(activePlan.price + priceSteps[0] - COMPUTE_CREDITS)
setActivePrice(activePlan.price + priceSteps[0] - computeCredits)
}, [])
const handleUpdateInstance = (position: number, value: number[]) => {
@@ -64,22 +65,38 @@ const ComputePricingCalculator = () => {
const calculateComputeAggregate = (price: number) => {
activeInstances.map(
(activeInstance: any) =>
(price += parsePrice(findIntanceValueByColumn(activeInstance, 'pricing')))
(price += parsePrice(findInstanceValueByColumn(activeInstance, 'pricing')))
)
return price
}
const applyCredits = () => {
if (
activeInstances.some(
(instance) => parsePrice(findInstanceValueByColumn(instance, 'pricing')) > 0
)
) {
setComputeCredits(COMPUTE_CREDITS)
} else {
setComputeCredits(0)
}
}
const calculatePrice = () => {
let aggregatePrice = 0
const computeAggregate = calculateComputeAggregate(aggregatePrice)
return setActivePrice(computeAggregate + activePlan.price - COMPUTE_CREDITS)
return setActivePrice(computeAggregate + activePlan.price - computeCredits)
}
useEffect(() => {
applyCredits()
}, [activeInstances])
useEffect(() => {
calculatePrice()
}, [activeInstances, activePlan])
}, [activeInstances, activePlan, computeCredits])
const removeInstance = (position: number) => {
const newArray = activeInstances
@@ -95,8 +112,8 @@ const ComputePricingCalculator = () => {
const findSliderComputeValue = (activeInstance: any) => {
// find index of compute based on active compute name
const selectedCompute = computeInstances
.map((compute) => findIntanceValueByColumn(compute, 'plan'))
.indexOf(findIntanceValueByColumn(activeInstance, 'plan'))
.map((compute) => findInstanceValueByColumn(compute, 'plan'))
.indexOf(findInstanceValueByColumn(activeInstance, 'plan'))
return [selectedCompute + 1]
}
@@ -113,7 +130,7 @@ const ComputePricingCalculator = () => {
</div>
<div className="flex items-center justify-between">
<span className="text-foreground-muted">Compute Credits</span>
<span className="text-light font-mono">- ${COMPUTE_CREDITS}</span>
<span className="text-light font-mono">- ${computeCredits}</span>
</div>
</div>
)
@@ -239,20 +256,20 @@ const ComputePricingCalculator = () => {
<Badge
className="rounded-md w-16 text-center flex justify-center font-mono uppercase"
variant={
findIntanceValueByColumn(activeInstance, 'plan') ===
findIntanceValueByColumn(computeInstances[0], 'plan')
findInstanceValueByColumn(activeInstance, 'plan') ===
findInstanceValueByColumn(computeInstances[0], 'plan')
? 'default'
: 'brand'
}
>
{findIntanceValueByColumn(activeInstance, 'plan')}
{findInstanceValueByColumn(activeInstance, 'plan')}
</Badge>
<p className="text-xs text-foreground-lighter">
Project {activeInstance.position + 1}
</p>
</div>
<span className="leading-3 text-sm">
{findIntanceValueByColumn(activeInstance, 'pricing')}
{findInstanceValueByColumn(activeInstance, 'pricing')}
</span>
</div>
<Slider_Shadcn_
@@ -267,10 +284,10 @@ const ComputePricingCalculator = () => {
<div className="flex items-center justify-between text-sm">
<div className="w-full flex items-center gap-2">
<span className="text-lighter text-xs md:text-[13px]">
{findIntanceValueByColumn(activeInstance, 'memory')} RAM /{' '}
{findIntanceValueByColumn(activeInstance, 'cpu')} CPU / Connections: Direct{' '}
{findIntanceValueByColumn(activeInstance, 'directConnections')}, Pooler{' '}
{findIntanceValueByColumn(activeInstance, 'poolerConnections')}
{findInstanceValueByColumn(activeInstance, 'memory')} RAM /{' '}
{findInstanceValueByColumn(activeInstance, 'cpu')} CPU / Connections: Direct{' '}
{findInstanceValueByColumn(activeInstance, 'directConnections')}, Pooler{' '}
{findInstanceValueByColumn(activeInstance, 'poolerConnections')}
</span>
</div>
<div className="flex items-center gap-2">
apps/www/components/Pricing/ComputePricingTable.tsx
+1 -14
View File
@@ -28,20 +28,7 @@ const ComputePricingTable = () => {
<tbody>
{pricingAddOn.database.rows.map((row, i) => (
<Fragment key={`row-${i}`}>
{i === 0 && (
<tr>
<td className="pb-1 bg-border-strong px-3 py-1 -mr-1 border-l-4 border-strong">
<span>First instance is free on paid plans</span>
</td>
</tr>
)}
<tr
key={i}
className={cn(
i % 2 === 0 ? 'bg-surface-100 rounded-lg' : '',
i === 0 ? 'border-4 border-strong' : ''
)}
>
<tr key={i}>
{row.columns.map((column) => (
<td key={column.key} className="p-3">
{column.key === 'dedicated' ? (
apps/www/data/PricingAddOnTable.json
+19
View File
@@ -8,6 +8,25 @@
"Additional Disk Bandwidth"
],
"rows": [
{
"columns": [
{ "key": "plan", "title": "Plan", "value": "Nano (Free)" },
{ "key": "pricing", "title": "Price USD", "value": "$0" },
{ "key": "cpu", "title": "CPU", "value": "Shared" },
{ "key": "dedicated", "title": "Dedicated", "value": false },
{ "key": "memory", "title": "Memory", "value": "Up to 0.5 GB" },
{
"key": "directConnections",
"title": "Connections: Direct",
"value": "60"
},
{
"key": "poolerConnections",
"title": "Connections: Pooler",
"value": "200"
}
]
},
{
"columns": [
{ "key": "plan", "title": "Plan", "value": "Micro" },
package-lock.json
Generated
+28 -28
View File
@@ -22,7 +22,7 @@
"prettier-plugin-sql-cst": "^0.11.0",
"sass": "^1.72.0",
"supabase": "^1.151.1",
"turbo": "^1.13.0"
"turbo": "^1.13.2"
},
"engines": {
"node": ">=20.0.0",
@@ -44473,26 +44473,26 @@
}
},
"node_modules/turbo": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/turbo/-/turbo-1.13.0.tgz",
"integrity": "sha512-r02GtNmkOPcQvUzVE6lg474QVLyU02r3yh3lUGqrFHf5h5ZEjgDGWILsAUqplVqjri1Y/oOkTssks4CObTAaiw==",
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/turbo/-/turbo-1.13.2.tgz",
"integrity": "sha512-rX/d9f4MgRT3yK6cERPAkfavIxbpBZowDQpgvkYwGMGDQ0Nvw1nc0NVjruE76GrzXQqoxR1UpnmEP54vBARFHQ==",
"dev": true,
"bin": {
"turbo": "bin/turbo"
},
"optionalDependencies": {
"turbo-darwin-64": "1.13.0",
"turbo-darwin-arm64": "1.13.0",
"turbo-linux-64": "1.13.0",
"turbo-linux-arm64": "1.13.0",
"turbo-windows-64": "1.13.0",
"turbo-windows-arm64": "1.13.0"
"turbo-darwin-64": "1.13.2",
"turbo-darwin-arm64": "1.13.2",
"turbo-linux-64": "1.13.2",
"turbo-linux-arm64": "1.13.2",
"turbo-windows-64": "1.13.2",
"turbo-windows-arm64": "1.13.2"
}
},
"node_modules/turbo-darwin-64": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.13.0.tgz",
"integrity": "sha512-ctHeJXtQgBcgxnCXwrJTGiq57HtwF7zWz5NTuSv//5yeU01BtQIt62ArKfjudOhRefWJbX3Z5srn88XTb9hfww==",
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.13.2.tgz",
"integrity": "sha512-CCSuD8CfmtncpohCuIgq7eAzUas0IwSbHfI8/Q3vKObTdXyN8vAo01gwqXjDGpzG9bTEVedD0GmLbD23dR0MLA==",
"cpu": [
"x64"
],
@@ -44503,9 +44503,9 @@
]
},
"node_modules/turbo-darwin-arm64": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.13.0.tgz",
"integrity": "sha512-/Q9/pNFkF9w83tNxwMpgapwLYdQ12p8mpty2YQRoUiS9ClWkcqe136jR0mtuMqzlNlpREOFZaoyIthjt6Sdo0g==",
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.13.2.tgz",
"integrity": "sha512-0HySm06/D2N91rJJ89FbiI/AodmY8B3WDSFTVEpu2+8spUw7hOJ8okWOT0e5iGlyayUP9gr31eOeL3VFZkpfCw==",
"cpu": [
"arm64"
],
@@ -44516,9 +44516,9 @@
]
},
"node_modules/turbo-linux-64": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.13.0.tgz",
"integrity": "sha512-hgbT7o020BGV4L7Sd8hhFTd5zVKPKxbsr0dPfel/9NkdTmptz2aGZ0Vb2MAa18SY3XaCQpDxmdYuOzvvRpo5ZA==",
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.13.2.tgz",
"integrity": "sha512-7HnibgbqZrjn4lcfIouzlPu8ZHSBtURG4c7Bedu7WJUDeZo+RE1crlrQm8wuwO54S0siYqUqo7GNHxu4IXbioQ==",
"cpu": [
"x64"
],
@@ -44529,9 +44529,9 @@
]
},
"node_modules/turbo-linux-arm64": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.13.0.tgz",
"integrity": "sha512-WK01i2wDZARrV+HEs495A3hNeGMwQR5suYk7G+ceqqW7b+dOTlQdvUjnI3sg7wAnZPgjafFs/hoBaZdJjVa/nw==",
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.13.2.tgz",
"integrity": "sha512-sUq4dbpk6SNKg/Hkwn256Vj2AEYSQdG96repio894h5/LEfauIK2QYiC/xxAeW3WBMc6BngmvNyURIg7ltrePg==",
"cpu": [
"arm64"
],
@@ -44542,9 +44542,9 @@
]
},
"node_modules/turbo-windows-64": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.13.0.tgz",
"integrity": "sha512-hJgSZJZwlWHNwLEthaqJqJWGm4NqF5X/I7vE0sPE4i/jeDl8f0n1hcOkgJkJiNXVxhj+qy/9+4dzbPLKT9imaQ==",
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.13.2.tgz",
"integrity": "sha512-DqzhcrciWq3dpzllJR2VVIyOhSlXYCo4mNEWl98DJ3FZ08PEzcI3ceudlH6F0t/nIcfSItK1bDP39cs7YoZHEA==",
"cpu": [
"x64"
],
@@ -44555,9 +44555,9 @@
]
},
"node_modules/turbo-windows-arm64": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.13.0.tgz",
"integrity": "sha512-L/ErxYoXeq8tmjU/AIGicC9VyBN1zdYw8JlM4yPmMI0pJdY8E4GaYK1IiIazqq7M72lmQhU/WW7fV9FqEktwrw==",
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.13.2.tgz",
"integrity": "sha512-WnPMrwfCXxK69CdDfS1/j2DlzcKxSmycgDAqV0XCYpK/812KB0KlvsVAt5PjEbZGXkY88pCJ1BLZHAjF5FcbqA==",
"cpu": [
"arm64"
],
package.json
+16 -3
View File
@@ -5,7 +5,13 @@
"author": "Supabase, Inc.",
"license": "Apache-2.0",
"private": true,
"workspaces": ["apps/*", "apps/docs/spec/parser", "tests", "playwright-tests", "packages/*"],
"workspaces": [
"apps/*",
"apps/docs/spec/parser",
"tests",
"playwright-tests",
"packages/*"
],
"scripts": {
"build": "turbo run build",
"build:studio": "turbo run build --filter=studio",
@@ -37,7 +43,7 @@
"prettier-plugin-sql-cst": "^0.11.0",
"sass": "^1.72.0",
"supabase": "^1.151.1",
"turbo": "^1.13.0"
"turbo": "^1.13.2"
},
"repository": {
"type": "git",
@@ -47,7 +53,14 @@
"npm": ">=9.0.0",
"node": ">=20.0.0"
},
"keywords": ["postgres", "firebase", "storage", "functions", "database", "auth"],
"keywords": [
"postgres",
"firebase",
"storage",
"functions",
"database",
"auth"
],
"volta": {
"node": "20.11.1"
}