From 6536896c7dd441b95cd155326292f201b679fb90 Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Tue, 9 Jun 2020 13:40:15 -0700 Subject: [PATCH] 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 Co-authored-by: Brian Bergeron Co-authored-by: Amir Omidi --- extensions/arc/package.json | 7 +- extensions/arc/package.nls.json | 3 +- extensions/arc/src/common/utils.ts | 28 +++ .../v1/model/registrationResponse.ts | 12 ++ extensions/arc/src/extension.ts | 38 ++++ extensions/arc/src/localizedConstants.ts | 10 +- extensions/arc/src/models/controllerModel.ts | 25 ++- .../controller/controllerDashboard.ts | 25 +++ .../controllerDashboardOverviewPage.ts | 187 ++++++++++++++++++ .../miaa/miaaConnectionStringsPage.ts | 83 ++++++++ .../src/ui/dashboards/miaa/miaaDashboard.ts | 33 ++++ .../miaa/miaaDashboardOverviewPage.ts | 154 +++++++++++++++ .../postgres/postgresOverviewPage.ts | 7 +- .../postgres/postgresPropertiesPage.ts | 3 +- .../postgres/postgresSupportRequestPage.ts | 5 +- 15 files changed, 602 insertions(+), 18 deletions(-) create mode 100644 extensions/arc/src/common/utils.ts create mode 100644 extensions/arc/src/ui/dashboards/controller/controllerDashboard.ts create mode 100644 extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts create mode 100644 extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts create mode 100644 extensions/arc/src/ui/dashboards/miaa/miaaDashboard.ts create mode 100644 extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts diff --git a/extensions/arc/package.json b/extensions/arc/package.json index 0bd74bc0e4..c6bc45f12b 100644 --- a/extensions/arc/package.json +++ b/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%" diff --git a/extensions/arc/package.nls.json b/extensions/arc/package.nls.json index 46d81a7d25..317a1f4305 100644 --- a/extensions/arc/package.nls.json +++ b/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" } diff --git a/extensions/arc/src/common/utils.ts b/extensions/arc/src/common/utils.ts new file mode 100644 index 0000000000..6582b6557c --- /dev/null +++ b/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; +} diff --git a/extensions/arc/src/controller/generated/v1/model/registrationResponse.ts b/extensions/arc/src/controller/generated/v1/model/registrationResponse.ts index 3fd7428213..14fb3c5019 100644 --- a/extensions/arc/src/controller/generated/v1/model/registrationResponse.ts +++ b/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() { diff --git a/extensions/arc/src/extension.ts b/extensions/arc/src/extension.ts index f55b13b06a..7fb031f042 100644 --- a/extensions/arc/src/extension.ts +++ b/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 { 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 = ''; diff --git a/extensions/arc/src/localizedConstants.ts b/extensions/arc/src/localizedConstants.ts index bbf1fe89ed..17fe683ff6 100644 --- a/extensions/arc/src/localizedConstants.ts +++ b/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"); diff --git a/extensions/arc/src/models/controllerModel.ts b/extensions/arc/src/models/controllerModel.ts index a7822e27d1..200af61d60 100644 --- a/extensions/arc/src/models/controllerModel.ts +++ b/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(); private readonly _onRegistrationsUpdated = new vscode.EventEmitter(); @@ -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('_'); diff --git a/extensions/arc/src/ui/dashboards/controller/controllerDashboard.ts b/extensions/arc/src/ui/dashboards/controller/controllerDashboard.ts new file mode 100644 index 0000000000..76c1eb2c10 --- /dev/null +++ b/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 + ]; + } + +} diff --git a/extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts b/extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts new file mode 100644 index 0000000000..0ff753d3e3 --- /dev/null +++ b/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 { + 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({ value: loc.arcResources }) + .component(); + + contentContainer.addItem(arcResourcesTitle, { + CSSStyles: cssStyles.title + }); + + this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProperties({ + 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({ + label: loc.createNew, + iconPath: IconPathHelper.add + }).component(); + + const deleteButton = this.modelView.modelBuilder.button().withProperties({ + label: loc.deleteText, + iconPath: IconPathHelper.delete + }).component(); + + const openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties({ + 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]); + } +} diff --git a/extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts b/extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts new file mode 100644 index 0000000000..46a894a4f4 --- /dev/null +++ b/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 { + 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({ + value: loc.connectionStrings, + CSSStyles: { ...cssStyles.title } + }).component()); + + const info = this.modelView.modelBuilder.text().withProperties({ + value: `${loc.selectConnectionString}. `, + CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' } + }).component(); + + const link = this.modelView.modelBuilder.hyperlink().withProperties({ + 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(); + } +} diff --git a/extensions/arc/src/ui/dashboards/miaa/miaaDashboard.ts b/extensions/arc/src/ui/dashboards/miaa/miaaDashboard.ts new file mode 100644 index 0000000000..105a7249bc --- /dev/null +++ b/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 + ] + }, + ]; + } + +} diff --git a/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts b/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts new file mode 100644 index 0000000000..73e159d257 --- /dev/null +++ b/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 { + 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({ + 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({ value: loc.arcResources }) + .component(); + + rootContainer.addItem(arcResourcesTitle, { + CSSStyles: { + 'font-size': '14px' + } + }); + + this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProperties({ + 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({ + label: loc.createNew, + iconPath: IconPathHelper.add + }).component(); + + const deleteButton = this.modelView.modelBuilder.button().withProperties({ + label: loc.deleteText, + iconPath: IconPathHelper.delete + }).component(); + + const resetPasswordButton = this.modelView.modelBuilder.button().withProperties({ + label: loc.resetPassword, + iconPath: IconPathHelper.edit + }).component(); + + const openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties({ + label: loc.openInAzurePortal, + iconPath: IconPathHelper.openInTab + }).component(); + + return this.modelView.modelBuilder.toolbarContainer().withToolbarItems( + [ + { component: createNewButton }, + { component: deleteButton }, + { component: resetPasswordButton, toolbarSeparatorAfter: true }, + { component: openInAzurePortalButton } + ] + ).component(); + } + +} diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts index 27e19ef23c..401b00e5a2 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts +++ b/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 = [ diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts index dd5a3125bb..b046982b4d 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts +++ b/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), diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts index 44d3ac5dac..e5559b1eb9 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts +++ b/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`)); } });