Add pipeline step grouping by stage (#1021)

docs/webapp/pipelines/webapp_pipeline_viewing.md

@@ -19,10 +19,46 @@ Each step shows:
 
 While the pipeline is running, the steps' details and colors are updated.
 
+## Run Stages
+Steps that were set into the same stage when created, are grouped into stages in the Run Details panel. 
+
+In stages view, click`Expand Stages` to view the complete pipeline DAG with all steps visible. 
+In the detailed view, click `Collapse Stages` to view the pipeline DAG outline with the same stage steps grouped into a single stage.
+
+![Pipeline structure in stages](../../img/webapp_pipeline_DAG_collapsed.png)
+
+
+
+In the collapsed view, each stage displays:
+
+<div class="max-w-25"> 
+
+![Pipeline stage card](../../img/webapp_pipeline_stage_card.png)
+
+</div>
+
+* Stage name 
+* Number of steps in stage 
+
+Click <img src="/docs/latest/icons/ico-zoom-to-fit.svg" alt="Expand" className="icon size-md space-md" /> to view the 
+steps that comprise the stage. Select a step to view its [Step Info](#run-and-step-info).
+
+Click on a stage to view its **STAGE INFO**:
+
+<div class="max-w-50"> 
+
+![Pipeline stage info](../../img/webapp_pipeline_stage_info.png)
+
+</div> 
+
+* Stage name
+* Step count by status - The number of steps in each status category (e.g. completed, running, pending)
+
+
 ## Run and Step Details
 ### Run and Step Info
 
-On the right side of the pipeline run panel, view the **RUN INFO** which shows: 
+On the pipeline run panel, view the **RUN INFO** which shows: 
 * Run Parameters 
 * Reported Metrics
 * Produced Artifacts 

static/icons/ico-zoom-to-fit.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.995 6.995H2.005V2.005H6.995V3.995H3.995V6.995ZM3.995 20.005V17.005H2.005V21.995H6.995V20.005H3.995ZM20.005 20.005H17.005V21.995H21.995V17.005H20.005V20.005ZM20.005 3.995V6.995H21.995V2.005H17.005V3.995H20.005ZM7.01501 6.01501H17.015C17.2802 6.01501 17.5346 6.12036 17.7221 6.3079C17.9096 6.49543 18.015 6.74979 18.015 7.01501V17.015C18.015 17.2802 17.9096 17.5346 17.7221 17.7221C17.5346 17.9096 17.2802 18.015 17.015 18.015H7.01501C6.74979 18.015 6.49543 17.9096 6.3079 17.7221C6.12036 17.5346 6.01501 17.2802 6.01501 17.015V7.01501C6.01501 6.74979 6.12036 6.49543 6.3079 6.3079C6.49543 6.12036 6.74979 6.01501 7.01501 6.01501ZM16.005 8.005H8.005V16.005H16.005V8.005Z" fill="#8f9dc9"/>
+</svg>