Updated readme, sample.json

samples/react-appinsights-usage/.devcontainer/devcontainer.json

@@ -0,0 +1,38 @@
+{
+  "name": "SPFx 1.18.2",
+  "image": "docker.io/m365pnp/spfx:1.18.2",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "editorconfig.editorconfig",
+        "dbaeumer.vscode-eslint"
+      ]
+    }
+  },
+  "forwardPorts": [
+    4321,
+    35729,
+    5432
+  ],
+  "portsAttributes": {
+    "4321": {
+      "protocol": "https",
+      "label": "Manifest",
+      "onAutoForward": "silent",
+      "requireLocalPort": true
+    },
+    "5432": {
+      "protocol": "https",
+      "label": "Workbench",
+      "onAutoForward": "silent"
+    },
+    "35729": {
+      "protocol": "https",
+      "label": "LiveReload",
+      "onAutoForward": "silent",
+      "requireLocalPort": true
+    }
+  },
+  "postCreateCommand": "bash .devcontainer/spfx-startup.sh",
+  "remoteUser": "node"
+}

samples/react-appinsights-usage/.devcontainer/spfx-startup.sh

@@ -0,0 +1,33 @@
+echo
+echo -e "\e[1;94mInstalling Node dependencies\e[0m"
+npm install
+
+## commands to create dev certificate and copy it to the root folder of the project
+echo
+echo -e "\e[1;94mGenerating dev certificate\e[0m"
+gulp trust-dev-cert
+
+# Convert the generated PEM certificate to a  CER certificate
+openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
+
+# Copy the PEM ecrtificate for non-Windows hosts
+cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
+
+## add *.cer to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.cer' ./.gitignore
+  then
+    echo "# .CER Certificates" >> .gitignore
+    echo "*.cer" >> .gitignore
+fi
+
+## add *.pem to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.pem' ./.gitignore
+  then
+    echo "# .PEM Certificates" >> .gitignore
+    echo "*.pem" >> .gitignore
+fi
+
+echo
+echo -e "\e[1;92mReady!\e[0m"
+
+echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

samples/react-appinsights-usage/README.md

@@ -1,18 +1,3 @@
----
-page_type: sample
-products:
-- office-sp
-languages:
-- typescript
-extensions:
-  contentType: samples
-  technologies:
-  - SharePoint Framework
-  platforms:
-  - react
-  createdDate: 5/26/2024 12:00:00 AM
----
-
 # Application Insights not only a Dev Tool
 
 ## Summary
@@ -61,7 +46,7 @@ This sample is optimally compatible with the following environment configuration
 ## Prerequisites
 
 Application Insight Service on Azure
-Add the connection stirng of this Service to the the variable ```AIConnectionString``` at ```src/EnvProps.ts```
+Add the connection string of this Service to the the variable ```AIConnectionString``` at ```src/EnvProps.ts```
 
 
 
@@ -70,10 +55,10 @@ Add the connection stirng of this Service to the the variable ```AIConnectionStr
 - Clone this repository
 - Ensure that you are at the solution folder
 - Create or use Existing Azure Application Insights
-- Update ```src/EnvProps.ts``` and set ```AIConnectionString``` 
+- Update `src/EnvProps.ts` and set `AIConnectionString`
 - in the command-line run:
-  - **npm install**
-  - **gulp serve**
+  - `npm install`
+  - `gulp serve`
 
 
 ## Features
@@ -97,11 +82,12 @@ How is your application used by Users
 
 ![Sample WebPart Screen](assets/SampleRouterUI.png)
 
-Analyse in Application Insight
+Analyze in Application Insight
 
 ![UserFlow by Session](assets/SampleRouterUserFlow.png)
 
 Query in Application Insights Count PageViews
+
 ```
 pageViews 
 | where name contains "Page"
@@ -111,9 +97,11 @@ pageViews
 | summarize count()  by name
 | render barchart 
 ```
+
 ![Page visit count evaluation](assets/SampleRouterEvaluation.png)
 
-Query in Application Insights Avarage Page visit duration by PageName
+Query in Application Insights Average Page visit duration by PageName
+
 ```
 customMetrics 
 | where name contains "PageVisitTime"
@@ -124,6 +112,7 @@ customMetrics
 | summarize avg(value)  by tostring(customDimensions.PageName)
 | render barchart 
 ```
+
 ![Page visit duration evaluation](assets/SampleRouterDurationEvaluation.png)
 
 ## AB-Test WebPart
@@ -133,6 +122,7 @@ How users add new items?
 ![AB UI Screen](assets/ABTextUI.png)
 
 Query in Application Insights
+
 ```
 customEvents 
 | where name contains "AddItem"
@@ -142,6 +132,7 @@ customEvents
 | summarize  count()  by name
 | render barchart 
 ```
+
 ![AB Evaluation](assets/ABEvaluation.png)
 
 ## PnPJS Logger WebPart

samples/react-appinsights-usage/assets/sample.json

@@ -3,10 +3,10 @@
     "name": "pnp-sp-dev-spfx-web-parts-react-appinsights-usage",
     "source": "pnp",
     "title": "React AppInsights Usage WebParts",
-    "shortDescription": "This web parts shows different use cases for capuring data in your application and store it into the Azure Application Insights service.",  
+    "shortDescription": "This web parts shows different use cases for capturing data in your application and store it into the Azure Application Insights service.",  
     "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-appinsights-usage",
     "longDescription": [
-      "This web parts shows different use cases for capuring data in your application. Azure Application Insights is more than only Logging and Tracing. It can be used to analyse data and display them in a graphical representation."
+      "This web parts shows different use cases for capturing data in your application. Azure Application Insights is more than only Logging and Tracing. It can be used to analyse data and display them in a graphical representation."
     ],
     "creationDateTime": "2024-05-26",
     "updateDateTime": "2024-05-26",

samples/react-appinsights-usage/src/webparts/abTest/components/AddItemCalendar.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-export function AddItemCalendar()  {
+export function AddItemCalendar(): JSX.Element  {
     throw new Error("Add Dialog for Calendar event not implemented yet.");
     return (
-        <div></div>
+        <div />
     );
 }