chore: display accurate execution and group states

Author: kevinkim-ogp

packages/frontend/src/components/ExecutionGroup/GroupStatusFilter.tsx

@@ -0,0 +1,90 @@
+import { useMemo } from 'react'
+import { Flex, Tag } from '@chakra-ui/react'
+import startCase from 'lodash/startCase'
+
+import { SingleSelect } from '../SingleSelect/SingleSelect'
+
+export enum GroupStatusType {
+  All = 'all',
+  Success = 'success',
+  Failure = 'failure',
+  Waiting = 'waiting',
+}
+
+interface GroupStatusFilterProps {
+  statusFilter: GroupStatusType
+  groupStats: { success: number; failure: number; waiting: number }
+  setStatusFilter: (status: GroupStatusType) => void
+}
+
+const getLabel = (status: GroupStatusType, count: number) => {
+  let colorScheme = 'gray'
+  if (status === GroupStatusType.Success) {
+    colorScheme = 'success'
+  } else if (status === GroupStatusType.Failure) {
+    colorScheme = 'critical'
+  } else if (status === GroupStatusType.Waiting) {
+    colorScheme = 'gray'
+  }
+  return (
+    <Flex alignItems="center" gap={4}>
+      {startCase(status)} {getTag(colorScheme, count)}
+    </Flex>
+  )
+}
+
+const getTag = (colorScheme: string, text: string | number) => {
+  return (
+    <Tag colorScheme={colorScheme} size="xs" borderRadius="lg">
+      {text}
+    </Tag>
+  )
+}
+
+export default function GroupStatusFilter({
+  statusFilter,
+  groupStats,
+  setStatusFilter,
+}: GroupStatusFilterProps) {
+  const items = useMemo(() => {
+    const { failure, success, waiting } = groupStats
+    const allCount = success + failure + waiting
+
+    return [
+      {
+        label: getLabel(GroupStatusType.All, allCount),
+        value: GroupStatusType.All,
+      },
+      {
+        label: getLabel(GroupStatusType.Success, success),
+        value: GroupStatusType.Success,
+        disabled: success === 0,
+      },
+      {
+        label: getLabel(GroupStatusType.Failure, failure),
+        value: GroupStatusType.Failure,
+        disabled: failure === 0,
+      },
+      {
+        label: getLabel(GroupStatusType.Waiting, waiting),
+        value: GroupStatusType.Waiting,
+        disabled: waiting === 0,
+      },
+    ]
+  }, [groupStats])
+
+  return (
+    <>
+      <SingleSelect
+        items={items}
+        isSearchable={false}
+        onChange={(value) => setStatusFilter(value as GroupStatusType)}
+        value={statusFilter}
+        name="groupStatus"
+        placeholder="Status"
+        isClearable={false}
+        colorScheme="secondary"
+      />
+    </>
+  )
+}

packages/frontend/src/components/ExecutionGroup/IterationSelector.tsx

@@ -1,35 +1,54 @@
+// import { IExecution } from '@plumber/types'
+
 import { useMemo } from 'react'
-import { FaCheck, FaTimes } from 'react-icons/fa'
-import { Flex, Icon, Tag } from '@chakra-ui/react'
+import { Flex, Tag } from '@chakra-ui/react'
 
 import { SingleSelect } from '@/components/SingleSelect'
 import { type GroupedSteps } from '@/helpers/processExecutionSteps'
 
