Add Titles to all ODC Screenshots

nkakkar81 · nkakkar81 · commit b96aa5ce59d6 · 2020-07-01T10:37:24.000+05:30
diff --git a/applications/application_life_cycle_management/odc-creating-applications-using-developer-perspective.adoc b/applications/application_life_cycle_management/odc-creating-applications-using-developer-perspective.adoc
@@ -7,7 +7,8 @@ toc::[]
 
 The *Developer* perspective in the web console provides you the following options from the *Add* view to create applications and associated services and deploy them on {product-title}:
 
-image::odc_add_view.png[Add View]
+.Add view
+image::odc_add_view.png[]
 
 * *From Git*: Use this option to import an existing codebase in a Git repository to create, build, and deploy an application on {product-title}.
 * *Container Image*: Use existing images from an image stream or registry to deploy it on to {product-title}.
diff --git a/modules/odc-accessing-developer-perspective.adoc b/modules/odc-accessing-developer-perspective.adoc
@@ -14,7 +14,8 @@ You can access the *Developer* perspective from the web console as follows:
 . Log in to the {product-title} web console using your login credentials. The default view for the {product-title} web console is the *Administrator* perspective.
 . Use the perspective switcher to switch to the *Developer* perspective. The *Topology* view with a list of all the projects in your cluster is displayed.
 +
-image::odc_developer_perspective.png[Developer Perspective]
+.Developer perspective
+image::odc_developer_perspective.png[]
 +
 . Select an existing project from the list or use the *Project* drop-down list to create a new project.
 
diff --git a/modules/odc-connecting-components.adoc b/modules/odc-connecting-components.adoc
@@ -27,14 +27,16 @@ This procedure walks through an example of creating a visual connection between
 
 . Hover over the MongoDB service to see a dangling arrow on the node.
 +
-image::odc_connector.png[Connector]
+.Connector
+image::odc_connector.png[]
 
 . Click and drag the arrow towards the Node.js component to connect the MongoDB service with it.
 . Click on the MongoDB service to see the *Overview* Panel. In the *Annotations* section, click the edit icon to see the *Key = `app.openshift.io/connects-to`* and *Value = `[{"apiVersion":"apps.openshift.io/v1","kind":"DeploymentConfig","name":"nodejs-ex"}]`* annotation added to the service.
 
 Similarly you can create other applications and components and establish connections between them.
-+
-image::odc_connecting_multiple_applications.png[Connecting Multiple Applications]
+
+.Connecting multiple applications
+image::odc_connecting_multiple_applications.png[]
 
 == Creating a binding connection between components
 
@@ -108,4 +110,5 @@ A DB instance is now deployed in the *Topology* view.
 . In the *Topology* view, hover over the Node.js component to see a dangling arrow on the node.
 . Click and drag the arrow towards the *db-demo-postgresql* service to make a binding connection with the Node.js application. A `ServiceBindingRequest` is created and the *Service Binding Operator* controller injects the DB connection information into the application `Deployment` as environment variables. After the request is successful, the application is redeployed and the connection is established.
 +
-image::odc-binding-connector.png[Binding Connector]
+.Binding connector
+image::odc-binding-connector.png[]
diff --git a/modules/odc-creating-projects-using-developer-perspective.adoc b/modules/odc-creating-projects-using-developer-perspective.adoc
@@ -21,7 +21,8 @@ You can create a project using the *Developer* perspective, as follows:
 
 . Click the *Project* drop-down menu to see a list of all available projects. Select *Create Project*.
 +
-image::odc_create_project.png[Create Project]
+.Create project
+image::odc_create_project.png[]
 
 . In the *Create Project* dialog box, enter a unique name, such as `myproject`, in the *Name* field.
 . Optional: Add the *Display Name* and *Description* details for the project.
diff --git a/modules/odc-editing-application-configuration-using-developer-perspective.adoc b/modules/odc-editing-application-configuration-using-developer-perspective.adoc
@@ -19,7 +19,8 @@ Ensure that you have created an application using  the *From Git*, *Container Im
 
 . After you have created an application and it is displayed in the *Topology* view, right-click the application to see the edit options available.
 +
