Initial work on Arc controller + MIAA dashboards (#10781)

* initial

* postgres overview dashboard

* fewer dependencies

* stricter compile options

* make vsce package work

* Add localizedConstants

* Add localizedConstants

(cherry picked from commit 3ceed3e82b918ac829a7eac01487844e7d2ec02d)

* common WIP

* Initial dashboard work

* separate ui and models

* extend DashboardPage

* remove error handling

* wip

* Add more localized constants

* More updates

* Use api to populate instances

* merge master, strict mode, error handling, propertiesContainer, openInAzure

* use more localizedConstants

* localization

* connection strings and properties pages

* don't include arc extension by default

* don't include arc extension by default

* Address PR feedback

* undo changes to modelview components

* localize copied to clipboard

* localize copied to clipboard with function

* Update gulpfile.hygiene.js

* Move the gulpfile

* More updates

* more updates

* More updates

* re-delete file

* Fix compile error

* PR comments

Co-authored-by: Brian Bergeron <brberger@microsoft.com>
Co-authored-by: Brian Bergeron <brian.e.bergeron@gmail.com>
Co-authored-by: Amir Omidi <amomidi@microsoft.com>

extensions/arc/package.json

@@ -9,9 +9,10 @@
   "icon": "images/extension.png",
   "engines": {
     "vscode": "*",
-    "azdata": ">=1.18.0"
+    "azdata": ">=1.19.0"
   },
   "activationEvents": [
+    "onCommand:arc.manageArcController",
     "onCommand:arc.manageMiaa",
     "onCommand:arc.managePostgres"
   ],
@@ -22,6 +23,10 @@
   "main": "./out/extension",
   "contributes": {
     "commands": [
+      {
+        "command": "arc.manageArcController",
+        "title": "%arc.manageArcController%"
+      },
       {
         "command": "arc.manageMiaa",
         "title": "%arc.manageMiaa%"

extensions/arc/package.nls.json

@@ -4,5 +4,6 @@
 	"arc.configuration.title": "Azure Arc",
 	"arc.ignoreSslVerification.desc" : "Ignore SSL verification errors against the controller endpoint if true",
 	"arc.manageMiaa": "Manage MIAA",
-	"arc.managePostgres": "Manage Postgres"
+	"arc.managePostgres": "Manage Postgres",
+	"arc.manageArcController": "Manage Arc Controller"
 }

extensions/arc/src/common/utils.ts

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as loc from '../localizedConstants';
+
+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
+ */
+export function resourceTypeToDisplayName(resourceType: string | undefined): string {
+	resourceType = resourceType || 'undefined';
+	switch (resourceType) {
+		case ResourceType.dataControllers:
+			return loc.dataControllersType;
+		case ResourceType.postgresInstances:
+			return loc.pgSqlType;
+		case ResourceType.sqlManagedInstances:
+			return loc.miaaType;
+	}
+	return resourceType;
+}

extensions/arc/src/controller/generated/v1/model/registrationResponse.ts

@@ -22,6 +22,8 @@ export class RegistrationResponse {
     'isDeleted'?: boolean;
     'externalEndpoint'?: string;
     'vCores'?: string;
+    'connectionMode'?: string;
+    'billingMode'?: string;
 
     static discriminator: string | undefined = undefined;
 
@@ -75,6 +77,16 @@ export class RegistrationResponse {
             "name": "vCores",
             "baseName": "vCores",
             "type": "string"
+        },
+        {
+            "name": "connectionMode",
+            "baseName": "connectionMode",
+            "type": "string"
+        },
+        {
+            "name": "billingMode",
+            "baseName": "billingMode",
+            "type": "string"
         }    ];
 
     static getAttributeTypeMap() {

extensions/arc/src/extension.ts

@@ -10,10 +10,48 @@ import { BasicAuth } from './controller/auth';
 import { PostgresDashboard } from './ui/dashboards/postgres/postgresDashboard';
 import { ControllerModel } from './models/controllerModel';
 import { PostgresModel } from './models/postgresModel';
+import { ControllerDashboard } from './ui/dashboards/controller/controllerDashboard';
+import { MiaaDashboard } from './ui/dashboards/miaa/miaaDashboard';
 
 export async function activate(context: vscode.ExtensionContext): Promise<void> {
 	IconPathHelper.setExtensionContext(context);
 
+	vscode.commands.registerCommand('arc.manageArcController', async () => {
+		// Controller information
+		const controllerUrl = '';
+		const auth = new BasicAuth('', '');
+
+		try {
+			const controllerModel = new ControllerModel(controllerUrl, auth);
+			const controllerDashboard = new ControllerDashboard(controllerModel);
+
+			await Promise.all([
+				controllerDashboard.showDashboard(),
+				controllerModel.refresh()
+			]);
+		} catch (error) {
+			// vscode.window.showErrorMessage(loc.failedToManagePostgres(`${dbNamespace}.${dbName}`, error));
+		}
+	});
+
+	vscode.commands.registerCommand('arc.manageMiaa', async () => {
+		// Controller information
+		const controllerUrl = '';
+		const auth = new BasicAuth('', '');
+
+		try {
+			const controllerModel = new ControllerModel(controllerUrl, auth);
+			const miaaDashboard = new MiaaDashboard(controllerModel);
+
+			await Promise.all([
+				miaaDashboard.showDashboard(),
+				controllerModel.refresh()
+			]);
+		} catch (error) {
+			// vscode.window.showErrorMessage(loc.failedToManagePostgres(`${dbNamespace}.${dbName}`, error));
+		}
+	});
+
 	vscode.commands.registerCommand('arc.managePostgres', async () => {
 		// Controller information
 		const controllerUrl = '';

extensions/arc/src/localizedConstants.ts

@@ -6,9 +6,14 @@
 import * as nls from 'vscode-nls';
 const localize = nls.loadMessageBundle();
 
+export const arcControllerDashboard = localize('arc.controllerDashboard', "Azure Arc Controller Dashboard (Preview)");
 export const miaaDashboard = localize('arc.miaaDashboard', "Managed Instance Dashboard (Preview)");
 export const postgresDashboard = localize('arc.postgresDashboard', "Postgres Dashboard (Preview)");
 
+export const dataControllersType = localize('arc.dataControllersType', "Azure Arc Data Controller");
+export const pgSqlType = localize('arc.pgSqlType', "PostgreSQL Server group - Azure Arc");
+export const miaaType = localize('arc.miaaType', "SQL instance - Azure Arc");
+
 export const overview = localize('arc.overview', "Overview");
 export const connectionStrings = localize('arc.connectionStrings', "Connection Strings");
 export const networking = localize('arc.networking', "Networking");
@@ -30,7 +35,8 @@ export const region = localize('arc.region', "Region");
 export const subscription = localize('arc.subscription', "Subscription");
 export const subscriptionId = localize('arc.subscriptionId', "Subscription ID");
 export const state = localize('arc.state', "State");
-export const adminUsername = localize('arc.adminUsername', "Data controller admin username");
+export const connectionMode = localize('arc.connectionMode', "Connection Mode");
+export const namespace = localize('arc.namespace', "Namespace");
 export const host = localize('arc.host', "Host");
 export const name = localize('arc.name', "Name");
 export const type = localize('arc.type', "Type");
@@ -85,4 +91,6 @@ export function refreshFailed(error: any): string { return localize('arc.refresh
 export function failedToManagePostgres(name: string, error: any): string { return localize('arc.failedToManagePostgres', "Failed to manage Postgres {0}. {1}", name, (error instanceof Error ? error.message : error)); }
 export function clickTheTroubleshootButton(resourceType: string): string { return localize('arc.clickTheTroubleshootButton', "Click the troubleshoot button to open the Azure Arc {0} troubleshooting notebook.", resourceType); }
 
+export const couldNotFindControllerResource = localize('arc.couldNotFindControllerResource', "Could not find Azure resource for Azure Arc Data Controller", name);
+
 export const arcResources = localize('arc.arcResources', "Azure Arc Resources");

extensions/arc/src/models/controllerModel.ts

@@ -6,14 +6,16 @@
 import * as vscode from 'vscode';
 import { Authentication } from '../controller/auth';
 import { EndpointsRouterApi, EndpointModel, RegistrationRouterApi, RegistrationResponse, TokenRouterApi } from '../controller/generated/v1/api';
+import { ResourceType } from '../common/utils';
 
 export class ControllerModel {
 	private _endpointsRouter: EndpointsRouterApi;
 	private _tokenRouter: TokenRouterApi;
 	private _registrationRouter: RegistrationRouterApi;
-	private _endpoints?: EndpointModel[];
-	private _namespace?: string;
-	private _registrations?: RegistrationResponse[];
+	private _endpoints: EndpointModel[] = [];
+	private _namespace: string = '';
+	private _registrations: RegistrationResponse[] = [];
+	private _controllerRegistration: RegistrationResponse | undefined = undefined;
 
 	private readonly _onEndpointsUpdated = new vscode.EventEmitter<EndpointModel[]>();
 	private readonly _onRegistrationsUpdated = new vscode.EventEmitter<RegistrationResponse[]>();
@@ -43,30 +45,35 @@ export class ControllerModel {
 			this._tokenRouter.apiV1TokenPost().then(async response => {
 				this._namespace = response.body.namespace!;
 				this._registrations = (await this._registrationRouter.apiV1RegistrationListResourcesNsGet(this._namespace)).body;
+				this._controllerRegistration = this._registrations.find(r => r.instanceType === ResourceType.dataControllers);
 				this.registrationsLastUpdated = new Date();
 				this._onRegistrationsUpdated.fire(this._registrations);
 			})
 		]);
 	}
 
-	public endpoints(): EndpointModel[] | undefined {
+	public endpoints(): EndpointModel[] {
 		return this._endpoints;
 	}
 
 	public endpoint(name: string): EndpointModel | undefined {
-		return this._endpoints?.find(e => e.name === name);
+		return this._endpoints.find(e => e.name === name);
 	}
 
-	public namespace(): string | undefined {
+	public namespace(): string {
 		return this._namespace;
 	}
 
-	public registrations(): RegistrationResponse[] | undefined {
+	public registrations(): RegistrationResponse[] {
 		return this._registrations;
 	}
 
-	public registration(type: string, namespace: string, name: string): RegistrationResponse | undefined {
-		return this._registrations?.find(r => {
+	public get controllerRegistration(): RegistrationResponse | undefined {
+		return this._controllerRegistration;
+	}
+
+	public getRegistration(type: string, namespace: string, name: string): RegistrationResponse | undefined {
+		return this._registrations.find(r => {
 			// Resources deployed outside the controller's namespace are named in the format 'namespace_name'
 			let instanceName = r.instanceName!;
 			const parts: string[] = instanceName.split('_');

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

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import { Dashboard } from '../../components/dashboard';
+import { ControllerModel } from '../../../models/controllerModel';
+import { ControllerDashboardOverviewPage } from './controllerDashboardOverviewPage';
+import * as loc from '../../../localizedConstants';
+
+export class ControllerDashboard extends Dashboard {
+
+	constructor(private _controllerModel: ControllerModel) {
+		super(loc.arcControllerDashboard);
+	}
+
+	protected async registerTabs(modelView: azdata.ModelView): Promise<(azdata.DashboardTab | azdata.DashboardTabGroup)[]> {
+		const overviewPage = new ControllerDashboardOverviewPage(modelView, this._controllerModel);
+		return [
+			overviewPage.tab
+		];
+	}
+
+}

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

@@ -0,0 +1,187 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+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 { ControllerModel } from '../../../models/controllerModel';
+import { resourceTypeToDisplayName, ResourceType } from '../../../common/utils';
+import { RegistrationResponse } from '../../../controller/generated/v1/model/registrationResponse';
+
+export class ControllerDashboardOverviewPage extends DashboardPage {
+
+	private _arcResourcesTable!: azdata.DeclarativeTableComponent;
+	private _propertiesContainer!: azdata.PropertiesContainerComponent;
+
+	constructor(modelView: azdata.ModelView, private _controllerModel: ControllerModel) {
+		super(modelView);
+		this._controllerModel.onRegistrationsUpdated((_: RegistrationResponse[]) => {
+			this.eventuallyRunOnInitialized(() => {
+				this.handleRegistrationsUpdated();
+			});
+		});
+		this.refresh().catch(e => {
+			console.log(e);
+		});
+	}
+
+	public get title(): string {
+		return loc.overview;
+	}
+
+	public get id(): string {
+		return 'controller-overview';
+	}
+
+	public get icon(): { dark: string, light: string } {
+		return IconPathHelper.properties;
+	}
+
+	protected async refresh(): Promise<void> {
+		await this._controllerModel.refresh();
+	}
+
+	public get container(): azdata.Component {
+
+		const rootContainer = this.modelView.modelBuilder.flexContainer()
+			.withLayout({ flexFlow: 'column' })
+			.component();
+
+		const contentContainer = this.modelView.modelBuilder.divContainer().component();
+		rootContainer.addItem(contentContainer, { CSSStyles: { 'margin': '10px 20px 0px 20px' } });
+
+		this._propertiesContainer = this.modelView.modelBuilder.propertiesContainer().component();
+
+		contentContainer.addItem(this._propertiesContainer);
+
+		const arcResourcesTitle = this.modelView.modelBuilder.text()
+			.withProperties<azdata.TextComponentProperties>({ value: loc.arcResources })
+			.component();
+
+		contentContainer.addItem(arcResourcesTitle, {
+			CSSStyles: cssStyles.title
+		});
+
+		this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
+			data: [],
+			columns: [
+				{
+					displayName: loc.name,
+					valueType: azdata.DeclarativeDataType.string,
+					width: '33%',
+					isReadOnly: true,
+					headerCssStyles: cssStyles.tableHeader,
+					rowCssStyles: cssStyles.tableRow
+				}, {
+					displayName: loc.type,
+					valueType: azdata.DeclarativeDataType.string,
+					width: '33%',
+					isReadOnly: true,
+					headerCssStyles: cssStyles.tableHeader,
+					rowCssStyles: cssStyles.tableRow
+				}, {
+					displayName: loc.computeAndStorage,
+					valueType: azdata.DeclarativeDataType.string,
+					width: '34%',
+					isReadOnly: true,
+					headerCssStyles: cssStyles.tableHeader,
+					rowCssStyles: cssStyles.tableRow
+				}
+			],
+			width: '100%',
+			ariaLabel: loc.arcResources
+		}).component();
+
+		const arcResourcesTableContainer = this.modelView.modelBuilder.divContainer()
+			.withItems([this._arcResourcesTable])
+			.component();
+
+		contentContainer.addItem(arcResourcesTableContainer);
+		this.initialized = true;
+		return rootContainer;
+	}
+
+	public get toolbarContainer(): azdata.ToolbarContainer {
+
+		const createNewButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			label: loc.createNew,
+			iconPath: IconPathHelper.add
+		}).component();
+
+		const deleteButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			label: loc.deleteText,
+			iconPath: IconPathHelper.delete
+		}).component();
+
+		const openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			label: loc.openInAzurePortal,
+			iconPath: IconPathHelper.openInTab
+		}).component();
+
+		openInAzurePortalButton.onDidClick(async () => {
+			const r = this._controllerModel.controllerRegistration;
+			if (r) {
+				vscode.env.openExternal(vscode.Uri.parse(
+					`https://portal.azure.com/#resource/subscriptions/${r.subscriptionId}/resourceGroups/${r.resourceGroupName}/providers/Microsoft.AzureData/${ResourceType.dataControllers}/${r.instanceName}`));
+			} else {
+				vscode.window.showErrorMessage(loc.couldNotFindControllerResource);
+			}
+		});
+
+		return this.modelView.modelBuilder.toolbarContainer().withToolbarItems(
+			[
+				{ component: createNewButton },
+				{ component: deleteButton, toolbarSeparatorAfter: true },
+				{ component: openInAzurePortalButton }
+			]
+		).component();
+	}
+
+	private handleRegistrationsUpdated(): void {
+		const reg = this._controllerModel.controllerRegistration;
+		if (reg) {
+			this._propertiesContainer.propertyItems = [
+				{
+					displayName: loc.name,
+					value: reg.instanceName || '-'
+				},
+				{
+					displayName: loc.resourceGroup,
+					value: reg.resourceGroupName || '-'
+				},
+				{
+					displayName: loc.region,
+					value: reg.location || '-'
+				},
+				{
+					displayName: loc.subscriptionId,
+					value: reg.subscriptionId || '-'
+				},
+				{
+					displayName: loc.type,
+					value: loc.dataControllersType
+				},
+				{
+					displayName: loc.coordinatorEndpoint,
+					value: '-'
+				},
+				{
+					displayName: loc.connectionMode,
+					value: reg.connectionMode || '-'
+				},
+				{
+					displayName: loc.namespace,
+					value: reg.instanceNamespace || '-'
+				}
+			];
+		}
+
+		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

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import * as loc from '../../../localizedConstants';
+import { IconPathHelper, cssStyles } from '../../../constants';
+import { KeyValueContainer, KeyValue, InputKeyValue } from '../../components/keyValueContainer';
+import { DashboardPage } from '../../components/dashboardPage';
+import { ControllerModel } from '../../../models/controllerModel';
+
+export class MiaaConnectionStringsPage extends DashboardPage {
+
+	constructor(modelView: azdata.ModelView, private _controllerModel: ControllerModel) {
+		super(modelView);
+		this.refresh().catch(err => console.error(err));
+	}
+
+	protected async refresh(): Promise<void> {
+		await this._controllerModel.refresh();
+	}
+
+	protected get title(): string {
+		return loc.connectionStrings;
+	}
+
+	protected get id(): string {
+		return 'miaa-connection-strings';
+	}
+
+	protected get icon(): { dark: string; light: string; } {
+		return IconPathHelper.connection;
+	}
+
+	protected get container(): azdata.Component {
+		const root = this.modelView.modelBuilder.divContainer().component();
+		const content = this.modelView.modelBuilder.divContainer().component();
+		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
+
+		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			value: loc.connectionStrings,
+			CSSStyles: { ...cssStyles.title }
+		}).component());
+
+		const info = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			value: `${loc.selectConnectionString}.&nbsp;`,
+			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
+		}).component();
+
+		const link = this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+			label: loc.learnAboutPostgresClients,
+			url: 'http://example.com', // TODO link to documentation
+		}).component();
+
+		content.addItem(
+			this.modelView.modelBuilder.flexContainer().withItems([info, link]).withLayout({ flexWrap: 'wrap' }).component(),
+			{ CSSStyles: { display: 'inline-flex', 'margin-bottom': '25px' } });
+
+		const endpoint = { ip: '127.0.0.1', port: '1337' }; //{ ip?: string, port?: number } = this.databaseModel.endpoint();
+		const password = 'mypassword'; //this.databaseModel.password();
+
+		const pairs: KeyValue[] = [
+			new InputKeyValue('ADO.NET', `Server=${endpoint.ip};Database=postgres;Port=${endpoint.port};User Id=postgres;Password=${password};Ssl Mode=Require;`),
+			new InputKeyValue('C++ (libpq)', `host=${endpoint.ip} port=${endpoint.port} dbname=postgres user=postgres password=${password} sslmode=require`),
+			new InputKeyValue('JDBC', `jdbc:postgresql://${endpoint.ip}:${endpoint.port}/postgres?user=postgres&password=${password}&sslmode=require`),
+			new InputKeyValue('Node.js', `host=${endpoint.ip} port=${endpoint.port} dbname=postgres user=postgres password=${password} sslmode=require`),
+			new InputKeyValue('PHP', `host=${endpoint.ip} port=${endpoint.port} dbname=postgres user=postgres password=${password} sslmode=require`),
+			new InputKeyValue('psql', `psql "host=${endpoint.ip} port=${endpoint.port} dbname=postgres user=postgres password=${password} sslmode=require`),
+			new InputKeyValue('Python', `dbname='postgres' user='postgres' host='${endpoint.ip}' password='${password}' port='${endpoint.port}' sslmode='true'`),
+			new InputKeyValue('Ruby', `host=${endpoint.ip}; dbname=postgres user=postgres password=${password} port=${endpoint.port} sslmode=require`),
+			new InputKeyValue('Web App', `Database=postgres; Data Source=${endpoint.ip}; User Id=postgres; Password=${password}`)
+		];
+
+		const keyValueContainer = new KeyValueContainer(this.modelView.modelBuilder, pairs);
+		content.addItem(keyValueContainer.container);
+		return root;
+	}
+
+	protected get toolbarContainer(): azdata.ToolbarContainer {
+		return this.modelView.modelBuilder.toolbarContainer().component();
+	}
+}

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

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import { Dashboard } from '../../components/dashboard';
+import { MiaaDashboardOverviewPage } from './miaaDashboardOverviewPage';
+import { ControllerModel } from '../../../models/controllerModel';
+import * as loc from '../../../localizedConstants';
+import { MiaaConnectionStringsPage } from './miaaConnectionStringsPage';
+
+export class MiaaDashboard extends Dashboard {
+
+	constructor(private _controllerModel: ControllerModel) {
+		super(loc.miaaDashboard);
+	}
+
+	protected async registerTabs(modelView: azdata.ModelView): Promise<(azdata.DashboardTab | azdata.DashboardTabGroup)[]> {
+		const overviewPage = new MiaaDashboardOverviewPage(modelView, this._controllerModel);
+		const connectionStringsPage = new MiaaConnectionStringsPage(modelView, this._controllerModel);
+		return [
+			overviewPage.tab,
+			{
+				title: loc.settings,
+				tabs: [
+					connectionStringsPage.tab
+				]
+			},
+		];
+	}
+
+}

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

@@ -0,0 +1,154 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import * as loc from '../../../localizedConstants';
+import { DashboardPage } from '../../components/dashboardPage';
+import { IconPathHelper } from '../../../constants';
+import { ControllerModel } from '../../../models/controllerModel';
+import { resourceTypeToDisplayName } from '../../../common/utils';
+
+export class MiaaDashboardOverviewPage extends DashboardPage {
+
+	private _arcResourcesTable!: azdata.DeclarativeTableComponent;
+
+	constructor(modelView: azdata.ModelView, private _controllerModel: ControllerModel) {
+		super(modelView);
+		this.refresh().catch(e => {
+			console.log(e);
+		});
+	}
+
+	public get title(): string {
+		return loc.overview;
+	}
+
+	public get id(): string {
+		return 'miaa-overview';
+	}
+
+	public get icon(): { dark: string, light: string } {
+		return IconPathHelper.properties;
+	}
+
+	protected async refresh(): Promise<void> {
+		await this._controllerModel.refresh();
+		this.eventuallyRunOnInitialized(() => this._arcResourcesTable.data = this._controllerModel.registrations().map(r => [r.instanceName, resourceTypeToDisplayName(r.instanceType), r.vCores]));
+	}
+
+	public get container(): azdata.Component {
+
+		const rootContainer = this.modelView.modelBuilder.flexContainer()
+			.withLayout({ flexFlow: 'column' })
+			.withProperties({ CSSStyles: { 'margin': '18px' } })
+			.component();
+
+		const propertiesContainer = this.modelView.modelBuilder.propertiesContainer().withProperties<azdata.PropertiesContainerComponentProperties>({
+			propertyItems: [
+				{
+					displayName: loc.resourceGroup,
+					value: 'contosoRG123'
+				},
+				{
+					displayName: loc.region,
+					value: 'West US'
+				},
+				{
+					displayName: loc.subscription,
+					value: 'contososub5678'
+				},
+				{
+					displayName: loc.subscriptionId,
+					value: '88abe223-c630-4f2c-8782-00bb5be874f6'
+				},
+				{
+					displayName: loc.state,
+					value: 'Connected'
+				},
+				{
+					displayName: loc.host,
+					value: 'plainscluster.sqlarcdm.database.windows.net'
+				}
+			]
+		}).component();
+
+		rootContainer.addItem(propertiesContainer);
+
+		const arcResourcesTitle = this.modelView.modelBuilder.text()
+			.withProperties<azdata.TextComponentProperties>({ value: loc.arcResources })
+			.component();
+
+		rootContainer.addItem(arcResourcesTitle, {
+			CSSStyles: {
+				'font-size': '14px'
+			}
+		});
+
+		this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
+			data: [],
+			columns: [
+				{
+					displayName: loc.name,
+					valueType: azdata.DeclarativeDataType.string,
+					width: '33%',
+					isReadOnly: true
+				}, {
+					displayName: loc.type,
+					valueType: azdata.DeclarativeDataType.string,
+					width: '33%',
+					isReadOnly: true
+				}, {
+					displayName: loc.computeAndStorage,
+					valueType: azdata.DeclarativeDataType.string,
+					width: '34%',
+					isReadOnly: true
+				}
+			],
+			width: '100%',
+			ariaLabel: loc.arcResources
+		}).component();
+
+		const arcResourcesTableContainer = this.modelView.modelBuilder.divContainer()
+			.withItems([this._arcResourcesTable])
+			.component();
+
+		rootContainer.addItem(arcResourcesTableContainer);
+		this.initialized = true;
+		return rootContainer;
+	}
+
+	public get toolbarContainer(): azdata.ToolbarContainer {
+
+		const createNewButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			label: loc.createNew,
+			iconPath: IconPathHelper.add
+		}).component();
+
+		const deleteButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			label: loc.deleteText,
+			iconPath: IconPathHelper.delete
+		}).component();
+
+		const resetPasswordButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			label: loc.resetPassword,
+			iconPath: IconPathHelper.edit
+		}).component();
+
+		const openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			label: loc.openInAzurePortal,
+			iconPath: IconPathHelper.openInTab
+		}).component();
+
+		return this.modelView.modelBuilder.toolbarContainer().withToolbarItems(
+			[
+				{ component: createNewButton },
+				{ component: deleteButton },
+				{ component: resetPasswordButton, toolbarSeparatorAfter: true },
+				{ component: openInAzurePortalButton }
+			]
+		).component();
+	}
+
+}

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

