Add Limits Page (#1136)

* initial component and file

* add map

* remove render wrapper

* add limits page

* remove unused import

* remove logs

* add example

* add examples

* improve examples

* change to seconds

* add link from api rate limits

* update kodiak label

* update example

Author: Matthew Sweeney

.kodiak.toml

@@ -2,7 +2,7 @@ version = 1
 
 [merge]
 require_automerge_label = false
-blacklist_labels = ["in progress"]
+blacklist_labels = ["In Progress"]
 method = "squash"
 delete_branch_on_merge = true
 block_on_reviews_requested = false

components/limits/index.js

@@ -0,0 +1 @@
+export { default } from './limits'

components/limits/limits.js

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react'
+import { API_LIMITS } from '../../lib/constants'
+import { InlineCode } from '../text/code'
+import {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableRowCell,
+  TableHeadCell
+} from '~/components/table'
+
+function Limits() {
+  const [limits, setLimits] = useState([])
+  useEffect(() => {
+    async function getLimits() {
+      const res = await fetch(API_LIMITS)
+      const data = await res.json()
+      setLimits({ ...data })
+      return null
+    }
+    getLimits()
+  }, [])
+  console.log(limits)
+  return limits && limits.rateLimits ? (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeadCell className="head-cell">Description</TableHeadCell>
+          <TableHeadCell className="head-cell">Limit</TableHeadCell>
+          <TableHeadCell className="head-cell">
+            Duration (Seconds)
+          </TableHeadCell>
+          <TableHeadCell className="head-cell">Scope</TableHeadCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {limits.rateLimits.map(l => (
+          <TableRow>
+            <TableRowCell>{l.description}</TableRowCell>
+            <TableRowCell>{l.max}</TableRowCell>
+            <TableRowCell>{l.duration / 1000}</TableRowCell>
+            <TableRowCell>
+              <InlineCode>{l.scope}</InlineCode>
+            </TableRowCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ) : null
+}
+
+export default Limits

lib/constants.js

@@ -6,3 +6,4 @@ export const API_USER = '/api/www/user'
 export const API_USER_TOKEN_TESTING = '/api/user/tokens/testing'
 export const API_TEAMS = '/api/teams'
 export const API_DOCS_FEEDBACK = 'https://api.zeit.co/v1/feedback/docs'
+export const API_LIMITS = 'https://api.zeit.co/v1/ratelimits'

lib/data/v2/docs.js

@@ -183,6 +183,10 @@ export default [
             name: 'Glossary',
             href: '/docs/v2/advanced/platform/glossary'
           },
+          {
+            name: 'Limits',
+            href: '/docs/v2/advanced/platform/limits'
+          },
           {
             name: 'Changes in ZEIT Now 2.0',
             href: '/docs/v2/advanced/platform/changes-in-now-2-0'

pages/docs/api/v2/api-docs-mdx/api-basics/rate-limits.mdx

@@ -1,10 +1,12 @@
 import Example from '~/components/example'
 import { Code, RequestHeader } from '~/components/text/code'
 import Caption from '~/components/text/caption'
+import Note from '~/components/text/note'
+import { GenericLink } from '~/components/text/link'
 
 export const meta = {
   editUrl: 'pages/docs/api/v2/api-docs-mdx/api-basics/rate-limits.mdx',
-  lastEdited: '2019-08-15T12:51:17.000Z'
+  lastEdited: '2019-08-15T22:07:24.000Z'
 }
 
 ## Rate Limits
@@ -31,3 +33,11 @@ status "**429 Too Many Requests**":
 }`}</Code>
 <Caption>An example of a rate limit exceeded error.</Caption>
 </Example>
+
+<Note>
+  You can find the complete list of rate limits in the{' '}
+  <GenericLink href="/docs/v2/advanced/platform/limits/">
+    limits documentation
+  </GenericLink>
+  .
+</Note>

pages/docs/v2/advanced/platform/limits.mdx

@@ -0,0 +1,49 @@
+import Doc from '~/components/layout/docs'
+import { InlineCode } from '~/components/text/code'
+import Caption from '~/components/text/caption'
+import Card from '~/components/card'
+import Note from '~/components/text/note'
+import { GenericLink } from '~/components/text/link'
+import Limits from '~/components/limits'
+
+export const meta = {
+  title: 'Limits',
+  description: 'A list of rate limits that apply on the ZEIT Now platform.',
+  editUrl: 'pages/docs/v2/advanced/platform/limits.mdx',
+  lastEdited: '2019-08-16T10:45:09.000Z'
+}
+
+This page outlines all relevant limits on the ZEIT Now platform.
+
+The table consists of the following four columns:
+
+- **Description** - A brief description of the limit which, where relevant, will advise what type of plan it applies to.
+- **Limit** - The amount of actions permitted within the amount of time (**Duration**) specified.
+- **Duration** - The amount of time (seconds) in which you can perform the specified amount of actions in. Once a rate limit is hit, it will be reset after the **Duration** has expired.
+- **Scope** - Who the limit applies to, `owner` refers to the account owner, `user` refers to an individual user on a **Team** account.
+
+## Examples
+
+Below are three examples that provide further information on how the rate limits work.
+
+### Project Creation
+
+Taking the domains deletion rate limit as an example, you are allowed to delete up to `60` domains every `60` seconds (1 minute). Should you hit the rate limit, you will need to wait another minute before deleting another domain.
+
+### Team Deletion
+
+With the team deletion rate limit, you are able to delete up to `20` teams every `3600` seconds (1 hour). Should you hit the rate limit, you will need to wait another hour before deleting another team.
+
+### Username Update
+
+For the username update rate limit, you are able to change your username up to `6` times every `604800` seconds (1 week). Should you hit the rate limit, you will need to wait another week before changing your username again.
+
+---
+
+<Limits />
+
+export default ({ children }) => <Doc meta={meta}>{children}</Doc>
+
+export const config = {
+  amp: 'hybrid'
+}