From 34f2b6e970f698afab4df02b4be0d2ca19347210 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 21 Sep 2023 10:38:21 +0800 Subject: [PATCH 1/6] Add project check for PITR --- .../BillingV2/Subscription/AddOns/AddOns.tsx | 23 ++-- .../BillingV2/Subscription/Subscription.tsx | 115 ------------------ .../Subscription/Subscription.utils.ts | 14 +++ .../interfaces/Settings/Addons/Addons.tsx | 52 ++++++-- 4 files changed, 68 insertions(+), 136 deletions(-) delete mode 100644 studio/components/interfaces/BillingV2/Subscription/Subscription.tsx diff --git a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx index 444317ed056..98cab652a62 100644 --- a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx +++ b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx @@ -1,37 +1,42 @@ import { useParams, useTheme } from 'common' -import ShimmeringLoader from 'components/ui/ShimmeringLoader' -import { useInfraMonitoringQuery } from 'data/analytics/infra-monitoring-query' -import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' import dayjs from 'dayjs' -import { useFlag } from 'hooks' -import { BASE_PATH } from 'lib/constants' import Link from 'next/link' import { useMemo } from 'react' -import { useSubscriptionPageStateSnapshot } from 'state/subscription-page' import { Alert, Button, IconChevronRight, IconExternalLink } from 'ui' -import { getAddons } from '../Subscription.utils' + +import ProjectUpdateDisabledTooltip from 'components/interfaces/Organization/BillingSettings/ProjectUpdateDisabledTooltip' import { ComputeInstanceSidePanel, CustomDomainSidePanel, PITRSidePanel, } from 'components/interfaces/Settings/Addons' -import ProjectUpdateDisabledTooltip from 'components/interfaces/Organization/BillingSettings/ProjectUpdateDisabledTooltip' import { useIsProjectActive, useProjectContext, } from 'components/layouts/ProjectLayout/ProjectContext' +import ShimmeringLoader from 'components/ui/ShimmeringLoader' +import { useInfraMonitoringQuery } from 'data/analytics/infra-monitoring-query' +import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' +import { useFlag } from 'hooks' import { getCloudProviderArchitecture } from 'lib/cloudprovider-utils' +import { BASE_PATH } from 'lib/constants' +import { useSubscriptionPageStateSnapshot } from 'state/subscription-page' +import { getAddons, getSemanticVersion } from '../Subscription.utils' const AddOns = () => { + const { isDarkMode } = useTheme() const { ref: projectRef } = useParams() const snap = useSubscriptionPageStateSnapshot() const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate') - const { isDarkMode } = useTheme() const { project: selectedProject } = useProjectContext() const isProjectActive = useIsProjectActive() const cpuArchitecture = getCloudProviderArchitecture(selectedProject?.cloud_provider) + // Only projects of version greater than supabase-postgrest-14.1.0.44 can use PITR + const sufficientPgVersion = getSemanticVersion(selectedProject?.dbVersion ?? '') >= 141044 + console.log({ sufficientPgVersion }) + // [Joshen] We could possibly look into reducing the interval to be more "realtime" // I tried setting the interval to 1m but no data was returned, may need to experiment const startDate = useMemo(() => dayjs().subtract(15, 'minutes').millisecond(0).toISOString(), []) diff --git a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx deleted file mode 100644 index 2edafb2f14c..00000000000 --- a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { useRouter } from 'next/router' -import AddOns from './AddOns/AddOns' -import BillingBreakdown from './BillingBreakdown' -import CostControl from './CostControl/CostControl' -import SubscriptionTier from './Tier/SubscriptionTier' -import { SUBSCRIPTION_PANEL_KEYS, useSubscriptionPageStateSnapshot } from 'state/subscription-page' -import { useSelectedOrganization } from 'hooks' -import { useEffect } from 'react' -import InformationBox from 'components/ui/InformationBox' -import { Button, IconExternalLink, IconInfo } from 'ui' -import Link from 'next/link' - -export interface SubscriptionProps {} - -const Subscription = ({}: SubscriptionProps) => { - const router = useRouter() - const organization = useSelectedOrganization() - const snap = useSubscriptionPageStateSnapshot() - const allowedValues = [ - 'subscriptionPlan', - 'costControl', - 'computeInstance', - 'pitr', - 'customDomain', - ] - - const panel = router.query.panel - const isOrgBilling = !!organization?.subscription_id - - useEffect(() => { - if (panel && typeof panel === 'string' && allowedValues.includes(panel)) { - snap.setPanelKey(panel as SUBSCRIPTION_PANEL_KEYS) - } - }, [panel]) - - // No need to bother rendering, we'll redirect anyway - if (isOrgBilling) return null - - return ( - <> -
-
-

Subscription

-
-
- -
- } - defaultVisibility={true} - hideCollapse - title="We're upgrading our billing system" - description={ -
-

- This organization uses the legacy project-based billing. We’ve recently made some - big improvements to our billing system. To migrate to the new organization-based - billing, head over to your{' '} - - - organization billing settings - - - . -

- -
- - - - - - -
-
- } - /> -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - ) -} - -export default Subscription diff --git a/studio/components/interfaces/BillingV2/Subscription/Subscription.utils.ts b/studio/components/interfaces/BillingV2/Subscription/Subscription.utils.ts index 1b288cee149..614f1beaa27 100644 --- a/studio/components/interfaces/BillingV2/Subscription/Subscription.utils.ts +++ b/studio/components/interfaces/BillingV2/Subscription/Subscription.utils.ts @@ -18,3 +18,17 @@ export const subscriptionHasHipaaAddon = ( subscription.addons.some((addon) => addon.supabase_prod_id === 'addon_security_hipaa') ) } + +export const getSemanticVersion = (version: string) => { + if (!version) return 0 + + // e.g supabase-postgres-14.1.0.88 + // There's 4 segments instead so we can't use the semver package + const segments = version.split('supabase-postgres-') + const semver = segments[segments.length - 1] + + // e.g supabase-postgres-14.1.0.99-vault-rc1 + const formattedSemver = semver.split('-')[0] + + return Number(formattedSemver.split('.').join('')) +} diff --git a/studio/components/interfaces/Settings/Addons/Addons.tsx b/studio/components/interfaces/Settings/Addons/Addons.tsx index edff68aac31..93b414df8f6 100644 --- a/studio/components/interfaces/Settings/Addons/Addons.tsx +++ b/studio/components/interfaces/Settings/Addons/Addons.tsx @@ -52,6 +52,9 @@ const Addons = () => { } const cpuArchitecture = getCloudProviderArchitecture(selectedProject?.cloud_provider) + // Only projects of version greater than supabase-postgrest-14.1.0.44 can use PITR + // const sufficientPgVersion = getSemanticVersion(selectedProject?.dbVersion ?? '') >= 141044 + const sufficientPgVersion = false // [Joshen] We could possibly look into reducing the interval to be more "realtime" // I tried setting the interval to 1m but no data was returned, may need to experiment @@ -378,19 +381,44 @@ const Addons = () => { ? `Point in time recovery of ${pitr.variant.meta?.backup_duration_days} days is enabled` : 'Point in time recovery is not enabled'}

- - + + + + + ) : ( + - Change point in time recovery - - + + + )} From 8ba1c6be659eee471b783814c9b0d6e746b0c204 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 21 Sep 2023 10:40:46 +0800 Subject: [PATCH 2/6] Fix --- .../BillingV2/Subscription/Subscription.tsx | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 studio/components/interfaces/BillingV2/Subscription/Subscription.tsx diff --git a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx new file mode 100644 index 00000000000..2ba895d23d9 --- /dev/null +++ b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx @@ -0,0 +1,117 @@ +import { useRouter } from 'next/router' +import AddOns from './AddOns/AddOns' +import BillingBreakdown from './BillingBreakdown' +import CostControl from './CostControl/CostControl' +import SubscriptionTier from './Tier/SubscriptionTier' +import { SUBSCRIPTION_PANEL_KEYS, useSubscriptionPageStateSnapshot } from 'state/subscription-page' +import { useSelectedOrganization } from 'hooks' +import { useEffect } from 'react' +import InformationBox from 'components/ui/InformationBox' +import { Button, IconExternalLink, IconInfo } from 'ui' +import Link from 'next/link' + +// [Joshen] This can be deprecated I think - no longer used + +export interface SubscriptionProps {} + +const Subscription = ({}: SubscriptionProps) => { + const router = useRouter() + const organization = useSelectedOrganization() + const snap = useSubscriptionPageStateSnapshot() + const allowedValues = [ + 'subscriptionPlan', + 'costControl', + 'computeInstance', + 'pitr', + 'customDomain', + ] + + const panel = router.query.panel + const isOrgBilling = !!organization?.subscription_id + + useEffect(() => { + if (panel && typeof panel === 'string' && allowedValues.includes(panel)) { + snap.setPanelKey(panel as SUBSCRIPTION_PANEL_KEYS) + } + }, [panel]) + + // No need to bother rendering, we'll redirect anyway + if (isOrgBilling) return null + + return ( + <> +
+
+

