m4.5 inprogress

content/modules/ROOT/nav.adoc

@@ -19,7 +19,9 @@
 * xref:m4/module-04.0.adoc[4. Accelerate Developer Inner-Loop]
 ** xref:m4/module-04.1.adoc[4.1 Introduction to Concepts]
 ** xref:m4/module-04.2.adoc[4.2 Platform Engineer Activity: Setup Software Templates]
-** xref:m4/module-04.3.adoc[4.3 Developer environment]
+** xref:m4/module-04.3.adoc[4.3 Developer Activity: Onboard Parasol API and Parasol Store service]
+** xref:m4/module-04.4.adoc[4.4 Platform Engineer Activity: Template to Setup Dev Environment]
+** xref:m4/module-04.4.adoc[4.4 Developer Activity: Work on feature-branch]
 
 
 * xref:m5/module-05.adoc[5. Setup Build, Test, & Deploy Outer-loop]

content/modules/ROOT/pages/login-developer.adoc

@@ -0,0 +1,25 @@
+=== Login as Developer
+* You will perform this activity as a Developer. 
+** Logout from https://backstage-backstage.{openshift_cluster_ingress_domain}[Developer Hub^, window="rhdh"]
++
+.Click to see how to logout
+[%collapsible]
+====
+** Navigate to the *Settings* side-menu of Developer Hub and click on th kebab menu in the *Profile* card
++
+image::common/rhdh-settings.png[Settings of {product_name_rhdh}]
+** Sign out of {product_name_rhdh} using the Settings screen as shown.
++
+image::common/rhdh-sign-out.png[Signing out of {product_name_rhdh}]
+====
+** Logout from  https://gitlab-gitlab.{openshift_cluster_ingress_domain}[Gitlab^, window="gitlab"]
++
+.Click to see how to logout
+[%collapsible]
+====
+** Click on the Profile icon, and Sign out from the dropdown.
++
+image::common/gitlab-sign-out.png[Signing out of {product_name_rhdh}]
+====
+
+* Login to {product_name_rhdh} and GitLab as `dev1/{common_password}`

content/modules/ROOT/pages/login-pe.adoc

@@ -0,0 +1,25 @@
+=== Login as Platform Engineer
+* You will perform this activity as a Platform Engineer. 
+** Logout from https://backstage-backstage.{openshift_cluster_ingress_domain}[Developer Hub^, window="rhdh"]
++
+.Click to see how to logout
+[%collapsible]
+====
+** Navigate to the *Settings* side-menu of Developer Hub and click on th kebab menu in the *Profile* card
++
+image::common/rhdh-settings.png[Settings of {product_name_rhdh}]
+** Sign out of {product_name_rhdh} using the Settings screen as shown.
++
+image::common/rhdh-sign-out.png[Signing out of {product_name_rhdh}]
+====
+** Logout from  https://gitlab-gitlab.{openshift_cluster_ingress_domain}[Gitlab^, window="gitlab"]
++
+.Click to see how to logout
+[%collapsible]
+====
+** Click on the Profile icon, and Sign out from the dropdown.
++
+image::common/gitlab-sign-out.png[Signing out of {product_name_rhdh}]
+====
+
+* Login to {product_name_rhdh} and GitLab as `pe1/{common_password}`

content/modules/ROOT/pages/m4/module-04.2.adoc

@@ -7,6 +7,8 @@ include::../style.adoc[]
 
 Platform Engineering team creates two templates for importing existing Apps/Services and APIs into Developer Hub. While it is possible to use the same template to import both of them, there are some key differences in data gathered. As best practice, Platform Engg team creates as many Software Templates as necessary to assist developers.
 
+include::../login-pe.adoc[]
+
 == Register the Import API/App Software Templates
 
 Since you have already learnt how to create a Software Template, we will walk through a template that has been built for you. 

content/modules/ROOT/pages/m4/module-04.3.adoc

@@ -1,27 +1,15 @@
 :imagesdir: ../../assets/images
 
 
-= Module 4.3: Developer Activity: Onboard Parasol API and Parasol Store service
+== Developer Activity: Innerloop
 
 include::../style.adoc[]
 
