Extending Windows Admin Center to manage your applications and infrastructure using modern
Hi. Everyone. Thank. You for coming we know it's getting, close to the end of the conference people. Are flying out but. Thank, you again for coming I'm, Daniel Lee I'm a program manager on the windows admin Center team I'm here, with Matt Wilson senior, dev lead on the, windows admin center, team as well and today, we're here to talk about how. You can develop your server, infrastructure, and server, application, management tools in Windows, admin center and Matt, will be doing a great demo, on how to build a container, management tool in as. An extension in just under 10 minutes so we, hope you'll, stick around. So. In case you're not familiar familiar. With Windows admin, center. You've. Probably seen. And used many, of these tools for. Managing or troubleshooting, Windows and Windows Server in the past right these. Tools have been around for 10 some, even 20, years or more maybe and a. Lot of them haven't been changed or updated in, long long time well. We're. Changing that with Windows. And min Center windows admin Center is a new management, experience, for Windows and Windows Server for. IT admins scenarios the. UI is runs. On the browser its web, base running on html5, built, on html5 and. Angular. Typescript. And, then behind, the scenes we're remote running. Rope a powershell, or WMI to manage target, servers right, so it. It, runs in the browser but it doesn't, have any internet, or power. Internet. Or Azure, dependency. It runs all completely on premise so even if you're in a disconnected environment you can run this on your, Windows laptop, or Windows Server 2016 to. Manage and manage, your Windows, Server machines. Just. To give you a sense. Of what, window, windows, admin center looks like this is the device manager in Windows admin center. This. Is the File Explorer web browser-based. Virtual. Machines we have a list of all the VMS you can do every almost everything you can do in hyper-v, manager but we also have a. Visualization. For resource consumption, across, the host and. We. Even have a web-based PowerShell, console, for, any automation. Running, that you have to do. We've. Just announced GA four, weeks ago we've, been in, technical. Preview for exactly, in the air as project Honolulu, four, weeks ago we announced general. Availability and since, then our deployment, and installations, have tripled, we're, seeing, 60,000. Deployments, and more and, almost. 800,000. Managed. Nodes being managed by windows admin Center currently. So. All. Great but. What does this mean for developers. Right. From. The very beginning we knew that the Windows. Server management ecosystem. Is huge right there's hardware, there's Windows Server the OS there's. Roles, and features and applications and services on top of that and if you look at the management lifecycle, there's, monitoring. Troubleshooting.
Management Much more and we realize that what. We provide in Windows admin center is just a small piece of this entire ecosystem so. Our vision for Windows, admin, center was to make sure that we. Can build a platform that our developers. And partners can leverage upon and we, can seamlessly integrate, with the existing services, and products. So. Why develop on Windows admin center right. We. As I showed you in the previous screenshots, we have over, 20 tools that we've already built since, it's a web. UI base it's, much more easier to integrate with and using deep links you can jump, from your serve your products, to Windows admin Center and from Windows admin center to, your products or services. Sooner. Or later when you start building your own tools you're going to run into things like identity. Services how do you integrate with a three Active Directory multi-factor. Authentication. Access. Control, with role-based at our, back right and all, these things building, them from scratch is a lot of work so, we. Provide these as. Platform. Capabilities that you can leverage upon so instead. Of building these yourself you can use the platform, capabilities, of Windows admin center provides and provide a consistent experience for, your customers. Using. The latest swept acknowledge, you can build upon html5. Angular. Tie script there are a lot of great. UI. Libraries, out there that can use and we have over 20 controls that we've built specifically. For Windows, admin center that you can use to build real grid controls tree, controls and pretty. Much all you need for building. IT, admin management tools and. Lastly. This is the, fastest-growing. Server, management tool in Microsoft history. So, becoming extension gives your product in your services, much, more visibility to draw, a broader customer. Base. Alright. So hopefully, you're. Still interested and Matt will take it on from here to show demo. How to build an extension in ten minutes alright. Guys, so. We're, going to build in a, little bit more than 10 minutes a windows. Container management extension, for Windows admin center it's a lot of windows they're, just. Gonna I actually, recorded, this because, there, are a couple of things that I wanted to fast-forward through like NPM. Install but. Also it's terrifying, to type in front of people so I didn't want to have that in front of me so. One, of the first things that you're going to do when. You start building your extension is you're going to go out and clone our template, repository, that we have up on github. This. Repository contains, everything that you need to get up and running and plugged into Windows admin Center and you. Only need a couple of real quick steps to get up and going the, first one being we're, gonna go ahead and rename our directory, because we, don't want them a million extension. Templates, running out there in this window you can see that we're, going to go ahead and call it MS, build windows containers, I'm. Gonna talk fast through a lot of this stuff but there's gonna be a lot of things that are everything's up on github so you can catch it afterwards, okay, so now we live in get a Visual Studio code if. You build angular before this is looking really familiar to you the first, thing that I did you don't necessarily have to do this first but, I added the PowerShell scripts that I'm gonna use to interface. With the docker CLI, the. Very first one is going to be my get containers and. As you can see this is just going this is just straight docker CLI, containers. Lists and formatting, back. Basically, what I want into, my data set that I can be parsed and thrown into my data table, the. Next grip I'm going to be adding is just a start containers and. That's. It's nothing but start docker, run and then pass in the name, of the image that you want to run and the, final one is going to be our stop so that we can just start and stop whatever we want to do here, alright.
Oops. I got a little ahead of myself there. I, like, you as you can see it with this is just powershell taking into parameters from the UI so, that we can isolate which ones we want to call once. We get that all saved up. The. Next thing we're gonna do is start renaming the actual rename, tokens inside of the template we scatter these around at vital points or that you need to change, in order to customize. This to be your extension, in. This case I do a global fine for this exclamation. Point glow a company, name and I start replacing, it with Microsoft. It's, really easy to go through here and just do a replace with all of this and, once. I'm done I'm just gonna fast forward through the rest of these because we have a sever several other tokens that name to be and then need to be renamed there there. We go as we. Get to the end you, can see we do things like product, names descriptions. But. As the last one comes out here we, have now renamed, everything that we need in order to start actually pulling in our NPM directory all right NPM dependencies, I'm. Gonna go back save, all of these so that everything is clear and then. Come back down to my command line clear. The screen and, go. Ahead and do a quick. NPM. Install and, so this is going to see all of the dependencies, that we pull in every it's things like angular and typescript. But, you can check out our package jason to see what everything is this. Is one of the vital things that I wanted to fast forward because this took a little bit to run through. So. At the end of this what's. Gonna you're gonna have everything essentially, set up that you can just more or less run your extension inside. Of Windows admin Center I do, a quick build gulp, is are built. Harness. You, can use grunt if you feel so inclined or, any of the other ones but the. One, that we've documented is, gulp, this. Is going to come back and it's gonna throw up an error that says that, there's no windows container module this, is logical we haven't made it quite yet. Now, that we're here and we've pulled in all of our dependencies, we, can go back into the command line and start adding what, we need to do about the components, and modules from angular that we need, for. Using the angular CLI. I just could do an mg generate create, my new module which is going to be my windows containers, nothing. Tricky here so far that. Pops up and then. The next thing I'm going to do is generate. The. Components. That I need or the one component that I need for this which is going to be ng generate component, windows. Containers, you. Can see up in our Explorer that we. Have the windows containers folder up there now and, we'll. Go ahead and pop, that open here and. We. Have just one more step well, actually we've got a couple more steps until we're able to run this but, we're gonna add a.
Windows. Container routing from. TS file and this, we use basically angular angular routing module to do all the routing within the application. And. This, is pretty much standard copy. And paste in we have a couple more renamed tokens don't. Worry about this too much this is all documented up on, our Doc's. File it's a kms. You. AC SDK. Doc's if you want to see and they'll walk you through this whole process we, also have these links at the end so you don't have to worry about writing them down, so. I've renamed the component, and added in my windows windows, container component, and then I deleted the the extra child components. Because we're just keeping this really light and simple for this first view here alright. So once we're here we're, gonna go ahead and save everything and, then. We, are going to come. Back here take. A look and add. There. We go cool pop down and do another go build so, this goal boobs actually going to succeed but it does a couple more platform things for you inside, inside, of windows admin center we've built a bunch of helper functions to, do things like automate. The, localization. So we use a strings, reservation, that you can put your strings into and then use a localization team to spawn those out to the eighteen languages that we support but. More importantly, actually into the index is that scripts folder that where I put the PowerShell scripts or it, originally. And then. Creates. A PowerShell. Scripts class that I can reference inside, of my types trip through the rest of the application to simplify my bridging, between angular. And PowerShell, and the remote managed node so. I'm. Adding my service here so we're isolating our, PowerShell there's. A couple of things that I want to call out that PowerShell, scripts class is the reference reference down to the scripts folder that we were talking about earlier and then, we're also have a PowerShell session, that's not necessarily, used I just want to highlight it here this, is really important, because a remote powershell session the session takes about two to four seconds to spin up and to. Not hit performance, issues, we want to reuse as many sessions as possible. Right. Off the bat the first method I'm going to create is the start, containers method. I'm. Gonna require that the caller provide, me the session that I should be executing, this PowerShell script on and then. With. The script that I had the requirement, of the image name that I was going to be using. Once. We hit this point I need, to actually build up the command that I'm going to be executing, through PowerShell we, have a couple more PowerShell helper or power because we have a couple more helper classes throughout the the platform one in particular is this powershell that creates skipped script, what, it's gonna do is it's going to take the script, that we use in his powershell scripts dot.
Start. Container that's, a direct reference to the powershell script that we created they get our start container of dot ps1 and then. It's also going to take as an input the. Oops. Sorry maybe. I uh oh, I went. Too fast. Let. Me get back to that. Where. Was that. Mm-hmm. Sorry, guys, yeah. We'll start from here all. Right so, back. Here again. We're, gonna go ahead and create our command and like. You said this is using some of some of the helper functions that are built inside of the platform, specifically. In this case the create script which is going to use our PowerShell scripts class that I was telling you about earlier and then. It's, gonna call in or have a reference, to the, start, container, which. Is the PowerShell script that I wrote in the original steps, along. With this it's going to take as an additional input the arguments, that I need to pass into that pass, into that script if there are no it's optional, so if those parameters. To the script you just don't pass anything but, in this case I'm passing just an object that has one, property, with the value name and then, and, then the actual image name that's coming in on the method after, that we're, going to go ahead and call what is our app contact service and this is the service that actually is going to take the PowerShell script and the command that we just generated and drop, it into our remote powershell session and. Tell it to run this command on the session that we provided so once again we're trying to reuse as many sessions as possible to make sure everything is as it's efficient. Now. I'm going to fast-forward through a bunch more stuff here because we don't actually need to see if. You understand, how to make the powershell scripts here you don't actually need to see how, to do it three more times but. I am gonna call out that there's two basic methods that we really use here first, it's going to be the stop' container which is almost an exact, copy of the start container just changing, around the script that we reference and then, the other one which was up, above was the get container list all that does is execute the powershell script brings, in the string response and parses it into the objects that i'm binding to my David data table, okay. Now, we're on to our module now that we have our services and our dependencies, ready to go we actually have to tell angular this is what we're going to be using now. It. Is copy and paste the, big things for you to see here is that our providers I'm referencing the container services, that our container service that we just rent wrote. And I'm, using a couple of the custom, controls but we're going to get to that in just a little bit here in, the, container component, or the windows container component, I blow, by this because if you built angular it's pretty much you know what you're used to it's just writing the typescript, if that drives your view and. Then. I'm gonna go over to the HTML and, I'm gonna pause here for just a second to kind of explain because these are a little bit more of the platform things that we have going on so. You. Can kind of see a couple things that are a little bit weird we got this SME action, bar and then, an SME action, button and, underneath. That we have the data table so we've built a series of custom controls that you guys can use and your implementation, so that you don't have to do things like how, am I going to render these things in a data table and we've. Put, a lot of effort into streamlining. And making these things super efficient and super useful with filtering sorting, and a. Customization, of the columns. As well, as the action bar is actually control that we've built that straight is the way however. Long you give it and it will automatically, expand and contract and add in hide buttons as, you as you have.
The Room for them. Alright. And then. Once, we get through this we're. Actually gonna we're actually at the point where we can now come in and build, our extension. I'm going to do this one last time and this. Is going through making sure that I have everything ready to go. Cleaning, it up fast-forward. Through it all because we don't need to see another build process again and then. The, last thing that last step individual, studio code is what we call the gulp serve and, this. Is where we're actually taking and packaging, the extension that we just wrote and we're, going to host it on port. 4200, that's totally, customizable, it can be whatever you want I just choose 2,200 because why, not and, then I've also configured. My Windows app and Center to listen on port 4200. For external extensions, now, Windows admin, Center when it does fire, up and sees, that there's something on port 4200, it will actually go pull that manifest, and extension and site loaded into the tool so that you can actually see your tool in the full list of Windows admin Center and debug it with the rest of the tools that are in there so, this is going to finish up in just, a second and we. Are gonna go ahead and pop, over to edge and check out what we just wrote. Alright. So. Here's the view of Windows admin Center however, we got our full to list off to the left and because, it's just site, low to this extension I'm gonna go ahead and hit refresh on this and, when. This comes back it's, gonna go through and it's indexing, all of the extension, that it has already built in or plugged into it but it was also finds that I have site loaded my extension on port 4200, and loads, it in with my tool list here oh quit click here and then it's going to start up and this is the UI that we just built right, now it's actually querying that or executing. That get containers, list and returning back and listing everything that, came back there as you can kind of see if we run the hello world I really like that one a. Couple of times and I've, been able I can select it now and click, the start and what. This is going to do is it's going to take that image name from this in. The pipe script pass it down through the service and then, execute. The PowerShell, wait for the response and come back I didn't. Quite build an auto refresh in here so we're just we refresh, the page to see the data change. But. When. That comes back what, you're gonna see is that the table list is fold and populated, and that, we have my, new entry. For the the image, that I started, up there. In. A second I had. A couple other things to say that I forgot there but that's alright alright. Spinning. Up my tables loading it's querying that container. List again and as. You can see that top one there the hello world exited 30 seconds ago so we have spun up a new container and the time that it took me to reload the page it already exited but, that's all it takes to build an extension for Windows management center so I'm gonna pass it off back to Daniel thank, you man. Thank. You. So. Once. You've developed, and, your your, extension it's ready to release how do you actually get it out to your customers, right. Microsoft. Hosts, a nougat feed for, four. As a repository for four packages. So you package up your extension. As a nougat package submit. It to Microsoft and then we'll do a quick review just to make sure that everything is set and then we'll publish it to the nougat feed for you once. It's on the nougat feed all the, windows admin Center users are connected, to the feeds so you go to settings. Manage. Extensions. You. Can see that we have six extensions. Already available for you to download and start using today. If. I click on the data on must extension, which I'll show you and talk about a little more you. Can click install we'll make sure that you have admin, privilege to actually download, and install extension, it'll. Install in the background, and, in a couple of seconds the UI will refresh and the, extension actually installed, and running in Windows admin center, so. For. The past few months we've been working really closely with a few partners on building, extensions for their products and services and like to share, some. Of the integration, scenarios that we've we've, built with them. The. First one is the Fujitsu server view health and raid extension, if, you have a, producer. Server running in your data center and you have the Fujitsu extension, loaded then will automatically, detect that it's the Fujitsu server and then these tools will automatically show up you, can see that there. We. Have the they've, built the health, state component Street showing you the health of each of those server. Components, and if, you drill in to the tree you can see processor, memory fans, and and.
Get. In-depth. Information, on all these different components you, can see that they've used the native Windows, admin center grid control and tree, control so, the look and feel is very similar to the rest of the windows at my Center UI. One. Of our other partners stayed on is. A industry. Leader in hyper-converged. Infrastructure, running Windows Server and they, had. Their. Own must, UI that was built in in in. We're in the web UI and we, were able to be it, integrate. Their, UI as an iframe into. Windows. Admin center so you can see they're doing some amazing work like with physical. Disk mapping, and they can show which discs are failing and need to be replaced something, that Microsoft, and our team would never be able to build right, and. Finally. Squared, up is a company. That's developing, visually. Visualizations, for. Server. Topology. And, historical. Performance, mapping. So, you can see when you're connected to a server and you've launched, the squared up extension. You can see that which. Servers, this server is connected to and if I turn this server down or if this server is not performing well which services, and other servers can be impacted by that they, also have performance. To start or so historical chart view so. Windows. Admin center our, tools are, connect. In real time to show real time data but they have historical, database to, show a performance, data for the past month. Or a year right. So. As. I, mentioned earlier our, vision. For the, windows and, min Center ecosystem, is being. Able to bring hardware. Operating. System application, services, and monitoring, management troubleshooting, all together and you can see the, work that we've done with our partner is starting to enable that and so. We. Hope that you'll. Be interested and, jorah. Join the. Ecosystem. For building Windows server and windows, admin Center extensions. So. Again. Just a few links when Center, is available for download today, so, go take a dot m s- m and center there's, a lot of documentation we didn't go through a lot of detail so you can see a lot about what. Windows admin center is and how you can deploy it and then, again a KMS /w, AC - SDK, the SDK. Is available on, github and the example. That Matt, just ran through today is all available for you to download and take a look as well we're. Releasing. Updates to, our product, and the. SDK, on every. Month or two so we, rely, very heavily, on your feedback go to user voice to send us feedback on the product self and, github. For feedback on the sdk thank. You.
2018-07-18 16:04
