Adding badge icons to execution plan (#19004) (#19015)

* Adding badge icons to executionplan

* Fixing doc comment

* Fixing doc comments

* Making enum value more readable

* Changing default to undefined.

* Fixing some icon names

src/sql/azdata.proposed.d.ts

@@ -1264,6 +1264,27 @@ declare module 'azdata' {
 			 * Edges corresponding to the children.
 			 */
 			edges: ExecutionPlanEdge[];
+			/**
+			 * Warning/parallelism badges applicable to the current node
+			 */
+			badges: ExecutionPlanBadge[];
+		}
+
+		export interface ExecutionPlanBadge {
+			/**
+			 * Type of the node overlay. This determines the icon that is displayed for it
+			 */
+			type: BadgeType;
+			/**
+			 * Text to display for the overlay tooltip
+			 */
+			tooltip: string;
+		}
+
+		export enum BadgeType {
+			Warning = 0,
+			CriticalWarning = 1,
+			Parallelism = 2
 		}
 
 		export interface ExecutionPlanEdge {

src/sql/workbench/api/common/sqlExtHost.api.impl.ts

@@ -593,6 +593,10 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
 				}
 			};
 
+			const executionPlan: typeof azdata.executionPlan = {
+				BadgeType: sqlExtHostTypes.executionPlan.BadgeType
+			};
+
 			return {
 				version: initData.version,
 				accounts,
@@ -644,7 +648,8 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
 				TabOrientation: sqlExtHostTypes.TabOrientation,
 				sqlAssessment,
 				TextType: sqlExtHostTypes.TextType,
-				designers: designers
+				designers: designers,
+				executionPlan: executionPlan
 			};
 		},
 		extHostNotebook: extHostNotebook,

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -1031,3 +1031,11 @@ export namespace designers {
 		GraphNode = 'GraphNode'
 	}
 }
+
+export namespace executionPlan {
+	export enum BadgeType {
+		Warning = 0,
+		CriticalWarning = 1,
+		Parallelism = 2
+	}
+}

src/sql/workbench/contrib/executionPlan/browser/constants.ts

@@ -249,6 +249,14 @@ export let executionPlanNodeIconPaths =
 	unionAll: imageBasePath + 'union_all.png'
 };
 
+export const badgeIconPaths = {
+	warning: imageBasePath + 'badge_warning.svg',
+
+	parallelism: imageBasePath + 'badge_parallelism.svg',
+
+	criticalWarning: imageBasePath + 'badge_critical_warning.svg'
+};
+
 const parentContainer = 'qps-container';
 export const savePlanIconClassNames = [parentContainer, 'save-plan-icon'].join(' ');
 export const openPropertiesIconClassNames = [parentContainer, 'open-properties-icon'].join(' ');

src/sql/workbench/contrib/executionPlan/browser/executionPlan.ts

@@ -4,14 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./media/executionPlan';
-import type * as azdata from 'azdata';
+import * as azdata from 'azdata';
+import * as sqlExtHostType from 'sql/workbench/api/common/sqlExtHostTypes';
 import { IPanelView, IPanelTab } from 'sql/base/browser/ui/panel/panel';
 import { localize } from 'vs/nls';
 import { dispose } from 'vs/base/common/lifecycle';
 import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar';
 import * as DOM from 'vs/base/browser/dom';
 import * as azdataGraphModule from 'azdataGraph';
-import { customZoomIconClassNames, openPlanFileIconClassNames, openPropertiesIconClassNames, openQueryIconClassNames, executionPlanNodeIconPaths, savePlanIconClassNames, searchIconClassNames, zoomInIconClassNames, zoomOutIconClassNames, zoomToFitIconClassNames } from 'sql/workbench/contrib/executionPlan/browser/constants';
+import { customZoomIconClassNames, openPlanFileIconClassNames, openPropertiesIconClassNames, openQueryIconClassNames, executionPlanNodeIconPaths, savePlanIconClassNames, searchIconClassNames, zoomInIconClassNames, zoomOutIconClassNames, zoomToFitIconClassNames, badgeIconPaths } from 'sql/workbench/contrib/executionPlan/browser/constants';
 import { isString } from 'vs/base/common/types';
 import { PlanHeader } from 'sql/workbench/contrib/executionPlan/browser/planHeader';
 import { ExecutionPlanPropertiesView } from 'sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesView';
@@ -362,12 +363,47 @@ export class ExecutionPlan implements ISashLayoutProvider {
 			}
 		}
 
+		if (node.badges) {
+			diagramNode.badges = [];
+			for (let i = 0; i < node.badges.length; i++) {
+				diagramNode.badges.push(this.getBadgeTypeString(node.badges[i].type));
+			}
+		}
+
 		if (node.description) {
 			diagramNode.description = node.description;
 		}
 		return diagramNode;
 	}
 
