Skip to main content

Tasklist Overview

TaskListing Class​

Overview​

The TaskListing component is designed to display information about a single task in a tabular format within a task management interface. It handles several tasks, including the cancellation of tasks, re-running tasks, and displaying details related to the status and submission times.

Key Features​

  • Task Information Display: The TaskListing component accepts task details as props such as uuid, status, submitted_at, updated_at, isSelected, and toggleSelection to present each task's information in the UI.
  • Cancel Task Button: If the task is in a status that allows cancellation, a cancel button is shown. On clicking, a confirmation modal is displayed, and the user can confirm or deny the cancellation action.
  • Rerun Task Button: If the task's status allows it (e.g., "COMPLETED", "ERROR"), a rerun button is shown. Clicking this button retrieves task details and redirects the user to a new page where they can rerun the task.
  • Error Handling: The component displays error messages in case the cancel or rerun actions fail.

Component Structure​

  • Props:

    • uuid: The unique identifier of the task.
    • status: The current status of the task.
    • submitted_at: The timestamp when the task was submitted.
    • updated_at: The timestamp of the last task update.
    • isSelected: Boolean value to indicate if the task is selected.
    • toggleSelection: Function to toggle task selection.
    • showWorkflowTasks: Boolean flag to determine whether workflow tasks should be shown.

  • State:

    • alertMessage: Message to be shown in case of errors.
    • isAlertActive: Boolean flag indicating if the alert should be displayed.
    • showCancelConfirmation: Boolean flag to show the cancel task confirmation modal.
    • error: Stores any error message related to rerun or cancel actions.

Methods​

  • handleCancelTask: Responsible for invoking the cancel API depending on whether it's a regular task or a workflow task. If the API call fails, an error message is displayed.
  • handleRerunButtonClick: Triggers rerunning the task by fetching the task details using the appropriate API and navigating to the rerun page.
  • handleCheckboxChange: Toggles the selection of the task by calling the toggleSelection function passed in props.
  • confirmCancelTask: Confirms and executes the cancellation of the task upon user approval.

UI Elements​

  • Cancel Button: A button with a cancel icon (FontAwesome) that shows a confirmation modal when clicked.
  • Rerun Button: A button with a retry icon that reruns the task if the status allows.
  • Modal: A modal is used for confirming the cancellation of a task.

ColumnOrderToggle Class​

Overview​

ColumnOrderToggle is a reusable component used to toggle the order of columns in a task list, specifically allowing the user to change the sorting order (ascending or descending) of columns like UUID, Submission Date, etc.

Key Features​

  • Column Sorting: By clicking on the component, the order of the column is toggled between ascending and descending.
  • Icon Display: Displays an appropriate sorting icon (ascending or descending) based on the current sort order.

Component Structure​

  • Props:
    • columnName: The name of the column to be used for sorting.
    • currentOrder: The current sorting order.
    • setOrder: Function to set the order of the column.

Methods​

  • handleSwitchOrder: Toggles the sorting order of the column between ascending and descending when the user clicks on the icon.

TaskList Class​

Overview​

The TaskList component is the main container for the task table. It fetches tasks from the context and filters them based on user input. It also displays a search bar, status filter dropdown, and allows the user to apply filters to the displayed tasks.

Key Features​

  • Search Bar: Allows users to filter tasks by name or UUID.
  • Status Filter: Dropdown menu to filter tasks by their current status (e.g., "SUBMITTED", "APPROVED", etc.).
  • Column Sorting: Allows sorting of tasks by different attributes such as UUID, submission date, and last updated date.
  • Task Data Display: Displays tasks in a table, with task details, status, and actions (like canceling or rerunning tasks).
  • Task Filter Persistence: The selected filters and order are persisted across renders, allowing users to maintain their previous filters when navigating back to the task list.

Component Structure​

  • State:

    • showWorkflowTasks: Determines whether to display workflow tasks or single tasks.
    • taskData: Stores the tasks fetched from the useTaskData hook.
    • taskFilters: Stores the current filters applied to the task list.
    • token: The search query for filtering tasks by name or UUID.
    • statuses: Stores the selected task statuses for filtering.
    • typedChar: Tracks the length of the typed characters in the search input.
    • showValidationMessage: Displays a validation message if the search query is shorter than the minimum required length.

  • Methods:

    • handleNameInput: Handles the input in the search bar and updates the token state.
    • restoreFilters: Restores the filters when the user interacts with the search input.
    • handleApplyFilters: Applies the filters when the "Enter" key is pressed in the search bar.
    • handleStatusChange: Handles the status filter changes and updates the statuses state.
    • findFilteredTokens: Displays a warning message if no tasks match the search query.

Integration​

These components work together within the task management interface. TaskList is responsible for displaying all tasks, including the task status, and sorting them based on user input. TaskListing displays individual task details and provides the functionality to cancel or rerun tasks. The ColumnOrderToggle component is used within the task table headers to allow users to sort columns based on their preferences.

By utilizing context (useTaskData and useTaskFilters), the components ensure that the displayed tasks and filters are consistent across the application.

Conclusion​

These components enable a dynamic and interactive task management interface that supports filtering, sorting, and managing tasks efficiently. With the ability to cancel, rerun, and sort tasks, the system provides a seamless experience for managing and tracking task statuses.