Create Tasks Run Page for dispalying runs for specific TaskID

ui/src/index.tsx

@@ -45,6 +45,7 @@ import {disablePresentationMode} from 'src/shared/actions/app'
 
 // Styles
 import 'src/style/chronograf.scss'
+import TaskRunsPage from 'src/tasks/components/TaskRunsPage'
 
 const rootNode = getRootNode()
 const basepath = getBasepath()
@@ -120,6 +121,7 @@ class Root extends PureComponent {
                             </Route>
                             <Route path="tasks">
                               <IndexRoute component={TasksPage} />
+                              <Route path=":id/runs" component={TaskRunsPage} />
                               <Route path="new" component={TaskPage} />
                               <Route path=":id" component={TaskEditPage} />
                             </Route>

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

@@ -3,7 +3,7 @@ import {push, goBack} from 'react-router-redux'
 import _ from 'lodash'
 
 // APIs
-import {Task as TaskAPI, Organization} from '@influxdata/influx'
+import {Task as TaskAPI, Organization, Run} from '@influxdata/influx'
 import {client} from 'src/utils/api'
 import {notify} from 'src/shared/actions/notifications'
 import {
@@ -477,3 +477,8 @@ export const getErrorMessage = (e: any) => {
   }
   return message
 }
+
+export const getRuns = async (taskID: string): Promise<Run[]> => {
+  const runs = await client.tasks.getRunsByTaskID(taskID)
+  return runs
+}

ui/src/tasks/components/TaskRow.tsx

@@ -71,6 +71,12 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
         <IndexList.Cell>{this.schedule}</IndexList.Cell>
         <IndexList.Cell alignment={Alignment.Right} revealOnHover={true}>
           <ComponentSpacer align={Alignment.Right}>
+            <Button
+              size={ComponentSize.ExtraSmall}
+              color={ComponentColor.Default}
+              text="View Runs"
+              onClick={this.handleViewRuns}
+            />
             <Button
               size={ComponentSize.ExtraSmall}
               text="Export"
@@ -120,6 +126,11 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
     )
   }
 
+  private handleViewRuns = () => {
+    const {router, task} = this.props
+    router.push(`tasks/${task.id}/runs`)
+  }
+
   private handleUpdateTask = (name: string) => {
     const {onUpdate, task} = this.props
     onUpdate({...task, name})

ui/src/tasks/components/TaskRunsPage.tsx

@@ -0,0 +1,73 @@
+// Libraries
+import React, {PureComponent} from 'react'
+
+// Types
+import {Run} from '@influxdata/influx'
+import {IndexList} from 'src/clockface'
+import {taskRuns} from '../dummyData'
+import {Page} from 'src/pageLayout'
+
+interface Props {
+  taskID: string
+  runs: Run[]
+}
+
+const dummyData = taskRuns
+
+class TaskRunsPage extends PureComponent<Props> {
+  public render() {
+    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">
+              <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.Header>
+                <IndexList.Body emptyState={<></>} columnCount={6}>
+                  {this.listRuns}
+                </IndexList.Body>
+              </IndexList>
+            </div>
+          </Page.Contents>
+        </Page>
+      </>
+    )
+  }
+
+  public get listRuns(): JSX.Element[] {
+    const taskRuns = dummyData.map(t => (
+      <IndexList.Row key={`task-id--${t.id}`}>
+        <IndexList.Cell>{this.dateTimeString(t.requestedAt)}</IndexList.Cell>
+        <IndexList.Cell>{this.dateTimeString(t.startedAt)}</IndexList.Cell>
+        <IndexList.Cell>{this.dateTimeString(t.finishedAt)}</IndexList.Cell>
+        <IndexList.Cell>{t.status}</IndexList.Cell>
+        <IndexList.Cell>{this.dateTimeString(t.scheduledFor)}</IndexList.Cell>
+        <IndexList.Cell />
+      </IndexList.Row>
+    ))
+
+    return taskRuns
+  }
+
+  private dateTimeString(dt: Date): string {
+    const date = dt.toDateString()
+    const time = dt.toLocaleTimeString()
+    const formatted = `${date} ${time}`
+
+    return formatted
+  }
+}
+export default TaskRunsPage

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

@@ -64,6 +64,16 @@ exports[`Tasks.Components.TaskRow renders 1`] = `
     <ComponentSpacer
       align="right"
     >
+      <Button
+        active={false}
+        color="default"
+        onClick={[Function]}
+        shape="none"
+        size="xs"
+        status="default"
+        text="View Runs"
+        type="button"
+      />
       <Button
         active={false}
         color="default"

ui/src/tasks/dummyData.ts

@@ -1,24 +1,19 @@
-import {Task} from '@influxdata/influx'
+import {Run} from '@influxdata/influx'
 
-export const dummyTasks: Task[] = [
+export const taskRuns: Run[] = [
   {
-    id: '02ef9deff2141000',
-    orgID: '02ee9e2a29d73000',
-    name: 'pasdlak',
-    status: Task.StatusEnum.Active,
-    owner: null,
-    flux:
-      'option task = {\n  name: "pasdlak",\n  cron: "2 0 * * *"\n}\nfrom(bucket: "inbucket") \n|> range(start: -1h)',
-    cron: '2 0 * * *',
-  },
-  {
-    id: '02f12c50dba72000',
-    orgID: '02ee9e2a29d73000',
-    name: 'somename',
-    status: Task.StatusEnum.Active,
-    owner: null,
-    flux:
-      'option task = {\n  name: "somename",\n  every: 1m,\n}\nfrom(bucket: "inbucket") \n|> range(start: -task.every)',
-    every: '1m0s',
+    id: '40002242',
+    taskID: 'string',
+    status: Run.StatusEnum.Scheduled,
+    scheduledFor: new Date('2019-02-11T22:37:25.985Z'),
+    startedAt: new Date('2019-02-11T22:37:25.985Z'),
+    finishedAt: new Date('2019-02-11T22:37:25.985Z'),
+    requestedAt: new Date('2019-02-11T22:37:25.985Z'),
+    links: {
+      self: '/api/v2/tasks/1/runs/1',
+      task: '/arequei/v2/tasks/1',
+      retry: '/api/v2/tasks/1/runs/1/retry',
+      logs: '/api/v2/tasks/1/runs/1/logs',
+    },
   },
 ]