Visual Studio Code AKS Tools

Introduction

Azure Kubernetes Service (AKS) Extension for Visual Studio Code helps enable AKS developers with one-click quick to deploy features with in vscode eco-system.

Installation

Download and install the Azure Kubernetes Service extension for Visual Studio Code.
Wait for the extension to finish installing then reload Visual Studio Code when prompted.
Once the installation is complete, you’ll see a section named Azure under Clouds.
Sign in to your Azure Account by clicking Sign in to Azure…, (Afternatively, user can use ctrl + shift + p or cmd + shift + p and choose AKS: Sign in to Azure) screenshot below could guide the switch for account as well. If your account has access to more than one Azure tenant, you will be prompted to pick one. To change the selected tenant later, you can run AKS: Select tenant... from the command palette ctrl + shift + p or cmd + shift + p.

Sign Into or Switch Account

Development

Package Scripts

This gives an overview of the npm scripts available for development and release of the extension. See the scripts block in package.json.

These can all be run from the command line in the root of the repository (with npm installed), using npm run {script-name}.

Environment Initialization

install:all: Installs npm dependencies for both the main extension project and the webview-ui sub-project. It’s recommended to use this instead of npm install, which will only install dependencies for the main project.

Development and Testing

dev-webview: for concurrent development/debugging of webview UX.
build-webview: bundles and minifies the webview UX for consumption by the extension.
webpack: builds and packages the extension.
test: runs automated tests.

Not for Running Directly

Some scripts are invoked by other scripts or tools, so need not be run directly, or are otherwise not required for general development tasks:

vscode:prepublish: used by the vsce command for packaging the extension into a vsix file for distribution.
webpack-dev: bundles the extension code in development mode. Since we currently have no conditional logic that depends on whether the extension is running in development or production, this may be redundant.
test-compile: compiles the extension typescript (after building the webview-ui project) without webpacking it. This is a prerequisite to running automated tests. It could be moved into test, but keeping it separate would allow it to be used in the future as a prelaunch task for debugging the extension without webpacking it.
watch: not currently used as part of any workflow I’m aware of, but could potentially be useful for editing while debugging.

Webview Development

For commands that require a webview (see guidance on where this is appropriate), the webview-ui project provides the necessary tooling to develop the front end.

Initial Setup

Run npm run install:all to install package dependencies for both the extension and webview project.

Development/Debugging

File structure

Webview source files are under /webview-ui/src.
When built, bundled/minified webview assets are output to /webview-ui/dist.

When the extension is run (both in development and production), the webview assets are read from /webview-ui/dist.

Developing the UI

If you like to use your browser development tools for debugging, or you wish to open the web application in an existing browser window:

Run npm run dev:webview to start the development server.
Navigate to http://localhost:3000 in your browser.

Alternatively, if you are developing in VS Code and wish to use the inbuilt debugging functionality:

Hit F5 to launch the Webview UI debug profile in a new browser window. This will automatically run the development server and attach a debugger.

Developing the VS Code commands that launch the UI

To debug the extension itself, hit F5 to launch the Extension debug profile in a new VS Code Window. This will automatically build, bundle and minify both the webview-ui project and the extension.

The extension will not automatically update itself in response to code changes as you are debugging, so the best workflow here is to stop debugging, make changes, and launch the debugger again.

Building for release

The process for this is unaffected by the webview setup. The npm run webpack and vsce package commands will ensure the webpack-ui project is built and bundled.

Features

Once you successfully log in with your Azure Account, you can view all AKS clusters in your Azure subscriptions(s) under the section named Azure. You can right click on your AKS cluster and click a menu item to perform following actions.

Cloud explorer extension menu

Cloud explorer health check panel

Cloud explorer new inspektor gadget panel

Cloud explorer create cluster webview

Cloud explorer tcp menu

Cloud explorer tcp dump webview

Cloud explorer tcp dump filter interface

Cloud explorer tcp dump filter interface enhanced

AKS Show Properties webview

Cloud Explorer Compare AKS Cluster

Cloud Explorer Run Retina Capture on AKS Cluster

Merge and Save Into Kubeconfig

Merge into Kubeconfig

Right click on your AKS cluster and click on Merge into Kubeconfig to add the selected AKS cluster to the kubeconfig file.

Save Kubeconfig

Right click on your AKS cluster and click on Save Kubeconfig to save the kubeconfig of the selected AKS cluster.

AKS Diagnostics

Right click on your AKS cluster and click on Run AKS Diagnostics to display diagnostics information based on your AKS cluster’s backend telemetry for:

