feat(templates): adding new templates, removing calls to create templates (#14631)

* adding new templates; removing calls to create templates * fixing quickstart dashboard creation * Type dashboard template * bump templates repo version * add templateID to template meta in swagger * Add templateID to document meta type in UI * add templateID to telegrafPlugin and telegrafplugin info types * Instantiate templates from static templates * Get tests to pass * Fix type conflicts * Bump templates version * update changelog
2019-08-14 11:01:19 -07:00 · 2019-08-14 11:01:19 -07:00 · 8a5d0e6230
parent d006d80ee6
commit 8a5d0e6230
19 changed files with 109 additions and 116 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,9 @@
 1. [14495](https://github.com/influxdata/influxdb/pull/14495): optional gzip compression of the query CSV response.
 1. [14567](https://github.com/influxdata/influxdb/pull/14567): Add task types.
 1. [14604](https://github.com/influxdata/influxdb/pull/14604): When getting task runs from the API, runs will be returned in order of most recently scheduled first.
+1. [14631](https://github.com/influxdata/influxdb/pull/14631): Added Github and Apache templates
+1. [14631](https://github.com/influxdata/influxdb/pull/14631): Updated name of Local Metrics template
+1. [14631](https://github.com/influxdata/influxdb/pull/14631): Dashboards for all Telegraf config bundles now created

 ### UI Improvements

--- a/http/swagger.yml
+++ b/http/swagger.yml
@ -8045,6 +8045,8 @@ components:
          type: string
        type:
          type: string
+        templateID:
+          type: string
        description:
          type: string
        version:
--- a/ui/mocks/dummyData.ts
+++ b/ui/mocks/dummyData.ts
@ -326,36 +326,42 @@ export const telegrafPlugin = {
 export const cpuTelegrafPlugin = {
  ...telegrafPlugin,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000009',
 }

 export const diskTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputDisk.NameEnum.Disk,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000009',
 }

 export const diskioTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputDiskio.NameEnum.Diskio,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000009',
 }

 export const netTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputNet.NameEnum.Net,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000009',
 }

 export const memTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputMem.NameEnum.Mem,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000009',
 }

 export const processesTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputProcesses.NameEnum.Processes,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000009',
 }

 export const procstatTelegrafPlugin = {
@ -368,17 +374,20 @@ export const systemTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputSystem.NameEnum.System,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000009',
 }

 export const redisTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputRedis.NameEnum.Redis,
+  templateID: '0000000000000008',
 }

 export const swapTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputSwap.NameEnum.Swap,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000009',
 }

 export const redisPlugin = {
@ -394,6 +403,7 @@ export const dockerTelegrafPlugin = {
  ...telegrafPlugin,
  name: TelegrafPluginInputDocker.NameEnum.Docker,
  configured: ConfigurationState.Configured,
+  templateID: '0000000000000002',
 }

 export const influxDB2Plugin = {
--- a/ui/package.json
+++ b/ui/package.json
@ -161,7 +161,7 @@
    "@influxdata/flux-parser": "^0.3.0",
    "@influxdata/giraffe": "0.16.2",
    "@influxdata/influx": "0.5.5",
-    "@influxdata/influxdb-templates": "0.5.0",
+    "@influxdata/influxdb-templates": "0.7.0",
    "@influxdata/react-custom-scrollbars": "4.3.8",
    "abortcontroller-polyfill": "^1.3.0",
    "axios": "^0.19.0",
--- a/ui/src/dataLoaders/actions/dataLoaders.ts
+++ b/ui/src/dataLoaders/actions/dataLoaders.ts
@ -320,6 +320,7 @@ export const addPluginBundleWithPlugins = (bundle: BundleName) => dispatch => {
          name: p,
          active: false,
          configured: isConfigured,
+          templateID: telegrafPluginsInfo[p].templateID,
        }
      })
    )
--- a/ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx
+++ b/ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx
@ -1,7 +1,7 @@
 // Libraries
 import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
-import {includes} from 'lodash'
+import {includes, get} from 'lodash'

 // Components
 import {Form, Input} from '@influxdata/clockface'
@ -33,14 +33,9 @@ import {
 } from 'src/shared/copy/notifications'

 // Types
