feat: log search interactions to APM (#2036)

* feat: log to APM search interactions * feat: catch and log search result click events * refactor: derive API params in method, not computed So that they may be used by onClickItem handler * chore: linting * fix: end transaction * refactor: reusable search interaction logging fn * feat: pause before closing result click transaction As otherwise the APM agent discards it. * refactor: add content filter on demand * test: spec item preview card event listeners * test: spec interaction logging to APM * refactor: move to module; add session ID * refactor: move APM logging to mixin With SSR logging deferred to client-side, for session ID from sessionStorage. * chore: update Dockerfile for vue-session-id * docs(vue-session-id): add README * test: update SearchInterface specs for mixin use * test: spec elasticApmReporter mixin * docs(vue-session-id): correct typo * fix: prevent clicking on slot from triggering custom event
europeana · Aug 30, 2023 · 63c4d95 · 63c4d95
1 parent c4b9026
commit 63c4d95
Show file tree

Hide file tree

Showing 23 changed files with 578 additions and 161 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
     "@europeana/mirador": "link:./packages/mirador",
     "@europeana/portal": "link:./packages/portal",
     "@europeana/style": "link:./packages/style",
-    "@europeana/styleguide": "link:./packages/styleguide"
+    "@europeana/styleguide": "link:./packages/styleguide",
+    "@europeana/vue-session-id": "link:./packages/vue-session-id"
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",

diff --git a/packages/portal/Dockerfile b/packages/portal/Dockerfile
@@ -14,6 +14,7 @@ COPY package*.json ./
 COPY packages/portal/package*.json ./packages/portal/
 COPY packages/mirador ./packages/mirador
 COPY packages/style ./packages/style
+COPY packages/vue-session-id ./packages/vue-session-id
 
 RUN npm -w packages/portal ci
 

diff --git a/packages/portal/nuxt.config.js b/packages/portal/nuxt.config.js
@@ -267,6 +267,7 @@ export default {
     '~/plugins/axios.server',
     '~/plugins/vue-filters',
     '~/plugins/vue-directives',
+    '~/plugins/vue-session-id.client',
     '~/plugins/vue-announcer.client',
     '~/plugins/vue-masonry.client',
     '~/plugins/vue-scrollto.client',

diff --git a/packages/portal/package.json b/packages/portal/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@elastic/apm-rum-vue": "^1.3.1",
+    "@europeana/vue-session-id": "^1.121.0",
     "@nuxt/cli": "2.17.0",
     "@nuxt/core": "2.17.0",
     "@nuxt/vue-app": "2.17.0",

diff --git a/packages/portal/src/components/item/ItemPreviewCard.vue b/packages/portal/src/components/item/ItemPreviewCard.vue
@@ -1,5 +1,6 @@
 <template>
   <ContentCard
+    ref="card"
     :title="dcTitle || item.dcDescriptionLangAware"
     :url="url"
     :image-url="imageUrl"
@@ -18,7 +19,10 @@
       v-if="variant === 'list'"
       #footer
     >
-      <div class="data-and-buttons-wrapper d-flex">
+      <div
+        class="data-and-buttons-wrapper d-flex"
+        @click.stop=""
+      >
         <RightsStatement
           v-if="rights"
           :rights-statement-url="rights"
@@ -43,18 +47,22 @@
       v-else
       #image-overlay
     >
-      <RecommendationButtons
-        v-if="enableAcceptRecommendation || enableRejectRecommendation"
-        :identifier="identifier"
-        :enable-accept-button="enableAcceptRecommendation"
-        :enable-reject-button="enableRejectRecommendation"
-      />
-      <UserButtons
-        v-else
-        :identifier="identifier"
-        :show-pins="showPins"
-        :show-move="showMove"
-      />
+      <div
+        @click.stop=""
+      >
+        <RecommendationButtons
+          v-if="enableAcceptRecommendation || enableRejectRecommendation"
+          :identifier="identifier"
+          :enable-accept-button="enableAcceptRecommendation"
+          :enable-reject-button="enableRejectRecommendation"
+        />
+        <UserButtons
+          v-else
+          :identifier="identifier"
+          :show-pins="showPins"
+          :show-move="showMove"
+        />
+      </div>
     </template>
   </ContentCard>
 </template>
@@ -140,6 +148,24 @@
       offset: {
         type: Number,
         default: null
+      },
+      /**
+       * Event listener to call when item receives `click` event
+       *
+       * Listener will receive item ID as argument
+       */
+      onClickCard: {
+        type: Function,
+        default: null
+      },
+      /**
+       * Event listener to call when item receives `auxclick` event
+       *
+       * Listener will receive item ID as argument
+       */
+      onAuxClickCard: {
+        type: Function,
+        default: null
       }
     },
 
@@ -203,6 +229,15 @@
       type() {
         return this.item.type;
       }
+    },
+
+    mounted() {
+      if (this.onClickCard) {
+        this.$refs.card.$el.addEventListener('click', () => this.onClickCard(this.identifier));
+      }
+      if (this.onAuxClickCard) {
+        this.$refs.card.$el.addEventListener('auxclick', () => this.onAuxClickCard(this.identifier));
+      }
     }
   };
 </script>

diff --git a/packages/portal/src/components/item/ItemPreviewCardGroup.vue b/packages/portal/src/components/item/ItemPreviewCardGroup.vue
@@ -61,6 +61,8 @@
           :show-move="useDraggable"
           :offset="items.findIndex(item => item.id === card.id)"
           data-qa="item preview"
+          :on-aux-click-card="onAuxClickCard"
+          :on-click-card="onClickCard"
         />
       </template>
     </component>
@@ -114,6 +116,8 @@
         :show-move="useDraggable"
         :offset="items.findIndex(item => item.id === card.id)"
         data-qa="item preview"
+        :on-aux-click-card="onAuxClickCard"
+        :on-click-card="onClickCard"
       />
     </template>
   </component>
@@ -162,6 +166,14 @@
       enableRejectRecommendations: {
         type: Boolean,
         default: false
+      },
+      onClickCard: {
+        type: Function,
+        default: null
+      },
+      onAuxClickCard: {
+        type: Function,
+        default: null
       }
     },
 

diff --git a/packages/portal/src/components/item/ItemRecommendations.vue b/packages/portal/src/components/item/ItemRecommendations.vue
@@ -33,6 +33,7 @@
 
 <script>
   import similarItemsQuery from '@/plugins/europeana/record/similar-items';
+  import { addContentTierFilter } from '@/plugins/europeana/search';
   import { langMapValueForLocale } from  '@/plugins/europeana/utils';
   import ItemPreviewCardGroup from '@/components/item/ItemPreviewCardGroup';
   import keycloak from '@/mixins/keycloak';
@@ -92,6 +93,7 @@
       } else {
         response = await this.$apis.record.search({
           query: similarItemsQuery(this.identifier, this.similarItemsFields),
+          qf: addContentTierFilter(),
           rows: 4,
           profile: 'minimal',
           facet: ''

diff --git a/packages/portal/src/components/search/SearchFacetDropdown.vue b/packages/portal/src/components/search/SearchFacetDropdown.vue
@@ -432,7 +432,6 @@
         // facets properties are updated correctly
         this.init();
       },
-      '$route.query.api': 'refetch',
       '$route.query.qa': 'refetch',
       '$route.query.qf': 'refetch',
       '$route.query.query': 'refetch',