Adds add execution plan button and context menu to the bottom half of the plan comparison screen (#20770)

* Adds context menu option placeholder plan container

* Adds context menu and button to add execution plan to placeholder

* Minor clean up

* Replaces taskbar with button to add execution plans

* Removes unneeded CSS styling.

* Adjusts button type to secondary
This commit is contained in:
Lewis Sanchez
2022-10-10 14:53:27 -07:00
committed by GitHub
parent d76ccab65c
commit 5ec1d3a8e6

View File

@@ -12,7 +12,7 @@ import { ExecutionPlanCompareOrientation, ExecutionPlanComparisonPropertiesView
import { IExecutionPlanService } from 'sql/workbench/services/executionPlan/common/interfaces';
import { IHorizontalSashLayoutProvider, ISashEvent, IVerticalSashLayoutProvider, Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
import { Action } from 'vs/base/common/actions';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IFileDialogService } from 'vs/platform/dialogs/common/dialogs';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
@@ -23,7 +23,6 @@ import { addIconClassName, disableTooltipIconClassName, enableTooltipIconClassNa
import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
import { extname } from 'vs/base/common/path';
import { INotificationService } from 'vs/platform/notification/common/notification';
import { InfoBox } from 'sql/workbench/browser/ui/infoBox/infoBox';
import { LoadingSpinner } from 'sql/base/browser/ui/loadingSpinner/loadingSpinner';
import { contrastBorder, editorWidgetBackground, errorForeground, listHoverBackground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
import { ExecutionPlanViewHeader } from 'sql/workbench/contrib/executionPlan/browser/executionPlanViewHeader';
@@ -33,6 +32,10 @@ import { generateUuid } from 'vs/base/common/uuid';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { ExecutionPlanWidgetController } from 'sql/workbench/contrib/executionPlan/browser/executionPlanWidgetController';
import { NodeSearchWidget } from 'sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget';
import { Button } from 'sql/base/browser/ui/button/button';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
const ADD_EXECUTION_PLAN_STRING = localize('epCompare.addExecutionPlanLabel', 'Add execution plan');
export class ExecutionPlanComparisonEditorView {
@@ -69,8 +72,8 @@ export class ExecutionPlanComparisonEditorView {
public bottomWidgetController: ExecutionPlanWidgetController;
private _placeholderContainer: HTMLElement;
private _placeholderButton: Button;
private _placeholderInfoboxContainer: HTMLElement;
private _placeholderInfobox: InfoBox;
private _placeholderLoading: LoadingSpinner;
private _topPlanContainer: HTMLElement;
@@ -128,7 +131,8 @@ export class ExecutionPlanComparisonEditorView {
@IContextViewService readonly contextViewService: IContextViewService,
@ITextFileService private readonly _textFileService: ITextFileService,
@INotificationService private _notificationService: INotificationService,
@IProgressService private _progressService: IProgressService
@IProgressService private _progressService: IProgressService,
@IContextMenuService private _contextMenuService: IContextMenuService
) {
this.container = DOM.$('.comparison-editor');
@@ -184,8 +188,39 @@ export class ExecutionPlanComparisonEditorView {
this.planSplitViewContainer = DOM.$('.split-view-container');
this._planComparisonContainer.appendChild(this.planSplitViewContainer);
const self = this;
this._placeholderContainer = DOM.$('.placeholder');
const contextMenuAction = [
this._instantiationService.createInstance(AddExecutionPlanAction)
];
this._placeholderContainer.oncontextmenu = (e: MouseEvent) => {
if (contextMenuAction) {
this._contextMenuService.showContextMenu({
getAnchor: () => {
return {
x: e.x,
y: e.y
};
},
getActions: () => contextMenuAction,
getActionsContext: () => (self)
});
}
};
this._placeholderInfoboxContainer = DOM.$('.placeholder-infobox');
this._placeholderButton = new Button(this._placeholderInfoboxContainer, { secondary: true });
attachButtonStyler(this._placeholderButton, this.themeService);
this._placeholderButton.label = ADD_EXECUTION_PLAN_STRING;
this._placeholderButton.ariaLabel = ADD_EXECUTION_PLAN_STRING;
this._placeholderButton.enabled = true;
this._placeholderButton.onDidClick(e => {
const addExecutionPlanAction = this._instantiationService.createInstance(AddExecutionPlanAction);
addExecutionPlanAction.run(self);
});
this._placeholderLoading = new LoadingSpinner(this._placeholderContainer, {
fullSize: true,
showText: true
@@ -193,11 +228,6 @@ export class ExecutionPlanComparisonEditorView {
this._placeholderContainer.appendChild(this._placeholderInfoboxContainer);
this._placeholderLoading.loadingMessage = localize('epComapre.LoadingPlanMessage', "Loading execution plan");
this._placeholderLoading.loadingCompletedMessage = localize('epComapre.LoadingPlanCompleteMessage', "Execution plan successfully loaded");
this._placeholderInfobox = this._instantiationService.createInstance(InfoBox, this._placeholderInfoboxContainer, {
style: 'information',
text: ''
});
this._placeholderInfobox.text = localize('epComapre.placeholderInfoboxText', "Add execution plans to compare");
this._topPlanContainer = DOM.$('.plan-container');
this.planSplitViewContainer.appendChild(this._topPlanContainer);