Subscription

+
+
+ +
+ } + defaultVisibility={true} + hideCollapse + title="We're upgrading our billing system" + description={ +
+

+ This organization uses the legacy project-based billing. We’ve recently made some + big improvements to our billing system. To migrate to the new organization-based + billing, head over to your{' '} + + + organization billing settings + + + . +

+ +
+ + + + + + +
+
+ } + /> +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + ) +} + +export default Subscription From 6c773ba47cf8095d23246357daa1a975ad404977 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 21 Sep 2023 10:43:28 +0800 Subject: [PATCH 3/6] Fix --- .../BillingV2/Subscription/AddOns/AddOns.tsx | 58 ++++++++++++++----- .../BillingV2/Subscription/Subscription.tsx | 2 - .../Subscription/Subscription.utils.ts | 14 ----- .../interfaces/Settings/Addons/Addons.tsx | 4 +- studio/lib/helpers.ts | 14 +++++ 5 files changed, 59 insertions(+), 33 deletions(-) diff --git a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx index 98cab652a62..f294bf38861 100644 --- a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx +++ b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx @@ -2,7 +2,15 @@ import { useParams, useTheme } from 'common' import dayjs from 'dayjs' import Link from 'next/link' import { useMemo } from 'react' -import { Alert, Button, IconChevronRight, IconExternalLink } from 'ui' +import { + Alert, + AlertDescription_Shadcn_, + AlertTitle_Shadcn_, + Alert_Shadcn_, + Button, + IconChevronRight, + IconExternalLink, +} from 'ui' import ProjectUpdateDisabledTooltip from 'components/interfaces/Organization/BillingSettings/ProjectUpdateDisabledTooltip' import { @@ -20,8 +28,9 @@ import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' import { useFlag } from 'hooks' import { getCloudProviderArchitecture } from 'lib/cloudprovider-utils' import { BASE_PATH } from 'lib/constants' +import { getSemanticVersion } from 'lib/helpers' import { useSubscriptionPageStateSnapshot } from 'state/subscription-page' -import { getAddons, getSemanticVersion } from '../Subscription.utils' +import { getAddons } from '../Subscription.utils' const AddOns = () => { const { isDarkMode } = useTheme() @@ -35,7 +44,6 @@ const AddOns = () => { // Only projects of version greater than supabase-postgrest-14.1.0.44 can use PITR const sufficientPgVersion = getSemanticVersion(selectedProject?.dbVersion ?? '') >= 141044 - console.log({ sufficientPgVersion }) // [Joshen] We could possibly look into reducing the interval to be more "realtime" // I tried setting the interval to 1m but no data was returned, may need to experiment @@ -313,19 +321,39 @@ const AddOns = () => { ? `Point in time recovery of ${pitr.variant.meta?.backup_duration_days} days is enabled` : 'Point in time recovery is not enabled'}

- - + + + + + ) : ( + - Change point in time recovery - - + + + )} diff --git a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx index 2ba895d23d9..2edafb2f14c 100644 --- a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx +++ b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx @@ -10,8 +10,6 @@ import InformationBox from 'components/ui/InformationBox' import { Button, IconExternalLink, IconInfo } from 'ui' import Link from 'next/link' -// [Joshen] This can be deprecated I think - no longer used - export interface SubscriptionProps {} const Subscription = ({}: SubscriptionProps) => { diff --git a/studio/components/interfaces/BillingV2/Subscription/Subscription.utils.ts b/studio/components/interfaces/BillingV2/Subscription/Subscription.utils.ts index 614f1beaa27..1b288cee149 100644 --- a/studio/components/interfaces/BillingV2/Subscription/Subscription.utils.ts +++ b/studio/components/interfaces/BillingV2/Subscription/Subscription.utils.ts @@ -18,17 +18,3 @@ export const subscriptionHasHipaaAddon = ( subscription.addons.some((addon) => addon.supabase_prod_id === 'addon_security_hipaa') ) } - -export const getSemanticVersion = (version: string) => { - if (!version) return 0 - - // e.g supabase-postgres-14.1.0.88 - // There's 4 segments instead so we can't use the semver package - const segments = version.split('supabase-postgres-') - const semver = segments[segments.length - 1] - - // e.g supabase-postgres-14.1.0.99-vault-rc1 - const formattedSemver = semver.split('-')[0] - - return Number(formattedSemver.split('.').join('')) -} diff --git a/studio/components/interfaces/Settings/Addons/Addons.tsx b/studio/components/interfaces/Settings/Addons/Addons.tsx index 93b414df8f6..9c7db762f7c 100644 --- a/studio/components/interfaces/Settings/Addons/Addons.tsx +++ b/studio/components/interfaces/Settings/Addons/Addons.tsx @@ -23,6 +23,7 @@ import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' import { useFlag, useProjectByRef } from 'hooks' import { getCloudProviderArchitecture } from 'lib/cloudprovider-utils' import { BASE_PATH } from 'lib/constants' +import { getSemanticVersion } from 'lib/helpers' import { SUBSCRIPTION_PANEL_KEYS, useSubscriptionPageStateSnapshot } from 'state/subscription-page' import { Alert, @@ -53,8 +54,7 @@ const Addons = () => { const cpuArchitecture = getCloudProviderArchitecture(selectedProject?.cloud_provider) // Only projects of version greater than supabase-postgrest-14.1.0.44 can use PITR - // const sufficientPgVersion = getSemanticVersion(selectedProject?.dbVersion ?? '') >= 141044 - const sufficientPgVersion = false + const sufficientPgVersion = getSemanticVersion(selectedProject?.dbVersion ?? '') >= 141044 // [Joshen] We could possibly look into reducing the interval to be more "realtime" // I tried setting the interval to 1m but no data was returned, may need to experiment diff --git a/studio/lib/helpers.ts b/studio/lib/helpers.ts index 843c2b4727d..fd74478d6bb 100644 --- a/studio/lib/helpers.ts +++ b/studio/lib/helpers.ts @@ -280,3 +280,17 @@ export const removeCommentsFromSql = (sql: string) => { return cleanedSql } + +export const getSemanticVersion = (version: string) => { + if (!version) return 0 + + // e.g supabase-postgres-14.1.0.88 + // There's 4 segments instead so we can't use the semver package + const segments = version.split('supabase-postgres-') + const semver = segments[segments.length - 1] + + // e.g supabase-postgres-14.1.0.99-vault-rc1 + const formattedSemver = semver.split('-')[0] + + return Number(formattedSemver.split('.').join('')) +} From c76ab2f5817f8fed44b3ec01e70ff85dc3edbed8 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 21 Sep 2023 10:48:05 +0800 Subject: [PATCH 4/6] Fix --- .../interfaces/BillingV2/Subscription/AddOns/AddOns.tsx | 7 ++++--- studio/components/interfaces/Settings/Addons/Addons.tsx | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx index f294bf38861..59bb5c7f110 100644 --- a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx +++ b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx @@ -331,11 +331,12 @@ const AddOns = () => { Reach out to us via support if you're interested

