From 1c0174e61db7bdd9d7b80b4bfa4a86c84c95fb33 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Thu, 19 Dec 2019 12:27:01 -0800
Subject: [PATCH 01/13] feat(ui): added last... to notification rules and
 checks for API

---
 http/check_service.go     | 37 +++++++++++++++++++++++++++----------
 http/notification_rule.go | 39 ++++++++++++++++++++++++++++-----------
 2 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/http/check_service.go b/http/check_service.go
index f3ac3c61844..6fa925a34e1 100644
--- a/http/check_service.go
+++ b/http/check_service.go
@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"io/ioutil"
 	"net/http"
+	"time"
 
 	"github.com/influxdata/httprouter"
 	"github.com/influxdata/influxdb"
@@ -138,9 +139,13 @@ type checkLinks struct {
 
 type checkResponse struct {
 	influxdb.Check
-	Status string           `json:"status"`
-	Labels []influxdb.Label `json:"labels"`
-	Links  checkLinks       `json:"links"`
+	Status          string           `json:"status"`
+	Labels          []influxdb.Label `json:"labels"`
+	Links           checkLinks       `json:"links"`
+	LatestCompleted string           `json:"latestCompleted,omitempty"`
+	LatestScheduled string           `json:"latestScheduled,omitempty"`
+	LastRunStatus   string           `json:"LastRunStatus,omitempty"`
+	LastRunError    string           `json:"LastRunError,omitempty"`
 }
 
 type postCheckRequest struct {
@@ -159,13 +164,21 @@ func (resp checkResponse) MarshalJSON() ([]byte, error) {
 	}
 
 	b2, err := json.Marshal(struct {
-		Labels []influxdb.Label `json:"labels"`
-		Links  checkLinks       `json:"links"`
-		Status string           `json:"status"`
+		Labels          []influxdb.Label `json:"labels"`
+		Links           checkLinks       `json:"links"`
+		Status          string           `json:"status"`
+		LatestCompleted string           `json:"latestCompleted,omitempty"`
+		LatestScheduled string           `json:"latestScheduled,omitempty"`
+		LastRunStatus   string           `json:"lastRunStatus,omitempty"`
+		LastRunError    string           `json:"lastRunError,omitempty"`
 	}{
-		Links:  resp.Links,
-		Labels: resp.Labels,
-		Status: resp.Status,
+		Links:           resp.Links,
+		Labels:          resp.Labels,
+		Status:          resp.Status,
+		LatestCompleted: resp.LatestCompleted,
+		LatestScheduled: resp.LatestScheduled,
+		LastRunStatus:   resp.LastRunStatus,
+		LastRunError:    resp.LastRunError,
 	})
 	if err != nil {
 		return nil, err
@@ -198,7 +211,11 @@ func (h *CheckHandler) newCheckResponse(ctx context.Context, chk influxdb.Check,
 			Owners:  fmt.Sprintf("/api/v2/checks/%s/owners", chk.GetID()),
 			Query:   fmt.Sprintf("/api/v2/checks/%s/query", chk.GetID()),
 		},
-		Labels: []influxdb.Label{},
+		Labels:          []influxdb.Label{},
+		LatestCompleted: task.LatestCompleted.Format(time.RFC3339),
+		LatestScheduled: task.LatestScheduled.Format(time.RFC3339),
+		LastRunStatus:   task.LastRunStatus,
+		LastRunError:    task.LastRunError,
 	}
 
 	for _, l := range labels {
diff --git a/http/notification_rule.go b/http/notification_rule.go
index 532025b2557..7798c262412 100644
--- a/http/notification_rule.go
+++ b/http/notification_rule.go
@@ -6,6 +6,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"net/http"
+	"time"
 
 	"github.com/influxdata/httprouter"
 	"github.com/influxdata/influxdb"
@@ -146,9 +147,13 @@ type notificationRuleLinks struct {
 
 type notificationRuleResponse struct {
 	influxdb.NotificationRule
-	Labels []influxdb.Label      `json:"labels"`
-	Links  notificationRuleLinks `json:"links"`
-	Status string                `json:"status"`
+	Labels          []influxdb.Label      `json:"labels"`
+	Links           notificationRuleLinks `json:"links"`
+	Status          string                `json:"status"`
+	LatestCompleted string                `json:"latestCompleted,omitempty"`
+	LatestScheduled string                `json:"latestScheduled,omitempty"`
+	LastRunStatus   string                `json:"LastRunStatus,omitempty"`
+	LastRunError    string                `json:"LastRunError,omitempty"`
 }
 
 func (resp notificationRuleResponse) MarshalJSON() ([]byte, error) {
@@ -158,13 +163,21 @@ func (resp notificationRuleResponse) MarshalJSON() ([]byte, error) {
 	}
 
 	b2, err := json.Marshal(struct {
-		Labels []influxdb.Label      `json:"labels"`
-		Links  notificationRuleLinks `json:"links"`
-		Status string                `json:"status"`
+		Labels          []influxdb.Label      `json:"labels"`
+		Links           notificationRuleLinks `json:"links"`
+		Status          string                `json:"status"`
+		LatestCompleted string                `json:"latestCompleted,omitempty"`
+		LatestScheduled string                `json:"latestScheduled,omitempty"`
+		LastRunStatus   string                `json:"lastRunStatus,omitempty"`
+		LastRunError    string                `json:"lastRunError,omitempty"`
 	}{
-		Links:  resp.Links,
-		Labels: resp.Labels,
-		Status: resp.Status,
+		Links:           resp.Links,
+		Labels:          resp.Labels,
+		Status:          resp.Status,
+		LatestCompleted: resp.LatestCompleted,
+		LatestScheduled: resp.LatestScheduled,
+		LastRunStatus:   resp.LastRunStatus,
+		LastRunError:    resp.LastRunError,
 	})
 	if err != nil {
 		return nil, err
@@ -195,8 +208,12 @@ func (h *NotificationRuleHandler) newNotificationRuleResponse(ctx context.Contex
 			Owners:  fmt.Sprintf("/api/v2/notificationRules/%s/owners", nr.GetID()),
 			Query:   fmt.Sprintf("/api/v2/notificationRules/%s/query", nr.GetID()),
 		},
-		Labels: []influxdb.Label{},
-		Status: t.Status,
+		Labels:          []influxdb.Label{},
+		Status:          t.Status,
+		LatestCompleted: t.LatestCompleted.Format(time.RFC3339),
+		LatestScheduled: t.LatestScheduled.Format(time.RFC3339),
+		LastRunStatus:   t.LastRunStatus,
+		LastRunError:    t.LastRunError,
 	}
 
 	for _, l := range labels {

From d5e119f26ca80bb4ba64d65004025d2e0e283f95 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Thu, 19 Dec 2019 14:56:03 -0800
Subject: [PATCH 02/13] feat(api): updated tests to account for api changes

---
 http/check_test.go             | 24 ++++++++++++++++++------
 http/notification_rule_test.go | 12 +++++++++---
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/http/check_test.go b/http/check_test.go
index a7e7148d9dc..834ed0952f5 100644
--- a/http/check_test.go
+++ b/http/check_test.go
@@ -168,7 +168,9 @@ func TestService_handleGetChecks(t *testing.T) {
           }
         }
 			],
-			"status": "active"
+			"status": "active",
+			"latestCompleted": "0001-01-01T00:00:00Z",
+			"latestScheduled": "0001-01-01T00:00:00Z"
     },
     {
       "links": {
@@ -230,7 +232,9 @@ func TestService_handleGetChecks(t *testing.T) {
 					}
 				}
 			],
-			"status": "active"
+			"status": "active",
+			"latestCompleted": "0001-01-01T00:00:00Z",
+			"latestScheduled": "0001-01-01T00:00:00Z"
 		}
 	]
 }
@@ -520,7 +524,9 @@ func TestService_handleGetCheck(t *testing.T) {
           "type": "deadman",
 		  "orgID": "020f755c3c082000",
 			"name": "hello",
-			"status": "active"
+			"status": "active",
+			"latestCompleted": "0001-01-01T00:00:00Z",
+			"latestScheduled": "0001-01-01T00:00:00Z"
 		}
 		`,
 			},
@@ -703,7 +709,9 @@ func TestService_handlePostCheck(t *testing.T) {
   "every": "5m",
   "level": "WARN",
 	"labels": [],
-	"status": "active"
+	"status": "active",
+	"latestCompleted": "0001-01-01T00:00:00Z",
+	"latestScheduled": "0001-01-01T00:00:00Z"
 }
 `,
 			},
@@ -949,7 +957,9 @@ func TestService_handlePatchCheck(t *testing.T) {
 			"statusMessageTemplate": "",
 			"tags": null,
 			"type": "deadman",
-			"labels": []
+			"labels": [],
+			"latestCompleted": "0001-01-01T00:00:00Z",
+			"latestScheduled": "0001-01-01T00:00:00Z"
 		}
 		`,
 			},
@@ -1130,7 +1140,9 @@ func TestService_handleUpdateCheck(t *testing.T) {
           "statusMessageTemplate": "",
           "tags": null,
           "type": "deadman",
-		  "labels": []
+			"labels": [],
+			"latestCompleted": "0001-01-01T00:00:00Z",
+			"latestScheduled": "0001-01-01T00:00:00Z"
 		}
 		`,
 			},
diff --git a/http/notification_rule_test.go b/http/notification_rule_test.go
index edd64bee49f..ee9aff20385 100644
--- a/http/notification_rule_test.go
+++ b/http/notification_rule_test.go
@@ -147,7 +147,9 @@ func Test_newNotificationRuleResponses(t *testing.T) {
       ],
       "type": "slack",
       "updatedAt": "0001-01-01T00:00:00Z",
-      "status": "active"
+			"status": "active",
+			"latestCompleted": "0001-01-01T00:00:00Z",
+			"latestScheduled": "0001-01-01T00:00:00Z"
     },
     {
       "createdAt": "0001-01-01T00:00:00Z",
@@ -170,7 +172,9 @@ func Test_newNotificationRuleResponses(t *testing.T) {
       "runbookLink": "",
       "type": "pagerduty",
       "updatedAt": "0001-01-01T00:00:00Z",
-      "status": "active"
+			"status": "active",
+			"latestCompleted": "0001-01-01T00:00:00Z",
+			"latestScheduled": "0001-01-01T00:00:00Z"
     }
   ]
 }`,
@@ -287,7 +291,9 @@ func Test_newNotificationRuleResponse(t *testing.T) {
    }
  ],
  "type": "slack",
- "updatedAt": "0001-01-01T00:00:00Z"
+ "updatedAt": "0001-01-01T00:00:00Z",
+ "latestCompleted": "0001-01-01T00:00:00Z",
+	"latestScheduled": "0001-01-01T00:00:00Z"
 }`,
 		},
 	}

From b7c41e93c302d8245d6c16fe2fc5b6769933d06b Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Fri, 20 Dec 2019 06:20:17 -0800
Subject: [PATCH 03/13] feat(ui): added in UI to integrate API changes, need to
 fix typing issue and update API tests to account for lastRunStatus and
 lastRunError

---
 http/swagger.yml                              | 30 ++++++++++++++++
 ui/src/alerting/components/CheckCard.tsx      |  6 ++++
 .../components/notifications/RuleCard.tsx     |  6 ++++
 .../lastRunTaskStatus/LastRunTaskStatus.tsx   | 34 +++++++++++++++++++
 ui/src/tasks/components/TaskCard.tsx          | 13 +++++--
 5 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx

diff --git a/http/swagger.yml b/http/swagger.yml
index 1aae905a814..afe52701dcb 100644
--- a/http/swagger.yml
+++ b/http/swagger.yml
@@ -10214,6 +10214,21 @@ components:
         statusMessageTemplate:
           description: The template used to generate and write a status message.
           type: string
+        latestCompleted:
+          description: Timestamp of latest scheduled, completed run, RFC3339.
+          type: string
+          format: date-time
+          readOnly: true
+        lastRunStatus:
+          readOnly: true
+          type: string
+          enum:
+            - failed
+            - success
+            - canceled
+        lastRunError:
+          readOnly: true
+          type: string
         labels:
           $ref: "#/components/schemas/Labels"
         links:
@@ -10390,6 +10405,21 @@ components:
         - statusRules
         - endpointID
       properties:
+        latestCompleted:
+          description: Timestamp of latest scheduled, completed run, RFC3339.
+          type: string
+          format: date-time
+          readOnly: true
+        lastRunStatus:
+          readOnly: true
+          type: string
+          enum:
+            - failed
+            - success
+            - canceled
+        lastRunError:
+          readOnly: true
+          type: string
         id:
           readOnly: true
           type: string
diff --git a/ui/src/alerting/components/CheckCard.tsx b/ui/src/alerting/components/CheckCard.tsx
index 326f0798d1f..3003a68602f 100644
--- a/ui/src/alerting/components/CheckCard.tsx
+++ b/ui/src/alerting/components/CheckCard.tsx
@@ -7,6 +7,7 @@ import {withRouter, WithRouterProps} from 'react-router'
 import {SlideToggle, ComponentSize, ResourceCard} from '@influxdata/clockface'
 import CheckCardContext from 'src/alerting/components/CheckCardContext'
 import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
+import LastRunTaskStatus from 'src/shared/components/lastRunTaskStatus/LastRunTaskStatus'
 
 // Constants
 import {DEFAULT_CHECK_NAME} from 'src/alerting/constants'
@@ -170,7 +171,12 @@ const CheckCard: FunctionComponent<Props> = ({
         />
       }
       metaData={[
+        <>Last completed at {check.latestCompleted}</>,
         <>{relativeTimestampFormatter(check.updatedAt, 'Last updated ')}</>,
+        <LastRunTaskStatus
+          lastRunError={check.lastRunError}
+          lastRunStatus={check.lastRunStatus}
+        />,
       ]}
     />
   )
diff --git a/ui/src/alerting/components/notifications/RuleCard.tsx b/ui/src/alerting/components/notifications/RuleCard.tsx
index 9710a86ad8c..89ba08e378c 100644
--- a/ui/src/alerting/components/notifications/RuleCard.tsx
+++ b/ui/src/alerting/components/notifications/RuleCard.tsx
@@ -7,6 +7,7 @@ import {withRouter, WithRouterProps} from 'react-router'
 import {SlideToggle, ComponentSize, ResourceCard} from '@influxdata/clockface'
 import NotificationRuleCardContext from 'src/alerting/components/notifications/RuleCardContext'
 import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
+import LastRunTaskStatus from 'src/shared/components/lastRunTaskStatus/LastRunTaskStatus'
 
 // Constants
 import {DEFAULT_NOTIFICATION_RULE_NAME} from 'src/alerting/constants'
@@ -165,7 +166,12 @@ const RuleCard: FC<Props> = ({
         />
       }
       metaData={[
+        <>Last completed at {rule.latestCompleted}</>,
         <>{relativeTimestampFormatter(rule.updatedAt, 'Last updated ')}</>,
+        <LastRunTaskStatus
+          lastRunError={rule.lastRunError}
+          lastRunStatus={rule.lastRunStatus}
+        />,
       ]}
     />
   )
diff --git a/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx b/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx
new file mode 100644
index 00000000000..27ad933e292
--- /dev/null
+++ b/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx
@@ -0,0 +1,34 @@
+import React, {FC} from 'react'
+import {Icon, IconFont} from '@influxdata/clockface'
+
+interface PassedProps {
+  lastRunError?: string
+  lastRunStatus: string
+}
+
+const LastRunTaskStatus: FC<PassedProps> = ({lastRunError, lastRunStatus}) => {
+  if (lastRunStatus === 'failed' || lastRunError !== undefined) {
+    return (
+      <li className="query-checklist--item error">
+        <Icon glyph={IconFont.Remove} />
+        {lastRunError}
+      </li>
+    )
+  }
+  if (lastRunStatus === 'cancel') {
+    return (
+      <li className="query-checklist--item error">
+        <Icon glyph={IconFont.Remove} />
+        Task Cancelled
+      </li>
+    )
+  }
+  return (
+    <li className="query-checklist--item valid">
+      <Icon glyph={IconFont.Checkmark} />
+      Task ran successfully!
+    </li>
+  )
+}
+
+export default LastRunTaskStatus
diff --git a/ui/src/tasks/components/TaskCard.tsx b/ui/src/tasks/components/TaskCard.tsx
index 10ef77bbcbd..a702fb5c829 100644
--- a/ui/src/tasks/components/TaskCard.tsx
+++ b/ui/src/tasks/components/TaskCard.tsx
@@ -4,9 +4,15 @@ import {connect} from 'react-redux'
 import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
-import {SlideToggle, ComponentSize, ResourceCard} from '@influxdata/clockface'
+import {
+  SlideToggle,
+  ComponentSize,
+  ResourceCard,
+  IconFont,
+} from '@influxdata/clockface'
 import {Context} from 'src/clockface'
 import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
+import LastRunTaskStatus from 'src/shared/components/lastRunTaskStatus/LastRunTaskStatus'
 
 // Actions
 import {addTaskLabelsAsync, removeTaskLabelsAsync} from 'src/tasks/actions'
@@ -22,7 +28,6 @@ import {AppState, TaskStatus} from 'src/types'
 
 // Constants
 import {DEFAULT_TASK_NAME} from 'src/dashboards/constants'