-* You will perform this activity as a Developer. Logout from https://backstage-backstage.{openshift_cluster_ingress_domain}[Developer Hub^, window="rhdh"]
-+
-.Click to see how to logout
-[%collapsible]
-====
-. Navigate to the *Settings* side-menu of Developer Hub and click on th kebab menu in the *Profile* card
-+
-image::./m3/rhdh-settings.png[Settings of {product_name_rhdh}]
-. Sign out of {product_name_rhdh} using the Settings screen as shown.
-+
-image::./m3/rhdh-sign-out.png[Signing out of {product_name_rhdh}]
-====
-* Login to {product_name_rhdh} as `dev1/{common_password}`. 
+include::../login-developer.adoc[]
 
 == Import parasol-store-api OpenAPI 
 
-* As a first step, we will import the API so that this API can then be associated with the parasol-store component .
+* As a first step, import the API so that this API can then be associated with the parasol-store component .
 * From the *Create* side-menu, click on the *Choose* button of `Import API to Existing Catalog Envelope` template.
 +
 image:m4/import-api-template.png[width=30%]
@@ -243,5 +231,6 @@ image:m4/parasol-store-argo.png[]
 == [Optional] Import `parasol-web`
 
 You can now optionally import the `parasol-web` component as well just like you imported `parasol-store`.
+
 * The org is `parasol`
 * Repo for parasol-web is `parasol-web`

content/modules/ROOT/pages/m4/module-04.4.adoc

@@ -1,120 +1,34 @@
 :imagesdir: ../../assets/images
 
 
-= Module 4.4: Setup Developer Environment
+== Platform Engineer Activity: Template to Setup Dev Environment
 
 include::../style.adoc[]
 
-A developer is assigned a JIRA to enhance the Parasol application, and they begin to work on the `parasol-store` application. To begin, they will create a branch of the `parasol-store` repo  on gitlab, and work on this _feature-branch_ till the time they are ready to merge their changes to the main branch. This will where the developer develops and tests all changes in an isolated dev environment in a continuous loop.
+When developers are assigned a JIRA/task/feature to enhance an application, they begin with a feature-branch on Git. Developers will continue to work on this _feature-branch_ till the time they are ready to merge their changes to the main branch. Creating an isolated dev environment for these developers to help in in a continuous inner-loop, helps to accelerate developer productivity. 
 
-So as to help the developer continue to work on the enhancement, the Platform Engineer creates a new S/W template that can setup an isolated dev environment for the Developer for this `parasol-store` application. The template performs a number of things
+The Platform Engineer creates a new S/W template that can setup an isolated dev environment for the Developers, who are in this case working on the  `parasol-store` application. The template performs a number of things:
 
-* Creates GitOps/Argo manifests within the user's repo
+* Creates a namespace within OpenShift for the developer
+* This  isolated dev environment connects to the *developer* DB instance running on OpenShift
 * Sets up a development pipelines to make development easy 
-* The  isolated dev environment connects to the *developer* DB instance 
+* Creates GitOps/Argo manifests within the user's repo
 
-With this, the Platform Engineers are able to provide an environment that allows the developer to just focus on coding. The templates make it easy for developers to set up isolated dev environments repeatedly in a self-service fashion.
+With this, the Platform Engineers are able to provide this environment that allows the developer to just focus on coding. The templates make it easy for developers to set up _isolated dev environments repeatedly in a self-service fashion_, thereby rapidly increased developer productivity.
 
 
-== Platform Engineer: Onboard parasol-store Dev Template
+include::../login-pe.adoc[]
 
-* To help developers to be able to accelerate development through RHDH, the PE creates a new template with  parasol-store-dev-template.
+== Create parasol-store Dev Template
 
-=== Create a branch 
-* On RHDH, choose *Create* menu on the left-hand, and choose *Register Existing Component*.
+* On Developer Hub, choose *Create* menu on the left-hand, and choose *Register Existing Component*.
 * Create a template by pasting this template URL into the *URL* textbox 
 +
 [source,bash,role=execute,subs="attributes"]
 ----
 https://gitlab-gitlab.{openshift_cluster_ingress_domain}/rhdh/parasol-store-dev-template/-/blob/main/template.yaml
 ----
 * Click on *Analyze* button followed by clicking the *Import* button to import the template.
