feat: add open link to page views and referrers #49

src/src/frontend/src/components/TableData.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import {ref, computed, reactive} from "vue";
 import { humanizeNumber } from "@frontend/src/lib/ui_utils";
 
 export type Column = {
@@ -8,6 +8,8 @@ export type Column = {
   type: "string" | "number",
   gridColumn: `${number}fr`,
   canFilter?: boolean,
+  /* The column name to use for that row to open it as a URL */
+  openExternalColumn?: string
 };
 export type Props = {
   columns: Column[];
@@ -87,6 +89,9 @@ const canPageForward = computed(() => {
 function rowClick(rowText: any) {
   emit('click', rowText)
 }
+
+const hover = reactive<Record<any, boolean>>({});
+
 </script>
 
 <template>
@@ -97,12 +102,26 @@ function rowClick(rowText: any) {
       </div>
 
       <div v-if="!loading">
-        <div class="row" :style="rowGridColumnCss" v-for="row of pageData">
+        <div class="row" :style="rowGridColumnCss" v-for="(row, rowIndex) in pageData">
           <template v-for="col of columns">
             <template v-if="col.type === 'string'">
               <el-tooltip :show-after="1000" :content="row[col.index]">
-                <div v-if="col.canFilter" class="column column--overflow column--click" @click="rowClick(row[col.index])">
-                  {{ row[col.index] }}
+                <div v-if="col.canFilter" class="column column--overflow">
+
+                  <div style="display: flex;"
+                       @mouseover="hover[rowIndex] = true" @mouseleave="hover[rowIndex] = false">
+                    <!-- Column overflow is width 100% so will always push icon all the way to left, so the flex options won't work, which is fine for this -->
+                    <div class="column--overflow column--click" @click="rowClick(row[col.index])">
+                      {{ row[col.index] }}
+                    </div>
+<!--                    && hover[rowIndex]-->
+                    <div v-if="col.openExternalColumn && hover[rowIndex]">
+                      <a :href="row[col.openExternalColumn]" target="_blank" rel="noopener noreferrer">
+                        <mdi-open-in-new style="padding: 2px 5px 0; font-size: 14px"></mdi-open-in-new>
+                      </a>
+                    </div>
+                  </div>
+
                 </div>
                 <div v-lese class="column column--overflow">
                   {{ row[col.index] }}

src/src/frontend/src/components/vue-material-design-icons.ts

@@ -4,10 +4,12 @@ import Cog from 'vue-material-design-icons/Cog.vue';
 import InboxMultiple from 'vue-material-design-icons/InboxMultiple.vue';
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue';
 import Refresh from 'vue-material-design-icons/Refresh.vue';
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue';
 
 export function registerIconComponents(app: App<Element>) {
   app.component('mdi-cog', Cog);
   app.component('mdi-inbox-multiple', InboxMultiple);
   app.component('mdi-chevron-down', ChevronDown);
   app.component('mdi-refresh', Refresh);
+  app.component('mdi-open-in-new', OpenInNew);
 }

src/src/frontend/src/views/page_stats/components/page_views.vue

@@ -24,7 +24,9 @@ watch(() => [loading.value], async () => {
   emit('loading', loading.value)
 })
 
-let pageViews: Ref<PageView[] | undefined> = ref();
+type PageViewExternal = PageView & { external_url: string }
+
+let pageViews: Ref<PageViewExternal[] | undefined> = ref();
 let pageViewsQueryExecutionId: string | undefined = undefined;
 let pageViewsNextToken: string | undefined = undefined;
 const isPageViewsSameSite = computed(() => !pageViews.value?.length ? true : uniqBy(pageViews.value, 'site').length === 1);
@@ -48,7 +50,15 @@ async function loadData()
   if(!pageViews.value)
     pageViews.value = [];
 
-  pageViews.value = pageViews.value.concat(resp.data);
+  pageViews.value = pageViews.value.concat(
+      resp.data.map((pv) => {
+        const pageUrl = pv.page_url.startsWith("/") ? pv.page_url : `/${pv.page_url}`;
+        return {
+          ...pv,
+          external_url: `https://${pv.site}${pageUrl}`
+        }
+      })
+  );
   // pageViews.value = pageViews.value.concat(resp.data.slice(0,20));
   pageViewsQueryExecutionId = resp.queryExecutionId;
   pageViewsNextToken = resp.nextToken;
@@ -6096,7 +6106,7 @@ onMounted(() => {
 
 const columns: ComputedRef<Column[]> = computed(()  => {
   const ret: Column[] = [
-    { name: "Page", type: "string", index: "page_url", gridColumn: "6fr", canFilter: true },
+    { name: "Page", type: "string", index: "page_url", gridColumn: "6fr", canFilter: true, openExternalColumn: "external_url" },
     { name: "Views", type: "number", index: "views", gridColumn: "1fr" },
     { name: "Time on Page", type: "number", index: "avg_time_on_page", gridColumn: "2fr" },
   ];

src/src/frontend/src/views/page_stats/components/referrers.vue

@@ -69,7 +69,7 @@ onMounted(() => {
 })
 
 const columns: Column[] = [
-  { name: "Referrer", type: "string", index: "referrer", gridColumn: "6fr", canFilter: true },
+  { name: "Referrer", type: "string", index: "referrer", gridColumn: "6fr", canFilter: true, openExternalColumn: "referrer" },
   { name: "Views", type: "number", index: "views", gridColumn: "2fr" },
 ];