-import {IconFont} from 'src/clockface/types/index'
 
 interface PassedProps {
   task: Task
@@ -71,6 +76,10 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
         metaData={[
           <>Last completed at {task.latestCompleted}</>,
           <>{`Scheduled to run ${this.schedule}`}</>,
+          <LastRunTaskStatus
+            lastRunError={task.lastRunError}
+            lastRunStatus={task.lastRunStatus}
+          />,
         ]}
         toggle={
           <SlideToggle

From bd34881492c23662b6ab49e1ae6387e3e77444c8 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Fri, 20 Dec 2019 13:00:17 -0800
Subject: [PATCH 04/13] feat(ui): fixing TS errors

---
 .../components/inlineLabels/InlineLabels.tsx  |  6 +--
 ui/src/tasks/actions/index.ts                 |  4 +-
 ui/src/tasks/components/TaskCard.tsx          | 11 ++---
 ui/src/tasks/components/TasksList.tsx         |  2 +-
 ui/src/tasks/reducers/index.ts                |  2 +-
 ui/src/templates/actions/index.ts             | 48 ++++++++++++-------
 ui/src/types/labels.ts                        |  2 +
 ui/src/types/tasks.ts                         |  6 ++-
 ui/src/types/templates.ts                     |  2 +-
 9 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/ui/src/shared/components/inlineLabels/InlineLabels.tsx b/ui/src/shared/components/inlineLabels/InlineLabels.tsx
index 6ccdb89fcab..3831cb6515b 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabels.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabels.tsx
@@ -7,7 +7,7 @@ import {Label as LabelComponent} from '@influxdata/clockface'
 import InlineLabelsEditor from 'src/shared/components/inlineLabels/InlineLabelsEditor'
 
 // Types
-import {Label} from 'src/types'
+import {Label, Labels} from 'src/types'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -19,8 +19,8 @@ export enum LabelsEditMode {
 
 interface Props {
   editMode?: LabelsEditMode // temporary for displaying labels
-  selectedLabels: Label[]
-  labels: Label[]
+  selectedLabels: Labels
+  labels: Labels
   onRemoveLabel?: (label: Label) => void
   onAddLabel?: (label: Label) => void
   onCreateLabel?: (label: Label) => void
diff --git a/ui/src/tasks/actions/index.ts b/ui/src/tasks/actions/index.ts
index a0c0b85fae7..c5fa8e6b606 100644
--- a/ui/src/tasks/actions/index.ts
+++ b/ui/src/tasks/actions/index.ts
@@ -3,7 +3,6 @@ import {push, goBack} from 'react-router-redux'
 import _ from 'lodash'
 
 // APIs
-import {LogEvent, ITask as Task} from '@influxdata/influx'
 import {client} from 'src/utils/api'
 import {notify} from 'src/shared/actions/notifications'
 import {
@@ -33,9 +32,10 @@ import {setExportTemplate} from 'src/templates/actions'
 import * as copy from 'src/shared/copy/notifications'
 
 // Types
-import {AppState, Label, TaskTemplate} from 'src/types'
+import {AppState, Label, Task, TaskTemplate} from 'src/types'
 import {RemoteDataState} from '@influxdata/clockface'
 import {Run} from 'src/tasks/components/TaskRunsPage'
+import {LogEvent} from '@influxdata/influx'
 
 // Utils
 import {getErrorMessage} from 'src/utils/api'
diff --git a/ui/src/tasks/components/TaskCard.tsx b/ui/src/tasks/components/TaskCard.tsx
index a702fb5c829..67adac3d2e1 100644
--- a/ui/src/tasks/components/TaskCard.tsx
+++ b/ui/src/tasks/components/TaskCard.tsx
@@ -23,8 +23,7 @@ import {viewableLabels} from 'src/labels/selectors'
 
 // Types
 import {ComponentColor} from '@influxdata/clockface'
-import {ITask as Task, ILabel} from '@influxdata/influx'
-import {AppState, TaskStatus} from 'src/types'
+import {AppState, TaskStatus, Task, Labels, Label} from 'src/types'
 
 // Constants
 import {DEFAULT_TASK_NAME} from 'src/dashboards/constants'
@@ -41,7 +40,7 @@ interface PassedProps {
 }
 
 interface StateProps {
-  labels: ILabel[]
+  labels: Labels
 }
 
 interface DispatchProps {
@@ -169,19 +168,19 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
-  private handleAddLabel = (label: ILabel) => {
+  private handleAddLabel = (label: Label) => {
     const {task, onAddTaskLabels} = this.props
 
     onAddTaskLabels(task.id, [label])
   }
 
-  private handleRemoveLabel = (label: ILabel) => {
+  private handleRemoveLabel = (label: Label) => {
     const {task, onRemoveTaskLabels} = this.props
 
     onRemoveTaskLabels(task.id, [label])
   }
 
-  private handleCreateLabel = (label: ILabel) => {
+  private handleCreateLabel = (label: Label) => {
     this.props.onCreateLabel(label.name, label.properties)
   }
 
diff --git a/ui/src/tasks/components/TasksList.tsx b/ui/src/tasks/components/TasksList.tsx
index 3d5245bf26c..605d0f4a90a 100644
--- a/ui/src/tasks/components/TasksList.tsx
+++ b/ui/src/tasks/components/TasksList.tsx
@@ -9,7 +9,7 @@ import TaskCard from 'src/tasks/components/TaskCard'
 
 // Types
 import EmptyTasksList from 'src/tasks/components/EmptyTasksList'
-import {ITask as Task} from '@influxdata/influx'
+import {Task} from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
 import {Sort} from '@influxdata/clockface'
 
diff --git a/ui/src/tasks/reducers/index.ts b/ui/src/tasks/reducers/index.ts
index 613e6c915c3..fab12014297 100644
--- a/ui/src/tasks/reducers/index.ts
+++ b/ui/src/tasks/reducers/index.ts
@@ -3,7 +3,7 @@ import {LogEvent} from '@influxdata/influx'
 
 // Types
 import {Action} from 'src/tasks/actions'
-import {ITask as Task} from '@influxdata/influx'
+import {Task} from 'src/types'
 import {RemoteDataState} from '@influxdata/clockface'
 import {Run} from 'src/tasks/components/TaskRunsPage'
 
diff --git a/ui/src/templates/actions/index.ts b/ui/src/templates/actions/index.ts
index f31bbefb643..de6f9ea7f09 100644
--- a/ui/src/templates/actions/index.ts
+++ b/ui/src/templates/actions/index.ts
@@ -6,21 +6,19 @@ import {templateToExport} from 'src/shared/utils/resourceToTemplate'
 import {staticTemplates} from 'src/templates/constants/defaultTemplates'
 
 // Types
-import {
-  TemplateSummary,
-  DocumentCreate,
-  ITaskTemplate,
-  TemplateType,
-  ITemplate,
-  ILabel as Label,
-} from '@influxdata/influx'
+import {DocumentCreate} from '@influxdata/influx'
 import {
   RemoteDataState,
   GetState,
   DashboardTemplate,
   VariableTemplate,
   Template,
+  TemplateSummary,
+  TaskTemplate,
+  Label,
+  TemplateType,
 } from 'src/types'
+import {GetDocumentsTemplateResult} from 'src/client'
 
 // Actions
 import {notify} from 'src/shared/actions/notifications'
@@ -30,6 +28,7 @@ import * as copy from 'src/shared/copy/notifications'
 
 // API
 import {client} from 'src/utils/api'
+import * as api from 'src/client'
 import {createDashboardFromTemplate} from 'src/dashboards/actions'
 import {createVariableFromTemplate} from 'src/variables/actions'
 import {createTaskFromTemplate} from 'src/tasks/actions'
@@ -112,7 +111,9 @@ const removeTemplateSummary = (templateID: string): RemoveTemplateSummary => ({
 })
 
 export const getTemplateByID = async (id: string) => {
-  const template = (await client.templates.get(id)) as Template
+  const template = (await api.getDocumentsTemplate({
+    templateID: id,
+  })) as GetDocumentsTemplateResult
   return template
 }
 
@@ -121,7 +122,7 @@ export const getTemplates = () => async (dispatch, getState: GetState) => {
     orgs: {org},
   } = getState()
   dispatch(setTemplatesStatus(RemoteDataState.Loading))
-  const items = await client.templates.getAll(org.id)
+  const items = await api.getDocumentsTemplates({query: {orgID: org.id}})
   dispatch(populateTemplateSummaries(items))
 }
 
@@ -176,7 +177,10 @@ export const updateTemplate = (id: string, props: TemplateSummary) => async (
   dispatch
 ): Promise<void> => {
   try {
-    const {meta} = await client.templates.update(id, props)
+    const {meta} = await api.putDocumentsTemplate({
+      templateID: id,
+      data: props,
+    })
 
     dispatch(setTemplateSummary(id, {...props, meta}))
     dispatch(notify(copy.updateTemplateSucceeded()))
@@ -192,7 +196,9 @@ export const convertToTemplate = (id: string) => async (
   try {
     dispatch(setExportTemplate(RemoteDataState.Loading))
 
-    const templateDocument = await client.templates.get(id)
+    const templateDocument = await api.getDocumentsTemplate({
+      templateID: id,
+    })
     const template = templateToExport(templateDocument)
 
     dispatch(setExportTemplate(RemoteDataState.Done, template))
@@ -210,7 +216,7 @@ export const deleteTemplate = (templateID: string) => async (
   dispatch
 ): Promise<void> => {
   try {
-    await client.templates.delete(templateID)
+    await api.deleteDocumentsTemplate({templateID})
     dispatch(removeTemplateSummary(templateID))
     dispatch(notify(copy.deleteTemplateSuccess()))
   } catch (e) {
@@ -257,7 +263,7 @@ const createFromTemplate = template => dispatch => {
           createDashboardFromTemplate(template as DashboardTemplate)
         )
       case TemplateType.Task:
-        return dispatch(createTaskFromTemplate(template as ITaskTemplate))
+        return dispatch(createTaskFromTemplate(template as TaskTemplate))
       case TemplateType.Variable:
         return dispatch(
           createVariableFromTemplate(template as VariableTemplate)
@@ -279,7 +285,9 @@ export const createResourceFromStaticTemplate = (name: string) => dispatch => {
 export const createResourceFromTemplate = (templateID: string) => async (
   dispatch
 ): Promise<void> => {
-  const template = await client.templates.get(templateID)
+  const template = await api.getDocumentsTemplate({
+    templateID,
+  })
   dispatch(createFromTemplate(template))
 }
 
@@ -289,7 +297,9 @@ export const addTemplateLabelsAsync = (
 ) => async (dispatch): Promise<void> => {
   try {
     await client.templates.addLabels(templateID, labels.map(l => l.id))
-    const template = await client.templates.get(templateID)
+    const template = await api.getDocumentsTemplate({
+      templateID,
+    })
 
     dispatch(setTemplateSummary(templateID, templateToSummary(template)))
   } catch (error) {
@@ -304,7 +314,9 @@ export const removeTemplateLabelsAsync = (
 ) => async (dispatch): Promise<void> => {
   try {
     await client.templates.removeLabels(templateID, labels.map(l => l.id))
-    const template = await client.templates.get(templateID)
+    const template = await api.getDocumentsTemplate({
+      templateID,
+    })
 
     dispatch(setTemplateSummary(templateID, templateToSummary(template)))
   } catch (error) {
@@ -313,7 +325,7 @@ export const removeTemplateLabelsAsync = (
   }
 }
 
-const templateToSummary = (template: ITemplate): TemplateSummary => ({
+const templateToSummary = (template: Template): TemplateSummary => ({
   id: template.id,
   meta: template.meta,
   labels: template.labels,
diff --git a/ui/src/types/labels.ts b/ui/src/types/labels.ts
index 7ce16f773ea..af0d937e7d4 100644
--- a/ui/src/types/labels.ts
+++ b/ui/src/types/labels.ts
@@ -1,5 +1,7 @@
 import {Label as GenLabel} from 'src/client'
 
+export type Labels = Label[]
+
 export interface Label extends GenLabel {
   properties: LabelProperties
 }
diff --git a/ui/src/types/tasks.ts b/ui/src/types/tasks.ts
index b1bde51269e..e1fc0080f6b 100644
--- a/ui/src/types/tasks.ts
+++ b/ui/src/types/tasks.ts
@@ -1,4 +1,6 @@
-import {Task as TaskAPI, ITask} from '@influxdata/influx'
+import {Task as TaskAPI} from '@influxdata/influx'
+import {Task as TaskBase} from 'src/client'
 
 export const TaskStatus = TaskAPI.StatusEnum
-export interface Task extends ITask {}
+
+export interface Task extends TaskBase {}
diff --git a/ui/src/types/templates.ts b/ui/src/types/templates.ts
index cafddad2aeb..7fc5bcf6bf4 100644
--- a/ui/src/types/templates.ts
+++ b/ui/src/types/templates.ts
@@ -1,11 +1,11 @@
 import {
-  ILabel,
   IVariable as Variable,
   IDashboard,
   DocumentListEntry,
   Document,
   DocumentMeta,
 } from '@influxdata/influx'
+import {Label as ILabel} from 'src/types'
 import {View, Cell} from './index'
 
 export enum TemplateType {

From 793a0249c42541e742c66a23d10712dee8cd2c62 Mon Sep 17 00:00:00 2001
From: alexpaxton <thealexpaxton@gmail.com>
Date: Fri, 20 Dec 2019 14:50:47 -0800
Subject: [PATCH 05/13] refactor: update design of task card to use icon &
 popover

---
 .../lastRunTaskStatus/LastRunTaskStatus.scss  | 70 ++++++++++++++++++
 .../lastRunTaskStatus/LastRunTaskStatus.tsx   | 73 ++++++++++++++-----
 ui/src/tasks/components/TaskCard.tsx          | 10 +--
 3 files changed, 127 insertions(+), 26 deletions(-)
 create mode 100644 ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.scss

diff --git a/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.scss b/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.scss
new file mode 100644
index 00000000000..a2d0f8f6910
--- /dev/null
+++ b/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.scss
@@ -0,0 +1,70 @@
+@import '~src/style/_influx-colors.scss';
+@import '~src/style/_variables.scss';
+
+.last-run-task-status {
+  width: 30px;
+  height: 30px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  background-color: rgba($g5-pepper, 0.5);
+  border-radius: 50%;
+  margin-top: $ix-marg-a;
+  transition: color 0.25s ease, text-shadow 0.25s ease;
+
+  &.last-run-task-status__danger {
+    color: $c-curacao;
+    
+    .cf-resource-card__disabled & {
+      color: mix($c-curacao, $g8-storm, 60%);
+    }
+
+    &.last-run-task-status__highlight {
+      color: $c-dreamsicle;
+      text-shadow: 0 0 4px $c-fire;
+    }
+  }
+
+  &.last-run-task-status__success {
+    color: $c-rainforest;
+
+    .cf-resource-card__disabled & {
+      color: mix($c-rainforest, $g8-storm, 60%);
+    }
+
+    &.last-run-task-status__highlight {
+      color: $c-honeydew;
+      text-shadow: 0 0 4px $c-viridian;
+    }
+  }
+
+  &.last-run-task-status__warning {
+    color: $c-pineapple;
+
+    .cf-resource-card__disabled & {
+      color: mix($c-pineapple, $g8-storm, 60%);
+    }
+
+    &.last-run-task-status__highlight {
+      color: $c-thunder;
+      text-shadow: 0 0 4px $c-topaz;
+    }
+  }
+}
+
+.last-run-task-status--popover .cf-popover--contents {
+  max-width: 300px;
+  padding: $ix-marg-b $ix-marg-b + $ix-marg-a;
+  font-size: 13px;
+  font-family: $code-font;
+
+  > h6 {
+    margin-top: 0;
+  }
+
+  > p {
+    margin-bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx b/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx
index 27ad933e292..3bdcf251890 100644
--- a/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx
+++ b/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx
@@ -1,5 +1,19 @@
-import React, {FC} from 'react'
-import {Icon, IconFont} from '@influxdata/clockface'
+// Libraries
+import React, {FC, useRef, useState} from 'react'
+import classnames from 'classnames'
+
+// Components
+import {
+  Icon,
+  IconFont,
+  Popover,
+  Appearance,
+  PopoverInteraction,
+  ComponentColor,
+} from '@influxdata/clockface'
+
+// Styles
+import './LastRunTaskStatus.scss'
 
 interface PassedProps {
   lastRunError?: string
@@ -7,27 +21,50 @@ interface PassedProps {
 }
 
 const LastRunTaskStatus: FC<PassedProps> = ({lastRunError, lastRunStatus}) => {
+  const triggerRef = useRef<HTMLDivElement>(null)
+  const [highlight, setHighlight] = useState<boolean>(false)
+
+  let color = ComponentColor.Success
+  let icon = IconFont.Checkmark
+  let text = 'Task ran successfully!'
+
   if (lastRunStatus === 'failed' || lastRunError !== undefined) {
-    return (
-      <li className="query-checklist--item error">
-        <Icon glyph={IconFont.Remove} />
-        {lastRunError}
-      </li>
-    )
+    color = ComponentColor.Danger
+    icon = IconFont.AlertTriangle
+    text = lastRunError
   }
+
   if (lastRunStatus === 'cancel') {
-    return (
-      <li className="query-checklist--item error">
-        <Icon glyph={IconFont.Remove} />
-        Task Cancelled
-      </li>
-    )
+    color = ComponentColor.Warning
+    icon = IconFont.Remove
+    text = 'Task Cancelled'
   }
+
+  const statusClassName = classnames('last-run-task-status', {
+    [`last-run-task-status__${color}`]: color,
+    'last-run-task-status__highlight': highlight,
+  })
+
+  const popoverContents = () => <><h6>Last Run Status:</h6><p>{text}</p></>
+
   return (
-    <li className="query-checklist--item valid">
-      <Icon glyph={IconFont.Checkmark} />
-      Task ran successfully!
-    </li>
+    <>
+      <div className={statusClassName} ref={triggerRef}>
+        <Icon glyph={icon} />
+      </div>
+      <Popover
+        className="last-run-task-status--popover"
+        enableDefaultStyles={false}
+        color={color}
+        appearance={Appearance.Outline}
+        triggerRef={triggerRef}
+        contents={popoverContents}
+        showEvent={PopoverInteraction.Hover}
+        hideEvent={PopoverInteraction.Hover}
+        onShow={() => setHighlight(true)}
+        onHide={() => setHighlight(false)}
+      />
+    </>
   )
 }
 
diff --git a/ui/src/tasks/components/TaskCard.tsx b/ui/src/tasks/components/TaskCard.tsx
index 67adac3d2e1..7e6ff3d7f0b 100644
--- a/ui/src/tasks/components/TaskCard.tsx
+++ b/ui/src/tasks/components/TaskCard.tsx
@@ -75,17 +75,11 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
         metaData={[
           <>Last completed at {task.latestCompleted}</>,
           <>{`Scheduled to run ${this.schedule}`}</>,
+        ]}
+        toggle={
           <LastRunTaskStatus
             lastRunError={task.lastRunError}
             lastRunStatus={task.lastRunStatus}
-          />,
-        ]}
-        toggle={
-          <SlideToggle
-            active={this.isTaskActive}
-            size={ComponentSize.ExtraSmall}
-            onChange={this.changeToggle}
-            testID="task-card--slide-toggle"
           />
         }
       />

From ed1f403fb06ea31d880dd88044189c75d4784ba4 Mon Sep 17 00:00:00 2001
From: alexpaxton <thealexpaxton@gmail.com>
Date: Fri, 20 Dec 2019 14:51:06 -0800
Subject: [PATCH 06/13] refactor: move task card toggle to metadata with label

---
 ui/src/tasks/components/TaskCard.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/ui/src/tasks/components/TaskCard.tsx b/ui/src/tasks/components/TaskCard.tsx
index 7e6ff3d7f0b..b3c861e33f9 100644
--- a/ui/src/tasks/components/TaskCard.tsx
+++ b/ui/src/tasks/components/TaskCard.tsx
@@ -9,6 +9,8 @@ import {
   ComponentSize,
   ResourceCard,
   IconFont,
+  InputLabel,
+  FlexBox,
 } from '@influxdata/clockface'
 import {Context} from 'src/clockface'
 import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
@@ -73,6 +75,7 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
           />
         }
         metaData={[
+          this.activeToggle,
           <>Last completed at {task.latestCompleted}</>,
           <>{`Scheduled to run ${this.schedule}`}</>,
         ]}
@@ -86,6 +89,21 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
+  private get activeToggle(): JSX.Element {
+    const labelText = this.isTaskActive ? 'Active' : 'Inactive'
+    return (
+      <FlexBox margin={ComponentSize.Small}>
+        <SlideToggle
+          active={this.isTaskActive}
+          size={ComponentSize.ExtraSmall}
+          onChange={this.changeToggle}
+          testID="task-card--slide-toggle"
+        />
+        <InputLabel active={this.isTaskActive}>{labelText}</InputLabel>
+      </FlexBox>
+    )
+  }
+
   private get contextMenu(): JSX.Element {
     const {task, onClone, onDelete, onRunTask} = this.props
 

From 5f71219e75d38f808bb031232be2e26b8e3d9e79 Mon Sep 17 00:00:00 2001
From: alexpaxton <thealexpaxton@gmail.com>
Date: Fri, 20 Dec 2019 14:55:04 -0800
Subject: [PATCH 07/13] chore: appease linter

---
 .../components/lastRunTaskStatus/LastRunTaskStatus.tsx     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx b/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx
index 3bdcf251890..a98fd9b246e 100644
--- a/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx
+++ b/ui/src/shared/components/lastRunTaskStatus/LastRunTaskStatus.tsx
@@ -45,7 +45,12 @@ const LastRunTaskStatus: FC<PassedProps> = ({lastRunError, lastRunStatus}) => {
     'last-run-task-status__highlight': highlight,
   })
 
-  const popoverContents = () => <><h6>Last Run Status:</h6><p>{text}</p></>
+  const popoverContents = () => (
+    <>
+      <h6>Last Run Status:</h6>
+      <p>{text}</p>
+    </>
+  )
 
   return (
     <>

From c535103cfa4f4a12887ac8ad1784de2163592e63 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Mon, 23 Dec 2019 06:19:22 -0800
Subject: [PATCH 08/13] feat(ui): need to revisit template typing issues

---
 ui/src/tasks/actions/index.ts                | 65 +++++++++----
 ui/src/tasks/components/TaskCard.tsx         | 18 ++--
 ui/src/tasks/components/TaskRunsPage.tsx     |  3 +-
 ui/src/tasks/components/TasksList.tsx        |  8 +-
 ui/src/tasks/containers/TasksPage.tsx        | 20 ++--
 ui/src/templates/actions/index.ts            | 97 ++++++++++++++------
 ui/src/templates/components/TemplateCard.tsx | 20 ++--
 ui/src/types/templates.ts                    |  2 +-
 8 files changed, 149 insertions(+), 84 deletions(-)

diff --git a/ui/src/tasks/actions/index.ts b/ui/src/tasks/actions/index.ts
index c5fa8e6b606..9ae1c20f2d4 100644
--- a/ui/src/tasks/actions/index.ts
+++ b/ui/src/tasks/actions/index.ts
@@ -5,6 +5,7 @@ import _ from 'lodash'
 // APIs
 import {client} from 'src/utils/api'
 import {notify} from 'src/shared/actions/notifications'
+import * as api from 'src/client'
 import {
   taskNotCreated,
   tasksFetchFailed,
@@ -240,7 +241,14 @@ export const getTasks = () => async (
       orgs: {org},
     } = getState()
 
-    const tasks = await client.tasks.getAll(org.id)
+    const resp = await api.getTasks({query: {orgID: org.id}})
+    if (resp.status !== 200) {
+      throw new Error("these aren't the tasks you're looking for")
+    }
+
+    const {
+      data: {tasks},
+    } = resp
 
     dispatch(setTasks(tasks))
     dispatch(setTasksStatus(RemoteDataState.Done))
@@ -252,29 +260,35 @@ export const getTasks = () => async (
   }
 }
 
-export const addTaskLabelsAsync = (taskID: string, labels: Label[]) => async (
+export const addTaskLabelAsync = (taskID: string, label: Label) => async (
   dispatch
 ): Promise<void> => {
   try {
-    await client.tasks.addLabels(taskID, labels.map(l => l.id))
-    const task = await client.tasks.get(taskID)
+    await api.postTasksLabel({taskID, data: {labelID: label.id}}) // todo: fix
+    const taskResp = await api.getTask({taskID})
 
-    dispatch(updateTask(task))
+    if (taskResp.status !== 200) {
+      throw new Error('An error occurred trying to add a label to your task')
+    }
+
+    dispatch(updateTask(taskResp.data))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.addTaskLabelFailed()))
   }
 }
 
-export const removeTaskLabelsAsync = (
-  taskID: string,
-  labels: Label[]
-) => async (dispatch): Promise<void> => {
+export const removeTaskLabelAsync = (taskID: string, label: Label) => async (
+  dispatch
+): Promise<void> => {
   try {
-    await client.tasks.removeLabels(taskID, labels.map(l => l.id))
-    const task = await client.tasks.get(taskID)
+    await api.deleteTasksLabel({taskID, labelID: label.id})
+    const resp = await api.getTask({taskID})
+    if (resp.status !== 200) {
+      throw new Error('An error occurred while removing a label from the task')
+    }
 
-    dispatch(updateTask(task))
+    dispatch(updateTask(resp.data))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.removeTaskLabelFailed()))
@@ -283,7 +297,7 @@ export const removeTaskLabelsAsync = (
 
 export const updateTaskStatus = (task: Task) => async dispatch => {
   try {
-    await client.tasks.updateStatus(task.id, task.status)
+    await api.patchTask({taskID: task.id, data: {status: task.status}})
 
     dispatch(getTasks())
     dispatch(notify(taskUpdateSuccess()))
@@ -296,7 +310,7 @@ export const updateTaskStatus = (task: Task) => async dispatch => {
 
 export const updateTaskName = (task: Task) => async dispatch => {
   try {
-    await client.tasks.update(task.id, task)
+    await api.patchTask({taskID: task.id, data: task})
 
     dispatch(getTasks())
     dispatch(notify(taskUpdateSuccess()))
@@ -342,8 +356,12 @@ export const selectTaskByID = (id: string) => async (
   dispatch
 ): Promise<void> => {
   try {
-    const task = await client.tasks.get(id)
-    dispatch(setCurrentTask(task))
+    const resp = await api.getTask({taskID: id})
+    if (resp.status !== 200) {
+      throw new Error('An error occurred while trying to retrieve the task')
+    }
+
+    dispatch(setCurrentTask(resp.data))
   } catch (e) {
     console.error(e)
     dispatch(goToTasks())
@@ -356,8 +374,12 @@ export const setAllTaskOptionsByID = (taskID: string) => async (
   dispatch
 ): Promise<void> => {
   try {
-    const task = await client.tasks.get(taskID)
-    dispatch(setAllTaskOptions(task))
+    const resp = await api.getTask({taskID})
+    if (resp.status !== 200) {
+      throw new Error('An error occurred while setting the task options')
+    }
+
+    dispatch(setAllTaskOptions(resp.data))
   } catch (e) {
     console.error(e)
     dispatch(goToTasks())
@@ -512,8 +534,11 @@ export const convertToTemplate = (taskID: string) => async (
 ): Promise<void> => {
   try {
     dispatch(setExportTemplate(RemoteDataState.Loading))
-    const task = await client.tasks.get(taskID)
-    const taskTemplate = taskToTemplate(task)
+    const resp = await api.getTask({taskID})
+    if (resp.status !== 200) {
+      throw new Error('An error occurred converting the task into a template')
+    }
+    const taskTemplate = taskToTemplate(resp.data)
 
     dispatch(setExportTemplate(RemoteDataState.Done, taskTemplate))
   } catch (error) {
diff --git a/ui/src/tasks/components/TaskCard.tsx b/ui/src/tasks/components/TaskCard.tsx
index b3c861e33f9..0a3e39d5459 100644
--- a/ui/src/tasks/components/TaskCard.tsx
+++ b/ui/src/tasks/components/TaskCard.tsx
@@ -17,7 +17,7 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 import LastRunTaskStatus from 'src/shared/components/lastRunTaskStatus/LastRunTaskStatus'
 
 // Actions
-import {addTaskLabelsAsync, removeTaskLabelsAsync} from 'src/tasks/actions'
+import {addTaskLabelAsync, removeTaskLabelAsync} from 'src/tasks/actions'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
 // Selectors
@@ -46,8 +46,8 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  onAddTaskLabels: typeof addTaskLabelsAsync
-  onRemoveTaskLabels: typeof removeTaskLabelsAsync
+  onAddTaskLabel: typeof addTaskLabelAsync
+  onRemoveTaskLabel: typeof removeTaskLabelAsync
   onCreateLabel: typeof createLabelAsync
 }
 
@@ -181,15 +181,15 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
   }
 
   private handleAddLabel = (label: Label) => {
-    const {task, onAddTaskLabels} = this.props
+    const {task, onAddTaskLabel} = this.props
 
-    onAddTaskLabels(task.id, [label])
+    onAddTaskLabel(task.id, label)
   }
 
   private handleRemoveLabel = (label: Label) => {
-    const {task, onRemoveTaskLabels} = this.props
+    const {task, onRemoveTaskLabel} = this.props
 
-    onRemoveTaskLabels(task.id, [label])
+    onRemoveTaskLabel(task.id, label)
   }
 
   private handleCreateLabel = (label: Label) => {
@@ -237,8 +237,8 @@ const mstp = ({labels}: AppState): StateProps => {
 
 const mdtp: DispatchProps = {
   onCreateLabel: createLabelAsync,
-  onAddTaskLabels: addTaskLabelsAsync,
-  onRemoveTaskLabels: removeTaskLabelsAsync,
+  onAddTaskLabel: addTaskLabelAsync,
+  onRemoveTaskLabel: removeTaskLabelAsync,
 }
 
 export default connect<StateProps, DispatchProps, PassedProps>(
diff --git a/ui/src/tasks/components/TaskRunsPage.tsx b/ui/src/tasks/components/TaskRunsPage.tsx
index 97688d4df64..acb36806f23 100644
--- a/ui/src/tasks/components/TaskRunsPage.tsx
+++ b/ui/src/tasks/components/TaskRunsPage.tsx
@@ -12,7 +12,7 @@ import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
 // Types
 import {AppState} from 'src/types'
 import {RemoteDataState} from 'src/types'
-import {Run as APIRun, Task} from '@influxdata/influx'
+import {Run as APIRun} from '@influxdata/influx'
 import {
   SpinnerContainer,
   TechnoSpinner,
@@ -28,6 +28,7 @@ import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 
 // Types
 import {SortTypes} from 'src/shared/utils/sort'
+import {Task} from 'src/types'
 
 export interface Run extends APIRun {
   duration: string
diff --git a/ui/src/tasks/components/TasksList.tsx b/ui/src/tasks/components/TasksList.tsx
index 605d0f4a90a..2f5652f1b74 100644
--- a/ui/src/tasks/components/TasksList.tsx
+++ b/ui/src/tasks/components/TasksList.tsx
@@ -14,8 +14,8 @@ import {SortTypes} from 'src/shared/utils/sort'
 import {Sort} from '@influxdata/clockface'
 
 import {
-  addTaskLabelsAsync,
-  removeTaskLabelsAsync,
+  addTaskLabelAsync,
+  removeTaskLabelAsync,
   runTask,
 } from 'src/tasks/actions'
 import {checkTaskLimits as checkTaskLimitsAction} from 'src/cloud/actions/limits'
@@ -33,8 +33,8 @@ interface Props {
   onClone: (task: Task) => void
   onFilterChange: (searchTerm: string) => void
   totalCount: number
-  onRemoveTaskLabels: typeof removeTaskLabelsAsync
-  onAddTaskLabels: typeof addTaskLabelsAsync
+  onRemoveTaskLabel: typeof removeTaskLabelAsync
+  onAddTaskLabel: typeof addTaskLabelAsync
   onRunTask: typeof runTask
   onUpdate: (task: Task) => void
   filterComponent?: JSX.Element
diff --git a/ui/src/tasks/containers/TasksPage.tsx b/ui/src/tasks/containers/TasksPage.tsx
index 6c89a31d252..36794bdc76a 100644
--- a/ui/src/tasks/containers/TasksPage.tsx
+++ b/ui/src/tasks/containers/TasksPage.tsx
@@ -26,8 +26,8 @@ import {
   cloneTask,
   setSearchTerm as setSearchTermAction,
   setShowInactive as setShowInactiveAction,
-  addTaskLabelsAsync,
-  removeTaskLabelsAsync,
+  addTaskLabelAsync,
+  removeTaskLabelAsync,
   runTask,
 } from 'src/tasks/actions'
 import {
@@ -54,8 +54,8 @@ interface ConnectedDispatchProps {
   selectTask: typeof selectTask
   setSearchTerm: typeof setSearchTermAction
   setShowInactive: typeof setShowInactiveAction
-  onAddTaskLabels: typeof addTaskLabelsAsync
-  onRemoveTaskLabels: typeof removeTaskLabelsAsync
+  onAddTaskLabel: typeof addTaskLabelAsync
+  onRemoveTaskLabel: typeof removeTaskLabelAsync
   onRunTask: typeof runTask
   checkTaskLimits: typeof checkTasksLimitsAction
 }
@@ -110,8 +110,8 @@ class TasksPage extends PureComponent<Props, State> {
       searchTerm,
       setShowInactive,
       showInactive,
-      onAddTaskLabels,
-      onRemoveTaskLabels,
+      onAddTaskLabel,
+      onRemoveTaskLabel,
       onRunTask,
       checkTaskLimits,
       limitStatus,
@@ -151,8 +151,8 @@ class TasksPage extends PureComponent<Props, State> {
                       onCreate={this.handleCreateTask}
                       onClone={this.handleClone}
                       onSelect={this.props.selectTask}
-                      onAddTaskLabels={onAddTaskLabels}
-                      onRemoveTaskLabels={onRemoveTaskLabels}
+                      onAddTaskLabel={onAddTaskLabel}
+                      onRemoveTaskLabel={onRemoveTaskLabel}
                       onRunTask={onRunTask}
                       onFilterChange={setSearchTerm}
                       filterComponent={this.search}
@@ -303,8 +303,8 @@ const mdtp: ConnectedDispatchProps = {
   cloneTask,
   setSearchTerm: setSearchTermAction,
   setShowInactive: setShowInactiveAction,
-  onRemoveTaskLabels: removeTaskLabelsAsync,
-  onAddTaskLabels: addTaskLabelsAsync,
+  onRemoveTaskLabel: removeTaskLabelAsync,
+  onAddTaskLabel: addTaskLabelAsync,
   onRunTask: runTask,
   checkTaskLimits: checkTasksLimitsAction,
 }
diff --git a/ui/src/templates/actions/index.ts b/ui/src/templates/actions/index.ts
index de6f9ea7f09..9b868dd001b 100644
--- a/ui/src/templates/actions/index.ts
+++ b/ui/src/templates/actions/index.ts
@@ -18,7 +18,6 @@ import {
   Label,
   TemplateType,
 } from 'src/types'
-import {GetDocumentsTemplateResult} from 'src/client'
 
 // Actions
 import {notify} from 'src/shared/actions/notifications'
@@ -111,19 +110,37 @@ const removeTemplateSummary = (templateID: string): RemoveTemplateSummary => ({
 })
 
 export const getTemplateByID = async (id: string) => {
-  const template = (await api.getDocumentsTemplate({
-    templateID: id,
-  })) as GetDocumentsTemplateResult
-  return template
+  try {
+    const resp = await api.getDocumentsTemplate({
+      templateID: id,
+    })
+    if (resp.status !== 200) {
+      throw new Error('There was an error retrieving the specific template')
+    }
+    return resp.data
+  } catch (e) {
+    console.error(e)
+    return e
+  }
 }
 
 export const getTemplates = () => async (dispatch, getState: GetState) => {
   const {
     orgs: {org},
   } = getState()
-  dispatch(setTemplatesStatus(RemoteDataState.Loading))
-  const items = await api.getDocumentsTemplates({query: {orgID: org.id}})
-  dispatch(populateTemplateSummaries(items))
+  try {
+    dispatch(setTemplatesStatus(RemoteDataState.Loading))
+    const resp = await api.getDocumentsTemplates({query: {orgID: org.id}})
+    if (resp.status !== 200) {
+      throw new Error(
+        'There was an error creating getting the template results'
+      )
+    }
+    const items = resp.data as TemplateSummary[]
+    dispatch(populateTemplateSummaries(items))
+  } catch (e) {
+    console.error(e)
+  }
 }
 
 export const createTemplate = (template: DocumentCreate) => async (
@@ -177,12 +194,14 @@ export const updateTemplate = (id: string, props: TemplateSummary) => async (
   dispatch
 ): Promise<void> => {
   try {
-    const {meta} = await api.putDocumentsTemplate({
+    const resp = await api.putDocumentsTemplate({
       templateID: id,
       data: props,
     })
-
-    dispatch(setTemplateSummary(id, {...props, meta}))
+    if (resp.status !== 200) {
+      throw new Error("Couldn't update the template with the given ID")
+    }
+    dispatch(setTemplateSummary(id, {...props, meta: resp.data.meta}))
     dispatch(notify(copy.updateTemplateSucceeded()))
   } catch (e) {
     console.error(e)
@@ -196,10 +215,13 @@ export const convertToTemplate = (id: string) => async (
   try {
     dispatch(setExportTemplate(RemoteDataState.Loading))
 
-    const templateDocument = await api.getDocumentsTemplate({
+    const resp = await api.getDocumentsTemplate({
       templateID: id,
     })
-    const template = templateToExport(templateDocument)
+    if (resp.status !== 200) {
+      throw new Error("Couldn't convert the template based on the given ID")
+    }
+    const template = templateToExport(resp.data) // TODO: fix typing issue
 
     dispatch(setExportTemplate(RemoteDataState.Done, template))
   } catch (error) {
@@ -285,40 +307,57 @@ export const createResourceFromStaticTemplate = (name: string) => dispatch => {
 export const createResourceFromTemplate = (templateID: string) => async (
   dispatch
 ): Promise<void> => {
-  const template = await api.getDocumentsTemplate({
-    templateID,
-  })
-  dispatch(createFromTemplate(template))
+  try {
+    const resp = await api.getDocumentsTemplate({
+      templateID,
+    })
+    if (resp.status !== 200) {
+      throw new Error('There was an error retrieving the specific template')
+    }
+    dispatch(createFromTemplate(resp.data))
+  } catch (e) {
+    console.error(e)
+  }
 }
 
-export const addTemplateLabelsAsync = (
+export const addTemplateLabelAsync = (
   templateID: string,
-  labels: Label[]
+  label: Label
 ) => async (dispatch): Promise<void> => {
   try {
-    await client.templates.addLabels(templateID, labels.map(l => l.id))
-    const template = await api.getDocumentsTemplate({
+    await api.postDocumentsTemplatesLabel({
       templateID,
+      data: {labelID: label.id},
     })
-
-    dispatch(setTemplateSummary(templateID, templateToSummary(template)))
+    const resp = await api.getDocumentsTemplate({
+      templateID,
+    })
+    if (resp.status !== 200) {
+      throw new Error('There was an error retrieving the specific template')
+    }
+    dispatch(setTemplateSummary(templateID, templateToSummary(resp.data)))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.addTemplateLabelFailed()))
   }
 }
 
-export const removeTemplateLabelsAsync = (
+export const removeTemplateLabelAsync = (
   templateID: string,
-  labels: Label[]
+  label: Label
 ) => async (dispatch): Promise<void> => {
   try {
-    await client.templates.removeLabels(templateID, labels.map(l => l.id))
-    const template = await api.getDocumentsTemplate({
+    await api.deleteDocumentsTemplatesLabel({
       templateID,
+      labelID: label.id,
     })
-
-    dispatch(setTemplateSummary(templateID, templateToSummary(template)))
+    const resp = await api.getDocumentsTemplate({
+      templateID,
+    })
+    if (resp.status !== 200) {
+      throw new Error('There was an error retrieving the specific template')
+    }
+    dispatch(setTemplateSummary(templateID, templateToSummary(resp.data)))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.removeTemplateLabelFailed()))
diff --git a/ui/src/templates/components/TemplateCard.tsx b/ui/src/templates/components/TemplateCard.tsx
index bdaa93904e1..9a7a530282e 100644
--- a/ui/src/templates/components/TemplateCard.tsx
+++ b/ui/src/templates/components/TemplateCard.tsx
@@ -22,8 +22,8 @@ import {
   cloneTemplate,
   updateTemplate,
   createResourceFromTemplate,
-  removeTemplateLabelsAsync,
-  addTemplateLabelsAsync,
+  removeTemplateLabelAsync,
+  addTemplateLabelAsync,
 } from 'src/templates/actions'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
@@ -48,8 +48,8 @@ interface DispatchProps {
   onClone: typeof cloneTemplate
   onUpdate: typeof updateTemplate
   onCreateFromTemplate: typeof createResourceFromTemplate
-  onAddTemplateLabels: typeof addTemplateLabelsAsync
-  onRemoveTemplateLabels: typeof removeTemplateLabelsAsync
+  onAddTemplateLabel: typeof addTemplateLabelAsync
+  onRemoveTemplateLabel: typeof removeTemplateLabelAsync
   onCreateLabel: typeof createLabelAsync
 }
 
@@ -204,15 +204,15 @@ class TemplateCard extends PureComponent<Props & WithRouterProps> {
   }
 
   private handleAddLabel = (label: ILabel): void => {
-    const {template, onAddTemplateLabels} = this.props
+    const {template, onAddTemplateLabel} = this.props
 
-    onAddTemplateLabels(template.id, [label])
+    onAddTemplateLabel(template.id, label)
   }
 
   private handleRemoveLabel = (label: ILabel): void => {
-    const {template, onRemoveTemplateLabels} = this.props
+    const {template, onRemoveTemplateLabel} = this.props
 
-    onRemoveTemplateLabels(template.id, [label])
+    onRemoveTemplateLabel(template.id, label)
   }
 
   private handleCreateLabel = (label: ILabel) => {
@@ -232,8 +232,8 @@ const mdtp: DispatchProps = {
   onClone: cloneTemplate,
   onUpdate: updateTemplate,
   onCreateFromTemplate: createResourceFromTemplate,
-  onAddTemplateLabels: addTemplateLabelsAsync,
-  onRemoveTemplateLabels: removeTemplateLabelsAsync,
+  onAddTemplateLabel: addTemplateLabelAsync,
+  onRemoveTemplateLabel: removeTemplateLabelAsync,
   onCreateLabel: createLabelAsync,
 }
 
diff --git a/ui/src/types/templates.ts b/ui/src/types/templates.ts
index 7fc5bcf6bf4..e08ce57313a 100644
--- a/ui/src/types/templates.ts
+++ b/ui/src/types/templates.ts
@@ -1,10 +1,10 @@
 import {
   IVariable as Variable,
   IDashboard,
-  DocumentListEntry,
   Document,
   DocumentMeta,
 } from '@influxdata/influx'
+import {DocumentListEntry} from 'src/client'
 import {Label as ILabel} from 'src/types'
 import {View, Cell} from './index'
 

From 72a05b6dfbf7caa3b1003b9eef486438293893c2 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Mon, 23 Dec 2019 06:41:06 -0800
Subject: [PATCH 09/13] fix(ui): resolved non-template linter type errors

---
 ui/src/labels/selectors/index.ts             |   4 +-
 ui/src/tasks/actions/index.ts                |  27 +++--
 ui/src/templates/actions/index.ts            | 121 ++++++-------------
 ui/src/templates/components/TemplateCard.tsx |  20 +--
 ui/src/types/tasks.ts                        |   5 +-
 5 files changed, 68 insertions(+), 109 deletions(-)

diff --git a/ui/src/labels/selectors/index.ts b/ui/src/labels/selectors/index.ts
index 86ebd05cb8b..3663845aa44 100644
--- a/ui/src/labels/selectors/index.ts
+++ b/ui/src/labels/selectors/index.ts
@@ -1,5 +1,5 @@
-import {Label} from 'src/types'
+import {Labels} from 'src/types'
 import {INFLUX_LABEL_PREFIX} from 'src/labels/constants'
 
-export const viewableLabels = (labels: Label[]) =>
+export const viewableLabels = (labels: Labels) =>
   labels.filter(l => !l.name.startsWith(INFLUX_LABEL_PREFIX))
diff --git a/ui/src/tasks/actions/index.ts b/ui/src/tasks/actions/index.ts
index 9ae1c20f2d4..13aec2e3ab5 100644
--- a/ui/src/tasks/actions/index.ts
+++ b/ui/src/tasks/actions/index.ts
@@ -246,9 +246,7 @@ export const getTasks = () => async (
       throw new Error("these aren't the tasks you're looking for")
     }
 
-    const {
-      data: {tasks},
-    } = resp
+    const tasks = resp.data.tasks as Task[]
 
     dispatch(setTasks(tasks))
     dispatch(setTasksStatus(RemoteDataState.Done))
@@ -265,13 +263,15 @@ export const addTaskLabelAsync = (taskID: string, label: Label) => async (
 ): Promise<void> => {
   try {
     await api.postTasksLabel({taskID, data: {labelID: label.id}}) // todo: fix
-    const taskResp = await api.getTask({taskID})
+    const resp = await api.getTask({taskID})
 
-    if (taskResp.status !== 200) {
+    if (resp.status !== 200) {
       throw new Error('An error occurred trying to add a label to your task')
     }
 
-    dispatch(updateTask(taskResp.data))
+    const task = resp.data as Task
+
+    dispatch(updateTask(task))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.addTaskLabelFailed()))
@@ -288,7 +288,9 @@ export const removeTaskLabelAsync = (taskID: string, label: Label) => async (
       throw new Error('An error occurred while removing a label from the task')
     }
 
-    dispatch(updateTask(resp.data))
+    const task = resp.data as Task
+
+    dispatch(updateTask(task))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.removeTaskLabelFailed()))
@@ -361,7 +363,9 @@ export const selectTaskByID = (id: string) => async (
       throw new Error('An error occurred while trying to retrieve the task')
     }
 
-    dispatch(setCurrentTask(resp.data))
+    const task = resp.data as Task
+
+    dispatch(setCurrentTask(task))
   } catch (e) {
     console.error(e)
     dispatch(goToTasks())
@@ -379,7 +383,9 @@ export const setAllTaskOptionsByID = (taskID: string) => async (
       throw new Error('An error occurred while setting the task options')
     }
 
-    dispatch(setAllTaskOptions(resp.data))
+    const task = resp.data as Task
+
+    dispatch(setAllTaskOptions(task))
   } catch (e) {
     console.error(e)
     dispatch(goToTasks())
@@ -538,7 +544,8 @@ export const convertToTemplate = (taskID: string) => async (
     if (resp.status !== 200) {
       throw new Error('An error occurred converting the task into a template')
     }
-    const taskTemplate = taskToTemplate(resp.data)
+    const task = resp.data as Task
+    const taskTemplate = taskToTemplate(task)
 
     dispatch(setExportTemplate(RemoteDataState.Done, taskTemplate))
   } catch (error) {
diff --git a/ui/src/templates/actions/index.ts b/ui/src/templates/actions/index.ts
index 9b868dd001b..f31bbefb643 100644
--- a/ui/src/templates/actions/index.ts
+++ b/ui/src/templates/actions/index.ts
@@ -6,17 +6,20 @@ import {templateToExport} from 'src/shared/utils/resourceToTemplate'
 import {staticTemplates} from 'src/templates/constants/defaultTemplates'
 
 // Types
-import {DocumentCreate} from '@influxdata/influx'
+import {
+  TemplateSummary,
+  DocumentCreate,
+  ITaskTemplate,
+  TemplateType,
+  ITemplate,
+  ILabel as Label,
+} from '@influxdata/influx'
 import {
   RemoteDataState,
   GetState,
   DashboardTemplate,
   VariableTemplate,
   Template,
-  TemplateSummary,
-  TaskTemplate,
-  Label,
-  TemplateType,
 } from 'src/types'
 
 // Actions
@@ -27,7 +30,6 @@ import * as copy from 'src/shared/copy/notifications'
 
 // API
 import {client} from 'src/utils/api'
-import * as api from 'src/client'
 import {createDashboardFromTemplate} from 'src/dashboards/actions'
 import {createVariableFromTemplate} from 'src/variables/actions'
 import {createTaskFromTemplate} from 'src/tasks/actions'
@@ -110,37 +112,17 @@ const removeTemplateSummary = (templateID: string): RemoveTemplateSummary => ({
 })
 
 export const getTemplateByID = async (id: string) => {
-  try {
-    const resp = await api.getDocumentsTemplate({
-      templateID: id,
-    })
-    if (resp.status !== 200) {
-      throw new Error('There was an error retrieving the specific template')
-    }
-    return resp.data
-  } catch (e) {
-    console.error(e)
-    return e
-  }
+  const template = (await client.templates.get(id)) as Template
+  return template
 }
 
 export const getTemplates = () => async (dispatch, getState: GetState) => {
   const {
     orgs: {org},
   } = getState()
-  try {
-    dispatch(setTemplatesStatus(RemoteDataState.Loading))
-    const resp = await api.getDocumentsTemplates({query: {orgID: org.id}})
-    if (resp.status !== 200) {
-      throw new Error(
-        'There was an error creating getting the template results'
-      )
-    }
-    const items = resp.data as TemplateSummary[]
-    dispatch(populateTemplateSummaries(items))
-  } catch (e) {
-    console.error(e)
-  }
+  dispatch(setTemplatesStatus(RemoteDataState.Loading))
+  const items = await client.templates.getAll(org.id)
+  dispatch(populateTemplateSummaries(items))
 }
 
 export const createTemplate = (template: DocumentCreate) => async (
@@ -194,14 +176,9 @@ export const updateTemplate = (id: string, props: TemplateSummary) => async (
   dispatch
 ): Promise<void> => {
   try {
-    const resp = await api.putDocumentsTemplate({
-      templateID: id,
-      data: props,
-    })
-    if (resp.status !== 200) {
-      throw new Error("Couldn't update the template with the given ID")
-    }
-    dispatch(setTemplateSummary(id, {...props, meta: resp.data.meta}))
+    const {meta} = await client.templates.update(id, props)
+
+    dispatch(setTemplateSummary(id, {...props, meta}))
     dispatch(notify(copy.updateTemplateSucceeded()))
   } catch (e) {
     console.error(e)
@@ -215,13 +192,8 @@ export const convertToTemplate = (id: string) => async (
   try {
     dispatch(setExportTemplate(RemoteDataState.Loading))
 
-    const resp = await api.getDocumentsTemplate({
-      templateID: id,
-    })
-    if (resp.status !== 200) {
-      throw new Error("Couldn't convert the template based on the given ID")
-    }
-    const template = templateToExport(resp.data) // TODO: fix typing issue
+    const templateDocument = await client.templates.get(id)
+    const template = templateToExport(templateDocument)
 
     dispatch(setExportTemplate(RemoteDataState.Done, template))
   } catch (error) {
@@ -238,7 +210,7 @@ export const deleteTemplate = (templateID: string) => async (
   dispatch
 ): Promise<void> => {
   try {
-    await api.deleteDocumentsTemplate({templateID})
+    await client.templates.delete(templateID)
     dispatch(removeTemplateSummary(templateID))
     dispatch(notify(copy.deleteTemplateSuccess()))
   } catch (e) {
@@ -285,7 +257,7 @@ const createFromTemplate = template => dispatch => {
           createDashboardFromTemplate(template as DashboardTemplate)
         )
       case TemplateType.Task:
-        return dispatch(createTaskFromTemplate(template as TaskTemplate))
+        return dispatch(createTaskFromTemplate(template as ITaskTemplate))
       case TemplateType.Variable:
         return dispatch(
           createVariableFromTemplate(template as VariableTemplate)
@@ -307,64 +279,41 @@ export const createResourceFromStaticTemplate = (name: string) => dispatch => {
 export const createResourceFromTemplate = (templateID: string) => async (
   dispatch
 ): Promise<void> => {
-  try {
-    const resp = await api.getDocumentsTemplate({
-      templateID,
-    })
-    if (resp.status !== 200) {
-      throw new Error('There was an error retrieving the specific template')
-    }
-    dispatch(createFromTemplate(resp.data))
-  } catch (e) {
-    console.error(e)
-  }
+  const template = await client.templates.get(templateID)
+  dispatch(createFromTemplate(template))
 }
 
-export const addTemplateLabelAsync = (
+export const addTemplateLabelsAsync = (
   templateID: string,
-  label: Label
+  labels: Label[]
 ) => async (dispatch): Promise<void> => {
   try {
-    await api.postDocumentsTemplatesLabel({
-      templateID,
-      data: {labelID: label.id},
-    })
-    const resp = await api.getDocumentsTemplate({
-      templateID,
-    })
-    if (resp.status !== 200) {
-      throw new Error('There was an error retrieving the specific template')
-    }
-    dispatch(setTemplateSummary(templateID, templateToSummary(resp.data)))
+    await client.templates.addLabels(templateID, labels.map(l => l.id))
+    const template = await client.templates.get(templateID)
+
+    dispatch(setTemplateSummary(templateID, templateToSummary(template)))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.addTemplateLabelFailed()))
   }
 }
 
-export const removeTemplateLabelAsync = (
+export const removeTemplateLabelsAsync = (
   templateID: string,
-  label: Label
+  labels: Label[]
 ) => async (dispatch): Promise<void> => {
   try {
-    await api.deleteDocumentsTemplatesLabel({
-      templateID,
-      labelID: label.id,
-    })
-    const resp = await api.getDocumentsTemplate({
-      templateID,
-    })
-    if (resp.status !== 200) {
-      throw new Error('There was an error retrieving the specific template')
-    }
-    dispatch(setTemplateSummary(templateID, templateToSummary(resp.data)))
+    await client.templates.removeLabels(templateID, labels.map(l => l.id))
+    const template = await client.templates.get(templateID)
+
+    dispatch(setTemplateSummary(templateID, templateToSummary(template)))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.removeTemplateLabelFailed()))
   }
 }
 
-const templateToSummary = (template: Template): TemplateSummary => ({
+const templateToSummary = (template: ITemplate): TemplateSummary => ({
   id: template.id,
   meta: template.meta,
   labels: template.labels,
diff --git a/ui/src/templates/components/TemplateCard.tsx b/ui/src/templates/components/TemplateCard.tsx
index 9a7a530282e..bdaa93904e1 100644
--- a/ui/src/templates/components/TemplateCard.tsx
+++ b/ui/src/templates/components/TemplateCard.tsx
@@ -22,8 +22,8 @@ import {
   cloneTemplate,
   updateTemplate,
   createResourceFromTemplate,
-  removeTemplateLabelAsync,
-  addTemplateLabelAsync,
+  removeTemplateLabelsAsync,
+  addTemplateLabelsAsync,
 } from 'src/templates/actions'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
@@ -48,8 +48,8 @@ interface DispatchProps {
   onClone: typeof cloneTemplate
   onUpdate: typeof updateTemplate
   onCreateFromTemplate: typeof createResourceFromTemplate
-  onAddTemplateLabel: typeof addTemplateLabelAsync
-  onRemoveTemplateLabel: typeof removeTemplateLabelAsync
+  onAddTemplateLabels: typeof addTemplateLabelsAsync
+  onRemoveTemplateLabels: typeof removeTemplateLabelsAsync
   onCreateLabel: typeof createLabelAsync
 }
 
@@ -204,15 +204,15 @@ class TemplateCard extends PureComponent<Props & WithRouterProps> {
   }
 
   private handleAddLabel = (label: ILabel): void => {
-    const {template, onAddTemplateLabel} = this.props
+    const {template, onAddTemplateLabels} = this.props
 
-    onAddTemplateLabel(template.id, label)
+    onAddTemplateLabels(template.id, [label])
   }
 
   private handleRemoveLabel = (label: ILabel): void => {
-    const {template, onRemoveTemplateLabel} = this.props
+    const {template, onRemoveTemplateLabels} = this.props
 
-    onRemoveTemplateLabel(template.id, label)
+    onRemoveTemplateLabels(template.id, [label])
   }
 
   private handleCreateLabel = (label: ILabel) => {
@@ -232,8 +232,8 @@ const mdtp: DispatchProps = {
   onClone: cloneTemplate,
   onUpdate: updateTemplate,
   onCreateFromTemplate: createResourceFromTemplate,
-  onAddTemplateLabel: addTemplateLabelAsync,
-  onRemoveTemplateLabel: removeTemplateLabelAsync,
+  onAddTemplateLabels: addTemplateLabelsAsync,
+  onRemoveTemplateLabels: removeTemplateLabelsAsync,
   onCreateLabel: createLabelAsync,
 }
 
diff --git a/ui/src/types/tasks.ts b/ui/src/types/tasks.ts
index e1fc0080f6b..dfc97e52c18 100644
--- a/ui/src/types/tasks.ts
+++ b/ui/src/types/tasks.ts
@@ -1,6 +1,9 @@
 import {Task as TaskAPI} from '@influxdata/influx'
 import {Task as TaskBase} from 'src/client'
+import {Labels} from 'src/types'
 
 export const TaskStatus = TaskAPI.StatusEnum
 
-export interface Task extends TaskBase {}
+export interface Task extends TaskBase {
+  labels: Labels
+}

From 8afa48fd09ff510ad461f2e05e584a7ef2583306 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Mon, 23 Dec 2019 14:48:58 -0800
Subject: [PATCH 10/13] feat(ui): completed feature

---
 ui/src/alerting/actions/checks.ts             |   2 +-
 .../actions/notifications/endpoints.ts        |   2 +-
 .../alerting/actions/notifications/rules.ts   |   2 +-
 ui/src/alerting/components/CheckCard.tsx      |   9 +-
 .../components/endpoints/EndpointCard.tsx     |  10 +-
 .../components/notifications/RuleCard.tsx     |  12 +-
 ui/src/dashboards/actions/index.ts            |  26 +--
 .../components/DashboardExportOverlay.tsx     |   4 +-
 .../dashboard_index/DashboardCard.tsx         |   5 +-
 .../VariablesControlBar.tsx                   |   2 +-
 ui/src/dataLoaders/actions/dataLoaders.ts     |  59 +++++--
 ui/src/labels/actions/index.ts                |  15 +-
 .../labels/components/CreateLabelOverlay.tsx  |   6 +-
 ui/src/labels/components/LabelCard.tsx        |   2 +-
 ui/src/labels/components/LabelContextMenu.tsx |   2 +-
 ui/src/labels/components/LabelList.tsx        |   3 +-
 ui/src/labels/components/LabelsTab.tsx        |   6 +-
 .../labels/components/UpdateLabelOverlay.tsx  |   2 +-
 ui/src/labels/constants/index.ts              |   4 +-
 ui/src/labels/reducers/index.ts               |   2 +-
 ui/src/labels/selectors/index.ts              |   2 +-
 ui/src/shared/components/ExportOverlay.tsx    |   3 +-
 ui/src/shared/components/ViewOverlay.tsx      |   3 +-
 .../inlineLabels/InlineLabelPopover.tsx       |   2 +-
 .../components/inlineLabels/InlineLabels.tsx  |   2 +-
 .../inlineLabels/InlineLabelsEditor.tsx       |   2 +-
 .../inlineLabels/InlineLabelsList.tsx         |   2 +-
 ui/src/shared/utils/filterUnusedVars.ts       |   2 +-
 .../shared/utils/mocks/resourceToTemplate.ts  |   4 +-
 ui/src/shared/utils/resourceToTemplate.ts     |  14 +-
 ui/src/tasks/actions/index.ts                 |   4 +-
 ui/src/tasks/components/TaskCard.test.tsx     |   4 +-
 ui/src/tasks/components/TaskCard.tsx          |   4 +-
 ui/src/tasks/components/TaskExportOverlay.tsx |   4 +-
 ui/src/telegrafs/actions/index.ts             |  65 ++++++--
 ui/src/telegrafs/components/CollectorCard.tsx |  28 ++--
 ui/src/telegrafs/components/CollectorList.tsx |   3 +-
 ui/src/telegrafs/components/Collectors.tsx    |   3 +-
 .../components/TelegrafConfigOverlay.tsx      |   3 +-
 ui/src/telegrafs/reducers/index.ts            |   3 +-
 ui/src/templates/actions/index.ts             | 155 +++++++++++++-----
 ui/src/templates/api/index.ts                 | 113 ++++++++-----
 .../components/StaticTemplateCard.tsx         |   7 +-
 .../components/StaticTemplatesList.tsx        |   2 +-
 ui/src/templates/components/TemplateCard.tsx  |  33 ++--
 .../components/TemplateExportOverlay.tsx      |   4 +-
 .../components/TemplateViewOverlay.tsx        |   4 +-
 ui/src/templates/components/TemplatesList.tsx |   2 +-
 .../TemplateBrowserListItem.tsx               |   3 +-
 ui/src/templates/reducers/index.ts            |   3 +-
 ui/src/templates/utils/index.ts               |   4 +-
 .../variableToolbar/VariableItem.tsx          |   2 +-
 .../variableToolbar/VariableToolbar.tsx       |   2 +-
 ui/src/types/documents.ts                     |   9 +
 ui/src/types/index.ts                         |   1 +
 ui/src/types/templates.ts                     |  25 +--
 ui/src/variables/actions/index.ts             | 100 +++++++----
 .../components/RenameVariableForm.tsx         |   2 +-
 .../components/UpdateVariableOverlay.tsx      |   2 +-
 .../components/VariableArgumentsEditor.tsx    |   3 +-
 ui/src/variables/components/VariableCard.tsx  |  32 ++--
 .../components/VariableContextMenu.tsx        |   2 +-
 .../components/VariableExportOverlay.tsx      |   4 +-
 .../components/VariableFormContext.tsx        |   2 +-
 ui/src/variables/components/VariableList.tsx  |   2 +-
 ui/src/variables/components/VariablesTab.tsx  |  10 +-
 ui/src/variables/mocks/index.ts               |   2 +-
 ui/src/variables/reducers/index.ts            |   2 +-
 ui/src/variables/selectors/index.tsx          |   2 +-
 ui/src/variables/utils/exportVariables.ts     |   2 +-
 ui/src/variables/utils/hydrateVars.test.ts    |   5 +-
 ui/src/variables/utils/hydrateVars.ts         |   3 +-
 ui/src/variables/utils/validation.ts          |   2 +-
 73 files changed, 546 insertions(+), 332 deletions(-)
 create mode 100644 ui/src/types/documents.ts

diff --git a/ui/src/alerting/actions/checks.ts b/ui/src/alerting/actions/checks.ts
index fc593dcfba5..41ff38d26ce 100644
--- a/ui/src/alerting/actions/checks.ts
+++ b/ui/src/alerting/actions/checks.ts
@@ -33,9 +33,9 @@ import {
   GetState,
   RemoteDataState,
   CheckViewProperties,
-  Label,
   PostCheck,
 } from 'src/types'
+import {Label} from 'src/client'
 import {createView} from 'src/shared/utils/view'
 
 export type Action =
diff --git a/ui/src/alerting/actions/notifications/endpoints.ts b/ui/src/alerting/actions/notifications/endpoints.ts
index 1e935070fab..d7eed80356c 100644
--- a/ui/src/alerting/actions/notifications/endpoints.ts
+++ b/ui/src/alerting/actions/notifications/endpoints.ts
@@ -19,10 +19,10 @@ import * as copy from 'src/shared/copy/notifications'
 import {
   NotificationEndpoint,
   GetState,
-  Label,
   NotificationEndpointUpdate,
   PostNotificationEndpoint,
 } from 'src/types'
+import {Label} from 'src/client'
 import {RemoteDataState} from '@influxdata/clockface'
 
 export type Action =
diff --git a/ui/src/alerting/actions/notifications/rules.ts b/ui/src/alerting/actions/notifications/rules.ts
index 02cbe468ec3..6fb4f97972e 100644
--- a/ui/src/alerting/actions/notifications/rules.ts
+++ b/ui/src/alerting/actions/notifications/rules.ts
@@ -26,8 +26,8 @@ import {
   NotificationRuleUpdate,
   GetState,
   NotificationRuleDraft,
-  Label,
 } from 'src/types'
+import {Label} from 'src/client'
 import {incrementCloneName} from 'src/utils/naming'
 
 export type Action =
diff --git a/ui/src/alerting/components/CheckCard.tsx b/ui/src/alerting/components/CheckCard.tsx
index 3003a68602f..060f9e03d0a 100644
--- a/ui/src/alerting/components/CheckCard.tsx
+++ b/ui/src/alerting/components/CheckCard.tsx
@@ -27,8 +27,8 @@ import {notify} from 'src/shared/actions/notifications'
 import {updateCheckFailed} from 'src/shared/copy/notifications'
 
 // Types
-import {Check, Label, AppState} from 'src/types'
-
+import {Check, AppState} from 'src/types'
+import {Label, Labels} from 'src/client'
 // Utilities
 import {relativeTimestampFormatter} from 'src/shared/utils/relativeTimestampFormatter'
 
@@ -43,7 +43,7 @@ interface DispatchProps {
 }
 
 interface StateProps {
-  labels: Label[]
+  labels: Labels
 }
 
 interface OwnProps {
@@ -155,7 +155,7 @@ const CheckCard: FunctionComponent<Props> = ({
       }
       labels={
         <InlineLabels
-          selectedLabels={check.labels as Label[]}
+          selectedLabels={check.labels}
           labels={labels}
           onAddLabel={handleAddCheckLabel}
           onRemoveLabel={handleRemoveCheckLabel}
@@ -174,6 +174,7 @@ const CheckCard: FunctionComponent<Props> = ({
         <>Last completed at {check.latestCompleted}</>,
         <>{relativeTimestampFormatter(check.updatedAt, 'Last updated ')}</>,
         <LastRunTaskStatus
+          key={2}
           lastRunError={check.lastRunError}
           lastRunStatus={check.lastRunStatus}
         />,
diff --git a/ui/src/alerting/components/endpoints/EndpointCard.tsx b/ui/src/alerting/components/endpoints/EndpointCard.tsx
index b30a358a23d..b33e4a40403 100644
--- a/ui/src/alerting/components/endpoints/EndpointCard.tsx
+++ b/ui/src/alerting/components/endpoints/EndpointCard.tsx
@@ -28,12 +28,8 @@ import {
 } from 'src/alerting/constants/history'
 
 // Types
-import {
-  NotificationEndpoint,
-  Label,
-  AppState,
-  AlertHistoryType,
-} from 'src/types'
+import {NotificationEndpoint, AppState, AlertHistoryType} from 'src/types'
+import {Label} from 'src/client'
 import {Action} from 'src/alerting/actions/notifications/endpoints'
 
 // Utilities
@@ -148,7 +144,7 @@ const EndpointCard: FC<Props> = ({
   }
   const labelsComponent = (
     <InlineLabels
-      selectedLabels={endpoint.labels as Label[]}
+      selectedLabels={endpoint.labels}
       labels={labels}
       onAddLabel={handleAddEndpointLabel}
       onRemoveLabel={handleRemoveEndpointLabel}
diff --git a/ui/src/alerting/components/notifications/RuleCard.tsx b/ui/src/alerting/components/notifications/RuleCard.tsx
index 89ba08e378c..55601bffa7b 100644
--- a/ui/src/alerting/components/notifications/RuleCard.tsx
+++ b/ui/src/alerting/components/notifications/RuleCard.tsx
@@ -28,13 +28,8 @@ import {viewableLabels} from 'src/labels/selectors'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
 // Types
-import {
-  NotificationRuleDraft,
-  AppState,
-  Label,
-  AlertHistoryType,
-} from 'src/types'
-
+import {NotificationRuleDraft, AppState, AlertHistoryType} from 'src/types'
+import {Label} from 'src/client'
 // Utilities
 import {relativeTimestampFormatter} from 'src/shared/utils/relativeTimestampFormatter'
 
@@ -150,7 +145,7 @@ const RuleCard: FC<Props> = ({
       }
       labels={
         <InlineLabels
-          selectedLabels={rule.labels as Label[]}
+          selectedLabels={rule.labels}
           labels={labels}
           onAddLabel={handleAddRuleLabel}
           onRemoveLabel={handleRemoveRuleLabel}
@@ -169,6 +164,7 @@ const RuleCard: FC<Props> = ({
         <>Last completed at {rule.latestCompleted}</>,
         <>{relativeTimestampFormatter(rule.updatedAt, 'Last updated ')}</>,
         <LastRunTaskStatus
+          key={2}
           lastRunError={rule.lastRunError}
           lastRunStatus={rule.lastRunStatus}
         />,
diff --git a/ui/src/dashboards/actions/index.ts b/ui/src/dashboards/actions/index.ts
index 38ae1335673..81b2bdf8248 100644
--- a/ui/src/dashboards/actions/index.ts
+++ b/ui/src/dashboards/actions/index.ts
@@ -16,7 +16,7 @@ import {
   updateView as updateViewAJAX,
 } from 'src/dashboards/apis'
 import {createDashboardFromTemplate as createDashboardFromTemplateAJAX} from 'src/templates/api'
-
+import * as api from 'src/client'
 // Actions
 import {
   notify,
@@ -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,
@@ -69,6 +69,7 @@ import {
   View,
   DashboardTemplate,
 } from 'src/types'
+import {Label} from 'src/client'
 
 export enum ActionTypes {
   SetDashboards = 'SET_DASHBOARDS',
@@ -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))
@@ -583,9 +584,12 @@ 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 api.getVariables({query: {orgID: org.id}})
+    if (resp.status !== 200) {
+      throw new Error("Couldn't retreive variables for this organization")
+    }
+    const variables = filterUnusedVars(resp.data.variables, views)
+    const exportedVariables = exportVariables(variables, resp.data.variables)
     const dashboardTemplate = dashboardToTemplate(
       dashboard,
       views,
diff --git a/ui/src/dashboards/components/DashboardExportOverlay.tsx b/ui/src/dashboards/components/DashboardExportOverlay.tsx
index 872bdae2feb..03e20ecf3e3 100644
--- a/ui/src/dashboards/components/DashboardExportOverlay.tsx
+++ b/ui/src/dashboards/components/DashboardExportOverlay.tsx
@@ -10,9 +10,7 @@ import {convertToTemplate as convertToTemplateAction} from 'src/dashboards/actio
 import {clearExportTemplate as clearExportTemplateAction} from 'src/templates/actions'
 
 // Types
-import {DocumentCreate} from '@influxdata/influx'
-import {AppState} from 'src/types'
-import {RemoteDataState} from 'src/types'
+import {AppState, DocumentCreate, RemoteDataState} from 'src/types'
 
 interface OwnProps {
   params: {dashboardID: string}
diff --git a/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx b/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx
index 8161a8ab403..226f2967e25 100644
--- a/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx
+++ b/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx
@@ -19,7 +19,8 @@ import {createLabel as createLabelAsync} from 'src/labels/actions'
 import {viewableLabels} from 'src/labels/selectors'
 
 // Types
-import {AppState, Dashboard, Label} from 'src/types'
+import {AppState, Dashboard} from 'src/types'
+import {Label} from 'src/client'
 
 // Constants
 import {DEFAULT_DASHBOARD_NAME} from 'src/dashboards/constants'
@@ -78,7 +79,7 @@ class DashboardCard extends PureComponent<Props> {
         }
         labels={
           <InlineLabels
-            selectedLabels={dashboard.labels as Label[]}
+            selectedLabels={dashboard.labels}
             labels={labels}
             onFilterChange={onFilterChange}
             onAddLabel={this.handleAddLabel}
diff --git a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
index a3515a46b0c..7820e9b798b 100644
--- a/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
+++ b/ui/src/dashboards/components/variablesControlBar/VariablesControlBar.tsx
@@ -24,7 +24,7 @@ import {moveVariable} from 'src/variables/actions'
 
 // Types
 import {AppState} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 import {ComponentSize} from '@influxdata/clockface'
 
 // Decorators
diff --git a/ui/src/dataLoaders/actions/dataLoaders.ts b/ui/src/dataLoaders/actions/dataLoaders.ts
index 5e0add81fe0..4132c6238be 100644
--- a/ui/src/dataLoaders/actions/dataLoaders.ts
+++ b/ui/src/dataLoaders/actions/dataLoaders.ts
@@ -3,13 +3,13 @@ import _ from 'lodash'
 
 // Apis
 import {client} from 'src/utils/api'
+import * as api from 'src/client'
 import {
   ScraperTargetRequest,
   PermissionResource,
   ILabelProperties,
 } from '@influxdata/influx'
 import {createAuthorization} from 'src/authorizations/apis'
-import {postWrite} from 'src/client'
 
 // Utils
 import {createNewPlugin} from 'src/dataLoaders/utils/pluginConfigs'
@@ -30,8 +30,7 @@ import {
   BundleName,
   ConfigurationState,
 } from 'src/types/dataLoaders'
-import {AppState} from 'src/types'
-import {RemoteDataState} from 'src/types'
+import {AppState, RemoteDataState} from 'src/types'
 import {
   WritePrecision,
   TelegrafRequest,
@@ -47,6 +46,7 @@ import {
   TelegrafConfigCreationSuccess,
   readWriteCardinalityLimitReached,
 } from 'src/shared/copy/notifications'
+import {Telegraf, TelegrafRequestPlugin} from 'src/client'
 
 type GetState = () => AppState
 
@@ -376,12 +376,19 @@ export const createOrUpdateTelegrafConfigAsync = () => async (
   )
 
   if (telegrafConfigID) {
-    const telegraf = await client.telegrafConfigs.update(telegrafConfigID, {
-      name: telegrafConfigName,
-      description: telegrafConfigDescription,
-      plugins,
+    const resp = await api.putTelegraf({
+      telegrafID: telegrafConfigID,
+      data: {
+        name: telegrafConfigName,
+        description: telegrafConfigDescription,
+        plugins: plugins as TelegrafRequestPlugin[],
+      },
     })
-    dispatch(editTelegraf(telegraf))
+
+    if (resp.status !== 200) {
+      throw new Error('Failed to update the telegraf config')
+    }
+    dispatch(editTelegraf(resp.data))
     dispatch(setTelegrafConfigID(telegrafConfigID))
     return
   }
@@ -452,19 +459,36 @@ const createTelegraf = async (dispatch, getState, plugins) => {
       tokenID: createdToken.id,
     } as ILabelProperties // hack to make compiler work
 
-    const createdLabel = await client.labels.create({
-      orgID: org.id,
-      name: `@influxdata.token-${new Date().getTime()}`, // fix for https://github.com/influxdata/influxdb/issues/15730
-      properties,
+    const createdLabel = await api.postLabel({
+      data: {
+        orgID: org.id,
+        name: `@influxdata.token-${new Date().getTime()}`, // fix for https://github.com/influxdata/influxdb/issues/15730
+        properties,
+      },
     })
 
+    if (createdLabel.status !== 201) {
+      throw new Error('An Error occurred trying to add the label')
+    }
+
+    const labelID = createdLabel.data.label.id
+
     // add label to telegraf config
-    const label = await client.telegrafConfigs.addLabel(tc.id, createdLabel)
+    const resp = await api.postTelegrafsLabel({
+      telegrafID: tc.id,
+      data: {labelID},
+    })
+
+    if (resp.status !== 201) {
+      throw new Error(
+        'An error occurred trying to add the label to the telegraf config'
+      )
+    }
 
     const config = {
       ...tc,
-      labels: [label],
-    }
+      labels: [resp.data.label],
+    } as Telegraf
 
     dispatch(setTelegrafConfigID(tc.id))
     dispatch(addTelegraf(config))
@@ -554,7 +578,10 @@ export const writeLineProtocolAction = (
   try {
     dispatch(setLPStatus(RemoteDataState.Loading))
 
-    const resp = await postWrite({data: body, query: {org, bucket, precision}})
+    const resp = await api.postWrite({
+      data: body,
+      query: {org, bucket, precision},
+    })
 
     if (resp.status === 204) {
       dispatch(setLPStatus(RemoteDataState.Done))
diff --git a/ui/src/labels/actions/index.ts b/ui/src/labels/actions/index.ts
index 00338e31967..cb706f7f2ed 100644
--- a/ui/src/labels/actions/index.ts
+++ b/ui/src/labels/actions/index.ts
@@ -3,7 +3,7 @@ import {client} from 'src/utils/api'
 
 // Types
 import {RemoteDataState} from 'src/types'
-import {ILabel, ILabelProperties} from '@influxdata/influx'
+import {ILabelProperties} from '@influxdata/influx'
 import {LabelProperties} from 'src/types/labels'
 import {Dispatch, ThunkAction} from 'redux-thunk'
 
@@ -16,6 +16,7 @@ import {
   deleteLabelFailed,
 } from 'src/shared/copy/notifications'
 import {GetState} from 'src/types'
+import {Label} from 'src/client'
 
 export type Action = SetLabels | AddLabel | EditLabel | RemoveLabel
 
@@ -23,13 +24,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},
@@ -38,11 +39,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},
 })
@@ -52,7 +53,7 @@ interface EditLabel {
   payload: {label}
 }
 
-export const editLabel = (label: ILabel): EditLabel => ({
+export const editLabel = (label: Label): EditLabel => ({
   type: 'EDIT_LABEL',
   payload: {label},
 })
@@ -112,7 +113,7 @@ export const createLabel = (
   }
 }
 
-export const updateLabel = (id: string, l: ILabel) => async (
+export const updateLabel = (id: string, l: Label) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
diff --git a/ui/src/labels/components/CreateLabelOverlay.tsx b/ui/src/labels/components/CreateLabelOverlay.tsx
index d25218c1e8e..385ce385eab 100644
--- a/ui/src/labels/components/CreateLabelOverlay.tsx
+++ b/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/client'
 
 // 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
 }
 
diff --git a/ui/src/labels/components/LabelCard.tsx b/ui/src/labels/components/LabelCard.tsx
index 1702f73a174..53ae51d6f4a 100644
--- a/ui/src/labels/components/LabelCard.tsx
+++ b/ui/src/labels/components/LabelCard.tsx
@@ -9,7 +9,7 @@ import {
 } from '@influxdata/clockface'
 
 // Types
-import {Label} from 'src/types'
+import {Label} from 'src/client'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
diff --git a/ui/src/labels/components/LabelContextMenu.tsx b/ui/src/labels/components/LabelContextMenu.tsx
index 55d46bf186b..eb4f597dafd 100644
--- a/ui/src/labels/components/LabelContextMenu.tsx
+++ b/ui/src/labels/components/LabelContextMenu.tsx
@@ -6,7 +6,7 @@ import {Context} from 'src/clockface'
 import {IconFont, ComponentColor} from '@influxdata/clockface'
 
 // Types
-import {Label} from 'src/types'
+import {Label} from 'src/client'
 
 interface Props {
   label: Label
diff --git a/ui/src/labels/components/LabelList.tsx b/ui/src/labels/components/LabelList.tsx
index d17a3fc61e4..7d25c847a71 100644
--- a/ui/src/labels/components/LabelList.tsx
+++ b/ui/src/labels/components/LabelList.tsx
@@ -11,7 +11,8 @@ import {validateLabelUniqueness} from 'src/labels/utils/'
 import memoizeOne from 'memoize-one'
 
 // Types
-import {OverlayState, Label} from 'src/types'
+import {OverlayState} from 'src/types'
+import {Label} from 'src/client'
 import {Sort} from '@influxdata/clockface'
 import {SortTypes} from 'src/shared/utils/sort'
 
diff --git a/ui/src/labels/components/LabelsTab.tsx b/ui/src/labels/components/LabelsTab.tsx
index df7b0dc2c7c..59eb9364a79 100644
--- a/ui/src/labels/components/LabelsTab.tsx
+++ b/ui/src/labels/components/LabelsTab.tsx
@@ -20,8 +20,8 @@ import {viewableLabels} from 'src/labels/selectors'
 import {validateLabelUniqueness} from 'src/labels/utils/'
 
 // Types
-import {AppState, Label} from 'src/types'
-import {ILabel} from '@influxdata/influx'
+import {AppState} from 'src/types'
+import {Label} from 'src/client'
 import {
   IconFont,
   ComponentSize,
@@ -145,7 +145,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) => {
diff --git a/ui/src/labels/components/UpdateLabelOverlay.tsx b/ui/src/labels/components/UpdateLabelOverlay.tsx
index fb52edfe588..f0ced028348 100644
--- a/ui/src/labels/components/UpdateLabelOverlay.tsx
+++ b/ui/src/labels/components/UpdateLabelOverlay.tsx
@@ -6,7 +6,7 @@ import LabelOverlayForm from 'src/labels/components/LabelOverlayForm'
 import {ComponentStatus, Overlay} from '@influxdata/clockface'
 
 // Types
-import {Label} from 'src/types'
+import {Label} from 'src/client'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
diff --git a/ui/src/labels/constants/index.ts b/ui/src/labels/constants/index.ts
index 87686a93a8c..b00d8f13502 100644
--- a/ui/src/labels/constants/index.ts
+++ b/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/client'
 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: '',
diff --git a/ui/src/labels/reducers/index.ts b/ui/src/labels/reducers/index.ts
index 93c2ba24d9e..b30f0a829da 100644
--- a/ui/src/labels/reducers/index.ts
+++ b/ui/src/labels/reducers/index.ts
@@ -4,7 +4,7 @@ import {produce} from 'immer'
 // Types
 import {RemoteDataState} from 'src/types'
 import {Action} from 'src/labels/actions'
-import {Label} from 'src/types'
+import {Label} from 'src/client'
 
 const initialState = (): LabelsState => ({
   status: RemoteDataState.NotStarted,
diff --git a/ui/src/labels/selectors/index.ts b/ui/src/labels/selectors/index.ts
index 3663845aa44..f0ad9fd06a0 100644
--- a/ui/src/labels/selectors/index.ts
+++ b/ui/src/labels/selectors/index.ts
@@ -1,4 +1,4 @@
-import {Labels} from 'src/types'
+import {Labels} from 'src/client'
 import {INFLUX_LABEL_PREFIX} from 'src/labels/constants'
 
 export const viewableLabels = (labels: Labels) =>
diff --git a/ui/src/shared/components/ExportOverlay.tsx b/ui/src/shared/components/ExportOverlay.tsx
index 21dc00c88c5..560f77e92fa 100644
--- a/ui/src/shared/components/ExportOverlay.tsx
+++ b/ui/src/shared/components/ExportOverlay.tsx
@@ -20,9 +20,8 @@ import {createTemplateFromResource} from 'src/templates/actions/'
 import {downloadTextFile} from 'src/shared/utils/download'
 
 // Types
-import {DocumentCreate} from '@influxdata/influx'
 import {ComponentColor, ComponentSize} from '@influxdata/clockface'
-import {RemoteDataState} from 'src/types'
+import {DocumentCreate, RemoteDataState} from 'src/types'
 
 interface OwnProps {
   onDismissOverlay: () => void
diff --git a/ui/src/shared/components/ViewOverlay.tsx b/ui/src/shared/components/ViewOverlay.tsx
index e3c9df64f4a..b025e4aaa23 100644
--- a/ui/src/shared/components/ViewOverlay.tsx
+++ b/ui/src/shared/components/ViewOverlay.tsx
@@ -14,8 +14,7 @@ import CopyButton from 'src/shared/components/CopyButton'
 
 // Types
 import {ComponentColor} from '@influxdata/clockface'
-import {RemoteDataState, DashboardTemplate} from 'src/types'
-import {DocumentCreate} from '@influxdata/influx'
+import {DocumentCreate, RemoteDataState, DashboardTemplate} from 'src/types'
 
 interface Props {
   onDismissOverlay: () => void
diff --git a/ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx b/ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx
index be0fab323d4..f388324cae9 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx
@@ -11,7 +11,7 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
 import {ADD_NEW_LABEL_ITEM_ID} from 'src/shared/components/inlineLabels/InlineLabelsEditor'
 
 // Types
-import {Label} from 'src/types'
+import {Label} from 'src/client'
 import {IconFont} from '@influxdata/clockface'
 
 // Decorators
diff --git a/ui/src/shared/components/inlineLabels/InlineLabels.tsx b/ui/src/shared/components/inlineLabels/InlineLabels.tsx
index 3831cb6515b..9478b52f3dd 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabels.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabels.tsx
@@ -7,7 +7,7 @@ import {Label as LabelComponent} from '@influxdata/clockface'
 import InlineLabelsEditor from 'src/shared/components/inlineLabels/InlineLabelsEditor'
 
 // Types
-import {Label, Labels} from 'src/types'
+import {Label, Labels} from 'src/client'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
diff --git a/ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx b/ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx
index 67c59928e8d..fff02ced234 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx
@@ -11,7 +11,7 @@ import CreateLabelOverlay from 'src/labels/components/CreateLabelOverlay'
 import {validateLabelUniqueness} from 'src/labels/utils/'
 
 // Types
-import {Label} from 'src/types'
+import {Label} from 'src/client'
 import {OverlayState} from 'src/types/overlay'
 
 // Constants
diff --git a/ui/src/shared/components/inlineLabels/InlineLabelsList.tsx b/ui/src/shared/components/inlineLabels/InlineLabelsList.tsx
index 9cc0253ace6..23efb3830b9 100644
--- a/ui/src/shared/components/inlineLabels/InlineLabelsList.tsx
+++ b/ui/src/shared/components/inlineLabels/InlineLabelsList.tsx
@@ -14,7 +14,7 @@ import {ADD_NEW_LABEL_ITEM_ID} from 'src/shared/components/inlineLabels/InlineLa
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
-import {Label} from 'src/types'
+import {Label} from 'src/client'
 import {ComponentSize} from '@influxdata/clockface'
 
 interface Props {
diff --git a/ui/src/shared/utils/filterUnusedVars.ts b/ui/src/shared/utils/filterUnusedVars.ts
index 8d76f615380..856155bfd36 100644
--- a/ui/src/shared/utils/filterUnusedVars.ts
+++ b/ui/src/shared/utils/filterUnusedVars.ts
@@ -3,7 +3,7 @@ import {isInQuery} from 'src/variables/utils/hydrateVars'
 
 // Types
 import {QueryViewProperties, View, ViewProperties} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 
 function isQueryViewProperties(vp: ViewProperties): vp is QueryViewProperties {
   return (vp as QueryViewProperties).queries !== undefined
diff --git a/ui/src/shared/utils/mocks/resourceToTemplate.ts b/ui/src/shared/utils/mocks/resourceToTemplate.ts
index 35e7d8e2600..e8f8ab96d7d 100644
--- a/ui/src/shared/utils/mocks/resourceToTemplate.ts
+++ b/ui/src/shared/utils/mocks/resourceToTemplate.ts
@@ -1,5 +1,5 @@
-import {Task, Dashboard, View, Label, TaskStatus} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Task, Dashboard, View, TaskStatus} from 'src/types'
+import {Label, Variable} from 'src/client'
 
 export const myDashboard: Dashboard = {
   id: 'dash_1',
diff --git a/ui/src/shared/utils/resourceToTemplate.ts b/ui/src/shared/utils/resourceToTemplate.ts
index a7a7beef571..449a51be16c 100644
--- a/ui/src/shared/utils/resourceToTemplate.ts
+++ b/ui/src/shared/utils/resourceToTemplate.ts
@@ -4,13 +4,9 @@ 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 {Cell, Dashboard, DocumentCreate, Task, Template, View} from 'src/types'
+import {TemplateType} from '@influxdata/influx'
+import {Document, Label, Variable} from 'src/client'
 import {DashboardQuery} from 'src/types/dashboards'
 
 const CURRENT_TEMPLATE_VERSION = '1'
@@ -300,7 +296,9 @@ export const dashboardToTemplate = (
   return template
 }
 
-export const templateToExport = (template: ITemplate): DocumentCreate => {
+export const templateToExport = (
+  template: Template | Document
+): DocumentCreate => {
   const pickedTemplate = _.pick(template, ['meta', 'content'])
   const labelsArray = template.labels.map(l => l.name)
   const templateWithLabels = {...pickedTemplate, labels: labelsArray}
diff --git a/ui/src/tasks/actions/index.ts b/ui/src/tasks/actions/index.ts
index 13aec2e3ab5..0f1987bef17 100644
--- a/ui/src/tasks/actions/index.ts
+++ b/ui/src/tasks/actions/index.ts
@@ -33,11 +33,11 @@ import {setExportTemplate} from 'src/templates/actions'
 import * as copy from 'src/shared/copy/notifications'
 
 // Types
-import {AppState, Label, Task, TaskTemplate} from 'src/types'
+import {AppState, Task, TaskTemplate} from 'src/types'
 import {RemoteDataState} from '@influxdata/clockface'
 import {Run} from 'src/tasks/components/TaskRunsPage'
 import {LogEvent} from '@influxdata/influx'
-
+import {Label} from 'src/client'
 // Utils
 import {getErrorMessage} from 'src/utils/api'
 import {insertPreambleInScript} from 'src/shared/utils/insertPreambleInScript'
diff --git a/ui/src/tasks/components/TaskCard.test.tsx b/ui/src/tasks/components/TaskCard.test.tsx
index d331db5e895..799ff62c925 100644
--- a/ui/src/tasks/components/TaskCard.test.tsx
+++ b/ui/src/tasks/components/TaskCard.test.tsx
@@ -21,8 +21,8 @@ const setup = (override = {}) => {
     onRunTask: jest.fn(),
     onFilterChange: jest.fn(),
     onUpdate: jest.fn(),
-    onAddTaskLabels: jest.fn(),
-    onRemoveTaskLabels: jest.fn(),
+    onAddTaskLabel: jest.fn(),
+    onRemoveTaskLabel: jest.fn(),
     onCreateLabel: jest.fn(),
     labels: [], // all labels
     ...override,
diff --git a/ui/src/tasks/components/TaskCard.tsx b/ui/src/tasks/components/TaskCard.tsx
index 0a3e39d5459..de3f3d4677d 100644
--- a/ui/src/tasks/components/TaskCard.tsx
+++ b/ui/src/tasks/components/TaskCard.tsx
@@ -25,8 +25,8 @@ import {viewableLabels} from 'src/labels/selectors'
 
 // Types
 import {ComponentColor} from '@influxdata/clockface'
-import {AppState, TaskStatus, Task, Labels, Label} from 'src/types'
-
+import {AppState, TaskStatus, Task} from 'src/types'
+import {Labels, Label} from 'src/client'
 // Constants
 import {DEFAULT_TASK_NAME} from 'src/dashboards/constants'
 
diff --git a/ui/src/tasks/components/TaskExportOverlay.tsx b/ui/src/tasks/components/TaskExportOverlay.tsx
index b37528cf49b..021628d07da 100644
--- a/ui/src/tasks/components/TaskExportOverlay.tsx
+++ b/ui/src/tasks/components/TaskExportOverlay.tsx
@@ -10,9 +10,7 @@ import {convertToTemplate as convertToTemplateAction} from 'src/tasks/actions'
 import {clearExportTemplate as clearExportTemplateAction} from 'src/templates/actions'
 
 // Types
-import {AppState} from 'src/types'
-import {DocumentCreate} from '@influxdata/influx'
-import {RemoteDataState} from 'src/types'
+import {AppState, DocumentCreate, RemoteDataState} from 'src/types'
 
 interface OwnProps {
   params: {id: string}
diff --git a/ui/src/telegrafs/actions/index.ts b/ui/src/telegrafs/actions/index.ts
index 3333914c5d6..33ff0e115f5 100644
--- a/ui/src/telegrafs/actions/index.ts
+++ b/ui/src/telegrafs/actions/index.ts
@@ -1,8 +1,10 @@
 // API
 import {client} from 'src/utils/api'
+import * as api from 'src/client'
 
 // Types
-import {RemoteDataState, GetState, Telegraf, Label} from 'src/types'
+import {RemoteDataState, GetState} from 'src/types'
+import {Label, Telegraf} from 'src/client'
 import {Dispatch, ThunkAction} from 'redux-thunk'
 
 // Actions
@@ -97,9 +99,13 @@ export const getTelegrafs = () => async (dispatch, getState: GetState) => {
   try {
     dispatch(setTelegrafs(RemoteDataState.Loading))
 
-    const telegrafs = await client.telegrafConfigs.getAll(org.id)
+    const resp = await api.getTelegrafs({query: {orgID: org.id}})
 
-    dispatch(setTelegrafs(RemoteDataState.Done, telegrafs))
+    if (resp.status !== 200) {
+      throw new Error("Couldn't get the telegraf config for this organization")
+    }
+
+    dispatch(setTelegrafs(RemoteDataState.Done, resp.data.configurations))
   } catch (e) {
     console.error(e)
     dispatch(setTelegrafs(RemoteDataState.Error))
@@ -111,8 +117,13 @@ export const createTelegraf = (telegraf: Telegraf) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
-    const createdTelegraf = await client.telegrafConfigs.create(telegraf)
-    dispatch(addTelegraf(createdTelegraf))
+    const resp = await api.postTelegraf({data: telegraf})
+
+    if (resp.status !== 201) {
+      throw new Error('There was an error creating the telegraf config')
+    }
+
+    dispatch(addTelegraf(resp.data))
   } catch (e) {
     console.error(e)
     dispatch(notify(telegrafCreateFailed()))
@@ -124,9 +135,15 @@ export const updateTelegraf = (telegraf: Telegraf) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
-    const t = await client.telegrafConfigs.update(telegraf.id, telegraf)
-
-    dispatch(editTelegraf(t))
+    const resp = await api.putTelegraf({
+      telegrafID: telegraf.id,
+      data: telegraf,
+    })
+    if (resp.status !== 200) {
+      throw new Error('Failed update the telegraf config')
+    }
+
+    dispatch(editTelegraf(resp.data))
   } catch (e) {
     console.error(e)
     dispatch(notify(telegrafUpdateFailed(telegraf.name)))
@@ -146,30 +163,42 @@ export const deleteTelegraf = (id: string, name: string) => async (
   }
 }
 
-export const addTelelgrafLabelsAsync = (
+export const addTelelgrafLabelAsync = (
   telegrafID: string,
-  labels: Label[]
+  label: Label
 ): ThunkAction<Promise<void>> => async (dispatch): Promise<void> => {
   try {
-    await client.telegrafConfigs.addLabels(telegrafID, labels)
-    const telegraf = await client.telegrafConfigs.get(telegrafID)
+    await api.postTelegrafsLabel({telegrafID, data: {labelID: label as string}})
+    const resp = await api.getTelegraf({telegrafID})
+
+    if (resp.status !== 200) {
+      throw new Error(
+        'An error occurred while adding labels to the telegraf config'
+      )
+    }
 
-    dispatch(editTelegraf(telegraf))
+    dispatch(editTelegraf(resp.data))
   } catch (error) {
     console.error(error)
     dispatch(notify(addTelelgrafLabelFailed()))
   }
 }
 
-export const removeTelelgrafLabelsAsync = (
+export const removeTelelgrafLabelAsync = (
   telegrafID: string,
-  labels: Label[]
+  label: Label
 ): ThunkAction<Promise<void>> => async (dispatch): Promise<void> => {
   try {
-    await client.telegrafConfigs.removeLabels(telegrafID, labels)
-    const telegraf = await client.telegrafConfigs.get(telegrafID)
+    await api.deleteTelegrafsLabel({telegrafID, labelID: label as string})
+    const resp = await api.getTelegraf({telegrafID})
+
+    if (resp.status !== 200) {
+      throw new Error(
+        'An error occurred while removing labels from the telegraf config'
+      )
+    }
 
-    dispatch(editTelegraf(telegraf))
+    dispatch(editTelegraf(resp.data))
   } catch (error) {
     console.error(error)
     dispatch(notify(removeTelelgrafLabelFailed()))
diff --git a/ui/src/telegrafs/components/CollectorCard.tsx b/ui/src/telegrafs/components/CollectorCard.tsx
index 34f21b5d587..09a3c242bbb 100644
--- a/ui/src/telegrafs/components/CollectorCard.tsx
+++ b/ui/src/telegrafs/components/CollectorCard.tsx
@@ -11,8 +11,8 @@ import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 
 // Actions
 import {
-  addTelelgrafLabelsAsync,
-  removeTelelgrafLabelsAsync,
+  addTelelgrafLabelAsync,
+  removeTelelgrafLabelAsync,
 } from 'src/telegrafs/actions'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
@@ -23,8 +23,8 @@ import {viewableLabels} from 'src/labels/selectors'
 import {DEFAULT_COLLECTOR_NAME} from 'src/dashboards/constants'
 
 // Types
-import {AppState, Organization, Label, Telegraf} from 'src/types'
-
+import {AppState, Organization} from 'src/types'
+import {Label, Telegraf} from 'src/client'
 interface OwnProps {
   collector: Telegraf
   onDelete: (telegraf: Telegraf) => void
@@ -38,8 +38,8 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  onAddLabels: typeof addTelelgrafLabelsAsync
-  onRemoveLabels: typeof removeTelelgrafLabelsAsync
+  onAddLabel: typeof addTelelgrafLabelAsync
+  onRemoveLabel: typeof removeTelelgrafLabelAsync
   onCreateLabel: typeof createLabelAsync
 }
 
@@ -133,15 +133,23 @@ class CollectorRow extends PureComponent<Props & WithRouterProps> {
   }
 
   private handleAddLabel = async (label: Label) => {
+<<<<<<< HEAD
     const {collector, onAddLabels} = this.props
+=======
+    const {collector, onAddLabel} = this.props
+>>>>>>> feat(ui): completed feature
 
-    await onAddLabels(collector.id, [label])
+    await onAddLabel(collector.id, label)
   }
 
   private handleRemoveLabel = async (label: Label) => {
+<<<<<<< HEAD
     const {collector, onRemoveLabels} = this.props
+=======
+    const {collector, onRemoveLabel} = this.props
+>>>>>>> feat(ui): completed feature
 
-    await onRemoveLabels(collector.id, [label])
+    await onRemoveLabel(collector.id, label)
   }
 
   private handleCreateLabel = async (label: Label) => {
@@ -170,8 +178,8 @@ const mstp = ({labels, orgs: {org}}: AppState): StateProps => {
 }
 
 const mdtp: DispatchProps = {
-  onAddLabels: addTelelgrafLabelsAsync,
-  onRemoveLabels: removeTelelgrafLabelsAsync,
+  onAddLabel: addTelelgrafLabelAsync,
+  onRemoveLabel: removeTelelgrafLabelAsync,
   onCreateLabel: createLabelAsync,
 }
 
diff --git a/ui/src/telegrafs/components/CollectorList.tsx b/ui/src/telegrafs/components/CollectorList.tsx
index 11f10053b8b..91698626efb 100644
--- a/ui/src/telegrafs/components/CollectorList.tsx
+++ b/ui/src/telegrafs/components/CollectorList.tsx
@@ -10,9 +10,10 @@ import CollectorRow from 'src/telegrafs/components/CollectorCard'
 import FilterList from 'src/shared/components/Filter'
 
 // Types
+import {Telegraf} from 'src/client'
 import {Sort} from '@influxdata/clockface'
 import {SortTypes, getSortedResources} from 'src/shared/utils/sort'
-import {AppState, Telegraf} from 'src/types'
+import {AppState} from 'src/types'
 import {updateTelegraf, deleteTelegraf} from '../actions'
 
 type SortKey = keyof Telegraf
diff --git a/ui/src/telegrafs/components/Collectors.tsx b/ui/src/telegrafs/components/Collectors.tsx
index 6b69afe940b..5c8fcbd33a2 100644
--- a/ui/src/telegrafs/components/Collectors.tsx
+++ b/ui/src/telegrafs/components/Collectors.tsx
@@ -31,7 +31,8 @@ import {updateTelegraf, deleteTelegraf} from 'src/telegrafs/actions'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
-import {Telegraf, OverlayState, AppState, Bucket} from 'src/types'
+import {Telegraf} from 'src/client'
+import {OverlayState, AppState, Bucket} from 'src/types'
 import {
   setDataLoadersType,
   setTelegrafConfigID,
diff --git a/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx b/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx
index 09610b8a5dc..e9e0c2bee58 100644
--- a/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx
+++ b/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx
@@ -20,7 +20,8 @@ import {
 import {downloadTextFile} from 'src/shared/utils/download'
 
 // Types
-import {AppState, Telegraf} from 'src/types'
+import {AppState} from 'src/types'
+import {Telegraf} from 'src/client'
 
 interface OwnProps {
   onClose: () => void
diff --git a/ui/src/telegrafs/reducers/index.ts b/ui/src/telegrafs/reducers/index.ts
index a5fb0bca827..588144c8bd6 100644
--- a/ui/src/telegrafs/reducers/index.ts
+++ b/ui/src/telegrafs/reducers/index.ts
@@ -2,8 +2,9 @@
 import {produce} from 'immer'
 
 // Types
-import {RemoteDataState, Telegraf} from 'src/types'
+import {RemoteDataState} from 'src/types'
 import {Action} from 'src/telegrafs/actions'
+import {Telegraf} from 'src/client'
 
 const initialState = (): TelegrafsState => ({
   status: RemoteDataState.NotStarted,
diff --git a/ui/src/templates/actions/index.ts b/ui/src/templates/actions/index.ts
index f31bbefb643..dd13843af86 100644
--- a/ui/src/templates/actions/index.ts
+++ b/ui/src/templates/actions/index.ts
@@ -6,22 +6,17 @@ import {templateToExport} from 'src/shared/utils/resourceToTemplate'
 import {staticTemplates} from 'src/templates/constants/defaultTemplates'
 
 // Types
-import {
-  TemplateSummary,
-  DocumentCreate,
-  ITaskTemplate,
-  TemplateType,
-  ITemplate,
-  ILabel as Label,
-} from '@influxdata/influx'
+import {TemplateType} from '@influxdata/influx'
 import {
   RemoteDataState,
   GetState,
   DashboardTemplate,
   VariableTemplate,
+  TaskTemplate,
   Template,
+  TemplateSummary,
 } from 'src/types'
-
+import {Document, DocumentCreate, Label} from 'src/client'
 // Actions
 import {notify} from 'src/shared/actions/notifications'
 
@@ -33,6 +28,7 @@ import {client} from 'src/utils/api'
 import {createDashboardFromTemplate} from 'src/dashboards/actions'
 import {createVariableFromTemplate} from 'src/variables/actions'
 import {createTaskFromTemplate} from 'src/tasks/actions'
+import * as api from 'src/client'
 
 export enum ActionTypes {
   GetTemplateSummariesForOrg = 'GET_TEMPLATE_SUMMARIES_FOR_ORG',
@@ -112,8 +108,18 @@ const removeTemplateSummary = (templateID: string): RemoveTemplateSummary => ({
 })
 
 export const getTemplateByID = async (id: string) => {
-  const template = (await client.templates.get(id)) as Template
-  return template
+  try {
+    const resp = await api.getDocumentsTemplate({templateID: id})
+    if (resp.status !== 200) {
+      throw new Error(
+        'An error occurred trying to get the template based on the ID'
+      )
+    }
+    return resp.data
+  } catch (e) {
+    console.error(e)
+    return null
+  }
 }
 
 export const getTemplates = () => async (dispatch, getState: GetState) => {
@@ -121,8 +127,18 @@ export const getTemplates = () => async (dispatch, getState: GetState) => {
     orgs: {org},
   } = getState()
   dispatch(setTemplatesStatus(RemoteDataState.Loading))
-  const items = await client.templates.getAll(org.id)
-  dispatch(populateTemplateSummaries(items))
+  try {
+    const resp = await api.getDocumentsTemplates({query: {orgID: org.id}})
+    if (resp.status !== 200) {
+      throw new Error("Couldn't get the templates for this org")
+    }
+
+    const items = resp.data as TemplateSummary[]
+
+    dispatch(populateTemplateSummaries(items))
+  } catch (e) {
+    console.error(e)
+  }
 }
 
 export const createTemplate = (template: DocumentCreate) => async (
@@ -134,7 +150,12 @@ export const createTemplate = (template: DocumentCreate) => async (
       orgs: {org},
     } = getState()
 
-    await client.templates.create({...template, orgID: org.id})
+    await api.postDocumentsTemplate({
+      data: {
+        ...template,
+        orgID: org.id,
+      },
+    })
     dispatch(notify(copy.importTemplateSucceeded()))
   } catch (e) {
     console.error(e)
@@ -151,7 +172,12 @@ export const createTemplateFromResource = (
       orgs: {org},
     } = getState()
 
-    await client.templates.create({...resource, orgID: org.id})
+    await api.postDocumentsTemplate({
+      data: {
+        ...resource,
+        orgID: org.id,
+      },
+    })
     dispatch(notify(copy.resourceSavedAsTemplate(resourceName)))
   } catch (e) {
     console.error(e)
@@ -176,9 +202,14 @@ export const updateTemplate = (id: string, props: TemplateSummary) => async (
   dispatch
 ): Promise<void> => {
   try {
-    const {meta} = await client.templates.update(id, props)
+    const resp = await api.putDocumentsTemplate({templateID: id, data: props})
+    if (resp.status !== 200) {
+      throw new Error(
+        "Couldn't update the document template based on the corresponding id"
+      )
+    }
 
-    dispatch(setTemplateSummary(id, {...props, meta}))
+    dispatch(setTemplateSummary(id, {...props, meta: resp.data.meta}))
     dispatch(notify(copy.updateTemplateSucceeded()))
   } catch (e) {
     console.error(e)
@@ -192,8 +223,13 @@ export const convertToTemplate = (id: string) => async (
   try {
     dispatch(setExportTemplate(RemoteDataState.Loading))
 
-    const templateDocument = await client.templates.get(id)
-    const template = templateToExport(templateDocument)
+    const resp = await api.getDocumentsTemplate({templateID: id})
+    if (resp.status !== 200) {
+      throw new Error(
+        'An error occurred trying to get the template based on the ID'
+      )
+    }
+    const template = templateToExport(resp.data)
 
     dispatch(setExportTemplate(RemoteDataState.Done, template))
   } catch (error) {
@@ -228,14 +264,37 @@ export const cloneTemplate = (templateID: string) => async (
       orgs: {org},
     } = getState()
 
-    const createdTemplate = await client.templates.clone(templateID, org.id)
+    const resp = await api.getDocumentsTemplate({templateID})
 
-    dispatch(
-      addTemplateSummary({
-        ...createdTemplate,
-        labels: createdTemplate.labels || [],
-      })
-    )
+    if (resp.status !== 200) {
+      throw new Error('An error occurred copying over the template')
+    }
+
+    const clone = resp.data
+    const labels = clone.labels || []
+    const labelIDs = labels.map(label => label.id) as Label[]
+    clone.meta.name = `${clone.meta.name} (clone)`
+    clone.labels = labelIDs
+
+    const create = {
+      meta: clone.meta,
+      orgID: org.id,
+      content: clone.content,
+      labels: labelIDs,
+    } as DocumentCreate
+
+    const newTemplate = await api.postDocumentsTemplate({
+      data: create,
+    })
+
+    if (newTemplate.status !== 201) {
+      throw new Error('An error occurred cloning the template')
+    }
+    const items = {
+      ...newTemplate.data,
+      labels: newTemplate.data.labels || [],
+    }
+    dispatch(addTemplateSummary(items))
     dispatch(notify(copy.cloneTemplateSuccess()))
   } catch (e) {
     console.error(e)
@@ -257,7 +316,7 @@ const createFromTemplate = template => dispatch => {
           createDashboardFromTemplate(template as DashboardTemplate)
         )
       case TemplateType.Task:
-        return dispatch(createTaskFromTemplate(template as ITaskTemplate))
+        return dispatch(createTaskFromTemplate(template as TaskTemplate))
       case TemplateType.Variable:
         return dispatch(
           createVariableFromTemplate(template as VariableTemplate)
@@ -279,41 +338,57 @@ export const createResourceFromStaticTemplate = (name: string) => dispatch => {
 export const createResourceFromTemplate = (templateID: string) => async (
   dispatch
 ): Promise<void> => {
-  const template = await client.templates.get(templateID)
-  dispatch(createFromTemplate(template))
+  const resp = await api.getDocumentsTemplate({templateID})
+  if (resp.status !== 200) {
+    throw new Error(
+      'An error occurred trying to get the template based on the ID'
+    )
+  }
+  dispatch(createFromTemplate(resp.data))
 }
 
-export const addTemplateLabelsAsync = (
+export const addTemplateLabelAsync = (
   templateID: string,
-  labels: Label[]
+  label: Label
 ) => async (dispatch): Promise<void> => {
   try {
-    await client.templates.addLabels(templateID, labels.map(l => l.id))
-    const template = await client.templates.get(templateID)
+    await api.postDocumentsTemplatesLabel({
+      templateID,
+      data: {labelID: label.id},
+    })
+    const resp = await api.getDocumentsTemplate({templateID})
+
+    if (resp.status !== 200) {
+      throw new Error('An error occurred adding the label to template')
+    }
 
-    dispatch(setTemplateSummary(templateID, templateToSummary(template)))
+    dispatch(setTemplateSummary(templateID, templateToSummary(resp.data)))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.addTemplateLabelFailed()))
   }
 }
 
-export const removeTemplateLabelsAsync = (
+export const removeTemplateLabelAsync = (
   templateID: string,
-  labels: Label[]
+  label: Label
 ) => async (dispatch): Promise<void> => {
   try {
-    await client.templates.removeLabels(templateID, labels.map(l => l.id))
-    const template = await client.templates.get(templateID)
+    await api.deleteDocumentsTemplatesLabel({templateID, labelID: label.id})
+    const resp = await api.getDocumentsTemplate({templateID})
+
+    if (resp.status !== 200) {
+      throw new Error('An error occurred deleting the template label')
+    }
 
-    dispatch(setTemplateSummary(templateID, templateToSummary(template)))
+    dispatch(setTemplateSummary(templateID, templateToSummary(resp.data)))
   } catch (error) {
     console.error(error)
     dispatch(notify(copy.removeTemplateLabelFailed()))
   }
 }
 
-const templateToSummary = (template: ITemplate): TemplateSummary => ({
+const templateToSummary = (template: Template | Document): TemplateSummary => ({
   id: template.id,
   meta: template.meta,
   labels: template.labels,
diff --git a/ui/src/templates/api/index.ts b/ui/src/templates/api/index.ts
index 137e4050174..8d3220af1aa 100644
--- a/ui/src/templates/api/index.ts
+++ b/ui/src/templates/api/index.ts
@@ -12,7 +12,8 @@ import {
 } from 'src/types'
 import {IDashboard, Cell} from '@influxdata/influx'
 import {client} from 'src/utils/api'
-
+import * as api from 'src/client'
+import {Variable} from 'src/client'
 import {
   findIncludedsFromRelationships,
   findLabelsToCreate,
@@ -203,16 +204,25 @@ const createVariablesFromTemplate = async (
   }
   const variablesIncluded = findIncludedVariables(included)
 
-  const existingVariables = await client.variables.getAll(orgID)
+  const resp = await api.getVariables({query: {orgID}})
+
+  if (resp.status !== 200) {
+    throw new Error('An error occurred retrieving the variables')
+  }
+
+  const variables = resp.data as Variable[]
 
   const variablesToCreate = findVariablesToCreate(
-    existingVariables,
+    variables,
     variablesIncluded
   ).map(v => ({...v.attributes, orgID}))
 
-  const createdVariables = await client.variables.createAll(variablesToCreate)
+  const createdVariables = variablesToCreate.filter(async vars => {
+    const resp = await api.postVariable({data: vars})
+    return resp.status === 201
+  })
 
-  const allVars = [...existingVariables, ...createdVariables]
+  const allVars = [...variables, ...createdVariables]
 
   const addLabelsToVars = variablesIncluded.map(async includedVar => {
     const variable = allVars.find(v => v.name === includedVar.attributes.name)
@@ -229,31 +239,43 @@ export const createTaskFromTemplate = async (
   template: TaskTemplate,
   orgID: string
 ): Promise<Task> => {
-  const {content} = template
+  try {
+    const {content} = template
 
-  if (
-    content.data.type !== TemplateType.Task ||
-    template.meta.version !== '1'
-  ) {
-    throw new Error('Cannot create task from this template')
-  }
+    if (
+      content.data.type !== TemplateType.Task ||
+      template.meta.version !== '1'
+    ) {
+      throw new Error('Cannot create task from this template')
+    }
 
-  const flux = content.data.attributes.flux
+    const flux = content.data.attributes.flux
 
-  const createdTask = await client.tasks.createByOrgID(orgID, flux, null)
+    const postResp = await api.postTask({data: {orgID, flux}})
 
-  if (!createdTask || !createdTask.id) {
-    throw new Error('Could not create task')
-  }
+    if (postResp.status !== 201) {
+      throw new Error('Could not create task')
+    }
 
-  // associate imported label.id with created label
-  const labelMap = await createLabelsFromTemplate(template, orgID)
+    // associate imported label.id with created label
+    const labelMap = await createLabelsFromTemplate(template, orgID)
+
+    await addTaskLabelsFromTemplate(template, labelMap, postResp.data as Task)
 
-  await addTaskLabelsFromTemplate(template, labelMap, createdTask)
+    const resp = await api.getTask({taskID: postResp.data.id})
 
-  const task = await client.tasks.get(createdTask.id)
+    if (resp.status !== 200) {
+      throw new Error(
+        'An unexpected error occurred while trying to get the task'
+      )
+    }
 
-  return task
+    const task = resp.data as Task
+
+    return task
+  } catch (e) {
+    console.error(e)
+  }
 }
 
 const addTaskLabelsFromTemplate = async (
@@ -272,28 +294,39 @@ export const createVariableFromTemplate = async (
 ) => {
   const {content} = template
 
-  if (
-    content.data.type !== TemplateType.Variable ||
-    template.meta.version !== '1'
-  ) {
-    throw new Error('Cannot create variable from this template')
-  }
+  try {
+    if (
+      content.data.type !== TemplateType.Variable ||
+      template.meta.version !== '1'
+    ) {
+      throw new Error('Cannot create variable from this template')
+    }
+
+    const resp = await api.postVariable({
+      data: {
+        ...content.data.attributes,
+        orgID,
+      },
+    })
 
-  const createdVariable = await client.variables.create({
-    ...content.data.attributes,
-    orgID,
-  })
+    if (resp.status !== 201) {
+      throw new Error('Failed to create variable from template')
+    }
 
-  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)
 
-  // associate imported label.id with created label
-  const labelsMap = await createLabelsFromTemplate(template, orgID)
+    await createVariablesFromTemplate(template, labelsMap, orgID)
 
-  await createVariablesFromTemplate(template, labelsMap, orgID)
+    const variable = await api.getVariable({variableID: resp.data.id})
 
-  const variable = await client.variables.get(createdVariable.id)
+    if (variable.status !== 200) {
+      throw new Error('Failed to get variable from template')
+    }
 
-  return variable
+    return variable.data
+  } catch (e) {
+    console.error(e)
+    throw e
+  }
 }
diff --git a/ui/src/templates/components/StaticTemplateCard.tsx b/ui/src/templates/components/StaticTemplateCard.tsx
index 0d84f38057f..3139efd164d 100644
--- a/ui/src/templates/components/StaticTemplateCard.tsx
+++ b/ui/src/templates/components/StaticTemplateCard.tsx
@@ -21,10 +21,9 @@ import {createResourceFromStaticTemplate} from 'src/templates/actions'
 import {viewableLabels} from 'src/labels/selectors'
 
 // Types
-import {TemplateSummary, ILabel} from '@influxdata/influx'
 import {ComponentColor} from '@influxdata/clockface'
-import {AppState, Organization} from 'src/types'
-
+import {AppState, Organization, TemplateSummary} from 'src/types'
+import {Label} from 'src/client'
 // Constants
 interface OwnProps {
   template: TemplateSummary
@@ -37,7 +36,7 @@ interface DispatchProps {
 }
 
 interface StateProps {
-  labels: ILabel[]
+  labels: Label[]
   org: Organization
 }
 
diff --git a/ui/src/templates/components/StaticTemplatesList.tsx b/ui/src/templates/components/StaticTemplatesList.tsx
index 3edab31a864..3bc1a3772ab 100644
--- a/ui/src/templates/components/StaticTemplatesList.tsx
+++ b/ui/src/templates/components/StaticTemplatesList.tsx
@@ -9,7 +9,7 @@ import EmptyTemplatesList from 'src/templates/components/EmptyTemplatesList'
 import StaticTemplateCard from 'src/templates/components/StaticTemplateCard'
 
 // Types
-import {TemplateSummary} from '@influxdata/influx'
+import {TemplateSummary} from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
 import {Sort} from 'src/clockface'
 
diff --git a/ui/src/templates/components/TemplateCard.tsx b/ui/src/templates/components/TemplateCard.tsx
index bdaa93904e1..49f12957c63 100644
--- a/ui/src/templates/components/TemplateCard.tsx
+++ b/ui/src/templates/components/TemplateCard.tsx
@@ -22,8 +22,8 @@ import {
   cloneTemplate,
   updateTemplate,
   createResourceFromTemplate,
-  removeTemplateLabelsAsync,
-  addTemplateLabelsAsync,
+  removeTemplateLabelAsync,
+  addTemplateLabelAsync,
 } from 'src/templates/actions'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
@@ -31,10 +31,9 @@ import {createLabel as createLabelAsync} from 'src/labels/actions'
 import {viewableLabels} from 'src/labels/selectors'
 
 // Types
-import {TemplateSummary, ILabel} from '@influxdata/influx'
 import {ComponentColor} from '@influxdata/clockface'
-import {AppState, Organization} from 'src/types'
-
+import {AppState, Organization, TemplateSummary} from 'src/types'
+import {Label} from 'src/client'
 // Constants
 import {DEFAULT_TEMPLATE_NAME} from 'src/templates/constants'
 
@@ -48,13 +47,13 @@ interface DispatchProps {
   onClone: typeof cloneTemplate
   onUpdate: typeof updateTemplate
   onCreateFromTemplate: typeof createResourceFromTemplate
-  onAddTemplateLabels: typeof addTemplateLabelsAsync
-  onRemoveTemplateLabels: typeof removeTemplateLabelsAsync
+  onAddTemplateLabel: typeof addTemplateLabelAsync
+  onRemoveTemplateLabel: typeof removeTemplateLabelAsync
   onCreateLabel: typeof createLabelAsync
 }
 
 interface StateProps {
-  labels: ILabel[]
+  labels: Label[]
   org: Organization
 }
 
@@ -203,19 +202,19 @@ class TemplateCard extends PureComponent<Props & WithRouterProps> {
     router.push(`/orgs/${org.id}/settings/templates/${template.id}/view`)
   }
 
-  private handleAddLabel = (label: ILabel): void => {
-    const {template, onAddTemplateLabels} = this.props
+  private handleAddLabel = (label: Label): void => {
+    const {template, onAddTemplateLabel} = this.props
 
-    onAddTemplateLabels(template.id, [label])
+    onAddTemplateLabel(template.id, label)
   }
 
-  private handleRemoveLabel = (label: ILabel): void => {
-    const {template, onRemoveTemplateLabels} = this.props
+  private handleRemoveLabel = (label: Label): void => {
+    const {template, onRemoveTemplateLabel} = this.props
 
-    onRemoveTemplateLabels(template.id, [label])
+    onRemoveTemplateLabel(template.id, label)
   }
 
-  private handleCreateLabel = (label: ILabel) => {
+  private handleCreateLabel = (label: Label) => {
     this.props.onCreateLabel(label.name, label.properties)
   }
 }
@@ -232,8 +231,8 @@ const mdtp: DispatchProps = {
   onClone: cloneTemplate,
   onUpdate: updateTemplate,
   onCreateFromTemplate: createResourceFromTemplate,
-  onAddTemplateLabels: addTemplateLabelsAsync,
-  onRemoveTemplateLabels: removeTemplateLabelsAsync,
+  onAddTemplateLabel: addTemplateLabelAsync,
+  onRemoveTemplateLabel: removeTemplateLabelAsync,
   onCreateLabel: createLabelAsync,
 }
 
diff --git a/ui/src/templates/components/TemplateExportOverlay.tsx b/ui/src/templates/components/TemplateExportOverlay.tsx
index d5f91a8aa90..3c0fa88ec1a 100644
--- a/ui/src/templates/components/TemplateExportOverlay.tsx
+++ b/ui/src/templates/components/TemplateExportOverlay.tsx
@@ -12,9 +12,7 @@ import {
 } from 'src/templates/actions'
 
 // Types
-import {DocumentCreate} from '@influxdata/influx'
-import {AppState} from 'src/types'
-import {RemoteDataState} from 'src/types'
+import {AppState, DocumentCreate, RemoteDataState} from 'src/types'
 
 interface OwnProps {
   params: {id: string}
diff --git a/ui/src/templates/components/TemplateViewOverlay.tsx b/ui/src/templates/components/TemplateViewOverlay.tsx
index a3f49883b14..70d1512570c 100644
--- a/ui/src/templates/components/TemplateViewOverlay.tsx
+++ b/ui/src/templates/components/TemplateViewOverlay.tsx
@@ -14,9 +14,7 @@ import {
 } from 'src/templates/actions'
 
 // Types
-import {DocumentCreate} from '@influxdata/influx'
-import {AppState} from 'src/types'
-import {RemoteDataState} from 'src/types'
+import {AppState, DocumentCreate, RemoteDataState} from 'src/types'
 
 interface OwnProps {
   params: {id: string}
diff --git a/ui/src/templates/components/TemplatesList.tsx b/ui/src/templates/components/TemplatesList.tsx
index 1592f8ad05c..eddcb393ab0 100644
--- a/ui/src/templates/components/TemplatesList.tsx
+++ b/ui/src/templates/components/TemplatesList.tsx
@@ -9,7 +9,7 @@ import EmptyTemplatesList from 'src/templates/components/EmptyTemplatesList'
 import TemplateCard from 'src/templates/components/TemplateCard'
 
 // Types
-import {TemplateSummary} from '@influxdata/influx'
+import {TemplateSummary} from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
 import {Sort} from 'src/clockface'
 
diff --git a/ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserListItem.tsx b/ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserListItem.tsx
index f00d03dfc3f..4a3d555f60f 100644
--- a/ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserListItem.tsx
+++ b/ui/src/templates/components/createFromTemplateOverlay/TemplateBrowserListItem.tsx
@@ -1,11 +1,12 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import classnames from 'classnames'
-import {TemplateSummary} from '@influxdata/influx'
 
 // Components
 import {Icon, IconFont} from '@influxdata/clockface'
 
+// Types
+import {TemplateSummary} from 'src/types'
 interface Props {
   onClick: (template: TemplateSummary) => void
   template: TemplateSummary
diff --git a/ui/src/templates/reducers/index.ts b/ui/src/templates/reducers/index.ts
index cda87538ac9..3007b61058e 100644
--- a/ui/src/templates/reducers/index.ts
+++ b/ui/src/templates/reducers/index.ts
@@ -1,7 +1,6 @@
 import {produce} from 'immer'
 import {Actions, ActionTypes} from 'src/templates/actions/'
-import {TemplateSummary, DocumentCreate} from '@influxdata/influx'
-import {RemoteDataState} from 'src/types'
+import {DocumentCreate, RemoteDataState, TemplateSummary} from 'src/types'
 
 export interface TemplatesState {
   status: RemoteDataState
diff --git a/ui/src/templates/utils/index.ts b/ui/src/templates/utils/index.ts
index 9adb7856353..fb8fbbbe3f2 100644
--- a/ui/src/templates/utils/index.ts
+++ b/ui/src/templates/utils/index.ts
@@ -5,7 +5,7 @@ import {
   Relationships,
   LabelRelationship,
 } from 'src/types'
-import {ILabel, IVariable as Variable} from '@influxdata/influx'
+import {Label, Variable} from 'src/client'
 
 export function findIncludedsFromRelationships<
   T extends {id: string; type: TemplateType}
@@ -33,7 +33,7 @@ export function findIncludedFromRelationship<
 }
 
 export const findLabelsToCreate = (
-  currentLabels: ILabel[],
+  currentLabels: Label[],
   labels: LabelIncluded[]
 ): LabelIncluded[] => {
   return labels.filter(
diff --git a/ui/src/timeMachine/components/variableToolbar/VariableItem.tsx b/ui/src/timeMachine/components/variableToolbar/VariableItem.tsx
index 2a2a3697b4a..ecec06ac35c 100644
--- a/ui/src/timeMachine/components/variableToolbar/VariableItem.tsx
+++ b/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/client'
 import VariableLabel from 'src/timeMachine/components/variableToolbar/VariableLabel'
 
 interface Props {
diff --git a/ui/src/timeMachine/components/variableToolbar/VariableToolbar.tsx b/ui/src/timeMachine/components/variableToolbar/VariableToolbar.tsx
index d794373f59c..3be52ba6e95 100644
--- a/ui/src/timeMachine/components/variableToolbar/VariableToolbar.tsx
+++ b/ui/src/timeMachine/components/variableToolbar/VariableToolbar.tsx
@@ -11,7 +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 {Variable} from 'src/client'
 import {AppState} from 'src/types'
 
 interface OwnProps {
diff --git a/ui/src/types/documents.ts b/ui/src/types/documents.ts
new file mode 100644
index 00000000000..6032dcb7f81
--- /dev/null
+++ b/ui/src/types/documents.ts
@@ -0,0 +1,9 @@
+import {Document as DocumentBase, DocumentCreate as DocCreate} from 'src/client'
+
+import {Labels} from 'src/types'
+
+export interface Document extends DocumentBase {
+  labels?: Labels
+}
+
+export interface DocumentCreate extends DocCreate {}
diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
index 2fcb2e019ed..37a328c7c85 100644
--- a/ui/src/types/index.ts
+++ b/ui/src/types/index.ts
@@ -5,6 +5,7 @@ export * from './colors'
 export * from './dashboards'
 export * from './dataExplorer'
 export * from './dataLoaders'
+export * from './documents'
 export * from './filterEditor'
 export * from './flux'
 export * from './layouts'
diff --git a/ui/src/types/templates.ts b/ui/src/types/templates.ts
index e08ce57313a..3c97298e0eb 100644
--- a/ui/src/types/templates.ts
+++ b/ui/src/types/templates.ts
@@ -1,11 +1,12 @@
 import {
-  IVariable as Variable,
-  IDashboard,
   Document,
+  DocumentListEntry,
   DocumentMeta,
-} from '@influxdata/influx'
-import {DocumentListEntry} from 'src/client'
-import {Label as ILabel} from 'src/types'
+  Dashboard,
+  Label,
+  Labels,
+  Variable,
+} from 'src/client'
 import {View, Cell} from './index'
 
 export enum TemplateType {
@@ -29,7 +30,7 @@ interface DocumentMetaWithTemplateID extends DocumentMeta {
 export interface TemplateBase extends Document {
   meta: DocumentMetaWithTemplateID
   content: {data: TemplateData; included: TemplateIncluded[]}
-  labels: ILabel[]
+  labels: Labels
 }
 
 // TODO: be more specific about what attributes can be
@@ -98,7 +99,7 @@ export interface CellIncluded extends TemplateIncluded {
 
 export interface LabelIncluded extends TemplateIncluded {
   type: TemplateType.Label
-  attributes: ILabel
+  attributes: Label
 }
 
 export interface VariableIncluded extends TemplateIncluded {
@@ -130,7 +131,7 @@ interface TaskTemplateData extends TemplateData {
 
 interface DashboardTemplateData extends TemplateData {
   type: TemplateType.Dashboard
-  attributes: IDashboard
+  attributes: Dashboard
   relationships: {
     [TemplateType.Label]: {data: LabelRelationship[]}
     [TemplateType.Cell]: {data: CellRelationship[]}
@@ -169,8 +170,12 @@ export interface VariableTemplate extends TemplateBase {
   }
 }
 
-export type Template = TaskTemplate | DashboardTemplate | VariableTemplate
+export type Template =
+  | TaskTemplate
+  | DashboardTemplate
+  | VariableTemplate
+  | Document
 
 export interface TemplateSummary extends DocumentListEntry {
-  labels: ILabel[]
+  labels: Label[]
 }
diff --git a/ui/src/variables/actions/index.ts b/ui/src/variables/actions/index.ts
index 96d409dae37..19aa8178eee 100644
--- a/ui/src/variables/actions/index.ts
+++ b/ui/src/variables/actions/index.ts
@@ -18,7 +18,7 @@ import {setExportTemplate} from 'src/templates/actions'
 
 // APIs
 import {createVariableFromTemplate as createVariableFromTemplateAJAX} from 'src/templates/api'
-
+import * as api from 'src/client'
 // Utils
 import {getValueSelections, extractVariablesList} from 'src/variables/selectors'
 import {CancelBox} from 'src/types/promises'
@@ -36,9 +36,10 @@ import {
   QueryArguments,
   MapArguments,
   CSVArguments,
+  GetState,
+  VariableArgumentType,
 } from 'src/types'
-import {GetState, VariableArgumentType} from 'src/types'
-import {IVariable as Variable, ILabel as Label} from '@influxdata/influx'
+import {Label, Variable} from 'src/client'
 import {VariableValuesByID} from 'src/variables/types'
 import {
   addVariableLabelFailed,
@@ -145,9 +146,12 @@ export const getVariables = () => async (
     const {
       orgs: {org},
     } = getState()
-    const variables = await client.variables.getAll(org.id)
+    const resp = await api.getVariables({query: {orgID: org.id}})
+    if (resp.status !== 200) {
+      throw new Error("Couldn't retreive variables for this organization")
+    }
 
-    dispatch(setVariables(RemoteDataState.Done, variables))
+    dispatch(setVariables(RemoteDataState.Done, resp.data.variables))
   } catch (e) {
     console.error(e)
     dispatch(setVariables(RemoteDataState.Error))
@@ -161,9 +165,12 @@ export const getVariable = (id: string) => async (
   try {
     dispatch(setVariable(id, RemoteDataState.Loading))
 
-    const variable = await client.variables.get(id)
+    const resp = await api.getVariable({variableID: id})
+    if (resp.status !== 200) {
+      throw new Error("Couldn't retrieve variable based on the ID")
+    }
 
-    dispatch(setVariable(id, RemoteDataState.Done, variable))
+    dispatch(setVariable(id, RemoteDataState.Done, resp.data))
   } catch (e) {
     console.error(e)
     dispatch(setVariable(id, RemoteDataState.Error))
@@ -178,14 +185,18 @@ export const createVariable = (
     const {
       orgs: {org},
     } = getState()
-    const createdVariable = await client.variables.create({
-      ...variable,
-      orgID: org.id,
+    const resp = await api.postVariable({
+      data: {
+        ...variable,
+        orgID: org.id,
+      },
     })
 
-    dispatch(
-      setVariable(createdVariable.id, RemoteDataState.Done, createdVariable)
-    )
+    if (resp.status !== 201) {
+      throw new Error('Failed to create variable from template')
+    }
+
+    dispatch(setVariable(resp.data.id, RemoteDataState.Done, resp.data))
     dispatch(notify(createVariableSuccess(variable.name)))
   } catch (e) {
     console.error(e)
@@ -215,16 +226,23 @@ export const createVariableFromTemplate = (
   }
 }
 
-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 variable = await client.variables.update(id, props)
+    const resp = await api.putVariable({
+      variableID: id,
+      data: props,
+    })
+
+    if (resp.status !== 200) {
+      throw new Error('An error occurred while updating the variable')
+    }
 
-    dispatch(setVariable(id, RemoteDataState.Done, variable))
-    dispatch(notify(updateVariableSuccess(variable.name)))
+    dispatch(setVariable(id, RemoteDataState.Done, resp.data))
+    dispatch(notify(updateVariableSuccess(resp.data.name)))
   } catch (e) {
     console.error(e)
     dispatch(setVariable(id, RemoteDataState.Error))
@@ -299,11 +317,23 @@ export const convertToTemplate = (variableID: string) => async (
     const {
       orgs: {org},
     } = getState()
-    const variable = await client.variables.get(variableID)
-    const allVariables = await client.variables.getAll(org.id)
+    const resp = await api.getVariable({variableID})
+
+    if (resp.status !== 200) {
+      throw new Error('There was an error getting the variable')
+    }
+    const allVariables = await api.getVariables({query: {orgID: org.id}})
+    if (allVariables.status !== 200) {
+      throw new Error(
+        "There was an error getting this organization's variables"
+      )
+    }
 
-    const dependencies = findDepedentVariables(variable, allVariables)
-    const variableTemplate = variableToTemplate(variable, dependencies)
+    const dependencies = findDepedentVariables(
+      resp.data,
+      allVariables.data.variables
+    )
+    const variableTemplate = variableToTemplate(resp.data, dependencies)
 
     dispatch(setExportTemplate(RemoteDataState.Done, variableTemplate))
   } catch (error) {
@@ -312,30 +342,38 @@ 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)
+    await api.postVariablesLabel({variableID, data: {labelID: label.id}})
+    const resp = await api.getVariable({variableID})
+
+    if (resp.status !== 200) {
+      throw new Error('There was an error adding the label to the variable')
+    }
 
-    dispatch(setVariable(variableID, RemoteDataState.Done, variable))
+    dispatch(setVariable(variableID, RemoteDataState.Done, resp.data))
   } catch (error) {
     console.error(error)
     dispatch(notify(addVariableLabelFailed()))
   }
 }
 
-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)
+    await api.deleteVariablesLabel({variableID, labelID: label.id})
+    const resp = await api.getVariable({variableID})
+
+    if (resp.status !== 200) {
+      throw new Error('There was an error removing the label from the variable')
+    }
 
-    dispatch(setVariable(variableID, RemoteDataState.Done, variable))
+    dispatch(setVariable(variableID, RemoteDataState.Done, resp.data))
   } catch (error) {
     console.error(error)
     dispatch(notify(removeVariableLabelFailed()))
diff --git a/ui/src/variables/components/RenameVariableForm.tsx b/ui/src/variables/components/RenameVariableForm.tsx
index 40d3eeec611..038c74fe1f0 100644
--- a/ui/src/variables/components/RenameVariableForm.tsx
+++ b/ui/src/variables/components/RenameVariableForm.tsx
@@ -16,7 +16,7 @@ import {updateVariable} from 'src/variables/actions'
 
 // Types
 import {AppState} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 import {
   ButtonType,
   ComponentColor,
diff --git a/ui/src/variables/components/UpdateVariableOverlay.tsx b/ui/src/variables/components/UpdateVariableOverlay.tsx
index a2810b7c62c..804bc69cb2c 100644
--- a/ui/src/variables/components/UpdateVariableOverlay.tsx
+++ b/ui/src/variables/components/UpdateVariableOverlay.tsx
@@ -26,7 +26,7 @@ import {extractVariablesList} from 'src/variables/selectors'
 import {variableItemTypes} from 'src/variables/constants'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 import {
   ButtonType,
   ComponentColor,
diff --git a/ui/src/variables/components/VariableArgumentsEditor.tsx b/ui/src/variables/components/VariableArgumentsEditor.tsx
index d16f8817c13..ce197342e41 100644
--- a/ui/src/variables/components/VariableArgumentsEditor.tsx
+++ b/ui/src/variables/components/VariableArgumentsEditor.tsx
@@ -24,7 +24,8 @@ const FluxMonacoEditor = Loadable({
 })
 
 // Types
-import {KeyValueMap, VariableArguments} from 'src/types'
+import {KeyValueMap} from 'src/types'
+import {VariableProperties as VariableArguments} from 'src/client'
 
 interface Props {
   args: VariableArguments
diff --git a/ui/src/variables/components/VariableCard.tsx b/ui/src/variables/components/VariableCard.tsx
index 8441a901e57..c73b2568d22 100644
--- a/ui/src/variables/components/VariableCard.tsx
+++ b/ui/src/variables/components/VariableCard.tsx
@@ -9,7 +9,7 @@ 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 {Variable, Label} from 'src/client'
 import {AppState} from 'src/types'
 
 // Selectors
@@ -17,8 +17,8 @@ import {viewableLabels} from 'src/labels/selectors'
 
 // Actions
 import {
-  addVariableLabelsAsync,
-  removeVariableLabelsAsync,
+  addVariableLabelAsync,
+  removeVariableLabelAsync,
 } from 'src/variables/actions'
 import {createLabel as createLabelAsync} from 'src/labels/actions'
 
@@ -31,12 +31,12 @@ interface OwnProps {
 }
 
 interface StateProps {
-  labels: ILabel[]
+  labels: Label[]
 }
 
 interface DispatchProps {
-  onAddVariableLabels: typeof addVariableLabelsAsync
-  onRemoveVariableLabels: typeof removeVariableLabelsAsync
+  onAddVariableLabel: typeof addVariableLabelAsync
+  onRemoveVariableLabel: typeof removeVariableLabelAsync
   onCreateLabel: typeof createLabelAsync
 }
 
@@ -95,19 +95,19 @@ class VariableCard extends PureComponent<Props & WithRouterProps> {
     )
   }
 
-  private handleAddLabel = (label: ILabel): void => {
-    const {variable, onAddVariableLabels} = this.props
+  private handleAddLabel = (label: Label): void => {
+    const {variable, onAddVariableLabel} = this.props
 
-    onAddVariableLabels(variable.id, [label])
+    onAddVariableLabel(variable.id, label)
   }
 
-  private handleRemoveLabel = (label: ILabel): void => {
-    const {variable, onRemoveVariableLabels} = this.props
+  private handleRemoveLabel = (label: Label): void => {
+    const {variable, onRemoveVariableLabel} = this.props
 
-    onRemoveVariableLabels(variable.id, [label])
+    onRemoveVariableLabel(variable.id, label)
   }
 
-  private handleCreateLabel = (label: ILabel): void => {
+  private handleCreateLabel = (label: Label): void => {
     const {name, properties} = label
     this.props.onCreateLabel(name, properties)
   }
@@ -134,14 +134,14 @@ class VariableCard extends PureComponent<Props & WithRouterProps> {
 
 const mstp = ({labels}: AppState): StateProps => {
   return {
-    labels: viewableLabels(labels.list as ILabel[]),
+    labels: viewableLabels(labels.list),
   }
 }
 
 const mdtp: DispatchProps = {
   onCreateLabel: createLabelAsync,
-  onAddVariableLabels: addVariableLabelsAsync,
-  onRemoveVariableLabels: removeVariableLabelsAsync,
+  onAddVariableLabel: addVariableLabelAsync,
+  onRemoveVariableLabel: removeVariableLabelAsync,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(
diff --git a/ui/src/variables/components/VariableContextMenu.tsx b/ui/src/variables/components/VariableContextMenu.tsx
index acc4c0f5da8..80e3b735346 100644
--- a/ui/src/variables/components/VariableContextMenu.tsx
+++ b/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/client'
 
 interface Props {
   variable: Variable
diff --git a/ui/src/variables/components/VariableExportOverlay.tsx b/ui/src/variables/components/VariableExportOverlay.tsx
index 06dc4fc2ac2..823c83137b1 100644
--- a/ui/src/variables/components/VariableExportOverlay.tsx
+++ b/ui/src/variables/components/VariableExportOverlay.tsx
@@ -10,9 +10,7 @@ import {convertToTemplate as convertToTemplateAction} from 'src/variables/action
 import {clearExportTemplate as clearExportTemplateAction} from 'src/templates/actions'
 
 // Types
-import {AppState} from 'src/types'
-import {DocumentCreate} from '@influxdata/influx'
-import {RemoteDataState} from 'src/types'
+import {AppState, DocumentCreate, RemoteDataState} from 'src/types'
 
 interface OwnProps {
   params: {id: string}
diff --git a/ui/src/variables/components/VariableFormContext.tsx b/ui/src/variables/components/VariableFormContext.tsx
index bdcbdfd0e60..69a962cbabe 100644
--- a/ui/src/variables/components/VariableFormContext.tsx
+++ b/ui/src/variables/components/VariableFormContext.tsx
@@ -27,7 +27,7 @@ import {
 import VariableForm from 'src/variables/components/VariableForm'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 import {
   AppState,
   VariableArgumentType,
diff --git a/ui/src/variables/components/VariableList.tsx b/ui/src/variables/components/VariableList.tsx
index 607e4c99b61..d17c53c2174 100644
--- a/ui/src/variables/components/VariableList.tsx
+++ b/ui/src/variables/components/VariableList.tsx
@@ -7,7 +7,7 @@ import {ResourceList} from '@influxdata/clockface'
 import VariableCard from 'src/variables/components/VariableCard'
 
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 import {OverlayState} from 'src/types'
 import {SortTypes} from 'src/shared/utils/sort'
 import {Sort} from '@influxdata/clockface'
diff --git a/ui/src/variables/components/VariablesTab.tsx b/ui/src/variables/components/VariablesTab.tsx
index ef81ce79eaf..7e15daeb4af 100644
--- a/ui/src/variables/components/VariablesTab.tsx
+++ b/ui/src/variables/components/VariablesTab.tsx
@@ -16,13 +16,11 @@ import VariableList from 'src/variables/components/VariableList'
 import FilterList from 'src/shared/components/Filter'
 import AddResourceDropdown from 'src/shared/components/AddResourceDropdown'
 import GetResources, {ResourceType} from 'src/shared/components/GetResources'
-import {Sort} from '@influxdata/clockface'
 
 // Types
-import {OverlayState} from 'src/types'
-import {AppState} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
-import {ComponentSize} from '@influxdata/clockface'
+import {AppState, OverlayState} from 'src/types'
+import {ComponentSize, Sort} from '@influxdata/clockface'
+import {Variable} from 'src/client'
 import {SortTypes} from 'src/shared/utils/sort'
 
 interface StateProps {
@@ -154,7 +152,7 @@ class VariablesTab extends PureComponent<Props, State> {
     router.push(`/orgs/${orgID}/settings/variables/new`)
   }
 
-  private handleUpdateVariable = (variable: Partial<Variable>): void => {
+  private handleUpdateVariable = (variable: Variable): void => {
     const {onUpdateVariable} = this.props
 
     onUpdateVariable(variable.id, variable)
diff --git a/ui/src/variables/mocks/index.ts b/ui/src/variables/mocks/index.ts
index 12f2db9e227..43aafda1250 100644
--- a/ui/src/variables/mocks/index.ts
+++ b/ui/src/variables/mocks/index.ts
@@ -1,5 +1,5 @@
 // Types
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 
 export const createVariable = (
   name: string,
diff --git a/ui/src/variables/reducers/index.ts b/ui/src/variables/reducers/index.ts
index 6f859f8b309..2da18079205 100644
--- a/ui/src/variables/reducers/index.ts
+++ b/ui/src/variables/reducers/index.ts
@@ -12,7 +12,7 @@ import {
 } from 'src/types'
 import {VariableValuesByID} from 'src/variables/types'
 import {Action, EditorAction} from 'src/variables/actions'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 
 export const initialEditorState = (): VariableEditorState => ({
   name: '',
diff --git a/ui/src/variables/selectors/index.tsx b/ui/src/variables/selectors/index.tsx
index c2fd79c0342..47c81ea7323 100644
--- a/ui/src/variables/selectors/index.tsx
+++ b/ui/src/variables/selectors/index.tsx
@@ -19,7 +19,7 @@ import {
   VariableValuesByID,
   ValueSelections,
 } from 'src/variables/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 
 type VariablesState = AppState['variables']['variables']
 type ValuesState = AppState['variables']['values']['contextID']
diff --git a/ui/src/variables/utils/exportVariables.ts b/ui/src/variables/utils/exportVariables.ts
index e0e5be64549..f300f171e85 100644
--- a/ui/src/variables/utils/exportVariables.ts
+++ b/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/client'
 
 const getDescendantsFromGraph = (
   variable: Variable,
diff --git a/ui/src/variables/utils/hydrateVars.test.ts b/ui/src/variables/utils/hydrateVars.test.ts
index 6e90a473761..0e23ab3290e 100644
--- a/ui/src/variables/utils/hydrateVars.test.ts
+++ b/ui/src/variables/utils/hydrateVars.test.ts
@@ -7,6 +7,7 @@ import {createMapVariable, createVariable} from 'src/variables/mocks'
 
 // Types
 import {CancellationError} from 'src/types/promises'
+import {Variable} from 'src/client'
 
 class FakeFetcher implements ValueFetcher {
   responses = {}
@@ -190,7 +191,7 @@ describe('hydrate vars', () => {
           k: 'v',
         },
       },
-    }
+    } as Variable
 
     const vars = [a, b]
 
@@ -230,7 +231,7 @@ describe('hydrate vars', () => {
         type: 'constant',
         values: ['v1', 'v2'],
       },
-    }
+    } as Variable
 
     const vars = [a, b]
 
diff --git a/ui/src/variables/utils/hydrateVars.ts b/ui/src/variables/utils/hydrateVars.ts
index ae2d75cae89..2d958a59843 100644
--- a/ui/src/variables/utils/hydrateVars.ts
+++ b/ui/src/variables/utils/hydrateVars.ts
@@ -9,7 +9,7 @@ import {OPTION_NAME, BOUNDARY_GROUP} from 'src/variables/constants/index'
 
 // Types
 import {RemoteDataState} from 'src/types'
-import {IVariable as Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 import {CancelBox, CancellationError} from 'src/types/promises'
 import {
   VariableValues,
@@ -412,6 +412,7 @@ export const hydrateVars = (
 
       return Promise.all(node.parents.filter(readyToResolve).map(resolve))
     } catch (e) {
+      console.error(e)
       if (e.name === 'CancellationError') {
         return
       }
diff --git a/ui/src/variables/utils/validation.ts b/ui/src/variables/utils/validation.ts
index 1f3f7fac343..06fe0c62a22 100644
--- a/ui/src/variables/utils/validation.ts
+++ b/ui/src/variables/utils/validation.ts
@@ -1,4 +1,4 @@
-import {Variable} from '@influxdata/influx'
+import {Variable} from 'src/client'
 import {
   TIME_RANGE_START,
   TIME_RANGE_STOP,

From fca72becb8f7dc2ae93950c4566069c8eb20b463 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Mon, 23 Dec 2019 15:03:10 -0800
Subject: [PATCH 11/13] fix(ui): resolved rebase conflicts

---
 ui/src/telegrafs/components/CollectorCard.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/ui/src/telegrafs/components/CollectorCard.tsx b/ui/src/telegrafs/components/CollectorCard.tsx
index 09a3c242bbb..ee80db16abf 100644
--- a/ui/src/telegrafs/components/CollectorCard.tsx
+++ b/ui/src/telegrafs/components/CollectorCard.tsx
@@ -133,21 +133,13 @@ class CollectorRow extends PureComponent<Props & WithRouterProps> {
   }
 
   private handleAddLabel = async (label: Label) => {
-<<<<<<< HEAD
-    const {collector, onAddLabels} = this.props
-=======
     const {collector, onAddLabel} = this.props
->>>>>>> feat(ui): completed feature
 
     await onAddLabel(collector.id, label)
   }
 
   private handleRemoveLabel = async (label: Label) => {
-<<<<<<< HEAD
-    const {collector, onRemoveLabels} = this.props
-=======
     const {collector, onRemoveLabel} = this.props
->>>>>>> feat(ui): completed feature
 
     await onRemoveLabel(collector.id, label)
   }

From a2f70cd8859f612bf63c61c5e53d3d6159b297e1 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Thu, 26 Dec 2019 07:43:58 -0800
Subject: [PATCH 12/13] fix(ui): addressed failing tests, still need to work on
 PR changes

---
 CHANGELOG.md                                  | 11 ++++++-----
 ui/src/dataLoaders/actions/dataLoaders.ts     |  4 ++--
 ui/src/dataLoaders/reducers/telegrafEditor.ts |  2 +-
 ui/src/telegrafs/components/CollectorCard.tsx |  2 +-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7e52ac51cf..af40fd996a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,11 +3,11 @@
 ### Features
 
 1. [16234](https://github.com/influxdata/influxdb/pull/16234): Add support for notification endpoints to influx templates/pkgs.
-2. [16242](https://github.com/influxdata/influxdb/pull/16242): Drop id prefix for secret key requirement for notification endpoints
-3. [16259](https://github.com/influxdata/influxdb/pull/16259): Add support for check resource to pkger parser
-4. [16262](https://github.com/influxdata/influxdb/pull/16262): Add support for check resource pkger dry run functionality
-5. [16275](https://github.com/influxdata/influxdb/pull/16275): Add support for check resource pkger apply functionality
-6. [16283](https://github.com/influxdata/influxdb/pull/16283): Add support for check resource pkger export functionality
+1. [16242](https://github.com/influxdata/influxdb/pull/16242): Drop id prefix for secret key requirement for notification endpoints
+1. [16259](https://github.com/influxdata/influxdb/pull/16259): Add support for check resource to pkger parser
+1. [16262](https://github.com/influxdata/influxdb/pull/16262): Add support for check resource pkger dry run functionality
+1. [16275](https://github.com/influxdata/influxdb/pull/16275): Add support for check resource pkger apply functionality
+1. [16283](https://github.com/influxdata/influxdb/pull/16283): Add support for check resource pkger export functionality
 1. [16212](https://github.com/influxdata/influxdb/pull/16212): Add new kv.ForwardCursor interface
 1. [16297](https://github.com/influxdata/influxdb/pull/16297): Add support for notification rule to pkger parser
 1. [16298](https://github.com/influxdata/influxdb/pull/16298): Add support for notification rule pkger dry run functionality
@@ -17,6 +17,7 @@
 1. [16322](https://github.com/influxdata/influxdb/pull/16322): Add support for tasks to pkger dry run functionality
 1. [16323](https://github.com/influxdata/influxdb/pull/16323): Add support for tasks to pkger apply functionality
 1. [16324](https://github.com/influxdata/influxdb/pull/16324): Add support for tasks to pkger export functionality
+1. [16325](https://github.com/influxdata/influxdb/pull/16325): Add support for last run status, last completed, last run scheduled, and last run error for checks and notification rules
 
 ### Bug Fixes
 
diff --git a/ui/src/dataLoaders/actions/dataLoaders.ts b/ui/src/dataLoaders/actions/dataLoaders.ts
index 4132c6238be..536373abb6e 100644
--- a/ui/src/dataLoaders/actions/dataLoaders.ts
+++ b/ui/src/dataLoaders/actions/dataLoaders.ts
@@ -46,7 +46,7 @@ import {
   TelegrafConfigCreationSuccess,
   readWriteCardinalityLimitReached,
 } from 'src/shared/copy/notifications'
-import {Telegraf, TelegrafRequestPlugin} from 'src/client'
+import {Telegraf} from 'src/client'
 
 type GetState = () => AppState
 
@@ -381,7 +381,7 @@ export const createOrUpdateTelegrafConfigAsync = () => async (
       data: {
         name: telegrafConfigName,
         description: telegrafConfigDescription,
-        plugins: plugins as TelegrafRequestPlugin[],
+        // plugins: plugins as TelegrafPlugin[], // TODO: figure out if still relevant
       },
     })
 
diff --git a/ui/src/dataLoaders/reducers/telegrafEditor.ts b/ui/src/dataLoaders/reducers/telegrafEditor.ts
index 555843dbd51..647e8b88a2f 100644
--- a/ui/src/dataLoaders/reducers/telegrafEditor.ts
+++ b/ui/src/dataLoaders/reducers/telegrafEditor.ts
@@ -103,7 +103,7 @@ logfile = ""
 hostname = ""
 ## If set to true, do no set the "host" tag in the telegraf agent.
   omit_hostname = false
-`
+`,
   },
   {
     name: '__default__',
diff --git a/ui/src/telegrafs/components/CollectorCard.tsx b/ui/src/telegrafs/components/CollectorCard.tsx
index ee80db16abf..007ed121cc8 100644
--- a/ui/src/telegrafs/components/CollectorCard.tsx
+++ b/ui/src/telegrafs/components/CollectorCard.tsx
@@ -118,7 +118,7 @@ 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[])
+    const collectorLabels = viewableLabels(collector.labels)
 
     return (
       <InlineLabels

From 4f13d1969aac2f8a0cd35ce87cd3669767d23d63 Mon Sep 17 00:00:00 2001
From: asalem <ariel.salem1989@gmail.com>
Date: Thu, 26 Dec 2019 15:56:20 -0800
Subject: [PATCH 13/13] fix(ui): revised dashboards api to resolve broken e2e
 test

---
 http/check_service.go                   |  12 +--
 http/notification_rule.go               |  12 +--
 ui/src/tasks/actions/index.ts           |  46 ++++++---
 ui/src/tasks/components/RunLogRow.tsx   |   4 +-
 ui/src/tasks/components/RunLogsList.tsx |   2 +-
 ui/src/tasks/components/TaskRunsRow.tsx |   2 +-
 ui/src/tasks/reducers/index.ts          |   2 +-
 ui/src/telegrafs/actions/index.ts       |  20 ++--
 ui/src/templates/actions/index.ts       |   5 +-
 ui/src/templates/api/index.ts           | 126 ++++++++++++++----------
 10 files changed, 141 insertions(+), 90 deletions(-)

diff --git a/http/check_service.go b/http/check_service.go
index 6fa925a34e1..90092e78696 100644
--- a/http/check_service.go
+++ b/http/check_service.go
@@ -142,8 +142,8 @@ type checkResponse struct {
 	Status          string           `json:"status"`
 	Labels          []influxdb.Label `json:"labels"`
 	Links           checkLinks       `json:"links"`
-	LatestCompleted string           `json:"latestCompleted,omitempty"`
-	LatestScheduled string           `json:"latestScheduled,omitempty"`
+	LatestCompleted time.Time        `json:"latestCompleted,omitempty"`
+	LatestScheduled time.Time        `json:"latestScheduled,omitempty"`
 	LastRunStatus   string           `json:"LastRunStatus,omitempty"`
 	LastRunError    string           `json:"LastRunError,omitempty"`
 }
@@ -167,8 +167,8 @@ func (resp checkResponse) MarshalJSON() ([]byte, error) {
 		Labels          []influxdb.Label `json:"labels"`
 		Links           checkLinks       `json:"links"`
 		Status          string           `json:"status"`
-		LatestCompleted string           `json:"latestCompleted,omitempty"`
-		LatestScheduled string           `json:"latestScheduled,omitempty"`
+		LatestCompleted time.Time        `json:"latestCompleted,omitempty"`
+		LatestScheduled time.Time        `json:"latestScheduled,omitempty"`
 		LastRunStatus   string           `json:"lastRunStatus,omitempty"`
 		LastRunError    string           `json:"lastRunError,omitempty"`
 	}{
@@ -212,8 +212,8 @@ func (h *CheckHandler) newCheckResponse(ctx context.Context, chk influxdb.Check,
 			Query:   fmt.Sprintf("/api/v2/checks/%s/query", chk.GetID()),
 		},
 		Labels:          []influxdb.Label{},
-		LatestCompleted: task.LatestCompleted.Format(time.RFC3339),
-		LatestScheduled: task.LatestScheduled.Format(time.RFC3339),
+		LatestCompleted: task.LatestCompleted,
+		LatestScheduled: task.LatestScheduled,
 		LastRunStatus:   task.LastRunStatus,
 		LastRunError:    task.LastRunError,
 	}
diff --git a/http/notification_rule.go b/http/notification_rule.go
index 7798c262412..d4db95087ce 100644
--- a/http/notification_rule.go
+++ b/http/notification_rule.go
@@ -150,8 +150,8 @@ type notificationRuleResponse struct {
 	Labels          []influxdb.Label      `json:"labels"`
 	Links           notificationRuleLinks `json:"links"`
 	Status          string                `json:"status"`
-	LatestCompleted string                `json:"latestCompleted,omitempty"`
-	LatestScheduled string                `json:"latestScheduled,omitempty"`
+	LatestCompleted time.Time             `json:"latestCompleted,omitempty"`
+	LatestScheduled time.Time             `json:"latestScheduled,omitempty"`
 	LastRunStatus   string                `json:"LastRunStatus,omitempty"`
 	LastRunError    string                `json:"LastRunError,omitempty"`
 }
@@ -166,8 +166,8 @@ func (resp notificationRuleResponse) MarshalJSON() ([]byte, error) {
 		Labels          []influxdb.Label      `json:"labels"`
 		Links           notificationRuleLinks `json:"links"`
 		Status          string                `json:"status"`
-		LatestCompleted string                `json:"latestCompleted,omitempty"`
-		LatestScheduled string                `json:"latestScheduled,omitempty"`
+		LatestCompleted time.Time             `json:"latestCompleted,omitempty"`
+		LatestScheduled time.Time             `json:"latestScheduled,omitempty"`
 		LastRunStatus   string                `json:"lastRunStatus,omitempty"`
 		LastRunError    string                `json:"lastRunError,omitempty"`
 	}{
@@ -210,8 +210,8 @@ func (h *NotificationRuleHandler) newNotificationRuleResponse(ctx context.Contex
 		},
 		Labels:          []influxdb.Label{},
 		Status:          t.Status,
-		LatestCompleted: t.LatestCompleted.Format(time.RFC3339),
-		LatestScheduled: t.LatestScheduled.Format(time.RFC3339),
+		LatestCompleted: t.LatestCompleted,
+		LatestScheduled: t.LatestScheduled,
 		LastRunStatus:   t.LastRunStatus,
 		LastRunError:    t.LastRunError,
 	}
diff --git a/ui/src/tasks/actions/index.ts b/ui/src/tasks/actions/index.ts
index 0f1987bef17..2732a77e318 100644
--- a/ui/src/tasks/actions/index.ts
+++ b/ui/src/tasks/actions/index.ts
@@ -3,7 +3,6 @@ import {push, goBack} from 'react-router-redux'
 import _ from 'lodash'
 
 // APIs
-import {client} from 'src/utils/api'
 import {notify} from 'src/shared/actions/notifications'
 import * as api from 'src/client'
 import {
@@ -36,8 +35,7 @@ import * as copy from 'src/shared/copy/notifications'
 import {AppState, Task, TaskTemplate} from 'src/types'
 import {RemoteDataState} from '@influxdata/clockface'
 import {Run} from 'src/tasks/components/TaskRunsPage'
-import {LogEvent} from '@influxdata/influx'
-import {Label} from 'src/client'
+import {Label, LogEvent} from 'src/client'
 // Utils
 import {getErrorMessage} from 'src/utils/api'
 import {insertPreambleInScript} from 'src/shared/utils/insertPreambleInScript'
@@ -325,7 +323,7 @@ export const updateTaskName = (task: Task) => async dispatch => {
 
 export const deleteTask = (task: Task) => async dispatch => {
   try {
-    await client.tasks.delete(task.id)
+    await api.deleteTask({taskID: task.id})
 
     dispatch(getTasks())
     dispatch(notify(taskDeleteSuccess()))
@@ -338,7 +336,17 @@ export const deleteTask = (task: Task) => async dispatch => {
 
 export const cloneTask = (task: Task, _) => async dispatch => {
   try {
-    await client.tasks.clone(task.id)
+    const resp = await api.getTask({taskID: task.id})
+
+    if (resp.status !== 200 || resp.data.orgID === undefined) {
+      throw new Error('An error occurred cloning the task')
+    }
+
+    const newTask = await api.postTask({data: resp.data})
+
+    if (newTask.status !== 201) {
+      throw new Error('An error occurred cloning over the task data')
+    }
 
     dispatch(notify(taskCloneSuccess(task.name)))
     dispatch(getTasks())
@@ -443,7 +451,7 @@ export const updateScript = () => async (dispatch, getState: GetStateFunc) => {
       updatedTask.every = null
     }
 
-    await client.tasks.update(task.id, updatedTask)
+    await api.patchTask({taskID: task.id, data: updatedTask})
 
     dispatch(goToTasks())
     dispatch(setCurrentTask(null))
@@ -465,7 +473,7 @@ export const saveNewScript = (script: string, preamble: string) => async (
     const {
       orgs: {org},
     } = getState()
-    await client.tasks.createByOrgID(org.id, fluxScript, null)
+    await api.postTask({data: {orgID: org.id, flux: fluxScript}})
 
     dispatch(setNewScript(''))
     dispatch(clearTask())
@@ -488,10 +496,15 @@ export const getRuns = (taskID: string) => async (dispatch): Promise<void> => {
   try {
     dispatch(setRuns([], RemoteDataState.Loading))
 
-    const [runs] = await Promise.all([
-      client.tasks.getRunsByTaskID(taskID),
-      dispatch(selectTaskByID(taskID)),
-    ])
+    const resp = await api.getTasksRuns({taskID})
+
+    if (resp.status !== 200) {
+      throw new Error('An error occurred getting the runs for this task')
+    }
+
+    let [runs] = await Promise.all([dispatch(selectTaskByID(taskID))])
+
+    runs = runs.concat(resp.data)
 
     const runsWithDuration = runs.map(run => {
       const finished = new Date(run.finishedAt)
@@ -514,7 +527,7 @@ export const getRuns = (taskID: string) => async (dispatch): Promise<void> => {
 
 export const runTask = (taskID: string) => async dispatch => {
   try {
-    await client.tasks.startRunByTaskID(taskID)
+    await api.postTasksRun({taskID})
     dispatch(notify(taskRunSuccess()))
   } catch (error) {
     const message = getErrorMessage(error)
@@ -527,8 +540,13 @@ export const getLogs = (taskID: string, runID: string) => async (
   dispatch
 ): Promise<void> => {
   try {
-    const logs = await client.tasks.getLogEventsByRunID(taskID, runID)
-    dispatch(setLogs(logs))
+    const resp = await api.getTasksRunsLogs({taskID, runID})
+    if (resp.status !== 200) {
+      throw new Error(
+        'An error occurred while retrieving the log for the task runs'
+      )
+    }
+    dispatch(setLogs(resp.data.events))
   } catch (error) {
     console.error(error)
     dispatch(setLogs([]))
diff --git a/ui/src/tasks/components/RunLogRow.tsx b/ui/src/tasks/components/RunLogRow.tsx
index 10038367d63..e06999de874 100644
--- a/ui/src/tasks/components/RunLogRow.tsx
+++ b/ui/src/tasks/components/RunLogRow.tsx
@@ -7,7 +7,7 @@ import moment from 'moment'
 import {IndexList} from '@influxdata/clockface'
 
 // Types
-import {LogEvent} from '@influxdata/influx'
+import {LogEvent} from 'src/client'
 import {DEFAULT_TIME_FORMAT} from 'src/shared/constants'
 
 interface Props {
@@ -36,7 +36,7 @@ class RunLogRow extends PureComponent<Props> {
     )
   }
 
-  private dateTimeString(dt: Date): string {
+  private dateTimeString(dt: string): string {
     if (!dt) {
       return ''
     }
diff --git a/ui/src/tasks/components/RunLogsList.tsx b/ui/src/tasks/components/RunLogsList.tsx
index 49c1fb567e1..cfd5b8b96a7 100644
--- a/ui/src/tasks/components/RunLogsList.tsx
+++ b/ui/src/tasks/components/RunLogsList.tsx
@@ -8,7 +8,7 @@ import RunLogRow from 'src/tasks/components/RunLogRow'
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 
 // Types
-import {LogEvent} from '@influxdata/influx'
+import {LogEvent} from 'src/client'
 
 interface Props {
   onDismissOverlay: () => void
diff --git a/ui/src/tasks/components/TaskRunsRow.tsx b/ui/src/tasks/components/TaskRunsRow.tsx
index 66a1c518a47..6882aa66852 100644
--- a/ui/src/tasks/components/TaskRunsRow.tsx
+++ b/ui/src/tasks/components/TaskRunsRow.tsx
@@ -12,7 +12,7 @@ import {getLogs} from 'src/tasks/actions'
 
 // Types
 import {ComponentSize, ComponentColor, Button} from '@influxdata/clockface'
-import {LogEvent} from '@influxdata/influx'
+import {LogEvent} from 'src/client'
 import {AppState} from 'src/types'
 import {DEFAULT_TIME_FORMAT} from 'src/shared/constants'
 import {Run} from 'src/tasks/components/TaskRunsPage'
diff --git a/ui/src/tasks/reducers/index.ts b/ui/src/tasks/reducers/index.ts
index fab12014297..7cca6c8d16f 100644
--- a/ui/src/tasks/reducers/index.ts
+++ b/ui/src/tasks/reducers/index.ts
@@ -1,9 +1,9 @@
 import {TaskOptions, TaskSchedule} from 'src/utils/taskOptionsToFluxScript'
-import {LogEvent} from '@influxdata/influx'
 
 // Types
 import {Action} from 'src/tasks/actions'
 import {Task} from 'src/types'
+import {LogEvent} from 'src/client'
 import {RemoteDataState} from '@influxdata/clockface'
 import {Run} from 'src/tasks/components/TaskRunsPage'
 
diff --git a/ui/src/telegrafs/actions/index.ts b/ui/src/telegrafs/actions/index.ts
index 33ff0e115f5..908b919c2e4 100644
--- a/ui/src/telegrafs/actions/index.ts
+++ b/ui/src/telegrafs/actions/index.ts
@@ -1,5 +1,4 @@
 // API
-import {client} from 'src/utils/api'
 import * as api from 'src/client'
 
 // Types
@@ -154,7 +153,7 @@ export const deleteTelegraf = (id: string, name: string) => async (
   dispatch: Dispatch<Action>
 ) => {
   try {
-    await client.telegrafConfigs.delete(id)
+    await api.deleteTelegraf({telegrafID: id})
 
     dispatch(removeTelegraf(id))
   } catch (e) {
@@ -168,7 +167,10 @@ export const addTelelgrafLabelAsync = (
   label: Label
 ): ThunkAction<Promise<void>> => async (dispatch): Promise<void> => {
   try {
-    await api.postTelegrafsLabel({telegrafID, data: {labelID: label as string}})
+    await api.postTelegrafsLabel({
+      telegrafID,
+      data: {labelID: label.id},
+    })
     const resp = await api.getTelegraf({telegrafID})
 
     if (resp.status !== 200) {
@@ -189,7 +191,7 @@ export const removeTelelgrafLabelAsync = (
   label: Label
 ): ThunkAction<Promise<void>> => async (dispatch): Promise<void> => {
   try {
-    await api.deleteTelegrafsLabel({telegrafID, labelID: label as string})
+    await api.deleteTelegrafsLabel({telegrafID, labelID: label.id})
     const resp = await api.getTelegraf({telegrafID})
 
     if (resp.status !== 200) {
@@ -210,8 +212,14 @@ export const getTelegrafConfigToml = (telegrafConfigID: string) => async (
 ): Promise<void> => {
   try {
     dispatch(setCurrentConfig(RemoteDataState.Loading))
-    const config = await client.telegrafConfigs.getTOML(telegrafConfigID)
-    dispatch(setCurrentConfig(RemoteDataState.Done, config))
+    const resp = await api.getTelegraf({
+      telegrafID: telegrafConfigID,
+      headers: {Accept: 'application/toml'},
+    })
+    if (resp.status !== 200) {
+      throw new Error("Couldn't get the telegraf config for this organization")
+    }
+    dispatch(setCurrentConfig(RemoteDataState.Done, resp.data as string))
   } catch (error) {
     dispatch(setCurrentConfig(RemoteDataState.Error))
     dispatch(notify(getTelegrafConfigFailed()))
diff --git a/ui/src/templates/actions/index.ts b/ui/src/templates/actions/index.ts
index dd13843af86..2c0db8a3fde 100644
--- a/ui/src/templates/actions/index.ts
+++ b/ui/src/templates/actions/index.ts
@@ -24,7 +24,6 @@ import {notify} from 'src/shared/actions/notifications'
 import * as copy from 'src/shared/copy/notifications'
 
 // API
-import {client} from 'src/utils/api'
 import {createDashboardFromTemplate} from 'src/dashboards/actions'
 import {createVariableFromTemplate} from 'src/variables/actions'
 import {createTaskFromTemplate} from 'src/tasks/actions'
@@ -133,7 +132,7 @@ export const getTemplates = () => async (dispatch, getState: GetState) => {
       throw new Error("Couldn't get the templates for this org")
     }
 
-    const items = resp.data as TemplateSummary[]
+    const items = resp.data.documents as TemplateSummary[]
 
     dispatch(populateTemplateSummaries(items))
   } catch (e) {
@@ -246,7 +245,7 @@ export const deleteTemplate = (templateID: string) => async (
   dispatch
 ): Promise<void> => {
   try {
-    await client.templates.delete(templateID)
+    await api.deleteDocumentsTemplate({templateID})
     dispatch(removeTemplateSummary(templateID))
     dispatch(notify(copy.deleteTemplateSuccess()))
   } catch (e) {
diff --git a/ui/src/templates/api/index.ts b/ui/src/templates/api/index.ts
index 8d3220af1aa..9fbfde6ce8e 100644
--- a/ui/src/templates/api/index.ts
+++ b/ui/src/templates/api/index.ts
@@ -10,10 +10,9 @@ import {
   Task,
   VariableTemplate,
 } from 'src/types'
-import {IDashboard, Cell} from '@influxdata/influx'
-import {client} from 'src/utils/api'
+import {Cell} from '@influxdata/influx'
 import * as api from 'src/client'
-import {Variable} from 'src/client'
+import {Variable, Dashboard} from 'src/client'
 import {
   findIncludedsFromRelationships,
   findLabelsToCreate,
@@ -29,7 +28,7 @@ import {
 export const createDashboardFromTemplate = async (
   template: DashboardTemplate,
   orgID: string
-): Promise<IDashboard> => {
+): Promise<Dashboard> => {
   const {content} = template
 
   if (
@@ -39,38 +38,52 @@ export const createDashboardFromTemplate = async (
     throw new Error('Cannot create dashboard from this template')
   }
 
-  const createdDashboard = await client.dashboards.create({
-    ...content.data.attributes,
-    orgID,
+  const resp = await api.postDashboard({
+    data: {
+      orgID,
+      ...content.data.attributes,
+    },
   })
 
-  if (!createdDashboard || !createdDashboard.id) {
+  if (resp.status !== 201) {
     throw new Error('Failed to create dashboard from template')
   }
 
   // associate imported label id with new label
   const labelMap = await createLabelsFromTemplate(template, orgID)
-
   await Promise.all([
-    await addDashboardLabelsFromTemplate(template, labelMap, createdDashboard),
-    await createCellsFromTemplate(template, createdDashboard),
+    await addDashboardLabelsFromTemplate(template, labelMap, resp.data),
+    await createCellsFromTemplate(template, resp.data),
   ])
 
   await createVariablesFromTemplate(template, labelMap, orgID)
 
-  const dashboard = await client.dashboards.get(createdDashboard.id)
-  return dashboard
+  const dashboard = await api.getDashboard({dashboardID: resp.data.id})
+
+  if (dashboard.status !== 200) {
+    throw new Error('An error occurred getting the dashboard')
+  }
+  return dashboard.data
 }
 
 const addDashboardLabelsFromTemplate = async (
   template: DashboardTemplate,
   labelMap: LabelMap,
-  dashboard: IDashboard
+  dashboard: Dashboard
 ) => {
-  const labelRelationships = getLabelRelationships(template.content.data)
-  const labelIDs = labelRelationships.map(l => labelMap[l.id] || '')
-
-  await client.dashboards.addLabels(dashboard.id, labelIDs)
+  try {
+    const labelRelationships = getLabelRelationships(template.content.data)
+    const [labelID] = labelRelationships.map(l => labelMap[l.id] || '')
+    const resp = await api.postDashboardsLabel({
+      dashboardID: dashboard.id,
+      data: {labelID},
+    })
+    if (resp.status !== 201) {
+      throw new Error('An error occurred when adding the dashboard labels')
+    }
+  } catch (e) {
+    console.error(e)
+  }
 }
 
 type LabelMap = {[importedID: string]: CreatedLabelID}
@@ -101,19 +114,30 @@ const createLabelsFromTemplate = async <T extends TemplateBase>(
     labelRelationships
   )
 
-  const existingLabels = await client.labels.getAll(orgID)
+  const resp = await api.getLabels({query: {orgID}})
 
-  const labelsToCreate = findLabelsToCreate(existingLabels, includedLabels).map(
-    l => ({
-      orgID,
-      name: _.get(l, 'attributes.name', ''),
-      properties: _.get(l, 'attributes.properties', {}),
-    })
-  )
+  if (resp.status !== 200) {
+    throw new Error('An error occurred getting the labels')
+  }
 
-  const createdLabels = await client.labels.createAll(labelsToCreate)
-  const allLabels = [...createdLabels, ...existingLabels]
+  const labelsToCreate = findLabelsToCreate(
+    resp.data.labels,
+    includedLabels
+  ).map(l => ({
+    orgID,
+    name: _.get(l, 'attributes.name', ''),
+    properties: _.get(l, 'attributes.properties', {}),
+  }))
+
+  const promisedLabels = labelsToCreate.map(l => {
+    return api
+      .postLabel({data: l})
+      .then(res => _.get(res, 'res.data.label', ''))
+  })
+
+  const createdLabels = await Promise.all(promisedLabels)
 
+  const allLabels = [...createdLabels, ...resp.data.labels]
   const labelMap: LabelMap = {}
 
   includedLabels.forEach(label => {
@@ -127,7 +151,7 @@ const createLabelsFromTemplate = async <T extends TemplateBase>(
 
 const createCellsFromTemplate = async (
   template: DashboardTemplate,
-  createdDashboard: IDashboard
+  createdDashboard: Dashboard
 ) => {
   const {
     content: {data, included},
@@ -144,14 +168,19 @@ const createCellsFromTemplate = async (
     cellRelationships
   )
 
-  const pendingCells = cellsToCreate.map(c => {
+  const pendingCells = cellsToCreate.map(async c => {
     const {
       attributes: {x, y, w, h},
     } = c
-    return client.dashboards.createCell(createdDashboard.id, {x, y, w, h})
+    return api
+      .postDashboardsCell({
+        dashboardID: createdDashboard.id,
+        data: {x, y, w, h},
+      })
+      .then(res => res.data)
   })
 
-  const cellResponses = await Promise.all(pendingCells)
+  const cellResponses = (await Promise.all(pendingCells)) as Cell[]
 
   createViewsFromTemplate(
     template,
@@ -181,11 +210,11 @@ const createViewsFromTemplate = async (
   })
 
   const pendingViews = viewsToCreate.map((v, i) => {
-    return client.dashboards.updateView(
+    return api.patchDashboardsCellsView({
       dashboardID,
-      cellResponses[i].id,
-      v.attributes
-    )
+      cellID: cellResponses[i].id,
+      data: v.attributes,
+    })
   })
 
   await Promise.all(pendingViews)
@@ -203,33 +232,30 @@ const createVariablesFromTemplate = async (
     return
   }
   const variablesIncluded = findIncludedVariables(included)
-
   const resp = await api.getVariables({query: {orgID}})
-
   if (resp.status !== 200) {
     throw new Error('An error occurred retrieving the variables')
   }
 
-  const variables = resp.data as Variable[]
-
   const variablesToCreate = findVariablesToCreate(
-    variables,
+    resp.data.variables,
     variablesIncluded
   ).map(v => ({...v.attributes, orgID}))
 
-  const createdVariables = variablesToCreate.filter(async vars => {
-    const resp = await api.postVariable({data: vars})
-    return resp.status === 201
-  })
+  const pendingVariables = variablesToCreate.map(vars =>
+    api.postVariable({data: vars}).then(res => res.data)
+  )
+
+  const createdVariables = await Promise.all(pendingVariables)
 
-  const allVars = [...variables, ...createdVariables]
+  const allVars = [...resp.data.variables, ...createdVariables] as Variable[]
 
   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] || '')
+    const [labelID] = labelRelationships.map(l => labelMap[l.id] || '')
 
-    await client.variables.addLabels(variable.id, labelIDs)
+    await api.postVariablesLabel({variableID: variable.id, data: {labelID}})
   })
 
   await Promise.all(addLabelsToVars)
@@ -284,8 +310,8 @@ const addTaskLabelsFromTemplate = async (
   task: Task
 ) => {
   const relationships = getLabelRelationships(template.content.data)
-  const labelIDs = relationships.map(l => labelMap[l.id] || '')
-  await client.tasks.addLabels(task.id, labelIDs)
+  const [labelID] = relationships.map(l => labelMap[l.id] || '')
+  await api.postTasksLabel({taskID: task.id, data: {labelID}})
 }
 
 export const createVariableFromTemplate = async (