Improved create workflow tutorial and added images where necessary

Signed-off-by: Gbadebo Bello <[email protected]>

website/docs/create-workflow.md

@@ -5,8 +5,16 @@ sidebar_label: Create Workflow
 ---
 
 ---
+Once you have litmus setup, and you are logged in on the litmus portal, you can then proceed to create a workflow on the portal.
 
-Click on the **Schedule your first workflow** button on the home page to get started. It will take you to the workflow page where you can choose or design your own workflow by doing the following steps:
+## Create a workflow
+
+To create a workflow, click on the **Schedule your first workflow** button on the homepage. It will take you to the workflow page where you can choose or design your own workflow by going through the following steps:
+
+<figure>
+<img src={require('./assets/create-workflow-button.png').default} width="800" />
+<i>Fig 1 : Click on the "Schedule Workflow" button to create a new workflow.</i>
+</figure>
 
 ### 1. Choose Target Agent
 
@@ -25,15 +33,49 @@ Note:
 
 ### 2. Choose a Workflow
 
-Next, you need to choose/design the workflow, you will be given a collection of cards grouped as:
+Workflows can be created from different sources. There are primarily 4 sources. 
+
+You need to choose/design the workflow, you will be given a collection of cards grouped as:
 
 - **Predefined Workflow** : These are some workflows that are provided by default, these are already developed and can be tweaked by adding new environment variables according to the requirements of the user. After Selecting a predefined workflow you can choose to change the name and description of the selected workflow by clicking on “Edit Workflow Name”.
 
+- **Custom Workflow** : The last 3 options on this page are the custom workflow options. If you are using a Custom workflow you would be given the option to select an experiment, and customize the same. In this section, you can also **upload** a custom workflow manifest or construct a new one using **experiments from MyHub**.
+
+First, you create the workflow by selecting your hub, then you select the experiment and give the namespace where the workflow has to be scheduled.
+You can also tune the chaos engine for the experiment by adding new env variables and click add experiment. You can add more experiments and after that, or alter the sequence by dragging the selected experiment. Once done, click on **Finish adding experiments** which generates a custom workflow manifest with all the changes that you have added.
+
+<figure>
+<img src={require('./assets/select-workflow.png').default} width="800" />
+<i>Fig 2 : Choose a workflow.</i>
+</figure>
+
 ### 3. Tune Workflow (Optional)
 
 The next step is tuning the workflow, this section is common for both custom or predefined workflows. You will be given an Editor to check the YAML syntax and also will be able to edit the content in the editor itself. Once the necessary changes have been done, click on Next to move to the next page.
 
+<figure>
+<img src={require('./assets/tune-workflow.png').default} width="800" />
+<i>Fig 3 : Tune a workflow.</i>
+</figure>
+
 ### 4. Reliability Score (Optional)
 
-Here, you can set the points for all the experiments present in the selected workflow. These points will affect the Resilience Weights of application to be used with chaos experiment. The weights have been pre-selected as 10 for each test for you. However, you may review and modify the weightage again. The weights are relative to each other which you can change. The successful outcome of each test carries a certain weight. After selecting weights click on the Next Button.
+Here, you can set the points for all the experiments present in the selected workflow. These points will affect the Resilience Weights of application to be used with the chaos experiment. The weights have been pre-selected as 10 for each test for you. However, you may review and modify the weightage again. The weights are relative to each other which you can change. The successful outcome of each test carries a certain weight. After selecting weights click on the Next Button.
+
+<figure>
+<img src={require('./assets/reliability.png').default} width="800" />
+<i>Fig 3 : Reliability score</i>
+</figure>
+
+### 4. Choose a chaos schedule
+Here, you can set a predefined time to start your workflow. You can choose to schedule it now, or setup a recurring schedule.
+
+### 4. Summary
+This page presents to you a summary of the workflow you're about to schedule. This page allows you take one last look at it, and make edits to it where necessary. It also gives you an option to view the generated yaml file and edit it before you schedule the workflow. 
+
+<figure>
+<img src={require('./assets/workflow-summary.png').default} width="800" />
+<i>Fig 3 : Workflow-summary.</i>
+</figure>
+