feat(pci): add tracking in sidebar and on step form submission

marie-j · jleveugle · commit 68537ede00c2 · 2019-05-16T11:02:39.000+02:00
diff --git a/packages/manager/apps/public-cloud/src/index.controller.js b/packages/manager/apps/public-cloud/src/index.controller.js
@@ -13,6 +13,7 @@ export default class PublicCloudController {
     $timeout,
     $translate,
     $window,
+    atInternet,
     CloudSidebar,
     ovhUserPref,
     WalkMe,
@@ -22,6 +23,7 @@ export default class PublicCloudController {
     this.$timeout = $timeout;
     this.$translate = $translate;
     this.$window = $window;
+    this.atInternet = atInternet;
     this.CloudSidebar = CloudSidebar;
     this.feedbackUrl = __FEEDBACK_URL__;
     this.feedback = feedback;
@@ -34,6 +36,13 @@ export default class PublicCloudController {
       this.startWalkMe();
     }));
 
+    $scope.$on('oui-step-form.submit', (event, { form }) => {
+      this.atInternet.trackClick({
+        name: form.$name,
+        type: 'action',
+      });
+    });
+
     // this.ovhUserPref.getValue(KEY)
     //   .then(({ value }) => {
     //     this.shouldShowWalkMe = value;
diff --git a/packages/manager/modules/pci/src/projects/project/instances/add/add.html b/packages/manager/modules/pci/src/projects/project/instances/add/add.html
@@ -8,6 +8,7 @@ <h1 data-translate="pci_projects_project_instances_add_title"></h1>
 
     <oui-step-form
         id="flavor"
+        name="instances_add_flavor"
         data-header="{{:: 'pci_projects_project_instances_add_flavor_title' | translate }}"
         data-valid="$ctrl.model.flavorGroup"
         data-editable="!$ctrl.isLoading"
@@ -22,6 +23,7 @@ <h1 data-translate="pci_projects_project_instances_add_title"></h1>
     </oui-step-form>
 
     <oui-step-form
+        name="instances_add_region"
         data-header="{{:: 'pci_projects_project_instances_add_region_title' | translate }}"
         data-valid="$ctrl.model.datacenter"
         data-navigation="$ctrl.model.datacenter"
@@ -108,12 +110,14 @@ <h1 data-translate="pci_projects_project_instances_add_title"></h1>
     </oui-step-form>
 
     <oui-step-form
+        name="instances_add_image"
         data-header="{{:: 'pci_projects_project_instances_add_image_title' | translate }}"
         data-valid="$ctrl.model.image"
         data-editable="!$ctrl.isLoading"
         data-on-focus="$ctrl.onImageFocus()"
         data-on-submit="$ctrl.onImageChange()"
-        data-navigation="$ctrl.showImageNavigation()">
+        data-navigation="$ctrl.showImageNavigation()"
+        >
         <pci-project-images-list
             data-display-selected-image="$ctrl.displaySelectedImage"
             data-flavor-type="$ctrl.model.flavorGroup.name"
@@ -139,7 +143,8 @@ <h1 data-translate="pci_projects_project_instances_add_title"></h1>
         data-header="{{ :: 'pci_projects_project_instances_add_instance_title' | translate }}"
         data-on-focus="$ctrl.onInstanceFocus()"
         data-on-submit="$ctrl.onInstanceChange()"
-        data-editable="!$ctrl.isLoading">
+        data-editable="!$ctrl.isLoading"
+        name="instances_add_configuration">
         <oui-field data-label="{{ 'pci_projects_project_instances_add_numInstances_label' | translate }}"
             data-label-popover="{{ 'pci_projects_project_instances_add_same_numInstances_configuration' | translate }}">
             <oui-numeric id="modelNumber"
@@ -220,7 +225,8 @@ <h1 data-translate="pci_projects_project_instances_add_title"></h1>
         data-submit-text="{{ :: 'pci_projects_project_instances_add_submit_label' | translate }}"
         data-cancel-text="{{ :: 'pci_projects_project_instances_add_cancel_label' | translate }}"
         data-cancel-href="{{$ctrl.cancelLink}}"
-        data-editable="!$ctrl.isLoading">
+        data-editable="!$ctrl.isLoading"
+        name="instances_add_billing">
         <p>
             <span data-translate="pci_projects_project_instances_add_billing_montly_discount_message"></span>
             <span class="d-inline-block"
diff --git a/packages/manager/modules/pci/src/projects/project/kubernetes/add/add.html b/packages/manager/modules/pci/src/projects/project/kubernetes/add/add.html
@@ -8,7 +8,8 @@ <h1 data-translate="kubernetes_add"></h1>
         data-editable="!$ctrl.isAdding"
         data-valid="$ctrl.cluster.region"
         data-on-focus="$ctrl.displaySelectedRegion = false"
-        data-on-submit="$ctrl.displaySelectedRegion = true">
+        data-on-submit="$ctrl.displaySelectedRegion = true"
+        name="kubernetes_add_region">
         <pci-project-regions-list
             data-regions="$ctrl.regions"
             data-selected-region="$ctrl.cluster.region"
