✨ Task table (#1957)

Functional changes:
1. create task manager entry in the sidebar navigation list
2. place task page under /tasks route
3. present tasks in a server-filtered table
4. row actions supported: canceling, enable/disable preemption flag
5. use column management to hide optional columns: pod, started,
   terminated

Related features:
1. make id property required in Task type
2. switch task update endpoint to use patch method
3. provide icon-to-state mapping that preserves original state names
   which are required for server filtering

Resolves: #1931

---------

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

client/public/locales/en/translation.json

@@ -29,12 +29,14 @@
     "createTags": "Create tags",
     "cancelAnalysis": "Cancel analysis",
     "delete": "Delete",
+    "disablePreemption": "Disable preemption",
     "discardAssessment": "Discard assessment(s)",
     "discardReview": "Discard review",
     "downloadCsvTemplate": "Download CSV template",
     "download": "Download {{what}}",
     "duplicate": "Duplicate",
     "edit": "Edit",
+    "enablePreemption": "Enable preemption",
     "export": "Export",
     "filterBy": "Filter by {{what}}",
     "import": "Import",
@@ -224,7 +226,11 @@
     "noAnswers": "Are you sure you want to close the assessment? There are no answers to save.",
     "unlinkTicket": "Unlink from Jira",
     "noTagsAvailable": "No tags available",
-    "noAssociatedTags": "This tag category has no associated tags."
+    "noAssociatedTags": "This tag category has no associated tags.",
+    "updateFailed": "Update failed.",
+    "updateRequestSubmitted": "Update request submitted.",
+    "cancelationFailed": "Cancelation failed.",
+    "cancelationRequestSubmitted": "Cancelation request submitted"
   },
   "proposedActions": {
     "refactor": "Refactor",
@@ -249,7 +255,8 @@
     "reports": "Reports",
     "migrationWaves": "Migration waves",
     "issues": "Issues",
-    "dependencies": "Dependencies"
+    "dependencies": "Dependencies",
+    "tasks": "Task Manager"
   },
   "terms": {
     "accepted": "Accepted",
@@ -367,6 +374,7 @@
     "jobFunction": "Job function",
     "jobFunctionDeleted": "Job function deleted",
     "jobFunctions": "Job functions",
+    "kind": "Kind",
     "language": "Language",
     "label": "Label",
     "loading": "Loading",
@@ -391,6 +399,8 @@
     "notYetReviewed": "Not yet reviewed",
     "other": "Other",
     "owner": "Owner",
+    "pod": "Pod",
+    "preemption": "Preemption",
     "priority": "Priority",
     "proposedAction": "Proposed action",
     "proxyConfig": "Proxy configuration",
@@ -434,6 +444,7 @@
     "stakeholderGroups": "Stakeholder groups",
     "stakeholders": "Stakeholders",
     "startDate": "Start date",
+    "started": "Started",
     "status": "Status",
     "suggestedAdoptionPlan": "Suggested adoption plan",
     "svnConfig": "Subversion configuration",
@@ -452,6 +463,7 @@
     "tagCategoryDeleted": "Tag category deleted",
     "tagCategories": "Tag categories",
     "teamMember": "team member",
+    "terminated": "Terminated",
     "ticket": "Ticket",
     "trivialButMigratable": "Trivial but migratable",
     "type": "Type",
@@ -468,7 +480,9 @@
     "YAMLTemplate": "YAML template"
   },
   "titles": {
-    "archetypeDrawer": "Archetype details"
+    "archetypeDrawer": "Archetype details",
+    "taskManager": "Task Manager",
+    "task": "Task"
   },
   "toastr": {
     "success": {

client/src/app/Constants.ts

@@ -244,4 +244,5 @@ export enum TablePersistenceKeyPrefix {
   issuesRemainingIncidents = "ii",
   dependencyApplications = "da",
   archetypes = "ar",
+  tasks = "t",
 }

client/src/app/Paths.ts

@@ -40,6 +40,7 @@ export const DevPaths = {
   issuesSingleAppSelected: "/issues/single-app/:applicationId",
 
   dependencies: "/dependencies",
+  tasks: "/tasks",
 } as const;
 
 export type DevPathValues = (typeof DevPaths)[keyof typeof DevPaths];

client/src/app/Routes.tsx

@@ -63,6 +63,9 @@ const AssessmentSummary = lazy(
       "./pages/assessment/components/assessment-summary/assessment-summary-page"
     )
 );
+
+const TaskManager = lazy(() => import("./pages/tasks/tasks-page"));
+
 export interface IRoute<T> {
   path: T;
   comp: React.ComponentType<any>;
@@ -189,6 +192,11 @@ export const devRoutes: IRoute<DevPathValues>[] = [
     comp: Archetypes,
     exact: false,
   },
+  {
+    path: Paths.tasks,
+    comp: TaskManager,
+    exact: false,
+  },
 ];
 
 export const adminRoutes: IRoute<AdminPathValues>[] = [

client/src/app/api/models.ts

@@ -301,12 +301,13 @@ export type TaskState =
   | "Failed"
   | "Running"
   | "No task"
+  | "QuotaBlocked"
   | "Ready"
   | "Pending"
   | "Postponed";
 
 export interface Task {
-  id?: number;
+  id: number;
   createUser?: string;
   updateUser?: string;
   createTime?: string;

client/src/app/api/rest.ts

@@ -373,6 +373,9 @@ export const getTaskQueue = (addon?: string): Promise<TaskQueue> =>
     .get<TaskQueue>(`${TASKS}/report/queue`, { params: { addon } })
     .then(({ data }) => data);
 
+export const updateTask = (task: Partial<Task> & { id: number }) =>
+  axios.patch<Task>(`${TASKS}/${task.id}`, task);
+
 export const createTaskgroup = (obj: Taskgroup) =>
   axios.post<Taskgroup>(TASKGROUPS, obj).then((response) => response.data);
 

client/src/app/components/Icons/index.ts

@@ -1,3 +1,4 @@
 export * from "./OptionalTooltip";
 export * from "./IconedStatus";
 export * from "./IconWithLabel";
+export * from "./taskStateToIcon";

client/src/app/components/Icons/taskStateToIcon.tsx

@@ -0,0 +1,39 @@
+import { TaskState } from "@app/api/models";
+import React from "react";
+import { Icon } from "@patternfly/react-core";
+import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
+import TimesCircleIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon";
+import InProgressIcon from "@patternfly/react-icons/dist/esm/icons/in-progress-icon";
+import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
+import UnknownIcon from "@patternfly/react-icons/dist/esm/icons/unknown-icon";
+
+export const taskStateToIcon = (state?: TaskState) => {
+  switch (state) {
+    case "not supported":
+    case "No task":
+      return <UnknownIcon />;
+    case "Canceled":
+      return <TimesCircleIcon />;
+    case "Succeeded":
+      return (
+        <Icon status={"success"}>
+          <CheckCircleIcon />
+        </Icon>
+      );
+    case "Failed":
+      return (
+        <Icon status={"danger"}>
+          <ExclamationCircleIcon />
+        </Icon>
+      );
+    case "Pending":
+      return <InProgressIcon />;
+    case "Created":
+    case "QuotaBlocked":
+    case "Running":
+    case "Ready":
+    case "Postponed":
+    default:
+      return <></>;
+  }
+};

client/src/app/layout/SidebarApp/SidebarApp.tsx

@@ -149,6 +149,11 @@ export const MigrationSidebar = () => {
             </NavItem>
           </>
         ) : null}
+        <NavItem>
+          <NavLink to={DevPaths.tasks} activeClassName="pf-m-current">
+            {t("sidebar.tasks")}
+          </NavLink>
+        </NavItem>
       </NavList>
     </PersonaSidebar>
   );