Dashboard.tsx

import * as React from 'react'

import { Heading } from '../Heading/Heading'
import { TasksStatus } from '../TasksStatus/TasksStatus'
import { Section } from '../Section/Section'
import { VerticalStack } from '../VerticalStack/VerticalStack'
import { TasksGroupsList } from '../TasksGroupsList/TasksGroupsList'
import { TaskNodesList } from '../TaskNodesList/TaskNodesList'

import {
  ExtendedTasksGroupType,
  TasksStatusType,
} from '../../state/tasksGroups'
import { TaskNodes } from '../../state/taskNodes'

type DashboardPageProps = TasksStatusType & {
  tasksGroups: ExtendedTasksGroupType[]
  taskNodes: TaskNodes
  onAbort: (params: { id: string; projectId: string }) => Promise<any>
}

export function Dashboard(props: DashboardPageProps) {
  const {
    runningTasks,
    pendingTasks,
    queuedTasks,
    tasksGroups,
    taskNodes,
    onAbort,
  } = props
  return (
    <div>
      <Heading>Dashboard</Heading>
      <VerticalStack gap={30}>
        <Section title="Task scheduling status">
          <TasksStatus
            runningTasks={runningTasks}
            pendingTasks={pendingTasks}
            queuedTasks={queuedTasks}
          />
        </Section>
        <Section title="Task group status">
          <TasksGroupsList data={tasksGroups} onAbort={onAbort} />
        </Section>
        <Section title="Worker node status">
          <TaskNodesList data={taskNodes} />
        </Section>
      </VerticalStack>
    </div>
  )
}

DashboardPage.tsx

import React, { useEffect } from 'react'
import { ContainerType } from 'unstated'
import { TasksGroupsState } from '../../state/tasksGroups'
import { TaskNodesState } from '../../state/taskNodes'
import { TasksStatusState } from '../../state/tasksStatus'
import { Dashboard } from '../../components/Dashboard/Dashboard'

type FetchDataArgs = {
  tasksGroupsState: TasksGroupsState
  taskNodesState: TaskNodesState
  tasksStatusState: TasksStatusState
}

export type DashboardPageProps = {
  containers: [
    InstanceType<ContainerType<TasksGroupsState>>,
    InstanceType<ContainerType<TaskNodesState>>,
    InstanceType<ContainerType<TasksStatusState>>
  ]
}

function fetchData(props: FetchDataArgs) {
  const { tasksGroupsState, taskNodesState, tasksStatusState } = props
  tasksStatusState.fetch()
  tasksGroupsState.fetchAll({ limit: '200' })
  taskNodesState.fetchAll()
}

function useFetchData(fetchDataArgs: FetchDataArgs) {
  useEffect(() => {
    fetchData(fetchDataArgs)
    const interval = window.setInterval(() => fetchData(fetchDataArgs), 5000)
    return () => window.clearInterval(interval)
  }, [])
}

export function DashboardPage(props: DashboardPageProps) {
  const { containers } = props
  const [
    tasksGroupsContainer,
    taskNodesContainer,
    tasksStatusContainer,
  ] = containers
  const { state: tasksGroupsState } = tasksGroupsContainer
  const { state: taskNodesState } = taskNodesContainer
  const { state: tasksStatusState } = tasksStatusContainer
  const { data: taskNodes } = taskNodesState
  const { data: tasksGroups } = tasksGroupsState
  const { runningTasks, pendingTasks, queuedTasks } = tasksStatusState
  const fetchDataArgs = {
    tasksGroupsState,
    taskNodesState,
    tasksStatusState,
  }

  useFetchData(fetchDataArgs)

  return (
    <Dashboard
      runningTasks={runningTasks}
      pendingTasks={pendingTasks}
      queuedTasks={queuedTasks}
      tasksGroups={tasksGroups}
      taskNodes={taskNodes}
      onAbort={tasksGroupsState.abort}
    />
  )
}

DashboardPageRoute.tsx

import React from 'react'
import { Subscribe } from 'unstated'

import { TasksGroupsContainer } from '../../state/tasksGroups'
import { TaskNodesContainer } from '../../state/taskNodes'
import { TasksStatusContainer } from '../../state/tasksStatus'

import { DashboardPage, DashboardPageProps } from './DashboardPage'

export const DashboardPageRoute = () => (
  <Subscribe
    to={[TasksGroupsContainer, TaskNodesContainer, TasksStatusContainer]}>
    {(...containers: DashboardPageProps['containers']) => (
      <DashboardPage containers={containers} />
    )}
  </Subscribe>
)