More arc controller dashboard updates (#10949)

extensions/arc/images/miaa.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <defs>
+    <linearGradient id="ef376e2c-38fd-4835-83bc-bb24ee960fff" x1="6.267" y1="13.967" x2="6.267" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#949494"/>
+      <stop offset="1" stop-color="#b3b3b3"/>
+    </linearGradient>
+    <linearGradient id="e033a847-5835-46c3-85cf-d40f22eafd80" x1="10.135" y1="14.02" x2="10.135" y2="5.219" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0078d4"/>
+      <stop offset="1" stop-color="#5ea0ef"/>
+    </linearGradient>
+  </defs>
+  <g id="f77d0813-503e-4294-a8a2-c0c5e582bfd9">
+    <path d="M17.549,15.146c-.16.7-1.035,1.391-2.617,1.929a21.585,21.585,0,0,1-12.125.017C1.35,16.578.564,15.922.441,15.25c-.022-.118,0-1.966,0-1.966l17.136-.16S17.569,15.061,17.549,15.146Z" fill="#5ea0ef"/>
+    <ellipse cx="9.001" cy="13.246" rx="8.576" ry="2.965" transform="translate(-0.133 0.091) rotate(-0.575)" fill="#50e6ff"/>
+    <path d="M10.368,13.491a.484.484,0,0,1-.476.476H2.641a.476.476,0,0,1-.476-.476V.476A.468.468,0,0,1,2.624,0H9.892a.476.476,0,0,1,.476.476Z" fill="url(#ef376e2c-38fd-4835-83bc-bb24ee960fff)"/>
+    <path d="M3.368,4.895a.893.893,0,0,1,.886-.885H8.347a.893.893,0,0,1,.918.868v.017h0a.9.9,0,0,1-.894.9H4.254A.893.893,0,0,1,3.368,4.895Zm.886-1.754h4.11a.893.893,0,0,0,.9-.885h0a.226.226,0,0,0,0-.026.893.893,0,0,0-.918-.868H4.254a.89.89,0,0,0,0,1.779Z" fill="#003067"/>
+    <path d="M4.3,1.654a.6.6,0,1,1-.6.6A.6.6,0,0,1,4.3,1.654ZM3.7,4.895a.6.6,0,1,0,.6-.6A.6.6,0,0,0,3.7,4.895Z" fill="#50e6ff"/>
+    <path d="M16.366,11.252a2.806,2.806,0,0,0-2.431-2.689A3.524,3.524,0,0,0,10.3,5.221,3.611,3.611,0,0,0,6.843,7.543,3.342,3.342,0,0,0,3.9,10.76a3.39,3.39,0,0,0,3.508,3.257h6.174A2.831,2.831,0,0,0,16.366,11.252Z" fill="url(#e033a847-5835-46c3-85cf-d40f22eafd80)"/>
+    <path d="M13.117,11.562V8.755H12.34V12.2h2.047v-.634ZM7.186,10.183a1.852,1.852,0,0,1-.426-.259.368.368,0,0,1-.1-.267.286.286,0,0,1,.126-.251.555.555,0,0,1,.351-.1,1.387,1.387,0,0,1,.835.242V8.83a2.4,2.4,0,0,0-.835-.125,1.41,1.41,0,0,0-.911.275.92.92,0,0,0-.342.744,1.117,1.117,0,0,0,.785,1,2.089,2.089,0,0,1,.509.3.353.353,0,0,1,.126.267.286.286,0,0,1-.126.251.631.631,0,0,1-.376.1,1.358,1.358,0,0,1-.9-.351v.769a1.889,1.889,0,0,0,.861.192,1.589,1.589,0,0,0,.96-.234.9.9,0,0,0,.36-.76.837.837,0,0,0-.209-.585A1.972,1.972,0,0,0,7.186,10.183ZM11.5,11.5a1.977,1.977,0,0,0,.276-1.053,1.91,1.91,0,0,0-.209-.935,1.474,1.474,0,0,0-.576-.618A1.619,1.619,0,0,0,10.1,8.68a1.844,1.844,0,0,0-.835.242,1.562,1.562,0,0,0-.61.643,2.114,2.114,0,0,0-.226.952,1.888,1.888,0,0,0,.2.877,1.567,1.567,0,0,0,.568.619,1.674,1.674,0,0,0,.835.242l.71.835h1l-.994-.919A1.515,1.515,0,0,0,11.5,11.5Zm-.777-.209a.818.818,0,0,1-1.261-.008,1.254,1.254,0,0,1-.234-.836,1.221,1.221,0,0,1,.242-.835.769.769,0,0,1,.643-.309.72.72,0,0,1,.619.309,1.288,1.288,0,0,1,.234.835A1.228,1.228,0,0,1,10.719,11.294Z" fill="#f2f2f2"/>
+  </g>
+</svg>

extensions/arc/src/common/utils.ts

@@ -6,12 +6,8 @@
 import * as vscode from 'vscode';
 import * as azurecore from '../../../azurecore/src/azurecore';
 import * as loc from '../localizedConstants';
+import { IconPathHelper, IconPath, ResourceType, Connectionmode } from '../constants';
 
-export enum ResourceType {
-	dataControllers = 'dataControllers',
-	postgresInstances = 'postgresInstances',
-	sqlManagedInstances = 'sqlManagedInstances'
-}
 /**
  * Converts the resource type name into the localized Display Name for that type.
  * @param resourceType The resource type name to convert
@@ -49,3 +45,24 @@ export async function getAzurecoreApi(): Promise<azurecore.IExtension> {
 	}
 	return azurecoreApi;
 }
+
+export function getResourceTypeIcon(resourceType: string): IconPath | undefined {
+	switch (resourceType) {
+		case ResourceType.sqlManagedInstances:
+			return IconPathHelper.miaa;
+		case ResourceType.postgresInstances:
+			return IconPathHelper.postgres;
+	}
+	return undefined;
+}
+
+export function getConnectionModeDisplayText(connectionMode: string | undefined): string {
+	connectionMode = connectionMode ?? '';
+	switch (connectionMode) {
+		case Connectionmode.connected:
+			return loc.connected;
+		case Connectionmode.disconnected:
+			return loc.disconnected;
+	}
+	return connectionMode;
+}

extensions/arc/src/constants.ts

@@ -30,6 +30,7 @@ export class IconPathHelper {
 	public static refresh: IconPath;
 	public static support: IconPath;
 	public static wrench: IconPath;
+	public static miaa: IconPath;
 
 	public static setExtensionContext(context: vscode.ExtensionContext) {
 		IconPathHelper.context = context;
@@ -101,12 +102,36 @@ export class IconPathHelper {
 			light: context.asAbsolutePath('images/wrench.svg'),
 			dark: context.asAbsolutePath('images/wrench.svg')
 		};
+		IconPathHelper.miaa = {
+			light: context.asAbsolutePath('images/miaa.svg'),
+			dark: context.asAbsolutePath('images/miaa.svg'),
+		};
 	}
 }
 
+export const enum ResourceType {
+	dataControllers = 'dataControllers',
+	postgresInstances = 'postgresInstances',
+	sqlManagedInstances = 'sqlManagedInstances'
+}
+
+export const enum Endpoints {
+	mgmtproxy = 'mgmtproxy',
+	logsui = 'logsui',
+	metricsui = 'metricsui',
+	controller = 'controller'
+}
+
+export const enum Connectionmode {
+	connected = 'connected',
+	disconnected = 'disconnected'
+}
+
 export namespace cssStyles {
 	export const text = { 'user-select': 'text', 'cursor': 'text' };
 	export const title = { ...text, 'font-weight': 'bold', 'font-size': '14px' };
 	export const tableHeader = { ...text, 'text-align': 'left', 'border': 'none' };
 	export const tableRow = { ...text, 'border-top': 'solid 1px #ccc', 'border-bottom': 'solid 1px #ccc', 'border-left': 'none', 'border-right': 'none' };
 }
+
+export const iconSize = '20px';

extensions/arc/src/localizedConstants.ts

@@ -41,6 +41,7 @@ export const name = localize('arc.name', "Name");
 export const type = localize('arc.type', "Type");
 export const status = localize('arc.status', "Status");
 export const miaaAdmin = localize('arc.miaaAdmin', "Managed instance admin");
+export const controllerEndpoint = localize('arc.controllerEndpoint', "Controller endpoint");
 export const dataController = localize('arc.dataController', "Data controller");
 export const kibanaDashboard = localize('arc.kibanaDashboard', "Kibana Dashboard");
 export const grafanaDashboard = localize('arc.grafanaDashboard', "Grafana Dashboard");
@@ -60,6 +61,8 @@ export const refresh = localize('arc.refresh', "Refresh");
 export const troubleshoot = localize('arc.troubleshoot', "Troubleshoot");
 export const clickTheNewSupportRequestButton = localize('arc.clickTheNewSupportRequestButton', "Click the new support request button to file a support request in the Azure Portal.");
 export const running = localize('arc.running', "Running");
+export const connected = localize('arc.connected', "Connected");
+export const disconnected = localize('arc.disconnected', "Disconnected");
 
 // Postgres constants
 export const coordinatorEndpoint = localize('arc.coordinatorEndpoint', "Coordinator endpoint");

extensions/arc/src/models/controllerModel.ts

@@ -6,7 +6,8 @@
 import * as vscode from 'vscode';
 import { Authentication } from '../controller/auth';
 import { EndpointsRouterApi, EndpointModel, RegistrationRouterApi, RegistrationResponse, TokenRouterApi, SqlInstanceRouterApi } from '../controller/generated/v1/api';
-import { ResourceType, parseEndpoint } from '../common/utils';
+import { parseEndpoint } from '../common/utils';
+import { ResourceType } from '../constants';
 
 export interface Registration extends RegistrationResponse {
 	externalIp?: string;

extensions/arc/src/models/postgresModel.ts

@@ -108,7 +108,7 @@ export class PostgresModel {
 
 	/** Creates a SQL database in the service */
 	public async createDatabase(db: DuskyObjectModelsDatabase): Promise<DuskyObjectModelsDatabase> {
-		return await (await this._databaseRouter.createDuskyDatabase(this.namespace, this.name, db)).body;
+		return (await this._databaseRouter.createDuskyDatabase(this.namespace, this.name, db)).body;
 	}
 
 	/**

extensions/arc/src/test/common/utils.test.ts

@@ -5,9 +5,10 @@
 
 import * as should from 'should';
 import 'mocha';
-import { resourceTypeToDisplayName, ResourceType, parseEndpoint } from '../../common/utils';
+import { resourceTypeToDisplayName, parseEndpoint } from '../../common/utils';
 
 import * as loc from '../../localizedConstants';
+import { ResourceType } from '../../constants';
 
 describe('resourceTypeToDisplayName Method Tests', () => {
 	it('Display Name should be correct for valid ResourceType', function (): void {

extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts

@@ -7,16 +7,33 @@ import * as azdata from 'azdata';
 import * as vscode from 'vscode';
 import * as loc from '../../../localizedConstants';
 import { DashboardPage } from '../../components/dashboardPage';
-import { IconPathHelper, cssStyles } from '../../../constants';
+import { IconPathHelper, cssStyles, iconSize, ResourceType, Endpoints } from '../../../constants';
 import { ControllerModel } from '../../../models/controllerModel';
-import { resourceTypeToDisplayName, ResourceType, getAzurecoreApi } from '../../../common/utils';
+import { resourceTypeToDisplayName, getAzurecoreApi, getResourceTypeIcon, getConnectionModeDisplayText } from '../../../common/utils';
 import { RegistrationResponse } from '../../../controller/generated/v1/model/registrationResponse';
+import { EndpointModel } from '../../../controller/generated/v1/api';
 
 export class ControllerDashboardOverviewPage extends DashboardPage {
 
+	private _propertiesLoadingComponent!: azdata.LoadingComponent;
+	private _arcResourcesLoadingComponent!: azdata.LoadingComponent;
+
 	private _arcResourcesTable!: azdata.DeclarativeTableComponent;
 	private _propertiesContainer!: azdata.PropertiesContainerComponent;
 
+	private controllerProperties = {
+		instanceName: '-',
+		resourceGroupName: '-',
+		location: '-',
+		subscriptionId: '-',
+		controllerEndpoint: '-',
+		connectionMode: '-',
+		instanceNamespace: '-',
+	};
+
+	private _endpointsRetrieved = false;
+	private _registrationsRetrieved = false;
+
 	constructor(modelView: azdata.ModelView, private _controllerModel: ControllerModel) {
 		super(modelView);
 		this._controllerModel.onRegistrationsUpdated((_: RegistrationResponse[]) => {
@@ -24,6 +41,11 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 				this.handleRegistrationsUpdated().catch(e => console.log(e));
 			});
 		});
+		this._controllerModel.onEndpointsUpdated(endpoints => {
+			this.eventuallyRunOnInitialized(() => {
+				this.handleEndpointsUpdated(endpoints);
+			});
+		});
 		this.refresh().catch(e => {
 			console.log(e);
 		});
@@ -55,8 +77,9 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 		rootContainer.addItem(contentContainer, { CSSStyles: { 'margin': '10px 20px 0px 20px' } });
 
 		this._propertiesContainer = this.modelView.modelBuilder.propertiesContainer().component();
+		this._propertiesLoadingComponent = this.modelView.modelBuilder.loadingComponent().withItem(this._propertiesContainer).component();
 
-		contentContainer.addItem(this._propertiesContainer);
+		contentContainer.addItem(this._propertiesLoadingComponent);
 
 		const arcResourcesTitle = this.modelView.modelBuilder.text()
 			.withProperties<azdata.TextComponentProperties>({ value: loc.arcResources })
@@ -69,6 +92,14 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 		this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
 			data: [],
 			columns: [
+				{
+					displayName: '',
+					valueType: azdata.DeclarativeDataType.component,
+					width: iconSize,
+					isReadOnly: true,
+					headerCssStyles: cssStyles.tableHeader,
+					rowCssStyles: cssStyles.tableRow
+				},
 				{
 					displayName: loc.name,
 					valueType: azdata.DeclarativeDataType.string,
@@ -100,7 +131,9 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 			.withItems([this._arcResourcesTable])
 			.component();
 
-		contentContainer.addItem(arcResourcesTableContainer);
+		this._arcResourcesLoadingComponent = this.modelView.modelBuilder.loadingComponent().withItem(arcResourcesTableContainer).component();
+
+		contentContainer.addItem(this._arcResourcesLoadingComponent);
 		this.initialized = true;
 		return rootContainer;
 	}
@@ -112,10 +145,9 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 			iconPath: IconPathHelper.add
 		}).component();
 
-		const deleteButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		createNewButton.onDidClick(async () => {
-			label: loc.deleteText,
+			await vscode.commands.executeCommand('azdata.resource.deploy');
-			iconPath: IconPathHelper.delete
+		});
-		}).component();
 
 		const openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
 			label: loc.openInAzurePortal,
@@ -134,8 +166,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 
 		return this.modelView.modelBuilder.toolbarContainer().withToolbarItems(
 			[
-				{ component: createNewButton },
+				{ component: createNewButton, toolbarSeparatorAfter: true },
-				{ component: deleteButton, toolbarSeparatorAfter: true },
 				{ component: openInAzurePortalButton }
 			]
 		).component();
@@ -143,45 +174,79 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 
 	private async handleRegistrationsUpdated(): Promise<void> {
 		const reg = this._controllerModel.controllerRegistration;
-		if (reg) {
+		this.controllerProperties.instanceName = reg?.instanceName || this.controllerProperties.instanceName;
+		this.controllerProperties.resourceGroupName = reg?.resourceGroupName || this.controllerProperties.resourceGroupName;
+		this.controllerProperties.location = (await getAzurecoreApi()).getRegionDisplayName(reg?.location) || this.controllerProperties.location;
+		this.controllerProperties.subscriptionId = reg?.subscriptionId || this.controllerProperties.subscriptionId;
+		this.controllerProperties.connectionMode = getConnectionModeDisplayText(reg?.connectionMode) || this.controllerProperties.connectionMode;
+		this.controllerProperties.instanceNamespace = reg?.instanceNamespace || this.controllerProperties.instanceNamespace;
+		this._registrationsRetrieved = true;
+		this.refreshDisplayedProperties();
+
+		this._arcResourcesTable.data = this._controllerModel.registrations
+			.filter(r => r.instanceType !== ResourceType.dataControllers)
+			.map(r => {
+				const iconPath = getResourceTypeIcon(r.instanceType ?? '');
+				const imageComponent = this.modelView.modelBuilder.image()
+					.withProperties<azdata.ImageComponentProperties>({
+						width: iconSize,
+						height: iconSize,
+						iconPath: iconPath,
+						iconHeight: iconSize,
+						iconWidth: iconSize
+					})
+					.component();
+				return [imageComponent, r.instanceName, resourceTypeToDisplayName(r.instanceType), r.vCores];
+			});
+		this._arcResourcesLoadingComponent.loading = false;
+	}
+
+	private handleEndpointsUpdated(endpoints: EndpointModel[]): void {
+		const controllerEndpoint = endpoints.find(endpoint => endpoint.name === Endpoints.controller);
+		this.controllerProperties.controllerEndpoint = controllerEndpoint?.endpoint || this.controllerProperties.controllerEndpoint;
+		this._endpointsRetrieved = true;
+		this.refreshDisplayedProperties();
+	}
+
+	private refreshDisplayedProperties(): void {
+		// Only update once we've retrieved all the necessary properties
+		if (this._endpointsRetrieved && this._registrationsRetrieved) {
 			this._propertiesContainer.propertyItems = [
 				{
 					displayName: loc.name,
-					value: reg.instanceName || '-'
+					value: this.controllerProperties.instanceName
 				},
 				{
 					displayName: loc.resourceGroup,
-					value: reg.resourceGroupName || '-'
+					value: this.controllerProperties.resourceGroupName
 				},
 				{
 					displayName: loc.region,
-					value: (await getAzurecoreApi()).getRegionDisplayName(reg.location) || '-'
+					value: this.controllerProperties.location
 				},
 				{
 					displayName: loc.subscriptionId,
-					value: reg.subscriptionId || '-'
+					value: this.controllerProperties.subscriptionId
 				},
 				{
 					displayName: loc.type,
 					value: loc.dataControllersType
 				},
 				{
-					displayName: loc.coordinatorEndpoint,
+					displayName: loc.controllerEndpoint,
-					value: '-'
+					value: this.controllerProperties.controllerEndpoint
 				},
 				{
 					displayName: loc.connectionMode,
-					value: reg.connectionMode || '-'
+					value: this.controllerProperties.connectionMode
 				},
 				{
 					displayName: loc.namespace,
-					value: reg.instanceNamespace || '-'
+					value: this.controllerProperties.instanceNamespace
 				}
 			];
+			this._propertiesLoadingComponent.loading = false;
 		}
 
-		this._arcResourcesTable.data = this._controllerModel.registrations
-			.filter(r => r.instanceType !== ResourceType.dataControllers)
-			.map(r => [r.instanceName, resourceTypeToDisplayName(r.instanceType), r.vCores]);
 	}
 }

extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts

@@ -5,11 +5,10 @@
 
 import * as azdata from 'azdata';
 import * as loc from '../../../localizedConstants';
-import { IconPathHelper, cssStyles } from '../../../constants';
+import { IconPathHelper, cssStyles, ResourceType } from '../../../constants';
 import { KeyValueContainer, KeyValue, InputKeyValue, MultilineInputKeyValue } from '../../components/keyValueContainer';
 import { DashboardPage } from '../../components/dashboardPage';
 import { ControllerModel, Registration } from '../../../models/controllerModel';
-import { ResourceType } from '../../../common/utils';
 import { MiaaModel } from '../../../models/miaaModel';
 
 export class MiaaConnectionStringsPage extends DashboardPage {

extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts

@@ -6,9 +6,9 @@
 import * as azdata from 'azdata';
 import * as loc from '../../../localizedConstants';
 import { DashboardPage } from '../../components/dashboardPage';
-import { IconPathHelper, cssStyles } from '../../../constants';
+import { IconPathHelper, cssStyles, ResourceType } from '../../../constants';
 import { ControllerModel, Registration } from '../../../models/controllerModel';
-import { ResourceType, getAzurecoreApi } from '../../../common/utils';
+import { getAzurecoreApi } from '../../../common/utils';
 import { MiaaModel, DatabaseModel } from '../../../models/miaaModel';
 import { HybridSqlNsNameGetResponse } from '../../../controller/generated/v1/model/hybridSqlNsNameGetResponse';
 import { EndpointModel } from '../../../controller/generated/v1/api';

extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts

@@ -6,12 +6,11 @@
 import * as vscode from 'vscode';
 import * as azdata from 'azdata';
 import * as loc from '../../../localizedConstants';
-import { IconPathHelper, cssStyles } from '../../../constants';
+import { IconPathHelper, cssStyles, ResourceType } from '../../../constants';
 import { DuskyObjectModelsDatabase, DuskyObjectModelsDatabaseServiceArcPayload, V1Pod } from '../../../controller/generated/dusky/api';
 import { DashboardPage } from '../../components/dashboardPage';
 import { ControllerModel } from '../../../models/controllerModel';
 import { PostgresModel, PodRole } from '../../../models/postgresModel';
-import { ResourceType } from '../../../common/utils';
 
 export class PostgresOverviewPage extends DashboardPage {
 	private propertiesLoading?: azdata.LoadingComponent;

extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts

@@ -6,12 +6,11 @@
 import * as vscode from 'vscode';
 import * as azdata from 'azdata';
 import * as loc from '../../../localizedConstants';
-import { IconPathHelper, cssStyles } from '../../../constants';
+import { IconPathHelper, cssStyles, ResourceType } from '../../../constants';
 import { KeyValueContainer, InputKeyValue, LinkKeyValue, TextKeyValue } from '../../components/keyValueContainer';
 import { DashboardPage } from '../../components/dashboardPage';
 import { ControllerModel } from '../../../models/controllerModel';
 import { PostgresModel } from '../../../models/postgresModel';
-import { ResourceType } from '../../../common/utils';
 
 export class PostgresPropertiesPage extends DashboardPage {
 	private keyValueContainer?: KeyValueContainer;

extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts

@@ -6,11 +6,10 @@
 import * as vscode from 'vscode';
 import * as azdata from 'azdata';
 import * as loc from '../../../localizedConstants';
-import { IconPathHelper, cssStyles } from '../../../constants';
+import { IconPathHelper, cssStyles, ResourceType } from '../../../constants';
 import { DashboardPage } from '../../components/dashboardPage';
 import { ControllerModel } from '../../../models/controllerModel';
 import { PostgresModel } from '../../../models/postgresModel';
-import { ResourceType } from '../../../common/utils';
 
 export class PostgresSupportRequestPage extends DashboardPage {
 	constructor(protected modelView: azdata.ModelView, private _controllerModel: ControllerModel, private _postgresModel: PostgresModel) {