-import {
-  AppState,
-  TelegrafPlugin,
-  ConfigurationState,
-  DashboardTemplate,
-} from 'src/types'
+import {AppState, TelegrafPlugin, ConfigurationState} from 'src/types'
 import {InputType, ComponentSize} from '@influxdata/clockface'
-import {client} from 'src/utils/api'
+import {influxdbTemplateList} from 'src/templates/constants/defaultTemplates'

 interface DispatchProps {
  onSetTelegrafConfigName: typeof setTelegrafConfigName
@ -143,40 +138,34 @@ export class TelegrafPluginInstructions extends PureComponent<Props> {

  private async handleCreateDashboardsForPlugins() {
    const {notify, telegrafPlugins, orgID} = this.props
-
    try {
-      const templatesEntries = await client.templates.getAll(orgID)
-
      const configuredPlugins = telegrafPlugins.filter(
        tp => tp.configured === ConfigurationState.Configured
      )

-      const configuredPluginNames = configuredPlugins.map(t =>
-        `${t.name}-Template`.toLowerCase()
-      )
+      const configuredPluginTemplateIdentifiers = configuredPlugins
+        .map(t => t.templateID)
+        .filter(t => t)

-      const templatesToGet = templatesEntries.filter(t => {
-        return includes(configuredPluginNames, t.meta.name.toLowerCase())
+      const templatesToInstantiate = influxdbTemplateList.filter(t => {
+        return includes(
+          configuredPluginTemplateIdentifiers,
+          get(t, 'meta.templateID')
+        )
      })

-      const pluginsWithTemplates = templatesToGet.map(t => {
-        return t.meta.name.replace('-Template', '')
-      })
-
-      const pendingTemplates = templatesToGet.map(t =>
-        client.templates.get(t.id)
+      const pendingDashboards = templatesToInstantiate.map(t =>
+        createDashboardFromTemplateAJAX(t, orgID)
      )

-      const templates = await Promise.all(pendingTemplates)
-
-      const pendingDashboards = templates.map(t =>
-        createDashboardFromTemplateAJAX(t as DashboardTemplate, orgID)
+      const pendingDashboardNames = templatesToInstantiate.map(t =>
+        t.meta.name.toLowerCase()
      )

      const dashboards = await Promise.all(pendingDashboards)

      if (dashboards.length) {
-        notify(TelegrafDashboardCreated(pluginsWithTemplates))
+        notify(TelegrafDashboardCreated(pendingDashboardNames))
      }
    } catch (err) {
      notify(TelegrafDashboardFailed())
--- a/ui/src/dataLoaders/constants/pluginConfigs.ts
+++ b/ui/src/dataLoaders/constants/pluginConfigs.ts
@ -60,6 +60,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputCpu.TypeEnum.Input,
      config: {},
    },
+    templateID: '0000000000000009',
  },
  [TelegrafPluginInputDisk.NameEnum.Disk]: {
    fields: null,
@ -68,6 +69,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputDisk.TypeEnum.Input,
      config: {},
    },
+    templateID: '0000000000000009',
  },
  [TelegrafPluginInputDiskio.NameEnum.Diskio]: {
    fields: null,
@ -76,6 +78,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputDiskio.TypeEnum.Input,
      config: {},
    },
+    templateID: '0000000000000009',
  },
  [TelegrafPluginInputDocker.NameEnum.Docker]: {
    fields: {
@ -89,6 +92,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputDocker.TypeEnum.Input,
      config: {endpoint: ''},
    },
+    templateID: '0000000000000002',
  },
  [TelegrafPluginInputFile.NameEnum.File]: {
    fields: {
@ -123,6 +127,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputKubernetes.TypeEnum.Input,
      config: {url: ''},
    },
+    templateID: '0000000000000005',
  },
  [TelegrafPluginInputLogParser.NameEnum.Logparser]: {
    fields: {files: {type: ConfigFieldType.StringArray, isRequired: true}},
@ -139,6 +144,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputMem.TypeEnum.Input,
      config: {},
    },
+    templateID: '0000000000000009',
  },
  [TelegrafPluginInputNet.NameEnum.Net]: {
    fields: null,
@ -147,6 +153,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputNet.TypeEnum.Input,
      config: {},
    },
+    templateID: '0000000000000009',
  },
  [TelegrafPluginInputNetResponse.NameEnum.NetResponse]: {
    fields: null,
@ -163,6 +170,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputNginx.TypeEnum.Input,
      config: {urls: []},
    },
+    templateID: '0000000000000006',
  },
  [TelegrafPluginInputProcesses.NameEnum.Processes]: {
    fields: null,
@ -171,6 +179,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputProcesses.TypeEnum.Input,
      config: {},
    },
+    templateID: '0000000000000009',
  },
  [TelegrafPluginInputProcstat.NameEnum.Procstat]: {
    fields: {exe: {type: ConfigFieldType.String, isRequired: true}},
@ -198,6 +207,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputRedis.TypeEnum.Input,
      config: {servers: [], password: ''},
    },