-image::odc_edit_app.png[Edit application]
+.Edit application
+image::odc_edit_app.png[]
 +
 . Click *Edit _application-name_* to see the *Add* workflow you used to create the application. The form is pre-populated with the values you had added while creating the application.
 . Edit the necessary values for the application.
@@ -31,4 +32,5 @@ You cannot edit the *Name* field in the *General* section, the CI/CD pipelines,
 +
 . Click *Save* to restart the build and deploy a new image.
 +
-image::odc_edit_redeploy.png[Edit and redeploy application]
+.Edit and redeploy application
+image::odc_edit_redeploy.png[]
diff --git a/modules/odc-grouping-multiple-components.adoc b/modules/odc-grouping-multiple-components.adoc
@@ -24,7 +24,8 @@ The following procedure adds a MongoDB database service to an existing applicati
 . To add the MongoDB service to the existing application group, select the *mongodb* Pod and drag it to the application; the MongoDB service is added to the existing application group.
 . Dragging a component and adding it to an application group automatically adds the required labels to the component. Click on the MongoDB service node to see the label `app.kubernetes.io/part-of=myapp` added to the *Labels* section in the *Overview* Panel.
 +
-image::odc_app_grouping_label.png[Application Grouping]
+.Application grouping
+image::odc_app_grouping_label.png[]
 
 Alternatively, you can also add the component to an application as follows:
 
diff --git a/modules/odc-importing-codebase-from-git-to-create-application.adoc b/modules/odc-importing-codebase-from-git-to-create-application.adoc
@@ -13,7 +13,8 @@ The following procedure walks you through the *From Git* option in the *Develope
 
 . In the *Add* view, click *From Git* to see the *Import from git* form.
 +
-image::odc_import_from_git.png[Import from Git]
+.Import from Git
+image::odc_import_from_git.png[]
 
 . In the *Git* section, enter the Git repository URL for the codebase you want to use to create an application. For example, enter the URL of this sample Node.js application `\https://github.com/sclorg/nodejs-ex`. The URL is then validated.
 . Optional: You can click *Show Advanced Git Options*  to add details such as:
diff --git a/modules/odc-installing-helm-charts.adoc b/modules/odc-installing-helm-charts.adoc
@@ -14,7 +14,8 @@ To create Helm releases from the Helm charts provided in the *Developer Catalog*
 . Select a chart and read the description, README, and other details about the chart.
 . Click *Install Helm Chart*.
 +
-image::odc_helm_chart_devcatalog.png[Helm charts in developer catalog]
+.Helm charts in developer catalog
+image::odc_helm_chart_devcatalog.png[]
 +
 . In the *Install Helm Chart* page:
 .. Enter a unique name for the release in the *Release Name* field.
diff --git a/modules/odc-monitoring-your-application-metrics.adoc b/modules/odc-monitoring-your-application-metrics.adoc
@@ -12,7 +12,8 @@ After you create applications in your project and deploy them, you can use the *
 . In the *Topology* view, click the application to see the application details in the right panel.
 . Click the *Monitoring* tab to see the warning events for the application; graphs for CPU, memory, and bandwidth usage; and all the events for the application.
 +
-image::odc_app_metrics.png[Monitoring application metrics]
+.Monitoring application metrics
+image::odc_app_metrics.png[]
 +
 .. Click any of the charts to go to the *Metrics* tab to see the detailed metrics for the application.
 .. Click *View monitoring dashboard* to see the monitoring dashboard for that application.
diff --git a/modules/odc-monitoring-your-project-metrics.adoc b/modules/odc-monitoring-your-project-metrics.adoc
@@ -13,7 +13,8 @@ After you create applications in your project and deploy them, you can use the *
 
 * Use the *Dashboard* tab to see graphs depicting the CPU, memory, and bandwidth consumption and network related information, such as the rate of transmitted and received packets and the rate of dropped packets.
 +
-image::odc_project_dashboard.png[Monitoring dashboard]
+.Monitoring dashboard
+image::odc_project_dashboard.png[]
 +
 Use the following options to see further details:
 
