improve listing usage plans and apis in catalog and allow for Swagger in YAML awslabs#6

Author: brettstack

README.md

@@ -16,17 +16,17 @@ First, ensure you have the [latest AWS CLI installed](http://docs.aws.amazon.com
 
 ### List your products (APIs/Usage Plans)
 
-Add your API Gateway APIs to the array in the `lambdas/backend/catalog.json` file, using the following format. If you have not yet created an API and Usage Plan, see [Generate Your Own API Gateway Developer Portal](https://aws.amazon.com/blogs/compute/generate-your-own-api-gateway-developer-portal/) for a detailed walkthrough. Alternatively, skip this step for now if you just want to get started with your developer portal (A placeholder API with swagger definition is provided for you for demonstration purposes, however, some features such as __Subscribe__ will not work)
+Add your API Gateway Usage Plans and APIs to `lambdas/backend/catalog/index.js`, using the format below, and add your Swagger files to `lambdas/backend/catalog/` directory. If you have not yet created an API and Usage Plan, see [Generate Your Own API Gateway Developer Portal](https://aws.amazon.com/blogs/compute/generate-your-own-api-gateway-developer-portal/) for a detailed walkthrough. Alternatively, skip this step for now if you just want to get started with your developer portal (A placeholder API with swagger definition is provided for you for demonstration purposes, however, some features such as __Subscribe__ will not work)
 
 ```json
 {
-	"apiId": "YOUR_API_ID",
-	"usagePlanId": "YOUR_USAGE_PLAN_ID",
-	"image": "http://example.com/your-api-product-image.svg",
-	"swagger": {
-  	"swagger": "2.0",
-		...
-	}
+  "id": "YOUR_USAGE_PLAN_ID",
+  "name": "Free",
+  "apis": [{
+    "id": "YOUR_API_ID",
+    "image": "/sam-logo.png",
+    "swagger": petStoreSwaggerDefinition
+  }]
 }
 ```
 

dev-portal/src/components/ApiCatalog/index.js

@@ -5,43 +5,43 @@ import { addSubscription, unsubscribe, isSubscribed } from '../../services/api-c
 import { isAuthenticated } from '../../services/self'
 import Usage from '../Usage'
 
-function handleSubscribe(event, api) {
+function handleSubscribe(event, usagePlan) {
   event.preventDefault()
 
-  addSubscription(api.usagePlanId)
+  addSubscription(usagePlan.id)
 }
 
-function handleUnsubscribe(event, api) {
+function handleUnsubscribe(event, usagePlan) {
   event.preventDefault()
 
-  unsubscribe(api.usagePlanId)
+  unsubscribe(usagePlan.id)
 }
 
-const SubscribedApiActionsDropdown = ({api}) => (
+const SubscribedApiActionsDropdown = ({usagePlan, api}) => (
   <Dropdown text='Actions' button>
     <Dropdown.Menu>
-      <Usage api={api} />
-      <Dropdown.Item onClick={event => handleUnsubscribe(event, api)}>Unsubscribe</Dropdown.Item>
+      <Usage usagePlanId={usagePlan.id} />
+      <Dropdown.Item onClick={event => handleUnsubscribe(event, usagePlan)}>Unsubscribe</Dropdown.Item>
     </Dropdown.Menu>
   </Dropdown>)
 
 
-const ApiCard = api => (
-<Card key={api.apiId} style={{textAlign: 'center'}}>
-  <Link to={`apis/${api.apiId}`} style={{background: 'rgba(0, 0, 0, 0.05)'}}>{ api.image ? <Image src={api.image} style={{margin: 'auto'}} /> : ''}</Link>
+const ApiCard = ({usagePlan, api}) => (
+<Card key={api.id} style={{textAlign: 'center'}}>
+  <Link to={`apis/${api.id}`} style={{background: 'rgba(0, 0, 0, 0.05)'}}>{ api.image ? <Image src={api.image} style={{margin: 'auto'}} /> : ''}</Link>
   <Card.Content>
-    <Card.Header><Link to={`apis/${api.apiId}`}>{api.swagger.info.title}</Link></Card.Header>
+    <Card.Header><Link to={`apis/${api.id}`}>{api.swagger.info.title}</Link></Card.Header>
     <Card.Meta>
       <span className='date'>Version {api.swagger.info.version}</span>
     </Card.Meta>
     <Card.Description>{api.swagger.info.description}</Card.Description>
   </Card.Content>
   { isAuthenticated() ? (<Card.Content extra>
-    { isSubscribed(api) ? <SubscribedApiActionsDropdown api={api} /> : <Button onClick={event => handleSubscribe(event, api)}>Subscribe</Button>}
+    { isSubscribed(usagePlan.id) ? <SubscribedApiActionsDropdown api={api} usagePlan={usagePlan} /> : <Button onClick={event => handleSubscribe(event, usagePlan)}>Subscribe</Button>}
   </Card.Content>) : ''}
 </Card>)
 
-export default ({ apis }) => (
+export default ({ catalog }) => (
   <Card.Group itemsPerRow={3} stackable doubling>
-    {apis.map(ApiCard)}
+    {catalog.map(usagePlan => usagePlan.apis.map(api => ApiCard({usagePlan, api})))}
   </Card.Group>)

dev-portal/src/components/Usage/index.js

@@ -16,7 +16,7 @@ import { fetchUsage, mapUsageByDate } from '../../services/api-catalog'
   loadUsage(event) {
     event.preventDefault()
     this.setState({isLoading: true})
-    fetchUsage(this.props.api.usagePlanId)
+    fetchUsage(this.props.usagePlanId)
     .then((result) => {
       const data = mapUsageByDate(result.data, 'used')
       const ctx = document.getElementById('api-usage-chart-container')

dev-portal/src/pages/Apis/index.js

@@ -2,16 +2,16 @@ import React from 'react'
 import { Dimmer, Loader } from 'semantic-ui-react'
 import ApiCatalog from '../../components/ApiCatalog'
 import { isAuthenticated } from '../../services/self'
-import { getApis, fetchSubscriptions } from '../../services/api-catalog'
+import { getCatalog, fetchSubscriptions } from '../../services/api-catalog'
 import Head from '../../components/Head'
 
 export default class ApisPage extends React.Component {
   constructor(props) {
     super(props)
     this.state = {}
 
-    getApis().then(apis => {
-      this.setState({ apis })
+    getCatalog().then(catalog => {
+      this.setState({ catalog })
     })
 
     if (isAuthenticated()) {
@@ -24,7 +24,7 @@ export default class ApisPage extends React.Component {
   render() {
     return (<div>
       <Head {...this.props} />
-      {this.state.apis && (!isAuthenticated() || this.state.subscriptions) ? <ApiCatalog apis={this.state.apis} /> : (<Dimmer active>
+      {this.state.catalog && (!isAuthenticated() || this.state.subscriptions) ? <ApiCatalog catalog={this.state.catalog} /> : (<Dimmer active>
         <Loader content='Loading' />
       </Dimmer>)}
     </div>)

dev-portal/src/services/api-catalog.js

@@ -1,23 +1,32 @@
 import { getApiGatewayClient } from './api'
 export let subscriptions
-let apis
+let catalog
 
-export function getApis() {
-  if (apis) return Promise.resolve(apis)
+export function getCatalog() {
+  if (catalog) return Promise.resolve(catalog)
 
-  return fetchApis()
+  return fetchCatalog()
   .then(({data}) => {
-    apis = data
+    catalog = data
     return data
   })
 }
 
-export function getApi(id) {
-  return getApis()
-  .then(() => apis.find(api => api.apiId === id))
+export function getApi(apiId) {
+  return getCatalog()
+  .then(() => {
+    let _api
+
+    catalog.forEach(c => {
+      if (_api) return
+      _api = c.apis.find(a => a.id === apiId)
+    })
+
+    return _api
+  })
 }
 
-export function fetchApis() {
+export function fetchCatalog() {
   return getApiGatewayClient().then(apiGatewayClient => {
     return apiGatewayClient.get('/catalog', {}, {}, {})
   })
@@ -38,18 +47,18 @@ export function clearSubscriptions() {
   subscriptions = null
 }
 
-export function isSubscribed(api) {
-  return !!getSubscribedUsagePlan(api)
+export function isSubscribed(usagePlanId) {
+  return !!getSubscribedUsagePlan(usagePlanId)
 }
 
-export function getUsagePlanApiStages(api) {
-  const subscribedUsagePlan = getSubscribedUsagePlan(api)
-
-  return (subscribedUsagePlan && subscribedUsagePlan.apiStages) || []
-}
+// export function getUsagePlanApiStages(usagePlanId) {
+//   const subscribedUsagePlan = getSubscribedUsagePlan(usagePlanId)
+//
+//   return (subscribedUsagePlan && subscribedUsagePlan.apiStages) || []
+// }
 
-export function getSubscribedUsagePlan(api) {
-  const subscribedUsagePlan = subscriptions && subscriptions.find && subscriptions.find(s => s.id === api.usagePlanId)
+export function getSubscribedUsagePlan(usagePlanId) {
+  const subscribedUsagePlan = subscriptions && subscriptions.find && subscriptions.find(s => s.id === usagePlanId)
   return subscribedUsagePlan
 }