Merge pull request #847 from aziontech/dev

DEPLOY 2024.03.06

package.json

@@ -1,6 +1,6 @@
 {
   "name": "azion-platform-kit",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "private": true,
   "type": "module",
   "repository": {

src/plugins/adapters/AnalyticsTrackerAdapter.js

@@ -196,12 +196,21 @@ export class AnalyticsTrackerAdapter {
   }
 
   /**
+   * @param {Object} payload
+   * @param {'api'|'field'} payload.errorType
+   * @param {string} payload.fieldName
+   * @param {string} payload.errorMessage
+   *
    * @returns {AnalyticsTrackerAdapter}
    */
-  userFailedSignUp() {
+  userFailedSignUp(payload) {
     this.#events.push({
       eventName: 'User Failed to Sign Up',
-      props: {}
+      props: {
+        errorType: payload.errorType,
+        fieldName: payload.fieldName,
+        errorMessage: payload.errorMessage
+      }
     })
     return this
   }
@@ -235,12 +244,26 @@ export class AnalyticsTrackerAdapter {
   }
 
   /**
+   * @param {Object} payload
+   * @param {string} payload.templateName
+   * @param {string} payload.solutionId
+   * @param {string} payload.version
+   * @param {string} payload.versionId
+   * @param {string} payload.isv
+   * @param {string} payload.isvId
    * @returns {AnalyticsTrackerAdapter}
    */
-  clickMoreDetailsOnTemplate() {
+  clickMoreDetailsOnTemplate(payload) {
     this.#events.push({
       eventName: 'Clicked to View More Details on Template',
-      props: {}
+      props: {
+        templateName: payload.templateName,
+        solutionId: payload.solutionId,
+        version: payload.version,
+        versionId: payload.versionId,
+        isv: payload.isv,
+        isvId: payload.isvId
+      }
     })
     return this
   }

src/services/signup-services/signup-service.js

@@ -25,7 +25,8 @@ const parseHttpResponse = (httpResponse) => {
       return null
     case 400:
       const apiError = Object.values(httpResponse.body)[0][0]
-      throw new Error(apiError).message
+      const fieldName = Object.keys(httpResponse.body)[0]
+      throw new Error(JSON.stringify({ message: apiError, fieldName })).message
     case 404:
       throw new Errors.NotFoundError().message
     case 500:

src/templates/signup-block/form-signup-block.vue

@@ -184,9 +184,16 @@
 
       router.push({ name: 'activation', query: { email: encodeEmail(values.email) } })
     } catch (err) {
-      tracker.userFailedSignUp().track()
+      const { message, fieldName } = JSON.parse(err)
+      tracker
+        .userFailedSignUp({
+          errorType: 'api',
+          fieldName: fieldName,
+          errorMessage: message
+        })
+        .track()
       loading.value = false
-      toast.add({ life: 5000, severity: 'error', detail: err, summary: 'Error' })
+      toast.add({ life: 5000, severity: 'error', detail: message, summary: 'Error' })
     }
   }
 

src/tests/plugins/adapters/AnalyticsTrackerAdapter.test.js

