From fd6f072ea52e0f76d82fc076c879327411462e28 Mon Sep 17 00:00:00 2001 From: minnakt <47064971+minnakt@users.noreply.github.com> Date: Wed, 20 Mar 2024 12:06:42 -0400 Subject: [PATCH] DEVPROD-1976: Migrate execution tasks table to LeafyGreen table (#2302) --- .../integration/task/execution_task_table.ts | 12 +- cypress/integration/task/task_actions.ts | 2 +- src/analytics/task/useTaskAnalytics.ts | 6 +- src/components/TasksTable/Columns.tsx | 155 ++ .../TasksTable/TasksTable.stories.tsx | 30 +- .../TasksTable.stories.storyshot | 272 ++-- src/components/TasksTable/index.tsx | 14 +- src/components/TasksTable/types.ts | 16 + src/gql/generated/types.ts | 1 - .../task/taskTabs/ExecutionTasksTable.tsx | 146 +- .../ExecutionTasksTable.stories.storyshot | 1396 ++++++++--------- 11 files changed, 1136 insertions(+), 914 deletions(-) create mode 100644 src/components/TasksTable/Columns.tsx create mode 100644 src/components/TasksTable/types.ts diff --git a/cypress/integration/task/execution_task_table.ts b/cypress/integration/task/execution_task_table.ts index 3ce45fd34b..ee4f253668 100644 --- a/cypress/integration/task/execution_task_table.ts +++ b/cypress/integration/task/execution_task_table.ts @@ -7,14 +7,16 @@ describe("Execution task table", () => { }); it("Should have a default sort order applied", () => { - cy.location("search").should("contain", "sorts=STATUS%3AASC"); + cy.location("search").should("contain", "sortBy=STATUS"); + cy.location("search").should("contain", "sortDir=ASC"); }); it("Updates the url when column headers are clicked", () => { - cy.dataCy("tasks-table").find("th").contains("Name").click(); - cy.location("search").should("contain", "NAME%3AASC"); + const nameSortControl = "button[aria-label='Sort by Name']"; + cy.get(nameSortControl).click(); + cy.location("search").should("contain", "STATUS%3AASC%3BNAME%3AASC"); - cy.dataCy("tasks-table").find("th").contains("Name").click(); - cy.location("search").should("contain", "NAME%3ADESC"); + cy.get(nameSortControl).click(); + cy.location("search").should("contain", "STATUS%3AASC%3BNAME%3ADESC"); }); }); diff --git a/cypress/integration/task/task_actions.ts b/cypress/integration/task/task_actions.ts index 9f89a6f3d2..c9cc3fbf37 100644 --- a/cypress/integration/task/task_actions.ts +++ b/cypress/integration/task/task_actions.ts @@ -73,6 +73,6 @@ const tasks = { 1: "/task/evergreen_ubuntu1604_test_model_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48", 2: "/task/evergreen_lint_lint_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48", 3: "/task/evergreen_ubuntu1604_dist_patch_33016573166a36bd5f46b4111151899d5c4e95b1_5ecedafb562343215a7ff297_20_05_27_21_39_46", - 4: "/task/mci_ubuntu1604_display_asdf_patch_a1d2c8f70bf5c543de8b9641ac1ec08def1ddb26_5f74d99ab2373627c047c5e5_20_09_30_19_16_47/execution-tasks?execution=0&sorts=STATUS%3AASC", + 4: "/task/mci_ubuntu1604_display_asdf_patch_a1d2c8f70bf5c543de8b9641ac1ec08def1ddb26_5f74d99ab2373627c047c5e5_20_09_30_19_16_47/execution-tasks?execution=0", 5: "/task/evergreen_test_model_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48", }; diff --git a/src/analytics/task/useTaskAnalytics.ts b/src/analytics/task/useTaskAnalytics.ts index a68225c558..4d609ac940 100644 --- a/src/analytics/task/useTaskAnalytics.ts +++ b/src/analytics/task/useTaskAnalytics.ts @@ -22,11 +22,7 @@ type Action = } | { name: "Sort Execution Tasks Table"; - sortBy: - | TaskSortCategory.Name - | TaskSortCategory.Status - | TaskSortCategory.BaseStatus - | TaskSortCategory.Variant; + sortBy: TaskSortCategory | TaskSortCategory[]; } | { name: "Restart" } | { name: "Schedule" } diff --git a/src/components/TasksTable/Columns.tsx b/src/components/TasksTable/Columns.tsx new file mode 100644 index 0000000000..326b95e3f6 --- /dev/null +++ b/src/components/TasksTable/Columns.tsx @@ -0,0 +1,155 @@ +import { LGColumnDef } from "@leafygreen-ui/table"; +import Tooltip from "@leafygreen-ui/tooltip"; +import pluralize from "pluralize"; +import { ConditionalWrapper } from "components/ConditionalWrapper"; +import { StyledRouterLink } from "components/styles"; +import TaskStatusBadge from "components/TaskStatusBadge"; +import { TreeDataEntry } from "components/TreeSelect"; +import { getVariantHistoryRoute } from "constants/routes"; +import { mergeTaskVariant } from "constants/task"; +import { zIndex } from "constants/tokens"; +import { TaskSortCategory } from "gql/generated/types"; +import { TaskStatus } from "types/task"; +import { TaskLink } from "./TaskLink"; +import { TaskTableInfo } from "./types"; + +export const getColumnsTemplate = ({ + baseStatusOptions = [], + isPatch = false, + onClickTaskLink = () => {}, + showTaskExecutionLabel = false, + statusOptions = [], +}: { + baseStatusOptions?: TreeDataEntry[]; + isPatch?: boolean; + onClickTaskLink?: (taskId: string) => void; + showTaskExecutionLabel?: boolean; + statusOptions?: TreeDataEntry[]; +}): LGColumnDef[] => [ + { + header: "Name", + accessorKey: "displayName", + id: TaskSortCategory.Name, + cell: ({ + getValue, + row: { + original: { execution, id }, + }, + }): JSX.Element => ( + + ), + meta: { + search: { + "data-cy": "task-name-filter-popover", + placeholder: "Task name regex", + }, + }, + enableSorting: true, + size: 300, + }, + { + accessorKey: "status", + id: TaskSortCategory.Status, + header: "Task Status", + cell: ({ + getValue, + row: { + original: { dependsOn, execution, id }, + }, + }) => { + const status = getValue() as string; + + return dependsOn?.length && getValue() === TaskStatus.Blocked ? ( + + + + } + > + Depends on {pluralize("task", dependsOn.length)}:{" "} + {dependsOn.map(({ name }) => `“${name}”`).join(", ")} + + ) : ( + getValue() && ( + + ) + ); + }, + meta: { + treeSelect: { + "data-cy": "status-filter-popover", + options: statusOptions, + }, + }, + enableSorting: true, + size: 80, + }, + { + id: TaskSortCategory.BaseStatus, + accessorKey: "baseTask.status", + header: `${isPatch ? "Base" : "Previous"} Status`, + cell: ({ + getValue, + row: { + original: { baseTask }, + }, + }) => + getValue() && ( + + ), + meta: { + treeSelect: { + "data-cy": "base-status-filter-popover", + options: baseStatusOptions, + }, + }, + enableSorting: true, + size: 80, + }, + { + accessorKey: "buildVariantDisplayName", + id: TaskSortCategory.Variant, + header: "Variant", + cell: ({ + getValue, + row: { + original: { buildVariant, projectIdentifier }, + }, + }) => ( + ( + + {children} + + )} + > + {getValue() as string} + + ), + meta: { + search: { + "data-cy": "variant-filter-popover", + placeholder: "Variant name regex", + }, + }, + enableSorting: true, + size: 250, + }, +]; diff --git a/src/components/TasksTable/TasksTable.stories.tsx b/src/components/TasksTable/TasksTable.stories.tsx index b430ecc62d..adfba27de1 100644 --- a/src/components/TasksTable/TasksTable.stories.tsx +++ b/src/components/TasksTable/TasksTable.stories.tsx @@ -1,5 +1,4 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types"; - import TasksTable from "."; export default { @@ -21,6 +20,8 @@ export const VersionTasksTable: CustomStoryObj = { const tasks = [ { id: "some_id", + projectIdentifier: "evg", + execution: 0, aborted: false, displayName: "Some Fancy ID", version: "123", @@ -29,11 +30,17 @@ const tasks = [ buildVariantDisplayName: "Ubuntu 16.04", blocked: false, baseTask: { + id: "some_base_task", + execution: 0, status: "unscheduled", }, + executionTasksFull: [], + dependsOn: [], }, { id: "some_id_2", + projectIdentifier: "evg", + execution: 0, aborted: false, displayName: "Some other Fancy ID", version: "123", @@ -42,11 +49,17 @@ const tasks = [ buildVariantDisplayName: "Ubuntu 16.04", blocked: false, baseTask: { + id: "some_base_task_2", + execution: 0, status: "failed", }, + executionTasksFull: [], + dependsOn: [], }, { id: "some_id_3", + projectIdentifier: "evg", + execution: 0, aborted: false, displayName: "Some different Fancy ID", version: "234", @@ -55,8 +68,12 @@ const tasks = [ buildVariantDisplayName: "Windows 97", blocked: false, baseTask: { + id: "some_base_task_3", + execution: 0, status: "failed", }, + executionTasksFull: [], + dependsOn: [], }, ]; @@ -64,6 +81,8 @@ const nestedTasks = [ ...tasks, { id: "some_id_4", + projectIdentifier: "evg", + execution: 0, aborted: false, displayName: "Some Fancy Display Task", version: "234", @@ -72,6 +91,8 @@ const nestedTasks = [ buildVariantDisplayName: "Windows 97", blocked: false, baseTask: { + id: "some_base_task_4", + execution: 0, status: "failed", }, executionTasksFull: [ @@ -85,11 +106,15 @@ const nestedTasks = [ buildVariantDisplayName: "Windows 97", blocked: false, baseTask: { + id: "some_base_task_5", + execution: 0, status: "aborted", }, }, { id: "some_id_6", + projectIdentifier: "evg", + execution: 0, aborted: false, displayName: "Another execution task", version: "234", @@ -98,9 +123,12 @@ const nestedTasks = [ buildVariantDisplayName: "Windows 97", blocked: false, baseTask: { + id: "some_base_task_6", + execution: 0, status: "system-failed", }, }, ], + dependsOn: [], }, ]; diff --git a/src/components/TasksTable/__snapshots__/TasksTable.stories.storyshot b/src/components/TasksTable/__snapshots__/TasksTable.stories.storyshot index 69a81de440..b5a8e838d0 100644 --- a/src/components/TasksTable/__snapshots__/TasksTable.stories.storyshot +++ b/src/components/TasksTable/__snapshots__/TasksTable.stories.storyshot @@ -280,11 +280,20 @@ exports[`Snapshot Tests TasksTable.stories BaseTaskTable 1`] = ` data-row-key="some_id" > + + + + + + + + + +
+ + + + Some fancy execution task + +

+ Execution + 15 +

+ + +
+ + +
+ +
+ Succeeded +
+ +
+ + +
+ + +
+ + + Windows 97 + + +
+ + + + +
+ + + + Another execution task + +

+ Execution + 13 +

+ + +
+ + +
+ +
+ Succeeded +
+ +
+ + +
+ + +
+ + + Windows 97 + +
-
-
- - + + + + `; @@ -410,394 +348,332 @@ exports[`Snapshot Tests ExecutionTasksTable.stories MultipleExecutions 1`] = ` exports[`Snapshot Tests ExecutionTasksTable.stories SingleExecution 1`] = `
-
-
-
-
+
- - - - - - - - - - - - - + + + + + + + + - - - - - + + + + + - - - -
-
- - Name - - - - - - - - - - - -
- 		-
- - Task Status - - - - - - - - - - - -
- 		-
- - Base Status - - - - - - - - - - - -
- 		-
- - Variant - - - - - - - - - - - -
-
+
+ Task Status + +
+ 		+
+ Base Status +
+
+ Variant +
- -
- Succeeded -
- - 		- - - - Windows 97 - - -
+ +
+ +
+ + + + + + +
+ + + + Some fancy execution task + + + +
+ + +
+ +
+ Succeeded +
+ +
+ + +
+ + +
+ + + Windows 97 + + +
+ + + + +
+ + + + Another execution task + + + +
+ + +
+ +
+ Succeeded +
+ +
+ + +
+ + +
+ + + Windows 97 + +
-
-
-
-
+ + + +
`;