From 1a48de2cf76fe4ce50828acbba203aabc39a2d73 Mon Sep 17 00:00:00 2001
From: Nick Rayburn <52075362+nrayburn-tech@users.noreply.github.com>
Date: Sat, 14 May 2022 14:53:00 -0500
Subject: [PATCH] Update Usage types and move file

---
 .../interfaces/Home/ProjectUsage.tsx          |   2 +-
 .../{to-be-cleaned => ui}/Usage.tsx           | 124 +++++++++++-------
 .../project/[ref]/settings/billing/index.tsx  |   7 +-
 .../pages/project/[ref]/settings/database.tsx |   4 +-
 4 files changed, 81 insertions(+), 56 deletions(-)
 rename studio/components/{to-be-cleaned => ui}/Usage.tsx (69%)

diff --git a/studio/components/interfaces/Home/ProjectUsage.tsx b/studio/components/interfaces/Home/ProjectUsage.tsx
index a0110d67924..a24898e965b 100644
--- a/studio/components/interfaces/Home/ProjectUsage.tsx
+++ b/studio/components/interfaces/Home/ProjectUsage.tsx
@@ -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'
diff --git a/studio/components/to-be-cleaned/Usage.tsx b/studio/components/ui/Usage.tsx
similarity index 69%
rename from studio/components/to-be-cleaned/Usage.tsx
rename to studio/components/ui/Usage.tsx
index ef03f7914ca..64a49e0284a 100644
--- a/studio/components/to-be-cleaned/Usage.tsx
+++ b/studio/components/ui/Usage.tsx
@@ -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 <></>
diff --git a/studio/pages/project/[ref]/settings/billing/index.tsx b/studio/pages/project/[ref]/settings/billing/index.tsx
index 7239867bb1a..dbe40bbb4c6 100644
--- a/studio/pages/project/[ref]/settings/billing/index.tsx
+++ b/studio/pages/project/[ref]/settings/billing/index.tsx
@@ -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>
diff --git a/studio/pages/project/[ref]/settings/database.tsx b/studio/pages/project/[ref]/settings/database.tsx
index 41e0f78b40b..808f9aaa6b1 100644
--- a/studio/pages/project/[ref]/settings/database.tsx
+++ b/studio/pages/project/[ref]/settings/database.tsx
@@ -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 (
     <>