enh(platform): Use API to select metrics in virtual metrics configuration form 21.10.x

features/bootstrap/VirtualMetricHandleContext.php

@@ -24,7 +24,8 @@ public function iAddAVirtualMetric()
         $this->page = new MetricsConfigurationPage($this);
         $this->page->setProperties(array(
             'name' => $this->vmName,
-            'linked-host_services' => $this->host . ' - ' . $this->hostService
+            'linked-host_services' => $this->host . ' - ' . $this->hostService,
+            'known_metrics' => $this->functionRPN,
         ));
         $this->page->setProperties(array('function' => $this->functionRPN));
         $this->page->save();

www/include/views/componentTemplates/formComponentTemplate.ihtml

@@ -35,6 +35,9 @@
 				<td id="td_list_metrics" style="padding: 0px; border-width: 0px;">
 					&nbsp;<img src="./img/icons/arrow-left.png" class="ico-14" onclick="insertValueQuery()" />&nbsp;
 				</td>
+				<td id="td_list_metrics" style="padding: 0px; border-width: 0px;">
+					<select id="sl_list_metrics" class="metrics" size="1"></select>
+				</td>
 			{/if}
 		</tr></table></td>
 	</tr>

www/include/views/componentTemplates/formComponentTemplate.php

@@ -359,7 +359,7 @@ function insertValueQuery() {
             var e_input = document.Form.ds_name;
             var e_select = document.getElementById('sl_list_metrics');
             var sd_o = e_select.selectedIndex;
-            if (sd_o != 0) {
+            if (sd_o != -1) {
                 var chaineAj = '';
                 chaineAj = e_select.options[sd_o].text;
                 chaineAj = chaineAj.replace(/\s(\[[CV]DEF\]|)\s*$/, "");
@@ -431,7 +431,6 @@ function popup_color_picker(t,name)
 }
 $vdef = 0; /* don't list VDEF in metrics list */
 
-include_once('./include/views/graphs/common/makeJS_formMetricsList.php');
 if ($o === MODIFY_COMPONENT_TEMPLATE || $o === WATCH_COMPONENT_TEMPLATE) {
     $host_service_id = filter_var(
         $_POST['host_service_id'] ?? ($compo["host_id"] . '-' . $compo['service_id']),
@@ -446,9 +445,20 @@ function popup_color_picker(t,name)
 ?>
 
 <script type="text/javascript">
-    update_select_list('<?php echo $host_service_id;?>');
-
-    jQuery("#host_id").on('change', function () {
-        update_select_list(this.value);
+    jQuery(function () {
+        jQuery('#sl_list_metrics').centreonSelect2({
+            select2: {
+                ajax: {
+                    url: './api/internal.php?object=centreon_metric&action=ListOfMetricsByService'
+                },
+                placeholder: "List of known metrics",
+                containerCssClass: 'filter-select'
+            },
+            multiple: false,
+            allowClear: true,
+            additionnalFilters: {
+                id: '#host_id',
+            }
+        });
     });
 </script>