brunomilitzer | 2494b34 | 2022-04-07 09:32:48 +0100 | [diff] [blame] | 1 | .. This work is licensed under a Creative Commons Attribution 4.0 International License. |
| 2 | |
| 3 | .. _clamp-policy-gui-label: |
| 4 | |
| 5 | TOSCA Policy GUI |
| 6 | ################ |
| 7 | |
| 8 | .. contents:: |
| 9 | :depth: 4 |
| 10 | |
| 11 | 1 - How to run the Front-End Gui |
| 12 | ================================ |
| 13 | This section describes how to run the front end on your local machine. |
| 14 | |
| 15 | **Prerequisite:** |
| 16 | |
| 17 | **Building and running CLAMP** |
| 18 | |
| 19 | see `Clamp ACM Smoke Tests <https://docs.onap.org/projects/onap-policy-parent/en/latest/development/devtools/clamp-smoke.html>`__ |
| 20 | |
| 21 | **Step 1:** Go to the clamp directory |
| 22 | |
| 23 | .. code-block:: bash |
| 24 | |
| 25 | cd /clamp/extra/bin-for-dev |
| 26 | |
| 27 | **Step 2:** Inside the clamp directory run |
| 28 | |
| 29 | .. code-block:: bash |
| 30 | |
| 31 | ./start-db.sh test |
| 32 | |
| 33 | **Step 3:** Check docker container id |
| 34 | |
| 35 | .. code-block:: bash |
| 36 | |
| 37 | docker ps |
| 38 | |
| 39 | **Step 4:** Log into docker container |
| 40 | |
| 41 | .. code-block:: bash |
| 42 | |
| 43 | docker exec -it 'container_id' bash |
| 44 | |
| 45 | **Step 5:** Go into mariadb shell |
| 46 | |
| 47 | .. code-block:: bash |
| 48 | |
| 49 | mysql -u root -p |
| 50 | |
| 51 | **Step 6:** Enter password |
| 52 | |
| 53 | strong_pitchou |
| 54 | |
| 55 | .. image:: images/01-gui.png |
| 56 | |
| 57 | **Step 7:** Go into cldsdb4 database |
| 58 | |
| 59 | .. code-block:: bash |
| 60 | |
| 61 | use cldsdb4; |
| 62 | |
| 63 | **Step 8:** Verify if there is data in the following table 'loop_templates' |
| 64 | |
| 65 | .. code-block:: bash |
| 66 | |
| 67 | select * from loop_templates; |
| 68 | |
| 69 | ** If for some reason the database is empty do the go to the '/docker-entrypoint-initdb.d/dump' directory |
| 70 | |
| 71 | .. code-block:: bash |
| 72 | |
| 73 | ./load-fake-data.sh |
| 74 | |
| 75 | **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 |
| 76 | |
| 77 | .. code-block:: bash |
| 78 | |
| 79 | ./start-emulator.sh |
| 80 | |
| 81 | **Step 10:** Verify if mariadb and the emulator is running |
| 82 | |
| 83 | .. code-block:: bash |
| 84 | |
| 85 | docker ps |
| 86 | |
| 87 | .. image:: images/02-gui.png |
| 88 | |
| 89 | **Step 11:** Start the backend service by running the command inside the /clamp/extra/bin-for-dev |
| 90 | |
| 91 | .. code-block:: bash |
| 92 | |
| 93 | ./start-backend.sh |
| 94 | |
| 95 | |
| 96 | .. _building-ui-label: |
| 97 | |
| 98 | 2 - Checking out and building the UI |
| 99 | ==================================== |
| 100 | |
brunomilitzer | 2494b34 | 2022-04-07 09:32:48 +0100 | [diff] [blame] | 101 | **Step 1:** Checkout the UI from the repo |
| 102 | |
| 103 | .. code-block:: bash |
| 104 | |
| 105 | git clone "https://gerrit.nordix.org/onap/policy/gui" |
| 106 | |
| 107 | **Step 2:** Change into the "gui" directory and run the following |
| 108 | |
| 109 | .. code-block:: bash |
| 110 | |
| 111 | mvn clean install |
| 112 | |
| 113 | **Step 3:** Go into the gui-clamp/ui-react directory and run the following |
| 114 | |
| 115 | .. code-block:: bash |
| 116 | |
| 117 | npm install |
| 118 | |
| 119 | **Step 4:** Start the front end UI |
| 120 | |
| 121 | .. code-block:: bash |
| 122 | |
| 123 | npm start --scripts-prepend-node-path |
| 124 | |
adheli.tavares | 2c54111 | 2022-04-20 11:48:55 +0100 | [diff] [blame] | 125 | *If you get the following error* |
brunomilitzer | 2494b34 | 2022-04-07 09:32:48 +0100 | [diff] [blame] | 126 | |
| 127 | .. image:: images/03-gui.png |
| 128 | |
adheli.tavares | 2c54111 | 2022-04-20 11:48:55 +0100 | [diff] [blame] | 129 | .. code-block:: bash |
| 130 | |
| 131 | gedit package.json |
| 132 | |
| 133 | Then change ``"version": "${project.version}",`` to ``"version": "2.1.1",`` |
| 134 | |
| 135 | Save and close, then delete the node_modules directory |
brunomilitzer | 2494b34 | 2022-04-07 09:32:48 +0100 | [diff] [blame] | 136 | |
| 137 | .. code-block:: bash |
| 138 | |
brunomilitzer | 2494b34 | 2022-04-07 09:32:48 +0100 | [diff] [blame] | 139 | rm -rf node_modules/ |
| 140 | |
adheli.tavares | 2c54111 | 2022-04-20 11:48:55 +0100 | [diff] [blame] | 141 | Then run again |
| 142 | |
| 143 | .. code-block:: bash |
brunomilitzer | 2494b34 | 2022-04-07 09:32:48 +0100 | [diff] [blame] | 144 | |
| 145 | npm install |
| 146 | |
| 147 | .. code-block:: bash |
| 148 | |
| 149 | npm start --scripts-prepend-node-path |
| 150 | |
| 151 | **Step 5:** Once the UI starts at localhost:3000 it will ask for credentials: |
| 152 | |
| 153 | Login: admin |
| 154 | Password: password |
| 155 | |
| 156 | 3 - How to Commission/Decommission the TOSCA Service Template |
| 157 | ============================================================= |
| 158 | |
| 159 | This section describes how to commission and decommission the Tosca Service Template |
| 160 | |
| 161 | ** Prerequisite: |
| 162 | |
adheli.tavares | 2c54111 | 2022-04-20 11:48:55 +0100 | [diff] [blame] | 163 | See :ref:`Policy GUI Prerequisites<clamp-policy-gui-label>` |
brunomilitzer | 2494b34 | 2022-04-07 09:32:48 +0100 | [diff] [blame] | 164 | |
| 165 | **Step 1:** From the Main Menu Click on TOSCA Automation Composition Dropdown |
| 166 | |
| 167 | .. image:: images/04-gui.png |
| 168 | |
| 169 | **Step 2:** From the Dropdown Menu Select Upload Automation Composition To Commissioning |
| 170 | |
| 171 | .. image:: images/05-gui.png |
| 172 | |
| 173 | **Step 3:** On the window Upload Tosca to Commissioning API Click on the input box that says 'Please Select a file' |
| 174 | |
| 175 | .. image:: images/06-gui.png |
| 176 | |
| 177 | **Step 4:** Once the yaml file is selected click on Upload Tosca Service Template |
| 178 | |
| 179 | .. image:: images/07-gui.png |
| 180 | |
| 181 | **Step 5:** After the upload there should have a message "Upload Success" in green |
| 182 | |
| 183 | .. image:: images/08-gui.png |
| 184 | |
| 185 | **Step 6:** To validate that the TOSCA Service Template has been commissioned click on Manage Commissioned Automation Composition Template |
| 186 | |
| 187 | .. image:: images/09-gui.png |
| 188 | |
| 189 | **Step 7:** In the View Tosca Template Window click on Pull Tosca Service Template |
| 190 | |
| 191 | .. image:: images/10-gui.png |
| 192 | |
| 193 | **Step 8:** Once the Tosca Service Template has been pulled there should be a json object rendered in the window |
| 194 | |
| 195 | .. image:: images/11-gui.png |
| 196 | |
| 197 | **Step 9:** Click on Close close the window |
| 198 | |
| 199 | **Step 10:** Click on Edit Automation Composition Properties |
| 200 | |
| 201 | .. image:: images/12-gui.png |
| 202 | |
| 203 | **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...' |
| 204 | |
| 205 | .. image:: images/13-gui.png |
| 206 | |
| 207 | **Step 12:** After saving the changes click on Commission and should have a Green message saying 'Commissioning Success' |
| 208 | |
| 209 | .. image:: images/14-gui.png |
| 210 | |
| 211 | **Step 13:** To Decommission the Tosca Service Follow Step 6 and 8 |
| 212 | |
| 213 | **Step 14:** Once the json objected is rendered in the window click on delete |
| 214 | |
| 215 | .. image:: images/11-gui.png |
| 216 | |
| 217 | **Step 14:** Once the json objected is rendered in the window click on delete |
| 218 | |
| 219 | .. image:: images/11-gui.png |
| 220 | |
| 221 | **Step 15:** If the delete is successful it should show a message "Delete Successful" |
| 222 | |
| 223 | .. image:: images/15-gui.png |
| 224 | |
| 225 | 4 - How to Save Instance Properties and Change The Order State |
| 226 | ============================================================== |
| 227 | |
| 228 | This section describes how to save the instance properties and change it's order state |
| 229 | |
| 230 | ** Prerequisite: |
| 231 | |
| 232 | see building-ui-label_ |
| 233 | |
| 234 | **Step 1:** Go to the participant http directory |
| 235 | |
| 236 | .. code-block:: bash |
| 237 | |
| 238 | cd /clamp/participant/participant-impl/participant-impl-http |
| 239 | |
| 240 | **Step 2:** Run he following command |
| 241 | |
| 242 | .. code-block:: bash |
| 243 | |
| 244 | mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8080 |
| 245 | |
| 246 | **Step 3:** Go to the participant kubernetes directory |
| 247 | |
| 248 | .. code-block:: bash |
| 249 | |
| 250 | cd /clamp/participant/participant-impl/participant-impl-kubernetes |
| 251 | |
| 252 | **Step 4:** Run he following command |
| 253 | |
| 254 | .. code-block:: bash |
| 255 | |
| 256 | mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8081 |
| 257 | |
| 258 | **Step 5:** Go to the participant policy directory |
| 259 | |
| 260 | .. code-block:: bash |
| 261 | |
| 262 | cd /clamp/participant/participant-impl/participant-impl-policy |
| 263 | |
| 264 | **Step 6:** Run he following command |
| 265 | |
| 266 | .. code-block:: bash |
| 267 | |
| 268 | mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8082 |
| 269 | |
| 270 | **Step 7:** From the Main Menu Click on Instantiation Management |
| 271 | |
| 272 | .. image:: images/16-gui.png |
| 273 | |
| 274 | **Step 8:** Once the window for Manage Instance is open click on Create Instance |
| 275 | |
| 276 | .. image:: images/17-gui.png |
| 277 | |
| 278 | **Step 9:** With the Window Create Instance Properties Insert a Name and change the appropriate properties and click save |
| 279 | |
| 280 | .. image:: images/18-gui.png |
| 281 | |
| 282 | **Step 10:** After clicking save it should come with a green message saying "Instantiation Properties Success" |
| 283 | |
| 284 | .. image:: images/19-gui.png |
| 285 | |
| 286 | **Step 11:** To delete an instance repeat Step 7 |
| 287 | |
| 288 | .. image:: images/16-gui.png |
| 289 | |
| 290 | **Step 12:** Once the window for Manage Instance is open click on Delete |
| 291 | |
| 292 | .. image:: images/20-gui.png |
| 293 | |
| 294 | * NOTE: The only way to delete the instance properties if the order state has to be UNINITIALISED |
| 295 | |
| 296 | **Step 13:** To change the state click on Change in Manage Instances Window |
| 297 | |
| 298 | .. image:: images/20-gui.png |
| 299 | |
| 300 | **Step 14:** After clicking Change there should have a drop down with specific different ordered states |
| 301 | |
| 302 | .. image:: images/21-gui.png |
| 303 | |
| 304 | **Step 15:** From UNINITIALISED the user can only select Passive Ordered State |
| 305 | |
| 306 | .. image:: images/22-gui.png |
| 307 | |
| 308 | **Step 16:** Click on Save and a Message in Green "Ordered State Change Success" |
| 309 | |
| 310 | .. image:: images/23-gui.png |
| 311 | |
adheli.tavares | 2c54111 | 2022-04-20 11:48:55 +0100 | [diff] [blame] | 312 | * NOTE: Can't change from Passive to Running in a local developer machine, can only change in the production environment |
| 313 | |
| 314 | End of document |