refactor(ui): inline API type generation

Part of #14482

ui/cypress/e2e/buckets.test.ts

@@ -1,4 +1,4 @@
-import {Bucket, Organization} from '@influxdata/influx'
+import {Bucket, Organization} from '../../src/types'
 
 describe('Buckets', () => {
   beforeEach(() => {

ui/cypress/e2e/collectors.test.ts

@@ -1,4 +1,4 @@
-import {Organization} from '@influxdata/influx'
+import {Organization} from '../../src/types'
 
 describe('Collectors', () => {
   beforeEach(() => {

ui/cypress/e2e/dashboardsIndex.test.ts

@@ -1,4 +1,4 @@
-import {Organization} from '@influxdata/influx'
+import {Organization} from '../../src/types'
 
 const newLabelName = 'click-me'
 const dashboardName = 'Bee Happy'

ui/cypress/e2e/dashboardsView.test.ts

@@ -1,4 +1,4 @@
-import {Organization} from '@influxdata/influx'
+import {Organization} from '../../src/types'
 
 describe('Dashboard', () => {
   beforeEach(() => {

ui/cypress/e2e/explorer.test.ts

@@ -1,5 +1,5 @@
 import {Doc} from 'codemirror'
-import {Organization} from '@influxdata/influx'
+import {Organization} from '../../src/types'
 import {
   FROM,
   RANGE,

ui/cypress/e2e/labels.test.ts

@@ -1,4 +1,4 @@
-import {Organization} from '@influxdata/influx'
+import {Organization} from '../../src/types'
 
 describe('labels', () => {
   beforeEach(() => {
@@ -18,7 +18,7 @@ describe('labels', () => {
 
   function hex2BgColor(hex: string): string {
     hex = hex.replace('#', '')
-    let subvals: string[] = hex.match(/.{1,2}/g)
+    let subvals = hex.match(/.{1,2}/g) as string[]
     let red: number = parseInt(subvals[0], 16)
     let green: number = parseInt(subvals[1], 16)
     let blue: number = parseInt(subvals[2], 16)

ui/cypress/e2e/scrapers.test.ts

@@ -1,4 +1,4 @@
-import {Organization, Bucket} from '@influxdata/influx'
+import {Organization, Bucket} from '../../src/types'
 
 describe('Scrapers', () => {
   beforeEach(() => {

ui/cypress/e2e/tasks.test.ts

@@ -1,4 +1,4 @@
-import {Organization, Bucket} from '@influxdata/influx'
+import {Organization, Bucket} from '../../src/types'
 import _ from 'lodash'
 
 describe('Tasks', () => {

ui/cypress/e2e/tokens.test.ts

@@ -1,4 +1,4 @@
-import {Organization} from '@influxdata/influx'
+import {Organization} from '../../src/types'
 
 describe('tokens', () => {
   let authData: {description: string; status: boolean; id: string}[]
@@ -150,9 +150,9 @@ describe('tokens', () => {
             // @ts-ignore
             cy.request(
               'api/v2/authorizations/' +
-                authData.find(function(item) {
+                (authData.find(function(item) {
                   return item.description === 'token test 02'
-                }).id
+                }) as any).id
             ).then(resp => {
               expect(resp.body.status).equals('active')
             })
@@ -180,9 +180,9 @@ describe('tokens', () => {
             // @ts-ignore
             cy.request(
               'api/v2/authorizations/' +
-                authData.find(function(item) {
+                (authData.find(function(item) {
                   return item.description === 'token test 02'
-                }).id
+                }) as any).id
             ).then(resp => {
               expect(resp.body.status).equals('inactive')
             })

ui/cypress/e2e/variables.test.ts

@@ -1,4 +1,4 @@
-import {Organization} from '@influxdata/influx'
+import {Organization} from '../../src/types'
 
 describe('Variables', () => {
   beforeEach(() => {

ui/package.json

@@ -34,7 +34,8 @@
     "tsc": "tsc -p ./tsconfig.json --noEmit --pretty --skipLibCheck",
     "tsc:cypress": "tsc -p ./cypress/tsconfig.json --noEmit --pretty --skipLibCheck",
     "cy": "CYPRESS_baseUrl=http://localhost:9999 cypress open",
-    "cy:dev": "CYPRESS_baseUrl=http://localhost:8080 cypress open"
+    "cy:dev": "CYPRESS_baseUrl=http://localhost:8080 cypress open",
+    "generate": "oats ../http/swagger.yml > src/client/index.ts"
   },
   "jest": {
     "setupFilesAfterEnv": [
@@ -80,6 +81,7 @@
   "devDependencies": {
     "@babel/core": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
+    "@chnn/oats": "0.2.1",
     "@cypress/webpack-preprocessor": "^4.0.3",
     "@types/chroma-js": "^1.3.4",
     "@types/codemirror": "^0.0.56",
@@ -149,7 +151,7 @@
     "ts-loader": "^5.3.3",
     "ts-node": "^8.3.0",
     "tslib": "^1.9.0",
-    "typescript": "^3.3.3",
+    "typescript": "3.3.3",
     "webpack": "^4.37.0",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2",

ui/src/alerting/actions/checks.ts

@@ -1,10 +1,12 @@
 // Libraries
-import {client} from 'src/utils/api'
 import {Dispatch} from 'react'
 
 // Constants
 import * as copy from 'src/shared/copy/notifications'
 
+// APIs
+import * as api from 'src/client'
+
 //Actions
 import {
   notify,
@@ -62,9 +64,13 @@ export const getChecks = () => async (
       },
     } = getState()
 
-    const checks = await client.checks.getAll(orgID)
+    const resp = await api.getChecks({query: {orgID}})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
 
-    dispatch(setAllChecks(RemoteDataState.Done, checks))
+    dispatch(setAllChecks(RemoteDataState.Done, resp.data.checks))
   } catch (e) {
     console.error(e)
     dispatch(setAllChecks(RemoteDataState.Error))
@@ -78,21 +84,29 @@ export const getCurrentCheck = (checkID: string) => async (
   try {
     dispatch(setCurrentCheck(RemoteDataState.Loading))
 
-    const check = await client.checks.get(checkID)
+    const resp = await api.getCheck({checkID})
 
-    dispatch(setCurrentCheck(RemoteDataState.Done, check))
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    dispatch(setCurrentCheck(RemoteDataState.Done, resp.data))
   } catch (e) {
     console.error(e)
     dispatch(setCurrentCheck(RemoteDataState.Error))
     dispatch(notify(copy.getCheckFailed(e.message)))
   }
 }
 
-export const createCheck = (check: Check) => async (
+export const createCheck = (check: Partial<Check>) => async (
   dispatch: Dispatch<Action | NotificationAction>
 ) => {
   try {
-    client.checks.create(check)
+    const resp = await api.postCheck({data: check as Check})
+
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
   } catch (e) {
     console.error(e)
     dispatch(notify(copy.createCheckFailed(e.message)))
@@ -103,8 +117,13 @@ export const updateCheck = (check: Partial<Check>) => async (
   dispatch: Dispatch<Action | NotificationAction>
 ) => {
   try {
-    const updatedCheck = await client.checks.update(check.id, check)
-    dispatch(setCheck(updatedCheck))
+    const resp = await api.patchCheck({checkID: check.id, data: check as Check})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    dispatch(setCheck(resp.data))
   } catch (e) {
     console.error(e)
     dispatch(notify(copy.updateCheckFailed(e.message)))
@@ -115,7 +134,12 @@ export const deleteCheck = (checkID: string) => async (
   dispatch: Dispatch<Action | NotificationAction>
 ) => {
   try {
-    await client.checks.delete(checkID)
+    const resp = await api.deleteCheck({checkID})
+
+    if (resp.status !== 204) {
+      throw new Error(resp.data.message)
+    }
+
     dispatch(removeCheck(checkID))
   } catch (e) {
     console.error(e)

ui/src/alerting/actions/notificationRules.ts

@@ -1,10 +1,12 @@
 // Libraries
-import {client} from 'src/utils/api'
 import {Dispatch} from 'react'
 
 // Constants
 import * as copy from 'src/shared/copy/notifications'
 
+// APIs
+import * as api from 'src/client'
+
 // Actions
 import {
   notify,
@@ -59,11 +61,15 @@ export const getNotificationRules = () => async (
       },
     } = getState()
 
-    const notificationRules = (await client.notificationRules.getAll(
-      orgID
-    )) as NotificationRule[]
+    const resp = await api.getNotificationRules({query: {orgID}})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
 
-    dispatch(setAllNotificationRules(RemoteDataState.Done, notificationRules))
+    dispatch(
+      setAllNotificationRules(RemoteDataState.Done, resp.data.notificationRules)
+    )
   } catch (e) {
     console.error(e)
     dispatch(setAllNotificationRules(RemoteDataState.Error))
@@ -77,11 +83,13 @@ export const getCurrentNotificationRule = (
   try {
     dispatch(setCurrentNotificationRule(RemoteDataState.Loading))
 
-    const notificationRule = (await client.notificationRules.get(
-      notificationRuleID
-    )) as NotificationRule
+    const resp = await api.getNotificationRule({ruleID: notificationRuleID})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
 
-    dispatch(setCurrentNotificationRule(RemoteDataState.Done, notificationRule))
+    dispatch(setCurrentNotificationRule(RemoteDataState.Done, resp.data))
   } catch (e) {
     console.error(e)
     dispatch(setCurrentNotificationRule(RemoteDataState.Error))
@@ -90,10 +98,16 @@ export const getCurrentNotificationRule = (
 }
 
 export const createNotificationRule = (
-  notificationRule: NotificationRule
+  notificationRule: Partial<NotificationRule>
 ) => async (dispatch: Dispatch<Action | NotificationAction>) => {
   try {
-    client.notificationRules.create(notificationRule)
+    const resp = await api.postNotificationRule({
+      data: notificationRule as NotificationRule,
+    })
+
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
   } catch (e) {
     console.error(e)
     dispatch(notify(copy.createNotificationRuleFailed(e.message)))
@@ -104,11 +118,16 @@ export const updateNotificationRule = (
   notificationRule: Partial<NotificationRule>
 ) => async (dispatch: Dispatch<Action | NotificationAction>) => {
   try {
-    const updatedNotificationRule = (await client.notificationRules.update(
-      notificationRule.id,
-      notificationRule
-    )) as NotificationRule
-    dispatch(setNotificationRule(updatedNotificationRule))
+    const resp = await api.putNotificationRule({
+      ruleID: notificationRule.id,
+      data: notificationRule as NotificationRule,
+    })
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    dispatch(setNotificationRule(resp.data))
   } catch (e) {
     console.error(e)
     dispatch(notify(copy.updateNotificationRuleFailed(e.message)))
@@ -119,7 +138,12 @@ export const deleteNotificationRule = (notificationRuleID: string) => async (
   dispatch: Dispatch<Action | NotificationAction>
 ) => {
   try {
-    await client.notificationRules.delete(notificationRuleID)
+    const resp = await api.deleteNotificationRule({ruleID: notificationRuleID})
+
+    if (resp.status !== 204) {
+      throw new Error(resp.data.message)
+    }
+
     dispatch(removeNotificationRule(notificationRuleID))
   } catch (e) {
     console.error(e)

ui/src/alerting/components/CheckCard.tsx

@@ -14,7 +14,7 @@ import {DEFAULT_CHECK_NAME} from 'src/alerting/constants'
 import {updateCheck, deleteCheck} from 'src/alerting/actions/checks'
 
 // Types
-import {Check, CheckBase} from 'src/types'
+import {Check} from 'src/types'
 
 interface DispatchProps {
   updateCheck: typeof updateCheck
@@ -47,10 +47,8 @@ const CheckCard: FunctionComponent<Props> = ({
   const onClone = () => {}
 
   const onToggle = () => {
-    const status =
-      check.status == CheckBase.StatusEnum.Active
-        ? CheckBase.StatusEnum.Inactive
-        : CheckBase.StatusEnum.Active
+    const status = check.status === 'active' ? 'inactive' : 'active'
+
     updateCheck({id: check.id, status})
   }
 
@@ -75,15 +73,15 @@ const CheckCard: FunctionComponent<Props> = ({
       }
       toggle={
         <SlideToggle
-          active={check.status == CheckBase.StatusEnum.Active}
+          active={check.status === 'active'}
           size={ComponentSize.ExtraSmall}
           onChange={onToggle}
           testID="check-card--slide-toggle"
         />
       }
       // description
       // labels
-      disabled={check.status == CheckBase.StatusEnum.Inactive}
+      disabled={check.status === 'inactive'}
       contextMenu={
         <CheckCardContext
           onDelete={onDelete}

ui/src/alerting/components/EditCheckEO.tsx

@@ -21,7 +21,7 @@ import {
 import {setActiveTimeMachine} from 'src/timeMachine/actions'
 
 // Types
-import {Check, AppState, RemoteDataState, XYView, ViewType} from 'src/types'
+import {Check, AppState, RemoteDataState, XYViewProperties} from 'src/types'
 import {TimeMachineEnum} from 'src/timeMachine/constants'
 
 interface DispatchProps {
@@ -51,7 +51,7 @@ const EditCheckEditorOverlay: FunctionComponent<Props> = ({
 
   useEffect(() => {
     // create view properties from check
-    const view = createView<XYView>(ViewType.XY)
+    const view = createView<XYViewProperties>('xy')
     onSetActiveTimeMachine(TimeMachineEnum.Alerting, {view})
   }, [check.id])
 

ui/src/alerting/components/NewCheckEO.tsx

@@ -19,7 +19,7 @@ import {setActiveTimeMachine} from 'src/timeMachine/actions'
 import {createView} from 'src/shared/utils/view'
 
 // Types
-import {Check, AppState, RemoteDataState, XYView, ViewType} from 'src/types'
+import {Check, AppState, RemoteDataState, XYViewProperties} from 'src/types'
 import {DEFAULT_CHECK} from 'src/alerting/constants'
 import {TimeMachineEnum} from 'src/timeMachine/constants'
 
@@ -46,7 +46,7 @@ const NewCheckOverlay: FunctionComponent<Props> = ({
 }) => {
   useEffect(() => {
     setCurrentCheck(RemoteDataState.Done, DEFAULT_CHECK)
-    const view = createView<XYView>(ViewType.XY)
+    const view = createView<XYViewProperties>('xy')
     onSetActiveTimeMachine(TimeMachineEnum.Alerting, {view})
   }, [])