Merge pull request openshift#11678 from lokanandaprabhu/feature/OCP44634

Bug 2089773: Added separate reducers for status and title for pipeline status

frontend/packages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunCustomDetails.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Status } from '@console/shared';
 import { PipelineRunKind } from '../../../types';
-import { pipelineRunFilterReducer } from '../../../utils/pipeline-filter-reducer';
+import {
+ pipelineRunFilterReducer,
+ pipelineRunTitleFilterReducer,
+} from '../../../utils/pipeline-filter-reducer';
 import {
  convertBackingPipelineToPipelineResourceRefProps,
  getPipelineResourceLinks,
@@ -33,7 +36,7 @@ const PipelineRunCustomDetails: React.FC<PipelineRunCustomDetailsProps> = ({ pip
  <dd>
  <Status
  status={pipelineRunFilterReducer(pipelineRun)}
- title={pipelineRunFilterReducer(pipelineRun)}
+ title={pipelineRunTitleFilterReducer(pipelineRun)}
  />
  </dd>
  </dl>

frontend/packages/pipelines-plugin/src/components/pipelineruns/list-page/PipelineRunRow.tsx

@@ -5,7 +5,10 @@ import { referenceForModel } from '@console/internal/module/k8s';
 import { PipelineRunModel } from '../../../models';
 import { PipelineRunKind } from '../../../types';
 import { getPipelineRunKebabActions } from '../../../utils/pipeline-actions';
-import { pipelineRunFilterReducer } from '../../../utils/pipeline-filter-reducer';
+import {
+ pipelineRunFilterReducer,
+ pipelineRunTitleFilterReducer,
+} from '../../../utils/pipeline-filter-reducer';
 import { pipelineRunDuration } from '../../../utils/pipeline-utils';
 import LinkedPipelineRunTaskStatus from '../status/LinkedPipelineRunTaskStatus';
 import PipelineRunStatus from '../status/PipelineRunStatus';
@@ -22,7 +25,7 @@ const PLRStatus: React.FC<PLRStatusProps> = ({ obj }) => {
  return (
  <PipelineRunStatus
  status={pipelineRunFilterReducer(obj)}
- title={pipelineRunFilterReducer(obj)}
+ title={pipelineRunTitleFilterReducer(obj)}
  pipelineRun={obj}
  />
  );

frontend/packages/pipelines-plugin/src/components/pipelineruns/status/PipelineBars.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tooltip } from '@patternfly/react-core';
-import { PipelineRunKind } from '../../../types';
-import { runStatus, getRunStatusColor } from '../../../utils/pipeline-augment';
+import { ComputedStatus, PipelineRunKind } from '../../../types';
+import { getRunStatusColor } from '../../../utils/pipeline-augment';
 import HorizontalStackedBars from '../../charts/HorizontalStackedBars';
 import { useTaskStatus } from '../hooks/useTaskStatus';
 import TaskStatusToolTip from './TaskStatusTooltip';
@@ -18,10 +18,10 @@ export const PipelineBars: React.FC<PipelineBarProps> = ({ pipelinerun }) => {
  <HorizontalStackedBars
  height="1em"
  inline
- values={Object.keys(runStatus).map((status) => ({
- color: getRunStatusColor(runStatus[status]).pftoken.value,
+ values={Object.keys(ComputedStatus).map((status) => ({
+ color: getRunStatusColor(ComputedStatus[status]).pftoken.value,
  name: status,
- size: taskStatus[runStatus[status]],
+ size: taskStatus[ComputedStatus[status]],
  }))}
  />
  </Tooltip>

frontend/packages/pipelines-plugin/src/components/pipelineruns/status/TaskStatusTooltip.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { TaskStatus, runStatus, getRunStatusColor } from '../../../utils/pipeline-augment';
+import { ComputedStatus } from '../../../types';
+import { TaskStatus, getRunStatusColor } from '../../../utils/pipeline-augment';
 import './TaskStatusTooltip.scss';
 
 interface TaskStatusToolTipProps {
@@ -9,7 +10,7 @@ interface TaskStatusToolTipProps {
 const TaskStatusToolTip: React.FC<TaskStatusToolTipProps> = ({ taskStatus }) => {
  return (
  <div className="odc-task-status-tooltip">
- {Object.keys(runStatus).map((status) => {
+ {Object.keys(ComputedStatus).map((status) => {
  const { message, pftoken } = getRunStatusColor(status);
  return taskStatus[status] ? (
  <React.Fragment key={status}>
@@ -18,7 +19,8 @@ const TaskStatusToolTip: React.FC<TaskStatusToolTipProps> = ({ taskStatus }) =>
  style={{ background: pftoken.value }}
  />
  <div>
- {status === runStatus.PipelineNotStarted || status === runStatus.FailedToStart
+ {status === ComputedStatus.PipelineNotStarted ||
+ status === ComputedStatus.FailedToStart
  ? message
  : `${taskStatus[status]} ${message}`}
  </div>

frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationStepList.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { getRunStatusColor, runStatus } from '../../../../utils/pipeline-augment';
+import { ComputedStatus } from '../../../../types';
+import { getRunStatusColor } from '../../../../utils/pipeline-augment';
 import { StepStatus } from './pipeline-step-utils';
 import { StatusIcon } from './StatusIcon';
 
@@ -23,7 +24,7 @@ const TooltipColoredStatusIcon = ({ status }) => {
 
  const icon = <StatusIcon status={status} {...sharedProps} />;
 
- if (status === runStatus.Succeeded || status === runStatus.Failed) {
+ if (status === ComputedStatus.Succeeded || status === ComputedStatus.Failed) {
  // Succeeded and Failed icons have transparent centers shapes - in tooltips, this becomes an undesired black
  // This will simply wrap the icon and place a white backdrop
  return (
@@ -59,7 +60,7 @@ export const PipelineVisualizationStepList: React.FC<PipelineVisualizationStepLi
  {t('pipelines-plugin~Finally task')}
  </div>
  )}
- {steps.map(({ duration, name, runStatus: status }) => {
+ {steps.map(({ duration, name, status }) => {
  return (
  <div
  className={classNames('odc-pipeline-visualization-step-list__step', {

frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationTask.tsx

@@ -12,8 +12,14 @@ import {
 import { referenceForModel } from '@console/internal/module/k8s';
 import { SvgDropShadowFilter } from '@console/topology/src/components/svg';
 import { PipelineRunModel, TaskModel, ClusterTaskModel } from '../../../../models';
-import { TektonTaskSpec, PipelineTaskRef, TaskKind, WhenExpression } from '../../../../types';
-import { runStatus, getRunStatusColor } from '../../../../utils/pipeline-augment';
+import {
+ ComputedStatus,
+ TektonTaskSpec,
+ PipelineTaskRef,
+ TaskKind,
+ WhenExpression,
+} from '../../../../types';
+import { getRunStatusColor } from '../../../../utils/pipeline-augment';
 import { WHEN_EXPRESSSION_DIAMOND_SIZE } from '../../pipeline-topology/const';
 import WhenExpressionDecorator from '../../pipeline-topology/WhenExpressionDecorator';
 import { createStepStatus, StepStatus, TaskStatus } from './pipeline-step-utils';
@@ -78,15 +84,21 @@ export const PipelineVisualizationTask: React.FC<PipelineVisualizationTaskProp>
 }) => {
  const taskStatus = task.status || {
  duration: '',
- reason: runStatus.Idle,
+ reason: ComputedStatus.Idle,
  };
- if (pipelineRunStatus === runStatus.Failed || pipelineRunStatus === runStatus.Cancelled) {
- if (task.status?.reason === runStatus.Idle || task.status?.reason === runStatus.Pending) {
- taskStatus.reason = runStatus.Cancelled;
+ if (
+ pipelineRunStatus === ComputedStatus.Failed ||
+ pipelineRunStatus === ComputedStatus.Cancelled
+ ) {
+ if (
+ task.status?.reason === ComputedStatus.Idle ||
+ task.status?.reason === ComputedStatus.Pending
+ ) {
+ taskStatus.reason = ComputedStatus.Cancelled;
  }
  }
  if (isSkipped) {
- taskStatus.reason = runStatus.Skipped;
+ taskStatus.reason = ComputedStatus.Skipped;
  }
 
  const taskComponent = (
@@ -153,15 +165,15 @@ const TaskComponent: React.FC<TaskProps> = ({
  ? `${resourcePathFromModel(PipelineRunModel, pipelineRunName, namespace)}/logs/${name}`
  : undefined;
  const enableLogLink =
- status?.reason !== runStatus.Idle &&
- status?.reason !== runStatus.Pending &&
- status?.reason !== runStatus.Cancelled &&
+ status?.reason !== ComputedStatus.Idle &&
+ status?.reason !== ComputedStatus.Pending &&
+ status?.reason !== ComputedStatus.Cancelled &&
  !!path;
  const hasWhenExpression = pipelineTask?.when?.length > 0;
  const hasRunAfter = pipelineTask?.runAfter?.length > 0;
  const taskStatusColor = status
  ? getRunStatusColor(status.reason).pftoken.value
- : getRunStatusColor(runStatus.Cancelled).pftoken.value;
+ : getRunStatusColor(ComputedStatus.Cancelled).pftoken.value;
 
  const [hover, hoverRef] = useHover();
  const truncatedVisualName = React.useMemo(
@@ -213,8 +225,9 @@ const TaskComponent: React.FC<TaskProps> = ({
  >
  <g
  className={cx({
- 'fa-spin odc-pipeline-vis-task--icon-spin': status.reason === runStatus.Running,
- 'odc-pipeline-vis-task--icon-stop': status.reason !== runStatus.Running,
+ 'fa-spin odc-pipeline-vis-task--icon-spin':
+ status.reason === ComputedStatus.Running,
+ 'odc-pipeline-vis-task--icon-stop': status.reason !== ComputedStatus.Running,
  })}
  >
  <StatusIcon status={status.reason} disableSpin />
@@ -296,7 +309,7 @@ const SvgTaskStatus: React.FC<SvgTaskStatusProps> = ({ steps, x, y, width }) =>
  y={y}
  width={stepWidth - gap}
  height={2}
- fill={getRunStatusColor(step.runStatus).pftoken.value}
+ fill={getRunStatusColor(step.status).pftoken.value}
  />
  );
  })}

frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details/StatusIcon.tsx

@@ -9,7 +9,8 @@ import {
  SyncAltIcon,
 } from '@patternfly/react-icons';
 import * as cx from 'classnames';
-import { getRunStatusColor, runStatus } from '../../../../utils/pipeline-augment';
+import { ComputedStatus } from '../../../../types';
+import { getRunStatusColor } from '../../../../utils/pipeline-augment';
 
 interface StatusIconProps {
  status: string;
@@ -20,24 +21,24 @@ interface StatusIconProps {
 
 export const StatusIcon: React.FC<StatusIconProps> = ({ status, disableSpin, ...props }) => {
  switch (status) {
- case runStatus['In Progress']:
- case runStatus.Running:
+ case ComputedStatus['In Progress']:
+ case ComputedStatus.Running:
  return <SyncAltIcon {...props} className={cx({ 'fa-spin': !disableSpin })} />;
 
- case runStatus.Succeeded:
+ case ComputedStatus.Succeeded:
  return <CheckCircleIcon {...props} />;
 
- case runStatus.Failed:
+ case ComputedStatus.Failed:
  return <ExclamationCircleIcon {...props} />;
 
- case runStatus.Idle:
- case runStatus.Pending:
+ case ComputedStatus.Idle:
+ case ComputedStatus.Pending:
  return <HourglassHalfIcon {...props} />;
 
- case runStatus.Cancelled:
+ case ComputedStatus.Cancelled:
  return <BanIcon {...props} />;
 
- case runStatus.Skipped:
+ case ComputedStatus.Skipped:
  return <AngleDoubleRightIcon {...props} />;
 
  default:
@@ -51,7 +52,7 @@ export const ColoredStatusIcon: React.FC<StatusIconProps> = ({ status, ...others
  style={{
  color: status
  ? getRunStatusColor(status).pftoken.value
- : getRunStatusColor(runStatus.Cancelled).pftoken.value,
+ : getRunStatusColor(ComputedStatus.Cancelled).pftoken.value,
  }}
  >
  <StatusIcon status={status} {...others} />

frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details/pipeline-step-utils.ts

@@ -1,4 +1,4 @@
-import { runStatus } from '../../../../utils/pipeline-augment';
+import { ComputedStatus } from '../../../../types';
 import { calculateDuration } from '../../../../utils/pipeline-utils';
 
 enum TerminatedReasons {
@@ -17,7 +17,7 @@ export type TaskStatusStep = {
 };
 
 export type TaskStatus = {
- reason: runStatus;
+ reason: ComputedStatus;
  duration?: string;
  steps?: TaskStatusStep[];
 };
@@ -48,32 +48,32 @@ const getMatchingStepDuration = (matchingStep?: TaskStatusStep) => {
 export type StepStatus = {
  duration: string | null;
  name: string;
- runStatus: runStatus;
+ status: ComputedStatus;
 };
 
 export const createStepStatus = (step: { name: string }, status: TaskStatus): StepStatus => {
- let stepRunStatus: runStatus = runStatus.PipelineNotStarted;
+ let stepRunStatus: ComputedStatus = ComputedStatus.PipelineNotStarted;
  let duration: string = null;
 
  if (!status || !status.reason) {
- stepRunStatus = runStatus.Cancelled;
- } else if (status.reason === runStatus['In Progress']) {
+ stepRunStatus = ComputedStatus.Cancelled;
+ } else if (status.reason === ComputedStatus['In Progress']) {
  // In progress, try to get granular statuses
  const matchingStep: TaskStatusStep = getMatchingStep(step, status);
 
  if (!matchingStep) {
- stepRunStatus = runStatus.Pending;
+ stepRunStatus = ComputedStatus.Pending;
  } else if (matchingStep.terminated) {
  stepRunStatus =
  matchingStep.terminated.reason === TerminatedReasons.Completed
- ? runStatus.Succeeded
- : runStatus.Failed;
+ ? ComputedStatus.Succeeded
+ : ComputedStatus.Failed;
  duration = getMatchingStepDuration(matchingStep);
  } else if (matchingStep.running) {
- stepRunStatus = runStatus['In Progress'];
+ stepRunStatus = ComputedStatus['In Progress'];
  duration = getMatchingStepDuration(matchingStep);
  } else if (matchingStep.waiting) {
- stepRunStatus = runStatus.Pending;
+ stepRunStatus = ComputedStatus.Pending;
  }
  } else {
  // Not in progress, just use the run status reason
@@ -85,6 +85,6 @@ export const createStepStatus = (step: { name: string }, status: TaskStatus): St
  return {
  duration,
  name: step.name,
- runStatus: stepRunStatus,
+ status: stepRunStatus,
  };
 };

frontend/packages/pipelines-plugin/src/components/pipelines/list-page/PipelineRow.tsx

@@ -4,7 +4,10 @@ import { ResourceLink, Timestamp } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { PipelineModel, PipelineRunModel } from '../../../models';
 import { PipelineWithLatest } from '../../../types';
-import { pipelineFilterReducer } from '../../../utils/pipeline-filter-reducer';
+import {
+ pipelineFilterReducer,
+ pipelineTitleFilterReducer,
+} from '../../../utils/pipeline-filter-reducer';
 import LinkedPipelineRunTaskStatus from '../../pipelineruns/status/LinkedPipelineRunTaskStatus';
 import PipelineRunStatus from '../../pipelineruns/status/PipelineRunStatus';
 import { tableColumnClasses } from './pipeline-table';
@@ -21,7 +24,7 @@ const PipelineStatus: React.FC<PipelineStatusProps> = ({ obj }) => {
  return (
  <PipelineRunStatus
  status={pipelineFilterReducer(obj)}
- title={pipelineFilterReducer(obj)}
+ title={pipelineTitleFilterReducer(obj)}
  pipelineRun={obj.latestRun}
  />
  );

frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-topology/WhenExpressionDecorator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from '@patternfly/react-core';
-import { runStatus } from '../../../utils/pipeline-augment';
+import { ComputedStatus } from '../../../types';
 import { NODE_HEIGHT } from './const';
 import { getWhenExpressionDiamondState } from './utils';
 
@@ -11,7 +11,7 @@ type WhenExpressionDecoratorProps = {
  height: number;
  leftOffset?: number;
  stroke?: string;
- status: runStatus;
+ status: ComputedStatus;
  appendLine?: boolean;
  enableTooltip?: boolean;
  isFinallyTask: boolean;