review changes

samples/react-m365-services-health/README.md

@@ -1,4 +1,4 @@
-# Microsoft 365 Services Health
+# Service Health for Microsoft 365
 
 ## Summary
 
@@ -38,7 +38,18 @@ For more information about SPFx compatibility, please refer to <https://aka.ms/s
 
 ## Prerequisites
 
-> Any special pre-requisites?
+- SharePoint Online tenant
+- You have to provide permission in SharePoint admin for accessing Graph API on behalf of your solution. You can do it before deployment as proactive steps, or after deployment. You can refer to [steps about how to do this post-deployment](https://learn.microsoft.com/sharepoint/dev/spfx/use-aad-tutorial#deploy-the-solution-and-grant-permissions). You have to use API Access Page of SharePoint admin and add below permission for our use case.
+
+```
+ "webApiPermissionRequests": [
+      {
+        "resource": "Microsoft Graph",
+        "scope": "ServiceHealth.Read.All"
+      }
+    ]
+
+```
 
 ## Contributors
 

samples/react-m365-services-health/assets/sample.json

@@ -2,12 +2,12 @@
     {
         "name": "pnp-sp-dev-spfx-web-parts-react-m365-services-health",
         "source": "pnp",
-        "title": "Microsoft 365 Services Health",
+        "title": "Service Health for Microsoft 365",
-        "shortDescription": "M365 Services Health solution show the health status for all the Microsoft 365 services",
+        "shortDescription": "Service Health for Microsoft 365 solution show the health status for all the Microsoft 365 services",
         "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-m365-services-health",
         "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-m365-services-health",
         "longDescription": [
-            "M365 Services Health solution show the health status for all the M365 services"
+            "Service Health for Microsoft 365 solution show the health status for all the M365 services"
         ],
         "creationDateTime": "2023-02-03",
         "updateDateTime": "2023-02-03",

samples/react-m365-services-health/config/package-solution.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
-    "name": "M365 Services Health",
+    "name": "Service Health for Microsoft 365",
     "id": "f4d4b329-f1c6-49c9-a2fa-12a9816ac717",
     "version": "1.0.0.0",
     "includeClientSideAssets": true,
@@ -22,10 +22,10 @@
     ],
     "metadata": {
       "shortDescription": {
-        "default": "M365 Services health"
+        "default": "Service Health for Microsoft 365"
       },
       "longDescription": {
-        "default": "M365 Services health"
+        "default": "Service Health for Microsoft 365"
       },
       "screenshotPaths": [],
       "videoUrl": "",
@@ -34,7 +34,7 @@
     },    
     "features": [
       {
-        "title": "M365 Services Health Feature",
+        "title": "Service Health for Microsoft 365 Feature",
         "description": "The feature that activates elements of the react-m-365-services-health solution.",
         "id": "9d9e7584-45be-4df4-8023-5c271402cf87",
         "version": "1.0.0.0"

samples/react-m365-services-health/src/common/services/GraphService.ts

@@ -1,3 +1,4 @@
+import { ServiceHealth } from "@microsoft/microsoft-graph-types";
 import { MSGraphClientV3, GraphRequest } from "@microsoft/sp-http-msgraph";
 import { WebPartContext } from "@microsoft/sp-webpart-base";
 
@@ -12,11 +13,10 @@ export class GraphService {
 		return await this.context.msGraphClientFactory.getClient("3");
 	};
 
-	public getHealthOverviews = async (): Promise<any> => {
+	public getHealthOverviews = async (): Promise<ServiceHealth[]> => {
 		const client = await this.getClient();
 		const request: GraphRequest = client.api("/admin/serviceAnnouncement/healthOverviews");
-
 		const response = await request.expand("issues").get();
-		return Promise.resolve(response.value);
+		return Promise.resolve(response.value as ServiceHealth[]);
 	};
 }

samples/react-m365-services-health/src/common/services/HelperService.ts

@@ -1,5 +1,4 @@
-export namespace HelperService {
+export const getFormattedDateTime = (value: string): string => {
-	export const getFormattedDateTime = (value: string): string => {
 	const date = new Date(value);
 	const dateString = date.toLocaleDateString("en-US", {
 		month: "long",
@@ -12,9 +11,9 @@ export namespace HelperService {
 		hour12: true,
 	});
 	return `${dateString} ${timeString}`;
-	};
+};
 
-	export const getProductIcon = (value: string): string => {
+export const getProductIcon = (value: string): string => {
 	let icon: string = "Product";
 	switch (value?.toLowerCase()) {
 		case "microsoft intune":
@@ -23,7 +22,7 @@ export namespace HelperService {
 		case "microsoft 365 apps":
 		case "microsoft 365 defender":
 		case "microsoft 365 for the web":
-			case "microsoft mefender for cloud apps":
+		case "microsoft defender for cloud apps":
 		case "privileged access":
 			icon = "Product";
 			break;
@@ -89,5 +88,4 @@ export namespace HelperService {
 			break;
 	}
 	return icon;
-	};
+};
-}

samples/react-m365-services-health/src/webparts/m365ServicesHealth/M365ServicesHealthWebPart.manifest.json

@@ -18,7 +18,7 @@
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
     "group": { "default": "Advanced" },
-    "title": { "default": "M365 Services Health" },
+    "title": { "default": "Service Health for Microsoft 365" },
     "description": { "default": "m365-services-health description" },
     "officeFabricIconFontName": "HealthSolid",
     "properties": {

samples/react-m365-services-health/src/webparts/m365ServicesHealth/components/ServiceHealthOverview/IssueDetail/IssueDetail.tsx

@@ -1,7 +1,7 @@
 import { ServiceHealthIssuePost } from "@microsoft/microsoft-graph-types";
 import Style from "./IssueDetail.module.scss";
 import * as React from "react";
-import { HelperService } from "../../../../../common/services/HelperService";
+import * as HelperService from "../../../../../common/services/HelperService";
 import { Icon, Label } from "@fluentui/react";
 import { IIssueDetailProps } from "../../../interfaces/ServiceHealthModels";
 

samples/react-m365-services-health/src/webparts/m365ServicesHealth/components/ServiceHealthOverview/ServiceHealthOverview.tsx

@@ -2,7 +2,7 @@ import { DefaultButton, DetailsList, IColumn, IPanelProps, IRenderFunction, Pane
 import { ServiceHealth, ServiceHealthIssue } from "@microsoft/microsoft-graph-types";
 import * as React from "react";
 import { IServiceHealthOverviewItem, IServiceHealthOverviewProps, IServiceHealthOverviewState } from "../../interfaces/ServiceHealthModels";
-import { ListViewHelperService } from "../../services/ListViewHelperService";
+import * as ListViewHelperService from "../../services/ListViewHelperService";
 import { backButtonStyles, cancelButtonStyle, issueDetailPanelStyles, issueListPanelStyles } from "./Constant";
 import { IssueDetail } from "./IssueDetail/IssueDetail";
 import { IssueList } from "./IssueList/IssueList";

samples/react-m365-services-health/src/webparts/m365ServicesHealth/services/ListViewHelperService.ts

@@ -2,8 +2,7 @@ import { IServiceHealthOverviewItem } from "./../interfaces/ServiceHealthModels"
 import { IColumn } from "@fluentui/react";
 import { ServiceHealth, ServiceHealthIssue } from "@microsoft/microsoft-graph-types";
 
-export namespace ListViewHelperService {
+export const getOverviewListViewColumns = (): IColumn[] => {
-	export const getOverviewListViewColumns = (): IColumn[] => {
 	const viewColumnsSchema: IColumn[] = [
 		{
 			key: "Service",
@@ -21,9 +20,9 @@ export namespace ListViewHelperService {
 		},
 	];
 	return viewColumnsSchema;
-	};
+};
 
-	export const getListViewItemsForOverview = (response: ServiceHealth[]): IServiceHealthOverviewItem[] => {
+export const getListViewItemsForOverview = (response: ServiceHealth[]): IServiceHealthOverviewItem[] => {
 	const overviewItems: IServiceHealthOverviewItem[] = [];
 	for (let i = 0; i < response.length; i++) {
 		const value = response[i];
@@ -61,5 +60,4 @@ export namespace ListViewHelperService {
 
 	overviewItems.sort((a, b) => a.Status.localeCompare(b.Status));
 	return overviewItems;
-	};
+};
-}