From 2229884be2a18e43b959924ec897b00dfe049dd1 Mon Sep 17 00:00:00 2001 From: t-kikuc Date: Tue, 1 Jul 2025 09:53:49 +0900 Subject: [PATCH 1/5] Use METADATA_STAGE_DISPLAY_KEY instead Signed-off-by: t-kikuc --- pkg/constants/constants.go | 20 ++++++++++++++ .../pipeline/index.tsx | 24 +++++++++++++++-- .../pipeline/pipeline-stage/index.tsx | 27 +++++-------------- web/src/constants/metadata-keys.ts | 3 +++ 4 files changed, 52 insertions(+), 22 deletions(-) create mode 100644 pkg/constants/constants.go diff --git a/pkg/constants/constants.go b/pkg/constants/constants.go new file mode 100644 index 0000000000..f5e1426c06 --- /dev/null +++ b/pkg/constants/constants.go @@ -0,0 +1,20 @@ +// Copyright 2025 The PipeCD Authors. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +package constants + +const ( + // MetadataKey_StageDisplay is the key of the metadata to be displayed on the deployment detail UI. + MetadataKey_StageDisplay = "pipecd/stage-display-metadata" +) diff --git a/web/src/components/deployments-detail-page/pipeline/index.tsx b/web/src/components/deployments-detail-page/pipeline/index.tsx index a840552f8a..eaa6ceb449 100644 --- a/web/src/components/deployments-detail-page/pipeline/index.tsx +++ b/web/src/components/deployments-detail-page/pipeline/index.tsx @@ -11,6 +11,7 @@ import { FC, memo, useCallback, useEffect, useState } from "react"; import { METADATA_APPROVED_BY, METADATA_SKIPPED_BY, + METADATA_STAGE_DISPLAY_KEY, } from "~/constants/metadata-keys"; import { useAppDispatch, useAppSelector } from "~/hooks/redux"; import { ActiveStage, updateActiveStage } from "~/modules/active-stage"; @@ -95,6 +96,7 @@ export interface PipelineProps { deploymentId: string; } +// deprecated. Use findDisplayMetadataText for pipedv1. const findApprover = ( metadata: Array<[string, string]> ): string | undefined => { @@ -107,6 +109,7 @@ const findApprover = ( return undefined; }; +// deprecated. Use findDisplayMetadataText for pipedv1. const findSkipper = (metadata: Array<[string, string]>): string | undefined => { const res = metadata.find(([key]) => key === METADATA_SKIPPED_BY); @@ -117,6 +120,16 @@ const findSkipper = (metadata: Array<[string, string]>): string | undefined => { return undefined; }; +const findDisplayMetadataText = ( + metadata: Array<[string, string]> +): string | undefined => { + const res = metadata.find(([key]) => key === METADATA_STAGE_DISPLAY_KEY); + if (res) { + return res[1]; + } + return undefined; +}; + export const Pipeline: FC = memo(function Pipeline({ deploymentId, }) { @@ -205,6 +218,10 @@ export const Pipeline: FC = memo(function Pipeline({ key={`pipeline-${columnIndex}`} > {stageColumn.map((stage, stageIndex) => { + const displayMetadataText = findDisplayMetadataText( + stage.metadataMap + ); + // TODO: remove approver and skipper. they should be included in findDisplayMetadataText for compatibility. const approver = findApprover(stage.metadataMap); const skipper = findSkipper(stage.metadataMap); const isActive = activeStage @@ -215,6 +232,7 @@ export const Pipeline: FC = memo(function Pipeline({ const showLine = columnIndex > 0; const showStraightLine = showLine && stageIndex === 0; const showCurvedLine = showLine && stageIndex > 0; + // TODO: remove approver. use displayMetadataText instead. const isCurvedLineExtend = showCurvedLine && (Boolean(approver) || isPrevStageLarge); @@ -274,9 +292,11 @@ export const Pipeline: FC = memo(function Pipeline({ metadata={stage.metadataMap} onClick={handleOnClickStage} active={isActive} - approver={approver} - skipper={skipper} isDeploymentRunning={isRunning} + // TODO: use only displayMetadataText + displayMetadataText={ + displayMetadataText || approver || skipper + } /> )} diff --git a/web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx b/web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx index 509829e2b4..b183c15327 100644 --- a/web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx +++ b/web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx @@ -9,12 +9,12 @@ export interface PipelineStageProps { status: StageStatus; active: boolean; isDeploymentRunning: boolean; - approver?: string; - skipper?: string; metadata: [string, string][]; + displayMetadataText?: string; onClick: (stageId: string, stageName: string) => void; } +// TODO: Use METADATA_STAGE_DISPLAY_KEY instead for all fields in pipedv1. const TRAFFIC_PERCENTAGE_META_KEY = { PRIMARY: "primary-percentage", CANARY: "canary-percentage", @@ -68,10 +68,9 @@ export const PipelineStage: FC = memo( status, onClick, active, - approver, - skipper, metadata, isDeploymentRunning, + displayMetadataText, }) { const disabled = isDeploymentRunning === false && @@ -139,7 +138,7 @@ export const PipelineStage: FC = memo( - {approver !== undefined ? ( + {displayMetadataText && ( = memo( {`Approved by ${approver}`} + >{`${displayMetadataText}`} - ) : skipper !== undefined ? ( - - {`Skipped by ${skipper}`} - - ) : null} + )} + {/* TODO: remove trafficPercentage and use only displayMetadataText */} {trafficPercentage && ( Date: Tue, 1 Jul 2025 10:08:40 +0900 Subject: [PATCH 2/5] add prefixes Signed-off-by: t-kikuc --- .../deployments-detail-page/pipeline/index.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/web/src/components/deployments-detail-page/pipeline/index.tsx b/web/src/components/deployments-detail-page/pipeline/index.tsx index eaa6ceb449..7e2a883f16 100644 --- a/web/src/components/deployments-detail-page/pipeline/index.tsx +++ b/web/src/components/deployments-detail-page/pipeline/index.tsx @@ -103,7 +103,7 @@ const findApprover = ( const res = metadata.find(([key]) => key === METADATA_APPROVED_BY); if (res) { - return res[1]; + return `Approved by: ${res[1]}`; } return undefined; @@ -114,7 +114,7 @@ const findSkipper = (metadata: Array<[string, string]>): string | undefined => { const res = metadata.find(([key]) => key === METADATA_SKIPPED_BY); if (res) { - return res[1]; + return `Skipped by: ${res[1]}`; } return undefined; @@ -226,7 +226,7 @@ export const Pipeline: FC = memo(function Pipeline({ const skipper = findSkipper(stage.metadataMap); const isActive = activeStage ? activeStage.deploymentId === deploymentId && - activeStage.stageId === stage.id + activeStage.stageId === stage.id : false; const showLine = columnIndex > 0; @@ -265,17 +265,16 @@ export const Pipeline: FC = memo(function Pipeline({ borderLeft: `2px solid ${theme.palette.divider}`, borderBottom: `2px solid ${theme.palette.divider}`, width: theme.spacing(2), - height: `calc(${ - isCurvedLineExtend + height: `calc(${isCurvedLineExtend ? APPROVED_STAGE_HEIGHT : STAGE_HEIGHT - }px + ${theme.spacing(4)})`, + }px + ${theme.spacing(4)})`, }, }), })} > {stage.name === WAIT_APPROVAL_NAME && - stage.status === StageStatus.STAGE_RUNNING ? ( + stage.status === StageStatus.STAGE_RUNNING ? ( Date: Tue, 1 Jul 2025 10:12:15 +0900 Subject: [PATCH 3/5] fix lint/web Signed-off-by: t-kikuc --- .../deployments-detail-page/pipeline/index.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/web/src/components/deployments-detail-page/pipeline/index.tsx b/web/src/components/deployments-detail-page/pipeline/index.tsx index 7e2a883f16..cb2c3552b0 100644 --- a/web/src/components/deployments-detail-page/pipeline/index.tsx +++ b/web/src/components/deployments-detail-page/pipeline/index.tsx @@ -226,7 +226,7 @@ export const Pipeline: FC = memo(function Pipeline({ const skipper = findSkipper(stage.metadataMap); const isActive = activeStage ? activeStage.deploymentId === deploymentId && - activeStage.stageId === stage.id + activeStage.stageId === stage.id : false; const showLine = columnIndex > 0; @@ -265,16 +265,17 @@ export const Pipeline: FC = memo(function Pipeline({ borderLeft: `2px solid ${theme.palette.divider}`, borderBottom: `2px solid ${theme.palette.divider}`, width: theme.spacing(2), - height: `calc(${isCurvedLineExtend + height: `calc(${ + isCurvedLineExtend ? APPROVED_STAGE_HEIGHT : STAGE_HEIGHT - }px + ${theme.spacing(4)})`, + }px + ${theme.spacing(4)})`, }, }), })} > {stage.name === WAIT_APPROVAL_NAME && - stage.status === StageStatus.STAGE_RUNNING ? ( + stage.status === StageStatus.STAGE_RUNNING ? ( Date: Tue, 1 Jul 2025 10:15:06 +0900 Subject: [PATCH 4/5] fix lint/go Signed-off-by: t-kikuc --- pkg/constants/constants.go | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/constants/constants.go b/pkg/constants/constants.go index f5e1426c06..472d3bd3ee 100644 --- a/pkg/constants/constants.go +++ b/pkg/constants/constants.go @@ -15,6 +15,6 @@ package constants const ( - // MetadataKey_StageDisplay is the key of the metadata to be displayed on the deployment detail UI. - MetadataKey_StageDisplay = "pipecd/stage-display-metadata" + // MetadataKeyStageDisplay is the key of the metadata to be displayed on the deployment detail UI. + MetadataKeyStageDisplay = "pipecd/stage-display-metadata" ) From 831dee3be91ff36147f06214de52dabfac686605 Mon Sep 17 00:00:00 2001 From: t-kikuc Date: Tue, 1 Jul 2025 11:56:02 +0900 Subject: [PATCH 5/5] Move MetadataKeyStageDisplay to model/deployment.go Signed-off-by: t-kikuc --- pkg/constants/constants.go | 20 -------------------- pkg/model/deployment.go | 2 ++ 2 files changed, 2 insertions(+), 20 deletions(-) delete mode 100644 pkg/constants/constants.go diff --git a/pkg/constants/constants.go b/pkg/constants/constants.go deleted file mode 100644 index 472d3bd3ee..0000000000 --- a/pkg/constants/constants.go +++ /dev/null @@ -1,20 +0,0 @@ -// Copyright 2025 The PipeCD Authors. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -package constants - -const ( - // MetadataKeyStageDisplay is the key of the metadata to be displayed on the deployment detail UI. - MetadataKeyStageDisplay = "pipecd/stage-display-metadata" -) diff --git a/pkg/model/deployment.go b/pkg/model/deployment.go index 4ecef40233..d3f2b7a973 100644 --- a/pkg/model/deployment.go +++ b/pkg/model/deployment.go @@ -22,6 +22,8 @@ import ( const ( MetadataKeyDeploymentNotification = "DeploymentNotification" + // MetadataKeyStageDisplay is the key of the metadata to be displayed on the deployment detail UI. + MetadataKeyStageDisplay = "pipecd/stage-display-metadata" ) var notCompletedDeploymentStatuses = []DeploymentStatus{