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

Update Usage types and move file

Browse Source
This commit is contained in:
Nick Rayburn committed 2022-05-14 15:00:21 -05:00
1 parent a9a65d2b5c
commit 1a48de2cf7
4 files changed
+81 -56
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

studio/components/interfaces/Home/ProjectUsage.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ import {
import Panel from 'components/ui/Panel'
import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
import { ProjectUsageMinimal } from 'components/to-be-cleaned/Usage'
import { ProjectUsageMinimal } from 'components/ui/Usage'
import { useFlag } from 'hooks'
import { get } from 'lib/common/fetch'
studio/components/to-be-cleaned/Usage.tsx → studio/components/ui/Usage.tsx
+74 -50
View File
@@ -1,12 +1,25 @@
import React, { FC, useEffect, useState } from 'react'
import React, { FC, useEffect } from 'react'
import useSWR from 'swr'
import { Loading, Typography } from '@supabase/ui'
import { useProjectSubscription, useStore } from 'hooks'
import { API_URL, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
import { get, post } from 'lib/common/fetch'
import { get } from 'lib/common/fetch'
import SparkBar from 'components/ui/SparkBar'
interface ApiUsageStats {
authUsers: string | null;
bucketSize: string | null;
dbSize: string | null;
dbTables: string | null;
}
interface UsageStats {
authUsers: number;
bucketSize: number;
dbSize: number;
dbTables: number;
}
const GB = 1000000000
const MB = 1000000
@@ -32,13 +45,13 @@ const usageLimits = {
title: 'Database space',
tiers: {
free: {
description: (stats: any) =>
`${(((stats?.dbSize || 0) / (500 * MB)) * 100).toFixed(2)} %`,
render: (stats: any) => {
const bytes: any = stats?.dbSize ? new Number(stats?.dbSize) : 0
description: (stats: UsageStats) =>
`${((stats.dbSize / (500 * MB)) * 100).toFixed(2)} %`,
render: (stats: UsageStats) => {
const bytes: number = stats.dbSize;
const usage = {
gb: bytes / GB || 0,
mb: bytes / MB || 0,
gb: bytes / GB,
mb: bytes / MB,
}
return (
<SparkBar
@@ -46,20 +59,20 @@ const usageLimits = {
max={500}
type={'horizontal'}
barClass={'bg-brand-900'}
labelBottom={`${new Number(usage.mb).toFixed(2).toLocaleString()} MB`}
labelBottom={`${usage.mb.toFixed(2).toLocaleString()} MB`}
labelTop={`500 MB`}
/>
)
},
},
pro: {
description: (stats: any) =>
`${(((stats?.dbSize || 0) / (8000 * MB)) * 100).toFixed(2)} %`,
render: (stats: any) => {
const bytes: any = stats?.dbSize ? new Number(stats?.dbSize) : 0
description: (stats: UsageStats) =>
`${((stats.dbSize / (8000 * MB)) * 100).toFixed(2)} %`,
render: (stats: UsageStats) => {
const bytes: number = stats.dbSize
const usage = {
gb: bytes / GB || 0,
mb: bytes / MB || 0,
gb: bytes / GB,
mb: bytes / MB,
}
return (
<SparkBar
@@ -67,7 +80,7 @@ const usageLimits = {
max={8000}
type={'horizontal'}
barClass={'bg-brand-900'}
labelBottom={`${new Number(usage.mb).toFixed(2).toLocaleString()} MB`}
labelBottom={`${usage.mb.toFixed(2).toLocaleString()} MB`}
labelTop={`8 GB`}
/>
)
@@ -85,29 +98,29 @@ const usageLimits = {
title: 'Users',
tiers: {
free: {
description: (stats: any) => `${(((stats?.authUsers || 0) / 10000) * 100).toFixed(2)}%`,
render: (stats: any) => (
description: (stats: UsageStats) => `${((stats.authUsers / 10000) * 100).toFixed(2)}%`,
render: (stats: UsageStats) => (
<SparkBar
value={stats?.authUsers || 0}
value={stats.authUsers}
max={10000}
type={'horizontal'}
barClass={'bg-brand-900'}
labelBottom={stats?.authUsers ? new Number(stats?.authUsers).toLocaleString() : '0'}
labelTop={`${new Number(10000).toLocaleString()}`}
labelBottom={stats.authUsers.toLocaleString()}
labelTop={`${Number(10000).toLocaleString()}`}
/>
),
},
pro: {
description: (stats: any) =>
`${(((stats?.authUsers || 0) / 100000) * 100).toFixed(2)}%`,
render: (stats: any) => (
description: (stats: UsageStats) =>
`${((stats.authUsers / 100000) * 100).toFixed(2)}%`,
render: (stats: UsageStats) => (
<SparkBar
value={stats?.authUsers || 0}
value={stats.authUsers}
max={100000}
type={'horizontal'}
barClass={'bg-brand-900'}
labelBottom={stats?.authUsers ? new Number(stats?.authUsers).toLocaleString() : '0'}
labelTop={`${new Number(100000).toLocaleString()}`}
labelBottom={stats.authUsers.toLocaleString()}
labelTop={`${Number(100000).toLocaleString()}`}
/>
),
},
@@ -117,11 +130,11 @@ const usageLimits = {
title: 'Auth confirmation emails',
tiers: {
free: {
description: () => `${new Number(1000).toLocaleString()}/month`,
description: () => `${Number(1000).toLocaleString()}/month`,
render: null,
},
pro: {
description: () => `${new Number(30000).toLocaleString()}/month`,
description: () => `${Number(30000).toLocaleString()}/month`,
render: null,
},
},
@@ -136,38 +149,34 @@ const usageLimits = {
title: 'Storage space',
tiers: {
free: {
description: (stats: any) =>
`${(((stats?.bucketSize || 0) / (1 * GB)) * 100).toFixed(2)}%`,
render: (stats: any) => (
description: (stats: UsageStats) =>
`${((stats.bucketSize / (1 * GB)) * 100).toFixed(2)}%`,
render: (stats: UsageStats) => (
<SparkBar
value={stats?.bucketSize / (1024 * 1024) || 0}
value={stats.bucketSize / (1024 * 1024) || 0}
max={1 * 1024}
type={'horizontal'}
barClass={'bg-brand-900'}
labelBottom={
stats?.bucketSize
? `${new Number(stats?.bucketSize / (1024 * 1024)).toLocaleString()} MB`
: '0'
`${(stats.bucketSize / (1024 * 1024)).toLocaleString()} MB`
}
labelTop={`${new Number(1 * 1024).toLocaleString()} MB`}
labelTop={`${(1 * 1024).toLocaleString()} MB`}
/>
),
},
pro: {
description: (stats: any) =>
`${(((stats?.bucketSize || 0) / (100 * GB)) * 100).toFixed(2)}%`,
render: (stats: any) => (
description: (stats: UsageStats) =>
`${((stats.bucketSize / (100 * GB)) * 100).toFixed(2)}%`,
render: (stats: UsageStats) => (
<SparkBar
value={stats?.bucketSize / (1024 * 1024) || 0}
value={stats.bucketSize / (1024 * 1024) || 0}
max={100 * 1024}
type={'horizontal'}
barClass={'bg-brand-900'}
labelBottom={
stats?.bucketSize
? `${new Number(stats?.bucketSize / (1024 * 1024)).toLocaleString()} MB`
: '0'
`${(stats.bucketSize / (1024 * 1024)).toLocaleString()} MB`
}
labelTop={`${new Number(100).toLocaleString()} GB`}
labelTop={`${Number(100).toLocaleString()} GB`}
/>
),
},
@@ -177,11 +186,11 @@ const usageLimits = {
title: 'Transfer limits',
tiers: {
free: {
description: () => `${new Number(2).toLocaleString()} GB`,
description: () => `${Number(2).toLocaleString()} GB`,
render: () => {},
},
pro: {
description: () => `${new Number(200).toLocaleString()} GB`,
description: () => `${Number(200).toLocaleString()} GB`,
render: () => {},
},
},
@@ -190,7 +199,12 @@ const usageLimits = {
},
}
const ProjectUsage: FC<any> = ({ projectRef, subscription_id }) => {
interface ProjectUsageProps {
projectRef?: string;
subscription_id?: string;
}
const ProjectUsage: FC<ProjectUsageProps> = ({ projectRef, subscription_id }) => {
const { ui } = useStore()
const { data: stats, error: usageError } = useSWR(`${API_URL}/projects/${projectRef}/usage`, get)
const { subscription, isLoading: loading, error } = useProjectSubscription(projectRef)
@@ -268,9 +282,19 @@ const ProjectUsage: FC<any> = ({ projectRef, subscription_id }) => {
export default ProjectUsage
export const ProjectUsageMinimal: FC<any> = ({ projectRef, subscription_id, filter }) => {
const { data: stats, error: usageError } = useSWR(`${API_URL}/projects/${projectRef}/usage`, get)
interface ProjectUsageMinimalProps extends ProjectUsageProps {
filter: string;
}
export const ProjectUsageMinimal: FC<ProjectUsageMinimalProps> = ({ projectRef, subscription_id, filter }) => {
const { data: apiStats, error: usageError } = useSWR<ApiUsageStats>(`${API_URL}/projects/${projectRef}/usage`, get)
const { subscription, isLoading: loading, error } = useProjectSubscription(projectRef)
const stats: UsageStats = {
authUsers: Number(apiStats?.authUsers),
bucketSize: Number(apiStats?.bucketSize),
dbSize: Number(apiStats?.dbSize),
dbTables: Number(apiStats?.dbTables)
}
if (subscription?.tier?.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.PAYG) {
return <></>
studio/pages/project/[ref]/settings/billing/index.tsx
+4 -3
View File
@@ -9,9 +9,10 @@ import { SettingsLayout } from 'components/layouts'
import LoadingUI from 'components/ui/Loading'
import { PAYGUsage, Subscription, Invoices } from 'components/interfaces/Billing'
import ProjectUsage from 'components/to-be-cleaned/Usage'
import ProjectUsage from 'components/ui/Usage'
import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
import { PaygStats } from 'components/interfaces/Billing/PAYGUsage/PAYGUsage.types'
import { Project } from '../../../../../types'
type ProjectBillingProps = {} & any
const ProjectBilling: FC<ProjectBillingProps> = ({ store }) => {
@@ -32,7 +33,7 @@ const ProjectBilling: FC<ProjectBillingProps> = ({ store }) => {
export default withAuth(observer(ProjectBilling))
type SettingsProps = {
project: any
project?: Project
}
const Settings: FC<SettingsProps> = ({ project }) => {
const { ui } = useStore()
@@ -108,7 +109,7 @@ const Settings: FC<SettingsProps> = ({ project }) => {
{paygStats && <PAYGUsage paygStats={paygStats} />}
</div>
) : (
<ProjectUsage projectRef={project.ref} subscription_id={project.subscription_id} />
<ProjectUsage projectRef={project?.ref} subscription_id={project?.subscription_id} />
)}
<div className="space-y-2">
<h4 className="text-lg">Invoices</h4>
studio/pages/project/[ref]/settings/database.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ import { API_URL, DEFAULT_MINIMUM_PASSWORD_STRENGTH, TIME_PERIODS_INFRA } from '
import { SettingsLayout } from 'components/layouts'
import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
import Panel from 'components/ui/Panel'
import { ProjectUsageMinimal } from 'components/to-be-cleaned/Usage'
import { ProjectUsageMinimal } from 'components/ui/Usage'
import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
@@ -50,7 +50,7 @@ export default withAuth(observer(ProjectSettings))
const Usage: FC<any> = ({ project }) => {
const [dateRange, setDateRange] = useState<any>(undefined)
const router = useRouter()
const { ref } = router.query
const ref = router.query.ref as string;
return (
<>