add button to open query store report in new tab (#24303)

* add button to open query store report in new tab

* addressing comments

extensions/query-store/src/reports/baseQueryStoreReport.ts

@@ -5,17 +5,23 @@
 
 import * as vscode from 'vscode';
 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';
+import { IconPathHelper } from '../common/iconHelper';
 
 export abstract class BaseQueryStoreReport {
 	protected flexModel?: azdata.FlexContainer;
 	protected configureDialog?: ConfigureDialog;
 	protected configureButton?: azdata.ButtonComponent;
 
-	constructor(private reportTitle: string, protected resizeable: boolean, private extensionContext: vscode.ExtensionContext) { }
+	/**
+	 * Constructor
+	 * @param reportTitle Title of report shown in toolbar
+	 * @param reportId Id of tab used in query store dashboard
+	 * @param resizeable Whether or not the sections of the report are resizeable
+	 */
+	constructor(private reportTitle: string, private reportId: string, protected resizeable: boolean) { }
 
 	public get ReportContent(): azdata.FlexContainer | undefined {
 		return this.flexModel;
@@ -101,13 +107,25 @@ export abstract class BaseQueryStoreReport {
 			CSSStyles: { 'margin-top': '5px', 'margin-bottom': '5px', 'margin-right': '15px' }
 		}).component();
 
+		// Open in New Tab button
+		const openInNewTabButton = view.modelBuilder.button().withProps({
+			label: constants.openInNewTab,
+			title: constants.openInNewTab,
+			iconPath: IconPathHelper.multipleWindows
+		}).component();
+		openInNewTabButton.enabled = true;
+
+		openInNewTabButton.onDidClick(async () => {
+			await vscode.commands.executeCommand('queryStore.openQueryStoreDashboard', this.reportId);
+		});
+
+		await openInNewTabButton.updateCssStyles({ 'margin-top': '5px' });
+
+		// Configure button
 		this.configureButton = view.modelBuilder.button().withProps({
 			label: constants.configure,
 			title: constants.configure,
-			iconPath: {
-				light: path.join(this.extensionContext.extensionPath, 'images', 'light', 'gear.svg'),
-				dark: path.join(this.extensionContext.extensionPath, 'images', 'dark', 'gear.svg')
-			}
+			iconPath: IconPathHelper.gear
 		}).component();
 		this.configureButton.enabled = true;
 
@@ -127,6 +145,9 @@ export abstract class BaseQueryStoreReport {
 				component: timePeriod,
 				toolbarSeparatorAfter: true
 			},
+			{
+				component: openInNewTabButton
+			},
 			{
 				component: this.configureButton
 			}

extensions/query-store/src/reports/overallResourceConsumption.ts

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
-import * as vscode from 'vscode';
 import * as constants from '../common/constants';
 import { BaseQueryStoreReport } from './baseQueryStoreReport';
 import { QueryStoreView } from './queryStoreView';
@@ -18,8 +17,8 @@ export class OverallResourceConsumption extends BaseQueryStoreReport {
 	private cpuTime: QueryStoreView;
 	private logicalReads: QueryStoreView;
 
-	constructor(extensionContext: vscode.ExtensionContext, databaseName: string) {
-		super(constants.overallResourceConsumptionToolbarLabel(databaseName), /*resizeable*/ false, extensionContext);
+	constructor(databaseName: string) {
+		super(constants.overallResourceConsumptionToolbarLabel(databaseName), constants.overallResourceConsumptionTabId,/*resizeable*/ false);
 		this.duration = new QueryStoreView(constants.duration, 'chartreuse');
 		this.executionCount = new QueryStoreView(constants.executionCount, 'coral');
 		this.cpuTime = new QueryStoreView(constants.cpuTime, 'darkturquoise');

extensions/query-store/src/reports/queryStoreDashboard.ts

@@ -3,46 +3,57 @@
  *  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 constants from '../common/constants';
 import { TopResourceConsumingQueries } from './topResourceConsumingQueries';
 import { OverallResourceConsumption } from './overallResourceConsumption';
+import { Deferred } from '../common/promise';
 
 export class QueryStoreDashboard {
-	constructor(private dbName: string, private extensionContext: vscode.ExtensionContext) { }
+	private dashboard?: azdata.window.ModelViewDashboard;
+	private initDashboardComplete: Deferred = new Deferred();
+
+	constructor(private dbName: string) { }
 
 	/**
 	 * Creates and opens the report
 	 */
 	public async open(): Promise<void> {
 		// TODO: update title based on selected tab to have the current selected report in editor tab title
-		const dashboard = azdata.window.createModelViewDashboard(constants.queryStoreDashboardTitle(this.dbName));
-		dashboard.registerTabs(async (view: azdata.ModelView) => {
-			const topResourceConsumingQueriesReport = new TopResourceConsumingQueries(this.extensionContext, this.dbName);
-			const overallResourceConsumptionReport = new OverallResourceConsumption(this.extensionContext, this.dbName);
+		this.dashboard = azdata.window.createModelViewDashboard(constants.queryStoreDashboardTitle(this.dbName));
+		this.dashboard.registerTabs(async (view: azdata.ModelView) => {
+			const topResourceConsumingQueriesReport = new TopResourceConsumingQueries(this.dbName);
+			const overallResourceConsumptionReport = new OverallResourceConsumption(this.dbName);
 
 			await Promise.all([topResourceConsumingQueriesReport.createReport(view), overallResourceConsumptionReport.createReport(view)]);
 
 			const topResourceConsumingQueriesTab: azdata.DashboardTab = {
-				id: 'TopResourceConsumingQueriesTab',
+				id: constants.topResourceConsumingQueriesTabId,
 				content: topResourceConsumingQueriesReport.ReportContent!,
 				title: constants.topResourceConsumingQueries
 			};
 
 			const overallResourceConsumptionTab: azdata.DashboardTab = {
-				id: 'OverallResourceConsumptionTab',
+				id: constants.overallResourceConsumptionTabId,
 				content: overallResourceConsumptionReport.ReportContent!,
 				title: constants.overallResourceConsumption
 			};
 
+			this.initDashboardComplete?.resolve();
+
 			return [
 				overallResourceConsumptionTab,
 				topResourceConsumingQueriesTab
 			];
 		});
 
-		await dashboard.open();
+		await this.dashboard.open();
+		await this.initDashboardComplete;
+	}
+
+	public selectTab(selectedTab: string): void {
+		// TODO: fix flashing - currently starts with the first tab selected, then switches to the other tab. Ideally would be able to set the
+		// selected tab when registering the tabs
+		this.dashboard?.selectTab(selectedTab);
 	}
 }
-

extensions/query-store/src/reports/topResourceConsumingQueries.ts

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
-import * as vscode from 'vscode';
 import * as constants from '../common/constants';
 import { BaseQueryStoreReport } from './baseQueryStoreReport';
 import { QueryStoreView } from './queryStoreView';
@@ -16,8 +15,8 @@ export class TopResourceConsumingQueries extends BaseQueryStoreReport {
 	private planSummary: QueryStoreView;
 	private plan: QueryStoreView;
 
-	constructor(extensionContext: vscode.ExtensionContext, databaseName: string) {
-		super(constants.topResourceConsumingQueriesToolbarLabel(databaseName), /*resizeable*/ true, extensionContext);
+	constructor(databaseName: string) {
+		super(constants.topResourceConsumingQueriesToolbarLabel(databaseName), constants.topResourceConsumingQueriesTabId,/*resizeable*/ true);
 		this.queries = new QueryStoreView(constants.queries, 'chartreuse');
 		this.planSummary = new QueryStoreView(constants.planSummary('x'), 'coral'); // TODO: replace 'x' with actual query id
 		this.plan = new QueryStoreView(constants.plan('x'), 'darkturquoise');