Added User guides for Observability Setup & Comparative Analysis. (#71)

* Added user guides for overview, workflow analytics & workflow comparison tabs.

Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com>

* Formatted the assets structure & addressed the changes.

Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com>

* Added the required changes.

Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com>

old-docs/workflow-analytics.md

@@ -1,67 +0,0 @@
----
-id: workflow-analytics
-title: Workflow Analytics Using Litmus-Portal
-sidebar_label: Workflow Analytics
----
-
----
-
-Once you have successfully scheduled a workflow (recurring/ non-recurring), you can check how the workflows are running as well as analyze the workflow runs on an Hourly/Daily/Monthly basis using the workflow dashboards and check how a system behaves when chaos injection takes place using the application dashboards.
-
-### Overview
-
-The overview tab helps you to manage your connected data sources and dashboards, all while making it easier to view and analyze your workflows. The overview tab is split into 3 parts -
-
-- Data Sources
-- Dashboards
-- Workflow Dashboards
-
-> When no agent is connected or in the `active` state, the overview page will show a banner for connecting an agent. Users can deploy a new agent using [litmusctl](https://github.com/litmuschaos/litmusctl).
-
-<img src={require('./assets/overview-agent-connect.png').default} width="1000" height="500" />
-
-Once the agent is connected, you will see a banner for adding data sources and a list of recently updated workflow runs (if any).
-
-<img src={require('./assets/overview-first-look.png').default} width="1000" height="500" />
-
-For adding a data source, you can refer to the following guide.
-
-Once you have added a data source successfully, you will be able to see the data source listed on the overview page.
-
-<img src={require('./assets/overview-with-datasource.png').default} width="1000" />
-
-Now, you will get a banner with an option to add a dashboard for visualizing the data from the connected data sources.
-
-For adding a Dashboard, you can refer to the following guide. After setting up the dashboard, you will be able to see the dashboard on the overview page.
-
-<img src={require('./assets/overview-with-dashboard.png').default} width="1000" />
-
-You can check the workflow analytics and the workflow run graph by clicking on _**see workflow run**_ & _**see workflow analytics**_ icons for a workflow from the list of workflows present on the overview page.
-
-### Workflow Analytics
-
-As the workflow run graph has already been discussed in other parts of the documentation, this section will focus on workflow analytics. On clicking _**see workflow analytics**_, you will be redirected to the workflow analytics page for that particular workflow.
-
-<img src={require('./assets/workflow-analytics.png').default} width="1000" height="500" />
-
-On the workflow analytics page, in the first container, you will be able to see the details about the selected workflow such as the workflow name, workflow id, agent details(name, namespace, etc.), and the workflow run details like the last run as well as regularity.
-
-On clicking on **show statistics**, you will be able to see the experiment statistics, average resiliency score and pass/fail ratio for the workflows/experiments.
-
-<img src={require('./assets/workflow-single-run.png').default} width="1000"/>
-
-If the selected workflow is recurring or is re-run multiple times, then the average resiliency score for all the workflow runs is shown. A drop-down has been provided to switch between workflows & experiments for checking the pass/fail ratio.
-
-<img src={require('./assets/workflow-multi-run.png').default} width="1000"/>
-
-If the selected workflow is recurring or is re-run multiple times, a heat map representing the days of the year showing all the workflow runs for the selected workflow can be observed. On hovering over a point in the heat map, the average resiliency score for that particular day will be shown in the form of a tool-tip.
-
-<img src={require('./assets/workflows-heatmap.png').default} width="1000"/>
-
-On clicking on a heat map entry, a stacked bar graph representing the pass/fail ratio is shown, on which you can see the workflow runs on that day and hover over the bars to see the resiliency for that particular workflow run on that day.
-
-<img src={require('./assets/workflow-activity.png').default} width="1000"/>
-
-On clicking on a bar, more details about the workflow run represented by that stacked bar are presented in a tabular format. Here, a table showing test names, experiment names, test results & weights, etc. can be seen.
-
-<img src={require('./assets/experiments-table.png').default} width="1000"/>

website/docs/user-guides/analyze-workflow.md

@@ -4,4 +4,56 @@ title: Analyzing a Workflow
 sidebar_label: Analyzing Workflow
 ---
 
-## Coming soon
+---
+
+Workflow Analytics allows you to analyze their workflows (Recurring/ Nonrecurring) & helps them to keep track of the workflow runs of scheduled workflows and their behaviour.
+
+### Workflow Details
+
+On the workflow analytics page, in the first container, you will be able to see the details about the selected workflow such as the workflow name, workflow id, agent details(name, namespace, etc.), and the workflow run details like the last run as well as regularity.
+
+<img src={require('../assets/user-guides/observability/workflow-analysis/workflow-details.png').default} />
+
+### Workflow Statistics
+
+On clicking on **show statistics**, you will be able to see the experiment statistics, average resiliency score and pass/fail ratio for the workflows/experiments.
+
+<img src={require('../assets/user-guides/observability/workflow-analysis/workflow-single-run.png').default} />
+
+:::note
+
+If the selected workflow is recurring or is re-run multiple times, then the average resiliency score for all the workflow runs is shown. A drop-down has been provided to switch between workflows & experiments for checking the pass/fail ratio.
+
+:::
+
+<img src={require('../assets/user-guides/observability/workflow-analysis/workflow-multi-run.png').default} />
+
+### Workflow Heatmap
+
+If the selected workflow is recurring or is re-run multiple times, a heat map representing the days of the year showing all the workflow runs for the selected workflow can be observed. On hovering over a point in the heat map, the average resiliency score for that particular day will be shown in the form of a tool-tip.
+
+<img src={require('../assets/user-guides/observability/workflow-analysis/workflow-heatmap.png').default} />
+
+### Workflow Activity
+
+On clicking on a heat map entry, a stacked bar graph representing the pass/fail ratio is shown, on which you can see the workflow runs on that day and hover over the bars to see the resiliency for that particular workflow run on that day.
+
+<img src={require('../assets/user-guides/observability/workflow-analysis/workflow-activity.png').default} />
+
+:::info
+
+You can check Pass Count, Fail Count of Experiments & Resiliency Score by hovering over the bar for that workflow run.
+
+:::
+
+### Experiments Table
+
+On clicking on a bar, more details about the workflow run represented by that stacked bar are presented in a tabular format. A table having individual experiments details is presented to the user, which helps them to get insights about the experiments.
+
+<img src={require('../assets/user-guides/observability/workflow-analysis/experiments-table.png').default} />
+
+## Learn More
+
+- [Compare Workflows](comparative-analysis)
+- [Manage Application Dashboard](manage-app-dashboard)
+- [Configure Datasource](configure-datasource)

website/docs/user-guides/comparative-analysis.md

@@ -4,4 +4,68 @@ title: Comparative Analysis of Chaos Workflows
 sidebar_label: Compare Workflows
 ---
 
-## Coming soon
+Workflow Dashboard allows you to manage your workflows runs, schedules & statistics.
+
+### Long-term Statistics
+
+Long-term Statistics provides details about workflow runs & schedules over time.
+
+In first tab, you can compare number of workflow runs according to selected granuality i.e. Daily/Monthly/Hourly. Granuality can be changed using drop-down in top right corner.
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/workflow-runs-stats.png').default} />
+<img src={require('../assets/user-guides/observability/workflow-dashboard/workflow-runs-stats-dropdown.png').default} />
+
+Similarily, In other tab, you can also compare schedules according to selected granuality.
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/schedules-stats.png').default} />
+<img src={require('../assets/user-guides/observability/workflow-dashboard/schedules-stats-dropdown.png').default} />
+
+:::info
+
+You can hover over the respective graphs to get the total workflow runs & total schedules respectively.
+
+:::
+
+### Total Workflow Statistics
+
+Total Workflow Statistics helps you to see how many of their scheduled have been passing/ failing & running. This helps you to see average performance of all the workflow runs.
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/workflows-radial-chart.png').default} />
+
+### Comparing Multiple Workflows
+
+List of workflows provided on the page helps you to keep track of their scheduled workflows along with associated details like workflow name, target agent, starting time,etc & allows to compare the workflows by selecting them from the table.
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/workflows-comparison-table-1.png').default} />
+
+For comparing the workflows, you can select the workflows from the table & click on _**Compare workflows**_ button.
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/workflows-comparison-table-2.png').default} />
+
+Once, user clicks on _**Compare workflows**_ button, they will be presented with a graph, which shows comparison of selected workflows with respect to resilience score.
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/comparison-graph.png').default} />
+
+You can change the granuality by clicking on drop-down in top right corner. We can choose between Hourly/ Daily/ Monthly.
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/comparison-graph-with-dropdown.png').default} />
+
+:::note
+
+By hovering over the dots on comparison graph, you can see the resiliency score of compared workflows & also average workflows.
+
+:::
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/comparison-graph-hover.png').default} />
+
+The Comparison report can be downloaded in PDF form using the _**export button**_ given in header of table.
+
+<img src={require('../assets/user-guides/observability/workflow-dashboard/export-button.png').default} />
+
+> **Sample workflows comparison report can be downloaded from [here](../assets/chaos-center-analytics.pdf)**
+
+## Learn More
+
+- [Configure Datasource](configure-datasource)
+- [See Workflow Analytics](analyze-workflow)
+- [Manage Application Dashboard](manage-app-dashboard)

website/docs/user-guides/observability-set-up.md

@@ -4,4 +4,53 @@ title: Setup Observability with Chaos Center
 sidebar_label: Setup Observability
 ---
 
-## Coming soon
+---
+
+### Overview
+
+Overview Tab helps you to manage your connected data sources and dashboards, all while making it easier to view and analyze your workflows. The overview tab is split into 3 parts -
+
+- Data Sources
+- Application Dashboards
+- Workflow Dashboards
+
+### Before you begin
+
+Before starting with observability setup, you have to connect an agent to get workflow statistics & keep track of workflows performance.
+For connecting a new agent, you can follow [here](../litmusctl/installation) .
+
+---
+
+Once the agent is connected, you will see a banner for adding data sources and a list of recently updated workflow dashboards (if any).
+
+<figure>
+<img src={require('../assets/user-guides/observability/setup/overview-first-look.png').default} />
+<i>Overview page, When no workflows are running</i>
+</figure>
+
+<figure>
+<img src={require('../assets/user-guides/observability/setup/recently-updated-workflow-dashboards.png').default} />
+<i>Overview page, When some workflows have been already scheduled </i>
+</figure>
+
+If you already have a data source, then they can connect the same by clicking on _**Add data source**_ button and following the corresponding instructions. For deploying a new data source, you can follow the sample configuration steps by clicking on _**Sample Prometheus configuration**_.
+
+Once you have added a data source successfully, you will be able to see the data source listed on the overview page.you can add more data sources by clicking on _**Add data source**_ button.
+
+<img src={require('../assets/user-guides/observability/setup/overview-with-datasource.png').default} />
+
+Now, you will get a banner with an option to add a dashboard for visualizing the data from the connected data sources.
+
+After setting up the dashboard, you will be able to see the dashboard on the overview page.
+
+<img src={require('../assets/user-guides/observability/setup/overview-with-dashboards.png').default} />
+
+You can view, configure & download the dashboards in the form of JSON for reusability using provided buttons.
+
+You can check the workflow analytics and the workflow run graph by clicking on _**see workflow run**_ & _**see workflow analytics**_ icons for a workflow from the list of workflow dashboards present on the overview page.
+
+## Learn More
+
+- [Analyze a Workflow](analyze-workflow)
+- [Configure Datasource](configure-datasource)
+- [Manage Application Dashboard](manage-app-dashboard)