+	private getBadgeTypeString(badgeType: sqlExtHostType.executionPlan.BadgeType): {
+		type: string,
+		tooltip: string
+	} | undefined {
+		/**
+		 * TODO: Need to figure out if tooltip have to be removed. For now, they are empty
+		 */
+		switch (badgeType) {
+			case sqlExtHostType.executionPlan.BadgeType.Warning:
+				return {
+					type: 'warning',
+					tooltip: ''
+				};
+			case sqlExtHostType.executionPlan.BadgeType.CriticalWarning:
+				return {
+					type: 'criticalWarning',
+					tooltip: ''
+				};
+			case sqlExtHostType.executionPlan.BadgeType.Parallelism:
+				return {
+					type: 'parallelism',
+					tooltip: ''
+				};
+			default:
+				return undefined;
+		}
+	}
+
 	private populateEdges(edge: InternalExecutionPlanEdge, diagramEdge: any) {
 		diagramEdge.label = '';
 		const edgeId = this.createGraphElementId();
@@ -401,7 +437,7 @@ export class ExecutionPlan implements ISashLayoutProvider {
 		let graphRoot: azdata.executionPlan.ExecutionPlanNode = this._graphModel.root;
 
 		this.populate(graphRoot, diagramRoot);
-		this.azdataGraphDiagram = new azdataGraph.azdataQueryPlan(container, diagramRoot, executionPlanNodeIconPaths);
+		this.azdataGraphDiagram = new azdataGraph.azdataQueryPlan(container, diagramRoot, executionPlanNodeIconPaths, badgeIconPaths);
 
 		this.azdataGraphDiagram.graph.setCellsMovable(false); // preventing drag and drop of graph nodes.
 		this.azdataGraphDiagram.graph.setCellsDisconnectable(false); // preventing graph edges to be disconnected from source and target nodes.
@@ -435,7 +471,6 @@ export class ExecutionPlan implements ISashLayoutProvider {
 		});
 	}
 
-
 	public set graphModel(graph: azdata.executionPlan.ExecutionPlanGraph | undefined) {
 		this._graphModel = graph;
 		if (this._graphModel) {

src/sql/workbench/contrib/executionPlan/browser/images/icons/badge_critical_warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-red{fill:#e51400;}.icon-white{fill:#fff;}</style></defs><title>StatusCriticalError_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,8A8,8,0,1,1,8,0,8,8,0,0,1,16,8Z"/></g><g id="iconBg"><path class="icon-vs-red" d="M8,1a7,7,0,1,0,7,7A7,7,0,0,0,8,1Zm4.414,10L11,12.414l-3-3-3,3L3.586,11l3-3-3-3L5,3.586l3,3,3-3L12.414,5l-3,3Z"/><path class="icon-white" d="M9.414,8l3,3L11,12.414l-3-3-3,3L3.586,11l3-3-3-3L5,3.586l3,3,3-3L12.414,5Z"/></g></svg>

src/sql/workbench/contrib/executionPlan/browser/images/icons/badge_parallel_process.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F6F6F6;fill-opacity:0;}
+	.st1{fill:#F6F6F6;}
+	.st2{fill:#DCB67A;}
+	.st3{fill:#424242;}
+</style>
+<path id="canvas" class="st0" d="M16,16H0V0h16V16z"/>
+<circle class="st1" cx="8" cy="8" r="8"/>
+<circle class="st2" cx="8" cy="8" r="7"/>
+<g id="iconBg">
+	<path class="st3" d="M3,5.5C3,4.7,3.7,4,4.5,4c0.7,0,1.2,0.4,1.4,1h5.2l-0.9-0.9l0.7-0.7L13,5.5l-2.1,2.1l-0.7-0.7L11.1,6H5.9
+		C5.7,6.6,5.2,7,4.5,7C3.7,7,3,6.3,3,5.5z M10.2,9.1l0.9,0.9H5.9C5.7,9.4,5.2,9,4.5,9C3.7,9,3,9.7,3,10.5S3.7,12,4.5,12
+		c0.7,0,1.2-0.4,1.4-1h5.2l-0.9,0.9l0.7,0.7l2.1-2.1l-2.1-2.1C10.9,8.4,10.2,9.1,10.2,9.1z"/>
+</g>
+</svg>

src/sql/workbench/contrib/executionPlan/browser/images/icons/badge_warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-yellow{fill:#fc0;}</style></defs><title>StatusWarning_16x</title><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/><path class="icon-vs-out" d="M16,14l-2,2H2L0,14,7,0H9Z"/><path class="icon-vs-yellow" d="M8.382,1H7.618l-6.4,12.8L2.5,15h11l1.283-1.2ZM9,13H7V11H9Zm0-3H7V5H9Z"/><path d="M7,11H9v2H7ZM7,5v5H9V5Z"/></svg>

src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css

@@ -106,6 +106,7 @@ However we always want it to be the width of the container it is resizing.
 	width: 100%;
 	height: 100%;
 	overflow: scroll;
+	position: relative;
 }
 
 /* Properties view in execution plan */