+    templateID: '0000000000000008',
  },
  [TelegrafPluginInputSyslog.NameEnum.Syslog]: {
    fields: {server: {type: ConfigFieldType.String, isRequired: true}},
@ -214,6 +224,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputSwap.TypeEnum.Input,
      config: {},
    },
+    templateID: '0000000000000009',
  },
  [TelegrafPluginInputSystem.NameEnum.System]: {
    fields: null,
@ -222,6 +233,7 @@ export const telegrafPluginsInfo: TelegrafPluginInfo = {
      type: TelegrafPluginInputSystem.TypeEnum.Input,
      config: {},
    },
+    templateID: '0000000000000009',
  },
  [TelegrafPluginInputTail.NameEnum.Tail]: {
    fields: null,
--- a/ui/src/dataLoaders/reducers/dataLoaders.test.ts
+++ b/ui/src/dataLoaders/reducers/dataLoaders.test.ts
@ -86,11 +86,13 @@ describe('dataLoader reducer', () => {
            name: TelegrafPluginInputCpu.NameEnum.Cpu,
            configured: ConfigurationState.Unconfigured,
            active: true,
+            templateID: '0000000000000009',
          },
          {
            name: TelegrafPluginInputDisk.NameEnum.Disk,
            configured: ConfigurationState.Unconfigured,
            active: false,
+            templateID: '0000000000000009',
          },
        ],
      },
@ -105,11 +107,13 @@ describe('dataLoader reducer', () => {
          name: TelegrafPluginInputCpu.NameEnum.Cpu,
          configured: ConfigurationState.Unconfigured,
          active: false,
+          templateID: '0000000000000009',
        },
        {
          name: TelegrafPluginInputDisk.NameEnum.Disk,
          configured: ConfigurationState.Unconfigured,
          active: true,
+          templateID: '0000000000000009',
        },
      ],
    }