@@ -11,6 +11,7 @@ import { DuskyObjectModelsDatabase, DuskyObjectModelsDatabaseServiceArcPayload }
 import { DashboardPage } from '../../components/dashboardPage';
 import { ControllerModel } from '../../../models/controllerModel';
 import { PostgresModel } from '../../../models/postgresModel';
+import { ResourceType } from '../../../common/utils';
 
 export class PostgresOverviewPage extends DashboardPage {
 	private propertiesLoading?: azdata.LoadingComponent;
@@ -244,12 +245,12 @@ export class PostgresOverviewPage extends DashboardPage {
 		}).component();
 
 		openInAzurePortalButton.onDidClick(async () => {
-			const r = this._controllerModel.registration('postgresInstances', this._postgresModel.namespace(), this._postgresModel.name());
+			const r = this._controllerModel.getRegistration(ResourceType.postgresInstances, this._postgresModel.namespace(), this._postgresModel.name());
 			if (!r) {
 				vscode.window.showErrorMessage(loc.couldNotFindAzureResource(this._postgresModel.fullName()));
 			} else {
 				vscode.env.openExternal(vscode.Uri.parse(
-					`https://portal.azure.com/#resource/subscriptions/${r.subscriptionId}/resourceGroups/${r.resourceGroupName}/providers/Microsoft.AzureData/postgresInstances/${r.instanceName}`));
+					`https://portal.azure.com/#resource/subscriptions/${r.subscriptionId}/resourceGroups/${r.resourceGroupName}/providers/Microsoft.AzureData/${ResourceType.postgresInstances}/${r.instanceName}`));
 			}
 		});
 