-
-== App Developer: Onboard parasol-store Dev Template
-
-* Click here to access the repo https://gitlab-gitlab.{openshift_cluster_ingress_domain}/parasol/parasol-store
-* Click on the *(+)* button as shown in the screenshot below, and click on *New branch* menu
-+
-image:m4/create-branch.png[width=65%]
-
-* Name the branch as `my-feature-branch` so as to make it easier to follow the rest of the instructions
-+
-image:m4/create-branch-name.png[width=70%]
-
-=== Onboard the Feature Branch using template
-
-* In {product_name_rhdh}, choose the *Create* side-menu, and you will see the *Parasol Store Development* template. Click on *Choose*
-
-image:m4/choose-parasol-store-template.png[width=30%]
-
-* In *Step 1: Provide Information for the isolated dev environment deployment*
-** Enter the feature-branch name `my-feature-branch` or the name you have picked for your branch.
-
-image:m4/choose-parasol-store-template-step1.png[]
-
-* In *Step 2: Provide database information*
-** Keep all the fields as it is - no need to make changes. The parameters are already set based on the OpenShift Service names from the existing deployments of the application
-
-image:m4/choose-parasol-store-template-step2.png[]
-
-* Click on *Review*, and proceed to *Create*
-
-image:m4/choose-parasol-store-template-step3.png[]
-
-* Click on the *Open component on catalog* link
-
-image:m4/parasol-branch-component.png[]
-
-** You can see under the *CI* tab, a pipeline is already running 
-+
-image:m4/parasol-branch-first-pipeline.png[]
+* The Template will start appearing in the Create side-menu
 +
-and turns green when it finishes the run successfully
-+
-image:m4/parasol-branch-first-pipeline-success.png[]
-
-** Explore the other tabs to see how RHDH allows a single pane of glass for the Developers' isolated environment
-
-* If you are curious to view the deployment on OpenShift: https://console-openshift-console.{openshift_cluster_ingress_domain}/k8s/ns/parasol-store-my-feature-branch/apps%7Ev1%7EDeployment[click here^, window="_console"]
-
-image:m4/parasol-branch-deployment1.png[]
-
-
-=== Enhancing the application
-
-* Click on the *< > View Source* button on the Component Overview page to open the source repository
-+
-image:m4/parasol-branch-component-overview.png[]
-
-* Switch to the *my-feature-branch* 
-+
-image:m4/parasol-switchbranch.png[]
-
-* Click on the Web IDE of the *my-feature-branch* to access the code via the inbuilt editor
-+
-image:m4/parasol-webide.png[]
-
-* For the sake of the workshop, let us make some changes to the README file. +
-E.g. add this text to the README file `This service store provides the core services of Parasol web-app`
-
-* Click on the *Source Control* menu on the left-hand (highlighted below), add a Commit Message *Chore: Improved README file*, and click the *Commit and push to "my-feature-branch"* button
-+
-image:m4/parasol-webide-paste-commit.png[width=80%]
-* You can now close the gitlab browser.
-
-=== View component on RHDH
-* In RHDH, navigate to the `parasol-store` component. You can https://backstage-backstage.{openshift_cluster_ingress_domain}/catalog/default/component/parasol-store/ci[click here^, window="_rhdh"] to access it.
-*  Access the CI tab  to view the pipeline
-+
-image:m4/parasol-innerloop-pipeline1.png[width=80%]
-
-* Very shortly, the pipeline will be marked as *Succeeded*
-+
-image:m4/parasol-innerloop-pipeline-ok.png[width=80%]
-+
-NOTE: The first pipeline was triggered when you registered using the s.w template. and the next is by git commit
-
-* Once you are happy with the changes, you are now ready to create a merge request to the main branch.
-
-* This is the end of development within the isolated dev environment. In the next section, the developer will create merge request to the main branch, to initiate the outer loop
-
+image::./m4/parasol-store-dev-template-create.png[]