@@ -234,10 +234,15 @@ describe('AnalyticsTrackerAdapter', () => {
 
   it('should track the user failed to sign-up event with the correct parameters', () => {
     const { sut, analyticsClientSpy } = makeSut()
+    const propsMock = {
+      errorType: 'api',
+      fieldName: 'email',
+      errorMessage: 'Invalid email'
+    }
 
-    sut.userFailedSignUp().track()
+    sut.userFailedSignUp({ ...propsMock }).track()
 
-    expect(analyticsClientSpy.track).toHaveBeenCalledWith('User Failed to Sign Up', {})
+    expect(analyticsClientSpy.track).toHaveBeenCalledWith('User Failed to Sign Up', propsMock)
   })
 
   it('should track the failed additional data submit event with the correct parameters', () => {
@@ -269,13 +274,34 @@ describe('AnalyticsTrackerAdapter', () => {
   it('should use the View More Details on Template event with correct parameters', () => {
     const { sut, analyticsClientSpy } = makeSut()
 
-    sut.clickMoreDetailsOnTemplate({})
+    const templateNameMock = 'string'
+    const solutionIdMock = 'solutionId'
+    const versionMock = 'version'
+    const versionIdMock = 'versionID'
+    const isvMock = 'isv'
+    const isvIdMock = 'isvId'
+
+    sut.clickMoreDetailsOnTemplate({
+      templateName: templateNameMock,
+      solutionId: solutionIdMock,
+      version: versionMock,
+      versionId: versionIdMock,
+      isv: isvMock,
+      isvId: isvIdMock
+    })
 
     sut.track()
 
     expect(analyticsClientSpy.track).toHaveBeenCalledWith(
       'Clicked to View More Details on Template',
-      {}
+      {
+        templateName: templateNameMock,
+        solutionId: solutionIdMock,
+        version: versionMock,
+        versionId: versionIdMock,
+        isv: isvMock,
+        isvId: isvIdMock
+      }
     )
   })
 
@@ -306,4 +332,30 @@ describe('AnalyticsTrackerAdapter', () => {
 
     expect(analyticsClientSpy.track).toHaveBeenCalledWith('Failed to Deploy', {})
   })
+
+  it('should be able to track click to create event with correct params', () => {
+    const { sut, analyticsClientSpy } = makeSut()
+    const productNameMock = 'Origin'
+
+    sut.clickToCreate({
+      productName: productNameMock
+    })
+
+    sut.track()
+
+    expect(analyticsClientSpy.track).toHaveBeenCalledWith('Clicked to Create Origin', {})
+  })
+
+  it('should be able to track created event with correct params', () => {
+    const { sut, analyticsClientSpy } = makeSut()
+    const productNameMock = 'Origin'
+
+    sut.productCreated({
+      productName: productNameMock
+    })
+
+    sut.track()
+
+    expect(analyticsClientSpy.track).toHaveBeenCalledWith('Created Origin', {})
+  })
 })

src/views/CreateNew/CreateView.vue

@@ -296,7 +296,15 @@
   }
 
   const openDetails = () => {
-    tracker.clickMoreDetailsOnTemplate().track()
+    tracker
+      .clickMoreDetailsOnTemplate({
+        templateName: solution.value.name,
+        solutionId: solution.value.id,
+        version: solution.value.version,
+        versionId: solution.value.latestVersionInstallTemplate,
+        isv: solution.value.vendor.name
+      })
+      .track()
     showDetails.value = true
   }
 

src/views/EdgeApplicationsOrigins/Drawer/index.vue

@@ -4,8 +4,10 @@
   import EditDrawerBlock from '@templates/edit-drawer-block'
   import { refDebounced } from '@vueuse/core'
   import { useToast } from 'primevue/usetoast'
-  import { ref } from 'vue'
+  import { ref, inject } from 'vue'
   import * as yup from 'yup'
+  /**@type {import('@/plugins/adapters/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
   defineOptions({ name: 'drawer-origin' })
 
   const emit = defineEmits(['onSuccess'])
@@ -160,6 +162,14 @@
     showEditOriginDrawer.value = false
   }
 
+  const handleTrackCreation = () => {
+    tracker
+      .productCreated({
+        productName: 'Origin'
+      })
+      .track()
+  }
+
   const copyToKey = async (originKey) => {
     props.clipboardWrite(originKey)
 
@@ -171,6 +181,7 @@
   }
 
   const handleCreateOrigin = (feedback) => {
+    handleTrackCreation()
     createFormDrawer.value.scrollOriginKey()
     originKey.value = feedback.originKey
     emit('onSuccess')

src/views/EdgeApplicationsOrigins/ListView.vue

@@ -4,7 +4,9 @@
   import ListTableBlock from '@/templates/list-table-block/no-header'
   import DrawerOrigin from '@/views/EdgeApplicationsOrigins/Drawer'
   import PrimeButton from 'primevue/button'
-  import { computed, ref } from 'vue'
+  import { computed, ref, inject } from 'vue'
+  /**@type {import('@/plugins/adapters/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
   defineOptions({ name: 'list-edge-applications-origins-tab' })
 
   const props = defineProps({
@@ -102,6 +104,11 @@
   }
 
   const openCreateOriginDrawer = () => {
+    tracker
+      .clickToCreate({
+        productName: 'Origin'
+      })
+      .track()
     drawerOriginsRef.value.openDrawerCreate()
   }
 

src/views/RealTimeEventsDataStreaming/Drawer/index.vue

@@ -60,7 +60,7 @@
           :tags="tags"
         >
           <template #body>
-            <div class="flex w-full lg:gap-8">
+            <div class="grid grid-cols-3 w-full ml-[1px] gap-4 lg:gap-8">
               <BigNumber
                 label="Streamed Lines"
                 sufix="lines"

src/views/RealTimeEventsHTTPRequests/Drawer/index.vue

@@ -109,7 +109,7 @@
           :tags="serverProtocolTag"
         >
           <template #body>
-            <div class="flex w-full lg:gap-8">
+            <div class="grid grid-cols-3 w-full ml-[1px] gap-4 lg:gap-8">
               <BigNumber
                 label="Request Time"
                 sufix="ms"

src/views/RealTimeEventsImageProcessor/Drawer/index.vue

@@ -86,7 +86,7 @@
           :tags="referenceErrorTag"
         >
           <template #body>
-            <div class="flex w-full lg:gap-8">
+            <div class="grid grid-cols-3 w-full ml-[1px] gap-4 lg:gap-8">
               <BigNumber
                 label="Request Time"
                 sufix="ms"

src/views/RealTimeEventsL2Cache/Drawer/index.vue

@@ -133,7 +133,7 @@
           :tags="referenceErrorTag"
         >
           <template #body>
-            <div class="flex w-full lg:gap-8">
+            <div class="grid grid-cols-3 w-full ml-[1px] gap-4 lg:gap-8">
               <BigNumber
                 label="Request Time"
                 sufix="ms"

src/views/RealTimePurge/FormFields/FormFieldsCreateRealTimePurge.vue

@@ -2,7 +2,6 @@
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
   import RadioButton from 'primevue/radiobutton'
   import Card from 'primevue/card'
-  import PrimeButton from 'primevue/button'
   import PrimeTextarea from 'primevue/textarea'
   import { useField } from 'vee-validate'
   import { computed } from 'vue'
@@ -20,13 +19,6 @@
     }
     return 'www.example.com'
   })
-
-  const props = defineProps({
-    contactSalesRealTimePurgeService: {
-      type: Function,
-      required: true
-    }
-  })
 </script>
 
 <template>
@@ -41,8 +33,9 @@
             <label class="text-color text-base font-medium">Default Layer</label>
             <div class="flex flex-col gap-3">
               <Card
+                :class="layer === 'edge_cache' ? 'border border-orange-500' : ''"
                 :pt="{
-                  body: { class: 'p-4 border border-orange-500 rounded-md' },
+                  body: { class: 'p-4 rounded-md' },
                   title: { class: 'flex items-center gap-3 text-base m-0 font-medium' },
                   subtitle: {
                     class: 'text-sm font-normal ml-8 text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
@@ -53,8 +46,7 @@
                   <RadioButton
                     inputId="inputId1"
                     name="layer"
-                    value="edge_caching"
-                    :disabled="true"
+                    value="edge_cache"
                     v-model="layer"
                   />
                   <span class="text-base">Edge Cache</span>
@@ -68,8 +60,9 @@
             <label class="text-color text-base font-medium">Subscription Layer</label>
             <div class="flex flex-col gap-3">
               <Card
+                :class="layer === 'tiered_cache' ? 'border border-orange-500' : ''"
                 :pt="{
-                  body: { class: 'p-4 opacity-50' },
+                  body: { class: 'p-4' },
                   title: { class: 'flex items-center gap-3 text-base m-0 font-medium' },
                   subtitle: {
                     class: 'text-sm font-normal ml-8 text-color-secondary m-0 pr-0 md:pr-[2.5rem]'
@@ -80,8 +73,7 @@
                   <RadioButton
                     inputId="inputId1"
                     name="layer"
-                    :disabled="true"
-                    value="l2_caching"
+                    value="tiered_cache"
                     v-model="layer"
                   />
                   <span class="text-base">Tiered Cache</span>
@@ -92,13 +84,6 @@
                 >
               </Card>
             </div>
-            <PrimeButton
-              outlined
-              icon="pi pi-shopping-cart"
-              class="max-w-[150px] mt-4"
-              label="Contact Sales"
-              @click="props.contactSalesRealTimePurgeService()"
-            />
           </div>
         </div>
       </template>

src/views/WafRules/FormFields/FormFieldsAllowed.vue

@@ -33,8 +33,8 @@
 
   const matchZonesOptions = ref([
     { name: 'Conditional Query String', value: 'conditional_query_string' },
-    { name: 'Conditional Request Body', value: 'conditional_query_body' },
-    { name: 'Conditional Request Header', value: 'conditional_query_header' },
+    { name: 'Conditional Request Body', value: 'conditional_request_body' },
+    { name: 'Conditional Request Header', value: 'conditional_request_header' },
     { name: 'File Name (Multipart Body)', value: 'file_name' },
     { name: 'Path', value: 'path' },
     { name: 'Query String', value: 'query_string' },
@@ -61,17 +61,17 @@
   const showConditionalInputs = (value) => {
     const conditionalInputs = [
       'conditional_query_string',
-      'conditional_query_body',
-      'conditional_query_header'
+      'conditional_request_body',
+      'conditional_request_header'
     ]
     return conditionalInputs.includes(value)
   }
 
   const showMatchOnInputs = (value) => {
     const conditionalInputs = [
       'conditional_query_string',
-      'conditional_query_body',
-      'conditional_query_header',
+      'conditional_request_body',
+      'conditional_request_header',
       'query_string',
       'request_body',
       'request_header'