From c7872e0261911f6cd9a9a5f51cca424912aa59c6 Mon Sep 17 00:00:00 2001
From: barnettZQG <barnett.zqg@gmail.com>
Date: Mon, 17 Apr 2023 15:52:17 +0800
Subject: [PATCH] Fix: Add the prepare step for the canary workflow

Signed-off-by: barnettZQG <barnett.zqg@gmail.com>
---
 .../components/CanarySetting/index.tsx        | 16 +++-
 .../pages/ApplicationWorkflowStudio/index.tsx | 87 ++++++++++---------
 2 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/components/CanarySetting/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/components/CanarySetting/index.tsx
index 5da9d3db7..3c2b2ec4b 100644
--- a/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/components/CanarySetting/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/components/CanarySetting/index.tsx
@@ -23,15 +23,25 @@ interface Props {
 
 const generateCanaryDeployGroup = (step: WorkflowStep, batch: number): WorkflowStep => {
   const interval = Math.round(100 / batch);
-  const steps: WorkflowStep[] = [];
   const policies: string[] | null = step.properties ? step.properties['policies'] : null;
-  for (let i = 0; i < batch; i++) {
+  const steps: WorkflowStep[] = [
+    {
+      name: 'prepare-canary',
+      alias: 'Prepare Canary',
+      type: DeployModes.CanaryDeploy,
+      properties: {
+        weight: 0,
+        policies: _.cloneDeep(policies),
+      },
+    },
+  ];
+  for (let i = 1; i <= batch; i++) {
     const batchStep: WorkflowStep = {
       name: step.name + '-batch-' + i,
       alias: 'Batch ' + i,
       type: DeployModes.CanaryDeploy,
       properties: {
-        weight: i == batch - 1 ? 100 : interval * (i + 1),
+        weight: i == batch ? 100 : interval * i,
         policies: [],
       },
     };
diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/index.tsx
index 6697f8b52..b8a5ae675 100644
--- a/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/index.tsx
@@ -231,52 +231,61 @@ class ApplicationWorkflowStudio extends React.Component<Props, State> {
               style={{
                 display: 'flex',
                 justifyContent: 'end',
+                flexWrap: 'wrap',
               }}
             >
+              <div
+                style={{
+                  display: 'flex',
+                  width: '100%',
+                  justifyContent: 'end',
+                }}
+              >
+                <MenuButton
+                  style={{ marginRight: 'var(--spacing-4)' }}
+                  autoWidth={false}
+                  label={i18n.t('More').toString()}
+                >
+                  <MenuButton.Item
+                    onClick={() => {
+                      locationService.partial({ setCanary: true });
+                      this.setState({ setCanary: true });
+                    }}
+                  >
+                    <Translation>Canary Rollout Setting</Translation>
+                  </MenuButton.Item>
+                </MenuButton>
+                <Form.Item label={i18n.t('Mode').toString()} labelAlign="inset" style={{ marginRight: '8px' }}>
+                  <Select
+                    locale={locale().Select}
+                    defaultValue="StepByStep"
+                    value={mode}
+                    dataSource={WorkflowModeOptions}
+                    onChange={(value) => {
+                      this.setState({ mode: value, changed: this.state.mode !== value });
+                    }}
+                  />
+                </Form.Item>
+                <Form.Item label={i18n.t('Sub Mode').toString()} labelAlign="inset" style={{ marginRight: '8px' }}>
+                  <Select
+                    locale={locale().Select}
+                    defaultValue="DAG"
+                    value={subMode}
+                    onChange={(value) => {
+                      this.setState({ subMode: value, changed: this.state.subMode !== value });
+                    }}
+                    dataSource={WorkflowModeOptions}
+                  />
+                </Form.Item>
+                <Button disabled={!changed} loading={saveLoading} type="primary" onClick={this.onSave}>
+                  <Translation>Save</Translation>
+                </Button>
+              </div>
               {changed && (
                 <div className="notice-changes">
                   <Translation>Unsaved changes</Translation>
                 </div>
               )}
-              <MenuButton
-                style={{ marginRight: 'var(--spacing-4)' }}
-                autoWidth={false}
-                label={i18n.t('More').toString()}
-              >
-                <MenuButton.Item
-                  onClick={() => {
-                    locationService.partial({ setCanary: true });
-                    this.setState({ setCanary: true });
-                  }}
-                >
-                  <Translation>Canary Rollout Setting</Translation>
-                </MenuButton.Item>
-              </MenuButton>
-              <Form.Item label={i18n.t('Mode').toString()} labelAlign="inset" style={{ marginRight: '8px' }}>
-                <Select
-                  locale={locale().Select}
-                  defaultValue="StepByStep"
-                  value={mode}
-                  dataSource={WorkflowModeOptions}
-                  onChange={(value) => {
-                    this.setState({ mode: value, changed: this.state.mode !== value });
-                  }}
-                />
-              </Form.Item>
-              <Form.Item label={i18n.t('Sub Mode').toString()} labelAlign="inset" style={{ marginRight: '8px' }}>
-                <Select
-                  locale={locale().Select}
-                  defaultValue="DAG"
-                  value={subMode}
-                  onChange={(value) => {
-                    this.setState({ subMode: value, changed: this.state.subMode !== value });
-                  }}
-                  dataSource={WorkflowModeOptions}
-                />
-              </Form.Item>
-              <Button disabled={!changed} loading={saveLoading} type="primary" onClick={this.onSave}>
-                <Translation>Save</Translation>
-              </Button>
             </Col>
           </Row>
         </Card>