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/log-viewer/index.test.tsx

@@ -48,6 +48,7 @@ it("should appear stage log in the document if activeState is exists", () => {
         entities: {
           [dummyDeployment.id]: dummyDeployment,
         },
+	skippable: {},
       },
       activeStage: {
         deploymentId: dummyDeployment.id,
@@ -74,6 +75,7 @@ it("should dispatch clearActiveStage action if click `close log` button", () =>
       entities: {
         [dummyDeployment.id]: dummyDeployment,
       },
+      skippable: {},
     },
     activeStage: {
       deploymentId: dummyDeployment.id,

web/src/components/deployments-detail-page/log-viewer/index.tsx

@@ -4,20 +4,39 @@ import {
   makeStyles,
   Toolbar,
   Typography,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Button,
 } from "@material-ui/core";
-import { Close } from "@material-ui/icons";
+import { Close, SkipNext } from "@material-ui/icons";
 import clsx from "clsx";
 import { FC, memo, useCallback, useState } from "react";
 import Draggable from "react-draggable";
 import { APP_HEADER_HEIGHT } from "~/components/header";
-import { useAppDispatch, useShallowEqualSelector } from "~/hooks/redux";
+import {
+  useAppDispatch,
+  useShallowEqualSelector,
+  useAppSelector,
+} from "~/hooks/redux";
 import { clearActiveStage } from "~/modules/active-stage";
-import { isStageRunning, selectById, Stage } from "~/modules/deployments";
+import {
+  isStageRunning,
+  selectById,
+  Stage,
+  StageStatus,
+  skipStage,
+  selectDeploymentStageIsSkippable,
+  updateSkippableState,
+} from "~/modules/deployments";
 import { selectStageLogById, StageLog } from "~/modules/stage-logs";
 import { Log } from "./log";
 
 const INITIAL_HEIGHT = 400;
 const TOOLBAR_HEIGHT = 48;
+const ANALYSIS_STAGE_NAME = "ANALYSIS";
 
 function useActiveStageLog(): [Stage | null, StageLog | null] {
   return useShallowEqualSelector<[Stage | null, StageLog | null]>((state) => {
@@ -86,6 +105,17 @@ const useStyles = makeStyles((theme) => ({
     // view height + header
     zIndex: 10,
   },
+  skipButton: {
+    color: theme.palette.common.white,
+    background: theme.palette.success.main,
+    marginRight: "10px",
+    "& .MuiButton-endIcon": {
+      marginLeft: 0,
+    },
+    "&:hover": {
+      backgroundColor: theme.palette.success.dark,
+    },
+  },
 }));
 
 export const LogViewer: FC = memo(function LogViewer() {
@@ -96,6 +126,8 @@ export const LogViewer: FC = memo(function LogViewer() {
   const dispatch = useAppDispatch();
   const [handlePosY, setHandlePosY] = useState(maxHandlePosY - INITIAL_HEIGHT);
   const logViewHeight = maxHandlePosY - handlePosY;
+  const [isOpenSkipDialog, setOpenSkipDialog] = useState(false);
+  const stageId = activeStage ? activeStage.id : "";
 
   const handleOnClickClose = (): void => {
     dispatch(clearActiveStage());
@@ -114,6 +146,15 @@ export const LogViewer: FC = memo(function LogViewer() {
     [setHandlePosY, maxHandlePosY]
   );
 
+  const handleSkip = (): void => {
+    const deploymentId = stageLog ? stageLog.deploymentId : "";
+    dispatch(skipStage({ deploymentId: deploymentId, stageId: stageId }));
+    dispatch(updateSkippableState({ stageId: stageId }));
+    setOpenSkipDialog(false);
+  };
+
+  const isSkippable = useAppSelector(selectDeploymentStageIsSkippable(stageId));
+
   if (!stageLog || !activeStage) {
     return null;
   }
@@ -135,6 +176,18 @@ export const LogViewer: FC = memo(function LogViewer() {
         <Divider />
         <Toolbar variant="dense" className={classes.toolbar}>
           <div className={classes.toolbarLeft}>
+            {activeStage.name == ANALYSIS_STAGE_NAME &&
+              activeStage.status == StageStatus.STAGE_RUNNING && (
+                <Button
+                  className={classes.skipButton}
+                  onClick={() => setOpenSkipDialog(true)}
+                  variant="contained"
+                  endIcon={<SkipNext />}
+                  disabled={isSkippable}
+                >
+                  SKIP
+                </Button>
+              )}
             <Typography variant="subtitle2" className={classes.stageName}>
               {activeStage.name}
             </Typography>
@@ -155,6 +208,20 @@ export const LogViewer: FC = memo(function LogViewer() {
           />
         </div>
       </div>
+      <Dialog open={isOpenSkipDialog} onClose={() => setOpenSkipDialog(false)}>
+        <DialogTitle>Skip stage</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {`To skip this stage, click "SKIP".`}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenSkipDialog(false)}>CANCEL</Button>
+          <Button color="primary" onClick={handleSkip}>
+            SKIP
+          </Button>
+        </DialogActions>
+      </Dialog>
     </>
   );
 });

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 {
@@ -147,6 +150,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,
 }) {
@@ -216,6 +229,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
@@ -254,6 +268,7 @@ export const Pipeline: FC<PipelineProps> = memo(function Pipeline({
                         onClick={handleOnClickStage}
                         active={isActive}
                         approver={approver}
+                        skipper={skipper}
                         isDeploymentRunning={isRunning}
                       />
                     )}

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/components/deployments-detail-page/pipeline/pipeline-stage/stage-status-icon/index.tsx

@@ -5,7 +5,7 @@ import {
   Error,
   IndeterminateCheckBox,
   Stop,
-  SkipNext,
+  Block,
 } from "@material-ui/icons";
 import { FC } from "react";
 import { StageStatus } from "~/modules/deployments";
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.grey[500],
   },
   [StageStatus.STAGE_SKIPPED]: {
-    color: theme.palette.success.main,
+    color: theme.palette.grey[500],
   },
   "@keyframes running": {
     "0%": {
@@ -59,6 +59,6 @@ export const StageStatusIcon: FC<StageStatusIconProps> = ({ status }) => {
     case StageStatus.STAGE_RUNNING:
       return <Cached className={classes[status]} />;
     case StageStatus.STAGE_SKIPPED:
-      return <SkipNext className={classes[status]} />;
+      return <Block className={classes[status]} />;
   }
 };

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.test.ts

@@ -13,6 +13,7 @@ import {
   fetchDeployments,
   fetchMoreDeployments,
   cancelDeployment,
+  updateSkippableState,
 } from ".";
 
 const initialState = {
@@ -24,6 +25,7 @@ const initialState = {
   status: "idle" as LoadingStatus,
   loading: {},
   cursor: "",
+  skippable: {},
 };
 
 test("isDeploymentRunning", () => {
@@ -272,4 +274,24 @@ describe("deploymentsSlice reducer", () => {
       });
     });
   });
+
+  describe("updateSkippableState", () => {
+    it(`should handle ${updateSkippableState.fulfilled.type}`, () => {
+      expect(
+        deploymentsSlice.reducer(initialState, {
+          type: updateSkippableState.fulfilled.type,
+          meta: {
+            arg: {
+              stageId: "stage-id",
+            },
+          },
+        })
+      ).toEqual({
+        ...initialState,
+        skippable: {
+          "stage-id": true,
+        },
+      });
+    });
+  });
 });

web/src/modules/deployments/index.ts

@@ -79,13 +79,15 @@ const initialState = deploymentsAdapter.getInitialState<{
   hasMore: boolean;
   cursor: string;
   minUpdatedAt: number;
+  skippable: Record<string, boolean>;
 }>({
   status: "idle",
   loading: {},
   canceling: {},
   hasMore: true,
   cursor: "",
   minUpdatedAt: Math.round(Date.now() / 1000 - TIME_RANGE_LIMIT_IN_SECONDS),
+  skippable: {},
 });
 
 export const fetchDeploymentById = createAsyncThunk<
@@ -172,6 +174,19 @@ 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 updateSkippableState = createAsyncThunk<void, { stageId: string }>(
+  "deployments/skippable",
+  () => {}
+);
+
 export const cancelDeployment = createAsyncThunk<
   void,
   {
@@ -258,6 +273,16 @@ export const deploymentsSlice = createSlice({
         ) {
           state.canceling[action.payload.deploymentId] = false;
         }
+        if (
+          action.payload.type === Command.Type.SKIP_STAGE &&
+          (action.payload.status === CommandStatus.COMMAND_FAILED ||
+            action.payload.status === CommandStatus.COMMAND_TIMEOUT)
+        ) {
+          state.skippable[action.payload.stageId] = false;
+        }
+      })
+      .addCase(updateSkippableState.fulfilled, (state, action) => {
+        state.skippable[action.meta.arg.stageId] = true;
       });
   },
 });
@@ -281,3 +306,7 @@ export {
   StageStatus,
   PipelineStage,
 } from "pipecd/web/model/deployment_pb";
+
+export const selectDeploymentStageIsSkippable = (id?: EntityId | null) => (
+  state: AppState
+): boolean => (id ? state.deployments.skippable[id] : false);

web/src/modules/stage-logs/index.test.ts

@@ -50,6 +50,7 @@ describe("async actions", () => {
           status: "idle",
           ids: [dummyDeployment.id],
           entities: { [dummyDeployment.id]: dummyDeployment },
+          skippable: {},
         },
       });
 
@@ -93,6 +94,7 @@ describe("async actions", () => {
           status: "idle",
           ids: [deployment.id],
           entities: { [deployment.id]: deployment },
+          skippable: {},
         },
       });
 
@@ -127,6 +129,7 @@ describe("async actions", () => {
           status: "idle",
           ids: [dummyDeployment.id],
           entities: { [dummyDeployment.id]: dummyDeployment },
+          skippable: {},
         },
       });