content/modules/ROOT/pages/m4/module-04.5.adoc

@@ -0,0 +1,95 @@
+:imagesdir: ../../assets/images
+
+== Developer Activity: Work on feature-branch
+include::../style.adoc[]
+
+include::../login-developer.adoc[]
+
+=== Create a feature-branch
+
+* Click here to access the repo https://gitlab-gitlab.{openshift_cluster_ingress_domain}/parasol/parasol-store
+* Click on the *(+)* button as shown in the screenshot below, and click on *New branch* menu
++
+image:m4/create-branch.png[width=65%]
+
+* Name the branch as `my-feature-branch` so as to make it easier to follow the rest of the instructions
++
+image:m4/create-branch-name.png[width=70%]
+
+=== Onboard the Feature Branch using template
+
+* In {product_name_rhdh}, choose the *Create* side-menu, and you will see the *Parasol Store Development* template. Click on *Choose*
+
+image:m4/choose-parasol-store-template.png[width=30%]
+
+* In *Step 1: Provide Information for the isolated dev environment deployment*
+** Enter the feature-branch name `my-feature-branch` or the name you have picked for your branch.
+
+image:m4/choose-parasol-store-template-step1.png[]
+
+* In *Step 2: Provide database information*
+** Keep all the fields as it is - no need to make changes. The parameters are already set based on the OpenShift Service names from the existing deployments of the application
+
+image:m4/choose-parasol-store-template-step2.png[]
+
+* Click on *Review*, and proceed to *Create*
+
+image:m4/choose-parasol-store-template-step3.png[]
+
+* Click on the *Open component on catalog* link
+
+image:m4/parasol-branch-component.png[]
+
+** You can see under the *CI* tab, a pipeline is already running 
++
+image:m4/parasol-branch-first-pipeline.png[]
++
+and turns green when it finishes the run successfully
++
+image:m4/parasol-branch-first-pipeline-success.png[]
+
+** Explore the other tabs to see how RHDH allows a single pane of glass for the Developers' isolated environment
+
+* If you are curious to view the deployment on OpenShift: https://console-openshift-console.{openshift_cluster_ingress_domain}/k8s/ns/parasol-store-my-feature-branch/apps%7Ev1%7EDeployment[click here^, window="_console"]
+
+image:m4/parasol-branch-deployment1.png[]
+
+
+=== Enhancing the application
+
+* Click on the *< > View Source* button on the Component Overview page to open the source repository
++
+image:m4/parasol-branch-component-overview.png[]
+
+* Switch to the *my-feature-branch* 
++
+image:m4/parasol-switchbranch.png[]
+
+* Click on the Web IDE of the *my-feature-branch* to access the code via the inbuilt editor
++
+image:m4/parasol-webide.png[]
+
+* For the sake of the workshop, let us make some changes to the README file. +
+E.g. add this text to the README file `This service store provides the core services of Parasol web-app`
+
+* Click on the *Source Control* menu on the left-hand (highlighted below), add a Commit Message *Chore: Improved README file*, and click the *Commit and push to "my-feature-branch"* button
++
+image:m4/parasol-webide-paste-commit.png[width=80%]
+* You can now close the gitlab browser.
+
+=== View component on RHDH
+* In RHDH, navigate to the `parasol-store` component. You can https://backstage-backstage.{openshift_cluster_ingress_domain}/catalog/default/component/parasol-store/ci[click here^, window="_rhdh"] to access it.
+*  Access the CI tab  to view the pipeline
++
+image:m4/parasol-innerloop-pipeline1.png[width=80%]
+
+* Very shortly, the pipeline will be marked as *Succeeded*
++
+image:m4/parasol-innerloop-pipeline-ok.png[width=80%]
++
+NOTE: The first pipeline was triggered when you registered using the s.w template. and the next is by git commit
+
+* Once you are happy with the changes, you are now ready to create a merge request to the main branch.
+
+* This is the end of development within the isolated dev environment. In the next section, the developer will create merge request to the main branch, to initiate the outer loop
+