DEVPROD-11368: Render task status on waterfall (#429)

evergreen-ci · Oct 8, 2024 · 3fecc62 · 3fecc62
1 parent 786db7c
commit 3fecc62
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 15 deletions.
diff --git a/apps/spruce/src/gql/generated/types.ts b/apps/spruce/src/gql/generated/types.ts
@@ -9539,6 +9539,7 @@ export type WaterfallQuery = {
       id: string;
       builds: Array<{
         __typename?: "WaterfallBuild";
+        activated?: boolean | null;
         displayName: string;
         id: string;
         version: string;

diff --git a/apps/spruce/src/gql/queries/waterfall.graphql b/apps/spruce/src/gql/queries/waterfall.graphql
@@ -4,6 +4,7 @@ query Waterfall($options: WaterfallOptions!) {
   waterfall(options: $options) {
     buildVariants {
       builds {
+        activated
         displayName
         id
         tasks {

diff --git a/apps/spruce/src/pages/waterfall/BuildRow.tsx b/apps/spruce/src/pages/waterfall/BuildRow.tsx
@@ -2,6 +2,7 @@ import { memo, useCallback } from "react";
 import styled from "@emotion/styled";
 import { palette } from "@leafygreen-ui/palette";
 import { Link } from "react-router-dom";
+import { taskStatusToCopy } from "@evg-ui/lib/constants/task";
 import { TaskStatus } from "@evg-ui/lib/types/task";
 import { useWaterfallAnalytics } from "analytics";
 import { StyledLink } from "components/styles";
@@ -12,6 +13,7 @@ import {
   WaterfallBuildVariant,
   WaterfallQuery,
 } from "gql/generated/types";
+import { statusColorMap, statusIconMap } from "./icons";
 import {
   BuildVariantTitle,
   columnBasis,
@@ -20,7 +22,7 @@ import {
   Row,
 } from "./styles";
 
-const { black, gray, green, white } = palette;
+const { black, gray, white } = palette;
 
 export const BuildRow: React.FC<{
   build: WaterfallBuildVariant;
@@ -94,14 +96,18 @@ const BuildGrid: React.FC<{
       );
     }}
   >
-    {build.tasks.map(({ displayName, id, status }) => (
-      <SquareMemo
-        key={id}
-        data-tooltip={displayName}
-        status={status}
-        to={getTaskRoute(id)} // TODO DEVPROD-11734: use execution in task route
-      />
-    ))}
+    {build.tasks.map(({ displayName, id, status }) => {
+      // If the entire build is inactive, use inactive status for all tasks
+      const taskStatus = build.activated ? status : TaskStatus.Inactive;
+      return (
+        <SquareMemo
+          key={id}
+          data-tooltip={`${displayName} - ${taskStatusToCopy[taskStatus]}`}
+          status={taskStatus}
+          to={getTaskRoute(id)} // TODO DEVPROD-11734: use execution in task route
+        />
+      );
+    })}
   </Build>
 );
 
@@ -128,12 +134,12 @@ const Square = styled(Link)<{ status: string }>`
   cursor: pointer;
   position: relative;
 
-  /* TODO DEVPROD-11368: Render colors for all statuses. Could use background-image property to render icons. */
-  ${({ status }) =>
-    status === TaskStatus.Succeeded
-      ? `background-color: ${green.dark1};`
-      : `background-color: ${gray.light2};
-  `}
+  ${({ status }) => {
+    const icon = statusIconMap?.[status];
+    const iconStyle = icon ? `background-image: ${icon};` : "";
+    return `${iconStyle}
+background-color: ${statusColorMap[status]};`;
+  }}
 
   /* Tooltip */
   :before {

diff --git a/apps/spruce/src/pages/waterfall/WaterfallGrid.tsx b/apps/spruce/src/pages/waterfall/WaterfallGrid.tsx
@@ -1,6 +1,7 @@
 import { useRef } from "react";
 import { useSuspenseQuery } from "@apollo/client";
 import styled from "@emotion/styled";
+import { DEFAULT_POLL_INTERVAL } from "constants/index";
 import { WaterfallQuery, WaterfallQueryVariables } from "gql/generated/types";
 import { WATERFALL } from "gql/queries";
 import { useDimensions } from "hooks/useDimensions";
@@ -31,6 +32,8 @@ export const WaterfallGrid: React.FC<WaterfallGridProps> = ({
           limit: VERSION_LIMIT,
         },
       },
+      // @ts-expect-error pollInterval isn't officially supported by useSuspenseQuery, but it works so let's use it anyway.
+      pollInterval: DEFAULT_POLL_INTERVAL,
     },
   );
   const refEl = useRef<HTMLDivElement>(null);

diff --git a/apps/spruce/src/pages/waterfall/icons/RedOutlineX.ts b/apps/spruce/src/pages/waterfall/icons/RedOutlineX.ts
@@ -0,0 +1 @@
+export default `url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5354 3.75727L11.5354 3.75728L12.2425 4.46439L12.2426 4.46442C12.4379 4.65969 12.4378 4.97621 12.2426 5.17146L12.2425 5.1715L9.76772 7.64638L9.41418 7.99993L9.76772 8.35348L12.2425 10.8284L12.2426 10.8284C12.4378 11.0237 12.4378 11.3402 12.2426 11.5354L12.2425 11.5355L11.5354 12.2426C11.3402 12.4378 11.0236 12.4378 10.8283 12.2426L8.35348 9.76769L7.99993 9.41413L7.64637 9.76769L5.17152 12.2426C4.97625 12.4378 4.65966 12.4378 4.46439 12.2426C4.46439 12.2426 4.46438 12.2426 4.46438 12.2426L3.75729 11.5355L3.75728 11.5355C3.56203 11.3402 3.56203 11.0236 3.75728 10.8284L3.75729 10.8284L6.23216 8.35348L6.58571 7.99993L6.23216 7.64638L3.75729 5.1715L3.75729 5.17149C3.56203 4.97624 3.56202 4.65966 3.75729 4.46439L3.75729 4.46439L4.46439 3.75729C4.46439 3.75729 4.46439 3.75728 4.46439 3.75728C4.65966 3.56202 4.97624 3.56203 5.17151 3.75729L7.64637 6.23216L7.99993 6.58572L8.35348 6.23216L10.8283 3.75728L10.8283 3.75727C11.0236 3.56203 11.3402 3.56203 11.5354 3.75727Z" fill="none" stroke="%23DB3030"/></svg>')`;
diff --git a/apps/spruce/src/pages/waterfall/icons/WhiteClockWithArrow.ts b/apps/spruce/src/pages/waterfall/icons/WhiteClockWithArrow.ts
@@ -0,0 +1 @@
+export default `url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 8C13 10.7614 10.7614 13 8 13C7.16895 13 6.38526 12.7973 5.69568 12.4385C5.34783 12.2576 4.90944 12.3087 4.65841 12.6099L4.32712 13.0075C4.05174 13.3379 4.1087 13.8355 4.48034 14.0521C5.51438 14.6548 6.71687 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C6.05606 1 4.2972 1.7924 3.02879 3.07181L1.96954 2.14618C1.56206 1.7901 0.931193 2.13127 1.00611 2.66721L1.4606 5.9185C1.50083 6.20624 1.7463 6.4287 2.03684 6.43H5.31972C5.86086 6.43241 6.1144 5.76821 5.70691 5.41212L4.53896 4.3915C5.4373 3.52965 6.65679 3 8 3C10.7614 3 13 5.23858 13 8Z" fill="%23ffffff"/><path d="M7.25 5.25C7.25 4.83579 7.58579 4.5 8 4.5C8.41421 4.5 8.75 4.83579 8.75 5.25V7.91793L10.4294 9.44169C10.7412 9.71445 10.7728 10.1883 10.5 10.5C10.2272 10.8117 9.75342 10.8433 9.44169 10.5706L7.50697 8.81519C7.49904 8.80826 7.49125 8.80117 7.48361 8.79391C7.41388 8.72781 7.35954 8.65118 7.32088 8.56868C7.27541 8.47196 7.25 8.36395 7.25 8.25V5.25Z" fill="%23ffffff"/></svg>')`;
diff --git a/apps/spruce/src/pages/waterfall/icons/WhiteGear.ts b/apps/spruce/src/pages/waterfall/icons/WhiteGear.ts
@@ -0,0 +1 @@
+export default `url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.93081 1.93388C9.65253 1.81882 9.33165 1.90792 9.15253 2.14999L8.82493 2.59272C8.26818 2.50733 7.70987 2.51034 7.16817 2.59419L6.83969 2.15146C6.66027 1.90962 6.33927 1.82093 6.06114 1.93635L5.07578 2.34523C4.79765 2.46065 4.63375 2.75055 4.67827 3.04838L4.75976 3.59359C4.31784 3.91791 3.92142 4.31108 3.58869 4.76557L3.04389 4.68486C2.74601 4.64073 2.45632 4.80499 2.34126 5.08328L1.93363 6.06915C1.81857 6.34743 1.90767 6.66832 2.14974 6.84743L2.59247 7.17503C2.50709 7.73179 2.5101 8.29011 2.59395 8.8318L2.15123 9.16027C1.90939 9.3397 1.8207 9.66069 1.93611 9.93883L2.345 10.9242C2.46042 11.2023 2.75032 11.3662 3.04814 11.3217L3.59335 11.2402C3.91767 11.6821 4.31083 12.0785 4.76533 12.4113L4.68462 12.9561C4.64048 13.254 4.80475 13.5436 5.08303 13.6587L6.06891 14.0663C6.34719 14.1814 6.66807 14.0923 6.84719 13.8502L7.17479 13.4075C7.73155 13.4929 8.28986 13.4899 8.83156 13.406L9.16003 13.8487C9.33946 14.0906 9.66045 14.1793 9.93859 14.0638L10.9239 13.655C11.2021 13.5395 11.366 13.2496 11.3215 12.9518L11.24 12.4066C11.6819 12.0823 12.0783 11.6891 12.411 11.2346L12.9558 11.3154C13.2537 11.3595 13.5434 11.1952 13.6585 10.9169L14.0661 9.93106C14.1811 9.65277 14.092 9.33189 13.85 9.15278L13.4072 8.82518C13.4926 8.26842 13.4896 7.7101 13.4058 7.1684L13.8485 6.83994C14.0903 6.66051 14.179 6.33951 14.0636 6.06138L13.6547 5.07603C13.5393 4.79789 13.2494 4.634 12.9516 4.67851L12.4064 4.76C12.0821 4.31808 11.6889 3.92167 11.2344 3.58894L11.3151 3.04413C11.3592 2.74625 11.195 2.45656 10.9167 2.3415L9.93081 1.93388ZM10.2235 8.91951C9.71576 10.1476 8.30856 10.7316 7.08045 10.2238C5.85235 9.71601 5.26841 8.3088 5.77619 7.0807C6.28396 5.8526 7.69117 5.26866 8.91927 5.77643C10.1474 6.2842 10.7313 7.69141 10.2235 8.91951Z" fill="%23ffffff"/></svg>')`;
diff --git a/apps/spruce/src/pages/waterfall/icons/WhiteWrench.ts b/apps/spruce/src/pages/waterfall/icons/WhiteWrench.ts
@@ -0,0 +1 @@
+export default `url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.625 9.75C13.0422 9.75 15 7.79219 15 5.375C15 4.95664 14.9398 4.55195 14.8305 4.16641C14.7457 3.87109 14.382 3.80547 14.166 4.02148L12.066 6.12148C12.0144 6.17315 11.9508 6.21071 11.8821 6.23144C11.8043 6.25491 11.7248 6.21773 11.6673 6.1603L9.8397 4.33267C9.78227 4.27523 9.74509 4.19569 9.76856 4.11794C9.78929 4.04924 9.82685 3.98565 9.87852 3.93398L11.9785 1.83398C12.1945 1.61797 12.1262 1.2543 11.8336 1.16953C11.448 1.06016 11.0434 1 10.625 1C8.20781 1 6.25 2.95781 6.25 5.375C6.25 5.82904 6.32027 6.26861 6.44822 6.68115C6.48333 6.79434 6.4563 6.9187 6.3725 7.0025L1.54414 11.8309C1.19687 12.1781 1 12.6512 1 13.1434C1 14.1688 1.83125 15 2.85664 15C3.34883 15 3.82188 14.8031 4.16914 14.4559L8.99671 9.62829C9.08092 9.54408 9.20602 9.51727 9.31967 9.55285C9.73197 9.68189 10.1713 9.75 10.625 9.75ZM2.75 14.125C3.23325 14.125 3.625 13.7332 3.625 13.25C3.625 12.7668 3.23325 12.375 2.75 12.375C2.26675 12.375 1.875 12.7668 1.875 13.25C1.875 13.7332 2.26675 14.125 2.75 14.125Z" fill="%23ffffff"/></svg>')`;
diff --git a/apps/spruce/src/pages/waterfall/icons/WhiteX.ts b/apps/spruce/src/pages/waterfall/icons/WhiteX.ts
@@ -0,0 +1 @@
+export default `url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.8891 3.40379C11.4986 3.01327 10.8654 3.01327 10.4749 3.40379L8.00005 5.87867L5.52518 3.40379C5.13465 3.01327 4.50149 3.01327 4.11096 3.40379L3.40386 4.1109C3.01333 4.50143 3.01333 5.13459 3.40386 5.52511L5.87873 7.99999L3.40386 10.4749C3.01333 10.8654 3.01333 11.4986 3.40386 11.8891L4.11096 12.5962C4.50149 12.9867 5.13465 12.9867 5.52518 12.5962L8.00005 10.1213L10.4749 12.5962C10.8654 12.9867 11.4986 12.9867 11.8891 12.5962L12.5962 11.8891C12.9868 11.4986 12.9868 10.8654 12.5962 10.4749L10.1214 7.99999L12.5962 5.52511C12.9868 5.13459 12.9868 4.50143 12.5962 4.1109L11.8891 3.40379Z" fill="%23ffffff"/></svg>')`;
diff --git a/apps/spruce/src/pages/waterfall/icons/index.ts b/apps/spruce/src/pages/waterfall/icons/index.ts
@@ -0,0 +1,42 @@
+import { palette } from "@leafygreen-ui/palette";
+import { TaskStatus } from "@evg-ui/lib/types/task";
+import redOutlineX from "./RedOutlineX";
+import whiteClockWithArrow from "./WhiteClockWithArrow";
+import whiteGear from "./WhiteGear";
+import whiteWrench from "./WhiteWrench";
+import whiteX from "./WhiteX";
+
+const { blue, gray, green, purple, red, yellow } = palette;
+
+export const statusColorMap: Record<string, string> = {
+  [TaskStatus.Succeeded]: green.dark1,
+  [TaskStatus.Started]: yellow.base,
+  [TaskStatus.Dispatched]: yellow.base,
+  [TaskStatus.SystemFailed]: purple.dark2,
+  [TaskStatus.SystemTimedOut]: purple.dark2,
+  [TaskStatus.SystemUnresponsive]: purple.dark2,
+  [TaskStatus.Failed]: red.base,
+  [TaskStatus.TaskTimedOut]: red.base,
+  [TaskStatus.TestTimedOut]: red.base,
+  [TaskStatus.KnownIssue]: red.light3,
+  [TaskStatus.SetupFailed]: blue.base,
+  [TaskStatus.Unscheduled]: gray.light1,
+  [TaskStatus.Aborted]: gray.light1,
+  [TaskStatus.Blocked]: gray.light1,
+  [TaskStatus.Inactive]: gray.light1,
+  [TaskStatus.Undispatched]: gray.dark1,
+  [TaskStatus.WillRun]: gray.dark1,
+  [TaskStatus.Pending]: gray.dark1,
+  [TaskStatus.Unstarted]: gray.dark1,
+};
+
+export const statusIconMap: Record<string, string> = {
+  [TaskStatus.Failed]: whiteX,
+  [TaskStatus.TaskTimedOut]: whiteClockWithArrow,
+  [TaskStatus.TestTimedOut]: whiteClockWithArrow,
+  [TaskStatus.SetupFailed]: whiteWrench,
+  [TaskStatus.KnownIssue]: redOutlineX,
+  [TaskStatus.SystemFailed]: whiteGear,
+  [TaskStatus.SystemTimedOut]: whiteGear,
+  [TaskStatus.SystemUnresponsive]: whiteGear,
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default `url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5354 3.75727L11.5354 3.75728L12.2425 4.46439L12.2426 4.46442C12.4379 4.65969 12.4378 4.97621 12.2426 5.17146L12.2425 5.1715L9.76772 7.64638L9.41418 7.99993L9.76772 8.35348L12.2425 10.8284L12.2426 10.8284C12.4378 11.0237 12.4378 11.3402 12.2426 11.5354L12.2425 11.5355L11.5354 12.2426C11.3402 12.4378 11.0236 12.4378 10.8283 12.2426L8.35348 9.76769L7.99993 9.41413L7.64637 9.76769L5.17152 12.2426C4.97625 12.4378 4.65966 12.4378 4.46439 12.2426C4.46439 12.2426 4.46438 12.2426 4.46438 12.2426L3.75729 11.5355L3.75728 11.5355C3.56203 11.3402 3.56203 11.0236 3.75728 10.8284L3.75729 10.8284L6.23216 8.35348L6.58571 7.99993L6.23216 7.64638L3.75729 5.1715L3.75729 5.17149C3.56203 4.97624 3.56202 4.65966 3.75729 4.46439L3.75729 4.46439L4.46439 3.75729C4.46439 3.75729 4.46439 3.75728 4.46439 3.75728C4.65966 3.56202 4.97624 3.56203 5.17151 3.75729L7.64637 6.23216L7.99993 6.58572L8.35348 6.23216L10.8283 3.75728L10.8283 3.75727C11.0236 3.56203 11.3402 3.56203 11.5354 3.75727Z" fill="none" stroke="%23DB3030"/></svg>')`;