ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-26 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Redoing Execution Plan Comparison Editor (#19375)

Browse Source 
* Adding code for execution plan comparison editor

* Handling floating promises and fixing a loc string

* Fixing some polygon stuff

* Fixing azdatagraph null check bug

* Adding progress notification for similar areas

* Removing some floating promises

* Fixing button enabled state
This commit is contained in:
Aasim Khan
2022-05-23 14:33:18 -07:00
committed by GitHub
parent 000923207e
commit 8bb6b5fc1a
34 changed files with 1601 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css
View File

@@ -109,24 +109,34 @@ However we always want it to be the width of the container it is resizing.
position: relative;
}
/* Properties view in execution plan */
.eps-container .execution-plan .properties {
.eps-container .properties {
flex: 0 0 500px;
flex-direction: row;
}
.eps-container .properties-sash {
position: relative;
height: 100%;
width: 1px;
}
/* Properties view in execution plan */
.properties-content {
overflow: hidden;
width: 500px;
height: calc( 100% - 2px );
height: calc(100% - 2px);
display: flex;
flex-direction: column;
border-left: 1px solid;
border-left: 3px solid;
border-color: var(--separator-border)
}
/* Title container of the properties view */
.eps-container .execution-plan .properties .title {
.eps-container .properties .title {
line-height: 30px;
height: 22px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
overflow: hidden;
display: flex;
align-items: center;
@@ -137,7 +147,7 @@ However we always want it to be the width of the container it is resizing.
}
/* text in title container of properties view */
.eps-container .execution-plan .properties .title .text {
.eps-container .properties .title .text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -148,7 +158,7 @@ However we always want it to be the width of the container it is resizing.
}
/* action bar in the title container for the properties view. This contains the close icon */
.eps-container .execution-plan .properties .title .action-bar {
.eps-container .properties .title .action-bar {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -160,7 +170,7 @@ However we always want it to be the width of the container it is resizing.
}
/* Operation name styling in the properties view. */
.eps-container .execution-plan .properties .operation-name {
.eps-container .properties .operation-name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -174,8 +184,8 @@ However we always want it to be the width of the container it is resizing.
}
/* Properties table container in properties view */
.eps-container .execution-plan .properties .table-container {
overflow-y: scroll;
.eps-container .properties .table-container {
overflow: hidden;
flex: 1;
flex-grow: 1;
}
@@ -183,6 +193,7 @@ However we always want it to be the width of the container it is resizing.
/* Action bar for the execution plan */
.eps-container .execution-plan .action-bar-container {
flex: 0 0 25px;
border-left: 1px solid var(--separator-border);
}
/* styling for the column headers in the properties table */
@@ -195,7 +206,6 @@ However we always want it to be the width of the container it is resizing.
-webkit-margin-before: 0;
-webkit-margin-after: 0;
font-weight: bold;
text-transform: uppercase;
}
.eps-container .properties-header {
@@ -331,3 +341,184 @@ However we always want it to be the width of the container it is resizing.
background-position: center;
background-repeat: no-repeat;
}
.ep-add-icon {
background-image: url(../images/actionIcons/add.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.ep-settings-icon {
background-image: url(../images/actionIcons/settings.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.ep-split-screen-horizontally-icon {
background-image: url(../images/actionIcons/splitScreenHorizontally.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.ep-split-screen-vertically-icon {
background-image: url(../images/actionIcons/splitScreenVertically.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.ep-reset-zoom-icon {
background-image: url(../images/actionIcons/resetZoom.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.ep-plan-compare-icon {
background-image: url(../images/actionIcons/execution-plan-compare.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .comparison-editor {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.eps-container .comparison-editor .editor-toolbar {
width: 100%;
flex: 0 0 auto;
border-bottom: 2px solid;
border-color: var(--separator-border);
}
.eps-container .comparison-editor .plan-comparison-container {
width: 100%;
height: 100%;
flex: 1;
display: flex;
flex-direction: row;
}
.eps-container .comparison-editor .plan-comparison-container {
width: 100%;
height: 100%;
flex: 1;
display: flex;
flex-direction: row;
}
.eps-container .comparison-editor .plan-comparison-container {
width: 100%;
height: calc(100% - 25px);
flex: 1;
display: flex;
flex-direction: row;
}
.eps-container .comparison-editor .plan-comparison-container .split-view-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.eps-container .comparison-editor .plan-comparison-container .split-view-container .plan-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.eps-container .comparison-editor .plan-comparison-container .split-view-container .plan-container .dropdown-container {
flex: 0;
padding: 3px;
border-bottom: 1px solid var(--separator-border);
}
/* each link in execution plan recommendations */
.eps-container .comparison-editor .plan-comparison-container .split-view-container .plan-container .recommendations > a {
width: fit-content;
align-items: left;
text-align: left;
}
.eps-container .comparison-editor .plan-comparison-container .split-view-container .sash-container {
flex: 0 0 2px;
width: 100%;
position: relative;
background-color: var(--separator-border);
}
/*
The actual sash element constructed by code. Important is used here because the width of the sash is fixed.
However we always want it to be the width of the container it is resizing.
*/
.eps-container .comparison-editor .plan-comparison-container .split-view-container .sash-container .horizontal {
width: 100% !important;
}
.eps-container .comparison-editor .plan-comparison-container .split-view-container .sash-container .vertical {
height: 100% !important;
}
.eps-container .comparison-editor .plan-comparison-container .properties {
display: flex;
flex: 0 0 500px;
flex-direction: row;
}
.eps-container .comparison-editor .plan-comparison-container .split-view-container .placeholder {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
justify-content: center;
align-items: center;
}
.eps-container .comparison-editor .plan-comparison-container .split-view-container .placeholder .infobox-container {
width: fit-content;
height: fit-content;
}
.eps-container .comparison-editor .plan-comparison-container .split-view-container .plan-container .plan-diagram {
flex: 1;
overflow: scroll;
display: flex;
flex-direction: column;
position: relative;
}
.eps-container .comparison-editor .plan-comparison-container .properties .compare-operation-name {
display: flex;
flex-direction: row;
}
.eps-container .comparison-editor .plan-comparison-container .properties .compare-operation-name-text {
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 13px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-top: 3px;
margin-bottom: 5px;
margin-left: 5px;
}
.eps-container .comparison-editor .properties .table-container {
overflow: hidden;
}