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/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();
+	}
+
+}