Skip to content

Commit 259bd2f

Browse files
anooptanoopt
authored
Merge pull request #202 from anoopt/joaojmendes-ImageCard-HTML-React-Service-Health
Joaojmendes image card html react service health
2 parents 336b73c + 046a9d8 commit 259bd2f

116 files changed

Lines changed: 36323 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎samples/ImageCard-HTML-React-Service-Health/.eslintrc.js‎

Lines changed: 319 additions & 0 deletions
Large diffs are not rendered by default.

‎samples/ImageCard-HTML-React-Service-Health/.gitignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependency directories
7+
node_modules
8+
9+
# Build generated files
10+
dist
11+
lib
12+
release
13+
solution
14+
temp
15+
*.sppkg
16+
.heft
17+
18+
# Coverage directory used by tools like istanbul
19+
coverage
20+
21+
# OSX
22+
.DS_Store
23+
24+
# Visual Studio files
25+
.ntvs_analysis.dat
26+
.vs
27+
bin
28+
obj
29+
30+
# Resx Generated Code
31+
*.resx.ts
32+
33+
# Styles Generated Code
34+
*.scss.ts

‎samples/ImageCard-HTML-React-Service-Health/.hintrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": [
3+
"development"
4+
],
5+
"hints": {
6+
"no-inline-styles": "off"
7+
}
8+
}

‎samples/ImageCard-HTML-React-Service-Health/.npmignore‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
!dist
2+
config
3+
4+
gulpfile.js
5+
6+
release
7+
src
8+
temp
9+
10+
tsconfig.json
11+
tslint.json
12+
13+
*.log
14+
15+
.yo-rc.json
16+
.vscode

‎samples/ImageCard-HTML-React-Service-Health/.vscode/launch.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Hosted workbench",
6+
"type": "msedge",
7+
"request": "launch",
8+
"url": "https://{tenantDomain}/_layouts/workbench.aspx",
9+
"webRoot": "${workspaceRoot}",
10+
"sourceMaps": true,
11+
"sourceMapPathOverrides": {
12+
"webpack:///.././src/*": "${webRoot}/src/*",
13+
"webpack:///../../../src/*": "${webRoot}/src/*",
14+
"webpack:///../../../../src/*": "${webRoot}/src/*",
15+
"webpack:///../../../../../src/*": "${webRoot}/src/*"
16+
},
17+
"runtimeArgs": [
18+
"--remote-debugging-port=9222",
19+
"-incognito"
20+
]
21+
}
22+
]
23+
}

‎samples/ImageCard-HTML-React-Service-Health/.vscode/settings.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Place your settings in this file to overwrite default and user settings.
2+
{
3+
// Configure glob patterns for excluding files and folders in the file explorer.
4+
"files.exclude": {
5+
"**/.git": true,
6+
"**/.DS_Store": true,
7+
"**/bower_components": true,
8+
"**/coverage": true,
9+
"**/jest-output": true,
10+
"**/lib-amd": true,
11+
"src/**/*.scss.ts": true
12+
},
13+
"typescript.tsdk": ".\\node_modules\\typescript\\lib"
14+
}

‎samples/ImageCard-HTML-React-Service-Health/.yo-rc.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"@microsoft/generator-sharepoint": {
3+
"whichFolder": "subdir",
4+
"solutionName": "Service Health",
5+
"componentType": "adaptiveCardExtension",
6+
"aceTemplateType": "Generic",
7+
"componentName": "M365 Service Health",
8+
"plusBeta": false,
9+
"isCreatingSolution": true,
10+
"nodeVersion": "22.14.0",
11+
"sdksVersions": {},
12+
"version": "1.21.1",
13+
"libraryName": "service-health",
14+
"libraryId": "3afbf950-134f-4452-bfa5-d3bf0a852f1f",
15+
"environment": "spo",
16+
"packageManager": "npm",
17+
"solutionShortDescription": "Service Health description",
18+
"skipFeatureDeployment": true,
19+
"isDomainIsolated": false
20+
}
21+
}

