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

fix(ui): flux sort no longer being overidden by default FE sort
influxdata · Dec 16, 2019 · ee89717 · ee89717
1 parent 25a62ef
commit ee89717
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### Bug Fixes
 
+1. [16235](https://github.com/influxdata/influxdb/pull/16235): Removed default frontend sorting when flux queries specify sorting
+
 ### UI Improvements
 
 ## v2.0.0-alpha.21 [2019-12-13]

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,7 +33,23 @@ interface Props extends CellRendererProps {
 
 class TableCell extends PureComponent<Props> {
   public render() {
-    const {rowIndex, columnIndex, onHover} = this.props
+    const {data, rowIndex, columnIndex, onHover} = this.props
+    if (rowIndex === 0) {
+      return (
+        <div
+          style={this.style}
+          className={this.class}
+          onClick={this.handleClick}
+          data-column-index={columnIndex}
+          data-row-index={rowIndex}
+          data-testID={`${data}-table-header`}
+          onMouseOver={onHover}
+          title={this.contents}
+        >
+          {this.contents}
+        </div>
+      )
+    }
     return (
       <div
         style={this.style}

diff --git a/ui/src/shared/components/tables/TableGraph.tsx b/ui/src/shared/components/tables/TableGraph.tsx
@@ -40,12 +40,13 @@ class TableGraph extends PureComponent<Props, State> {
 
   public render() {
     const {table, properties, timeZone} = this.props
+    const {sortOptions} = this.state
     return (
       <TableGraphTransform
         data={table.data}
         properties={properties}
         dataTypes={table.dataTypes}
-        sortOptions={this.sortOptions}
+        sortOptions={sortOptions}
       >
         {transformedDataBundle => (
           <TableGraphTable
@@ -73,25 +74,6 @@ class TableGraph extends PureComponent<Props, State> {
       return {sortOptions: newSortOptions}
     })
   }
-
-  private get sortOptions(): SortOptions {
-    const {sortOptions} = this.state
-    const {table} = this.props
-    const headerSet = new Set(table.data[0])
-
-    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]}
-    }
-  }
 }
 
 export default TableGraph