Nasc/per role parameters (#14425)

* Creating separate pages for worker and coordinator parameters

* Added new gear, hid coordinator server parameters page

* Commented out azdataApi

* Added white gear, created abstract class for server parameters page

* Chaged gear name, condensed base class more, changed file name

* Added colored gears for parameter pages

* Edited to describe configuring both coordinator and worker

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

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 } from '../../../constants';
+import { PostgresParametersPage } from './postgresParameters';
+import { PostgresModel } from '../../../models/postgresModel';
+
+export class PostgresCoordinatorNodeParametersPage extends PostgresParametersPage {
+
+	constructor(protected modelView: azdata.ModelView, _postgresModel: PostgresModel) {
+		super(modelView, _postgresModel);
+	}
+
+	protected get title(): string {
+		return loc.coordinatorNodeParameters;
+	}
+
+	protected get id(): string {
+		return 'postgres-coordinator-node-parameters';
+	}
+
+	protected get icon(): { dark: string; light: string; } {
+		return IconPathHelper.gearGray;
+	}
+
+	protected get description(): string {
+		return loc.coordinatorNodeParametersDescription;
+	}
+
+	protected async saveParameterEdits(): Promise<void> {
+		/* TODO add correct azdata call for editing coordinator parameters
+			await this._azdataApi.azdata.arc.postgres.server.edit(
+				this._postgresModel.info.name,
+				{ engineSettings: engineSettings.toString() },
+				this._postgresModel.engineVersion,
+				this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+				session);
+		*/
+	}
+
+	protected async resetAllParameters(): Promise<void> {
+		/* TODO add correct azdata call for editing coordinator parameters
+			await this._azdataApi.azdata.arc.postgres.server.edit(
+				this._postgresModel.info.name,
+				{ engineSettings: `''`, replaceEngineSettings: true },
+				this._postgresModel.engineVersion,
+				this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+				session);
+		*/
+	}
+
+	protected async resetParameter(): Promise<void> {
+		/* TODO add correct azdata call for editing coordinator parameters
+			await this._azdataApi.azdata.arc.postgres.server.edit(
+				this._postgresModel.info.name,
+				{ engineSettings: parameterName + '=' },
+				this._postgresModel.engineVersion,
+				this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+				session);
+		*/
+	}
+
+	protected refreshParametersTable(): void {
+		this._parameters = this._postgresModel.coordinatorNodeEngineSettings.map(engineSetting => this.createParameterComponents(engineSetting));
+		this._parametersTable.data = this._parameters.map(p => [p.parameterName, p.valueContainer, p.description, p.resetButton]);
+	}
+}

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

@@ -14,7 +14,7 @@ import { Dashboard } from '../../components/dashboard';
 import { PostgresDiagnoseAndSolveProblemsPage } from './postgresDiagnoseAndSolveProblemsPage';
 import { PostgresSupportRequestPage } from './postgresSupportRequestPage';
 import { PostgresComputeAndStoragePage } from './postgresComputeAndStoragePage';
