feat(ui): added last run status to tasks (#16340)

feat(ui): added last run status to tasks

CHANGELOG.md

@@ -19,6 +19,7 @@
 1. [16324](https://github.com/influxdata/influxdb/pull/16324): Add support for tasks to pkger export functionality
 1. [16226](https://github.com/influxdata/influxdb/pull/16226): Add group() to Query Builder
 1. [16338](https://github.com/influxdata/influxdb/pull/16338): Add last run status to check and notification rules
+1. [16340](https://github.com/influxdata/influxdb/pull/16340): Add last run status to tasks
 1. [16341](https://github.com/influxdata/influxdb/pull/16341): Extend pkger apply functionality with ability to provide secrets outside of pkg
 
 ### Bug Fixes

ui/src/tasks/components/TaskCard.tsx

@@ -4,9 +4,17 @@ import {connect} from 'react-redux'
 import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
-import {SlideToggle, ComponentSize, ResourceCard} from '@influxdata/clockface'
+import {
+  SlideToggle,
+  ComponentSize,
+  ResourceCard,
+  IconFont,
+  InputLabel,
+  FlexBox,
+} from '@influxdata/clockface'
 import {Context} from 'src/clockface'
 import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
+import LastRunTaskStatus from 'src/shared/components/lastRunTaskStatus/LastRunTaskStatus'
 
 // Actions
 import {addTaskLabelsAsync, removeTaskLabelsAsync} from 'src/tasks/actions'
@@ -17,12 +25,11 @@ import {viewableLabels} from 'src/labels/selectors'
 
 // Types
 import {ComponentColor} from '@influxdata/clockface'
-import {ITask as Task, ILabel} from '@influxdata/influx'
-import {AppState, TaskStatus} from 'src/types'
+import {ILabel} from '@influxdata/influx'
+import {AppState, TaskStatus, Task} from 'src/types'
 
 // Constants
 import {DEFAULT_TASK_NAME} from 'src/dashboards/constants'
-import {IconFont} from 'src/clockface/types/index'
 
 interface PassedProps {
   task: Task
@@ -69,21 +76,35 @@ export class TaskCard extends PureComponent<Props & WithRouterProps> {
           />
         }
         metaData={[
+          this.activeToggle,
           <>Last completed at {task.latestCompleted}</>,
           <>{`Scheduled to run ${this.schedule}`}</>,
         ]}
         toggle={
-          <SlideToggle
-            active={this.isTaskActive}
-            size={ComponentSize.ExtraSmall}
-            onChange={this.changeToggle}
-            testID="task-card--slide-toggle"
+          <LastRunTaskStatus
+            lastRunError={task.lastRunError}
+            lastRunStatus={task.lastRunStatus}
           />
         }
       />
     )
   }
 
+  private get activeToggle(): JSX.Element {
+    const labelText = this.isTaskActive ? 'Active' : 'Inactive'
+    return (
+      <FlexBox margin={ComponentSize.Small}>
+        <SlideToggle
+          active={this.isTaskActive}
+          size={ComponentSize.ExtraSmall}
+          onChange={this.changeToggle}
+          testID="task-card--slide-toggle"
+        />
+        <InputLabel active={this.isTaskActive}>{labelText}</InputLabel>
+      </FlexBox>
+    )
+  }
+
   private get contextMenu(): JSX.Element {
     const {task, onClone, onDelete, onRunTask} = this.props
 

ui/src/types/tasks.ts

@@ -1,4 +1,7 @@
 import {Task as TaskAPI, ITask} from '@influxdata/influx'
 
 export const TaskStatus = TaskAPI.StatusEnum
-export interface Task extends ITask {}
+export interface Task extends ITask {
+  lastRunError?: string
+  lastRunStatus?: 'failed' | 'success' | 'canceled'
+}