Arc Postgres - Add Azure params to overview page, update notebook (#12482)

* add azure params to pg overview page, update troubelshooting notebook, string changes

* no default pg version for notebook

Co-authored-by: Brian Bergeron <brberger@microsoft.com>

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

@@ -3,7 +3,6 @@
  *  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 loc from '../../../localizedConstants';
 import { IconPathHelper, cssStyles } from '../../../constants';
@@ -12,7 +11,6 @@ import { DashboardPage } from '../../components/dashboardPage';
 import { PostgresModel } from '../../../models/postgresModel';
 
 export class PostgresConnectionStringsPage extends DashboardPage {
-	private loading?: azdata.LoadingComponent;
 	private keyValueContainer?: KeyValueContainer;
 
 	constructor(protected modelView: azdata.ModelView, private _postgresModel: PostgresModel) {
@@ -61,40 +59,13 @@ export class PostgresConnectionStringsPage extends DashboardPage {
 
 		this.keyValueContainer = new KeyValueContainer(this.modelView.modelBuilder, this.getConnectionStrings());
 		this.disposables.push(this.keyValueContainer);
-
-		this.loading = this.modelView.modelBuilder.loadingComponent()
-			.withItem(this.keyValueContainer.container)
-			.withProperties<azdata.LoadingComponentProperties>({
-				loading: !this._postgresModel.configLastUpdated
-			}).component();
-
-		content.addItem(this.loading);
+		content.addItem(this.keyValueContainer.container);
 		this.initialized = true;
 		return root;
 	}
 
 	protected get toolbarContainer(): azdata.ToolbarContainer {
-		const refreshButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
-			label: loc.refresh,
-			iconPath: IconPathHelper.refresh
-		}).component();
-
-		this.disposables.push(
-			refreshButton.onDidClick(async () => {
-				refreshButton.enabled = false;
-				try {
-					this.loading!.loading = true;
-					await this._postgresModel.refresh();
-				} catch (error) {
-					vscode.window.showErrorMessage(loc.refreshFailed(error));
-				} finally {
-					refreshButton.enabled = true;
-				}
-			}));
-
-		return this.modelView.modelBuilder.toolbarContainer().withToolbarItems([
-			{ component: refreshButton }
-		]).component();
+		return this.modelView.modelBuilder.toolbarContainer().component();
 	}
 
 	private getConnectionStrings(): KeyValue[] {
@@ -118,6 +89,5 @@ export class PostgresConnectionStringsPage extends DashboardPage {
 
 	private handleServiceUpdated() {
 		this.keyValueContainer?.refresh(this.getConnectionStrings());
-		this.loading!.loading = false;
 	}
 }

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

@@ -10,7 +10,6 @@ import { ControllerModel } from '../../../models/controllerModel';
 import { PostgresModel } from '../../../models/postgresModel';
 import { PostgresOverviewPage } from './postgresOverviewPage';
 import { PostgresConnectionStringsPage } from './postgresConnectionStringsPage';
-import { PostgresPropertiesPage } from './postgresPropertiesPage';
 import { Dashboard } from '../../components/dashboard';
 import { PostgresDiagnoseAndSolveProblemsPage } from './postgresDiagnoseAndSolveProblemsPage';
 import { PostgresSupportRequestPage } from './postgresSupportRequestPage';
@@ -31,7 +30,8 @@ export class PostgresDashboard extends Dashboard {
 	protected async registerTabs(modelView: azdata.ModelView): Promise<(azdata.DashboardTab | azdata.DashboardTabGroup)[]> {
 		const overviewPage = new PostgresOverviewPage(modelView, this._controllerModel, this._postgresModel);
 		const connectionStringsPage = new PostgresConnectionStringsPage(modelView, this._postgresModel);
-		const propertiesPage = new PostgresPropertiesPage(modelView, this._controllerModel, this._postgresModel);
+		// TODO: Removed properties page while investigating bug where refreshed values don't appear in UI
+		// const propertiesPage = new PostgresPropertiesPage(modelView, this._controllerModel, this._postgresModel);
 		const diagnoseAndSolveProblemsPage = new PostgresDiagnoseAndSolveProblemsPage(modelView, this._context, this._postgresModel);
 		const supportRequestPage = new PostgresSupportRequestPage(modelView);
 
@@ -40,8 +40,7 @@ export class PostgresDashboard extends Dashboard {
 			{
 				title: loc.settings,
 				tabs: [
-					connectionStringsPage.tab,
-					propertiesPage.tab
+					connectionStringsPage.tab
 				]
 			},
 			{

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

@@ -245,17 +245,20 @@ export class PostgresOverviewPage extends DashboardPage {
 	}
 
 	private getProperties(): azdata.PropertiesContainerItem[] {
-		const endpoint = this._postgresModel.endpoint;
+		const status = this._postgresModel.config?.status;
+		const azure = this._controllerModel.controllerConfig?.spec.settings.azure;
 
 		return [
-			{ displayName: loc.name, value: this._postgresModel.info.name },
-			{ displayName: loc.coordinatorEndpoint, value: endpoint ? `postgresql://postgres@${endpoint.ip}:${endpoint.port}` : '-' },
-			{ displayName: loc.status, value: this._postgresModel.config?.status.state || '-' },
+			{ displayName: loc.resourceGroup, value: azure?.resourceGroup || '-' },
+			{ displayName: loc.dataController, value: this._controllerModel.controllerConfig?.metadata.name || '-' },
+			{ displayName: loc.region, value: azure?.location || '-' },
+			{ displayName: loc.namespace, value: this._postgresModel.config?.metadata.namespace || '-' },
+			{ displayName: loc.subscriptionId, value: azure?.subscription || '-' },
+			{ displayName: loc.externalEndpoint, value: this._postgresModel.config?.status.externalEndpoint || '-' },
+			{ displayName: loc.status, value: status ? `${status.state} (${status.readyPods} ${loc.podsReady})` : '-' },
 			{ displayName: loc.postgresAdminUsername, value: 'postgres' },
-			{ displayName: loc.dataController, value: this._controllerModel?.controllerConfig?.metadata.namespace || '-' },
-			{ displayName: loc.nodeConfiguration, value: this._postgresModel.scaleConfiguration || '-' },
-			{ displayName: loc.subscriptionId, value: this._controllerModel.controllerConfig?.spec.settings.azure.subscription ?? '' },
-			{ displayName: loc.postgresVersion, value: this._postgresModel.engineVersion ?? '-' }
+			{ displayName: loc.postgresVersion, value: this._postgresModel.engineVersion ?? '-' },
+			{ displayName: loc.nodeConfiguration, value: this._postgresModel.scaleConfiguration || '-' }
 		];
 	}
 

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

@@ -92,11 +92,12 @@ export class PostgresPropertiesPage extends DashboardPage {
 
 	private getProperties(): KeyValue[] {
 		const endpoint = this._postgresModel.endpoint;
+		const status = this._postgresModel.config?.status;
 
 		return [
 			new InputKeyValue(this.modelView.modelBuilder, loc.coordinatorEndpoint, endpoint ? `postgresql://postgres@${endpoint.ip}:${endpoint.port}` : ''),
 			new InputKeyValue(this.modelView.modelBuilder, loc.postgresAdminUsername, 'postgres'),
-			new TextKeyValue(this.modelView.modelBuilder, loc.status, this._postgresModel.config?.status.state ?? loc.unknown),
+			new TextKeyValue(this.modelView.modelBuilder, loc.status, status ? `${status.state} (${status.readyPods} ${loc.podsReady})` : loc.unknown),
 			// TODO: Make this a LinkKeyValue that opens the controller dashboard
 			new TextKeyValue(this.modelView.modelBuilder, loc.dataController, this._controllerModel.controllerConfig?.metadata.namespace ?? ''),
 			new TextKeyValue(this.modelView.modelBuilder, loc.nodeConfiguration, this._postgresModel.scaleConfiguration ?? ''),