‎samples/ImageCard-HTML-React-Service-Health/README.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# SPFx ACE Service Health
2+
3+
## Overview
4+
5+
SPFx ACE Service Health is a SharePoint Framework (SPFx) extension designed to monitor and display the health status of various services within your Microsoft 365 environment. It provides real-time visual feedback on service status, helping users and administrators quickly identify operational issues or interruptions.
6+
7+
## Features
8+
9+
- **Service Health Dashboard:** Visualizes the current status of all monitored services.
10+
- **Status Indicators:** Uses color-coded icons (🟢, 🟡, 🔴) to represent operational, restricted, or interrupted services.
11+
- **Detailed Status Labels:** Friendly labels for each service state (e.g., Operational, Investigating, Degradation, Interruption).
12+
13+
![Service Health Dashboard](./src/assets/serviceHealth01.png "Service Health Dashboard")
14+
![Service Health Dashboard](./src/assets/serviceHealth02.PNG "Service Health Dashboard Mobile")
15+
![Service Health Dashboard](./src/assets/serviceHealth03.PNG "Service Health Dashboard Mobile")
16+
![Service Health Dashboard](./src/assets/serviceHealth04.PNG "Service Health Dashboard Mobile")
17+
18+
## Technologies Used
19+
20+
- **SharePoint Framework (SPFx) v1.21.1**
21+
- **React**
22+
- **TypeScript**
23+
- **@fluentui/react-components** for UI consistency
24+
25+
## Prerequisites
26+
27+
- Microsoft 365 tenant with SharePoint Online
28+
- Node.js and npm installed
29+
- SPFx development environment set up ([Get started](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant))
30+
- Azure FUnction deployed to provide service health data (optional, if using All usrs option selected on property pane, ) found here [SPFx-ace-service-health-azure-function](react-extension-service-health-azfn.zip)
31+
- Permissions to deploy SPFx solutions to the SharePoint site
32+
33+
## Required Graph Permissions
34+
35+
- `ServiceHealth.Read.All` - Read service health information for all services in the tenant.
36+
37+
## Getting Started
38+
39+
1. **Clone the repository:**
40+
41+
```bash
42+
git clone <your-repo-url>
43+
```
44+
45+
2. **Navigate to the solution folder:**
46+
47+
```bash
48+
cd SPFx-ace-service-health
49+
```
50+
51+
3. **Install dependencies:**
52+
53+
```bash
54+
npm install
55+
```
56+
57+
4. **Run the solution locally:**
58+
59+
```bash
60+
gulp serve
61+
```
62+
63+
## Usage
64+
65+
- Deploy the extension to your SharePoint site.
66+
- The dashboard will automatically display the health status of configured services.
67+
- Statuses are updated in real-time and reflected with clear color-coded indicators and descriptive labels.
68+
69+
## Version History
70+
71+
| Version | Date | Comments |
72+
| ------- | ------------| ---------------- |
73+
| 1.0 | May 31, 2025| Initial release |
74+
75+
## Author
76+
77+
| Solution | Author(s) |
78+
|-------------------------|--------------------------|
79+
| ImageCard-HTML-React-Service-Health | João José Mendes |
80+
81+
## Disclaimer
82+
83+
**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.**
84+
85+
---
86+
87+
## References
88+
89+
- [SharePoint Framework Documentation](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/)
90+
- [@fluentui/react-components](https://react.fluentui.dev/)
91+
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp)

‎samples/ImageCard-HTML-React-Service-Health/assets/sample.json‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
[{
2+
"name": "pnp-sp-fx-aces-imagecard-html-react-service-health",
3+
"source": "pnp",
4+
"title": "Service health - Adaptive Card Extension",
5+
"shortDescription": "SPFx ACE Service Health is a SharePoint Framework (SPFx) extension designed to monitor and display the health status of various services within your Microsoft 365 environment.",
6+
"url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-HTML-React-Service-Health",
7+
"longDescription": [
8+
"SPFx ACE Service Health is a SharePoint Framework (SPFx) extension designed to monitor and display the health status of various services within your Microsoft 365 environment."
9+
],
10+
"creationDateTime": "2025-05-31",
11+
"updateDateTime": "2025-05-31",
12+
"products": [
13+
"SharePoint",
14+
"Viva"
15+
],
16+
"metadata": [{
17+
"key": "CLIENT-SIDE-DEV",
18+
"value": "React"
19+
},
20+
{
21+
"key": "SPFX-VERSION",
22+
"value": "1.21.1"
23+
}
24+
],
25+
"thumbnails": [
26+
{
27+
"type": "image",
28+
"order": 100,
29+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-React-Service-Health/src/assets/serviceHealth01.png",
30+
"alt": "Preview"
31+
},
32+
{
33+
"type": "image",
34+
"order": 200,
35+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-React-Service-Health/src/assets/serviceHealth02.PNG",
36+
"alt": "Preview"
37+
},
38+
{
39+
"type": "image",
40+
"order": 300,
41+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-React-Service-Health/src/assets/serviceHealth03.PNG",
42+
"alt": "Preview"
43+
}
44+
],
45+
"authors": [{
46+
"gitHubAccount": "joaojmendes",
47+
"pictureUrl": "https://github.com/joaojmendes.png",
48+
"name": "João José Mendes"
49+
}],
50+
"references": [{
51+
"name": "Viva Connections Extensibility guidance",
52+
"description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.",
53+
"url": "https://aka.ms/viva/connections/extensibility"
54+
},
55+
{
56+
"name": "Adaptive Card Documentation",
57+
"description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.",
58+
"url": "https://adaptivecards.io/"
59+
}, {
60+
"name": "Adaptive Card Extension Design Guidance",
61+
"description": "Design guidance for laying out Adaptive Card Extensions.",
62+
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro"
63+
}
64+
]
65+
}]

‎samples/ImageCard-HTML-React-Service-Health/config/config.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
3+
"version": "2.0",
4+
"bundles": {
5+
"m-365-service-health-adaptive-card-extension": {
6+
"components": [
7+
{
8+
"entrypoint": "./lib/adaptiveCardExtensions/m365ServiceHealth/M365ServiceHealthAdaptiveCardExtension.js",
9+
"manifest": "./src/adaptiveCardExtensions/m365ServiceHealth/M365ServiceHealthAdaptiveCardExtension.manifest.json"
10+
}
11+
]
12+
}
13+
},
14+
"externals": {},
15+
"localizedResources": {
16+
"M365ServiceHealthAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/m365ServiceHealth/loc/{locale}.js"
17+
}
18+
}

0 commit comments

Comments
 (0)