Feature/add user storage threshold

common/utilities.ts

@@ -172,6 +172,32 @@ export const getAuthAddress = async (headers) => {
   }
 }
 
+export const getUserStorageThreshold = async (headers) => {
+  try {
+    const token = Cookies.get(headers, C.auth);
+    const url = `${C.api.host}/user/utilization`;
+    const response = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    const json = await response.json();
+
+    if (!json) {
+      return null;
+    }
+
+    if (json.error) {
+      return null;
+    }
+
+    return json;
+  } catch (e) {
+    return null;
+  }
+}
+
 export const getViewerFromHeader = async (headers) => {
   try {
     const token = Cookies.get(headers, C.auth);

pages/home.tsx

@@ -15,6 +15,7 @@ import PageHeader from '@components/PageHeader';
 
 import { H2, P } from '@components/Typography';
 import FilesTable from '@root/components/FilesTable';
+import AlertPanel from '@components/AlertPanel';
 
 const INCREMENT = 1000;
 
@@ -56,6 +57,7 @@ function HomePage(props: any) {
   const [state, setState] = React.useState({
     files: null,
     stats: null,
+    threshold: null,
     offset: 0,
     limit: INCREMENT,
   });
@@ -64,9 +66,10 @@ function HomePage(props: any) {
     const run = async () => {
       const files = await R.get(`/content/contents?offset=${state.offset}&limit=${state.limit}`, props.api);
       const stats = await R.get('/user/stats', props.api);
+      const threshold = await R.get('/user/utilization', props.api);
 
       if (files && !files.error) {
-        setState({ ...state, files, stats });
+        setState({ ...state, files, stats, threshold });
       }
     };
 
@@ -107,6 +110,25 @@ function HomePage(props: any) {
           </PageHeader>
         )}
 
+        { state.stats && state.threshold ? (
+          <div className={ styles.group }>
+            { state.stats.totalSize >= state.threshold.soft_limit && state.stats.totalSize < state.threshold.hard_limit ? (
+              <AlertPanel title='Soft Limit Threshold Reached'>
+                You are currently at { U.formatNumber((state.stats.totalSize / state.threshold.hard_limit) * 100) }% of
+                storage utilization. Once your hard limit threshold is reached
+                ({ U.bytesToSize(state.threshold.hard_limit) }), you will no longer be able to upload files. Please get
+                in touch with the Estuary Team if you require additional storage.
+              </AlertPanel>
+            ) : null }
+            { state.stats.totalSize >= state.threshold.hard_limit ? (
+              <AlertPanel title='Hard Limit Threshold Reached'>
+                You have reached your hard limit threshold { U.bytesToSize(state.threshold.hard_limit) }. Please get in touch
+                with the Estuary Team if you require additional storage.
+              </AlertPanel>
+            ) : null }
+          </div>
+        ) : null }
+
         {state.stats ? (
           <div className={styles.group}>
             <table className={tstyles.table}>

pages/settings.tsx

@@ -20,6 +20,7 @@ import Modal from '@components/Modal';
 
 export async function getServerSideProps(context) {
   const viewer = await U.getViewerFromHeader(context.req.headers);
+  const threshold = await U.getUserStorageThreshold(context.req.headers)
   const wallet = await U.getAuthAddress(context.req.headers);
   const host = context.req.headers.host;
   const protocol = host.split(':')[0] === 'localhost' ? 'http' : 'https';
@@ -34,6 +35,7 @@ export async function getServerSideProps(context) {
   }
 
   viewer.wallet = wallet;
+  viewer.threshold = threshold;
 
   return {
     props: { host, protocol, viewer, api: process.env.NEXT_PUBLIC_ESTUARY_API, hostname: `https://${context.req.headers.host}` },
@@ -298,6 +300,14 @@ function SettingsPage(props: any) {
           <aside className={styles.formAside}>
             If you upload anything under {U.bytesToSize(viewer.settings.fileStagingThreshold)}, Estuary will initialize a staging area for those files.
           </aside>
+
+          <H4 style={ { marginTop: 24 } }>User soft limit threshold (%)</H4>
+          <Input style={ { marginTop: 8 } } readOnly
+                 value={ U.formatNumber((viewer.threshold.soft_limit / viewer.threshold.hard_limit) * 100) } />
+
+          <H4 style={ { marginTop: 24 } }>User hard limit threshold</H4>
+          <Input style={ { marginTop: 8 } } readOnly value={ U.bytesToSize(viewer.threshold.hard_limit) } />
+
         </SingleColumnLayout>
       </AuthenticatedLayout>
     </Page>