fix(ui/telegraf): filter functionality (#15427)

* fix(ui/telegraf): filter functionality

* docs: README

* fix: linter error

* fix: linked relevant issue to the added test

CHANGELOG.md

@@ -9,6 +9,7 @@
 1. [15306](https://github.com/influxdata/influxdb/pull/15306): Added missing string values for CacheStatus type
 1. [15348](https://github.com/influxdata/influxdb/pull/15348): Disable saving for threshold check if no threshold selected
 1. [15354](https://github.com/influxdata/influxdb/pull/15354): Query variable selector shows variable keys, not values
+1. [15246](https://github.com/influxdata/influxdb/pull/15427): UI/Telegraf filter functionality shows results based on input name
 
 ## v2.0.0-alpha.18 [2019-09-26]
 

ui/cypress/e2e/collectors.test.ts

@@ -61,7 +61,7 @@ describe('Collectors', () => {
       const telegrafConfigName = 'New Config'
       const description = 'Config Description'
 
-      cy.get<Organization>('@org').then(({id}) => {
+      cy.get('@org').then(({id}: Organization) => {
         cy.createTelegraf(telegrafConfigName, description, id)
       })
 
@@ -84,7 +84,7 @@ describe('Collectors', () => {
       const telegrafConfigName = 'New Config'
       const description = 'Config Description'
 
-      cy.get<Organization>('@org').then(({id}) => {
+      cy.get('@org').then(({id}: Organization) => {
         cy.createTelegraf(telegrafConfigName, description, id)
         cy.createTelegraf(telegrafConfigName, description, id)
       })
@@ -106,7 +106,7 @@ describe('Collectors', () => {
       const telegrafConfigName = 'New Config'
       const description = 'Config Description'
 
-      cy.get<Organization>('@org').then(({id}) => {
+      cy.get('@org').then(({id}: Organization) => {
         cy.createTelegraf(telegrafConfigName, description, id)
       })
 
@@ -122,5 +122,55 @@ describe('Collectors', () => {
 
       cy.getByTestID('setup-instructions').should('not.exist')
     })
+
+    it('can filter telegraf configs correctly', () => {
+      // fixes issue #15246:
+      // https://github.com/influxdata/influxdb/issues/15246
+      const firstTelegraf = 'test1'
+      const secondTelegraf = 'test2'
+      const thirdTelegraf = 'unicorn'
+      const description = 'Config Description'
+
+      cy.get('@org').then(({id}: Organization) => {
+        cy.createTelegraf(firstTelegraf, description, id)
+        cy.createTelegraf(secondTelegraf, description, id)
+        cy.createTelegraf(thirdTelegraf, description, id)
+      })
+
+      cy.getByTestID('search-widget').type(firstTelegraf)
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+      cy.getByTestID('resource-card').should('contain', firstTelegraf)
+
+      cy.getByTestID('search-widget')
+        .clear()
+        .type(secondTelegraf)
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+      cy.getByTestID('resource-card').should('contain', secondTelegraf)
+
+      cy.getByTestID('search-widget')
+        .clear()
+        .type(thirdTelegraf)
+
+      cy.getByTestID('resource-card').should('have.length', 1)
+      cy.getByTestID('resource-card').should('contain', thirdTelegraf)
+
+      cy.getByTestID('search-widget')
+        .clear()
+        .type('should have no results')
+
+      cy.getByTestID('resource-card').should('have.length', 0)
+      cy.getByTestID('empty-state').should('exist')
+
+      cy.getByTestID('search-widget')
+        .clear()
+        .type('test')
+
+      cy.getByTestID('resource-card').should('have.length', 2)
+      cy.getByTestID('resource-card').should('contain', firstTelegraf)
+      cy.getByTestID('resource-card').should('contain', secondTelegraf)
+      cy.getByTestID('resource-card').should('not.contain', thirdTelegraf)
+    })
   })
 })

ui/src/telegrafs/components/Collectors.tsx

@@ -115,7 +115,7 @@ class Collectors extends PureComponent<Props, State> {
               <GetResources resource={ResourceType.Labels}>
                 <FilterList<Telegraf>
                   searchTerm={searchTerm}
-                  searchKeys={['plugins.0.config.bucket', 'labels[].name']}
+                  searchKeys={['plugins.0.config.bucket', 'name']}
                   list={collectors}
                 >
                   {cs => (