Sneezry / Azure-AppServices-Diagnostics-Portal

Azure Web Apps Support Center provides developers with various features to troubleshoot their applications hosted on App Service.

Azure App Services Diagnostics Portal And Applens

This is the repository for Azure App Service diagnostics experience.

Steps to upgrade to Angular 8 and run projects locally:

• Install Node 14.*
  • Download the .msi file from https://nodejs.org/en/download/ and install it on your machine
• Install Angular-CLI 8
  • npm install -g @angular/cli@8
• Build the diagnostic-data lib, Applens and Diagnostics Portal:
  • npm run build
• Run the project locally:
  • To run Applens: npm run applens
  • To run Diagnostics Portal: App Service Diagnostics Portal

First time set up prerequisites

• Node 12.*
• Node Package Manager (npm)
• Typescript npm install -g typescript
• Angular-CLI npm install -g @angular/cli@8

Project Structure

root
│
└───AngularApp
│   │   This is the home of the angular code for App Service Diagnostics Portal and Applens
|   |
|   |   angular.json - This is the angular-cli configruation file
│   │
│   └───projects
|       |   This is the list of projects registered in angular.json
|       |
│       └───app-service-diagnostics
|       |   |    This is the code for the external App Service Diagnostics Portal
|       |
|       └───applens
|       |   |    This is the code for Applens
|       |
|       └───diagnostic-data
|           |    This is a library containing the common component and services
|           |    that are used to generate detector views in ASD/Applens.
|           |    Any component or feature that you want to use both internally
|           |    or externally should be put here
│
└───Backend
│   │   ASP.Net Core Backend for App Service Diagnostics Portal
|
└───ApplensBackend
│   │   ASP.Net Core Backend for Applens

Getting Started

• Clone repo git clone https://github.com/Azure/Azure-AppServices-Diagnostics-Portal.git
• Either:
  • Install required dependencies locally by navigating to the angular root folder AngularApp and runing npm install (This will install all the required packages.) OR
  • Build and run a docker container that has all dependencies. Run AngularApp/buildimage.sh (or buildimage.bat on Windows) once to build an image locally and then AngularApp/startcontainer.sh (or startcontainer.bat on Windows) to build a container from that image and open a terminal on it. Once the container is created, you can use the docker UI to stop/start and open a terminal to the container.

App Service Diagnostics Portal

Set Up a Local Development Environment

1. Create a Local Environment Settings file
   • Copy AngularApp\projects\app-service-diagnostics\src\environments\environment.ts to create AngularApp\projects\app-service-diagnostics\src\environments\environment.local.ts
   • Set key "useApplensBackend" to true
2. Get Resource Auth Token from ARM Client:
   • Install ArmClient: choco install armclient
     • Ensure source chocolatey is enabled: choco source enable -n=chocolatey
   • Log in to ArmClient: ARMClient.exe login
   • Run ARMClient.exe token {SubscriptionID} with your Subscription ID, which will copy the Auth Token to the clipboard
3. Add Auth Token and ResourceID to Local Environment Settings:
   • Paste the ArmClient token from the above step into authServiceToken in environment.local.ts
   • Copy the ID of a Resource you want to test, and paste it into authServiceResourceId in environment.local.ts
4. Skip Authorization in ApplensBackend
   • Open appsettings.Development.json
   • Set "ServerMode": "internal"
5. Create a self-signed certificate for Applens
   • Navigate to AngularApp\ssl
   • Follow the instructions in AngularApp\ssl\README.md to create a self-signed certficate and install the certificate for your local machine in Trusted Root
6. Run the SSL server
   • Run npm run ssl-local
   • Navigate to https://localhost:3000 to confirm the server is up

Testing Local Changes in the Azure Portal

• Navigate to the Auzure portal with website extension specified as local: Local Portal Test URL
• This will load the "Diagnose and solve problems" iframe from https://localhost:3000. (Must be running in ssl mode).
• Any changes made to the locally hosted project will be automatically refreshed in the Portal

Testing Local Changes in the Portal

• In order to test your local changes in the portal, you can use the following links:
  • Local: This will load the iframe from https://localhost:3000. Must be running in ssl mode (npm run ssl).
  • Staging: This will load the iframe from https://supportcenter-bay-staging.azurewebsites.net

Back End

• Right now the back end is optional as it is not required for functionality of the angular project.
• You will need appropriate secrets to be added to appsettings.Development.json.
• Open the Backend project in Visual Studio 2017 and run it in IIS Express mode.

Production Build

• The production build commands for the angular projects are as follows:
  • npm run build-applens - Build Applens. Build output is placed in ApplensBackend/wwwroot.
  • npm run build-asd - Build App Service Diagnostic Portal. Build output is placed in Backend/wwwroot.
  • npm run build - Build both App Service Diagnostic Portal and Applens.
• If you have the appropriate Publishing Profiles, you can deploy these changes to the staging slots.
• TODO: Azure Dev Ops Integration