Merge pull request #12580 from influxdata/feat/sort-tasks-run

Add sorting to Task Runs List
influxdata · Mar 13, 2019 · 1808a1a · 1808a1a
2 parents 6869177 + 7e2a642
commit 1808a1a
Showing 1 changed file with 96 additions and 15 deletions.
diff --git a/ui/src/tasks/components/TaskRunsList.tsx b/ui/src/tasks/components/TaskRunsList.tsx
@@ -4,27 +4,82 @@ import React, {PureComponent} from 'react'
 // Components
 import {IndexList, EmptyState} from 'src/clockface'
 import TaskRunsRow from 'src/tasks/components/TaskRunsRow'
+import SortingHat from 'src/shared/components/sorting_hat/SortingHat'
 
 // Types
 import {Run} from '@influxdata/influx'
 import {ComponentSize} from '@influxdata/clockface'
+import {Sort} from 'src/clockface'
 
 interface Props {
   taskID: string
   runs: Run[]
 }
 
-export default class TaskRunsList extends PureComponent<Props> {
+type SortKey = keyof Run
+
+interface State {
+  sortKey: SortKey
+  sortDirection: Sort
+}
+
+export default class TaskRunsList extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      sortKey: null,
+      sortDirection: Sort.Descending,
+    }
+  }
+
   public render() {
+    const {sortKey, sortDirection} = this.state
+    const headerKeys: SortKey[] = [
+      'requestedAt',
+      'startedAt',
+      'finishedAt',
+      'status',
+      'scheduledFor',
+    ]
     return (
       <IndexList>
         <IndexList.Header>
-          <IndexList.HeaderCell columnName="Requested At" width="20%" />
-          <IndexList.HeaderCell columnName="Started At" width="20%" />
-          <IndexList.HeaderCell columnName="Finished At" width="20%" />
-          <IndexList.HeaderCell columnName="Status" width="10%" />
-          <IndexList.HeaderCell columnName="Schedule For" width="20%" />
-          <IndexList.HeaderCell columnName="" width="10%" />
+          <IndexList.HeaderCell
+            columnName="Requested At"
+            width="20%"
+            sortKey={headerKeys[0]}
+            sort={sortKey === headerKeys[0] ? sortDirection : Sort.None}
+            onClick={this.handleClickColumn}
+          />
+          <IndexList.HeaderCell
+            columnName="Started At"
+            width="20%"
+            sortKey={headerKeys[1]}
+            sort={sortKey === headerKeys[1] ? sortDirection : Sort.None}
+            onClick={this.handleClickColumn}
+          />
+          <IndexList.HeaderCell
+            columnName="Finished At"
+            width="20%"
+            sortKey={headerKeys[2]}
+            sort={sortKey === headerKeys[2] ? sortDirection : Sort.None}
+            onClick={this.handleClickColumn}
+          />
+          <IndexList.HeaderCell
+            columnName="Status"
+            width="10%"
+            sortKey={headerKeys[3]}
+            sort={sortKey === headerKeys[3] ? sortDirection : Sort.None}
+            onClick={this.handleClickColumn}
+          />
+          <IndexList.HeaderCell
+            columnName="Schedule For"
+            width="20%"
+            sortKey={headerKeys[4]}
+            sort={sortKey === headerKeys[4] ? sortDirection : Sort.None}
+            onClick={this.handleClickColumn}
+          />
+          <IndexList.HeaderCell width="10%" />
         </IndexList.Header>
         <IndexList.Body
           emptyState={
@@ -35,20 +90,46 @@ export default class TaskRunsList extends PureComponent<Props> {
               />
             </EmptyState>
           }
-          columnCount={6}
+          columnCount={5}
         >
-          {this.listRuns}
+          {this.sortedRuns}
         </IndexList.Body>
       </IndexList>
     )
   }
 
-  public get listRuns(): JSX.Element[] {
-    const {runs, taskID} = this.props
-    const taskRuns = runs.map(t => (
-      <TaskRunsRow key={t.id} taskID={taskID} run={t} />
-    ))
+  private handleClickColumn = (nextSort: Sort, sortKey: SortKey) => {
+    this.setState({sortKey, sortDirection: nextSort})
+  }
+
+  public listRuns = (runs: Run[]): JSX.Element => {
+    const {taskID} = this.props
+    const runsRow = (
+      <>
+        {runs.map(r => (
+          <TaskRunsRow key={`run-id--${r.id}`} taskID={taskID} run={r} />
+        ))}
+      </>
+    )
+    return runsRow
+  }
+
+  private get sortedRuns(): JSX.Element {
+    const {runs} = this.props
+    const {sortKey, sortDirection} = this.state
+
+    if (runs.length) {
+      return (
+        <SortingHat<Run>
+          list={runs}
+          sortKey={sortKey}
+          direction={sortDirection}
+        >
+          {this.listRuns}
+        </SortingHat>
+      )
+    }
 
-    return taskRuns
+    return null
   }
 }