chore(ui): label client refactor complete (#16361)

Chore(ui): label client refactor complete

ui/src/dashboards/actions/index.ts

@@ -60,7 +60,7 @@ import {DEFAULT_DASHBOARD_NAME} from 'src/dashboards/constants/index'
 
 // Types
 import {RemoteDataState} from 'src/types'
-import {CreateCell, ILabel} from '@influxdata/influx'
+import {CreateCell} from '@influxdata/influx'
 import {
   Dashboard,
   NewView,
@@ -68,6 +68,7 @@ import {
   GetState,
   View,
   DashboardTemplate,
+  Label,
 } from 'src/types'
 
 export enum ActionTypes {
@@ -141,7 +142,7 @@ interface AddDashboardLabelsAction {
   type: ActionTypes.AddDashboardLabels
   payload: {
     dashboardID: string
-    labels: ILabel[]
+    labels: Label[]
   }
 }
 
@@ -149,7 +150,7 @@ interface RemoveDashboardLabelsAction {
   type: ActionTypes.RemoveDashboardLabels
   payload: {
     dashboardID: string
-    labels: ILabel[]
+    labels: Label[]
   }
 }
 
@@ -215,7 +216,7 @@ export const removeCell = (
 
 export const addDashboardLabels = (
   dashboardID: string,
-  labels: ILabel[]
+  labels: Label[]
 ): AddDashboardLabelsAction => ({
   type: ActionTypes.AddDashboardLabels,
   payload: {dashboardID, labels},
@@ -223,7 +224,7 @@ export const addDashboardLabels = (
 
 export const removeDashboardLabels = (
   dashboardID: string,
-  labels: ILabel[]
+  labels: Label[]
 ): RemoveDashboardLabelsAction => ({
   type: ActionTypes.RemoveDashboardLabels,
   payload: {dashboardID, labels},
@@ -527,7 +528,7 @@ export const copyDashboardCellAsync = (dashboard: Dashboard, cell: Cell) => (
 
 export const addDashboardLabelsAsync = (
   dashboardID: string,
-  labels: ILabel[]
+  labels: Label[]
 ) => async (dispatch: Dispatch<Action | PublishNotificationAction>) => {
   try {
     const newLabels = await client.dashboards.addLabels(
@@ -544,7 +545,7 @@ export const addDashboardLabelsAsync = (
 
 export const removeDashboardLabelsAsync = (
   dashboardID: string,
-  labels: ILabel[]
+  labels: Label[]
 ) => async (dispatch: Dispatch<Action | PublishNotificationAction>) => {
   try {
     await client.dashboards.removeLabels(dashboardID, labels.map(l => l.id))

ui/src/dataLoaders/actions/dataLoaders.ts

@@ -9,10 +9,11 @@ import {
   ILabelProperties,
 } from '@influxdata/influx'
 import {createAuthorization} from 'src/authorizations/apis'
-import {postWrite} from 'src/client'
+import {postWrite as apiPostWrite, postLabel as apiPostLabel} from 'src/client'
 
 // Utils
 import {createNewPlugin} from 'src/dataLoaders/utils/pluginConfigs'
+import {addLabelDefaults} from 'src/labels/utils/'
 
 // Constants
 import {
@@ -30,8 +31,7 @@ import {
   BundleName,
   ConfigurationState,
 } from 'src/types/dataLoaders'
-import {AppState} from 'src/types'
+import {AppState, RemoteDataState} from 'src/types'
-import {RemoteDataState} from 'src/types'
 import {
   WritePrecision,
   TelegrafRequest,
@@ -452,12 +452,20 @@ const createTelegraf = async (dispatch, getState, plugins) => {
       tokenID: createdToken.id,
     } as ILabelProperties // hack to make compiler work
 
-    const createdLabel = await client.labels.create({
+    const resp = await apiPostLabel({
-      orgID: org.id,
+      data: {
-      name: `@influxdata.token-${new Date().getTime()}`, // fix for https://github.com/influxdata/influxdb/issues/15730
+        orgID: org.id,
-      properties,
+        name: `@influxdata.token-${new Date().getTime()}`, // fix for https://github.com/influxdata/influxdb/issues/15730
+        properties,
+      },
     })
 
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
+
+    const createdLabel = addLabelDefaults(resp.data.label)
+
     // add label to telegraf config
     const label = await client.telegrafConfigs.addLabel(tc.id, createdLabel)
 
@@ -554,7 +562,10 @@ export const writeLineProtocolAction = (
   try {
     dispatch(setLPStatus(RemoteDataState.Loading))
 
-    const resp = await postWrite({data: body, query: {org, bucket, precision}})
+    const resp = await apiPostWrite({
+      data: body,
+      query: {org, bucket, precision},
+    })
 
     if (resp.status === 204) {
       dispatch(setLPStatus(RemoteDataState.Done))

ui/src/labels/actions/index.ts

@@ -1,11 +1,14 @@
 // API
-import {client} from 'src/utils/api'
+import {
+  getLabels as apiGetLabels,
+  postLabel as apiPostLabel,
+  patchLabel as apiPatchLabel,
+  deleteLabel as apiDeleteLabel,
+} from 'src/client'
 
 // Types
 import {Dispatch} from 'react'
-import {RemoteDataState, AppThunk} from 'src/types'
+import {RemoteDataState, AppThunk, LabelProperties} from 'src/types'
-import {ILabel, ILabelProperties} from '@influxdata/influx'
-import {LabelProperties} from 'src/types/labels'
 
 // Actions
 import {notify, Action as NotifyAction} from 'src/shared/actions/notifications'
@@ -15,7 +18,10 @@ import {
   updateLabelFailed,
   deleteLabelFailed,
 } from 'src/shared/copy/notifications'
-import {GetState} from 'src/types'
+import {GetState, Label} from 'src/types'
+
+// Utils
+import {addLabelDefaults} from 'src/labels/utils/'
 
 export type Action =
   | SetLabels
@@ -28,13 +34,13 @@ interface SetLabels {
   type: 'SET_LABELS'
   payload: {
     status: RemoteDataState
-    list: ILabel[]
+    list: Label[]
   }
 }
 
 export const setLabels = (
   status: RemoteDataState,
-  list?: ILabel[]
+  list?: Label[]
 ): SetLabels => ({
   type: 'SET_LABELS',
   payload: {status, list},
@@ -43,11 +49,11 @@ export const setLabels = (
 interface AddLabel {
   type: 'ADD_LABEL'
   payload: {
-    label: ILabel
+    label: Label
   }
 }
 
-export const addLabel = (label: ILabel): AddLabel => ({
+export const addLabel = (label: Label): AddLabel => ({
   type: 'ADD_LABEL',
   payload: {label},
 })
@@ -57,7 +63,7 @@ interface EditLabel {
   payload: {label}
 }
 
-export const editLabel = (label: ILabel): EditLabel => ({
+export const editLabel = (label: Label): EditLabel => ({
   type: 'EDIT_LABEL',
   payload: {label},
 })
@@ -82,7 +88,13 @@ export const getLabels = () => async (
     } = getState()
     dispatch(setLabels(RemoteDataState.Loading))
 
-    const labels = await client.labels.getAll(org.id)
+    const resp = await apiGetLabels({query: {orgID: org.id}})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const labels = resp.data.labels.map(l => addLabelDefaults(l))
 
     dispatch(setLabels(RemoteDataState.Done, labels))
   } catch (e) {
@@ -104,12 +116,20 @@ export const createLabel = (
   } = getState()
 
   try {
-    const createdLabel = await client.labels.create({
+    const resp = await apiPostLabel({
-      orgID: org.id,
+      data: {
-      name,
+        orgID: org.id,
-      properties: properties as ILabelProperties,
+        name,
+        properties,
+      },
     })
 
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
+
+    const createdLabel = addLabelDefaults(resp.data.label)
+
     dispatch(addLabel(createdLabel))
   } catch (e) {
     console.error(e)
@@ -117,11 +137,17 @@ export const createLabel = (
   }
 }
 
-export const updateLabel = (id: string, l: ILabel) => async (
+export const updateLabel = (id: string, l: Label) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
-    const label = await client.labels.update(id, l)
+    const resp = await apiPatchLabel({labelID: id, data: l})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const label = addLabelDefaults(resp.data.label)
 
     dispatch(editLabel(label))
   } catch (e) {
@@ -134,7 +160,7 @@ export const deleteLabel = (id: string) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
-    await client.labels.delete(id)
+    await apiDeleteLabel({labelID: id})
 
     dispatch(removeLabel(id))
   } catch (e) {

ui/src/labels/components/CreateLabelOverlay.tsx

@@ -7,7 +7,7 @@ import LabelOverlayForm from 'src/labels/components/LabelOverlayForm'
 import {Overlay, ComponentStatus} from '@influxdata/clockface'
 
 // Types
-import {ILabel} from '@influxdata/influx'
+import {Label} from 'src/types'
 
 // Constants
 import {EMPTY_LABEL} from 'src/labels/constants'
@@ -18,12 +18,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   isVisible: boolean
   onDismiss: () => void
-  onCreateLabel: (label: ILabel) => void
+  onCreateLabel: (label: Label) => void
   onNameValidation: (name: string) => string | null
   overrideDefaultName?: string
 }
 interface State {
-  label: ILabel
+  label: Label
   colorStatus: ComponentStatus
 }
 

ui/src/labels/components/LabelsTab.tsx

@@ -21,7 +21,6 @@ import {validateLabelUniqueness} from 'src/labels/utils/'
 
 // Types
 import {AppState, Label} from 'src/types'
-import {ILabel} from '@influxdata/influx'
 import {
   IconFont,
   ComponentSize,
@@ -145,7 +144,7 @@ class Labels extends PureComponent<Props, State> {
   }
 
   private handleUpdateLabel = (label: Label) => {
-    this.props.updateLabel(label.id, label as ILabel)
+    this.props.updateLabel(label.id, label)
   }
 
   private handleDelete = (id: string) => {

ui/src/labels/constants/index.ts

@@ -1,5 +1,5 @@
 // Labels can use a different set of brand colors than single stats or gauges
-import {ILabel} from '@influxdata/influx'
+import {Label} from 'src/types'
 import {LabelColor, LabelColorType} from 'src/types/colors'
 
 export const INFLUX_LABEL_PREFIX = '@influxdata'
@@ -9,7 +9,7 @@ export const HEX_CODE_CHAR_LENGTH = 7
 
 export const DEFAULT_LABEL_COLOR_HEX = '#326BBA'
 
-export const EMPTY_LABEL: ILabel = {
+export const EMPTY_LABEL: Label = {
   name: '',
   properties: {
     description: '',

ui/src/tasks/actions/index.ts

@@ -23,7 +23,7 @@ import {createTaskFromTemplate as createTaskFromTemplateAJAX} from 'src/template
 import {addLabelDefaults} from 'src/labels/utils'
 import {
   deleteTask as apiDeleteTask,
-  deleteTasksLabel,
+  deleteTasksLabel as apiDeleteTasksLabel,
   getTask as apiGetTask,
   getTasks as apiGetTasks,
   getTasksRuns as apiGetTasksRuns,
@@ -295,7 +295,7 @@ export const removeTaskLabelAsync = (taskID: string, label: Label) => async (
   dispatch
 ): Promise<void> => {
   try {
-    await deleteTasksLabel({taskID, labelID: label.id})
+    await apiDeleteTasksLabel({taskID, labelID: label.id})
     const resp = await apiGetTask({taskID})
     if (resp.status !== 200) {
       throw new Error(resp.data.message)

ui/src/tasks/components/TaskCard.tsx

@@ -25,8 +25,7 @@ import {viewableLabels} from 'src/labels/selectors'
 
 // Types
 import {ComponentColor} from '@influxdata/clockface'
-import {ILabel} from '@influxdata/influx'
+import {AppState, Task, Label} from 'src/types'
-import {AppState, Task} from 'src/types'
 
 // Constants
 import {DEFAULT_TASK_NAME} from 'src/dashboards/constants'
@@ -43,7 +42,7 @@ interface PassedProps {
 }
 
 interface StateProps {
-  labels: ILabel[]
+  labels: Label[]
 }
 
 interface DispatchProps {
@@ -184,19 +183,19 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
-  private handleAddLabel = (label: ILabel) => {
+  private handleAddLabel = (label: Label) => {
     const {task, onAddTaskLabel} = this.props
 
     onAddTaskLabel(task.id, label)
   }
 
-  private handleRemoveLabel = (label: ILabel) => {
+  private handleRemoveLabel = (label: Label) => {
     const {task, onRemoveTaskLabel} = this.props
 
     onRemoveTaskLabel(task.id, label)
   }
 
-  private handleCreateLabel = (label: ILabel) => {
+  private handleCreateLabel = (label: Label) => {
     this.props.onCreateLabel(label.name, label.properties)
   }
 

ui/src/templates/actions/index.ts

@@ -12,7 +12,6 @@ import {
   ITaskTemplate,
   TemplateType,
   ITemplate,
-  ILabel as Label,
 } from '@influxdata/influx'
 import {
   RemoteDataState,
@@ -20,6 +19,7 @@ import {
   DashboardTemplate,
   VariableTemplate,
   Template,
+  Label,
 } from 'src/types'
 
 // Actions

ui/src/templates/api/index.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import _, {get} from 'lodash'
 import {
   DashboardTemplate,
   TemplateType,
@@ -24,11 +24,14 @@ import {
   getLabelRelationships,
 } from 'src/templates/utils/'
 import {addDefaults} from 'src/tasks/actions'
+import {addLabelDefaults} from 'src/labels/utils'
 // API
 import {
   getTask as apiGetTask,
   postTask as apiPostTask,
   postTasksLabel as apiPostTasksLabel,
+  getLabels as apiGetLabels,
+  postLabel as apiPostLabel,
 } from 'src/client'
 // Create Dashboard Templates
 
@@ -107,17 +110,33 @@ const createLabelsFromTemplate = async <T extends TemplateBase>(
     labelRelationships
   )
 
-  const existingLabels = await client.labels.getAll(orgID)
+  const resp = await apiGetLabels({query: {orgID}})
 
-  const labelsToCreate = findLabelsToCreate(existingLabels, includedLabels).map(
+  if (resp.status !== 200) {
-    l => ({
+    throw new Error(resp.data.message)
-      orgID,
+  }
-      name: _.get(l, 'attributes.name', ''),
+
-      properties: _.get(l, 'attributes.properties', {}),
+  const existingLabels = resp.data.labels.map(l => addLabelDefaults(l))
+
+  const foundLabelsToCreate = findLabelsToCreate(
+    existingLabels,
+    includedLabels
+  ).map(l => ({
+    orgID,
+    name: _.get(l, 'attributes.name', ''),
+    properties: _.get(l, 'attributes.properties', {}),
+  }))
+
+  const promisedLabels = foundLabelsToCreate.map(async lab => {
+    return apiPostLabel({
+      data: lab,
     })
-  )
+      .then(res => get(res, 'res.data.label', ''))
+      .then(lab => addLabelDefaults(lab))
+  })
+
+  const createdLabels = await Promise.all(promisedLabels)
 
-  const createdLabels = await client.labels.createAll(labelsToCreate)
   const allLabels = [...createdLabels, ...existingLabels]
 
   const labelMap: LabelMap = {}

ui/src/templates/components/StaticTemplateCard.tsx

@@ -21,9 +21,9 @@ import {createResourceFromStaticTemplate} from 'src/templates/actions'
 import {viewableLabels} from 'src/labels/selectors'
 
 // Types
-import {TemplateSummary, ILabel} from '@influxdata/influx'
+import {TemplateSummary} from '@influxdata/influx'
 import {ComponentColor} from '@influxdata/clockface'
-import {AppState, Organization} from 'src/types'
+import {AppState, Organization, Label} from 'src/types'
 
 // Constants
 interface OwnProps {
@@ -37,7 +37,7 @@ interface DispatchProps {
 }
 
 interface StateProps {
-  labels: ILabel[]
+  labels: Label[]
   org: Organization
 }
 

ui/src/templates/components/TemplateCard.tsx

@@ -31,9 +31,9 @@ import {createLabel as createLabelAsync} from 'src/labels/actions'
 import {viewableLabels} from 'src/labels/selectors'
 
 // Types
-import {TemplateSummary, ILabel} from '@influxdata/influx'
+import {TemplateSummary} from '@influxdata/influx'
 import {ComponentColor} from '@influxdata/clockface'
-import {AppState, Organization} from 'src/types'
+import {AppState, Organization, Label} from 'src/types'
 
 // Constants
 import {DEFAULT_TEMPLATE_NAME} from 'src/templates/constants'
@@ -54,7 +54,7 @@ interface DispatchProps {
 }
 
 interface StateProps {
-  labels: ILabel[]
+  labels: Label[]
   org: Organization
 }
 
@@ -203,19 +203,19 @@ class TemplateCard extends PureComponent<Props & WithRouterProps> {
     router.push(`/orgs/${org.id}/settings/templates/${template.id}/view`)
   }
 
-  private handleAddLabel = (label: ILabel): void => {
+  private handleAddLabel = (label: Label): void => {
     const {template, onAddTemplateLabels} = this.props
 
     onAddTemplateLabels(template.id, [label])
   }
 
-  private handleRemoveLabel = (label: ILabel): void => {
+  private handleRemoveLabel = (label: Label): void => {
     const {template, onRemoveTemplateLabels} = this.props
 
     onRemoveTemplateLabels(template.id, [label])
   }
 
-  private handleCreateLabel = (label: ILabel) => {
+  private handleCreateLabel = (label: Label) => {
     this.props.onCreateLabel(label.name, label.properties)
   }
 }

ui/src/templates/utils/index.ts

@@ -5,7 +5,8 @@ import {
   Relationships,
   LabelRelationship,
 } from 'src/types'
-import {ILabel, IVariable as Variable} from '@influxdata/influx'
+import {IVariable as Variable} from '@influxdata/influx'
+import {Label} from 'src/types'
 
 export function findIncludedsFromRelationships<
   T extends {id: string; type: TemplateType}
@@ -33,7 +34,7 @@ export function findIncludedFromRelationship<
 }
 
 export const findLabelsToCreate = (
-  currentLabels: ILabel[],
+  currentLabels: Label[],
   labels: LabelIncluded[]
 ): LabelIncluded[] => {
   return labels.filter(

ui/src/types/templates.ts

@@ -1,12 +1,11 @@
 import {
-  ILabel,
   IVariable as Variable,
   IDashboard,
   DocumentListEntry,
   Document,
   DocumentMeta,
 } from '@influxdata/influx'
-import {View, Cell} from './index'
+import {View, Cell, Label} from './index'
 
 export enum TemplateType {
   Label = 'label',
@@ -29,7 +28,7 @@ interface DocumentMetaWithTemplateID extends DocumentMeta {
 export interface TemplateBase extends Document {
   meta: DocumentMetaWithTemplateID
   content: {data: TemplateData; included: TemplateIncluded[]}
-  labels: ILabel[]
+  labels: Label[]
 }
 
 // TODO: be more specific about what attributes can be
@@ -98,7 +97,7 @@ export interface CellIncluded extends TemplateIncluded {
 
 export interface LabelIncluded extends TemplateIncluded {
   type: TemplateType.Label
-  attributes: ILabel
+  attributes: Label
 }
 
 export interface VariableIncluded extends TemplateIncluded {
@@ -172,5 +171,5 @@ export interface VariableTemplate extends TemplateBase {
 export type Template = TaskTemplate | DashboardTemplate | VariableTemplate
 
 export interface TemplateSummary extends DocumentListEntry {
-  labels: ILabel[]
+  labels: Label[]
 }

ui/src/variables/actions/index.ts

@@ -38,8 +38,9 @@ import {
   QueryArguments,
   MapArguments,
   CSVArguments,
+  Label,
 } from 'src/types'
-import {IVariable as Variable, ILabel as Label} from '@influxdata/influx'
+import {IVariable as Variable} from '@influxdata/influx'
 import {VariableValuesByID} from 'src/variables/types'
 import {
   addVariableLabelFailed,

ui/src/variables/components/VariableCard.tsx

@@ -9,8 +9,8 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 import VariableContextMenu from 'src/variables/components/VariableContextMenu'
 
 // Types
-import {IVariable as Variable, ILabel} from '@influxdata/influx'
+import {IVariable as Variable} from '@influxdata/influx'
-import {AppState} from 'src/types'
+import {AppState, Label} from 'src/types'
 
 // Selectors
 import {viewableLabels} from 'src/labels/selectors'
@@ -31,7 +31,7 @@ interface OwnProps {
 }
 
 interface StateProps {
-  labels: ILabel[]
+  labels: Label[]
 }
 
 interface DispatchProps {
@@ -95,19 +95,19 @@ class VariableCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
-  private handleAddLabel = (label: ILabel): void => {
+  private handleAddLabel = (label: Label): void => {
     const {variable, onAddVariableLabels} = this.props
 
     onAddVariableLabels(variable.id, [label])
   }
 
-  private handleRemoveLabel = (label: ILabel): void => {
+  private handleRemoveLabel = (label: Label): void => {
     const {variable, onRemoveVariableLabels} = this.props
 
     onRemoveVariableLabels(variable.id, [label])
   }
 
-  private handleCreateLabel = (label: ILabel): void => {
+  private handleCreateLabel = (label: Label): void => {
     const {name, properties} = label
     this.props.onCreateLabel(name, properties)
   }
@@ -134,7 +134,7 @@ class VariableCard extends PureComponent<Props & WithRouterProps> {
 
 const mstp = ({labels}: AppState): StateProps => {
   return {
-    labels: viewableLabels(labels.list as ILabel[]),
+    labels: viewableLabels(labels.list),
   }
 }