@@ -19,7 +20,8 @@ <h1 data-translate="kubernetes_add"></h1>
         data-editable="!$ctrl.isAdding"
         data-valid="$ctrl.cluster.version"
         data-on-focus="$ctrl.displaySelectedVersion = false"
-        data-on-submit="$ctrl.displaySelectedVersion = true">
+        data-on-submit="$ctrl.displaySelectedVersion = true"
+        name="kubernetes_add_version">
         <pci-project-versions-list
             data-versions="$ctrl.versions"
             data-selected-version="$ctrl.cluster.version"
@@ -30,7 +32,8 @@ <h1 data-translate="kubernetes_add"></h1>
         data-header="{{:: 'kubernetes_add_name_title' | translate }}"
         data-editable="!$ctrl.isAdding"
         data-valid="$ctrl.cluster.name"
-        data-on-submit="$ctrl.create()">
+        data-on-submit="$ctrl.create()"
+        name="kubernetes_add_name">
         <oui-field
             data-size="m"
             data-label="{{:: 'kubernetes_add_name' | translate }}">
diff --git a/packages/manager/modules/pci/src/projects/project/private-networks/add/add.html b/packages/manager/modules/pci/src/projects/project/private-networks/add/add.html
@@ -10,7 +10,8 @@
             data-header="{{:: 'pci_projects_project_network_private_create_configure' | translate}}"
             data-loading="$ctrl.loaders.isInitiating"
             data-editable="!$ctrl.loaders.isSubmitting"
-            data-valid="$ctrl.isVlanAvailable($ctrl.configuration.vlanId)">
+            data-valid="$ctrl.isVlanAvailable($ctrl.configuration.vlanId)"
+            name="private_network_add_configuration">
             <div class="d-flex flex-wrap flex-md-nowrap align-items-center">
                 <oui-field
                     data-label="{{:: 'pci_projects_project_network_private_create_configure_address' | translate }}"
@@ -81,7 +82,8 @@
         </oui-step-form>
         <oui-step-form
             data-header="{{:: 'pci_projects_project_network_private_create_localisation' | translate }}"
-            data-editable="!$ctrl.loaders.isSubmitting">
+            data-editable="!$ctrl.loaders.isSubmitting"
+            name="private_network_add_region">
             <div class="row">
                 <div class="oui-select-picker col-sm-6 col-md-4 mb-2"
                      data-ng-repeat="subnet in $ctrl.subnets | orderBy : 'region' track by subnet.region"
@@ -122,7 +124,8 @@
         <oui-step-form
             data-header="{{:: 'pci_projects_project_network_private_create_name_step' | translate }}"
             data-editable="!$ctrl.loaders.isSubmitting"
-            data-on-submit="$ctrl.createNetwork()">
+            data-on-submit="$ctrl.createNetwork()"
+            name="private_network_add_name">
             <oui-field
                 data-label="{{:: 'pci_projects_project_network_private_create_name' | translate }}"
                 data-size="xl">
diff --git a/packages/manager/modules/pci/src/projects/project/sidebar/index.js b/packages/manager/modules/pci/src/projects/project/sidebar/index.js
@@ -1,4 +1,5 @@
 import angular from 'angular';
+import '@ovh-ux/ng-at-internet';
 
 import template from './sidebar.html';
 import controller from './sidebar.controller';
