Update tasks runs to use the api instead of dummy data

ui/src/tasks/actions/v2/index.ts

@@ -50,6 +50,7 @@ export type Action =
   | SetAllTaskOptions
   | AddTaskLabels
   | RemoveTaskLabels
+  | SetRuns
 
 type GetStateFunc = () => AppState
 interface Task extends TaskAPI {
@@ -148,6 +149,13 @@ export interface RemoveTaskLabels {
   }
 }
 
+export interface SetRuns {
+  type: 'SET_RUNS'
+  payload: {
+    runs: Run[]
+  }
+}
+
 export const setTaskOption = (taskOption: {
   key: TaskOptionKeys
   value: string
@@ -200,6 +208,11 @@ export const setDropdownOrgID = (dropdownOrgID: string): SetDropdownOrgID => ({
   payload: {dropdownOrgID},
 })
 
+export const setRuns = (runs: Run[]): SetRuns => ({
+  type: 'SET_RUNS',
+  payload: {runs},
+})
+
 const addTaskLabels = (taskID: string, labels: Label[]): AddTaskLabels => ({
   type: 'ADD_TASK_LABELS',
   payload: {
@@ -468,9 +481,14 @@ export const getErrorMessage = (e: any) => {
   return message
 }
 
-export const getRuns = async (taskID: string): Promise<Run[]> => {
-  const runs = await client.tasks.getRunsByTaskID(taskID)
-  return runs
+export const getRuns = (taskID: string) => async (dispatch): Promise<void> => {
+  try {
+    const runs = await client.tasks.getRunsByTaskID(taskID)
+
+    dispatch(setRuns(runs))
+  } catch (error) {
+    console.error(error)
+  }
 }
 
 export const runTask = (taskID: string) => async dispatch => {

ui/src/tasks/components/TaskRow.tsx

@@ -70,14 +70,12 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
         <IndexList.Cell>{task.latestCompleted}</IndexList.Cell>
         <IndexList.Cell alignment={Alignment.Right} revealOnHover={true}>
           <ComponentSpacer align={Alignment.Right}>
-            <FeatureFlag>
-              <Button
-                size={ComponentSize.ExtraSmall}
-                color={ComponentColor.Default}
-                text="View Runs"
-                onClick={this.handleViewRuns}
-              />
-            </FeatureFlag>
+            <Button
+              size={ComponentSize.ExtraSmall}
+              color={ComponentColor.Default}
+              text="View Runs"
+              onClick={this.handleViewRuns}
+            />
             <FeatureFlag>
               <Button
                 size={ComponentSize.ExtraSmall}

ui/src/tasks/components/TaskRunsList.tsx

@@ -3,8 +3,9 @@ import React, {PureComponent} from 'react'
 
 // Components
 import {Run} from '@influxdata/influx'
-import {IndexList} from 'src/clockface'
+import {IndexList, EmptyState} from 'src/clockface'
 import TaskRunsRow from './TaskRunsRow'
+import {ComponentSize} from '@influxdata/clockface'
 
 interface Props {
   taskID: string
@@ -23,7 +24,17 @@ export default class TaskRunsList extends PureComponent<Props> {
           <IndexList.HeaderCell columnName="Schedule For" width="20%" />
           <IndexList.HeaderCell columnName="" width="10%" />
         </IndexList.Header>
-        <IndexList.Body emptyState={<></>} columnCount={6}>
+        <IndexList.Body
+          emptyState={
+            <EmptyState size={ComponentSize.Large}>
+              <EmptyState.Text
+                text={"Looks like this Task doesn't have any Runs"}
+                highlightWords={['Runs']}
+              />
+            </EmptyState>
+          }
+          columnCount={6}
+        >
           {this.listRuns}
         </IndexList.Body>
       </IndexList>

ui/src/tasks/components/TaskRunsPage.tsx

@@ -1,25 +1,63 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {withRouter, WithRouterProps} from 'react-router'
+import {connect} from 'react-redux'
 
 // Types
-import {Run} from '@influxdata/influx'
 import {Page} from 'src/pageLayout'
 import TaskRunsList from 'src/tasks/components/TaskRunsList'
+import {AppState} from 'src/types/v2'
 
-// DummyData
-import {taskRuns} from 'src/tasks/dummyData'
+// Actions
+import {getRuns} from 'src/tasks/actions/v2'
+import {Run} from '@influxdata/influx'
+import {RemoteDataState} from 'src/types'
 
-interface Props {
+interface PassedInProps {
   params: {id: string}
+}
+
+interface ConnectedDispatchProps {
+  getRuns: typeof getRuns
+}
+
+interface ConnectedStateProps {
   runs: Run[]
 }
 
-const dummyData = taskRuns
+interface State {
+  loading: RemoteDataState
+}
 
-class TaskRunsPage extends PureComponent<Props & WithRouterProps> {
+type Props = PassedInProps & ConnectedDispatchProps & ConnectedStateProps
+
+class TaskRunsPage extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {loading: RemoteDataState.NotStarted}
+  }
   public render() {
-    const {params} = this.props
+    const {params, runs} = this.props
+
+    if (this.state.loading !== RemoteDataState.Done) {
+      return (
+        <>
+          <Page titleTag="Runs">
+            <Page.Header fullWidth={false}>
+              <Page.Header.Left>
+                <Page.Title title="Runs" />
+              </Page.Header.Left>
+              <Page.Header.Right />
+            </Page.Header>
+            <Page.Contents fullWidth={false} scrollable={true}>
+              <div className="col-xs-12">
+                <TaskRunsList taskID={params.id} runs={[]} />
+              </div>
+            </Page.Contents>
+          </Page>
+        </>
+      )
+    }
     return (
       <>
         <Page titleTag="Runs">
@@ -31,13 +69,38 @@ class TaskRunsPage extends PureComponent<Props & WithRouterProps> {
           </Page.Header>
           <Page.Contents fullWidth={false} scrollable={true}>
             <div className="col-xs-12">
-              <TaskRunsList taskID={params.id} runs={dummyData} />
+              <TaskRunsList taskID={params.id} runs={runs} />
             </div>
           </Page.Contents>
         </Page>
       </>
     )
   }
+  public async componentDidMount() {
+    this.setState({loading: RemoteDataState.Loading})
+    try {
+      await this.props.getRuns(this.props.params.id)
+      this.setState({loading: RemoteDataState.Done})
+    } catch (e) {
+      this.setState({loading: RemoteDataState.Error})
+    }
+  }
 }
 
-export default withRouter<Props>(TaskRunsPage)
+const mstp = (state: AppState): ConnectedStateProps => {
+  const {
+    tasks: {runs},
+  } = state
+  return {runs}
+}
+
+const mdtp: ConnectedDispatchProps = {getRuns: getRuns}
+
+export default connect<
+  ConnectedStateProps,
+  ConnectedDispatchProps,
+  PassedInProps
+>(
+  mstp,
+  mdtp
+)(TaskRunsPage)

ui/src/tasks/components/TaskRunsRow.tsx

@@ -59,8 +59,12 @@ export default class TaskRunsRow extends PureComponent<Props, State> {
   }
 
   private dateTimeString(dt: Date): string {
-    const date = dt.toDateString()
-    const time = dt.toLocaleTimeString()
+    if (!dt) {
+      return ''
+    }
+    const newdate = new Date(dt)
+    const date = newdate.toDateString()
+    const time = newdate.toLocaleTimeString()
     const formatted = `${date} ${time}`
 
     return formatted

ui/src/tasks/components/__snapshots__/TaskRow.test.tsx.snap

@@ -70,19 +70,17 @@ exports[`Tasks.Components.TaskRow renders 1`] = `
     <Component
       align="right"
     >
-      <default_1>
-        <t
-          active={false}
-          color="default"
-          onClick={[Function]}
-          shape="none"
-          size="xs"
-          status="default"
-          testID="button"
-          text="View Runs"
-          type="button"
-        />
-      </default_1>
+      <t
+        active={false}
+        color="default"
+        onClick={[Function]}
+        shape="none"
+        size="xs"
+        status="default"
+        testID="button"
+        text="View Runs"
+        type="button"
+      />
       <default_1>
         <t
           active={false}

ui/src/tasks/reducers/v2/index.ts

@@ -1,6 +1,6 @@
 import {Action} from 'src/tasks/actions/v2'
 import {TaskOptions, TaskSchedule} from 'src/utils/taskOptionsToFluxScript'
-import {Task as TaskAPI, User, Organization} from '@influxdata/influx'
+import {Task as TaskAPI, User, Organization, Run} from '@influxdata/influx'
 
 interface Task extends TaskAPI {
   organization: Organization
@@ -16,6 +16,7 @@ export interface State {
   showInactive: boolean
   dropdownOrgID: string
   taskOptions: TaskOptions
+  runs: Run[]
 }
 
 export const defaultTaskOptions: TaskOptions = {
@@ -37,6 +38,7 @@ const defaultState: State = {
   showInactive: true,
   dropdownOrgID: null,
   taskOptions: defaultTaskOptions,
+  runs: [],
 }
 
 export default (state: State = defaultState, action: Action): State => {
@@ -124,6 +126,9 @@ export default (state: State = defaultState, action: Action): State => {
 
       return {...state, tasks: [...updatedTasks]}
     }
+    case 'SET_RUNS':
+      const {runs} = action.payload
+      return {...state, runs}
     default:
       return state
   }