@@ -24,7 +25,8 @@ Use the following options to see further details:
 
 * Use the *Metrics* tab to query for the required project metric.
 +
-image::odc_project_metrics.png[Monitoring metrics]
+.Monitoring metrics
+image::odc_project_metrics.png[]
 +
 .. In the *Select Query* list, select an option to filter the required details for your project. The filtered metrics for all the application Pods in your project are displayed in the graph. The Pods in your project are also listed below.
 .. From the list of Pods, clear the colored square boxes to remove the metrics for specific Pods to further filter your query result.
@@ -34,7 +36,8 @@ image::odc_project_metrics.png[Monitoring metrics]
 
 * Use the *Events* tab to see the events for your project.
 +
-image::odc_project_events.png[Monitoring events]
+.Monitoring events
+image::odc_project_events.png[]
 +
 You can filter the displayed events using the following options:
 
diff --git a/modules/odc-providing-project-permissions-using-developer-perspective.adoc b/modules/odc-providing-project-permissions-using-developer-perspective.adoc
@@ -14,7 +14,8 @@ To add users to your project and provide *Admin*, *Edit*, or *View* access to th
 . In the *Project* page, select the *Project Access* tab.
 . Click *Add Access* to add a new row of permissions to the default ones.
 +
-image::odc_project_permissions.png[Project Permissions]
+.Project permissions
+image::odc_project_permissions.png[]
 . Enter the user name, click the *Select a role* drop-down list, and select an appropriate role.
 . Click *Save* to add the new permissions.
 
diff --git a/modules/odc-rolling-back-helm-release.adoc b/modules/odc-rolling-back-helm-release.adoc
@@ -16,6 +16,7 @@ To rollback a release using the *Helm* view:
 . In the *Helm Releases* page, click on the chart to see the details and resources for that release.
 . Go to the *Revision History* tab to see all the revisions for the chart.
 +
-image::odc_helm_revision_history.png[Helm revision history]
+.Helm revision history
+image::odc_helm_revision_history.png[]
 +
 . If required, you can further use the *Options* menu {kebab} adjoining a particular revision and select the revision to rollback to.
diff --git a/modules/odc-splitting-traffic-between-revisions-using-developer-perspective.adoc b/modules/odc-splitting-traffic-between-revisions-using-developer-perspective.adoc
@@ -15,7 +15,8 @@ To split traffic between multiple revisions of an application in the *Topology*
 . Click the serverless resource service, indicated by the quadrilateral, to see its overview in the side panel.
 . Click the *Resources* tab, to see a list of *Revisions* and *Routes* for the service.
 +
-image::odc-serverless-app.png[Serverless Application]
+.Serverless application
+image::odc-serverless-app.png[]
 
 . Click the service, indicated by the *S* icon at the top of the side panel, to see an overview of the service details.
 . Click the *YAML* tab and modify the service configuration in the YAML editor, and click *Save*. For example, change the `timeoutseconds` from 300 to 301 . This change in the configuration triggers a new revision. In the *Topology* view, the latest revision is displayed and the *Resources* tab for the service now displays the two revisions.
@@ -24,4 +25,5 @@ image::odc-serverless-app.png[Serverless Application]
 .. Add tags to create custom URLs for the two revisions.
 .. Click *Save* to see two nodes representing the two revisions in the Topology view.
 +
-image::odc-serverless-revisions.png[Serverless Application Revisions]
+.Serverless application revisions
+image::odc-serverless-revisions.png[]
diff --git a/modules/odc-starting-recreate-deployment.adoc b/modules/odc-starting-recreate-deployment.adoc
@@ -20,4 +20,5 @@ To switch to a Recreate update strategy and to upgrade an application:
 . In the *Topology* view, select the node to see the *Overview* tab in the side panel. The *Update Strategy* is now set to *Recreate*.
 . Use the *Actions* drop-down menu to select *Start Rollout* to start an update using the Recreate strategy. The Recreate strategy first terminates Pods for the older version of the application and then spins up Pods for the new version.
 +