Best Practices
Create, Upgrade, Delete and Scale issues
Identity and Security
Known Issues, Availability and Performance
Network and Connectivity issues
Node Health

To perform further checks on your AKS cluster to troubleshoot and get recommended solutions, click on the AKS Diagnostics link at the top of the page to open it for the selected cluster. For more information on AKS Diagnostics, visit AKS Diagnostics Overview.

AKS Diagnostics Webview

AKS Periscope

Right click on your AKS cluster and click on Run AKS Periscope to collect node and pod logs for your AKS cluster and to export them to an Azure storage account. Upon selecting the option, a web view will load providing you the option to generate a downloadable link for the collected logs as well as a shareable link with 7-day expiry.

If you are not seeing the logs for all the nodes, it is possible the logs were still uploading. Try clicking the Generate Link button again to load more logs.

For more information, visit AKS Periscope.

AKS Periscope Webview

Configuring Storage Account

Running the AKS Periscope requires you to have a storage account associated with the Diagnostic settings of your AKS cluster. If you have only one storage account associated with the Diagnostic settings of your AKS cluster, the collected logs will be stored in the associated storage account by default. If you have more than one storage account associated with the Diagnostics settings of your AKS cluster, then the extension will prompt you to choose the storage account for saving collected logs. If you don’t have a storage account configured in the Diagnostic settings, please follow these instructions to enable it.

Navigate to your AKS cluster in the Azure Portal.
Click on Diagnostic Settings under Monitoring in the left navigation.
Click on Add diagnostic setting.
Enter a name, such as myAKSClusterLogs, then select the option to Archive to a storage account.
Select a storage account of your choice.
In the list of available logs, select the logs you wish to enable.

Note: The incurred cost is subject to your storage account usage and Azure Storage Policy.
When ready, select Save to enable collection of the selected logs.

For more information on Diagnostics settings, visit Create diagnostic settings to send platform logs and metics to different destinations.

Install Azure Service Operator

Right click on your AKS cluster and click on Install Azure Service Operator to easily deploy the latest version of Azure Service Operator (ASO) on your AKS cluster and provision and connect applications to Azure resources within Kubernetes. When you select this option, you’ll be prompted for a service principal for ASO to use when performing Azure resource operations. This service principal must have appropriate permissions (typically Contributor at suitable scope). Fill out the service principal details and click Submit to kick off the installation of Azure Service Operator.

Install Azure Service Operator can only be performed on an AKS cluster that has never had ASO installed before. If you have already initiated the installation manually, follow the instructions on Azure Service Operator to complete.

For more information on Azure Service Operator, visit Azure Service Operator (for Kubernetes). If you are experiencing issues with Azure Service Operator, visit Azure Service Operator (ASO) troubleshooting.

Azure Service Operator Webview

Create GitHub Workflow

Right click on your AKS cluster and click on Create GitHub Workflow to easily open and create a workflow starter template. This helps in quick generation of the workflow templates with pre populates resource and clustername for:

Show Properties, Show in Azure Portal

Show in Azure Portal

Right click on your AKS cluster and click on Show in Azure Portal to easily navigate to AKS cluster overview page in Azure Portal.

Show Properties

Right click on your AKS cluster and click on Show Properties to display the AKS cluster and agent pool properties like provisioning state, fqdn, k8s version, along with node properties like node version, vm type, vm size, o/s type, o/s disk size and nodes provisioning state.

This page also enables some useful cluster and node pool level operations like Abort Last Operation (at cluster and agent pool level) and Reconcile.

This page now also enable information box for the users to quickly see available kuberentes versions available for the cluster to upgrade and if the current version is out of support or not.

Abort operation Reconcile operation Kuberentes version information

Create cluster from Azure Portal

Right click on your AKS sunscription and click on Create cluster from Azure Portal to easily navigate to AKS create cluster page in Azure Portal.

Create cluster

Right click on your AKS subscription and click on Create Cluster and select Create Standard Cluster which will start a 2-step wizard for you to enter a valid cluster name and select an existing resource group. The VS Code experience will then notify user with the deployment progress and present you with the Navigate to Portal link when it completes successfully.

Step 1: Create Cluster Name

Step 2: Select ResourceGroup Name

Creation message notification

Successful Creation

Start or Stop AKS cluster

Right click on your AKS cluster and click on Show Properties to display the AKS cluster properties, within the page there will be Stop/Start Cluster button to perform the start or stop the cluster operation.

Start or Stop Cluster From Properties Webview