feat(paginatedTasks): fetch all tasks in batches of 500 (#3053)

Author: hoorayimhelping

src/shared/containers/SetOrg.tsx

@@ -12,6 +12,7 @@ import {
   TasksPagePaginated,
   TaskPage,
   TaskRunsPage,
+  TaskRunsPagePaginated,
   TaskEditPage,
   DashboardsIndex,
   DataExplorerPage,
@@ -155,7 +156,17 @@ const SetOrg: FC = () => {
           <Route path={`${orgPath}/checks/:checkID`} component={CheckHistory} />
 
           {/* Tasks */}
-          <Route path={`${orgPath}/tasks/:id/runs`} component={TaskRunsPage} />
+          {isFlagEnabled('paginatedTasks') ? (
+            <Route
+              path={`${orgPath}/tasks/:id/runs`}
+              component={TaskRunsPagePaginated}
+            />
+          ) : (
+            <Route
+              path={`${orgPath}/tasks/:id/runs`}
+              component={TaskRunsPage}
+            />
+          )}
           <Route path={`${orgPath}/tasks/:id/edit`} component={TaskEditPage} />
           <Route path={`${orgPath}/tasks/new`} component={TaskPage} />
           {isFlagEnabled('paginatedTasks') ? (

src/shared/containers/index.tsx

@@ -12,6 +12,9 @@ export const TaskPage = lazy(() => import('src/tasks/containers/TaskPage'))
 export const TaskRunsPage = lazy(() =>
   import('src/tasks/components/TaskRunsPage')
 )
+export const TaskRunsPagePaginated = lazy(() =>
+  import('src/tasks/pagination/TaskRunsPage')
+)
 export const TaskEditPage = lazy(() =>
   import('src/tasks/containers/TaskEditPage')
 )

src/tasks/actions/thunks.ts

@@ -62,6 +62,16 @@ import {TASK_LIMIT} from 'src/resources/constants'
 type Action = TaskAction | ExternalActions | ReturnType<typeof getTasks>
 type ExternalActions = NotifyAction | ReturnType<typeof checkTaskLimits>
 
+const fetchTasks = async (query: GetTasksParams['query']) => {
+  const resp = await api.getTasks({query})
+
+  if (resp.status !== 200) {
+    throw new Error(resp.data.message)
+  }
+
+  return resp
+}
+
 // Thunks
 export const getTasks = (limit: number = TASK_LIMIT) => async (
   dispatch: Dispatch<TaskAction | NotifyAction>,
@@ -76,15 +86,62 @@ export const getTasks = (limit: number = TASK_LIMIT) => async (
     const org = getOrg(state)
 
     const query: GetTasksParams['query'] = {orgID: org.id, limit}
+    const resp = await fetchTasks(query)
 
-    const resp = await api.getTasks({query})
+    const tasks = normalize<Task, TaskEntities, string[]>(
+      resp.data.tasks,
+      arrayOfTasks
+    )
 
-    if (resp.status !== 200) {
-      throw new Error(resp.data.message)
+    dispatch(setTasks(RemoteDataState.Done, tasks))
+  } catch (error) {
+    dispatch(setTasks(RemoteDataState.Error))
+    const message = getErrorMessage(error)
+    console.error(error)
+    dispatch(notify(copy.tasksFetchFailed(message)))
+  }
+}
+
+export const getAllTasks = () => async (
+  dispatch: Dispatch<TaskAction | NotifyAction>,
+  getState: GetState
+): Promise<void> => {
+  try {
+    const state = getState()
+    if (getStatus(state, ResourceType.Tasks) === RemoteDataState.NotStarted) {
+      dispatch(setTasks(RemoteDataState.Loading))
+    }
+    const org = getOrg(state)
+
+    // fetching 500 tasks at once strikes a balance between large requests and many requests
+    const limit = 500
+    const query: GetTasksParams['query'] = {orgID: org.id, limit}
+    const resp = await fetchTasks(query)
+
+    let nonNormalizedTasks = resp.data.tasks
+    let next = resp.data.links.next
+    while (next && next.includes('after=')) {
+      const afterAndExtras = next.split('after=')
+      if (afterAndExtras.length < 2) {
+        break
+      }
+
+      const after = afterAndExtras[1].split('&')[0]
+      if (!after) {
+        break
+      }
+
+      query.after = after
+      const resp = await api.getTasks({query})
+      if (resp.status !== 200) {
+        throw new Error(resp.data.message)
+      }
+      nonNormalizedTasks = [...nonNormalizedTasks, ...resp.data.tasks]
+      next = resp.data.links.next
     }
 
     const tasks = normalize<Task, TaskEntities, string[]>(
-      resp.data.tasks,
+      nonNormalizedTasks,
       arrayOfTasks
     )
 

src/tasks/pagination/TaskRunsPage.tsx

@@ -7,7 +7,6 @@ import {withRouter, RouteComponentProps} from 'react-router-dom'
 import {Page, Sort} from '@influxdata/clockface'
 import TaskRunsList from 'src/tasks/components/TaskRunsList'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
-import GetResources from 'src/resources/components/GetResources'
 import {TaskRunsCard} from 'src/tasks/components/TaskRunsCard'
 import {PageBreadcrumbs} from 'src/tasks/components/PageBreadcrumbs'
 
@@ -18,16 +17,12 @@ import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
 // Actions
 import {getRuns, runTask, updateTaskStatus} from 'src/tasks/actions/thunks'
 
-// Selectors
-import {getByID} from 'src/resources/selectors'
-
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 
 // Types
 import {SortTypes} from 'src/shared/utils/sort'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
-import {ResourceType, Task} from 'src/types'
 
 type ReduxProps = ConnectedProps<typeof connector>
 type Props = ReduxProps & RouteComponentProps<{id: string; orgID: string}>
@@ -87,16 +82,14 @@ class TaskRunsPage extends PureComponent<Props, State> {
             </Page.ControlBarRight>
           </Page.ControlBar>
           <Page.Contents fullWidth={false} scrollable={true}>
-            <GetResources resources={[ResourceType.Tasks]}>
-              <TaskRunsList
-                taskID={match.params.id}
-                runs={runs}
-                sortKey={sortKey}
-                sortDirection={sortDirection}
-                sortType={sortType}
-                onClickColumn={this.handleClickColumn}
-              />
-            </GetResources>
+            <TaskRunsList
+              taskID={match.params.id}
+              runs={runs}
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              sortType={sortType}
+              onClickColumn={this.handleClickColumn}
+            />
           </Page.Contents>
         </Page>
       </SpinnerContainer>
@@ -143,13 +136,8 @@ class TaskRunsPage extends PureComponent<Props, State> {
   }
 }
 
-const mstp = (state: AppState, props) => {
-  const {runs, runStatus} = state.resources.tasks
-  const currentTask = getByID<Task>(
-    state,
-    ResourceType.Tasks,
-    props.match.params.id
-  )
+const mstp = (state: AppState) => {
+  const {currentTask, runs, runStatus} = state.resources.tasks
 
   return {
     runs,
@@ -159,9 +147,9 @@ const mstp = (state: AppState, props) => {
 }
 
 const mdtp = {
-  updateTaskStatus,
   getRuns,
   onRunTask: runTask,
+  updateTaskStatus,
 }
 
 const connector = connect(mstp, mdtp)

src/tasks/pagination/TasksPage.tsx

@@ -48,7 +48,7 @@ import {TaskSortKey} from 'src/shared/components/resource_sort_dropdown/generate
 import {getAll} from 'src/resources/selectors'
 import {getResourcesStatus} from 'src/resources/selectors/getResourcesStatus'
 
-import {getTasks} from 'src/tasks/actions/thunks'
+import {getAllTasks} from 'src/tasks/actions/thunks'
 import {getLabels} from 'src/labels/actions/thunks'
 
 type ReduxProps = ConnectedProps<typeof connector>
@@ -83,7 +83,7 @@ class TasksPage extends PureComponent<Props, State> {
   }
 
   public componentDidMount() {
-    this.props.getTasks(-1) // -1 means fetch all tasks with no limit
+    this.props.getAllTasks()
     this.props.getLabels()
 
     let sortType: SortTypes = this.state.sortType
@@ -313,7 +313,7 @@ const mdtp = {
   checkTaskLimits: checkTasksLimitsAction,
   cloneTask,
   deleteTask,
-  getTasks,
+  getAllTasks,
   getLabels,
   onAddTaskLabel: addTaskLabel,
   onRunTask: runTask,