Merge "Adding documentation for Prometheus metrics in Xacml-PDP."
[policy/parent.git] / docs / clamp / acm / clamp-gui / policy-gui.rst
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
101 .. _Building UI
102
103 **Step 1:** Checkout the UI from the repo
104
105 .. code-block:: bash
106
107     git clone "https://gerrit.nordix.org/onap/policy/gui"
108
109 **Step 2:** Change into the "gui" directory and run the following
110
111 .. code-block:: bash
112
113     mvn clean install
114
115 **Step 3:** Go into the gui-clamp/ui-react directory and run the following
116
117 .. code-block:: bash
118
119     npm install
120
121 **Step 4:** Start the front end UI
122
123 .. code-block:: bash
124
125     npm start --scripts-prepend-node-path
126
127 ** If you get the following error
128
129 .. image:: images/03-gui.png
130
131     gedit package.json
132
133 .. code-block:: bash
134
135    change the following
136    "version": "${project.version}",
137
138    to
139
140    "version": "2.1.1",
141
142     save and close
143
144     then delete the node_modules directory
145
146     rm -rf node_modules/
147
148     then run again
149
150     npm install
151
152 .. code-block:: bash
153
154     npm start --scripts-prepend-node-path
155
156 **Step 5:** Once the UI starts at localhost:3000 it will ask for credentials:
157
158     Login: admin
159     Password: password
160
161 3 - How to Commission/Decommission the TOSCA Service Template
162 =============================================================
163
164 This section describes how to commission and decommission the Tosca Service Template
165
166 ** Prerequisite:
167
168 see clamp-policy-gui-label_
169
170 **Step 1:** From the Main Menu Click on TOSCA Automation Composition Dropdown
171
172 .. image:: images/04-gui.png
173
174 **Step 2:** From the Dropdown Menu Select Upload Automation Composition To Commissioning
175
176 .. image:: images/05-gui.png
177
178 **Step 3:** On the window Upload Tosca to Commissioning API Click on the input box that says 'Please Select a file'
179
180 .. image:: images/06-gui.png
181
182 **Step 4:** Once the yaml file is selected click on Upload Tosca Service Template
183
184 .. image:: images/07-gui.png
185
186 **Step 5:** After the upload there should have a message "Upload Success" in green
187
188 .. image:: images/08-gui.png
189
190 **Step 6:** To validate that the TOSCA Service Template has been commissioned click on Manage Commissioned Automation Composition Template
191
192 .. image:: images/09-gui.png
193
194 **Step 7:** In the View Tosca Template Window click on Pull Tosca Service Template
195
196 .. image:: images/10-gui.png
197
198 **Step 8:** Once the Tosca Service Template has been pulled there should be a json object rendered in the window
199
200 .. image:: images/11-gui.png
201
202 **Step 9:** Click on Close close the window
203
204 **Step 10:** Click on Edit Automation Composition Properties
205
206 .. image:: images/12-gui.png
207
208 **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...'
209
210 .. image:: images/13-gui.png
211
212 **Step 12:** After saving the changes click on Commission and should have a Green message saying 'Commissioning Success'
213
214 .. image:: images/14-gui.png
215
216 **Step 13:** To Decommission the Tosca Service Follow Step 6 and 8
217
218 **Step 14:** Once the json objected is rendered in the window click on delete
219
220 .. image:: images/11-gui.png
221
222 **Step 14:** Once the json objected is rendered in the window click on delete
223
224 .. image:: images/11-gui.png
225
226 **Step 15:** If the delete is successful it should show a message "Delete Successful"
227
228 .. image:: images/15-gui.png
229
230 4 - How to Save Instance Properties and Change The Order State
231 ==============================================================
232
233 This section describes how to save the instance properties and change it's order state
234
235 ** Prerequisite:
236
237 see building-ui-label_
238
239 **Step 1:** Go to the participant http directory
240
241 .. code-block:: bash
242
243     cd /clamp/participant/participant-impl/participant-impl-http
244
245 **Step 2:** Run he following command
246
247 .. code-block:: bash
248
249     mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8080
250
251 **Step 3:** Go to the participant kubernetes directory
252
253 .. code-block:: bash
254
255     cd /clamp/participant/participant-impl/participant-impl-kubernetes
256
257 **Step 4:** Run he following command
258
259 .. code-block:: bash
260
261     mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8081
262
263 **Step 5:** Go to the participant policy directory
264
265 .. code-block:: bash
266
267     cd /clamp/participant/participant-impl/participant-impl-policy
268
269 **Step 6:** Run he following command
270
271 .. code-block:: bash
272
273     mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8082
274
275 **Step 7:** From the Main Menu Click on Instantiation Management
276
277 .. image:: images/16-gui.png
278
279 **Step 8:** Once the window for Manage Instance is open click on Create Instance
280
281 .. image:: images/17-gui.png
282
283 **Step 9:** With the Window Create Instance Properties Insert a Name and change the appropriate properties and click save
284
285 .. image:: images/18-gui.png
286
287 **Step 10:** After clicking save it should come with a green message saying "Instantiation Properties Success"
288
289 .. image:: images/19-gui.png
290
291 **Step 11:** To delete an instance repeat Step 7
292
293 .. image:: images/16-gui.png
294
295 **Step 12:** Once the window for Manage Instance is open click on Delete
296
297 .. image:: images/20-gui.png
298
299 * NOTE: The only way to delete the instance properties if the order state has to be UNINITIALISED
300
301 **Step 13:** To change the state click on Change in Manage Instances Window
302
303 .. image:: images/20-gui.png
304
305 **Step 14:** After clicking Change there should have a drop down with specific different ordered states
306
307 .. image:: images/21-gui.png
308
309 **Step 15:** From UNINITIALISED the user can only select Passive Ordered State
310
311 .. image:: images/22-gui.png
312
313 **Step 16:** Click on Save and a Message in Green "Ordered State Change Success"
314
315 .. image:: images/23-gui.png
316
317 * NOTE: Can't change from Passive to Running in a local developer machine, can only change in the production environment