tloy1966 / 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.

Running the project locally:

• Install Node 18.15.*
  • Only version 18.15.* will work for this project as there are dependency changes in latter version of Node which our project is incompatible with.
• Run npm install
• 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

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
• Choose one of the two options below:
  • Setup local machine: Install required dependencies locally by navigating to the angular root folder AngularApp and runing npm install (This will install all the required packages.) OR
  • Docker container: Build and run a docker container that has all necessary dependencies.
    • Install and run the docker desktop client.
    • Run AngularApp/buildimage.sh (or buildimage.bat on Windows) once to build an image locally.
    • Create a container from the image created above by running AngularApp/startcontainer.sh (or startcontainer.bat on Windows) to build a container and open a terminal session on it. Alternately you can use the docker desktop UI to stop/start and open a terminal to the container.
    • From within the container, cd to the AngularApp folder and restore packages via npm install to install npm packages.
    • Continue to the next section. Note: if you are only developing the diagnostic portal and not the backend, you can skip steps 2, 3 and 4. In step 6, if working on Windows, run npm run ssl-local-poll as angular running in the container is unable to monitor the filesystem for changes (auto-recompile on file change)

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