- - - + diff --git a/studio/components/interfaces/Settings/Addons/Addons.tsx b/studio/components/interfaces/Settings/Addons/Addons.tsx index 9c7db762f7c..d2418cf2b32 100644 --- a/studio/components/interfaces/Settings/Addons/Addons.tsx +++ b/studio/components/interfaces/Settings/Addons/Addons.tsx @@ -391,11 +391,12 @@ const Addons = () => { Reach out to us via support if you're interested

- - - + From d2912cc6449c8cee955107d701408d9d06593e7c Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 21 Sep 2023 15:02:20 +0800 Subject: [PATCH 5/6] Update studio/components/interfaces/Settings/Addons/Addons.tsx Co-authored-by: Alaister Young --- studio/components/interfaces/Settings/Addons/Addons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/components/interfaces/Settings/Addons/Addons.tsx b/studio/components/interfaces/Settings/Addons/Addons.tsx index d2418cf2b32..ff9f17411e9 100644 --- a/studio/components/interfaces/Settings/Addons/Addons.tsx +++ b/studio/components/interfaces/Settings/Addons/Addons.tsx @@ -384,7 +384,7 @@ const Addons = () => { {!sufficientPgVersion ? ( - Your project is too old to be able to enable PITR for + Your project is too old to enable PITR

From 928f0aa04c9782e182f650109d89122d69ca6f41 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 21 Sep 2023 15:02:42 +0800 Subject: [PATCH 6/6] Update studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx Co-authored-by: Alaister Young --- .../interfaces/BillingV2/Subscription/AddOns/AddOns.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx index 59bb5c7f110..add189560b2 100644 --- a/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx +++ b/studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx @@ -324,7 +324,7 @@ const AddOns = () => { {!sufficientPgVersion ? ( - Your project is too old to be able to enable PITR for + Your project is too old enable PITR