Merge pull request #85 from ibi-group/api-usage-chart-repair

API Usage Chart Repair
ibi-group · Mar 13, 2024 · 31afc3b · 31afc3b
2 parents 9cce924 + f49a899
commit 31afc3b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 17 deletions.
diff --git a/components/ApiKeyUsageChart.tsx b/components/ApiKeyUsageChart.tsx
@@ -194,6 +194,7 @@ class ApiKeyUsageChart extends Component<Props, { value: GraphValue | null }> {
         {this._renderKeyInfo()}
         <XYPlot
           height={300}
+          style={{ overflow: 'initial' }}
           width={600} // Round up max y value to the nearest 10
           xDomain={[
             timestamp - 2 * ONE_DAY_MILLIS,

diff --git a/components/RequestLogsDashboard.tsx b/components/RequestLogsDashboard.tsx
@@ -5,10 +5,13 @@ import { Sync } from '@styled-icons/fa-solid/Sync'
 import { Button } from 'react-bootstrap'
 import useSWR, { mutate } from 'swr'
 
+import { Plan } from '../types/graph'
+
 import ApiKeyUsage from './ApiKeyUsage'
 import FetchMessage from './FetchMessage'
 
 const REQUEST_LOGS_URL = `${process.env.API_BASE_URL}/api/secure/logs`
+const USAGE_ID = process.env.USAGE_ID || null
 
 type Props = {
   isAdmin?: boolean
@@ -56,7 +59,9 @@ function RequestLogsDashboard({
       )}
       <ApiKeyUsage
         isAdmin={isAdmin}
-        logs={result.data?.data}
+        logs={result.data?.data?.filter(
+          (l: Plan) => USAGE_ID === null || l.result.usagePlanId === USAGE_ID
+        )}
         logsError={result.error}
         summaryView={summaryView}
       />

diff --git a/components/WelcomeScreen.tsx b/components/WelcomeScreen.tsx
@@ -8,6 +8,8 @@ type Props = {
   handleSignup: HandleSignup
 }
 
+const USAGE_ID = process.env.USAGE_ID || null
+
 const WelcomeScreen = ({ handleSignup }: Props): JSX.Element => (
   <>
     <Jumbotron>
@@ -16,21 +18,25 @@ const WelcomeScreen = ({ handleSignup }: Props): JSX.Element => (
         Here, you can view documentation for and gain access to the{' '}
         {process.env.API_NAME}.
       </p>
-      {isApiManagerEnabled() && (
-        <p>
-          <Button className="mr-3" onClick={handleSignup} variant="primary">
-            Sign up for API access
-          </Button>
-          {process.env.API_DOCUMENTATION_URL && (
-            <Button
-              href={process.env.API_DOCUMENTATION_URL}
-              variant="outline-primary"
-            >
-              View API documentation
+      {
+        /* If we're specifying a USAGE_ID then we definitely don't want to
+        be creating API keys in that AWS environment! */
+        isApiManagerEnabled() && USAGE_ID === null && (
+          <p>
+            <Button className="mr-3" onClick={handleSignup} variant="primary">
+              Sign up for API access
             </Button>
-          )}
-        </p>
-      )}
+            {process.env.API_DOCUMENTATION_URL && (
+              <Button
+                href={process.env.API_DOCUMENTATION_URL}
+                variant="outline-primary"
+              >
+                View API documentation
+              </Button>
+            )}
+          </p>
+        )
+      }
     </Jumbotron>
   </>
 )

diff --git a/next.config.js b/next.config.js
@@ -37,7 +37,8 @@ module.exports = (phase, { defaultConfig }) => {
     SITE_TITLE: process.env.SITE_TITLE,
     STATUS_PAGE_URL: process.env.STATUS_PAGE_URL,
     SUPPORT_EMAIL: process.env.SUPPORT_EMAIL,
-    TERMS_CONDITIONS_URL: process.env.TERMS_CONDITIONS_URL
+    TERMS_CONDITIONS_URL: process.env.TERMS_CONDITIONS_URL,
+    USAGE_ID: process.env.USAGE_ID
   }
   // Return config with environment variables and webpack configuration.
   return {

diff --git a/types/graph.ts b/types/graph.ts
@@ -1,6 +1,10 @@
 import { ApiUser } from './user'
 
-export type ApiKey = { startDate: number; items: { [key: string]: Requests } }
+export type ApiKey = {
+  items: { [key: string]: Requests }
+  startDate: number
+  usagePlanId: string
+}
 export type Plan = {
   apiUsers?: { [key: string]: ApiUser }
   result: ApiKey