OSCI-5826

Signed-off-by: Andrei Stepanov <astepano@redhat.com>

Dockerfile

@@ -1,4 +1,4 @@
-FROM quay.io/fedoraci/ciboard-server:b466781
+FROM quay.io/fedoraci/ciboard-server:7e01b56
 
 # npm mirror to use to install dependencies.
 ARG NPMLOCATION=open

src/components/ArtifactsList.tsx

@@ -56,7 +56,10 @@ import {
 } from '../types';
 import { ExternalLink } from './ExternalLink';
 import { store } from '../reduxStore';
-import { ArtifactGreenwaveStatesSummary } from './GatingStatus';
+import {
+    ArtifactStatesSummary,
+    ArtifactGreenwaveStatesSummary,
+} from './GatingStatus';
 
 interface ShowLoadingProps {}
 function ShowLoading(props: ShowLoadingProps) {
@@ -98,6 +101,8 @@ const makeArtifactRowRpm = (artifact: ArtifactRpm): ArtifactRow => {
     const cell3: JSX.Element = <>{hit_source.nvr}</>;
     const cell4: JSX.Element = (
         <>
+            {isLoading && <Spinner size="sm" />}
+            <ArtifactStatesSummary isLoading={isLoading} artifact={artifact} />
             <ArtifactGreenwaveStatesSummary
                 isLoading={isLoading}
                 artifact={artifact}

src/components/GatingStatus.tsx

@@ -19,13 +19,7 @@
  */
 import _ from 'lodash';
 import React from 'react';
-import {
-    Flex,
-    Label,
-    Spinner,
-    FlexItem,
-    LabelProps,
-} from '@patternfly/react-core';
+import { Flex, Label, FlexItem, LabelProps } from '@patternfly/react-core';
 
 import { GatingStatusIcon, isGatingArtifact } from '../utils/utils';
 import {
@@ -42,7 +36,7 @@ type ColorPropType = Exclude<LabelProps['color'], undefined>;
 export const resultColors: Record<ColorPropType, string[]> = {
     green: ['passed'],
     red: ['errored', 'failed'],
-    orange: ['missing', 'needs inspection'],
+    orange: ['missing', 'needs inspection', 'needs_inspection'],
 
     cyan: [
         'waived',
@@ -77,6 +71,21 @@ const PrintRequirementsSize = (props: PrintRequirementsSizeProps) => {
     );
 };
 
+interface PrintTestStateSizeProps {
+    state: string;
+    size: number;
+}
+const PrintTestStateSize = (props: PrintTestStateSizeProps) => {
+    const { state, size } = props;
+    const color: ColorPropType =
+        (resultColor(state) as ColorPropType | undefined) || 'grey';
+    return (
+        <Label variant="outline" color={color}>
+            {size} {state}
+        </Label>
+    );
+};
+
 // https://pagure.io/fedora-ci/messages/blob/master/f/schemas/test-complete.yaml#_14
 
 const gwStateMappings: Record<GreenwaveRequirementTypes, any> = {
@@ -142,6 +151,41 @@ gwStatesUiPriority.forEach((key, index) => {
     uiPriorityMap[key] = index;
 });
 
+// artifact: ArtifactRpm | ArtifactContainerImage | ArtifactMbs;
+interface ArtifactStatesSummaryProps {
+    artifact: Artifact;
+    isLoading?: boolean;
+}
+export const ArtifactStatesSummary: React.FC<ArtifactStatesSummaryProps> = (
+    props,
+) => {
+    const { artifact, isLoading } = props;
+    if (isGatingArtifact(artifact)) {
+        // Gating Artifacts are rendered by other component
+        return null;
+    }
+    if (isLoading) {
+        return null;
+    }
+    const stagesSummary = artifact.children?.stagesSummary;
+    // Conside only 'test' stage
+    const testStages = _.filter(stagesSummary, (element) =>
+        _.isEqual(_.get(element, '[0]'), 'test'),
+    );
+    const testStates = _.map(testStages, (element) => {
+        return [_.get(element, '[1]', 'unknown'), _.get(element, '[2]', 0)];
+    });
+    return (
+        <Flex flexWrap={{ default: 'nowrap' }}>
+            {_.map(testStates, ([state, size]: [string, number]) => (
+                <FlexItem key={state} spacer={{ default: 'spacerNone' }}>
+                    <PrintTestStateSize state={state} size={size} />
+                </FlexItem>
+            ))}
+        </Flex>
+    );
+};
+
 // artifact: ArtifactRpm | ArtifactContainerImage | ArtifactMbs;
 interface ArtifactGreenwaveStatesSummaryProps {
     artifact: Artifact;
@@ -156,11 +200,11 @@ export const ArtifactGreenwaveStatesSummary: React.FC<
     if (isScratch) {
         return null;
     }
-    if (!isGatingArtifact(artifact)) {
+    if (isLoading) {
         return null;
     }
-    if (isLoading) {
-        return <Spinner size="sm" />;
+    if (!isGatingArtifact(artifact)) {
+        return null;
     }
     const decision = getGwDecision(artifact);
     if (!decision) {

src/queries/Artifacts.ts

@@ -192,6 +192,9 @@ export const ArtifactsSearchSlowQuery2 = gql`
             hits {
                 hit_info
                 hit_source
+                children(onlyActual: true) {
+                    stagesSummary
+                }
                 greenwaveDecision {
                     results
                     waivers

src/slices/artifactsSlice.ts

@@ -106,10 +106,11 @@ const responseToState = (response: any) => {
     const { hits: hits_, hits_info } = response.data.artifacts;
     const hits = _.map(
         hits_,
-        ({ hit_info, hit_source, greenwaveDecision }) => ({
+        ({ hit_info, hit_source, greenwaveDecision, children }) => ({
             hit_info: hit_info,
             hit_source: hit_source,
             greenwaveDecision: greenwaveDecision,
+            children,
         }),
     );
     return { hits: hits as Artifact[], hits_info };

src/types.ts

@@ -21,6 +21,7 @@
 import _ from 'lodash';
 import { TabsProps } from '@patternfly/react-core';
 import { mappingDatagrepperUrl, config } from './config';
+import { StageStateNumAChildren } from './utils/stages_states';
 
 /**
  * Valid for: Version: 1.y.z
@@ -839,6 +840,7 @@ export interface AChildGreenwaveAndTestMsg {
 export interface AChildrenMsg {
     hits: AChildMsg[];
     hitsInfo: HitsInfo;
+    stagesSummary: StageStateNumAChildren[];
 }
 
 export type AChildSchemaMsg = AChildBuildMsg | AChildTestMsg;

src/utils/stages_states.ts

@@ -70,6 +70,8 @@ import {
  */
 
 export type StageStateAChildren = [MsgStageName, StateName, AChild[]];
+export type StageStateNumAChildren = [MsgStageName, StateName, number];
+
 type AChildrenByStageName = {
     msgStageName: MsgStageName;
     aChildrenByStateName: AChildrenByStateName;

src/utils/utils.tsx

@@ -270,7 +270,7 @@ export function mapTypeToIconsProps(type: string): IconProps | null {
 export const isGatingArtifact = (artifact: Artifact): boolean => {
     if (
         (isArtifactRpm(artifact) || isArtifactMbs(artifact)) &&
-        _.size(artifact.hit_source.gateTag) > 0
+        _.endsWith(artifact.hit_source.gateTag, '-gate')
     ) {
         return true;
     } else if (isArtifactRedhatContainerImage(artifact)) {