Merge pull request #54 from rehanvdm/release/v1.2.2

feat: release v1.2.2

Author: rehanvdm

docs/API.md

@@ -673,6 +673,7 @@ const observability: Observability = { ... }
 | --- | --- | --- |
 | <code><a href="#serverless-website-analytics.Observability.property.alarms">alarms</a></code> | <code><a href="#serverless-website-analytics.AlarmProps">AlarmProps</a></code> | Adds CloudWatch Alarms to the resources created by this construct. |
 | <code><a href="#serverless-website-analytics.Observability.property.dashboard">dashboard</a></code> | <code>boolean</code> | Adds a CloudWatch dashboard with metrics for the resources created by this construct. |
+| <code><a href="#serverless-website-analytics.Observability.property.loglevel">loglevel</a></code> | <code>string</code> | Sets the log level, defaults to `AUDIT`. |
 
 ---
 
@@ -700,6 +701,20 @@ Adds a CloudWatch dashboard with metrics for the resources created by this const
 
 ---
 
+##### `loglevel`<sup>Optional</sup> <a name="loglevel" id="serverless-website-analytics.Observability.property.loglevel"></a>
+
+```typescript
+public readonly loglevel: string;
+```
+
+- *Type:* string
+
+Sets the log level, defaults to `AUDIT`.
+
+Available options: `DEBUG`, `INFO`, `WARNING`, `ERROR`, `AUDIT`.
+
+---
+
 ### RateLimitProps <a name="RateLimitProps" id="serverless-website-analytics.RateLimitProps"></a>
 
 #### Initializer <a name="Initializer" id="serverless-website-analytics.RateLimitProps.Initializer"></a>

src/backend.ts

@@ -27,7 +27,7 @@ export function backend(
     VERSION: '0.0.0',
     AWS_NODEJS_CONNECTION_REUSE_ENABLED: '1',
     NODE_OPTIONS: '--enable-source-maps',
-    LOG_LEVEL: 'DEBUG', // isProd ? "AUDIT" : "DEBUG"
+    LOG_LEVEL: props.observability!.loglevel!,
   };
   let defaultNodeJsFuncOpt = {};
 
@@ -301,7 +301,7 @@ export function backend(
         hardError: true,
         softErrorFilter: logs.FilterPattern.all(
           logs.FilterPattern.stringValue('$.level', '=', 'audit'),
-          logs.FilterPattern.stringValue('$.success', '=', 'false')
+          logs.FilterPattern.booleanValue('$.success', false)
         ),
       },
     },
@@ -311,7 +311,7 @@ export function backend(
         hardError: true,
         softErrorFilter: logs.FilterPattern.all(
           logs.FilterPattern.stringValue('$.level', '=', 'audit'),
-          logs.FilterPattern.stringValue('$.success', '=', 'false')
+          logs.FilterPattern.booleanValue('$.success', false)
         ),
       },
     },
@@ -321,7 +321,7 @@ export function backend(
         hardError: true,
         softErrorFilter: logs.FilterPattern.all(
           logs.FilterPattern.stringValue('$.level', '=', 'audit'),
-          logs.FilterPattern.stringValue('$.success', '=', 'false')
+          logs.FilterPattern.booleanValue('$.success', false)
         ),
       },
     },

src/index.ts

@@ -146,6 +146,11 @@ export interface Observability {
    * Adds a CloudWatch dashboard with metrics for the resources created by this construct.
    */
   readonly dashboard?: boolean;
+
+  /**
+   * Sets the log level, defaults to `AUDIT`. Available options: `DEBUG`, `INFO`, `WARNING`, `ERROR`, `AUDIT`.
+   */
+  readonly loglevel?: string;
 }
 
 export interface RateLimitProps {
@@ -258,6 +263,17 @@ export class Swa extends Construct {
       }
     }
 
+    /* Set default log level if it is not defined */
+    if (!props?.observability?.loglevel) {
+      props = {
+        ...props,
+        observability: {
+          ...props.observability,
+          loglevel: 'AUDIT',
+        },
+      };
+    }
+
     const authProps = auth(scope, name, props);
     const backendAnalyticsProps = backendAnalytics(scope, name, props);
     const backendProps = backend(scope, name, props, authProps, backendAnalyticsProps);

src/src/backend/api-ingest/shared.ts

@@ -23,9 +23,10 @@ export async function getInfoFromIpAndUa(ip: string, ua: string) {
   let cityName;
   let deviceType;
   let isBot;
-  try {
-    /* === IP === */
-    if (ip) {
+
+  /* === IP === */
+  if (ip) {
+    try {
       const response = maxMindReader.city(ip);
       if (response.country) {
         countryIso = response.country.isoCode;
@@ -34,8 +35,13 @@ export async function getInfoFromIpAndUa(ip: string, ua: string) {
           cityName = response.city.names.en;
         }
       }
+    } catch (err) {
+      logger.warning('Parsing failed for IP', ip);
+      logger.warning(err as Error);
     }
+  }
 
+  try {
     /* === Device Type === */
     const uaParsed = new UAParser(ua);
     const device = uaParsed.getDevice();
@@ -46,9 +52,10 @@ export async function getInfoFromIpAndUa(ip: string, ua: string) {
     /* === Is bot === */
     isBot = isbot(ua);
   } catch (err) {
-    logger.error('Parsing failed for IP/UA', ip, ua);
-    logger.error(err as Error);
+    logger.warning('Parsing failed for UA', ua);
+    logger.warning(err as Error);
   }
+
   return { countryIso, countryName, cityName, deviceType, isBot };
 }
 

src/src/backend/lib/utils/lambda_logger.ts

@@ -196,7 +196,7 @@ export class LambdaLog {
     if (message instanceof Error) {
       line = {
         date,
-        level: LogLevel.ERROR,
+        level: logLevel,
         env: this.env,
         msg: message.message,
         args: message.stack?.toString(),

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" },
 ];
 

src/src/tests/backend/api-ingest/index.ts

@@ -246,4 +246,37 @@ describe('API Ingest', function () {
     const respData = JSON.parse(resp.body);
     expect(respData.message).to.equal('Site does not exist');
   });
+
+  it('View Page - can not lookup IP', async function () {
+    this.timeout(TimeOut * 1000);
+
+    const context = apiGwContext();
+    const pageView: V1PageViewInput = {
+      site: 'simulated',
+      user_id: 'test_user_id_1',
+      session_id: 'test_session_id_1',
+      page_id: 'test_page_id_1',
+      page_url: '/test_page_id_1.html',
+      page_opened_at: '2023-06-01T01:02:03Z',
+      time_on_page: 0,
+      // referrer: "",
+      // referrer: 'something.com',
+      // referrer: "tests.com/something",
+    };
+    const event: ApiGwEventOptions = {
+      contentType: 'text/plain;charset=UTF-8',
+      method: 'POST',
+      path: '/v1/page/view',
+      body: JSON.stringify(pageView),
+      origin: 'localhost',
+      // ip: '0.0.0.0',
+      ip: 'x',
+      ua: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6,2 Safari/605.1.15',
+    };
+
+    setEnvVariables(TestConfig.env);
+    const resp = await invokeLocalHandlerOrMakeAPICall(event, handler, TestConfig.apiIngestUrl, context);
+
+    expect(resp.statusCode).to.equal(200);
+  });
 });