@@ -10,6 +11,7 @@ const moduleName = 'ovh-manager-sidebar';
 
 angular
   .module(moduleName, [
+    'ngAtInternet',
   ])
   .component('cloudSidebar', {
     template,
diff --git a/packages/manager/modules/pci/src/projects/project/sidebar/sidebar.controller.js b/packages/manager/modules/pci/src/projects/project/sidebar/sidebar.controller.js
@@ -73,6 +73,7 @@ export default class SidebarController {
   onMenuItemClick({ id }) {
     this.atInternet.trackClick({
       name: `public-cloud_menu_${id}`,
+      type: 'action',
     });
   }
 }
diff --git a/packages/manager/modules/pci/src/projects/project/storages/blocks/add/add.html b/packages/manager/modules/pci/src/projects/project/storages/blocks/add/add.html
@@ -12,7 +12,8 @@ <h1 data-translate="pci_projects_project_storages_blocks_add_title"></h1>
             data-submit-text="{{:: 'pci_projects_project_storages_blocks_add_submit_label' | translate }}"
             data-on-focus="$ctrl.onRegionsFocus()"
             data-on-submit="$ctrl.onRegionChange()"
-            data-editable="!$ctrl.loadings.save">
+            data-editable="!$ctrl.loadings.save"
+            name="block_storage_add_region">
             <pci-project-regions-list
                 data-regions="$ctrl.regions"
                 data-selected-region="$ctrl.storage.region"
@@ -23,7 +24,8 @@ <h1 data-translate="pci_projects_project_storages_blocks_add_title"></h1>
             data-on-focus="$ctrl.onTypesFocus()"
             data-on-submit="$ctrl.onTypeChange()"
             data-navigation="$ctrl.selectedType"
-            data-editable="!$ctrl.loadings.save">
+            data-editable="!$ctrl.loadings.save"
+            name="block_storage_add_type">
             <div class="container-fluid px-0"
                 data-ng-if="$ctrl.typeRegionPrices">
                 <div class="row">
@@ -47,7 +49,8 @@ <h1 data-translate="pci_projects_project_storages_blocks_add_title"></h1>
 
         <oui-step-form data-header="{{:: 'pci_projects_project_storages_blocks_add_size_title' | translate }}"
             data-loading="$ctrl.loadings.size"
-            data-editable="!$ctrl.loadings.save">
+            data-editable="!$ctrl.loadings.save"
+            name="block_storage_add_size">
             <oui-field data-size="xl" data-help-text="{{:: 'pci_projects_project_storages_blocks_add_size_help' | translate }}">
                 <div class="d-inline-block">
                     <oui-numeric
@@ -63,11 +66,11 @@ <h1 data-translate="pci_projects_project_storages_blocks_add_title"></h1>
                 <p data-translate="pci_projects_project_storages_blocks_add_submit_price_text"
                     data-translate-values="{ price: $ctrl.estimatedPrice.monthly.text }"></p>
             </oui-field>
-
         </oui-step-form>
 
         <oui-step-form data-header="{{:: 'pci_projects_project_storages_blocks_add_name_title' | translate }}"
-            data-editable="!$ctrl.loadings.save">
+            data-editable="!$ctrl.loadings.save"
+            name="block_storage_add_name">
             <oui-field data-size="xl">
                 <input class="oui-input" type="text" name="name"
                     data-ng-model="$ctrl.storage.name"
@@ -79,7 +82,9 @@ <h1 data-translate="pci_projects_project_storages_blocks_add_title"></h1>
             data-submit-text="{{:: 'pci_projects_project_storages_blocks_add_submit_label' | translate }}"
             data-cancel-text="{{:: 'pci_projects_project_storages_blocks_add_submit_cancel_label' | translate }}"
             data-cancel-href="{{$ctrl.cancelLink}}"
-            data-editable="!$ctrl.loadings.save">
+            data-editable="!$ctrl.loadings.save"
+            name="block_storage_add_confirm"
+            >
             <div class="mb-3"
                 data-translate="pci_projects_project_storages_blocks_add_submit_price_text"
                 data-translate-values="{ price: $ctrl.estimatedPrice.monthly.text }"></div>
diff --git a/packages/manager/modules/pci/src/projects/project/storages/containers/add/add.html b/packages/manager/modules/pci/src/projects/project/storages/containers/add/add.html
@@ -9,7 +9,8 @@ <h1 data-translate="pci_projects_project_storages_containers_add_title"></h1>
         data-navigation="$ctrl.container.region"
         data-on-focus="$ctrl.onRegionsFocus()"
         data-on-submit="$ctrl.onRegionChange()"
-        data-editable="!$ctrl.isLoading">
+        data-editable="!$ctrl.isLoading"
+        name="storage_container_add_region">
         <pci-project-regions-list
             data-regions="$ctrl.regions"
             data-selected-region="$ctrl.container.region"
@@ -23,7 +24,8 @@ <h1 data-translate="pci_projects_project_storages_containers_add_title"></h1>
         data-on-focus="$ctrl.onTypesFocus()"
         data-on-submit="$ctrl.onTypeChange()"
         data-navigation="$ctrl.selectedType"
-        data-editable="!$ctrl.isLoading">
+        data-editable="!$ctrl.isLoading"
+        name="storage_container_add_type">
         <div class="container-fluid px-0">
             <div class="row">
                 <oui-select-picker
@@ -46,14 +48,14 @@ <h1 data-translate="pci_projects_project_storages_containers_add_title"></h1>
         data-editable="!$ctrl.isLoading"
         data-cancel-href="{{$ctrl.cancelLink}}"
         data-cancel-text="{{:: 'pci_projects_project_storages_containers_add_cancel_label' | translate }}"
-        data-submit-text="{{:: 'pci_projects_project_storages_containers_add_submit_label' | translate }}">
+        data-submit-text="{{:: 'pci_projects_project_storages_containers_add_submit_label' | translate }}"
+        name="storage_container_add_name">
         <oui-field data-size="xl">
             <input class="oui-input" type="text" name="name"
                 data-ng-model="$ctrl.container.name"
                 data-ng-required="true">
         </oui-field>
     </oui-step-form>
-
 </oui-stepper>
 
 <div data-ng-if="$ctrl.isLoading">

Original file line number	Diff line number	Diff line change
`@@ -73,6 +73,7 @@ export default class SidebarController {`
`73`	`73`	`onMenuItemClick({ id }) {`
`74`	`74`	`this.atInternet.trackClick({`
`75`	`75`	name: `public-cloud_menu_${id}`,
	`76`	`+ type: 'action',`
`76`	`77`	`});`
`77`	`78`	`}`
`78`	`79`	`}`