-import { PostgresParametersPage } from './postgresParametersPage';
+import { PostgresWorkerNodeParametersPage } from './postgresWorkerNodeParametersPage';
 import { PostgresPropertiesPage } from './postgresPropertiesPage';
 
 export class PostgresDashboard extends Dashboard {
@@ -35,7 +35,9 @@ export class PostgresDashboard extends Dashboard {
 		const connectionStringsPage = new PostgresConnectionStringsPage(modelView, this._postgresModel);
 		const computeAndStoragePage = new PostgresComputeAndStoragePage(modelView, this._postgresModel);
 		const propertiesPage = new PostgresPropertiesPage(modelView, this._controllerModel, this._postgresModel);
-		const parametersPage = new PostgresParametersPage(modelView, this._postgresModel);
+		// TODO Add dashboard once backend is able to be connected for per role server parameter edits.
+		// const coordinatorNodeParametersPage = new PostgresCoordinatorNodeParametersPage(modelView, this._postgresModel);
+		const workerNodeParametersPage = new PostgresWorkerNodeParametersPage(modelView, this._postgresModel);
 		const diagnoseAndSolveProblemsPage = new PostgresDiagnoseAndSolveProblemsPage(modelView, this._context, this._postgresModel);
 		const supportRequestPage = new PostgresSupportRequestPage(modelView, this._controllerModel, this._postgresModel);
 
@@ -47,7 +49,7 @@ export class PostgresDashboard extends Dashboard {
 					propertiesPage.tab,
 					connectionStringsPage.tab,
 					computeAndStoragePage.tab,
-					parametersPage.tab
+					workerNodeParametersPage.tab
 				]
 			},
 			{

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

@@ -20,24 +20,25 @@ export type ParametersModel = {
 	resetButton: azdata.ButtonComponent
 };
 
-export class PostgresParametersPage extends DashboardPage {
+export abstract class PostgresParametersPage extends DashboardPage {
 	private searchBox!: azdata.InputBoxComponent;
-	private parametersTable!: azdata.DeclarativeTableComponent;
+	protected _parametersTable!: azdata.DeclarativeTableComponent;
 	private parameterContainer?: azdata.DivContainer;
-	private _parametersTableLoading!: azdata.LoadingComponent;
+	private parametersTableLoading!: azdata.LoadingComponent;
 
 	private discardButton!: azdata.ButtonComponent;
 	private saveButton!: azdata.ButtonComponent;
 	private resetAllButton!: azdata.ButtonComponent;
 	private connectToServerButton?: azdata.ButtonComponent;
 
-	private _parameters: ParametersModel[] = [];
+	protected _parameters: ParametersModel[] = [];
 	private parameterUpdates: Map<string, string> = new Map();
 
-	private readonly _azdataApi: azdataExt.IExtension;
+	protected readonly _azdataApi: azdataExt.IExtension;
 
-	constructor(protected modelView: azdata.ModelView, private _postgresModel: PostgresModel) {
+	constructor(protected modelView: azdata.ModelView, protected _postgresModel: PostgresModel) {
 		super(modelView);
+
 		this._azdataApi = vscode.extensions.getExtension(azdataExt.extension.name)?.exports;
 
 		this.initializeConnectButton();
@@ -49,17 +50,7 @@ export class PostgresParametersPage extends DashboardPage {
 		);
 	}
 
-	protected get title(): string {
-		return loc.nodeParameters;
-	}
-
-	protected get id(): string {
-		return 'postgres-node-parameters';
-	}
-
-	protected get icon(): { dark: string; light: string; } {
-		return IconPathHelper.gear;
-	}
+	protected abstract get description(): string;
 
 	protected get container(): azdata.Component {
 		const root = this.modelView.modelBuilder.divContainer().component();
@@ -67,12 +58,12 @@ export class PostgresParametersPage extends DashboardPage {
 		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
 
 		content.addItem(this.modelView.modelBuilder.text().withProps({
-			value: loc.nodeParameters,
+			value: this.title,
 			CSSStyles: { ...cssStyles.title }
 		}).component());
 
 		content.addItem(this.modelView.modelBuilder.text().withProps({
-			value: loc.nodeParametersDescription,
+			value: this.description,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component());
 
@@ -83,7 +74,7 @@ export class PostgresParametersPage extends DashboardPage {
 
 		content.addItem(this.searchBox!, { CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px', 'margin-bottom': '20px' } });
 
-		this.parametersTable = this.modelView.modelBuilder.declarativeTable().withProps({
+		this._parametersTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			width: '100%',
 			columns: [
 				{
@@ -124,7 +115,7 @@ export class PostgresParametersPage extends DashboardPage {
 			data: []
 		}).component();
 
-		this._parametersTableLoading = this.modelView.modelBuilder.loadingComponent().component();
+		this.parametersTableLoading = this.modelView.modelBuilder.loadingComponent().component();
 
 		this.parameterContainer = this.modelView.modelBuilder.divContainer().component();
 		this.selectComponent();
@@ -162,12 +153,7 @@ export class PostgresParametersPage extends DashboardPage {
 								});
 								const session = await this._postgresModel.controllerModel.acquireAzdataSession();
 								try {
-									await this._azdataApi.azdata.arc.postgres.server.edit(
-										this._postgresModel.info.name,
-										{ engineSettings: engineSettings.toString() },
-										this._postgresModel.engineVersion,
-										this._postgresModel.controllerModel.azdataAdditionalEnvVars,
-										session);
+									this.saveParameterEdits(engineSettings.toString(), session);
 								} finally {
 									session.dispose();
 								}
@@ -234,17 +220,9 @@ export class PostgresParametersPage extends DashboardPage {
 							cancellable: false
 						},
 						async (_progress, _token): Promise<void> => {
-							//all
-							// azdata arc postgres server edit -n <server group name> -e '' -re
-							let session: azdataExt.AzdataSession | undefined = undefined;
+							const session = await this._postgresModel.controllerModel.acquireAzdataSession();
 							try {
-								session = await this._postgresModel.controllerModel.acquireAzdataSession();
-								await this._azdataApi.azdata.arc.postgres.server.edit(
-									this._postgresModel.info.name,
-									{ engineSettings: `''`, replaceEngineSettings: true },
-									this._postgresModel.engineVersion,
-									this._postgresModel.controllerModel.azdataAdditionalEnvVars,
-									session);
+								this.resetAllParameters(session);
 							} catch (err) {
 								// If an error occurs while resetting the instance then re-enable the reset button since
 								// the edit wasn't successfully applied
@@ -278,7 +256,7 @@ export class PostgresParametersPage extends DashboardPage {
 		]).component();
 	}
 
-	private initializeConnectButton(): void {
+	protected initializeConnectButton(): void {
 		this.connectToServerButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.connectToServer,
 			enabled: false,
@@ -314,12 +292,12 @@ export class PostgresParametersPage extends DashboardPage {
 					vscode.window.showInformationMessage(loc.extensionInstalled(loc.postgresExtension));
 				}
 
-				this._parametersTableLoading!.loading = true;
-				await this.callGetEngineSettings().finally(() => this._parametersTableLoading!.loading = false);
+				this.parametersTableLoading!.loading = true;
+				await this.callGetEngineSettings().finally(() => this.parametersTableLoading!.loading = false);
 				this.searchBox!.enabled = true;
 				this.resetAllButton!.enabled = true;
 				this.parameterContainer!.clearItems();
-				this.parameterContainer!.addItem(this.parametersTable);
+				this.parameterContainer!.addItem(this._parametersTable);
 			})
 		);
 	}
@@ -331,11 +309,11 @@ export class PostgresParametersPage extends DashboardPage {
 				CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 			}).component());
 			this.parameterContainer!.addItem(this.connectToServerButton!, { CSSStyles: { 'max-width': '125px' } });
-			this.parameterContainer!.addItem(this._parametersTableLoading!);
+			this.parameterContainer!.addItem(this.parametersTableLoading!);
 		} else {
 			this.searchBox!.enabled = true;
 			this.resetAllButton!.enabled = true;
-			this.parameterContainer!.addItem(this.parametersTable!);
+			this.parameterContainer!.addItem(this._parametersTable!);
 			this.refreshParametersTable();
 		}
 	}
@@ -354,7 +332,7 @@ export class PostgresParametersPage extends DashboardPage {
 		}
 	}
 
-	private initializeSearchBox(): void {
+	protected initializeSearchBox(): void {
 		this.searchBox = this.modelView.modelBuilder.inputBox().withProps({
 			readOnly: false,
 			enabled: false,
@@ -371,7 +349,7 @@ export class PostgresParametersPage extends DashboardPage {
 	@debounce(500)
 	private onSearchFilter(): void {
 		if (!this.searchBox!.value) {
-			this.parametersTable.setFilter(undefined);
+			this._parametersTable.setFilter(undefined);
 		} else {
 			this.filterParameters(this.searchBox!.value);
 		}
@@ -379,12 +357,12 @@ export class PostgresParametersPage extends DashboardPage {
 
 	private filterParameters(search: string): void {
 		const filteredRowIndexes: number[] = [];
-		this.parametersTable.data?.forEach((row, index) => {
+		this._parametersTable.data?.forEach((row, index) => {
 			if (row[0].toUpperCase()?.search(search.toUpperCase()) !== -1 || row[2].toUpperCase()?.search(search.toUpperCase()) !== -1) {
 				filteredRowIndexes.push(index);
 			}
 		});
-		this.parametersTable.setFilter(filteredRowIndexes);
+		this._parametersTable.setFilter(filteredRowIndexes);
 	}
 
 	private handleOnTextChanged(component: azdata.InputBoxComponent, currentValue: string | undefined): boolean {
@@ -404,7 +382,7 @@ export class PostgresParametersPage extends DashboardPage {
 		}
 	}
 
-	private createParameterComponents(engineSetting: EngineSettingsModel): ParametersModel {
+	protected createParameterComponents(engineSetting: EngineSettingsModel): ParametersModel {
 
 		// Container to hold input component and information bubble
 		const valueContainer = this.modelView.modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
@@ -540,12 +518,7 @@ export class PostgresParametersPage extends DashboardPage {
 						async (_progress, _token): Promise<void> => {
 							const session = await this._postgresModel.controllerModel.acquireAzdataSession();
 							try {
-								await this._azdataApi.azdata.arc.postgres.server.edit(
-									this._postgresModel.info.name,
-									{ engineSettings: engineSetting.parameterName + '=' },
-									this._postgresModel.engineVersion,
-									this._postgresModel.controllerModel.azdataAdditionalEnvVars,
-									session);
+								this.resetParameter(engineSetting.parameterName!, session);
 							} finally {
 								session.dispose();
 							}
@@ -570,15 +543,18 @@ export class PostgresParametersPage extends DashboardPage {
 		return parameter;
 	}
 
-	private refreshParametersTable(): void {
-		this._parameters = this._postgresModel._engineSettings.map(engineSetting => this.createParameterComponents(engineSetting));
-		this.parametersTable.data = this._parameters.map(p => [p.parameterName, p.valueContainer, p.description, p.resetButton]);
-	}
+	protected abstract saveParameterEdits(engineSettings: string, session: azdataExt.AzdataSession): void;
 
-	private async handleServiceUpdated(): Promise<void> {
+	protected abstract resetAllParameters(session: azdataExt.AzdataSession): void;
+
+	protected abstract resetParameter(parameterName: string, session: azdataExt.AzdataSession): void;
+
+	protected abstract refreshParametersTable(): void;
+
+	protected async handleServiceUpdated(): Promise<void> {
 		if (this._postgresModel.configLastUpdated && !this._postgresModel.engineSettingsLastUpdated) {
 			this.connectToServerButton!.enabled = true;
-			this._parametersTableLoading!.loading = false;
+			this.parametersTableLoading!.loading = false;
 		} else if (this._postgresModel.engineSettingsLastUpdated) {
 			await this.callGetEngineSettings();
 			this.discardButton!.enabled = false;

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

@@ -0,0 +1,72 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 azdataExt from 'azdata-ext';
+import * as loc from '../../../localizedConstants';
+import { IconPathHelper } from '../../../constants';
+import { PostgresParametersPage } from './postgresParameters';
+import { PostgresModel } from '../../../models/postgresModel';
+
+export class PostgresWorkerNodeParametersPage extends PostgresParametersPage {
+
+	constructor(protected modelView: azdata.ModelView, _postgresModel: PostgresModel) {
+		super(modelView, _postgresModel);
+	}
+
+	protected get title(): string {
+		// TODO update to loc.workerNodeParameters
+		return loc.nodeParameters;
+	}
+
+	protected get id(): string {
+		// TODO update to 'postgres-worker-node-parameters'
+		return 'postgres-nodes-parameters';
+	}
+
+	protected get icon(): { dark: string; light: string; } {
+		return IconPathHelper.gearBlue;
+	}
+
+	protected get description(): string {
+		// TODO update to loc.workerNodesParametersDescription
+		return loc.nodeParametersDescription;
+	}
+
+	protected async saveParameterEdits(engineSettings: string, session: azdataExt.AzdataSession): Promise<void> {
+		await this._azdataApi.azdata.arc.postgres.server.edit(
+			this._postgresModel.info.name,
+			{ engineSettings: engineSettings },
+			this._postgresModel.engineVersion,
+			this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+			session);
+
+	}
+
+	protected async resetAllParameters(session: azdataExt.AzdataSession): Promise<void> {
+		await this._azdataApi.azdata.arc.postgres.server.edit(
+			this._postgresModel.info.name,
+			{ engineSettings: `''`, replaceEngineSettings: true },
+			this._postgresModel.engineVersion,
+			this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+			session);
+
+	}
+
+	protected async resetParameter(parameterName: string, session: azdataExt.AzdataSession): Promise<void> {
+		await this._azdataApi.azdata.arc.postgres.server.edit(
+			this._postgresModel.info.name,
+			{ engineSettings: parameterName + '=' },
+			this._postgresModel.engineVersion,
+			this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+			session);
+
+	}
+
+	protected refreshParametersTable(): void {
+		this._parameters = this._postgresModel.workerNodesEngineSettings.map(engineSetting => this.createParameterComponents(engineSetting));
+		this._parametersTable.data = this._parameters.map(p => [p.parameterName, p.valueContainer, p.description, p.resetButton]);
+	}
+}