View extensions of Postgres server group (#15887)

* Init

* Fix view

* Change strings

* Change strings edit/view

* Only view extensions

* Added loading text

* Add table label, remove try catch block, prfixes

* String add

* Take out podstatus model, add correct link

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

@@ -18,6 +18,7 @@ import { PostgresWorkerNodeParametersPage } from './postgresWorkerNodeParameters
 import { PostgresPropertiesPage } from './postgresPropertiesPage';
 import { PostgresResourceHealthPage } from './postgresResourceHealthPage';
 import { PostgresCoordinatorNodeParametersPage } from './postgresCoordinatorNodeParametersPage';
+import { PostgresExtensionsPage } from './postgresExtensionsPage';
 
 export class PostgresDashboard extends Dashboard {
 	constructor(private _context: vscode.ExtensionContext, private _controllerModel: ControllerModel, private _postgresModel: PostgresModel) {
@@ -34,6 +35,7 @@ export class PostgresDashboard extends Dashboard {
 
 	protected async registerTabs(modelView: azdata.ModelView): Promise<(azdata.DashboardTab | azdata.DashboardTabGroup)[]> {
 		const overviewPage = new PostgresOverviewPage(modelView, this.dashboard, this._controllerModel, this._postgresModel);
+		const extensionsPage = new PostgresExtensionsPage(modelView, this.dashboard, this._postgresModel);
 		const connectionStringsPage = new PostgresConnectionStringsPage(modelView, this.dashboard, this._postgresModel);
 		const computeAndStoragePage = new PostgresComputeAndStoragePage(modelView, this.dashboard, this._postgresModel);
 		const propertiesPage = new PostgresPropertiesPage(modelView, this.dashboard, this._controllerModel, this._postgresModel);
@@ -49,6 +51,7 @@ export class PostgresDashboard extends Dashboard {
 				title: loc.settings,
 				tabs: [
 					propertiesPage.tab,
+					extensionsPage.tab,
 					connectionStringsPage.tab,
 					computeAndStoragePage.tab,
 					coordinatorNodeParametersPage.tab,

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

@@ -0,0 +1,158 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+import * as azdata from 'azdata';
+import * as azdataExt from 'azdata-ext';
+import * as loc from '../../../localizedConstants';
+import { IconPathHelper, cssStyles } from '../../../constants';
+import { DashboardPage } from '../../components/dashboardPage';
+import { PostgresModel } from '../../../models/postgresModel';
+
+export class PostgresExtensionsPage extends DashboardPage {
+
+	private extensions: { name: string; }[] = [];
+	private extensionsTable!: azdata.DeclarativeTableComponent;
+	private extensionsLoading!: azdata.LoadingComponent;
+
+	private readonly _azdataApi: azdataExt.IExtension;
+
+	constructor(modelView: azdata.ModelView, dashboard: azdata.window.ModelViewDashboard, private _postgresModel: PostgresModel) {
+		super(modelView, dashboard);
+		this._azdataApi = vscode.extensions.getExtension(azdataExt.extension.name)?.exports;
+
+		this.disposables.push(
+			this._postgresModel.onConfigUpdated(() => this.eventuallyRunOnInitialized(() => this.handleConfigUpdated())));
+	}
+
+	protected get title(): string {
+		return loc.preLoadedExtensions;
+	}
+
+	protected get id(): string {
+		return 'postgres-extensions';
+	}
+
+	protected get icon(): { dark: string; light: string; } {
+		return IconPathHelper.extensions;
+	}
+
+	protected get container(): azdata.Component {
+		const root = this.modelView.modelBuilder.divContainer().component();
+		const content = this.modelView.modelBuilder.divContainer().component();
+		root.addItem(content, { CSSStyles: { 'margin': '10px 20px 0px 20px' } });
+
+		content.addItem(this.modelView.modelBuilder.text().withProps({
+			value: this.title,
+			CSSStyles: { ...cssStyles.title }
+		}).component());
+
+		content.addItem(this.modelView.modelBuilder.text().withProps({
+			value: loc.extensionsDescription,
+			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
+		}).component());
+
+		const info = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			value: loc.extensionsFunction,
+			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
+		}).component();
+
+		const link = this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+			label: loc.extensionsLearnMore,
+			url: 'https://docs.microsoft.com/azure/azure-arc/data/using-extensions-in-postgresql-hyperscale-server-group',
+		}).component();
+
+		const infoAndLink = this.modelView.modelBuilder.flexContainer().withLayout({ flexWrap: 'wrap' }).component();
+		infoAndLink.addItem(info, { CSSStyles: { 'margin-right': '5px' } });
+		infoAndLink.addItem(link);
+		content.addItem(infoAndLink, { CSSStyles: { 'margin-bottom': '15px', 'margin-top': '25px' } });
+
+		this.extensionsTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
+			ariaLabel: loc.extensionsTableLabel,
+			width: '100%',
+			columns: [
+				{
+					displayName: loc.extensionName,
+					valueType: azdata.DeclarativeDataType.string,
+					isReadOnly: true,
+					width: '100%',
+					headerCssStyles: cssStyles.tableHeader,
+					rowCssStyles: cssStyles.tableRow
+				}
+			],
+			data: []
+		}).component();
+
+		this.extensionsLoading = this.modelView.modelBuilder.loadingComponent()
+			.withItem(this.extensionsTable)
+			.withProperties<azdata.LoadingComponentProperties>({
+				loading: !this._postgresModel.configLastUpdated,
+				loadingText: loc.extensionsTableLoading,
+				loadingCompletedText: loc.extensionsTableLoadingComplete
+			}).component();
+
+		content.addItem(this.extensionsLoading, { CSSStyles: cssStyles.text });
+
+		this.initialized = true;
+		return root;
+	}
+
+	protected get toolbarContainer(): azdata.ToolbarContainer {
+		// Add extensions
+		const addExtensionsButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			label: loc.addExtensions,
+			iconPath: IconPathHelper.add
+		}).component();
+
+		this.disposables.push(
+			addExtensionsButton.onDidClick(async () => {
+				addExtensionsButton.enabled = false;
+				try {
+					await vscode.window.withProgress(
+						{
+							location: vscode.ProgressLocation.Notification,
+							title: loc.updatingInstance(this._postgresModel.info.name),
+							cancellable: false
+						},
+						async (_progress, _token): Promise<void> => {
+							await this._azdataApi.azdata.arc.postgres.server.edit(
+								this._postgresModel.info.name,
+								{
+									extensions: ''
+								},
+								this._postgresModel.controllerModel.azdataAdditionalEnvVars);
+
+							try {
+								await this._postgresModel.refresh();
+							} catch (error) {
+								vscode.window.showErrorMessage(loc.refreshFailed(error));
+							}
+						}
+					);
+
+					vscode.window.showInformationMessage(loc.instanceUpdated(this._postgresModel.info.name));
+
+				} catch (error) {
+					vscode.window.showErrorMessage(loc.instanceUpdateFailed(this._postgresModel.info.name, error));
+				} finally {
+					addExtensionsButton.enabled = true;
+				}
+			}));
+
+		return this.modelView.modelBuilder.toolbarContainer().component();
+	}
+
+	private refreshExtensionsTable(): void {
+		if (this._postgresModel.config) {
+			this.extensions = this._postgresModel.config?.spec.engine.extensions;
+			this.extensionsTable.data = this.extensions.map(e => [e.name]);
+		}
+	}
+
+	private handleConfigUpdated(): void {
+		this.extensionsLoading.loading = false;
+		this.refreshExtensionsTable();
+	}
+}