@ -126,11 +130,13 @@ describe('dataLoader reducer', () => {
            name: TelegrafPluginInputDisk.NameEnum.Disk,
            configured: ConfigurationState.Configured,
            active: false,
+            templateID: '0000000000000009',
          },
          {
            name: TelegrafPluginInputFile.NameEnum.File,
            configured: ConfigurationState.Configured,
            active: false,
+            templateID: '0000000000000009',
            plugin: {
              name: TelegrafPluginInputFile.NameEnum.File,
              type: TelegrafPluginInputFile.TypeEnum.Input,
@ -151,11 +157,13 @@ describe('dataLoader reducer', () => {
          name: TelegrafPluginInputDisk.NameEnum.Disk,
          configured: ConfigurationState.Configured,
          active: false,
+          templateID: '0000000000000009',
        },
        {
          name: TelegrafPluginInputFile.NameEnum.File,
          configured: ConfigurationState.InvalidConfiguration,
          active: false,
+          templateID: '0000000000000009',
          plugin: {
            name: TelegrafPluginInputFile.NameEnum.File,
            type: TelegrafPluginInputFile.TypeEnum.Input,
@ -178,6 +186,7 @@ describe('dataLoader reducer', () => {
          {
            name: TelegrafPluginInputKubernetes.NameEnum.Kubernetes,
            configured: ConfigurationState.Unconfigured,
+            templateID: '0000000000000005',
            active: false,
            plugin: {
              name: TelegrafPluginInputKubernetes.NameEnum.Kubernetes,
@ -199,6 +208,7 @@ describe('dataLoader reducer', () => {
          name: TelegrafPluginInputKubernetes.NameEnum.Kubernetes,
          configured: ConfigurationState.Configured,
          active: false,
+          templateID: '0000000000000005',
          plugin: {
            name: TelegrafPluginInputKubernetes.NameEnum.Kubernetes,
            type: TelegrafPluginInputKubernetes.TypeEnum.Input,
--- a/ui/src/onboarding/actions/index.ts
+++ b/ui/src/onboarding/actions/index.ts
@ -4,7 +4,6 @@ import _ from 'lodash'
 // Constants
 import {StepStatus} from 'src/clockface/constants/wizard'
 import {SetupSuccess, SetupError} from 'src/shared/copy/notifications'
-import {defaultTemplates} from 'src/templates/constants/'

 // Actions
 import {notify} from 'src/shared/actions/notifications'
@ -89,16 +88,6 @@ export const setupAdmin = (params: ISetupParams) => async (
      throw new Error(resp.data.message)
    }

-    await client.templates.create({...defaultTemplates.systemTemplate(), orgID})
-    await client.templates.create({
-      ...defaultTemplates.gettingStartedWithFluxTemplate(),
-      orgID,
-    })
-    await client.templates.create({
-      ...defaultTemplates.localMetricsTemplate(),
-      orgID,
-    })
-
    dispatch(notify(SetupSuccess))
    dispatch(setStepStatus(1, StepStatus.Complete))
    return true
--- a/ui/src/onboarding/components/CompletionStep.tsx
+++ b/ui/src/onboarding/components/CompletionStep.tsx
@ -15,7 +15,7 @@ import {
  QuickstartDashboardCreationSuccess,
  QuickstartDashboardCreationError,
 } from 'src/shared/copy/notifications'
-import {QUICKSTART_DASHBOARD_NAME} from 'src/onboarding/constants'
+import {ossMetricsTemplate} from 'src/templates/constants/defaultTemplates'

 // APIs
 import {getDashboards} from 'src/organizations/apis'
@ -31,7 +31,7 @@ import {
  Columns,
  Grid,
 } from '@influxdata/clockface'
-import {DashboardTemplate, Organization} from 'src/types'
+import {Organization} from 'src/types'
 import {Dashboard, ScraperTargetRequest} from '@influxdata/influx'
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
 import {QUICKSTART_SCRAPER_TARGET_URL} from 'src/dataLoaders/constants/pluginConfigs'
@ -165,23 +165,10 @@ class CompletionStep extends PureComponent<Props> {
      this.props.notify(QuickstartScraperCreationError)
    }
    try {
-      const templatesEntries = await client.templates.getAll(this.props.orgID)
-      const templatesToGet = templatesEntries.filter(t => {
-        return (
-          t.meta.name.toLowerCase() == QUICKSTART_DASHBOARD_NAME.toLowerCase()
-        )
-      })
-      const pendingTemplates = templatesToGet.map(t =>
-        client.templates.get(t.id)
+      await createDashboardFromTemplateAJAX(
+        ossMetricsTemplate(),
+        this.props.orgID
      )
-      const templates = await Promise.all(pendingTemplates)
-      const pendingDashboards = templates.map(t =>
-        createDashboardFromTemplateAJAX(
-          t as DashboardTemplate,
-          this.props.orgID
-        )
-      )
-      await Promise.all(pendingDashboards)
      this.props.notify(QuickstartDashboardCreationSuccess)
    } catch (err) {
      this.props.notify(QuickstartDashboardCreationError)
--- a/ui/src/onboarding/constants/index.ts
+++ b/ui/src/onboarding/constants/index.ts
@ -1 +1 @@
-export const QUICKSTART_DASHBOARD_NAME = 'Local Metrics-Template'
+export const QUICKSTART_DASHBOARD_NAME = 'InfluxDB 2.0 OSS Metrics'
--- a/ui/src/organizations/actions/orgs.ts
+++ b/ui/src/organizations/actions/orgs.ts
@ -3,14 +3,13 @@ import {Dispatch} from 'redux'
 import {push, RouterAction} from 'react-router-redux'

 // APIs
-import {client, getErrorMessage} from 'src/utils/api'
+import {getErrorMessage} from 'src/utils/api'
 import * as api from 'src/client'

 // Actions
 import {notify} from 'src/shared/actions/notifications'

 // Constants
-import {defaultTemplates} from 'src/templates/constants/'
 import {
  orgCreateSuccess,
  orgCreateFailed,
@ -169,18 +168,6 @@ export const createOrgWithBucket = (
    }
    createdOrg = orgResp.data

-    await client.templates.create({
-      ...defaultTemplates.systemTemplate(),
-      orgID: createdOrg.id,
-    })
-    await client.templates.create({
-      ...defaultTemplates.gettingStartedWithFluxTemplate(),
-      orgID: createdOrg.id,
-    })
-    await client.templates.create({
-      ...defaultTemplates.localMetricsTemplate(),
-      orgID: createdOrg.id,
-    })
    dispatch(notify(orgCreateSuccess()))

    dispatch(addOrg(createdOrg))
@ -218,11 +205,6 @@ export const createOrg = (org: Organization) => async (

    const createdOrg = resp.data

-    await client.templates.create({
-      ...defaultTemplates.systemTemplate(),
-      orgID: createdOrg.id,
-    })
-
    dispatch(addOrg(createdOrg))
    dispatch(push(`/orgs/${createdOrg.id}`))

--- a/ui/src/shared/components/ViewOverlay.tsx
+++ b/ui/src/shared/components/ViewOverlay.tsx
@ -13,13 +13,13 @@ import {Controlled as ReactCodeMirror} from 'react-codemirror2'
 import CopyButton from 'src/shared/components/CopyButton'

 // Types
-import {DocumentCreate} from '@influxdata/influx'
 import {ComponentColor} from '@influxdata/clockface'
-import {RemoteDataState} from 'src/types'
+import {RemoteDataState, DashboardTemplate} from 'src/types'
+import {DocumentCreate} from '@influxdata/influx'

 interface Props {
  onDismissOverlay: () => void
-  resource: DocumentCreate
+  resource: DashboardTemplate | DocumentCreate
  overlayHeading: string
  status: RemoteDataState
  isVisible: boolean
--- a/ui/src/shared/copy/notifications.ts
+++ b/ui/src/shared/copy/notifications.ts
@ -8,6 +8,7 @@ import {NotificationStyle} from 'src/types/notifications'
 // Constants
 import {FIVE_SECONDS, TEN_SECONDS, INFINITE} from 'src/shared/constants/index'
 import {QUICKSTART_SCRAPER_TARGET_URL} from 'src/dataLoaders/constants/pluginConfigs'
+import {QUICKSTART_DASHBOARD_NAME} from 'src/onboarding/constants/index'

 const bytesFormatter = binaryPrefixFormatter({
  suffix: 'B',
@ -102,12 +103,12 @@ export const QuickstartScraperCreationError: Notification = {

 export const QuickstartDashboardCreationSuccess: Notification = {
  ...defaultSuccessNotification,
-  message: `The Local Metrics Dashboard has been created`,
+  message: `The ${QUICKSTART_DASHBOARD_NAME} Dashboard has been created`,
 }

 export const QuickstartDashboardCreationError: Notification = {
  ...defaultErrorNotification,
-  message: `Failed to create the Local Metrics Dashboard`,
+  message: `Failed to create ${QUICKSTART_DASHBOARD_NAME} Dashboard`,
 }

 export const TelegrafConfigCreationSuccess: Notification = {
--- a/ui/src/templates/components/StaticTemplateViewOverlay.tsx
+++ b/ui/src/templates/components/StaticTemplateViewOverlay.tsx
@ -8,9 +8,9 @@ import {ErrorHandling} from 'src/shared/decorators/errors'

 // Types
 import {RemoteDataState} from '@influxdata/clockface'
-import {DocumentCreate} from '@influxdata/influx'

 import {staticTemplates} from 'src/templates/constants/defaultTemplates'
+import {DashboardTemplate} from 'src/types'

 interface OwnProps {
  params: {id: string}
@ -31,7 +31,7 @@ class TemplateExportOverlay extends PureComponent<Props> {
    )
  }

-  private get template(): DocumentCreate {
+  private get template(): DashboardTemplate {
    const {
      params: {id},
    } = this.props
--- a/ui/src/templates/constants/defaultTemplates.ts
+++ b/ui/src/templates/constants/defaultTemplates.ts
@ -1,41 +1,40 @@
 import {
-  system,
-  localMetrics,
-  gettingStarted,
+  apache,
  docker,
-  nginx,
-  redis,
+  gettingStarted,
+  github,
  kubernetes,
+  nginx,
+  ossMetrics,
+  redis,
+  system,
 } from '@influxdata/influxdb-templates'
+import {DashboardTemplate} from 'src/types'

-export const localMetricsTemplate = () => {
-  return localMetrics
+export const ossMetricsTemplate = (): DashboardTemplate => {
+  return ossMetrics
 }

-export const systemTemplate = () => {
-  return system
-}
-
-export const gettingStartedWithFluxTemplate = () => {
-  return gettingStarted
-}
-
-export const staticTemplates = {
-  'getting-started': gettingStarted,
-  'local-metrics': localMetrics,
-  System: system,
+export const staticTemplates: {[k: string]: DashboardTemplate} = {
+  Apache: apache,
  Docker: docker,
-  Redis: redis,
-  Nginx: nginx,
+  'getting-started': gettingStarted,
+  Github: github,
  Kubernetes: kubernetes,
+  Nginx: nginx,
+  'oss-metrics': ossMetrics,
+  Redis: redis,
+  System: system,
 }

-export const influxdbTemplateList = [
-  system,
-  localMetrics,
-  gettingStarted,
+export const influxdbTemplateList: DashboardTemplate[] = [
+  apache,
  docker,
-  nginx,
-  redis,
+  gettingStarted,
+  github,
  kubernetes,
+  nginx,
+  ossMetrics,
+  redis,
+  system,
 ].map((t, i) => ({...t, id: `influxdb-template-${i}`}))
--- a/ui/src/types/dataLoaders.ts
+++ b/ui/src/types/dataLoaders.ts
@ -129,6 +129,7 @@ export interface TelegrafPlugin {
  configured: ConfigurationState
  active: boolean
  plugin?: Plugin
+  templateID?: string
 }

 export enum BundleName {
@ -201,6 +202,7 @@ export interface TelegrafPluginInfo {
  [name: string]: {
    fields: ConfigFields
    defaults: Plugin
+    templateID?: string
  }
 }

--- a/ui/src/types/templates.ts
+++ b/ui/src/types/templates.ts
@ -4,6 +4,7 @@ import {
  IDashboard,
  DocumentListEntry,
  Document,
+  DocumentMeta,
 } from '@influxdata/influx'
 import {View, Cell} from './index'

@ -20,10 +21,15 @@ interface KeyValuePairs {
  [key: string]: any
 }

+interface DocumentMetaWithTemplateID extends DocumentMeta {
+  templateID?: string
+}
+
 // Templates
 export interface TemplateBase extends Document {
+  meta: DocumentMetaWithTemplateID
  content: {data: TemplateData; included: TemplateIncluded[]}
-  labels?: ILabel[]
+  labels: ILabel[]
 }

 // TODO: be more specific about what attributes can be
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@ -1112,10 +1112,10 @@
  dependencies:
    axios "^0.19.0"

-"@influxdata/influxdb-templates@0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@influxdata/influxdb-templates/-/influxdb-templates-0.5.0.tgz#655cd7e2caa0dd6f5ce7a189542ca14b3ff290a8"
-  integrity sha512-LfmUMoRmWb4Gc+pLx0WrfRLbYgednZJhP6Ss1W3CYGUNE6YM+U1EZYHNN3AJnA5rwYamWJOC0MlPSgsyoJ7bBg==
+"@influxdata/influxdb-templates@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@influxdata/influxdb-templates/-/influxdb-templates-0.6.0.tgz#6766fdfbee0c1a670d00ed912250c78e66c04f84"
+  integrity sha512-eKqIhlo6QZSoMERW7+bdYyeYAyPejKKDOfsCBQMaiEIcDXnVQGNLOzo/AG4cIVPAafo2ojOOEDDzYCkMVvkJkg==

 "@influxdata/react-custom-scrollbars@4.3.8":
  version "4.3.8"