Fix tasks after backend updates (#4852)

* fix tasks and add all tasks link

* update tasks columns

* update variants

* add access test

* update test

Author: pa-lem

frontend/app/src/graphql/queries/tasks/getTasksItemDetails.ts

@@ -6,13 +6,14 @@ query GetTaskDetails {
     count
     edges {
       node {
-        conclusion
         created_at
         id
         related_node
         related_node_kind
         title
         updated_at
+        state
+        progress
         logs {
           edges {
             node {

frontend/app/src/graphql/queries/tasks/getTasksItems.ts

@@ -2,17 +2,18 @@ import Handlebars from "handlebars";
 
 export const getTasksItems = Handlebars.compile(`
 query GetTasks($offset: Int, $limit: Int) {
-  {{kind}}(offset: $offset, limit: $limit, {{#if relatedNode}}related_node__ids: ["{{relatedNode}}"]{{/if}}) {
+  {{kind}}(offset: $offset, limit: $limit {{#if relatedNode}}, related_node__ids: ["{{relatedNode}}"]{{/if}}) {
     count
     edges {
       node {
-        conclusion
         created_at
         id
         related_node
         related_node_kind
         title
         updated_at
+        state
+        progress
       }
     }
   }

frontend/app/src/pages/tasks/task-details.tsx

@@ -1,3 +1,4 @@
+import { Link } from "@/components/ui/link";
 import { TASK_OBJECT } from "@/config/constants";
 import { getTaskItemDetailsTitle } from "@/graphql/queries/tasks/getTasksItemDetailsTitle";
 import useQuery from "@/hooks/useQuery";
@@ -6,12 +7,13 @@ import ErrorScreen from "@/screens/errors/error-screen";
 import Content from "@/screens/layout/content";
 import LoadingScreen from "@/screens/loading-screen/loading-screen";
 import { TaskItemDetails } from "@/screens/tasks/task-item-details";
+import { constructPath } from "@/utils/fetch";
 import { gql } from "@apollo/client";
+import { Icon } from "@iconify-icon/react";
 import { useParams } from "react-router-dom";
 
 const TaskDetailsPage = () => {
   useTitle("Task Details");
-
   const { task: taskId } = useParams();
 
   const query = gql(
@@ -32,17 +34,25 @@ const TaskDetailsPage = () => {
 
   const taskData = data?.[TASK_OBJECT]?.edges?.[0]?.node;
 
+  const title = (
+    <div className="flex items-center gap-2">
+      <div className="flex bg-custom-white text-sm font-normal">
+        <Link to={constructPath("/tasks")} className="flex items-center p-2 ">
+          <Icon icon={"mdi:chevron-left"} />
+          All tasks
+        </Link>
+      </div>
+      {taskData.title}
+    </div>
+  );
+
   if (!taskData) {
     return <ErrorScreen message={`Task with ID ${taskId} not found.`} />;
   }
 
   return (
     <Content.Card>
-      <Content.CardTitle
-        title={taskData.title}
-        isReloadLoading={loading}
-        reload={() => refetch()}
-      />
+      <Content.CardTitle title={title} isReloadLoading={loading} reload={() => refetch()} />
 
       <TaskItemDetails />
     </Content.Card>

frontend/app/src/screens/tasks/task-item-details.tsx

@@ -2,10 +2,9 @@ import { TASK_OBJECT } from "@/config/constants";
 import useQuery from "@/hooks/useQuery";
 import { gql } from "@apollo/client";
 
-import { BADGE_TYPES, Badge } from "@/components/display/badge";
 import { DateDisplay } from "@/components/display/date-display";
-import { DurationDisplay } from "@/components/display/duration-display";
 import { List } from "@/components/table/list";
+import { Badge } from "@/components/ui/badge";
 import { Id } from "@/components/ui/id";
 import { SearchInput } from "@/components/ui/search-input";
 import { QSP } from "@/config/qsp";
@@ -17,10 +16,16 @@ import { useParams } from "react-router-dom";
 import { StringParam, useQueryParam } from "use-query-params";
 import { Logs, tLog } from "./logs";
 
-export const getConclusionBadge: { [key: string]: any } = {
-  success: <Badge type={BADGE_TYPES.VALIDATE}>success</Badge>,
-  unknown: <Badge type={BADGE_TYPES.LIGHT}>unknown</Badge>,
-  failure: <Badge type={BADGE_TYPES.CANCEL}>failure</Badge>,
+export const getStateBadge: { [key: string]: any } = {
+  SCHEDULED: <Badge variant={"blue"}>SCHEDULED</Badge>,
+  PENDING: <Badge variant={"blue-outline"}>PENDING</Badge>,
+  RUNNING: <Badge variant={"green-outline"}>RUNNING</Badge>,
+  COMPLETED: <Badge variant={"green"}>COMPLETED</Badge>,
+  FAILED: <Badge variant={"red"}>FAILED</Badge>,
+  CANCELLED: <Badge variant={"red-outline"}>CANCELLED</Badge>,
+  CRASHED: <Badge variant={"yellow"}>CRASHED</Badge>,
+  PAUSED: <Badge variant={"blue-outline"}>PAUSED</Badge>,
+  CANCELLING: <Badge variant={"gray"}>CANCELLING</Badge>,
 };
 
 export const TaskItemDetails = forwardRef((props, ref) => {
@@ -65,16 +70,16 @@ export const TaskItemDetails = forwardRef((props, ref) => {
       label: "Title",
     },
     {
-      name: "conclusion",
-      label: "Conclusion",
+      name: "state",
+      label: "State",
     },
     {
       name: "related_node",
       label: "Related node",
     },
     {
-      name: "duration",
-      label: "Duration",
+      name: "progress",
+      label: "Progress",
     },
     {
       name: "updated_at",
@@ -88,10 +93,11 @@ export const TaskItemDetails = forwardRef((props, ref) => {
     values: {
       id: object.id,
       title: object.title,
-      conclusion: getConclusionBadge[object.conclusion],
-      related_node: <Id id={object.related_node} kind={object.related_node_kind} preventCopy />,
-      related_node_kind: object.related_node_kind,
-      duration: <DurationDisplay date={object.created_at} endDate={object.updated_at} />,
+      state: getStateBadge[object.state],
+      related_node: object.related_node_kind && (
+        <Id id={object.related_node} kind={object.related_node_kind} preventCopy />
+      ),
+      progress: object.progress,
       updated_at: <DateDisplay date={object.updated_at} />,
     },
   };

frontend/app/src/screens/tasks/task-items.tsx

@@ -5,7 +5,6 @@ import useQuery from "@/hooks/useQuery";
 import { gql } from "@apollo/client";
 
 import { DateDisplay } from "@/components/display/date-display";
-import { DurationDisplay } from "@/components/display/duration-display";
 import { Id } from "@/components/ui/id";
 import { QSP } from "@/config/qsp";
 import { getTasksItems } from "@/graphql/queries/tasks/getTasksItems";
@@ -14,7 +13,7 @@ import LoadingScreen from "@/screens/loading-screen/loading-screen";
 import { constructPath } from "@/utils/fetch";
 import { forwardRef, useImperativeHandle } from "react";
 import { useLocation, useParams } from "react-router-dom";
-import { getConclusionBadge } from "./task-item-details";
+import { getStateBadge } from "./task-item-details";
 
 interface TaskItemsProps {
   hideRelatedNode?: boolean;
@@ -58,16 +57,16 @@ export const TaskItems = forwardRef(({ hideRelatedNode }: TaskItemsProps, ref) =
       label: "Title",
     },
     {
-      name: "conclusion",
-      label: "Conclusion",
+      name: "state",
+      label: "State",
     },
     !hideRelatedNode && {
       name: "related_node",
       label: "Related node",
     },
     {
-      name: "duration",
-      label: "Duration",
+      name: "progress",
+      label: "Progress",
     },
     {
       name: "updated_at",
@@ -91,13 +90,23 @@ export const TaskItems = forwardRef(({ hideRelatedNode }: TaskItemsProps, ref) =
   const rows = edges.map((edge: any) => ({
     link: getUrl(edge.node.id),
     values: {
-      title: edge.node.title,
-      conclusion: getConclusionBadge[edge.node.conclusion],
-      related_node: (
-        <Id id={edge.node.related_node} kind={edge.node.related_node_kind} preventCopy />
-      ),
-      duration: <DurationDisplay date={edge.node.created_at} endDate={edge.node.updated_at} />,
-      updated_at: <DateDisplay date={edge.node.updated_at} />,
+      title: {
+        display: edge.node.title,
+      },
+      state: {
+        display: getStateBadge[edge.node.state],
+      },
+      related_node: {
+        display: edge.node.related_node_kind && (
+          <Id id={edge.node.related_node} kind={edge.node.related_node_kind} preventCopy />
+        ),
+      },
+      duration: {
+        display: edge.node.progress,
+      },
+      updated_at: {
+        display: <DateDisplay date={edge.node.updated_at} />,
+      },
     },
   }));
 

frontend/app/tests/e2e/tasks/tasks-view.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Tasks - READ", () => {
+  test("should correctly access to the tasks list and details", async ({ page }) => {
+    await page.goto("/tasks");
+    await expect(page.getByRole("heading", { name: "Task Overview" })).toBeVisible();
+    await page.getByRole("row", { name: "SCHEDULED" }).getByRole("link").nth(1).click();
+    await expect(page.getByRole("link", { name: "All tasks" })).toBeVisible();
+    await expect(page.getByText("StateSCHEDULED")).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Task Logs (0)" })).toBeVisible();
+  });
+});