-image::odc-recreate-update.png[Recreate Update]
+.Recreate update
+image::odc-recreate-update.png[]
diff --git a/modules/odc-starting-rolling-deployment.adoc b/modules/odc-starting-rolling-deployment.adoc
@@ -16,4 +16,5 @@ To start a rolling deployment to upgrade an application:
 . In the *Topology* view of the *Developer* perspective, click on the application node to see the *Overview* tab in the side panel. Note that the *Update Strategy* is set to the default *Rolling* strategy.
 . In the *Actions* drop-down menu, select *Start Rollout* to start a rolling update. The rolling deployment spins up the new version of the application and then terminates the old one.
 +
-image::odc-rolling-update.png[Rolling Update]
+.Rolling update
+image::odc-rolling-update.png[]
diff --git a/modules/odc-viewing-application-topology.adoc b/modules/odc-viewing-application-topology.adoc
@@ -19,7 +19,8 @@ For more information about pod status, see the link:https://kubernetes.io/docs/c
 
 After you create an application and an image is deployed, the status is shown as *Pending*. After the application is built, it is displayed as *Running*.
 
-image::odc_application_topology.png[Application Topology]
+.Application topology
+image::odc_application_topology.png[]
 
 The application resource name is appended with indicators for the different types of resource objects as follows:
 

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,8 @@ You can access the Developer perspective from the web console as follows:`
`14`	`14`	`. Log in to the {product-title} web console using your login credentials. The default view for the {product-title} web console is the Administrator perspective.`
`15`	`15`	`. Use the perspective switcher to switch to the Developer perspective. The Topology view with a list of all the projects in your cluster is displayed.`
`16`	`16`	`+`
`17`		`-image::odc_developer_perspective.png[Developer Perspective]`
	`17`	`+.Developer perspective`
	`18`	`+image::odc_developer_perspective.png[]`
`18`	`19`	`+`
`19`	`20`	`. Select an existing project from the list or use the Project drop-down list to create a new project.`
`20`	`21`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,8 @@ You can create a project using the Developer perspective, as follows:`
`21`	`21`
`22`	`22`	`. Click the Project drop-down menu to see a list of all available projects. Select Create Project.`
`23`	`23`	`+`
`24`		`-image::odc_create_project.png[Create Project]`
	`24`	`+.Create project`
	`25`	`+image::odc_create_project.png[]`
`25`	`26`
`26`	`27`	. In the Create Project dialog box, enter a unique name, such as `myproject`, in the Name field.
`27`	`28`	`. Optional: Add the Display Name and Description details for the project.`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,8 @@ Ensure that you have created an application using the From Git, *Container Im`
`19`	`19`
`20`	`20`	`. After you have created an application and it is displayed in the Topology view, right-click the application to see the edit options available.`
`21`	`21`	`+`
`22`		`-image::odc_edit_app.png[Edit application]`
	`22`	`+.Edit application`
	`23`	`+image::odc_edit_app.png[]`
`23`	`24`	`+`
`24`	`25`	`. Click Edit _application-name_ to see the Add workflow you used to create the application. The form is pre-populated with the values you had added while creating the application.`
`25`	`26`	`. Edit the necessary values for the application.`
`@@ -31,4 +32,5 @@ You cannot edit the Name field in the General section, the CI/CD pipelines,`
`31`	`32`	`+`
`32`	`33`	`. Click Save to restart the build and deploy a new image.`
`33`	`34`	`+`
`34`		`-image::odc_edit_redeploy.png[Edit and redeploy application]`
	`35`	`+.Edit and redeploy application`
	`36`	`+image::odc_edit_redeploy.png[]`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,8 @@ The following procedure adds a MongoDB database service to an existing applicati`
`24`	`24`	`. To add the MongoDB service to the existing application group, select the mongodb Pod and drag it to the application; the MongoDB service is added to the existing application group.`
`25`	`25`	. Dragging a component and adding it to an application group automatically adds the required labels to the component. Click on the MongoDB service node to see the label `app.kubernetes.io/part-of=myapp` added to the Labels section in the Overview Panel.
`26`	`26`	`+`
`27`		`-image::odc_app_grouping_label.png[Application Grouping]`
	`27`	`+.Application grouping`
	`28`	`+image::odc_app_grouping_label.png[]`
