Add a dialog for skipping the analysis stage

web/src/api/deployments.ts

@@ -8,6 +8,8 @@ import {
   CancelDeploymentResponse,
   ApproveStageRequest,
   ApproveStageResponse,
+  SkipStageRequest,
+  SkipStageResponse,
 } from "pipecd/web/api_client/service_pb";
 
 export const getDeployment = ({
@@ -68,3 +70,13 @@ export const approveStage = ({
   req.setStageId(stageId);
   return apiRequest(req, apiClient.approveStage);
 };
+
+export const skipStage = ({
+  deploymentId,
+  stageId,
+}: SkipStageRequest.AsObject): Promise<SkipStageResponse.AsObject> => {
+  const req = new SkipStageRequest();
+  req.setDeploymentId(deploymentId);
+  req.setStageId(stageId);
+  return apiRequest(req, apiClient.skipStage);
+};

web/src/components/deployments-detail-page/pipeline/index.tsx

@@ -10,7 +10,10 @@ import {
 } from "@material-ui/core";
 import clsx from "clsx";
 import { FC, memo, useCallback, useEffect, useState } from "react";
-import { METADATA_APPROVED_BY } from "~/constants/metadata-keys";
+import {
+  METADATA_APPROVED_BY,
+  METADATA_SKIPPED_BY,
+} from "~/constants/metadata-keys";
 import { useAppDispatch, useAppSelector } from "~/hooks/redux";
 import { ActiveStage, updateActiveStage } from "~/modules/active-stage";
 import {
@@ -20,12 +23,14 @@ import {
   selectById,
   Stage,
   StageStatus,
+  skipStage,
 } from "~/modules/deployments";
 import { fetchStageLog } from "~/modules/stage-logs";
 import { ApprovalStage } from "./approval-stage";
 import { PipelineStage } from "./pipeline-stage";
 
 const WAIT_APPROVAL_NAME = "WAIT_APPROVAL";
+const ANALYSIS_NAME = "ANALYSIS";
 const STAGE_HEIGHT = 56;
 const APPROVED_STAGE_HEIGHT = 66;
 
@@ -147,6 +152,16 @@ const findApprover = (
   return undefined;
 };
 
+const findSkipper = (metadata: Array<[string, string]>): string | undefined => {
+  const res = metadata.find(([key]) => key === METADATA_SKIPPED_BY);
+
+  if (res) {
+    return res[1];
+  }
+
+  return undefined;
+};
+
 export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
   deploymentId,
 }) {
@@ -158,6 +173,9 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
   const [approveTargetId, setApproveTargetId] = useState<string | null>(null);
   const isOpenApproveDialog = Boolean(approveTargetId);
 
+  const [skipTargetId, setSkipTargetId] = useState<string | null>(null);
+  const isOpenSkipDialog = Boolean(skipTargetId);
+
   const defaultActiveStage = findDefaultActiveStage(deployment);
   const stages = createStagesForRendering(deployment);
   const isRunning = isDeploymentRunning(deployment?.status);
@@ -204,6 +222,13 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
     }
   };
 
+  const handleSkip = (): void => {
+    if (skipTargetId) {
+      dispatch(skipStage({ deploymentId, stageId: skipTargetId }));
+      setSkipTargetId(null);
+    }
+  };
+
   return (
     <Box textAlign="center" overflow="scroll" className={classes.showScrollbar}>
       <Box display="inline-flex">
@@ -216,6 +241,7 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
             >
               {stageColumn.map((stage, stageIndex) => {
                 const approver = findApprover(stage.metadataMap);
+                const skipper = findSkipper(stage.metadataMap);
                 const isActive = activeStage
                   ? activeStage.deploymentId === deploymentId &&
                     activeStage.stageId === stage.id
@@ -251,9 +277,15 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
                         name={stage.name}
                         status={stage.status}
                         metadata={stage.metadataMap}
-                        onClick={handleOnClickStage}
+                        onClick={
+                          stage.name === ANALYSIS_NAME &&
+                          stage.status === StageStatus.STAGE_RUNNING
+                            ? () => setSkipTargetId(stage.id)
+                            : handleOnClickStage
+                        }
                         active={isActive}
                         approver={approver}
+                        skipper={skipper}
                         isDeploymentRunning={isRunning}
                       />
                     )}
@@ -283,6 +315,21 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
             </Button>
           </DialogActions>
         </Dialog>
+
+        <Dialog open={isOpenSkipDialog} onClose={() => setSkipTargetId(null)}>
+          <DialogTitle>Skip stage</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              {`To skip this stage, click "SKIP".`}
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setSkipTargetId(null)}>CANCEL</Button>
+            <Button color="primary" onClick={handleSkip}>
+              SKIP
+            </Button>
+          </DialogActions>
+        </Dialog>
       </Box>
     </Box>
   );

web/src/components/deployments-detail-page/pipeline/pipeline-stage/index.tsx

@@ -55,6 +55,7 @@ export interface PipelineStageProps {
   active: boolean;
   isDeploymentRunning: boolean;
   approver?: string;
+  skipper?: string;
   metadata: [string, string][];
   onClick: (stageId: string, stageName: string) => void;
 }
@@ -113,6 +114,7 @@ export const PipelineStage: FC<PipelineStageProps> = memo(
     onClick,
     active,
     approver,
+    skipper,
     metadata,
     isDeploymentRunning,
   }) {
@@ -154,6 +156,13 @@ export const PipelineStage: FC<PipelineStageProps> = memo(
               color="inherit"
             >{`Approved by ${approver}`}</Typography>
           </div>
+        ) : skipper !== undefined ? (
+          <div className={classes.metadata}>
+            <Typography
+              variant="body2"
+              color="inherit"
+            >{`Skipped by ${skipper}`}</Typography>
+          </div>
         ) : null}
         {trafficPercentage && (
           <div className={classes.metadata}>

web/src/constants/metadata-keys.ts

@@ -1 +1,2 @@
 export const METADATA_APPROVED_BY = "ApprovedBy";
+export const METADATA_SKIPPED_BY = "SkippedBy";

web/src/modules/deployments/index.ts

@@ -172,6 +172,14 @@ export const approveStage = createAsyncThunk<
   await thunkAPI.dispatch(fetchCommand(commandId));
 });
 
+export const skipStage = createAsyncThunk<
+  void,
+  { deploymentId: string; stageId: string }
+>("deployments/skip", async (props, thunkAPI) => {
+  const { commandId } = await deploymentsApi.skipStage(props);
+  await thunkAPI.dispatch(fetchCommand(commandId));
+});
+
 export const cancelDeployment = createAsyncThunk<
   void,
   {