fix(ui): flux sort no longer being overidden by default FE sort

influxdata · Dec 16, 2019 · e1cb7e3 · e1cb7e3
1 parent cc3b164
commit e1cb7e3
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 10 deletions.
diff --git a/ui/cypress/e2e/explorer.test.ts b/ui/cypress/e2e/explorer.test.ts
@@ -598,6 +598,66 @@ describe('DataExplorer', () => {
         cy.getByTestID('raw-data--toggle').click()
       })
     })
+
+    describe('visualize tables', () => {
+      const numLines = 360
+
+      beforeEach(() => {
+        cy.flush()
+
+        cy.signin().then(({body}) => {
+          const {
+            org: {id},
+            bucket,
+          } = body
+          cy.wrap(body.org).as('org')
+          cy.wrap(bucket).as('bucket')
+
+          // POST 360 lines to the server
+          cy.writeData(lines(numLines))
+
+          // start at the data explorer
+          cy.fixture('routes').then(({orgs, explorer}) => {
+            cy.visit(`${orgs}/${id}${explorer}`)
+          })
+        })
+      })
+
+      it('can view table data', () => {
+        // build the query to return data from beforeEach
+        cy.getByTestID(`selector-list m`).click()
+        cy.getByTestID('selector-list v').click()
+        cy.getByTestID(`selector-list tv1`).click()
+        cy.getByTestID('selector-list sort').click()
+
+        cy.getByTestID('time-machine-submit-button').click()
+
+        cy.getByTestID('view-type--dropdown').click()
+        cy.getByTestID(`view-type--table`).click()
+        // check to see that the FE rows are NOT sorted with flux sort
+        cy.get('.table-graph-cell__sort-asc').should('not.exist')
+        cy.get('.table-graph-cell__sort-desc').should('not.exist')
+        cy.getByTestID('_value-table-header')
+          .should('exist')
+          .then(el => {
+            // get the column index
+            const columnIndex = el[0].getAttribute('data-column-index')
+            let prev = -Infinity
+            // get all the column values for that one and see if they are in order
+            cy.get(`[data-column-index="${columnIndex}"]`).each(val => {
+              const num = Number(val.text())
+              if (isNaN(num) === false) {
+                expect(num > prev).to.equal(true)
+                prev = num
+              }
+            })
+          })
+        cy.getByTestID('_value-table-header').click()
+        cy.get('.table-graph-cell__sort-asc').should('exist')
+        // TODO: complete testing when FE sorting functionality is sorted
+        // https://github.com/influxdata/influxdb/issues/16200
+      })
+    })
   })
 
   // skipping until feature flag feature is removed for deleteWithPredicate

diff --git a/ui/src/shared/components/tables/TableCell.tsx b/ui/src/shared/components/tables/TableCell.tsx
@@ -33,14 +33,15 @@ interface Props extends CellRendererProps {
 
 class TableCell extends PureComponent<Props> {
   public render() {
-    const {rowIndex, columnIndex, onHover} = this.props
+    const {data, rowIndex, columnIndex, onHover} = this.props
     return (
       <div
         style={this.style}
         className={this.class}
         onClick={this.handleClick}
         data-column-index={columnIndex}
         data-row-index={rowIndex}
+        {...(rowIndex === 0 ? {'data-testID': `${data}-table-header`} : {})} // conditionally adds test-ID for tableCell header
         onMouseOver={onHover}
         title={this.contents}
       >

diff --git a/ui/src/shared/components/tables/TableGraph.tsx b/ui/src/shared/components/tables/TableGraph.tsx
@@ -81,16 +81,9 @@ class TableGraph extends PureComponent<Props, State> {
 
     if (headerSet.has(sortOptions.field)) {
       return sortOptions
-    } else if (headerSet.has('_time')) {
-      return {...sortOptions, field: '_time'}
-    } else if (headerSet.has('_start')) {
-      return {...sortOptions, field: '_start'}
-    } else if (headerSet.has('_stop')) {
-      return {...sortOptions, field: '_stop'}
-    } else {
-      const headers = table.data[0]
-      return {...sortOptions, field: headers[0]}
     }
+    const headers = table.data[0]
+    return {...sortOptions, field: headers[0]}
   }
 }