Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(console): App storage usage warnings #2845

Merged
merged 3 commits into from
Feb 29, 2024
Merged

feat(console): App storage usage warnings #2845

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bafe517
feat(console): App storage usage warnings
Cosmin-Parvulescu Feb 26, 2024
dcb0bd9
Fix storage usage condition
Cosmin-Parvulescu Feb 26, 2024
72e007a
Fix storage usage condition in ostrich component
Cosmin-Parvulescu Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions apps/console/app/routes/apps/$clientId/storage.ostrich.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -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">
Expand Down
Loading