// Module included in the following assemblies:
//
// applications/application_life_cycle_management/odc-viewing-application-composition-using-topology-view.adoc

[id="odc-connecting-components_{context}"]
= Connecting components within an application and across applications

In addition to grouping multiple components within an application, you can also use the *Topology* view to connect components with each other. You can either use a binding connector or a visual one to connect components.

A binding connection between the components can be established only if the target node is an Operator-backed service. This is indicated by the *Create a binding connector* tool-tip which appears when you drag an arrow to such a target node. When an application is connected to a service using a binding connector a service binding request is created. Then, the Service Binding Operator controller uses an intermediate secret to inject the necessary binding data into the application deployment as environment variables. After the request is successful, the application is redeployed establishing an interaction between the connected components.

A visual connector establishes only a visual connection between the components, depicting an intent to connect. No interaction between the components is established. If the target node is not an Operator-backed service the *Create a visual connector* tool-tip is displayed when you drag an arrow to a target node.

== Creating a visual connection between components

You can depict an intent to connect application components using the visual connector.

This procedure walks through an example of creating a visual connection between a MongoDB service and a Node.js application.

.Prerequisites

* Ensure that you have created and deployed a Node.js application using the *Developer* perspective.
* Ensure that you have created and deployed a MongoDB service using the *Developer* perspective.

.Procedure

. Hover over the MongoDB service to see a dangling arrow on the node.
+
.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.

.Connecting multiple applications
image::odc_connecting_multiple_applications.png[]

== Creating a binding connection between components

[IMPORTANT]
====
Service Binding is a Technology Preview feature only. Technology Preview features are not supported with Red Hat production service level agreements (SLAs) and might not be functionally complete. Red Hat does not recommend using them in production. These features provide early access to upcoming product features, enabling customers to test functionality and provide feedback during the development process.

For more information about the support scope of Red Hat Technology Preview features, see https://access.redhat.com/support/offerings/techpreview/.
====

[NOTE]
====
Currently, a few specific Operators like the *etcd* and the *PostgresSQL Database* Operator's service instances are bindable.
====

You can establish a binding connection with Operator-backed components.

This procedure walks through an example of creating a binding connection between a PostgreSQL Database service and a Node.js application. To create a binding connection with a service that is backed by the PostgreSQL Database Operator, you must first add the Red Hat-provided PostgreSQL Database Operator to the *OperatorHub* using a `CatalogSource` resource, and then install the Operator.
The PostreSQL Database Operator then creates and manages the `Database` resource, which exposes the binding information in secrets, config maps, status, and spec attributes.

.Prerequisites
* Ensure that you have created and deployed a Node.js application using the *Developer* perspective.
* Ensure that you have installed the *Service Binding Operator* from OperatorHub.

.Procedure
. Create a `CatalogSource` resource that adds the PostgresSQL Database Operator provided by Red Hat to the *OperatorHub*.
.. In the *+Add* view, click the *YAML* option to see the *Import YAML* screen.
.. Add the following YAML file to apply the `CatalogSource` resource:
+
[source,yaml]
----
apiVersion: operators.coreos.com/v1alpha1
kind: CatalogSource
metadata:
    name: sample-db-operators
    namespace: openshift-marketplace
spec:
    sourceType: grpc
    image: quay.io/redhat-developer/sample-db-operators-olm:v1
    displayName: Sample DB OLM registry
    updateStrategy:
        registryPoll:
            interval: 30m
----
.. Click *Create* to create the `CatalogSource` resource in your cluster.
. Install the Red Hat-provided *PostgreSQL Database* Operator:
.. In the *Administrator* perspective of the console, navigate to *Operators -> OperatorHub*.
.. In the *Database* category, select the *PostgreSQL Database* Operator and install it.
. Create a database (DB) instance for the application:
.. Switch to the *Developer* perspective and ensure that you are in the appropriate project, for example, `test-project`.
.. In the *+Add* view, click the *YAML* option to see the *Import YAML* screen.
.. Add the service instance YAML in the editor and click *Create* to deploy the service. Following is an example of what the service YAML will look like:
+
[source,YAML]
----
apiVersion: postgresql.baiju.dev/v1alpha1
kind: Database
metadata:
 name: db-demo
spec:
 image: docker.io/postgres
 imageName: postgres
 dbName: db-demo
----
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 service binding request 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.
+
.Binding connector
image::odc-binding-connector.png[]
