Skip to content
This repository has been archived by the owner on Jul 2, 2024. It is now read-only.

DEVPROD-1976: Migrate execution tasks table to LeafyGreen table #2302

Merged
merged 9 commits into from
Mar 20, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions cypress/integration/task/execution_task_table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@ 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", "sortBy=NAME");
cy.location("search").should("contain", "sortDir=ASC");

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", "sortBy=NAME");
cy.location("search").should("contain", "sortDir=DESC");
});
});
2 changes: 1 addition & 1 deletion cypress/integration/task/task_actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
};
6 changes: 1 addition & 5 deletions src/analytics/task/useTaskAnalytics.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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" }
Expand Down
155 changes: 155 additions & 0 deletions src/components/TasksTable/Columns.tsx
Original file line number Diff line number Diff line change
@@ -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<TaskTableInfo>[] => [
{
header: "Name",
accessorKey: "displayName",
id: TaskSortCategory.Name,
cell: ({
getValue,
row: {
original: { execution, id },
},
}): JSX.Element => (
<TaskLink
execution={execution}
onClick={onClickTaskLink}
showTaskExecutionLabel={showTaskExecutionLabel}
taskId={id}
taskName={getValue() as string}
/>
),
meta: {
search: {
"data-cy": "task-name-filter-popover",
placeholder: "Task name regex",
},
},
Comment on lines +47 to +52
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be removed since task name isn't a searchable column for the execution tasks table? Or will it be used later?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this column definition will be reused for the upcoming tables, and they'll be shown in those tables! (initially i wrote these changes in one big PR which got split up now into 3 PRs, so that's why they are here 😅)

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 ? (
<Tooltip
data-cy="depends-on-tooltip"
justify="middle"
popoverZIndex={zIndex.tooltip}
trigger={
<span>
<TaskStatusBadge status={status} id={id} execution={execution} />
</span>
}
>
Depends on {pluralize("task", dependsOn.length)}:{" "}
{dependsOn.map(({ name }) => `“${name}”`).join(", ")}
</Tooltip>
) : (
getValue() && (
<TaskStatusBadge status={status} id={id} execution={execution} />
)
);
},
meta: {
treeSelect: {
"data-cy": "status-filter-popover",
options: statusOptions,
},
},
Comment on lines +88 to +93
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly, the current table doesn't allow filtering so this may be superfluous

enableSorting: true,
size: 80,
},
{
id: TaskSortCategory.BaseStatus,
accessorKey: "baseTask.status",
header: `${isPatch ? "Base" : "Previous"} Status`,
cell: ({
getValue,
row: {
original: { baseTask },
},
}) =>
getValue() && (
<TaskStatusBadge
status={getValue() as string}
id={baseTask?.id}
execution={baseTask?.execution}
/>
),
meta: {
treeSelect: {
"data-cy": "base-status-filter-popover",
options: baseStatusOptions,
},
},
Comment on lines +114 to +119
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

enableSorting: true,
size: 80,
},
{
accessorKey: "buildVariantDisplayName",
id: TaskSortCategory.Variant,
header: "Variant",
cell: ({
getValue,
row: {
original: { buildVariant, projectIdentifier },
},
}) => (
<ConditionalWrapper
condition={buildVariant !== mergeTaskVariant}
wrapper={(children) => (
<StyledRouterLink
to={getVariantHistoryRoute(projectIdentifier, buildVariant)}
>
{children}
</StyledRouterLink>
)}
>
{getValue() as string}
</ConditionalWrapper>
),
meta: {
search: {
"data-cy": "variant-filter-popover",
placeholder: "Variant name regex",
},
},
Comment on lines +146 to +151
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

enableSorting: true,
size: 250,
},
];
30 changes: 29 additions & 1 deletion src/components/TasksTable/TasksTable.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { CustomStoryObj, CustomMeta } from "test_utils/types";

import TasksTable from ".";

export default {
Expand All @@ -21,6 +20,8 @@ export const VersionTasksTable: CustomStoryObj<typeof TasksTable> = {
const tasks = [
{
id: "some_id",
projectIdentifier: "evg",
execution: 0,
aborted: false,
displayName: "Some Fancy ID",
version: "123",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -55,15 +68,21 @@ const tasks = [
buildVariantDisplayName: "Windows 97",
blocked: false,
baseTask: {
id: "some_base_task_3",
execution: 0,
status: "failed",
},
executionTasksFull: [],
dependsOn: [],
},
];

const nestedTasks = [
...tasks,
{
id: "some_id_4",
projectIdentifier: "evg",
execution: 0,
aborted: false,
displayName: "Some Fancy Display Task",
version: "234",
Expand All @@ -72,6 +91,8 @@ const nestedTasks = [
buildVariantDisplayName: "Windows 97",
blocked: false,
baseTask: {
id: "some_base_task_4",
execution: 0,
status: "failed",
},
executionTasksFull: [
Expand All @@ -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",
Expand All @@ -98,9 +123,12 @@ const nestedTasks = [
buildVariantDisplayName: "Windows 97",
blocked: false,
baseTask: {
id: "some_base_task_6",
execution: 0,
status: "system-failed",
},
},
],
dependsOn: [],
},
];
Loading
Loading