diff --git a/samples/react-appinsights-usage/.devcontainer/devcontainer.json b/samples/react-appinsights-usage/.devcontainer/devcontainer.json
new file mode 100644
index 000000000..142906b55
--- /dev/null
+++ b/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"
+}
diff --git a/samples/react-appinsights-usage/.devcontainer/spfx-startup.sh b/samples/react-appinsights-usage/.devcontainer/spfx-startup.sh
new file mode 100644
index 000000000..456d6aea8
--- /dev/null
+++ b/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**********"
\ No newline at end of file
diff --git a/samples/react-appinsights-usage/README.md b/samples/react-appinsights-usage/README.md
index 13cacbcc2..1712c9058 100644
--- a/samples/react-appinsights-usage/README.md
+++ b/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
-Analyse in Application Insight
+Analyze in Application Insight
Query in Application Insights Count PageViews
+
```
pageViews
| where name contains "Page"
@@ -111,9 +97,11 @@ pageViews
| summarize count() by name
| render barchart
```
+
-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
```
+
## AB-Test WebPart
@@ -133,6 +122,7 @@ How users add new items?
Query in Application Insights
+
```
customEvents
| where name contains "AddItem"
@@ -142,6 +132,7 @@ customEvents
| summarize count() by name
| render barchart
```
+
## PnPJS Logger WebPart
diff --git a/samples/react-appinsights-usage/assets/sample.json b/samples/react-appinsights-usage/assets/sample.json
index 020c350e7..aa4b6fa89 100644
--- a/samples/react-appinsights-usage/assets/sample.json
+++ b/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",
diff --git a/samples/react-appinsights-usage/src/webparts/abTest/components/AddItemCalendar.tsx b/samples/react-appinsights-usage/src/webparts/abTest/components/AddItemCalendar.tsx
index 90c11e251..41c93fa94 100644
--- a/samples/react-appinsights-usage/src/webparts/abTest/components/AddItemCalendar.tsx
+++ b/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 (
-
+
);
}
\ No newline at end of file