mirror of
https://github.com/pnp/sp-dev-fx-webparts.git
synced 2025-02-09 06:25:01 +00:00
added sample.json and devcontainer
This commit is contained in:
Hugo Bernier
parent
58847fc93c
commit
a44f77b76f
39
samples/react-dashboards/.devcontainer/devcontainer.json
Normal file
39
samples/react-dashboards/.devcontainer/devcontainer.json
Normal file
@ -0,0 +1,39 @@
|
||||
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
|
||||
{
|
||||
"name": "SPFx 1.16.1",
|
||||
"image": "docker.io/m365pnp/spfx:1.16.1",
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {},
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
"forwardPorts": [
|
||||
4321,
|
||||
35729
|
||||
],
|
||||
"portsAttributes": {
|
||||
"4321": {
|
||||
"protocol": "https",
|
||||
"label": "Manifest",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
},
|
||||
// Not needed for SPFx>= 1.12.1
|
||||
// "5432": {
|
||||
// "protocol": "https",
|
||||
// "label": "Workbench",
|
||||
// "onAutoForward": "silent"
|
||||
// },
|
||||
"35729": {
|
||||
"protocol": "https",
|
||||
"label": "LiveReload",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
}
|
||||
},
|
||||
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
|
||||
"remoteUser": "node"
|
||||
}
|
||||
33
samples/react-dashboards/.devcontainer/spfx-startup.sh
Normal file
33
samples/react-dashboards/.devcontainer/spfx-startup.sh
Normal file
@ -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**********"
|
||||
@ -29,13 +29,13 @@ This sample is optimally compatible with the following environment configuration
|
||||
## Applies to
|
||||
|
||||
- [SharePoint Framework](https://aka.ms/spfx)
|
||||
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
- [Microsoft 365 tenant](https://docs.microsoft.com//sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||
|
||||
## Authors
|
||||
|
||||
Kinga Kazala [@kinga_kazala](https://twitter.com/kinga_kazala), ETHZ
|
||||
* [Kinga Kazala](https://github.com/kkazala)
|
||||
|
||||
## Version history
|
||||
|
||||
@ -47,7 +47,7 @@ Kinga Kazala [@kinga_kazala](https://twitter.com/kinga_kazala), ETHZ
|
||||
|
||||
- Azure tenant
|
||||
- Application Insights resource (for Application Insights web part)
|
||||
- Read access to Cost Management data (for Cost Insights web part), see **Required access to view data** in the [Azure EA subscription scopes](https://learn.microsoft.com/en-us/azure/cost-management-billing/costs/assign-access-acm-data#azure-ea-subscription-scopes) table
|
||||
- Read access to Cost Management data (for Cost Insights web part), see **Required access to view data** in the [Azure EA subscription scopes](https://learn.microsoft.com//azure/cost-management-billing/costs/assign-access-acm-data#azure-ea-subscription-scopes) table
|
||||
- SharePoint Administrator or Global Administrator to install the solution
|
||||
- Global Administrator permissions to approve required API access:
|
||||
- Windows Azure Service Management API: user_impersonation
|
||||
@ -58,11 +58,11 @@ Kinga Kazala [@kinga_kazala](https://twitter.com/kinga_kazala), ETHZ
|
||||
- Clone this repository
|
||||
- Ensure that you are at the solution folder
|
||||
- to debug, in the command-line run:
|
||||
- **npm install** / **pnpm install**
|
||||
- **gulp serve --nobrowser**
|
||||
- `npm install` / `pnpm install`
|
||||
- `gulp serve --nobrowser`
|
||||
- to deploy, in the command-line run:
|
||||
- **gulp bundle --ship**
|
||||
- **gulp package-solution --ship**
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
|
||||
## Configuration
|
||||
|
||||
@ -90,9 +90,9 @@ Both web parts have example queries that you may use to test the solution, or to
|
||||
In case you want to refer to the _time range_ defined in the web part, type `{TimeRange:start}` in the Kusto query:
|
||||
|
||||
|
||||
> Please **test** your query using either [Application Insights / Query - Get](https://learn.microsoft.com/en-us/rest/api/application-insights/query/get?tabs=HTTP#code-0) or query editor in Azure portal (Application Insights / Logs) to ensure the query is correct. Some expression you may use in Workspaces will not work in Application Insights Logs API and therefore, will also fail when executed using this web part.
|
||||
> Please **test** your query using either [Application Insights / Query - Get](https://learn.microsoft.com//rest/api/application-insights/query/get?tabs=HTTP#code-0) or query editor in Azure portal (Application Insights / Logs) to ensure the query is correct. Some expression you may use in Workspaces will not work in Application Insights Logs API and therefore, will also fail when executed using this web part.
|
||||
|
||||
**Cost information** is retrieved using the **Cost Management Usage API** and your custom JSON request. Please test it using [Cost Management / Query - Usage](https://learn.microsoft.com/en-us/rest/api/cost-management/query/usage?tabs=HTTP#code-try-0)
|
||||
**Cost information** is retrieved using the **Cost Management Usage API** and your custom JSON request. Please test it using [Cost Management / Query - Usage](https://learn.microsoft.com//rest/api/cost-management/query/usage?tabs=HTTP#code-try-0)
|
||||
|
||||
### Rendering results
|
||||
|
||||
@ -109,18 +109,18 @@ Chart is rendered using [Chart Control](https://pnp.github.io/sp-dev-fx-controls
|
||||
|
||||
### Authentication
|
||||
|
||||
User impersonation is executed using [AadHttpClient](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient). To call the APIs, the solution requires the following **Application** API permissions:
|
||||
User impersonation is executed using [AadHttpClient](https://learn.microsoft.com//sharepoint/dev/spfx/use-aadhttpclient). To call the APIs, the solution requires the following **Application** API permissions:
|
||||
|
||||
- Windows Azure Service Management API: user_impersonation
|
||||
- Application Insights API: user_impersonation
|
||||
|
||||
These permissions will be requested automatically once the solution is deployed, and must be granted by a Global Admin using [API access](https://kingasws1e5-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement) page in SharePoint Administration
|
||||
These permissions will be requested automatically once the solution is deployed, and must be granted by a Global Admin using [API access](https://yoursharepoint-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement) page in SharePoint Administration
|
||||
|
||||
Authentication with `Application ID` and `API key` is also allowed for Application Insights dashboard (see _Api Connection_ above)
|
||||
|
||||
### Caching
|
||||
|
||||
`PnPClientStorage` is used to cache query results in local storage to avoid [throttling](https://learn.microsoft.com/en-us/azure/azure-resource-manager/management/request-limits-and-throttling). This is especially important when querying cost management APIs (see more information below).
|
||||
`PnPClientStorage` is used to cache query results in local storage to avoid [throttling](https://learn.microsoft.com//azure/azure-resource-manager/management/request-limits-and-throttling). This is especially important when querying cost management APIs (see more information below).
|
||||
|
||||
By default, caching duration is set to:
|
||||
|
||||
@ -135,7 +135,7 @@ Cache duration for **Application Insights Dashboard** may be extended or disable
|
||||
To query Application Insights using the Application Insights Data Access API, you must **authenticate**:
|
||||
|
||||
- To query your workspaces, use Azure Active Directory (Azure AD) authentication.
|
||||
- To quickly explore the API without using Azure AD authentication, you can use an API key to query sample data in a non-production environment. You may try it here [here](https://learn.microsoft.com/en-us/rest/api/application-insights/query/get?tabs=HTTP#code-0), by adding **x-api-key** header set to **ApiKey** value
|
||||
- To quickly explore the API without using Azure AD authentication, you can use an API key to query sample data in a non-production environment. You may try it here [here](https://learn.microsoft.com/rest/api/application-insights/query/get?tabs=HTTP#code-0), by adding **x-api-key** header set to **ApiKey** value
|
||||
|
||||
The Log Analytics API supports Azure AD authentication with three different Azure AD OAuth2 flows: authorization code, **implicit**, client credentials.
|
||||
Client-side applications that are incapable of storing a secret, such as SharePoint Framework solutions, use **OAuth implicit flow**. In SharePoint Framework solutions, authorization by using the OAuth implicit flow is done as part of the framework through MSGraphClient and AadHttpClient, both of which are introduced in SharePoint Framework v1.4.1.
|
||||
@ -148,35 +148,35 @@ All permissions are granted to the whole tenant and not to a specific applicatio
|
||||
|
||||
### Application Insights
|
||||
|
||||
- [Application Insights overview](https://learn.microsoft.com/en-us/azure/azure-monitor/app/app-insights-overview)
|
||||
- [Application Insights API](https://learn.microsoft.com/en-us/rest/api/application-insights/)
|
||||
- [Application Insights overview](https://learn.microsoft.com//azure/azure-monitor/app/app-insights-overview)
|
||||
- [Application Insights API](https://learn.microsoft.com//rest/api/application-insights/)
|
||||
- [Application Insights demo data](https://aka.ms/AIAnalyticsDemo)
|
||||
- [KQL quick reference](https://learn.microsoft.com/en-us/azure/data-explorer/kql-quick-reference)
|
||||
- [KQL quick reference](https://learn.microsoft.com//azure/data-explorer/kql-quick-reference)
|
||||
-[Fun With KQL – Variants Of Project](https://arcanecode.com/2022/06/06/fun-with-kql-variants-of-project/)
|
||||
- [Resources, roles, and access control in Application Insights](https://learn.microsoft.com/en-us/azure/azure-monitor/app/resources-roles-access-control) - Assign access to users in the resource group or subscription to which your application resource belongs, not in the resource itself.
|
||||
- [Resources, roles, and access control in Application Insights](https://learn.microsoft.com//azure/azure-monitor/app/resources-roles-access-control) - Assign access to users in the resource group or subscription to which your application resource belongs, not in the resource itself.
|
||||
|
||||
### Cost Management
|
||||
|
||||
- [Cost Management API](https://learn.microsoft.com/en-us/rest/api/cost-management/)
|
||||
- [Cost Management Dimensions](https://learn.microsoft.com/en-us/rest/api/cost-management/dimensions/list?tabs=HTTP#code-try-0)
|
||||
- [How to optimize your cloud investment with Cost Management](https://learn.microsoft.com/en-us/azure/cost-management-billing/costs/cost-mgt-best-practices)
|
||||
- [Retrieve large cost datasets recurringly with exports](https://learn.microsoft.com/en-us/azure/cost-management-billing/costs/ingest-azure-usage-at-scale)
|
||||
- [Manage costs with automation](https://learn.microsoft.com/en-us/azure/cost-management-billing/costs/manage-automation
|
||||
- [Cost Management API](https://learn.microsoft.com//rest/api/cost-management/)
|
||||
- [Cost Management Dimensions](https://learn.microsoft.com//rest/api/cost-management/dimensions/list?tabs=HTTP#code-try-0)
|
||||
- [How to optimize your cloud investment with Cost Management](https://learn.microsoft.com//azure/cost-management-billing/costs/cost-mgt-best-practices)
|
||||
- [Retrieve large cost datasets recurringly with exports](https://learn.microsoft.com//azure/cost-management-billing/costs/ingest-azure-usage-at-scale)
|
||||
- [Manage costs with automation](https://learn.microsoft.com//azure/cost-management-billing/costs/manage-automation
|
||||
)
|
||||
|
||||
>If you want to get the latest cost data, query at most once per day. Reports are refreshed every four hours. If you call more frequently, you'll receive identical data.
|
||||
>The data in Usage Details is provided on a per meter basis, per day.
|
||||
>
|
||||
>If you want to get large amounts of exported data regularly, see [Retrieve large cost datasets recurringly with exports](https://learn.microsoft.com/en-us/azure/cost-management-billing/costs/ingest-azure-usage-at-scale).
|
||||
>If you want to get large amounts of exported data regularly, see [Retrieve large cost datasets recurringly with exports](https://learn.microsoft.com//azure/cost-management-billing/costs/ingest-azure-usage-at-scale).
|
||||
>
|
||||
>
|
||||
>If you have scopes with a large amount of usage data (for example a Billing Account), consider placing multiple calls to child scopes so you get more manageable files that you can download. If your dataset is more than 2 GB month-to-month, consider using exports as a more scalable solution.
|
||||
|
||||
### Using Azure APIs
|
||||
|
||||
- [Connect to Azure AD-secured APIs in SharePoint Framework solutions](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient)
|
||||
- [Application IDs of commonly used Microsoft applications](https://learn.microsoft.com/en-us/troubleshoot/azure/active-directory/verify-first-party-apps-sign-in#application-ids-of-commonly-used-microsoft-applications)
|
||||
- [Throttling](https://learn.microsoft.com/en-us/azure/azure-resource-manager/management/request-limits-and-throttling) - The resource provider requests are also throttled per principal user ID and per hour.
|
||||
- [Connect to Azure AD-secured APIs in SharePoint Framework solutions](https://learn.microsoft.com//sharepoint/dev/spfx/use-aadhttpclient)
|
||||
- [Application IDs of commonly used Microsoft applications](https://learn.microsoft.com//troubleshoot/azure/active-directory/verify-first-party-apps-sign-in#application-ids-of-commonly-used-microsoft-applications)
|
||||
- [Throttling](https://learn.microsoft.com//azure/azure-resource-manager/management/request-limits-and-throttling) - The resource provider requests are also throttled per principal user ID and per hour.
|
||||
|
||||
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||
|
||||
@ -185,6 +185,24 @@ All permissions are granted to the whole tenant and not to a specific applicatio
|
||||
- `f5c26e74-f226-4ae8-85f0-b4af0080ac9e` Application Insights API
|
||||
- `797f4846-ba00-4fd7-ba43-dac1f8f63013` Windows Azure Service Management API
|
||||
|
||||
## Help
|
||||
|
||||
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
|
||||
|
||||
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
|
||||
|
||||
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-dashboards%22) to see if anybody else is having the same issues.
|
||||
|
||||
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-dashboards) and see what the community is saying.
|
||||
|
||||
If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-dashboards&template=bug-report.yml&sample=react-dashboards&authors=@kkazala&title=react-dashboards%20-%20).
|
||||
|
||||
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-dashboards&template=question.yml&sample=react-dashboards&authors=@kkazala&title=react-dashboards%20-%20).
|
||||
|
||||
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-dashboards&template=suggestion.yml&sample=react-dashboards&authors=@kkazala&title=react-dashboards%20-%20).
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-dashboards" />
|
||||
|
||||
50
samples/react-dashboards/assets/sample.json
Normal file
50
samples/react-dashboards/assets/sample.json
Normal file
@ -0,0 +1,50 @@
|
||||
[
|
||||
{
|
||||
"name": "pnp-sp-dev-spfx-web-parts-react-dashboards",
|
||||
"source": "pnp",
|
||||
"title": "Application Insights and Cost Management Dashboards",
|
||||
"shortDescription": "Sharing Application Insights and solution's cost information with your stakeholders typically requires either using _Azure Dashboards_ or using _Power BI_. This sample solution allows displaying this dashboards directly in a SharePoint site or a tab in MS Teams, moving it close to the users.",
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dashboards",
|
||||
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dashboards",
|
||||
"longDescription": [
|
||||
"Sharing Application Insights and solution's cost information with your stakeholders typically requires either using _Azure Dashboards_ or using _Power BI_. This sample solution allows displaying this dashboards directly in a SharePoint site or a tab in MS Teams, moving it close to the users."
|
||||
],
|
||||
"creationDateTime": "2023-06-05",
|
||||
"updateDateTime": "2023-06-05",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.16.1"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-dashboards/assets/AppInsights.png",
|
||||
"alt": "Web Part Preview"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "kkazala",
|
||||
"pictureUrl": "https://github.com/kkazala.png",
|
||||
"name": "Kinga Kazala"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"name": "Build your first SharePoint client-side web part",
|
||||
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -1 +0,0 @@
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user