From 2494b34dacc9ba3f48182489c65d0cbec98f50f0 Mon Sep 17 00:00:00 2001 From: brunomilitzer Date: Thu, 7 Apr 2022 09:32:48 +0100 Subject: 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 --- docs/clamp/acm/clamp-gui/images/01-gui.png | Bin 0 -> 5199 bytes docs/clamp/acm/clamp-gui/images/02-gui.png | Bin 0 -> 25399 bytes docs/clamp/acm/clamp-gui/images/03-gui.png | Bin 0 -> 22009 bytes docs/clamp/acm/clamp-gui/images/04-gui.png | Bin 0 -> 3070 bytes docs/clamp/acm/clamp-gui/images/05-gui.png | Bin 0 -> 10977 bytes docs/clamp/acm/clamp-gui/images/06-gui.png | Bin 0 -> 13765 bytes docs/clamp/acm/clamp-gui/images/07-gui.png | Bin 0 -> 13484 bytes docs/clamp/acm/clamp-gui/images/08-gui.png | Bin 0 -> 21202 bytes docs/clamp/acm/clamp-gui/images/09-gui.png | Bin 0 -> 10824 bytes docs/clamp/acm/clamp-gui/images/10-gui.png | Bin 0 -> 8164 bytes docs/clamp/acm/clamp-gui/images/11-gui.png | Bin 0 -> 43677 bytes docs/clamp/acm/clamp-gui/images/12-gui.png | Bin 0 -> 10778 bytes docs/clamp/acm/clamp-gui/images/13-gui.png | Bin 0 -> 42355 bytes docs/clamp/acm/clamp-gui/images/14-gui.png | Bin 0 -> 51361 bytes docs/clamp/acm/clamp-gui/images/15-gui.png | Bin 0 -> 25049 bytes docs/clamp/acm/clamp-gui/images/16-gui.png | Bin 0 -> 10737 bytes docs/clamp/acm/clamp-gui/images/17-gui.png | Bin 0 -> 17073 bytes docs/clamp/acm/clamp-gui/images/18-gui.png | Bin 0 -> 52727 bytes docs/clamp/acm/clamp-gui/images/19-gui.png | Bin 0 -> 54033 bytes docs/clamp/acm/clamp-gui/images/20-gui.png | Bin 0 -> 22866 bytes docs/clamp/acm/clamp-gui/images/21-gui.png | Bin 0 -> 8935 bytes docs/clamp/acm/clamp-gui/images/22-gui.png | Bin 0 -> 7317 bytes docs/clamp/acm/clamp-gui/images/23-gui.png | Bin 0 -> 13755 bytes docs/clamp/acm/clamp-gui/policy-gui.rst | 317 +++++++++++++++++++++++++++++ 24 files changed, 317 insertions(+) create mode 100644 docs/clamp/acm/clamp-gui/images/01-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/02-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/03-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/04-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/05-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/06-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/07-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/08-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/09-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/10-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/11-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/12-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/13-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/14-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/15-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/16-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/17-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/18-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/19-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/20-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/21-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/22-gui.png create mode 100644 docs/clamp/acm/clamp-gui/images/23-gui.png create mode 100644 docs/clamp/acm/clamp-gui/policy-gui.rst (limited to 'docs/clamp/acm/clamp-gui') 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/01-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/02-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/03-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/04-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/05-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/06-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/07-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/08-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/09-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/10-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/11-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/12-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/13-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/14-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/15-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/16-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/17-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/18-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/19-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/20-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/21-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/22-gui.png differ 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 Binary files /dev/null and b/docs/clamp/acm/clamp-gui/images/23-gui.png differ 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 `__ + +**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 -- cgit 1.2.3-korg