chore(ui): refactored variables client API to oats generated types and API (#16400)

chore(ui): refactored variables client API to oats generated types and API

http/swagger.yml

@@ -4805,7 +4805,7 @@ paths:
             schema:
               $ref: "#/components/schemas/LabelMapping"
       responses:
-        '200':
+        '201':
           description: A list of all labels for a task
           content:
             application/json:

ui/src/authorizations/actions/creators.ts

@@ -39,7 +39,8 @@ export const editAuthorization = (
     schema,
   } as const)
 
-export const removeAuthorization = (id: string) => ({
-  type: REMOVE_AUTH,
-  id,
-} as const)
+export const removeAuthorization = (id: string) =>
+  ({
+    type: REMOVE_AUTH,
+    id,
+  } as const)

ui/src/dashboards/actions/index.ts

@@ -15,6 +15,7 @@ import {
   getView as getViewAJAX,
   updateView as updateViewAJAX,
 } from 'src/dashboards/apis'
+import {getVariables as apiGetVariables} from 'src/client'
 import {createDashboardFromTemplate as createDashboardFromTemplateAJAX} from 'src/templates/api'
 
 // Actions
@@ -37,6 +38,7 @@ import {setExportTemplate} from 'src/templates/actions'
 import {checkDashboardLimits} from 'src/cloud/actions/limits'
 
 // Utils
