@newskit-render/core 2.44.0 → 2.44.1-alpha.1

package/.prettierignore

@@ -15,3 +15,5 @@ cypress/plugins
 cypress/support
 public/*
 infrastructure/helm/*
+infrastructure/terraform-newrelic/*.js
+terraform-newrelic/*.js

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.44.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.44.0-alpha.7...@newskit-render/core@2.44.0) (2023-02-14)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 # [2.43.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.43.0-alpha.2...@newskit-render/core@2.43.0) (2023-02-08)
 
 **Note:** Version bump only for package @newskit-render/core

package/infrastructure/terraform-newrelic/dashboards.tf

@@ -184,7 +184,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index'"
+        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index' WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -196,7 +196,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index' TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index' TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -208,7 +208,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -220,7 +220,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -232,7 +232,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -244,7 +244,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -256,7 +256,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.interactive) as 'TTI' FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.interactive) as 'TTI' FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -268,7 +268,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.interactive) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.interactive) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -280,7 +280,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -292,7 +292,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -304,7 +304,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url"
+        query = "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -316,7 +316,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
 
@@ -328,7 +328,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 4
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url"  
+        query = "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url WHERE custom.url = '${var.lighthouseUrl}'"  
       }
     }
 
@@ -340,7 +340,7 @@ resource "newrelic_one_dashboard" "lighthouse_dashboard" {
       width = 8
 
       nrql_query {
-        query = "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url TIMESERIES AUTO"
+        query = "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url TIMESERIES AUTO WHERE custom.url = '${var.lighthouseUrl}'"
       }
     }
   }

package/infrastructure/terraform-newrelic/dev.tfvars

@@ -1,2 +1,3 @@
 environment = "dev"
-namespace   = "<% PROJECT_NAME >-dev"
+namespace   = "<% PROJECT_NAME >-dev"
+lighthouseUrl = "https://<% PROJECT_NAME >.ceng-dev.newsuk.tech/"

package/infrastructure/terraform-newrelic/lighthouse-script-dev.js

@@ -0,0 +1,53 @@
+/* To get Google Page Speed API Key - https://developers.google.com/speed/docs/insights/v5/get-started  */
+
+got = require('got');
+
+let categories = ['SEO', 'ACCESSIBILITY', 'BEST_PRACTICES', 'PERFORMANCE', 'PWA'];
+let endpoint = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?key='+ $secure.<% PROJECT_NAME >_PAGESPEED_INSIGHTS_API_KEY + '&';
+const strategy = "desktop";
+let settings = {'url': 'https://<% PROJECT_NAME >.ceng-dev.newsuk.tech/', 'strategy': strategy};
+const options = {
+    method: 'GET',
+    headers: {
+        'Content-Type': 'application/json',
+    }
+};
+categories.forEach((item, i) => {
+    endpoint += `category=${item}&`;
+});
+endpoint += `url=${settings.url}&`;
+endpoint += `strategy=${strategy}`;
+
+
+const getData = async () => {
+    try {
+        const body = await got.get(endpoint, options)
+            .json();
+        let lighthouseMetrics = body.lighthouseResult.audits.metrics.details.items[0];
+        console.log(body.lighthouseResult.configSettings.onlyCategories);
+        $util.insights.set('url', settings.url);
+        $util.insights.set('deviceType', settings.strategy);
+        $util.insights.set('performanceScore', body.lighthouseResult.categories.performance.score * 100);
+        $util.insights.set('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        console.log('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        $util.insights.set('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        console.log('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        $util.insights.set('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        console.log('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        $util.insights.set('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+        console.log('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+
+        for (let attributeName in lighthouseMetrics) {
+            if (lighthouseMetrics.hasOwnProperty(attributeName)) {
+                if (!attributeName.includes('Ts')) {
+                    console.log(attributeName + ": " + lighthouseMetrics[attributeName]);
+                    $util.insights.set(attributeName, lighthouseMetrics[attributeName]);
+                }
+            }
+        }
+    } catch (err) {
+        console.error("Error:", err);
+
+    }
+};
+getData();

package/infrastructure/terraform-newrelic/lighthouse-script-prod.js

@@ -1,46 +1,54 @@
-/** API SETUP - remove this section to run in New Relic Synthetics **/
-// if ($http == null) { var $http = require('request'); }
-/** API SETUP - remove this section to run in New Relic Synthetics **/
+/* To get Google Page Speed API Key - https://developers.google.com/speed/docs/insights/v5/get-started  */
 
-var settings = {
-  url: 'https://newskit-render.prod.ceng.newsuk.tech/',
-  category: 'performance',
-  strategy: 'desktop',
-}
+got = require('got');
+
+let categories = ['SEO', 'ACCESSIBILITY', 'BEST_PRACTICES', 'PERFORMANCE', 'PWA'];
+let endpoint = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?key='+ $secure.<% PROJECT_NAME >_PAGESPEED_INSIGHTS_API_KEY + '&';
+const strategy = "desktop";
+let settings = {'url': 'https://<% PROJECT_NAME >.prod.ceng.newsuk.tech/', 'strategy': strategy};
+const options = {
+    method: 'GET',
+    headers: {
+        'Content-Type': 'application/json',
+    }
+};
+categories.forEach((item, i) => {
+    endpoint += `category=${item}&`;
+});
+endpoint += `url=${settings.url}&`;
+endpoint += `strategy=${strategy}`;
 
-var options = {
-  method: 'GET',
-  url: 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed',
-  headers: null,
-  qs: settings,
-  json: true,
-}
 
-$http(options, function (error, response, body) {
-  if (!error && response.statusCode == 200) {
-    if (response.statusCode == 200) {
-      var lighthouseMetrics =
-        body.lighthouseResult.audits.metrics.details.items[0]
-      $util.insights.set('url', settings.url)
-      $util.insights.set('deviceType', settings.strategy)
-      $util.insights.set(
-        'performanceScore',
-        body.lighthouseResult.categories.performance.score
-      )
+const getData = async () => {
+    try {
+        const body = await got.get(endpoint, options)
+            .json();
+        let lighthouseMetrics = body.lighthouseResult.audits.metrics.details.items[0];
+        console.log(body.lighthouseResult.configSettings.onlyCategories);
+        $util.insights.set('url', settings.url);
+        $util.insights.set('deviceType', settings.strategy);
+        $util.insights.set('performanceScore', body.lighthouseResult.categories.performance.score * 100);
+        $util.insights.set('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        console.log('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        $util.insights.set('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        console.log('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        $util.insights.set('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        console.log('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        $util.insights.set('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+        console.log('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
 
-      for (var attributeName in lighthouseMetrics) {
-        if (lighthouseMetrics.hasOwnProperty(attributeName)) {
-          if (!attributeName.includes('Ts')) {
-            console.log(attributeName + ': ' + lighthouseMetrics[attributeName])
-            $util.insights.set(attributeName, lighthouseMetrics[attributeName])
-          }
+        for (let attributeName in lighthouseMetrics) {
+            if (lighthouseMetrics.hasOwnProperty(attributeName)) {
+                if (!attributeName.includes('Ts')) {
+                    console.log(attributeName + ": " + lighthouseMetrics[attributeName]);
+                    $util.insights.set(attributeName, lighthouseMetrics[attributeName]);
+                }
+            }
         }
-      }
-    } else {
-      console.log('Non-200 HTTP response: ' + response.statusCode)
+    } catch (err) {
+        console.error("Error:", err);
+
     }
-  } else {
-    console.log('rsp code: ' + response.statusCode)
-    console.log(error)
-  }
-})
+};
+getData();
+  

package/infrastructure/terraform-newrelic/lighthouse-script-stage.js

@@ -0,0 +1,54 @@
+/* To get Google Page Speed API Key - https://developers.google.com/speed/docs/insights/v5/get-started  */
+
+got = require('got');
+
+let categories = ['SEO', 'ACCESSIBILITY', 'BEST_PRACTICES', 'PERFORMANCE', 'PWA'];
+let endpoint = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?key='+ $secure.<% PROJECT_NAME >_PAGESPEED_INSIGHTS_API_KEY + '&';
+const strategy = "desktop";
+let settings = {'url': 'https://<% PROJECT_NAME >.staging.ceng.newsuk.tech/', 'strategy': strategy};
+const options = {
+    method: 'GET',
+    headers: {
+        'Content-Type': 'application/json',
+    }
+};
+categories.forEach((item, i) => {
+    endpoint += `category=${item}&`;
+});
+endpoint += `url=${settings.url}&`;
+endpoint += `strategy=${strategy}`;
+
+
+const getData = async () => {
+    try {
+        const body = await got.get(endpoint, options)
+            .json();
+        let lighthouseMetrics = body.lighthouseResult.audits.metrics.details.items[0];
+        console.log(body.lighthouseResult.configSettings.onlyCategories);
+        $util.insights.set('url', settings.url);
+        $util.insights.set('deviceType', settings.strategy);
+        $util.insights.set('performanceScore', body.lighthouseResult.categories.performance.score * 100);
+        $util.insights.set('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        console.log('accessibilityScore', body.lighthouseResult.categories.accessibility.score * 100);
+        $util.insights.set('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        console.log('bestPracticesScore', body.lighthouseResult.categories['best-practices'].score * 100);
+        $util.insights.set('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        console.log('seoScore', body.lighthouseResult.categories.seo.score * 100);
+        $util.insights.set('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+        console.log('pwaScore', body.lighthouseResult.categories.pwa.score * 100);
+
+        for (let attributeName in lighthouseMetrics) {
+            if (lighthouseMetrics.hasOwnProperty(attributeName)) {
+                if (!attributeName.includes('Ts')) {
+                    console.log(attributeName + ": " + lighthouseMetrics[attributeName]);
+                    $util.insights.set(attributeName, lighthouseMetrics[attributeName]);
+                }
+            }
+        }
+    } catch (err) {
+        console.error("Error:", err);
+
+    }
+};
+getData();
+

package/infrastructure/terraform-newrelic/monitors.tf

@@ -4,7 +4,7 @@ resource "newrelic_synthetics_script_monitor" "lighthouse-monitor" {
   locations_public     = ["EU_WEST_2"]
   period               = "EVERY_30_MINUTES"
   status               = "ENABLED"
-  script               = var.environment == "prod" ? file("${path.module}/lighthouse-script-prod.js") : file("${path.module}/lighthouse-script.js")
+  script               = var.environment == "prod" ? file("${path.module}/lighthouse-script-prod.js") : var.environment == "dev" ? file("${path.module}/lighthouse-script-dev.js") : file("${path.module}/lighthouse-script-stage.js")
   script_language      = "JAVASCRIPT"
   runtime_type         = "NODE_API"
   runtime_type_version = "16.10"

package/infrastructure/terraform-newrelic/prod.tfvars

@@ -1,2 +1,3 @@
 environment = "prod"
-namespace   = "<% PROJECT_NAME >-prod"
+namespace   = "<% PROJECT_NAME >-prod"
+lighthouseUrl = "https://<% PROJECT_NAME >.prod.ceng.newsuk.tech/"

package/infrastructure/terraform-newrelic/staging.tfvars

@@ -1,2 +1,3 @@
 environment = "staging"
-namespace   = "<% PROJECT_NAME >-staging"
+namespace   = "<% PROJECT_NAME >-staging"
+lighthouseUrl = "https://<% PROJECT_NAME >.staging.ceng.newsuk.tech/"

package/infrastructure/terraform-newrelic/variables.tf

@@ -27,3 +27,7 @@ variable "project_name" {
   description = "The Project name"
   default     = "<% PROJECT_NAME >"
 }
+
+variable "lighthouseUrl" {
+  description = "url to be analyzed by Lighthouse"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.44.0",
+  "version": "2.44.1-alpha.1",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -39,15 +39,15 @@
     "@emotion-icons/material-outlined": "3.14.0",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
-    "@newskit-render/api": "^1.6.5",
-    "@newskit-render/auth": "^1.3.9",
-    "@newskit-render/checkout": "^2.5.0",
-    "@newskit-render/feature-flags": "^1.4.10",
-    "@newskit-render/feed": "^1.4.15",
-    "@newskit-render/my-account": "^4.4.0",
-    "@newskit-render/shared-components": "^2.4.1",
-    "@newskit-render/standalone-components": "^2.5.1",
-    "@newskit-render/validation": "^1.5.11",
+    "@newskit-render/api": "^1.6.6-alpha.0",
+    "@newskit-render/auth": "^1.3.10-alpha.0",
+    "@newskit-render/checkout": "^2.5.1-alpha.0",
+    "@newskit-render/feature-flags": "^1.4.11-alpha.0",
+    "@newskit-render/feed": "^1.4.16-alpha.0",
+    "@newskit-render/my-account": "^4.4.1-alpha.0",
+    "@newskit-render/shared-components": "^2.4.2-alpha.0",
+    "@newskit-render/standalone-components": "^2.5.2-alpha.0",
+    "@newskit-render/validation": "^1.5.12-alpha.0",
     "@next/font": "13.1.6",
     "cross-fetch": "3.1.5",
     "graphql": "16.6.0",
@@ -75,17 +75,17 @@
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "@types/react-helmet": "6.1.0",
-    "@typescript-eslint/eslint-plugin": "5.48.1",
-    "@typescript-eslint/parser": "5.48.1",
+    "@typescript-eslint/eslint-plugin": "5.51.0",
+    "@typescript-eslint/parser": "5.51.0",
     "axe-core": "4.3.4",
     "babel-jest": "26.3.0",
     "cypress": "10.0.0",
     "cypress-axe": "1.1.0",
-    "eslint": "8.30.0",
+    "eslint": "8.34.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-config-next": "13.1.2",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "8.6.0",
     "eslint-import-resolver-typescript": "3.5.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-flowtype": "8.0.3",

package/infrastructure/terraform-newrelic/lighthouse-script.js

@@ -1,46 +0,0 @@
-/** API SETUP - remove this section to run in New Relic Synthetics **/
-// if ($http == null) { var $http = require('request'); }
-/** API SETUP - remove this section to run in New Relic Synthetics **/
-
-var settings = {
-  url: 'https://newskit-render.ceng-dev.newsuk.tech/',
-  category: 'performance',
-  strategy: 'desktop',
-}
-
-var options = {
-  method: 'GET',
-  url: 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed',
-  headers: null,
-  qs: settings,
-  json: true,
-}
-
-$http(options, function (error, response, body) {
-  if (!error && response.statusCode == 200) {
-    if (response.statusCode == 200) {
-      var lighthouseMetrics =
-        body.lighthouseResult.audits.metrics.details.items[0]
-      $util.insights.set('url', settings.url)
-      $util.insights.set('deviceType', settings.strategy)
-      $util.insights.set(
-        'performanceScore',
-        body.lighthouseResult.categories.performance.score
-      )
-
-      for (var attributeName in lighthouseMetrics) {
-        if (lighthouseMetrics.hasOwnProperty(attributeName)) {
-          if (!attributeName.includes('Ts')) {
-            console.log(attributeName + ': ' + lighthouseMetrics[attributeName])
-            $util.insights.set(attributeName, lighthouseMetrics[attributeName])
-          }
-        }
-      }
-    } else {
-      console.log('Non-200 HTTP response: ' + response.statusCode)
-    }
-  } else {
-    console.log('rsp code: ' + response.statusCode)
-    console.log(error)
-  }
-})