Abstract App Insights JS SDK (#1226)

* Making it a shared partial keeps the _layout.cshtml cleaner * Adds missing configuration for click tracking and user identification * Extract App Insights connection string into Options
DFE-Digital · Dec 2, 2024 · 5430458 · 5430458
1 parent 7086f91
commit 5430458
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 22 deletions.
diff --git a/Dfe.PrepareConversions/.dockerignore → .dockerignore b/Dfe.PrepareConversions/.dockerignore → .dockerignore
diff --git a/...Conversions/Dfe.PrepareConversions.Tests/Configuration/ApplicationInsightsOptionsTests.cs b/...Conversions/Dfe.PrepareConversions.Tests/Configuration/ApplicationInsightsOptionsTests.cs
@@ -0,0 +1,34 @@
+using Dfe.PrepareConversions.Configuration;
+using Xunit;
+
+namespace Dfe.PrepareConversions.Tests.Configuration;
+
+public class ApplicationInsightsOptionsTests
+{
+    [Fact]
+    public void Configuration_section_should_be_ApplicationInsights()
+    {
+        Assert.Equal("ApplicationInsights", ApplicationInsightsOptions.ConfigurationSection);
+    }
+
+    [Fact]
+    public void ConnectionString_should_default_to_null()
+    {
+        var _options = new ApplicationInsightsOptions();
+        Assert.Null(_options.ConnectionString);
+    }
+
+    [Fact]
+    public void InstrumentationKey_should_default_to_null()
+    {
+        var _options = new ApplicationInsightsOptions();
+        Assert.Null(_options.InstrumentationKey);
+    }
+
+    [Fact]
+    public void EnableBrowserAnalytics_should_default_to_null()
+    {
+        var _options = new ApplicationInsightsOptions();
+        Assert.Null(_options.EnableBrowserAnalytics);
+    }
+}
diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/Configuration/ApplicationInsightsOptions.cs b/Dfe.PrepareConversions/Dfe.PrepareConversions/Configuration/ApplicationInsightsOptions.cs
@@ -0,0 +1,9 @@
+namespace Dfe.PrepareConversions.Configuration;
+
+public class ApplicationInsightsOptions
+{
+   public const string ConfigurationSection = "ApplicationInsights";
+   public string ConnectionString { get; init; }
+   public string InstrumentationKey { get; init; }
+   public string EnableBrowserAnalytics { get; init; }
+}
diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/Shared/_AppInsights.cshtml b/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/Shared/_AppInsights.cshtml
@@ -0,0 +1,12 @@
+@{
+    var authenticatedUserId = (User.Identity is not null && User.Identity.IsAuthenticated) ? User.Identity.Name ?? "Unknown" : "Anonymous";
+}
+<script type="text/javascript" integrity="sha384-g/ZkzetdQypWdY0NBZT5r2L3BR9/hURD8OBcd1rEaBpgX6QC7EaTL+o+mzWrBcXW" crossorigin="anonymous" src="https://js.monitor.azure.com/scripts/b/ext/ai.clck.2.8.18.min.js"></script>
+<script type="text/javascript" asp-add-nonce>
+window.appInsights = {
+    connectionString: '@ApplicationInsightsOptions.Value.ConnectionString',
+    instrumentationKey: '@ApplicationInsightsOptions.Value.InstrumentationKey',
+    authenticatedUserId: '@authenticatedUserId'
+}
+</script>
+<script type="text/javascript" src="~/dist/application-insights.min.js" asp-add-nonce></script>
diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/Shared/_Layout.cshtml b/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/Shared/_Layout.cshtml
@@ -21,8 +21,6 @@
     var isTransfersPage = Context.Request.Path.Value.ToLower().Contains("/transfers");
 
     var notificationBannerMessage = Configuration["notificationBannerMessage"] ?? string.Empty;
-
-    var authenticatedUserId = User.Identity is not null && User.Identity.IsAuthenticated ? User.Identity.Name ?? "Unknown" : "Anonymous";
 }
 
 <!DOCTYPE html>
@@ -64,16 +62,7 @@
 
     @if (enableAppInsightsAnalytics)
     {
-        <!-- Application insights -->
-        <script type="text/javascript" integrity="sha384-g/ZkzetdQypWdY0NBZT5r2L3BR9/hURD8OBcd1rEaBpgX6QC7EaTL+o+mzWrBcXW" crossorigin="anonymous" src="https://js.monitor.azure.com/scripts/b/ext/ai.clck.2.8.18.min.js"></script>
-        <script type="text/javascript" asp-add-nonce>
-            window.appInsights = {
-                connectionString: '@Configuration["ApplicationInsights:ConnectionString"]',
-                authenticatedUserId: '@authenticatedUserId'
-            }
-        </script>
-        <script type="text/javascript" src="~/dist/application-insights.min.js" asp-add-nonce></script>
-        <!-- End Application insights -->
+        <partial name="_AppInsights"/>
     }
 
     <script type="text/javascript" src="~/dist/accessible-autocomplete.min.js" asp-add-nonce></script>

diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/_ViewImports.cshtml b/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/_ViewImports.cshtml
@@ -2,7 +2,11 @@
 @using Dfe.PrepareConversions.Models
 @using Dfe.PrepareConversions.ViewModels
 @using Dfe.PrepareConversions.Extensions
+@using Dfe.PrepareConversions.Configuration
+@using Microsoft.ApplicationInsights.AspNetCore
+@using Microsoft.Extensions.Options
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 @addTagHelper *, Microsoft.FeatureManagement.AspNetCore
 @addTagHelper *, Dfe.PrepareConversions
-@addTagHelper *, NetEscapades.AspNetCore.SecurityHeaders.TagHelpers
+@addTagHelper *, NetEscapades.AspNetCore.SecurityHeaders.TagHelpers
+@inject IOptions<ApplicationInsightsOptions> ApplicationInsightsOptions
diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/Startup.cs b/Dfe.PrepareConversions/Dfe.PrepareConversions/Startup.cs
@@ -147,14 +147,15 @@ public void ConfigureServices(IServiceCollection services)
 
       services.Configure<ServiceLinkOptions>(GetConfigurationSectionFor<ServiceLinkOptions>());
       services.Configure<AzureAdOptions>(GetConfigurationSectionFor<AzureAdOptions>());
+      services.Configure<ApplicationInsightsOptions>(GetConfigurationSectionFor<ApplicationInsightsOptions>());
 
       services.AddScoped<ErrorService>();
       services.AddScoped<IGetEstablishment, EstablishmentService>();
       services.Decorate<IGetEstablishment, GetEstablishmentItemCacheDecorator>();
       services.AddScoped<SchoolPerformanceService>();
       services.AddScoped<SchoolOverviewService>();
       services.AddScoped<KeyStagePerformanceService>();
-      services.AddScoped<ITrustsRepository, TrustsRepository>(); 
+      services.AddScoped<ITrustsRepository, TrustsRepository>();
       services.AddScoped<IProjectGroupsRepository, ProjectGroupsRepository>();
       services.AddScoped<IRoleCapablitiesRepository, RoleCapablitiesRepository>();
       services.AddScoped<IAcademyConversionProjectRepository, AcademyConversionProjectRepository>();

diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot/package-lock.json b/Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot/package-lock.json
diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot/package.json b/Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot/package.json
@@ -1,10 +1,7 @@
 {
 	"scripts": {
-		"build": "npm run build:assets & npm run build:frontend",
-		"build:frontend": "webpack",
-		"build:assets": "webpack --config webpack.assets.config.js & npm run build:assets:application-insights",
-		"build:assets:application-insights": "webpack --config webpack.appinsights.config.js",
-		"build:watch": "webpack --watch"
+		"build": "webpack --config webpack.assets.config.js --mode=production & webpack --config webpack.config.js --mode=production & webpack --config webpack.appinsights.config.js --mode=production",
+		"build:watch": "webpack --config webpack.assets.config.js --mode=development --watch & webpack --config webpack.config.js --watch --mode=development & webpack --config webpack.appinsights.config.js --watch --mode=development"
 	},
 	"devDependencies": {
 		"copy-webpack-plugin": "^7.0.0",

diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot/src/application-insights.js b/Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot/src/application-insights.js
@@ -4,6 +4,7 @@ import { ApplicationInsights } from '@microsoft/applicationinsights-web'
 const clickPluginInstance = new Microsoft.ApplicationInsights.ClickAnalyticsPlugin();
 const appInsights = new ApplicationInsights({ config: {
    connectionString: window.appInsights.connectionString,
+   instrumentationKey: window.appInsights.instrumentationKey,
    extensions: [ clickPluginInstance ],
    extensionConfig: { [clickPluginInstance.identifier] : {
       autoCapture : true,

diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot/src/css/cookie-banner.scss b/Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot/src/css/cookie-banner.scss
@@ -11,4 +11,3 @@
 	display: inline;
 	line-height: 2;
 }
-
diff --git a/Dockerfile b/Dockerfile
@@ -17,7 +17,7 @@ RUN dotnet publish Dfe.PrepareConversions -c Release -o /app --no-restore
 
 # Stage 2 - Build assets
 FROM node:${NODEJS_IMAGE_TAG} as build
-COPY --from=publish /app /app
+COPY ./Dfe.PrepareConversions/Dfe.PrepareConversions/wwwroot /app/wwwroot
 WORKDIR /app/wwwroot
 RUN npm install
 RUN npm run build
@@ -26,7 +26,8 @@ RUN npm run build
 ARG ASPNET_IMAGE_TAG
 FROM "mcr.microsoft.com/dotnet/aspnet:${ASPNET_IMAGE_TAG}" AS final
 LABEL org.opencontainers.image.source=https://github.com/DFE-Digital/prepare-academy-conversions
-COPY --from=build /app /app
+COPY --from=publish /app /app
+COPY --from=build /app/wwwroot /app/wwwroot
 
 WORKDIR /app
 COPY ./script/web-docker-entrypoint.sh ./docker-entrypoint.sh