+// import { RetryAllButton } from '../ExecutionStep/components/RetryAllButton'
+import { GroupStatusType } from './GroupStatusFilter'
+
 interface IterationSelectorProps {
+  // canRetryAll: boolean
+  // execution: IExecution
   groupedSteps: GroupedSteps
   selectedIteration: string
   setSelectedIteration: (iteration: string) => void
 }
 
 export default function IterationSelector({
+  // canRetryAll,
+  // execution,
   groupedSteps,
   selectedIteration,
   setSelectedIteration,
 }: IterationSelectorProps) {
-  const selectedIterationStep = groupedSteps[Number(selectedIteration)]
-  const isSelectedIterationSuccessful =
-    selectedIterationStep?.status === 'success'
-
   const items = useMemo(() => {
     return groupedSteps.map(({ iteration, status }) => ({
-      label: `Iteration ${iteration}`,
+      label: (
+        <Flex alignItems="center" gap={4}>
+          Item {iteration}
+          <Tag
+            colorScheme={
+              status === GroupStatusType.Waiting
+                ? 'gray'
+                : status === GroupStatusType.Success
+                ? 'success'
+                : 'critical'
+            }
+            size="xs"
+            borderRadius="md"
+          >
+            {status === GroupStatusType.Waiting
+              ? 'Waiting'
+              : status === GroupStatusType.Success
+              ? 'Success'
+              : 'Failure'}
+          </Tag>
+        </Flex>
+      ),
       value: iteration.toString(),
-      badge:
-        status === 'success' ? (
-          <Icon as={FaCheck} color="green" ml={4} />
-        ) : (
-          <Icon as={FaTimes} color="red" ml={4} />
-        ),
     }))
   }, [groupedSteps])
 
@@ -45,12 +64,8 @@ export default function IterationSelector({
         isClearable={false}
         colorScheme="secondary"
       />
-      <Tag
-        colorScheme={isSelectedIterationSuccessful ? 'success' : 'critical'}
-        size="lg"
-      >
-        {isSelectedIterationSuccessful ? 'Success' : 'Failure'}
-      </Tag>
+      {/* TODO: add retry buttons */}
+      {/* {canRetryAll && <RetryAllButton execution={execution} type="iteration" />} */}
     </Flex>
   )
 }

packages/frontend/src/components/ExecutionGroup/index.tsx

@@ -2,7 +2,6 @@ import type { IExecution, IExecutionStep } from '@plumber/types'
 
 import { useMemo, useState } from 'react'
 import { Card, CardBody, Flex, Grid, HStack, Text } from '@chakra-ui/react'
-import { Tag } from '@opengovsg/design-system-react'
 import get from 'lodash/get'
 
 import { ExecutionStep } from '@/exports/components'
@@ -11,13 +10,14 @@ import { type GroupedSteps } from '@/helpers/processExecutionSteps'
 import AppIconWithStatus from '../ExecutionStep/components/AppIconWithStatus'
 import { useExecutionStepStatus } from '../ExecutionStep/hooks/useExecutionStepStatus'
 
+import GroupStatusFilter, { GroupStatusType } from './GroupStatusFilter'
 import IterationSelector from './IterationSelector'
 
 interface ExecutionGroupProps {
   execution: IExecution
   groupingStep: IExecutionStep
   groupedSteps: GroupedSteps
-  groupStats: { success: number; failure: number }
+  groupStats: { success: number; failure: number; waiting: number }
   numStepsBeforeGroup: number
   page: number
 }
@@ -33,24 +33,40 @@ export default function ExecutionGroup(props: ExecutionGroupProps) {
   } = props
   // NOTE: we use string here as the combobox value needs to be a string
   const [selectedIteration, setSelectedIteration] = useState('1')
-
-  const selectedIterationStep = useMemo(() => {
-    return get(groupedSteps, Number(selectedIteration) - 1)
-  }, [groupedSteps, selectedIteration])
+  const [statusFilter, setStatusFilter] = useState<GroupStatusType>(
+    GroupStatusType.All,
+  )
 
   const hasError = groupedSteps.some((iteration) =>
     iteration.steps.some((step) => step.errorDetails),
   )
   const allIterationsSuccessful = groupedSteps?.every(
-    (iteration) => iteration.status === 'success',
+    (step) => step.status === GroupStatusType.Success,
   )
 
-  // const canRetry = groupStats.failure > 0
+  const iterationsToShow = useMemo(() => {
+    let filteredSteps: GroupedSteps = groupedSteps
+    if (statusFilter !== GroupStatusType.All) {
+      filteredSteps = groupedSteps.filter(
+        (iteration) => iteration.status === statusFilter,
+      )
+    }
+
+    setSelectedIteration(filteredSteps[0]?.iteration.toString() ?? '1')
+    return filteredSteps
+  }, [groupedSteps, statusFilter])
+
+  const selectedIterationStep = useMemo(() => {
+    return get(groupedSteps, Number(selectedIteration) - 1)
+  }, [groupedSteps, selectedIteration])
 
   const { app, appName, statusIcon } = useExecutionStepStatus({
     appKey: groupingStep.appKey,
-    stepKey: groupingStep.key,
-    status: allIterationsSuccessful ? 'success' : 'failure',
+    status: !execution.status
+      ? GroupStatusType.Waiting
+      : allIterationsSuccessful
+      ? GroupStatusType.Success
+      : GroupStatusType.Failure,
     errorDetails: hasError ? {} : null,
     execution,
     jobId: groupingStep.jobId,
@@ -85,27 +101,20 @@ export default function ExecutionGroup(props: ExecutionGroupProps) {
                 {numStepsBeforeGroup + 1}. {appName}
               </Text>
               <Flex gap={2} alignItems="center">
-                {groupStats.success > 0 && (
-                  <Tag colorScheme={'success'} size="lg">
-                    {groupStats.success} success
-                  </Tag>
-                )}
-                {groupStats.failure > 0 && (
-                  <Tag colorScheme={'critical'} size="lg">
-                    {groupStats.failure} failures
-                  </Tag>
-                )}
-                {/* TODO: add retry all iterations for this specific execution */}
-                {/* {canRetry && (
-                  <RetryAllButton execution={execution} type="iteration" />
-                )} */}
+                <Flex gap={2} alignItems="center">
+                  <GroupStatusFilter
+                    groupStats={groupStats}
+                    setStatusFilter={setStatusFilter}
+                    statusFilter={statusFilter}
+                  />
+                </Flex>
               </Flex>
             </Flex>
           </HStack>
         </HStack>
         <Flex p={4} pt={0} direction="column" gap={4}>
           <IterationSelector
-            groupedSteps={groupedSteps}
+            groupedSteps={iterationsToShow}
             selectedIteration={selectedIteration}
             setSelectedIteration={setSelectedIteration}
           />

packages/frontend/src/components/ExecutionStep/components/StatusIcons.tsx

@@ -1,4 +1,5 @@
 import { BiSolidCheckCircle, BiSolidErrorCircle } from 'react-icons/bi'
+import { CgSandClock } from 'react-icons/cg'
 import { Icon } from '@chakra-ui/react'
 
 const successIcon = (
@@ -24,4 +25,8 @@ const partialIcon = (
   />
 )
 
-export { failureIcon, partialIcon, successIcon }
+const waitingIcon = (
+  <Icon boxSize={6} as={CgSandClock} color="interaction.warning.default" />
+)
+
+export { failureIcon, partialIcon, successIcon, waitingIcon }

packages/frontend/src/components/ExecutionStep/hooks/useExecutionStepStatus.ts

@@ -3,17 +3,18 @@ import type { IApp, IExecution } from '@plumber/types'
 import { useMemo } from 'react'
 import { useQuery } from '@apollo/client'
 
+import { GroupStatusType } from '@/components/ExecutionGroup/GroupStatusFilter'
 import { GET_APP } from '@/graphql/queries/get-app'
 
 import {
   failureIcon,
   partialIcon,
   successIcon,
+  waitingIcon,
 } from '../components/StatusIcons'
 
 export interface UseExecutionStepStatusProps {
   appKey: string
-  stepKey: string
   status?: string
   errorDetails?: any
   execution?: IExecution
@@ -33,7 +34,6 @@ export interface UseExecutionStepStatusReturn {
 
 export function useExecutionStepStatus({
   appKey,
-  //   stepKey,  // TODO: get more specific app name
   status,
   errorDetails,
   execution,
@@ -57,8 +57,11 @@ export function useExecutionStepStatus({
     if (isStepSuccessful) {
       return successIcon
     }
+    if (status === GroupStatusType.Waiting) {
+      return waitingIcon
+    }
     return failureIcon
-  }, [isPartialSuccess, isStepSuccessful])
+  }, [isPartialSuccess, isStepSuccessful, status])
 
   return {
     app,

packages/frontend/src/components/SingleSelect/components/DropdownItem/DropdownItem.tsx

@@ -58,10 +58,14 @@ export const DropdownItem = ({
               whiteSpace="nowrap"
               overflowX="hidden"
             >
-              <DropdownItemTextHighlighter
-                inputValue={inputValue ?? ''}
-                textToHighlight={label}
-              />
+              {typeof label === 'string' ? (
+                <DropdownItemTextHighlighter
+                  inputValue={inputValue ?? ''}
+                  textToHighlight={label}
+                />
+              ) : (
+                label
+              )}
             </Text>
             {badge}
           </Flex>

packages/frontend/src/components/SingleSelect/types.ts

@@ -10,7 +10,7 @@ export type ComboboxItem<T = string> =
        */
       value: T
       /** Label to render on input when selected. `value` will be used if this is not provided */
-      label?: string
+      label?: string | JSX.Element
       /** Description to render below label if provided */
       description?: string
       /** Whether item is disabled */

packages/frontend/src/components/SingleSelect/utils/itemUtils.ts

@@ -24,7 +24,7 @@ export const isItemAddNew = <Item extends ComboboxItem>(
 
 export const itemToLabelString = <Item extends ComboboxItem>(
   item?: Item,
-): string => {
+): string | JSX.Element => {
   if (!item) {
     return ''
   }

packages/frontend/src/graphql/queries/get-execution-steps.ts

@@ -26,6 +26,8 @@ export const GET_EXECUTION_STEPS = gql`
           key
           metadata {
             iteration
+            isLastIteration
+            isLastStep
           }
         }
       }