Add Task Manager

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 filetring

Signed-off-by: Radoslaw Szwajkowski <[email protected]>

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",
@@ -249,7 +251,8 @@
     "reports": "Reports",
     "migrationWaves": "Migration waves",
     "issues": "Issues",
-    "dependencies": "Dependencies"
+    "dependencies": "Dependencies",
+    "tasks": "Task Manager"
   },
   "terms": {
     "accepted": "Accepted",
@@ -467,7 +470,8 @@
     "YAMLTemplate": "YAML template"
   },
   "titles": {
-    "archetypeDrawer": "Archetype details"
+    "archetypeDrawer": "Archetype details",
+    "taskManager": "Task Manager"
   },
   "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

@@ -38,6 +38,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>;
@@ -184,6 +187,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

@@ -306,7 +306,7 @@ export type TaskState =
   | "Postponed";
 
 export interface Task {
-  id?: number;
+  id: number;
   createUser?: string;
   updateUser?: string;
   createTime?: string;

client/src/app/api/rest.ts

@@ -353,6 +353,9 @@ export const deleteTask = (id: number) => axios.delete<Task>(`${TASKS}/${id}`);
 export const cancelTask = (id: number) =>
   axios.put<Task>(`${TASKS}/${id}/cancel`);
 
+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,38 @@
+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 "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>
   );