`28`	`29`
`29`	`30`	`Alternatively, you can also add the component to an application as follows:`
`30`	`31`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,8 @@ The following procedure walks you through the From Git option in the *Develope`
`13`	`13`
`14`	`14`	`. In the Add view, click From Git to see the Import from git form.`
`15`	`15`	`+`
`16`		`-image::odc_import_from_git.png[Import from Git]`
	`16`	`+.Import from Git`
	`17`	`+image::odc_import_from_git.png[]`
`17`	`18`
`18`	`19`	. In the Git section, enter the Git repository URL for the codebase you want to use to create an application. For example, enter the URL of this sample Node.js application `\https://github.com/sclorg/nodejs-ex`. The URL is then validated.
`19`	`20`	`. Optional: You can click Show Advanced Git Options to add details such as:`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,8 @@ To create Helm releases from the Helm charts provided in the Developer Catalog`
`14`	`14`	`. Select a chart and read the description, README, and other details about the chart.`
`15`	`15`	`. Click Install Helm Chart.`
`16`	`16`	`+`
`17`		`-image::odc_helm_chart_devcatalog.png[Helm charts in developer catalog]`
	`17`	`+.Helm charts in developer catalog`
	`18`	`+image::odc_helm_chart_devcatalog.png[]`
`18`	`19`	`+`
`19`	`20`	`. In the Install Helm Chart page:`
`20`	`21`	`.. Enter a unique name for the release in the Release Name field.`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,8 @@ After you create applications in your project and deploy them, you can use the *`
`12`	`12`	`. In the Topology view, click the application to see the application details in the right panel.`
`13`	`13`	`. Click the Monitoring tab to see the warning events for the application; graphs for CPU, memory, and bandwidth usage; and all the events for the application.`
`14`	`14`	`+`
`15`		`-image::odc_app_metrics.png[Monitoring application metrics]`
	`15`	`+.Monitoring application metrics`
	`16`	`+image::odc_app_metrics.png[]`
`16`	`17`	`+`
`17`	`18`	`.. Click any of the charts to go to the Metrics tab to see the detailed metrics for the application.`
`18`	`19`	`.. Click View monitoring dashboard to see the monitoring dashboard for that application.`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,8 @@ After you create applications in your project and deploy them, you can use the *`
`13`	`13`
`14`	`14`	`* Use the Dashboard tab to see graphs depicting the CPU, memory, and bandwidth consumption and network related information, such as the rate of transmitted and received packets and the rate of dropped packets.`
`15`	`15`	`+`
`16`		`-image::odc_project_dashboard.png[Monitoring dashboard]`
	`16`	`+.Monitoring dashboard`
	`17`	`+image::odc_project_dashboard.png[]`
`17`	`18`	`+`
`18`	`19`	`Use the following options to see further details:`
`19`	`20`
`@@ -24,7 +25,8 @@ Use the following options to see further details:`
`24`	`25`
`25`	`26`	`* Use the Metrics tab to query for the required project metric.`
`26`	`27`	`+`
`27`		`-image::odc_project_metrics.png[Monitoring metrics]`
	`28`	`+.Monitoring metrics`
	`29`	`+image::odc_project_metrics.png[]`
`28`	`30`	`+`
`29`	`31`	`.. In the Select Query list, select an option to filter the required details for your project. The filtered metrics for all the application Pods in your project are displayed in the graph. The Pods in your project are also listed below.`
`30`	`32`	`.. From the list of Pods, clear the colored square boxes to remove the metrics for specific Pods to further filter your query result.`
`@@ -34,7 +36,8 @@ image::odc_project_metrics.png[Monitoring metrics]`
`34`	`36`
`35`	`37`	`* Use the Events tab to see the events for your project.`
`36`	`38`	`+`
`37`		`-image::odc_project_events.png[Monitoring events]`
	`39`	`+.Monitoring events`
	`40`	`+image::odc_project_events.png[]`
`38`	`41`	`+`
`39`	`42`	`You can filter the displayed events using the following options:`
`40`	`43`