Instructions how to run the front end gui

Including in this review is POLICY-3364 and POLICY-4083

Issue-ID: POLICY-4077
Change-Id: Ie0cef143d7ee5ad6a607aecac06cfe2dff9aa0ec
Signed-off-by: brunomilitzer <bruno.militzer@est.tech>

25 files changed, 319 insertions, 1 deletions

diff --git a/docs/clamp/acm/clamp-gui/images/01-gui.png b/docs/clamp/acm/clamp-gui/images/01-gui.png
new file mode 100644
index 00000000..74b13310
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/01-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/02-gui.png b/docs/clamp/acm/clamp-gui/images/02-gui.png
new file mode 100644
index 00000000..ba18a13a
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/02-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/03-gui.png b/docs/clamp/acm/clamp-gui/images/03-gui.png
new file mode 100644
index 00000000..c3716599
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/03-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/04-gui.png b/docs/clamp/acm/clamp-gui/images/04-gui.png
new file mode 100644
index 00000000..744d6e16
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/04-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/05-gui.png b/docs/clamp/acm/clamp-gui/images/05-gui.png
new file mode 100644
index 00000000..2eb1536d
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/05-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/06-gui.png b/docs/clamp/acm/clamp-gui/images/06-gui.png
new file mode 100644
index 00000000..d22b1a7e
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/06-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/07-gui.png b/docs/clamp/acm/clamp-gui/images/07-gui.png
new file mode 100644
index 00000000..df28fd5d
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/07-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/08-gui.png b/docs/clamp/acm/clamp-gui/images/08-gui.png
new file mode 100644
index 00000000..5be657b5
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/08-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/09-gui.png b/docs/clamp/acm/clamp-gui/images/09-gui.png
new file mode 100644
index 00000000..156e0f76
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/09-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/10-gui.png b/docs/clamp/acm/clamp-gui/images/10-gui.png
new file mode 100644
index 00000000..9cbcb96e
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/10-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/11-gui.png b/docs/clamp/acm/clamp-gui/images/11-gui.png
new file mode 100644
index 00000000..dc68ea52
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/11-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/12-gui.png b/docs/clamp/acm/clamp-gui/images/12-gui.png
new file mode 100644
index 00000000..548c6ba1
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/12-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/13-gui.png b/docs/clamp/acm/clamp-gui/images/13-gui.png
new file mode 100644
index 00000000..09b2dc07
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/13-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/14-gui.png b/docs/clamp/acm/clamp-gui/images/14-gui.png
new file mode 100644
index 00000000..28680efc
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/14-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/15-gui.png b/docs/clamp/acm/clamp-gui/images/15-gui.png
new file mode 100644
index 00000000..0d1c949b
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/15-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/16-gui.png b/docs/clamp/acm/clamp-gui/images/16-gui.png
new file mode 100644
index 00000000..829d790d
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/16-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/17-gui.png b/docs/clamp/acm/clamp-gui/images/17-gui.png
new file mode 100644
index 00000000..03d318d2
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/17-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/18-gui.png b/docs/clamp/acm/clamp-gui/images/18-gui.png
new file mode 100644
index 00000000..8e08ad68
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/18-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/19-gui.png b/docs/clamp/acm/clamp-gui/images/19-gui.png
new file mode 100644
index 00000000..494d37ce
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/19-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/20-gui.png b/docs/clamp/acm/clamp-gui/images/20-gui.png
new file mode 100644
index 00000000..4be441ed
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/20-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/21-gui.png b/docs/clamp/acm/clamp-gui/images/21-gui.png
new file mode 100644
index 00000000..2f49598e
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/21-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/22-gui.png b/docs/clamp/acm/clamp-gui/images/22-gui.png
new file mode 100644
index 00000000..9efe51a0
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/22-gui.png
diff --git a/docs/clamp/acm/clamp-gui/images/23-gui.png b/docs/clamp/acm/clamp-gui/images/23-gui.png
new file mode 100644
index 00000000..f258454a
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/images/23-gui.png
diff --git a/docs/clamp/acm/clamp-gui/policy-gui.rst b/docs/clamp/acm/clamp-gui/policy-gui.rst
new file mode 100644
index 00000000..bba52784
--- /dev/null
+++ b/docs/clamp/acm/clamp-gui/policy-gui.rst
@@ -0,0 +1,317 @@
+.. This work is licensed under a Creative Commons Attribution 4.0 International License.
+
+.. _clamp-policy-gui-label:
+
+TOSCA Policy GUI
+################
+
+.. contents::
+    :depth: 4
+
+1 - How to run the Front-End Gui
+================================
+This section describes how to run the front end on your local machine.
+
+**Prerequisite:**
+
+**Building and running CLAMP**
+
+see `Clamp ACM Smoke Tests <https://docs.onap.org/projects/onap-policy-parent/en/latest/development/devtools/clamp-smoke.html>`__
+
+**Step 1:** Go to the clamp directory
+
+.. code-block:: bash
+
+    cd /clamp/extra/bin-for-dev
+
+**Step 2:** Inside the clamp directory run
+
+.. code-block:: bash
+
+    ./start-db.sh test
+
+**Step 3:** Check docker container id
+
+.. code-block:: bash
+
+    docker ps
+
+**Step 4:** Log into docker container
+
+.. code-block:: bash
+
+    docker exec -it 'container_id' bash
+
+**Step 5:** Go into mariadb shell
+
+.. code-block:: bash
+
+    mysql -u root -p
+
+**Step 6:** Enter password
+
+    strong_pitchou
+
+.. image:: images/01-gui.png
+
+**Step 7:** Go into cldsdb4 database
+
+.. code-block:: bash
+
+    use cldsdb4;
+
+**Step 8:** Verify if there is data in the following table 'loop_templates'
+
+.. code-block:: bash
+
+    select * from loop_templates;
+
+** If for some reason the database is empty do the go to the '/docker-entrypoint-initdb.d/dump' directory
+
+.. code-block:: bash
+
+    ./load-fake-data.sh
+
+**Step 9:** Once the database is up and running need to start the clamp emulator, by running the following command inside the /clamp/extra/bin-for-dev
+
+.. code-block:: bash
+
+    ./start-emulator.sh
+
+**Step 10:** Verify if mariadb and the emulator is running
+
+.. code-block:: bash
+
+    docker ps
+
+.. image:: images/02-gui.png
+
+**Step 11:** Start the backend service by running the command inside the /clamp/extra/bin-for-dev
+
+.. code-block:: bash
+
+    ./start-backend.sh
+
+
+.. _building-ui-label:
+
+2 - Checking out and building the UI
+====================================
+
+.. _Building UI
+
+**Step 1:** Checkout the UI from the repo
+
+.. code-block:: bash
+
+    git clone "https://gerrit.nordix.org/onap/policy/gui"
+
+**Step 2:** Change into the "gui" directory and run the following
+
+.. code-block:: bash
+
+    mvn clean install
+
+**Step 3:** Go into the gui-clamp/ui-react directory and run the following
+
+.. code-block:: bash
+
+    npm install
+
+**Step 4:** Start the front end UI
+
+.. code-block:: bash
+
+    npm start --scripts-prepend-node-path
+
+** If you get the following error
+
+.. image:: images/03-gui.png
+
+    gedit package.json
+
+.. code-block:: bash
+
+   change the following
+   "version": "${project.version}",
+
+   to
+
+   "version": "2.1.1",
+
+    save and close
+
+    then delete the node_modules directory
+
+    rm -rf node_modules/
+
+    then run again
+
+    npm install
+
+.. code-block:: bash
+
+    npm start --scripts-prepend-node-path
+
+**Step 5:** Once the UI starts at localhost:3000 it will ask for credentials:
+
+    Login: admin
+    Password: password
+
+3 - How to Commission/Decommission the TOSCA Service Template
+=============================================================
+
+This section describes how to commission and decommission the Tosca Service Template
+
+** Prerequisite:
+
+see clamp-policy-gui-label_
+
+**Step 1:** From the Main Menu Click on TOSCA Automation Composition Dropdown
+
+.. image:: images/04-gui.png
+
+**Step 2:** From the Dropdown Menu Select Upload Automation Composition To Commissioning
+
+.. image:: images/05-gui.png
+
+**Step 3:** On the window Upload Tosca to Commissioning API Click on the input box that says 'Please Select a file'
+
+.. image:: images/06-gui.png
+
+**Step 4:** Once the yaml file is selected click on Upload Tosca Service Template
+
+.. image:: images/07-gui.png
+
+**Step 5:** After the upload there should have a message "Upload Success" in green
+
+.. image:: images/08-gui.png
+
+**Step 6:** To validate that the TOSCA Service Template has been commissioned click on Manage Commissioned Automation Composition Template
+
+.. image:: images/09-gui.png
+
+**Step 7:** In the View Tosca Template Window click on Pull Tosca Service Template
+
+.. image:: images/10-gui.png
+
+**Step 8:** Once the Tosca Service Template has been pulled there should be a json object rendered in the window
+
+.. image:: images/11-gui.png
+
+**Step 9:** Click on Close close the window
+
+**Step 10:** Click on Edit Automation Composition Properties
+
+.. image:: images/12-gui.png
+
+**Step 11:** In the Change ACM Common Properties change the appropriate properties and click on save and there should have a popup saying 'Changes Saved.  Commission When Ready...'
+
+.. image:: images/13-gui.png
+
+**Step 12:** After saving the changes click on Commission and should have a Green message saying 'Commissioning Success'
+
+.. image:: images/14-gui.png
+
+**Step 13:** To Decommission the Tosca Service Follow Step 6 and 8
+
+**Step 14:** Once the json objected is rendered in the window click on delete
+
+.. image:: images/11-gui.png
+
+**Step 14:** Once the json objected is rendered in the window click on delete
+
+.. image:: images/11-gui.png
+
+**Step 15:** If the delete is successful it should show a message "Delete Successful"
+
+.. image:: images/15-gui.png
+
+4 - How to Save Instance Properties and Change The Order State
+==============================================================
+
+This section describes how to save the instance properties and change it's order state
+
+** Prerequisite:
+
+see building-ui-label_
+
+**Step 1:** Go to the participant http directory
+
+.. code-block:: bash
+
+    cd /clamp/participant/participant-impl/participant-impl-http
+
+**Step 2:** Run he following command
+
+.. code-block:: bash
+
+    mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8080
+
+**Step 3:** Go to the participant kubernetes directory
+
+.. code-block:: bash
+
+    cd /clamp/participant/participant-impl/participant-impl-kubernetes
+
+**Step 4:** Run he following command
+
+.. code-block:: bash
+
+    mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8081
+
+**Step 5:** Go to the participant policy directory
+
+.. code-block:: bash
+
+    cd /clamp/participant/participant-impl/participant-impl-policy
+
+**Step 6:** Run he following command
+
+.. code-block:: bash
+
+    mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8082
+
+**Step 7:** From the Main Menu Click on Instantiation Management
+
+.. image:: images/16-gui.png
+
+**Step 8:** Once the window for Manage Instance is open click on Create Instance
+
+.. image:: images/17-gui.png
+
+**Step 9:** With the Window Create Instance Properties Insert a Name and change the appropriate properties and click save
+
+.. image:: images/18-gui.png
+
+**Step 10:** After clicking save it should come with a green message saying "Instantiation Properties Success"
+
+.. image:: images/19-gui.png
+
+**Step 11:** To delete an instance repeat Step 7
+
+.. image:: images/16-gui.png
+
+**Step 12:** Once the window for Manage Instance is open click on Delete
+
+.. image:: images/20-gui.png
+
+* NOTE: The only way to delete the instance properties if the order state has to be UNINITIALISED
+
+**Step 13:** To change the state click on Change in Manage Instances Window
+
+.. image:: images/20-gui.png
+
+**Step 14:** After clicking Change there should have a drop down with specific different ordered states
+
+.. image:: images/21-gui.png
+
+**Step 15:** From UNINITIALISED the user can only select Passive Ordered State
+
+.. image:: images/22-gui.png
+
+**Step 16:** Click on Save and a Message in Green "Ordered State Change Success"
+
+.. image:: images/23-gui.png
+
+* NOTE: Can't change from Passive to Running in a local developer machine, can only change in the production environment
\ No newline at end of file
diff --git a/docs/clamp/clamp.rst b/docs/clamp/clamp.rst
index dad86451..82bf1ebf 100644
--- a/docs/clamp/clamp.rst
+++ b/docs/clamp/clamp.rst
@@ -5,7 +5,7 @@
 CLAMP Metadata Automation Composition Management using TOSCA
 #############################################################
 
-CLAMP supports the definition, deployment, and life cycle management of automation compostion elements using Metadata
+CLAMP supports the definition, deployment, and life cycle management of automation composition elements using Metadata
 described in TOSCA.
 
 .. toctree::
@@ -14,6 +14,7 @@ described in TOSCA.
    acm/acm-architecture
    acm/defining-acms
    acm/api-protocol/api-protocol-tree
+   acm/clamp-gui/policy-gui
    acm/design-impl/design-impl
 
 .. note::