Microsoft 365 Community Microsoft Teams, 20 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Service Health solution for Microsoft 365 with SharePoint Framework

Description

In this 9-minute developer-focused demo, Harminder Singh shares a SPFx web part that uses the Graph API to display the health status for all Microsoft 365 services as seen only by Admins in Admin Center, presently. The web part delivers a similar appearance and drill down functionality as in Admin center. Web part broken into multiple sub-components with separate styling for code manageability/reuse. Many of the components are stateless.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 20, 2023.

Demo Presenter
• Harminder Singh (Nagarro) | @Harminder_Sethi

Supporting materials
• Sample - Service Health for Microsoft 365 | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-m365-services-health

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

A

Which I created with the help of graph API and the idea I got when we had a outage a couple of months back, and that was a major outage and nobody was having any clue what's happening so in case. If someone is uh admin, they could go to the service health and they could check what's happening because service helps provide us. The current status and all the issue, laws as well. So I got that idea.

A

I thought, let's make that work for everyone with the help of graph API and I, did it before I move on or myself Harminder Singh um M365 solution, developer, I'm working with nagaro in India and I live in City, beautiful Chandigarh.

A

These are my handles where anyone can contact with me and I'll, be happy to connect and share my knowledge and will see my other feedbacks, also so moving to demo.

A

If we want to see this service health of any of the Microsoft 365 service, then we have to go to the admin Center and in the health section we have the service Health option available where we see the current health status of all the services. We have in Microsoft 365.

A

and as of now, what we see is exchange online is having three advisory and Microsoft 365 Defender is having one advisory so similar way in case. If someone wants to uh see all these status, then I created this web part, which looks similar to the service Health. We have in Microsoft, 365 admin, Center, so look and feel wise and the functionality wise I try to replicate everything similar to the uh Microsoft admin Center.

A

If I click on this three advisories, it shows the Tableau structure with all the advisories we have with the issue title and the issue type. So if I click over here, it will show the same table and in case, if I click on any of the item, it will show the status with all the updates, similar to the one we have in the Microsoft 365.

A

and in case. If we have only one advisory or one issue, then it will directly go to the detail section and it will not show the table which is similar again to the one we have in the Microsoft 365., so to make it work. I'll move to the code.

A

Part to make it work, what I have used is the The Source Microsoft graph, and the scope which I set is to service Health, three dot all and from the web part perspective, and this is the entry point for the web part where I have used very minimize uh properties.

A

So I just have the title which sets the web part title, and on top of that, what I do is I create a graph service which is a kind of reusable service, and my normal practice is that I create all these services in a common folder outside the web parts. So in case in future, I need to add any new web part which will be using the same graph. Service.

A

I will be referring this service from the common folder, which is in the services, so whatever Services, which I think is common across all the weapons I put that in a common folder over here and I initialize that service in this on init method and pass that instance to my main element, react element which is M365 service Health in the form of property. So it receives the title property. The context of the web part and the graph service, which I initialized over here, if I, quickly move to the graph service.

A

It simply has a two methods. One is a private which helps us in getting the client, the graph client and the other one is the end point which provides us. The health overviews, which also has the issues detail uh expanded. So that is all from the service perspective and if I move to the web part or the main element, then it has two sub element which are again very simple.

A

First simply shows the title and other contains the actual logic, and if I move to the uh the main element, I would say, or the component I would say, then it has a very simple return method which either show the spinner when the form loads. So graph API takes some time to provide the actual data, so I simply show the spinner and then the detail list from the fluent UI, which shows the uh the title and the status of the services- and we have two panels over here.

A

First is showing the tabular uh structure when we have more than one issues or advisory. So if we click on that, then it shows the table and the other one is the detail thing which we get when we have only single advisory or if we click any of the item in the table from the first panel.

A

The idea to create the two panel was that in case, if someone opens the uh table or the or the panel which is having the table, then they can go back by clicking on the back button.

A

So it's better that we manage it in separately, so that uh I can show or hide one of the panel at one point and all these components which I have designed, except this, the main webpart.ts file are based on the functional based, react components and in this react.use effect hook, I am calling the graph service gelt get health overview function, which provides me the service, Health response and based upon the response which I received I create the list view items, and this list view helper service. Again.

A

This is a local service which I have created in this web part, and it gives me the code or the functionality to provide the count and show whether it is an advisory or incident, or if it is healthy, then it will simply show the healthy. So basically it will create the structure of the item and then the detail list will show that item to me over here and once we select any of the item from the detail list. If it is having more than one advisory or issue, then it is.

A

It shows this panel and in this panel I again have the table structure created and it's again stateless component. It doesn't have any state, it simply Returns the structure of the table and the other component, which I have is, which shows the complete detail of the issue. That again, is a stateless component. Now the good thing which I got is that this issue, Service uh Returns the proper HTML for the detail, issue logs, so I just need to iterate through all the post and those are again HTML and I simply set it in the development.

A

So I don't need to design any of the CSS or I need I, don't need to provide any of the styling except these uh Miner Styles, which allows me to set the margin and white space area.

A

So I think that was all before I close this one I just want to show one more thing that I try to break all this uh web part into multiple sub component and for each of the component I try to create these stylings at the component level, so that I have a a very manageable code and in case, if I see any issue, I simply need to go to that component at and I I can fix it uh back to you. Getty.

B

Fantastic I mean that that's great I loved, looking at your code by the way nice, nice and clean and love the use of the stateless components there, um as well as the dangerously set in a HTML of property, which I've not seen for a while, but I've used myself in the past. uh Definitely but uh fantastic solution, great use case as well.

B

um So you know if you're, actually a question is this: has this been put in the samples Gallery? um Is this available or where people you know, can people get to this? Yes, it is fantastic. So, if you've enjoyed what you've seen uh then take a look at the samples Gallery uh and take a look and have a look through the code yourself and maybe even contribute to it as well make it you know, add to it make it better than it already is uh fantastic.

A

Thank you, foreign.