Hide included value and overages and sparkbar if project ref selected…

… in org usage
ssi379 · Jul 6, 2023 · 2f70479 · 2f70479
1 parent 7f28e47
commit 2f70479
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 42 deletions.
diff --git a/studio/components/interfaces/Organization/Usage/Activity.tsx b/studio/components/interfaces/Organization/Usage/Activity.tsx
@@ -116,6 +116,7 @@ const Activity = ({
   return (
     <UsageSection
       orgSlug={orgSlug}
+      projectRef={projectRef}
       categoryKey="activity"
       chartMeta={chartMeta}
       subscription={subscription}

diff --git a/studio/components/interfaces/Organization/Usage/Bandwidth.tsx b/studio/components/interfaces/Organization/Usage/Bandwidth.tsx
@@ -43,6 +43,7 @@ const Bandwidth = ({
   return (
     <UsageSection
       orgSlug={orgSlug}
+      projectRef={projectRef}
       categoryKey="bandwidth"
       chartMeta={chartMeta}
       subscription={subscription}

diff --git a/studio/components/interfaces/Organization/Usage/SizeAndCounts.tsx b/studio/components/interfaces/Organization/Usage/SizeAndCounts.tsx
@@ -70,6 +70,7 @@ const SizeAndCounts = ({
   return (
     <UsageSection
       orgSlug={orgSlug}
+      projectRef={projectRef}
       categoryKey="sizeCount"
       chartMeta={chartMeta}
       subscription={subscription}

diff --git a/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx b/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx
@@ -24,6 +24,7 @@ import { useMemo } from 'react'
 
 export interface AttributeUsageProps {
   slug: string
+  projectRef?: string
   attribute: CategoryAttribute
   usage?: OrgUsageResponse
   usageMeta?: UsageMetric
@@ -40,6 +41,7 @@ export interface AttributeUsageProps {
 
 const AttributeUsage = ({
   slug,
+  projectRef,
   attribute,
   usage,
   usageMeta,
@@ -158,39 +160,44 @@ const AttributeUsage = ({
                     )}
                   </div>
 
-                  {currentBillingCycleSelected && !usageMeta.unlimited && (
-                    <SparkBar
-                      type="horizontal"
-                      barClass={clsx(
-                        usageRatio >= 1
-                          ? usageBasedBilling
-                            ? 'bg-scale-1100'
-                            : 'bg-red-900'
-                          : usageBasedBilling === false && usageRatio >= USAGE_APPROACHING_THRESHOLD
-                          ? 'bg-amber-900'
-                          : 'bg-scale-1100'
-                      )}
-                      bgClass="bg-gray-300 dark:bg-gray-600"
-                      value={usageMeta?.usage ?? 0}
-                      max={usageMeta?.pricing_free_units || 1}
-                    />
-                  )}
+                  {projectRef === undefined &&
+                    currentBillingCycleSelected &&
+                    !usageMeta.unlimited && (
+                      <SparkBar
+                        type="horizontal"
+                        barClass={clsx(
+                          usageRatio >= 1
+                            ? usageBasedBilling
+                              ? 'bg-scale-1100'
+                              : 'bg-red-900'
+                            : usageBasedBilling === false &&
+                              usageRatio >= USAGE_APPROACHING_THRESHOLD
+                            ? 'bg-amber-900'
+                            : 'bg-scale-1100'
+                        )}
+                        bgClass="bg-gray-300 dark:bg-gray-600"
+                        value={usageMeta?.usage ?? 0}
+                        max={usageMeta?.pricing_free_units || 1}
+                      />
+                    )}
 
                   <div>
-                    <div className="flex items-center justify-between border-b py-1">
-                      <p className="text-xs text-scale-1000">
-                        Included in {subscription?.plan?.name.toLowerCase()} plan
-                      </p>
-                      {usageMeta.unlimited ? (
-                        <p className="text-xs">Unlimited</p>
-                      ) : (
-                        <p className="text-xs">
-                          {attribute.unit === 'bytes'
-                            ? `${usageMeta.pricing_free_units ?? 0} GB`
-                            : (usageMeta.pricing_free_units ?? 0).toLocaleString()}
+                    {projectRef === undefined && (
+                      <div className="flex items-center justify-between border-b py-1">
+                        <p className="text-xs text-scale-1000">
+                          Included in {subscription?.plan?.name.toLowerCase()} plan
                         </p>
-                      )}
-                    </div>
+                        {usageMeta.unlimited ? (
+                          <p className="text-xs">Unlimited</p>
+                        ) : (
+                          <p className="text-xs">
+                            {attribute.unit === 'bytes'
+                              ? `${usageMeta.pricing_free_units ?? 0} GB`
+                              : (usageMeta.pricing_free_units ?? 0).toLocaleString()}
+                          </p>
+                        )}
+                      </div>
+                    )}
                     {currentBillingCycleSelected && (
                       <div className="flex items-center justify-between py-1">
                         <p className="text-xs text-scale-1000">
@@ -203,18 +210,20 @@ const AttributeUsage = ({
                         </p>
                       </div>
                     )}
-                    {currentBillingCycleSelected && (usageMeta?.pricing_free_units ?? 0) > 0 && (
-                      <div className="flex items-center justify-between border-t py-1">
-                        <p className="text-xs text-scale-1000">Overage in period</p>
-                        <p className="text-xs">
-                          {(usageMeta?.pricing_free_units ?? 0) === -1 || usageExcess < 0
-                            ? `0${attribute.unit === 'bytes' ? ' GB' : ''}`
-                            : attribute.unit === 'bytes'
-                            ? `${usageExcess} GB`
-                            : usageExcess.toLocaleString()}
-                        </p>
-                      </div>
-                    )}
+                    {projectRef === undefined &&
+                      currentBillingCycleSelected &&
+                      (usageMeta?.pricing_free_units ?? 0) > 0 && (
+                        <div className="flex items-center justify-between border-t py-1">
+                          <p className="text-xs text-scale-1000">Overage in period</p>
+                          <p className="text-xs">
+                            {(usageMeta?.pricing_free_units ?? 0) === -1 || usageExcess < 0
+                              ? `0${attribute.unit === 'bytes' ? ' GB' : ''}`
+                              : attribute.unit === 'bytes'
+                              ? `${usageExcess} GB`
+                              : usageExcess.toLocaleString()}
+                          </p>
+                        </div>
+                      )}
                   </div>
                 </div>
 

diff --git a/studio/components/interfaces/Organization/Usage/UsageSection/UsageSection.tsx b/studio/components/interfaces/Organization/Usage/UsageSection/UsageSection.tsx
@@ -50,6 +50,7 @@ const UsageSection = ({
         <AttributeUsage
           key={attribute.name}
           slug={orgSlug}
+          projectRef={projectRef}
           attribute={attribute}
           usage={usage}
           usageMeta={usage?.usages.find((x) => x.metric === attribute.key)}