From 3f3e67ee57732c6810797ebeddbd8561d4fa0951 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cosmin=20P=C3=A2rvulescu?=
 <Cosmin-Parvulescu@users.noreply.github.com>
Date: Thu, 29 Feb 2024 15:46:53 +0200
Subject: [PATCH] feat(console): App storage usage warnings (#2845)

---
 .../routes/apps/$clientId/storage.ostrich.tsx | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/apps/console/app/routes/apps/$clientId/storage.ostrich.tsx b/apps/console/app/routes/apps/$clientId/storage.ostrich.tsx
index 32d2b9c4f..2d3614e75 100644
--- a/apps/console/app/routes/apps/$clientId/storage.ostrich.tsx
+++ b/apps/console/app/routes/apps/$clientId/storage.ostrich.tsx
@@ -58,6 +58,7 @@ import {
   packageTypeToTopUpPriceID,
 } from '@proofzero/utils/external-app-data'
 import ExternalAppDataPackages from '@proofzero/utils/externalAppDataPackages'
+import { HiExclamationTriangle } from 'react-icons/hi2'
 
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context, params }) => {
@@ -382,6 +383,42 @@ export default () => {
           </section>
         )}
 
+        {appDetails.externalAppDataPackageDefinition &&
+          appDetails.externalAppDataPackageDefinition.status ===
+            ExternalAppDataPackageStatus.Enabled &&
+          !appDetails.externalAppDataPackageDefinition.autoTopUp &&
+          appExternalStorageUsage &&
+          (appExternalStorageUsage.readUsage >=
+            Math.floor(0.9 * appExternalStorageUsage.readAvailable) ||
+            appExternalStorageUsage.writeUsage >=
+              Math.floor(0.9 * appExternalStorageUsage.writeAvailable)) && (
+            <div className="flex flex-row rounded p-4 gap-2 bg-orange-50 items-center">
+              <HiExclamationTriangle className="h-5 w-5 text-orange-400" />
+
+              <div className="flex-1">
+                <Text
+                  size="sm"
+                  weight="medium"
+                  className="text-left text-orange-600 max-w-[695px]"
+                >
+                  Number of Reads / Writes available dropped below 10% in your
+                  Data Unit Package. Upgrade Package or enable auto-top up to
+                  ensure your services run as expected.
+                </Text>
+              </div>
+
+              <button
+                onClick={() => {
+                  setIsSubscriptionModalOpen(true)
+                }}
+              >
+                <Text size="sm" weight="medium" className="text-orange-600">
+                  Edit package →
+                </Text>
+              </button>
+            </div>
+          )}
+
         <section className="flex-1 bg-white border rounded-lg px-4 pt-3 pb-6">
           <section className="flex flex-row justify-between items-center">
             <div className="flex flex-row gap-2 items-center">