Add reusable settings dialog to QDS Reports (#24181)

* Initial changes

* Add time, resource and chart component to config dialog

* Add appropriate components of Configuration to Overall Resource Consumption Report and Top Resource Consuming Queries

* Fix alignment and sizes of components

* Address comments. Add group containers for individual components

* Fix alignment

* Add extra label and address comments

* Address comments. Fix sequence of component addition

* Update function definition to take in config information, instead of boolean to accomodate all future reports. And update doc comment
This commit is contained in:
Sakshi Sharma
2023-08-29 13:04:29 -07:00
committed by GitHub
parent c4b1765745
commit a21aa840c9
7 changed files with 778 additions and 9 deletions

View File

@@ -8,10 +8,13 @@ import * as azdata from 'azdata';
import * as path from 'path';
import * as utils from '../common/utils';
import * as constants from '../common/constants';
import { ConfigureDialog } from '../settings/configureDialog';
export abstract class BaseQueryStoreReport {
protected editor: azdata.workspace.ModelViewEditor;
protected flexModel?: azdata.FlexContainer;
protected configureDialog?: ConfigureDialog;
protected configureButton?: azdata.ButtonComponent;
constructor(reportName: string, private reportTitle: string, protected resizeable: boolean, private extensionContext: vscode.ExtensionContext) {
this.editor = azdata.workspace.createModelViewEditor(reportName, { retainContextWhenHidden: true, supportsSave: false }, reportName);
@@ -103,7 +106,7 @@ export abstract class BaseQueryStoreReport {
CSSStyles: { 'margin-top': '5px', 'margin-bottom': '5px', 'margin-right': '15px' }
}).component();
const configureButton = view.modelBuilder.button().withProps({
this.configureButton = view.modelBuilder.button().withProps({
label: constants.configure,
title: constants.configure,
iconPath: {
@@ -111,16 +114,14 @@ export abstract class BaseQueryStoreReport {
dark: path.join(this.extensionContext.extensionPath, 'images', 'dark', 'gear.svg')
}
}).component();
this.configureButton.enabled = true;
// TODO: enable after the configuration dialog is implemented
configureButton.enabled = false;
configureButton.onDidClick(() => {
// TODO: implement configuration dialog
console.error('configuration dialog not implemented')
this.configureButton.onDidClick(async () => {
this.configureDialog = new ConfigureDialog();
await this.configureButtonClick(this.configureDialog);
});
await configureButton.updateCssStyles({ 'margin-top': '5px' });
await this.configureButton.updateCssStyles({ 'margin-top': '5px' });
toolBar.addToolbarItems([
{
@@ -132,7 +133,7 @@ export abstract class BaseQueryStoreReport {
toolbarSeparatorAfter: true
},
{
component: configureButton
component: this.configureButton
}
]);
@@ -140,5 +141,6 @@ export abstract class BaseQueryStoreReport {
}
protected abstract createViews(_view: azdata.ModelView): Promise<azdata.FlexContainer[]>;
protected abstract configureButtonClick(configureDialog: ConfigureDialog): Promise<void>;
}

View File

@@ -8,6 +8,8 @@ import * as vscode from 'vscode';
import * as constants from '../common/constants';
import { BaseQueryStoreReport } from './baseQueryStoreReport';
import { QueryStoreView } from './queryStoreView';
import { ConfigureDialog } from '../settings/configureDialog';
import { ConfigComponentsInfo } from '../common/utils';
export class OverallResourceConsumption extends BaseQueryStoreReport {
@@ -32,4 +34,9 @@ export class OverallResourceConsumption extends BaseQueryStoreReport {
return [durationContainer, executionCountContainer, cpuTimeContainer, logicalReadsContainer];
}
protected override async configureButtonClick(configureDialog: ConfigureDialog): Promise<void> {
const configComponentsInfo: ConfigComponentsInfo[] = [ConfigComponentsInfo.chartComponent, ConfigComponentsInfo.timeIntervalComponentOverallResource];
await configureDialog.openDialog(configComponentsInfo);
}
}

View File

@@ -8,6 +8,8 @@ import * as vscode from 'vscode';
import * as constants from '../common/constants';
import { BaseQueryStoreReport } from './baseQueryStoreReport';
import { QueryStoreView } from './queryStoreView';
import { ConfigureDialog } from '../settings/configureDialog';
import { ConfigComponentsInfo } from '../common/utils';
export class TopResourceConsumingQueries extends BaseQueryStoreReport {
private queries: QueryStoreView;
@@ -28,4 +30,10 @@ export class TopResourceConsumingQueries extends BaseQueryStoreReport {
return [queriesContainer, planSummaryContainer, planContainer];
}
protected override async configureButtonClick(configureDialog: ConfigureDialog): Promise<void> {
const configComponentsInfo: ConfigComponentsInfo[] = [ConfigComponentsInfo.consumptionCriteriaComponentTopResource, ConfigComponentsInfo.timeIntervalComponent, ConfigComponentsInfo.returnComponent,
ConfigComponentsInfo.filterComponent];
await configureDialog.openDialog(configComponentsInfo);
}
}