+import {addVariableDefaults} from 'src/variables/actions'
 import {filterUnusedVars} from 'src/shared/utils/filterUnusedVars'
 import {
   extractVariablesList,
@@ -573,9 +575,13 @@ export const convertToTemplate = (dashboardID: string) => async (
       getViewAJAX(dashboardID, c.id)
     )
     const views = await Promise.all(pendingViews)
-    const allVariables = await client.variables.getAll(org.id)
-    const variables = filterUnusedVars(allVariables, views)
-    const exportedVariables = exportVariables(variables, allVariables)
+    const resp = await apiGetVariables({query: {orgID: org.id}})
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+    const vars = resp.data.variables.map(v => addVariableDefaults(v))
+    const variables = filterUnusedVars(vars, views)
+    const exportedVariables = exportVariables(variables, vars)
     const dashboardTemplate = dashboardToTemplate(
       dashboard,
       views,

ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx

@@ -23,8 +23,7 @@ import {
 import {moveVariable} from 'src/variables/actions'
 
 // Types
-import {AppState} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {AppState, Variable} from 'src/types'
 import {ComponentSize} from '@influxdata/clockface'
 
 // Decorators

ui/src/dataLoaders/actions/dataLoaders.ts

@@ -4,11 +4,7 @@ import {normalize} from 'normalizr'
 
 // APIs
 import {client} from 'src/utils/api'
-import {
-  ScraperTargetRequest,
-  PermissionResource,
-  ILabelProperties,
-} from '@influxdata/influx'
+import {ScraperTargetRequest, PermissionResource} from '@influxdata/influx'
 import {createAuthorization} from 'src/authorizations/apis'
 import {postWrite as apiPostWrite, postLabel as apiPostLabel} from 'src/client'
 
@@ -37,7 +33,14 @@ import {
   BundleName,
   ConfigurationState,
 } from 'src/types/dataLoaders'
-import {GetState, RemoteDataState, Authorization, AuthEntities} from 'src/types'
+import {
+  GetState,
+  RemoteDataState,
+  LabelProperties,
+  Authorization,
+  AuthEntities,
+} from 'src/types'
+import {ILabel} from '@influxdata/influx'
 import {
   WritePrecision,
   TelegrafRequest,
@@ -452,7 +455,7 @@ const createTelegraf = async (dispatch, getState: GetState, plugins) => {
       color: '#FFFFFF',
       description: `token for telegraf config: ${telegrafConfigName}`,
       tokenID: createdToken.id,
-    } as ILabelProperties // hack to make compiler work
+    } as LabelProperties // hack to make compiler work
 
     const resp = await apiPostLabel({
       data: {
@@ -469,7 +472,10 @@ const createTelegraf = async (dispatch, getState: GetState, plugins) => {
     const createdLabel = addLabelDefaults(resp.data.label)
 
     // add label to telegraf config
-    const label = await client.telegrafConfigs.addLabel(tc.id, createdLabel)
+    const label = await client.telegrafConfigs.addLabel(
+      tc.id,
+      createdLabel as ILabel
+    )
 
     const config = {
       ...tc,

ui/src/labels/actions/index.ts

@@ -161,8 +161,10 @@ export const deleteLabel = (id: string) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
-    await apiDeleteLabel({labelID: id})
-
+    const resp = await apiDeleteLabel({labelID: id})
+    if (resp.status !== 204) {
+      throw new Error(resp.data.message)
+    }
     dispatch(removeLabel(id))
   } catch (e) {
     console.error(e)

ui/src/mockState.tsx

@@ -56,7 +56,7 @@ export const localState: LocalStorage = {
       byID: {},
       allIDs: [],
       status: NotStarted,
-    }
+    },
   },
 }
 

ui/src/organizations/actions/thunks.ts

@@ -56,7 +56,10 @@ export const getOrganizations = () => async (
 
     const {orgs} = resp.data
 
-    const organizations = normalize<Organization, OrgEntities, string[]>(orgs, schemas.arrayOfOrgs)
+    const organizations = normalize<Organization, OrgEntities, string[]>(
+      orgs,
+      schemas.arrayOfOrgs
+    )
 
     dispatch(setOrgs(RemoteDataState.Done, organizations))
 

ui/src/shared/utils/filterUnusedVars.ts

@@ -2,8 +2,7 @@
 import {isInQuery} from 'src/variables/utils/hydrateVars'
 
 // Types
-import {QueryViewProperties, View, ViewProperties} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {QueryViewProperties, View, ViewProperties, Variable} from 'src/types'
 
 function isQueryViewProperties(vp: ViewProperties): vp is QueryViewProperties {
   return (vp as QueryViewProperties).queries !== undefined

ui/src/shared/utils/mocks/resourceToTemplate.ts

@@ -1,5 +1,4 @@
-import {Task, Dashboard, View, Label} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Task, Dashboard, View, Label, Variable} from 'src/types'
 
 export const myDashboard: Dashboard = {
   id: 'dash_1',

ui/src/shared/utils/resourceToTemplate.ts

@@ -4,13 +4,8 @@ import {getDeep} from 'src/utils/wrappers'
 import {defaultBuilderConfig} from 'src/shared/utils/view'
 import {viewableLabels} from 'src/labels/selectors'
 
-import {Task, Label, Dashboard, Cell, View} from 'src/types'
-import {
-  TemplateType,
-  DocumentCreate,
-  ITemplate,
-  IVariable as Variable,
-} from '@influxdata/influx'
+import {Task, Label, Dashboard, Cell, View, Variable} from 'src/types'
+import {TemplateType, DocumentCreate, ITemplate} from '@influxdata/influx'
 import {DashboardQuery} from 'src/types/dashboards'
 
 const CURRENT_TEMPLATE_VERSION = '1'

ui/src/tasks/actions/index.ts

@@ -274,9 +274,16 @@ export const addTaskLabelAsync = (taskID: string, label: Label) => async (
   dispatch
 ): Promise<void> => {
   try {
-    await apiPostTasksLabel({taskID, data: {labelID: label.id}})
-    const resp = await apiGetTask({taskID})
+    const postResp = await apiPostTasksLabel({
+      taskID,
+      data: {labelID: label.id},
+    })
 
+    if (postResp.status !== 201) {
+      throw new Error(postResp.data.message)
+    }
+
+    const resp = await apiGetTask({taskID})
     if (resp.status !== 200) {
       throw new Error(resp.data.message)
     }
@@ -294,7 +301,10 @@ export const removeTaskLabelAsync = (taskID: string, label: Label) => async (
   dispatch
 ): Promise<void> => {
   try {
-    await apiDeleteTasksLabel({taskID, labelID: label.id})
+    const deleteResp = await apiDeleteTasksLabel({taskID, labelID: label.id})
+    if (deleteResp.status !== 204) {
+      throw new Error(deleteResp.data.message)
+    }
     const resp = await apiGetTask({taskID})
     if (resp.status !== 200) {
       throw new Error(resp.data.message)
@@ -555,7 +565,10 @@ export const getRuns = (taskID: string) => async (dispatch): Promise<void> => {
 
 export const runTask = (taskID: string) => async dispatch => {
   try {
-    await apiPostTasksRun({taskID})
+    const resp = await apiPostTasksRun({taskID})
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
     dispatch(notify(taskRunSuccess()))
   } catch (error) {
     const message = getErrorMessage(error)

ui/src/telegrafs/actions/index.ts

@@ -3,6 +3,7 @@ import {client} from 'src/utils/api'
 
 // Types
 import {AppThunk, RemoteDataState, GetState, Telegraf, Label} from 'src/types'
+import {ILabel} from '@influxdata/influx'
 import {Action as NotifyAction} from 'src/shared/actions/notifications'
 import {Dispatch} from 'react'
 
@@ -152,7 +153,7 @@ export const addTelegrafLabelsAsync = (
   labels: Label[]
 ): AppThunk<Promise<void>> => async (dispatch): Promise<void> => {
   try {
-    await client.telegrafConfigs.addLabels(telegrafID, labels)
+    await client.telegrafConfigs.addLabels(telegrafID, labels as ILabel[])
     const telegraf = await client.telegrafConfigs.get(telegrafID)
 
     dispatch(editTelegraf(telegraf))
@@ -167,7 +168,7 @@ export const removeTelegrafLabelsAsync = (
   labels: Label[]
 ): AppThunk<Promise<void>> => async (dispatch): Promise<void> => {
   try {
-    await client.telegrafConfigs.removeLabels(telegrafID, labels)
+    await client.telegrafConfigs.removeLabels(telegrafID, labels as ILabel[])
     const telegraf = await client.telegrafConfigs.get(telegrafID)
 
     dispatch(editTelegraf(telegraf))

ui/src/telegrafs/components/CollectorCard.tsx

@@ -118,7 +118,6 @@ class CollectorRow extends PureComponent<Props & WithRouterProps> {
 
   private get labels(): JSX.Element {
     const {collector, labels, onFilterChange} = this.props
-    // todo(glinton): track down `Label` drift and remove `as Label[]`
     const collectorLabels = viewableLabels(collector.labels as Label[])
 
     return (

ui/src/templates/api/index.ts

@@ -9,6 +9,7 @@ import {
   TemplateBase,
   Task,
   VariableTemplate,
+  Variable,
 } from 'src/types'
 import {IDashboard, Cell} from '@influxdata/influx'
 import {client} from 'src/utils/api'
@@ -24,6 +25,7 @@ import {
   getLabelRelationships,
 } from 'src/templates/utils/'
 import {addDefaults} from 'src/tasks/actions'
+import {addVariableDefaults} from 'src/variables/actions'
 import {addLabelDefaults} from 'src/labels/utils'
 // API
 import {
@@ -32,6 +34,10 @@ import {
   postTasksLabel as apiPostTasksLabel,
   getLabels as apiGetLabels,
   postLabel as apiPostLabel,
+  getVariable as apiGetVariable,
+  getVariables as apiGetVariables,
+  postVariable as apiPostVariable,
+  postVariablesLabel as apiPostVariablesLabel,
 } from 'src/client'
 // Create Dashboard Templates
 
@@ -229,23 +235,44 @@ const createVariablesFromTemplate = async (
   }
   const variablesIncluded = findIncludedVariables(included)
 
-  const existingVariables = await client.variables.getAll(orgID)
+  const resp = await apiGetVariables({query: {orgID}})
+  if (resp.status !== 200) {
+    throw new Error(resp.data.message)
+  }
+
+  const variables = resp.data.variables.map(v => addVariableDefaults(v))
 
   const variablesToCreate = findVariablesToCreate(
-    existingVariables,
+    variables,
     variablesIncluded
   ).map(v => ({...v.attributes, orgID}))
 
-  const createdVariables = await client.variables.createAll(variablesToCreate)
+  const pendingVariables = variablesToCreate.map(vars =>
+    apiPostVariable({data: vars})
+  )
 
-  const allVars = [...existingVariables, ...createdVariables]
+  const resolvedVariables = await Promise.all(pendingVariables)
+  if (
+    resolvedVariables.length > 0 &&
+    resolvedVariables.every(r => r.status !== 201)
+  ) {
+    throw new Error('An error occurred creating the variables from templates')
+  }
+
+  const createdVariables = await Promise.all(pendingVariables).then(vars =>
+    vars.map(res => addVariableDefaults(res.data as Variable))
+  )
+
+  const allVars = [...variables, ...createdVariables]
 
   const addLabelsToVars = variablesIncluded.map(async includedVar => {
     const variable = allVars.find(v => v.name === includedVar.attributes.name)
     const labelRelationships = getLabelRelationships(includedVar)
     const labelIDs = labelRelationships.map(l => labelMap[l.id] || '')
-
-    await client.variables.addLabels(variable.id, labelIDs)
+    const pending = labelIDs.map(async labelID => {
+      await apiPostVariablesLabel({variableID: variable.id, data: {labelID}})
+    })
+    await Promise.all(pending)
   })
 
   await Promise.all(addLabelsToVars)
@@ -298,9 +325,19 @@ const addTaskLabelsFromTemplate = async (
   labelMap: LabelMap,
   task: Task
 ) => {
-  const relationships = getLabelRelationships(template.content.data)
-  const [labelID] = relationships.map(l => labelMap[l.id] || '')
-  await apiPostTasksLabel({taskID: task.id, data: {labelID}})
+  try {
+    const relationships = getLabelRelationships(template.content.data)
+    const labelIDs = relationships.map(l => labelMap[l.id] || '')
+    const pending = labelIDs.map(labelID =>
+      apiPostTasksLabel({taskID: task.id, data: {labelID}})
+    )
+    const resolved = await Promise.all(pending)
+    if (resolved.length > 0 && resolved.some(r => r.status !== 201)) {
+      throw new Error('An error occurred adding task labels from the templates')
+    }
+  } catch (e) {
+    console.error(e)
+  }
 }
 
 export const createVariableFromTemplate = async (
@@ -308,29 +345,38 @@ export const createVariableFromTemplate = async (
   orgID: string
 ) => {
   const {content} = template
+  try {
+    if (
+      content.data.type !== TemplateType.Variable ||
+      template.meta.version !== '1'
+    ) {
+      throw new Error('Cannot create variable from this template')
+    }
 
-  if (
-    content.data.type !== TemplateType.Variable ||
-    template.meta.version !== '1'
-  ) {
-    throw new Error('Cannot create variable from this template')
+    const resp = await apiPostVariable({
+      data: {
+        ...content.data.attributes,
+        orgID,
+      },
+    })
+
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
+
+    // associate imported label.id with created label
+    const labelsMap = await createLabelsFromTemplate(template, orgID)
+
+    await createVariablesFromTemplate(template, labelsMap, orgID)
+
+    const variable = await apiGetVariable({variableID: resp.data.id})
+
+    if (variable.status !== 200) {
+      throw new Error(variable.data.message)
+    }
+
+    return addVariableDefaults(variable.data)
+  } catch (e) {
+    console.error(e)
   }
-
-  const createdVariable = await client.variables.create({
-    ...content.data.attributes,
-    orgID,
-  })
-
-  if (!createdVariable || !createdVariable.id) {
-    throw new Error('Failed to create variable from template')
-  }
-
-  // associate imported label.id with created label
-  const labelsMap = await createLabelsFromTemplate(template, orgID)
-
-  await createVariablesFromTemplate(template, labelsMap, orgID)
-
-  const variable = await client.variables.get(createdVariable.id)
-
-  return variable
 }

ui/src/templates/components/TemplatesPage.tsx

@@ -35,7 +35,7 @@ interface StaticTemplate {
 
 const staticTemplates: StaticTemplate[] = _.map(statics, (template, name) => ({
   name,
-  template,
+  template: template as TemplateSummary,
 }))
 
 interface OwnProps {

ui/src/templates/components/createFromTemplateOverlay/CreateFromTemplateOverlay.tsx

@@ -196,7 +196,7 @@ const mstp = ({templates: {items, status}}: AppState): StateProps => {
   )
 
   return {
-    templates: [...templates, ...influxdbTemplateList],
+    templates: [...templates, ...(influxdbTemplateList as TemplateSummary[])],
     templateStatus: status,
   }
 }

ui/src/templates/utils/index.ts

@@ -4,9 +4,9 @@ import {
   VariableIncluded,
   Relationships,
   LabelRelationship,
+  Label,
+  Variable,
 } from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
-import {Label} from 'src/types'
 
 export function findIncludedsFromRelationships<
   T extends {id: string; type: TemplateType}

ui/src/timeMachine/components/variableToolbar/VariableItem.tsx

@@ -11,7 +11,7 @@ import {
 } from '@influxdata/clockface'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/types'
 import VariableLabel from 'src/timeMachine/components/variableToolbar/VariableLabel'
 
 interface Props {

ui/src/timeMachine/components/variableToolbar/VariableToolbar.tsx

@@ -11,8 +11,7 @@ import VariableItem from 'src/timeMachine/components/variableToolbar/VariableIte
 import {extractVariablesList} from 'src/variables/selectors'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
-import {AppState} from 'src/types'
+import {AppState, Variable} from 'src/types'
 
 interface OwnProps {
   onClickVariable: (variableName: string) => void

ui/src/types/index.ts

@@ -41,3 +41,4 @@ export * from './cloud'
 export * from './resources'
 export * from './redux'
 export * from './run'
+export * from './variables'

ui/src/types/templates.ts

@@ -1,11 +1,11 @@
 import {
-  IVariable as Variable,
   IDashboard,
   DocumentListEntry,
   Document,
   DocumentMeta,
 } from '@influxdata/influx'
-import {View, Cell, Label} from './index'
+import {View, Cell, Label, Variable} from 'src/types'
+import {ILabel} from '@influxdata/influx'
 
 export enum TemplateType {
   Label = 'label',
@@ -171,5 +171,5 @@ export interface VariableTemplate extends TemplateBase {
 export type Template = TaskTemplate | DashboardTemplate | VariableTemplate
 
 export interface TemplateSummary extends DocumentListEntry {
-  labels: Label[]
+  labels: ILabel[]
 }

ui/src/types/variables.ts

@@ -0,0 +1,7 @@
+import {Variable as GenVariable} from 'src/client'
+export {VariableProperties} from 'src/client'
+import {Label} from 'src/types'
+
+export interface Variable extends GenVariable {
+  labels: Label[]
+}

ui/src/variables/actions/index.ts

@@ -1,7 +1,3 @@
-// API
-import {client} from 'src/utils/api'
-import {hydrateVars} from 'src/variables/utils/hydrateVars'
-
 // Actions
 import {notify} from 'src/shared/actions/notifications'
 import {
@@ -17,10 +13,21 @@ import {
 import {setExportTemplate} from 'src/templates/actions'
 
 // APIs
+import {hydrateVars} from 'src/variables/utils/hydrateVars'
 import {createVariableFromTemplate as createVariableFromTemplateAJAX} from 'src/templates/api'
+import {
+  deleteVariable as apiDeleteVariable,
+  deleteVariablesLabel as apiDeleteVariablesLabel,
+  getVariable as apiGetVariable,
+  getVariables as apiGetVariables,
+  postVariable as apiPostVariable,
+  postVariablesLabel as apiPostVariablesLabel,
+  patchVariable as apiPatchVariable,
+} from 'src/client'
 
 // Utils
 import {getValueSelections, extractVariablesList} from 'src/variables/selectors'
+import {addLabelDefaults} from 'src/labels/utils'
 import {CancelBox} from 'src/types/promises'
 import {variableToTemplate} from 'src/shared/utils/resourceToTemplate'
 import {findDepedentVariables} from 'src/variables/utils/exportVariables'
@@ -40,8 +47,9 @@ import {
   MapArguments,
   CSVArguments,
   Label,
+  Variable,
 } from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable as IVariable} from 'src/client'
 import {VariableValuesByID} from 'src/variables/types'
 import {
   addVariableLabelFailed,
@@ -57,6 +65,13 @@ export type EditorAction =
   | ReturnType<typeof updateMap>
   | ReturnType<typeof updateConstant>
 
+export const addVariableDefaults = (variable: IVariable): Variable => {
+  return {
+    ...variable,
+    labels: (variable.labels || []).map(addLabelDefaults),
+  }
+}
+
 export const clearEditor = () => ({
   type: 'CLEAR_VARIABLE_EDITOR' as 'CLEAR_VARIABLE_EDITOR',
 })
@@ -148,7 +163,12 @@ export const getVariables = () => async (
   try {
     dispatch(setVariables(RemoteDataState.Loading))
     const org = getOrg(getState())
-    const variables = await client.variables.getAll(org.id)
+    const resp = await apiGetVariables({query: {orgID: org.id}})
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const variables = resp.data.variables.map(v => addVariableDefaults(v))
 
     dispatch(setVariables(RemoteDataState.Done, variables))
   } catch (e) {
@@ -164,7 +184,12 @@ export const getVariable = (id: string) => async (
   try {
     dispatch(setVariable(id, RemoteDataState.Loading))
 
-    const variable = await client.variables.get(id)
+    const resp = await apiGetVariable({variableID: id})
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const variable = addVariableDefaults(resp.data)
 
     dispatch(setVariable(id, RemoteDataState.Done, variable))
   } catch (e) {
@@ -179,18 +204,24 @@ export const createVariable = (
 ) => async (dispatch: Dispatch<Action>, getState: GetState) => {
   try {
     const org = getOrg(getState())
-    const createdVariable = await client.variables.create({
-      ...variable,
-      orgID: org.id,
+    const resp = await apiPostVariable({
+      data: {
+        ...variable,
+        orgID: org.id,
+      },
     })
 
-    dispatch(
-      setVariable(createdVariable.id, RemoteDataState.Done, createdVariable)
-    )
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
+
+    const createdVar = addVariableDefaults(resp.data)
+
+    dispatch(setVariable(createdVar.id, RemoteDataState.Done, createdVar))
     dispatch(notify(createVariableSuccess(variable.name)))
   } catch (e) {
     console.error(e)
-    dispatch(notify(createVariableFailed(e.response.data.message)))
+    dispatch(notify(createVariableFailed(e.message)))
   }
 }
 
@@ -210,24 +241,32 @@ export const createVariableFromTemplate = (
     dispatch(notify(createVariableSuccess(createdVariable.name)))
   } catch (e) {
     console.error(e)
-    dispatch(notify(createVariableFailed(e.response.data.message)))
+    dispatch(notify(createVariableFailed(e.message)))
   }
 }
 
-export const updateVariable = (id: string, props: Partial<Variable>) => async (
+export const updateVariable = (id: string, props: Variable) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
     dispatch(setVariable(id, RemoteDataState.Loading))
+    const resp = await apiPatchVariable({
+      variableID: id,
+      data: props,
+    })
 
-    const variable = await client.variables.update(id, props)
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const variable = addVariableDefaults(resp.data)
 
     dispatch(setVariable(id, RemoteDataState.Done, variable))
     dispatch(notify(updateVariableSuccess(variable.name)))
   } catch (e) {
     console.error(e)
     dispatch(setVariable(id, RemoteDataState.Error))
-    dispatch(notify(updateVariableFailed(e.response.data.message)))
+    dispatch(notify(updateVariableFailed(e.message)))
   }
 }
 
@@ -236,13 +275,16 @@ export const deleteVariable = (id: string) => async (
 ) => {
   try {
     dispatch(setVariable(id, RemoteDataState.Loading))
-    await client.variables.delete(id)
+    const resp = await apiDeleteVariable({variableID: id})
+    if (resp.status !== 204) {
+      throw new Error(resp.data.message)
+    }
     dispatch(removeVariable(id))
     dispatch(notify(deleteVariableSuccess()))
   } catch (e) {
     console.error(e)
     dispatch(setVariable(id, RemoteDataState.Done))
-    dispatch(notify(deleteVariableFailed(e.response.data.message)))
+    dispatch(notify(deleteVariableFailed(e.message)))
   }
 }
 
@@ -294,10 +336,21 @@ export const convertToTemplate = (variableID: string) => async (
   try {
     dispatch(setExportTemplate(RemoteDataState.Loading))
     const org = getOrg(getState())
-    const variable = await client.variables.get(variableID)
-    const allVariables = await client.variables.getAll(org.id)
+    const resp = await apiGetVariable({variableID})
 
-    const dependencies = findDepedentVariables(variable, allVariables)
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const variable = addVariableDefaults(resp.data)
+    const allVariables = await apiGetVariables({query: {orgID: org.id}})
+    if (allVariables.status !== 200) {
+      throw new Error(allVariables.data.message)
+    }
+    const variables = allVariables.data.variables.map(v =>
+      addVariableDefaults(v)
+    )
+    const dependencies = findDepedentVariables(variable, variables)
     const variableTemplate = variableToTemplate(variable, dependencies)
 
     dispatch(setExportTemplate(RemoteDataState.Done, variableTemplate))
@@ -307,13 +360,25 @@ export const convertToTemplate = (variableID: string) => async (
   }
 }
 
-export const addVariableLabelsAsync = (
+export const addVariableLabelAsync = (
   variableID: string,
-  labels: Label[]
+  label: Label
 ) => async (dispatch): Promise<void> => {
   try {
-    await client.variables.addLabels(variableID, labels.map(l => l.id))
-    const variable = await client.variables.get(variableID)
+    const posted = await apiPostVariablesLabel({
+      variableID,
+      data: {labelID: label.id},
+    })
+    if (posted.status !== 201) {
+      throw new Error(posted.data.message)
+    }
+    const resp = await apiGetVariable({variableID})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const variable = addVariableDefaults(resp.data)
 
     dispatch(setVariable(variableID, RemoteDataState.Done, variable))
   } catch (error) {
@@ -322,13 +387,25 @@ export const addVariableLabelsAsync = (
   }
 }
 
-export const removeVariableLabelsAsync = (
+export const removeVariableLabelAsync = (
   variableID: string,
-  labels: Label[]
+  label: Label
 ) => async (dispatch): Promise<void> => {
   try {
-    await client.variables.removeLabels(variableID, labels.map(l => l.id))
-    const variable = await client.variables.get(variableID)
+    const deleted = await apiDeleteVariablesLabel({
+      variableID,
+      labelID: label.id,
+    })
+    if (deleted.status !== 204) {
+      throw new Error(deleted.data.message)
+    }
+    const resp = await apiGetVariable({variableID})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const variable = addVariableDefaults(resp.data)
 
     dispatch(setVariable(variableID, RemoteDataState.Done, variable))
   } catch (error) {

ui/src/variables/components/RenameVariableForm.tsx

@@ -15,8 +15,7 @@ import {extractVariablesList} from 'src/variables/selectors'
 import {updateVariable} from 'src/variables/actions'
 
 // Types
-import {AppState} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {AppState, Variable} from 'src/types'
 import {
   ButtonType,
   ComponentColor,

ui/src/variables/components/UpdateVariableOverlay.tsx

@@ -26,13 +26,12 @@ import {extractVariablesList} from 'src/variables/selectors'
 import {variableItemTypes} from 'src/variables/constants'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
 import {
   ButtonType,
   ComponentColor,
   ComponentStatus,
 } from '@influxdata/clockface'
-import {VariableArguments, AppState} from 'src/types'
+import {VariableArguments, AppState, Variable} from 'src/types'
 
 interface State {
   workingVariable: Variable

ui/src/variables/components/VariableArgumentsEditor.tsx

@@ -24,11 +24,11 @@ const FluxMonacoEditor = Loadable({
 })
 
 // Types
-import {KeyValueMap, VariableArguments} from 'src/types'
+import {KeyValueMap, VariableProperties} from 'src/types'
 
 interface Props {
-  args: VariableArguments
-  onChange: (update: {args: VariableArguments; isValid: boolean}) => void
+  args: VariableProperties
+  onChange: (update: {args: VariableProperties; isValid: boolean}) => void
   onSelectMapDefault: (selectedKey: string) => void
   selected: string[]
 }

ui/src/variables/components/VariableCard.tsx

@@ -9,23 +9,21 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 import VariableContextMenu from 'src/variables/components/VariableContextMenu'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
-import {AppState, Label} from 'src/types'
+import {AppState, Label, Variable} from 'src/types'
 
 // Selectors
 import {viewableLabels} from 'src/labels/selectors'
 
 // Actions
 import {
-  addVariableLabelsAsync,
-  removeVariableLabelsAsync,
+  addVariableLabelAsync,
+  removeVariableLabelAsync,
 } from 'src/variables/actions'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
 interface OwnProps {
   variable: Variable
   onDeleteVariable: (variable: Variable) => void
-  onUpdateVariableName: (variable: Partial<Variable>) => void
   onEditVariable: (variable: Variable) => void
   onFilterChange: (searchTerm: string) => void
 }
@@ -35,8 +33,8 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  onAddVariableLabels: typeof addVariableLabelsAsync
-  onRemoveVariableLabels: typeof removeVariableLabelsAsync
+  onAddVariableLabel: typeof addVariableLabelAsync
+  onRemoveVariableLabel: typeof removeVariableLabelAsync
   onCreateLabel: typeof createLabelAsync
 }
 
@@ -96,15 +94,15 @@ class VariableCard extends PureComponent<Props & WithRouterProps> {
   }
 
   private handleAddLabel = (label: Label): void => {
-    const {variable, onAddVariableLabels} = this.props
+    const {variable, onAddVariableLabel} = this.props
 
-    onAddVariableLabels(variable.id, [label])
+    onAddVariableLabel(variable.id, label)
   }
 
   private handleRemoveLabel = (label: Label): void => {
-    const {variable, onRemoveVariableLabels} = this.props
+    const {variable, onRemoveVariableLabel} = this.props
 
-    onRemoveVariableLabels(variable.id, [label])
+    onRemoveVariableLabel(variable.id, label)
   }
 
   private handleCreateLabel = (label: Label): void => {
@@ -140,8 +138,8 @@ const mstp = ({labels}: AppState): StateProps => {
 
 const mdtp: DispatchProps = {
   onCreateLabel: createLabelAsync,
-  onAddVariableLabels: addVariableLabelsAsync,
-  onRemoveVariableLabels: removeVariableLabelsAsync,
+  onAddVariableLabel: addVariableLabelAsync,
+  onRemoveVariableLabel: removeVariableLabelAsync,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/variables/components/VariableContextMenu.tsx

@@ -6,7 +6,7 @@ import {Context} from 'src/clockface'
 import {IconFont, ComponentColor} from '@influxdata/clockface'
 
 // Types
-import {Variable} from '@influxdata/influx'
+import {Variable} from 'src/types'
 
 interface Props {
   variable: Variable

ui/src/variables/components/VariableFormContext.tsx

@@ -27,13 +27,13 @@ import {
 import VariableForm from 'src/variables/components/VariableForm'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
 import {
   AppState,
   VariableArgumentType,
   QueryArguments,
   CSVArguments,
   MapArguments,
+  Variable,
 } from 'src/types'
 
 interface ComponentProps {

ui/src/variables/components/VariableList.tsx

@@ -7,8 +7,7 @@ import {ResourceList} from '@influxdata/clockface'
 import VariableCard from 'src/variables/components/VariableCard'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
-import {OverlayState} from 'src/types'
+import {OverlayState, Variable} from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
 import {Sort} from '@influxdata/clockface'
 
@@ -21,7 +20,6 @@ interface Props {
   variables: Variable[]
   emptyState: JSX.Element
   onDeleteVariable: (variable: Variable) => void
-  onUpdateVariable: (variable: Variable) => void
   onFilterChange: (searchTerm: string) => void
   sortKey: string
   sortDirection: Sort
@@ -89,7 +87,6 @@ export default class VariableList extends PureComponent<Props, State> {
       sortDirection,
       sortType,
       onDeleteVariable,
-      onUpdateVariable,
       onFilterChange,
     } = this.props
     const sortedVariables = this.memGetSortedResources(
@@ -104,7 +101,6 @@ export default class VariableList extends PureComponent<Props, State> {
         key={variable.id || `variable-${index}`}
         variable={variable}
         onDeleteVariable={onDeleteVariable}
-        onUpdateVariableName={onUpdateVariable}
         onEditVariable={this.handleStartEdit}
         onFilterChange={onFilterChange}
       />

ui/src/variables/components/VariablesTab.tsx

@@ -5,7 +5,7 @@ import {connect} from 'react-redux'
 import {withRouter, WithRouterProps} from 'react-router'
 
 // Utils
-import {updateVariable, deleteVariable} from 'src/variables/actions'
+import {deleteVariable} from 'src/variables/actions'
 import {extractVariablesList} from 'src/variables/selectors'
 
 // Components
@@ -19,8 +19,7 @@ import GetResources from 'src/shared/components/GetResources'
 import {Sort} from '@influxdata/clockface'
 
 // Types
-import {OverlayState, AppState, ResourceType} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {AppState, OverlayState, ResourceType, Variable} from 'src/types'
 import {ComponentSize} from '@influxdata/clockface'
 import {SortTypes} from 'src/shared/utils/sort'
 
@@ -29,7 +28,6 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  onUpdateVariable: typeof updateVariable
   onDeleteVariable: typeof deleteVariable
 }
 
@@ -83,7 +81,6 @@ class VariablesTab extends PureComponent<Props, State> {
                 variables={variables}
                 emptyState={this.emptyState}
                 onDeleteVariable={this.handleDeleteVariable}
-                onUpdateVariable={this.handleUpdateVariable}
                 onFilterChange={this.handleFilterUpdate}
                 sortKey={sortKey}
                 sortDirection={sortDirection}
@@ -153,15 +150,8 @@ class VariablesTab extends PureComponent<Props, State> {
     router.push(`/orgs/${orgID}/settings/variables/new`)
   }
 
-  private handleUpdateVariable = (variable: Partial<Variable>): void => {
-    const {onUpdateVariable} = this.props
-
-    onUpdateVariable(variable.id, variable)
-  }
-
   private handleDeleteVariable = (variable: Variable): void => {
     const {onDeleteVariable} = this.props
-
     onDeleteVariable(variable.id)
   }
 }
@@ -173,7 +163,6 @@ const mstp = (state: AppState): StateProps => {
 }
 
 const mdtp: DispatchProps = {
-  onUpdateVariable: updateVariable,
   onDeleteVariable: deleteVariable,
 }
 

ui/src/variables/mocks/index.ts

@@ -1,5 +1,5 @@
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/types'
 
 export const createVariable = (
   name: string,

ui/src/variables/reducers/index.ts

@@ -9,10 +9,10 @@ import {
   QueryArguments,
   MapArguments,
   CSVArguments,
+  Variable,
 } from 'src/types'
 import {VariableValuesByID} from 'src/variables/types'
 import {Action, EditorAction} from 'src/variables/actions'
-import {IVariable as Variable} from '@influxdata/influx'
 
 export const initialEditorState = (): VariableEditorState => ({
   name: '',

ui/src/variables/selectors/index.tsx

@@ -13,13 +13,17 @@ import {
   CSVArguments,
 } from 'src/types'
 import {VariableAssignment} from 'src/types/ast'
-import {AppState, VariableArguments, VariableArgumentType} from 'src/types'
+import {
+  AppState,
+  VariableArguments,
+  VariableArgumentType,
+  Variable,
+} from 'src/types'
 import {
   VariableValues,
   VariableValuesByID,
   ValueSelections,
 } from 'src/variables/types'
-import {IVariable as Variable} from '@influxdata/influx'
 
 type VariablesState = AppState['variables']['variables']
 type ValuesState = AppState['variables']['values']['contextID']

ui/src/variables/utils/exportVariables.ts

@@ -6,7 +6,7 @@ import {
 } from 'src/variables/utils/hydrateVars'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/types'
 
 const getDescendantsFromGraph = (
   variable: Variable,

ui/src/variables/utils/hydrateVars.test.ts

@@ -6,7 +6,7 @@ import {hydrateVars} from 'src/variables/utils/hydrateVars'
 import {createMapVariable, createVariable} from 'src/variables/mocks'
 
 // Types
-import {CancellationError} from 'src/types/promises'
+import {Variable, CancellationError} from 'src/types'
 
 class FakeFetcher implements ValueFetcher {
   responses = {}
@@ -179,7 +179,7 @@ describe('hydrate vars', () => {
   test('works with map template variables', async () => {
     const a = createVariable('a', 'f(x: v.b)')
 
-    const b = {
+    const b: Variable = {
       id: 'b',
       name: 'b',
       orgID: '',
@@ -221,7 +221,7 @@ describe('hydrate vars', () => {
   test('works with constant template variables', async () => {
     const a = createVariable('a', 'f(x: v.b)')
 
-    const b = {
+    const b: Variable = {
       id: 'b',
       name: 'b',
       orgID: '',

ui/src/variables/utils/hydrateVars.ts

@@ -8,8 +8,7 @@ import {resolveSelectedValue} from 'src/variables/utils/resolveSelectedValue'
 import {OPTION_NAME, BOUNDARY_GROUP} from 'src/variables/constants/index'
 
 // Types
-import {RemoteDataState} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {RemoteDataState, Variable} from 'src/types'
 import {CancelBox, CancellationError} from 'src/types/promises'
 import {
   VariableValues,

ui/src/variables/utils/validation.ts

@@ -1,4 +1,4 @@
-import {Variable} from '@influxdata/influx'
+import {Variable} from 'src/types'
 import {
   TIME_RANGE_START,
   TIME_RANGE_STOP,