@@ -263,7 +264,7 @@ export class PostgresOverviewPage extends DashboardPage {
 	}
 
 	private refreshProperties() {
-		const registration = this._controllerModel.registration('postgresInstances', this._postgresModel.namespace(), this._postgresModel.name());
+		const registration = this._controllerModel.getRegistration(ResourceType.postgresInstances, this._postgresModel.namespace(), this._postgresModel.name());
 		const endpoint: { ip?: string, port?: number } = this._postgresModel.endpoint();
 
 		this.properties!.propertyItems = [

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

@@ -11,6 +11,7 @@ import { KeyValueContainer, InputKeyValue, LinkKeyValue, TextKeyValue } from '..
 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;
@@ -79,7 +80,7 @@ export class PostgresPropertiesPage extends DashboardPage {
 	private refresh() {
 		const endpoint: { ip?: string, port?: number } = this._postgresModel.endpoint();
 		const connectionString = `postgresql://postgres:${this._postgresModel.password()}@${endpoint.ip}:${endpoint.port}`;
-		const registration = this._controllerModel.registration('postgresInstances', this._postgresModel.namespace(), this._postgresModel.name());
+		const registration = this._controllerModel.getRegistration(ResourceType.postgresInstances, this._postgresModel.namespace(), this._postgresModel.name());
 
 		this.keyValueContainer?.refresh([
 			new InputKeyValue(loc.coordinatorEndpoint, connectionString),

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

@@ -10,6 +10,7 @@ import { IconPathHelper, cssStyles } 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) {
@@ -50,12 +51,12 @@ export class PostgresSupportRequestPage extends DashboardPage {
 		}).component();
 
 		supportRequestButton.onDidClick(() => {
-			const r = this._controllerModel.registration('postgresInstances', this._postgresModel.namespace(), this._postgresModel.name());
+			const r = this._controllerModel.getRegistration(ResourceType.postgresInstances, this._postgresModel.namespace(), this._postgresModel.name());
 			if (!r) {
 				vscode.window.showErrorMessage(loc.couldNotFindAzureResource(this._postgresModel.fullName()));
 			} else {
 				vscode.env.openExternal(vscode.Uri.parse(
-					`https://portal.azure.com/#resource/subscriptions/${r.subscriptionId}/resourceGroups/${r.resourceGroupName}/providers/Microsoft.AzureData/postgresInstances/${r.instanceName}/supportrequest`));
+					`https://portal.azure.com/#resource/subscriptions/${r.subscriptionId}/resourceGroups/${r.resourceGroupName}/providers/Microsoft.AzureData/${ResourceType.postgresInstances}/${r.instanceName}/supportrequest`));
 			}
 		});