Adding plan properties comparison, fixed dark icons, fixed dropdown text. (#19601)

* Adding prop compare logic

* Fixed using semaphore

* Adding dark icons
Adding dropdown prefix
Adding all visible plans from plan comparison

* Reverting mssql vbump

* Fixing icon name

* executionPlanComparisonPropertiesView

* Fixing icon paths and adding preselect model

* Fixed icon spacing

* Removing styling in formatter

* Adding tooltip to plugs
switching to plugins

* Removing unecessary calls to getSkeletonNodes()

* Renaming variable

* Fixed column value formatting

* Undoing formatter change
This commit is contained in:
Aasim Khan
2022-06-03 16:31:03 -07:00
committed by GitHub
parent f0f4a0a3cf
commit b63fd59372
39 changed files with 540 additions and 42 deletions

View File

@@ -5,13 +5,16 @@
import { ExecutionPlanPropertiesViewBase, PropertiesSortType } from 'sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import type * as azdata from 'azdata';
import * as azdata from 'azdata';
import { localize } from 'vs/nls';
import { textFormatter } from 'sql/base/browser/ui/table/formatters';
import { isString } from 'vs/base/common/types';
import { removeLineBreaks } from 'sql/base/common/strings';
import * as DOM from 'vs/base/browser/dom';
import { InternalExecutionPlanElement } from 'sql/workbench/contrib/executionPlan/browser/azdataGraphView';
import { executionPlanComparisonPropertiesDifferent, executionPlanComparisonPropertiesGreenDownArrow, executionPlanComparisonPropertiesRedDownArrow, executionPlanComparisonPropertiesGreenUpArrow, executionPlanComparisonPropertiesRedUpArrow } from 'sql/workbench/contrib/executionPlan/browser/constants';
import * as sqlExtHostType from 'sql/workbench/api/common/sqlExtHostTypes';
import { TextWithIconColumn } from 'sql/base/browser/ui/table/plugins/textWithIconColumn';
export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanPropertiesViewBase {
private _model: ExecutionPlanComparisonPropertiesViewModel;
@@ -44,7 +47,7 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
}
const titleText = localize('executionPlanComparisonPropertiesTopOperation', "Top operation: {0}", target);
this._topOperationNameContainer.innerText = titleText;
this._bottomOperationNameContainer.title = titleText;
this._topOperationNameContainer.title = titleText;
this.addDataToTable();
}
@@ -88,15 +91,13 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
});
}
if (this._model.bottomElement) {
columns.push({
columns.push(new TextWithIconColumn({
id: 'value',
name: localize('nodePropertyViewNameValueColumnBottomHeader', "Value (Bottom Plan)"),
field: 'value2',
width: 150,
editor: Slick.Editors.Text,
headerCssClass: 'prop-table-header',
formatter: textFormatter
});
}).definition);
}
let topProps = [];
@@ -204,19 +205,55 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
const topProp = v.topProp;
const bottomProp = v.bottomProp;
const parentRowCellStyling = 'font-weight: bold';
let diffIconClass = 'default-bottom-column-cell-styling';
if (topProp && bottomProp) {
row['displayOrder'] = v.topProp.displayOrder;
if (v.topProp.displayValue !== v.bottomProp.displayValue) {
switch (v.topProp.betterValue) {
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.None:
diffIconClass = executionPlanComparisonPropertiesDifferent;
break;
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.LowerNumber:
if (parseFloat(v.bottomProp.displayValue) < parseFloat(v.topProp.displayValue)) {
diffIconClass = executionPlanComparisonPropertiesGreenDownArrow;
} else {
diffIconClass = executionPlanComparisonPropertiesRedUpArrow;
}
break;
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.HigherNumber:
if (parseFloat(v.bottomProp.displayValue) > parseFloat(v.topProp.displayValue)) {
diffIconClass = executionPlanComparisonPropertiesGreenUpArrow;
} else {
diffIconClass = executionPlanComparisonPropertiesRedDownArrow;
}
break;
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.True:
if (v.bottomProp.displayValue === 'True') {
diffIconClass = executionPlanComparisonPropertiesGreenUpArrow;
} else {
diffIconClass = executionPlanComparisonPropertiesRedDownArrow;
}
break;
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.False:
if (v.bottomProp.displayValue === 'False') {
diffIconClass = executionPlanComparisonPropertiesGreenDownArrow;
} else {
diffIconClass = executionPlanComparisonPropertiesRedUpArrow;
}
break;
}
}
row['value1'] = {
text: removeLineBreaks(v.topProp.displayValue, ' ')
};
row['value2'] = {
text: removeLineBreaks(v.bottomProp.displayValue, ' ')
iconCssClass: diffIconClass,
title: removeLineBreaks(v.bottomProp.displayValue, ' ')
};
if ((topProp && !isString(topProp.value)) || (bottomProp && !isString(bottomProp.value))) {
row['name'].style = parentRowCellStyling;
row['value1'].style = parentRowCellStyling;
row['value2'].style = parentRowCellStyling;
row['value2'].iconCssClass += ` parent-row-styling`;
}
rows.push(row);
if (!isString(topProp.value) && !isString(bottomProp.value)) {
@@ -240,12 +277,13 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
} else if (!topProp && bottomProp) {
row['displayOrder'] = v.bottomProp.displayOrder;
row['value2'] = {
text: v.bottomProp.displayValue
title: v.bottomProp.displayValue,
iconCssClass: diffIconClass
};
rows.push(row);
if (!isString(bottomProp.value)) {
row['name'].style = parentRowCellStyling;
row['value2'].style = parentRowCellStyling;
row['value2'].iconCssClass += ` parent-row-styling`;
this.convertPropertiesToTableRows(undefined, bottomProp.value, rows.length - 1, indent + 2, rows);
}
}