diff --git a/CHANGELOG.md b/CHANGELOG.md index 7207b2add1..0636c106e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ 1. [11821](https://github.com/influxdata/influxdb/pull/11821): Display scraper name as the first and only updatable column in scrapers list 1. [11804](https://github.com/influxdata/influxdb/pull/11804): Add the ability to view runs for a task 1. [11824](https://github.com/influxdata/influxdb/pull/11824): Display last completed run for tasks list +1. [11836](https://github.com/influxdata/influxdb/pull/11836): Add the ability to view the logs for a specific task run ### Bug Fixes 1. [11819](https://github.com/influxdata/influxdb/pull/11819): Update the inline edit for resource names to guard for empty strings diff --git a/ui/src/tasks/components/RunLogsOverlay.tsx b/ui/src/tasks/components/RunLogsOverlay.tsx new file mode 100644 index 0000000000..bef8d03ec0 --- /dev/null +++ b/ui/src/tasks/components/RunLogsOverlay.tsx @@ -0,0 +1,64 @@ +import React, {PureComponent} from 'react' +import _ from 'lodash' + +import Container from 'src/clockface/components/overlays/OverlayContainer' +import Heading from 'src/clockface/components/overlays/OverlayHeading' +import Body from 'src/clockface/components/overlays/OverlayBody' + +// DummyData +import {runLogs} from 'src/tasks/dummyData' +import {IndexList} from 'src/clockface' + +interface Props { + onDismissOverlay: () => void + taskID: string + runID: string +} + +class RunLogsOverlay extends PureComponent { + constructor(props: Props) { + super(props) + } + + public render() { + const {onDismissOverlay} = this.props + + return ( + + + + + + + + + } columnCount={2}> + {this.listLogs} + + + + + ) + } + + public get listLogs(): JSX.Element[] { + const logs = runLogs.events.map(rl => ( + + {this.dateTimeString(rl.time)} + {rl.message} + + )) + + return logs + } + + private dateTimeString(dt: Date): string { + const date = dt.toDateString() + const time = dt.toLocaleTimeString() + const formatted = `${date} ${time}` + + return formatted + } +} + +export default RunLogsOverlay diff --git a/ui/src/tasks/components/TaskRunsList.tsx b/ui/src/tasks/components/TaskRunsList.tsx new file mode 100644 index 0000000000..178318987e --- /dev/null +++ b/ui/src/tasks/components/TaskRunsList.tsx @@ -0,0 +1,41 @@ +// Libraries +import React, {PureComponent} from 'react' + +// Components +import {Run} from '@influxdata/influx' +import {IndexList} from 'src/clockface' +import TaskRunsRow from './TaskRunsRow' + +interface Props { + taskID: string + runs: Run[] +} + +export default class TaskRunsList extends PureComponent { + public render() { + return ( + + + + + + + + + + } columnCount={6}> + {this.listRuns} + + + ) + } + + public get listRuns(): JSX.Element[] { + const {runs, taskID} = this.props + const taskRuns = runs.map(t => ( + + )) + + return taskRuns + } +} diff --git a/ui/src/tasks/components/TaskRunsPage.tsx b/ui/src/tasks/components/TaskRunsPage.tsx index 4f7bbd26de..8e6bbb92c0 100644 --- a/ui/src/tasks/components/TaskRunsPage.tsx +++ b/ui/src/tasks/components/TaskRunsPage.tsx @@ -1,21 +1,25 @@ // Libraries import React, {PureComponent} from 'react' +import {withRouter, WithRouterProps} from 'react-router' // Types import {Run} from '@influxdata/influx' -import {IndexList} from 'src/clockface' -import {taskRuns} from '../dummyData' import {Page} from 'src/pageLayout' +import TaskRunsList from 'src/tasks/components/TaskRunsList' + +// DummyData +import {taskRuns} from 'src/tasks/dummyData' interface Props { - taskID: string + params: {id: string} runs: Run[] } const dummyData = taskRuns -class TaskRunsPage extends PureComponent { +class TaskRunsPage extends PureComponent { public render() { + const {params} = this.props return ( <> @@ -27,47 +31,13 @@ class TaskRunsPage extends PureComponent {
- - - - - - - - - - } columnCount={6}> - {this.listRuns} - - +
) } - - public get listRuns(): JSX.Element[] { - const taskRuns = dummyData.map(t => ( - - {this.dateTimeString(t.requestedAt)} - {this.dateTimeString(t.startedAt)} - {this.dateTimeString(t.finishedAt)} - {t.status} - {this.dateTimeString(t.scheduledFor)} - - - )) - - return taskRuns - } - - private dateTimeString(dt: Date): string { - const date = dt.toDateString() - const time = dt.toLocaleTimeString() - const formatted = `${date} ${time}` - - return formatted - } } -export default TaskRunsPage + +export default withRouter(TaskRunsPage) diff --git a/ui/src/tasks/components/TaskRunsRow.tsx b/ui/src/tasks/components/TaskRunsRow.tsx new file mode 100644 index 0000000000..8f8c9cb410 --- /dev/null +++ b/ui/src/tasks/components/TaskRunsRow.tsx @@ -0,0 +1,89 @@ +// Libraries +import React, {PureComponent} from 'react' + +// Components +import {Run} from '@influxdata/influx' +import { + IndexList, + ComponentSize, + ComponentColor, + OverlayTechnology, +} from 'src/clockface' +import {Button} from '@influxdata/clockface' +import RunLogsOverlay from './RunLogsOverlay' + +interface Props { + taskID: string + run: Run +} + +interface State { + isImportOverlayVisible: boolean +} + +export default class TaskRunsRow extends PureComponent { + constructor(props: Props) { + super(props) + + this.state = { + isImportOverlayVisible: false, + } + } + + public render() { + const {run} = this.props + return ( + <> + + + {this.dateTimeString(run.requestedAt)} + + {this.dateTimeString(run.startedAt)} + {this.dateTimeString(run.finishedAt)} + {run.status} + + {this.dateTimeString(run.scheduledFor)} + + +