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

Execution Plan Filtering and UI improvements (#20631)

Browse Source 
* Fixing execution plan stuff

* Adding filter to top operations

* Flipped custom zoom icon

* changing keys

* Moving constants to a file

* Search properties

* Making logic concise
This commit is contained in:
Aasim Khan
2022-09-23 12:57:30 -07:00
committed by GitHub
parent c7eefb28cb
commit fd8993134f
13 changed files with 421 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -101,7 +101,7 @@ However we always want it to be the width of the container it is resizing.
/* execution plan header that contains the relative query cost, query statement and recommendations */
.eps-container .execution-plan .plan .header .query-row,
.top-operations-tab .top-operations-container .query-row{
.top-operations-tab .top-operations-container .query-row {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
@@ -187,6 +187,31 @@ However we always want it to be the width of the container it is resizing.
margin-top: 5px;
}
.eps-container .properties .search-action-bar-container .table-action-bar {
flex: auto
}
.eps-container .properties .search-action-bar-container .table-search {
flex: 1;
max-width: 300px;
}
.eps-container .properties .search-action-bar-container .table-search>div,
.top-operations-tab .top-operations-container .top-operations-header-search-bar>div {
background-position-y: center;
background-position-x: 3px;
}
.eps-container .properties .search-action-bar-container .table-search input,
.top-operations-tab .top-operations-container .top-operations-header-search-bar input {
margin-left: 20px;
width: calc(100% - 20px);
}
.eps-container .properties .search-action-bar-container {
display: flex;
}
/* Operation name styling in the properties view. */
.eps-container .properties .operation-name {
white-space: nowrap;
@@ -316,7 +341,8 @@ However we always want it to be the width of the container it is resizing.
}
.eps-container .ep-search-icon {
.eps-container .ep-search-icon,
.top-operations-tab .ep-search-icon {
background-image: url(../images/actionIcons/search.svg);
background-size: 16px 16px;
background-position: center;
@@ -324,7 +350,9 @@ However we always want it to be the width of the container it is resizing.
}
.vs-dark .eps-container .ep-search-icon,
.hc-black .eps-container .ep-search-icon {
.hc-black .eps-container .ep-search-icon,
.vs-dark .top-operations-tab .ep-search-icon,
.hc-black .top-operations-tab .ep-search-icon {
background-image: url(../images/actionIcons/searchDark.svg);
background-size: 16px 16px;
background-position: center;
@@ -799,21 +827,34 @@ However we always want it to be the width of the container it is resizing.
overflow: scroll;
}
.top-operations-tab .top-operations-container .top-operations-header {
display: flex;
flex-direction: row;
}
.top-operations-tab .top-operations-container .top-operations-header .top-operations-header-info {
flex: 1;
}
.top-operations-tab .top-operations-container .top-operations-header .top-operations-header-search-bar {
min-width: 300px;
}
.top-operations-tab .top-operations-container .table-container {
flex: 1;
height: calc(100% - 50px);
}
.graph-cell{
.graph-cell {
align-items: center;
position: relative;
width: fit-content;
height: 80px;
font-size: 10px;
font-family:'Monaco', 'Menlo', 'Consolas';
font-family: 'Monaco', 'Menlo', 'Consolas';
}
.graph-cell-body{
.graph-cell-body {
display: flex;
flex-direction: column;
align-items: center;
@@ -822,12 +863,12 @@ However we always want it to be the width of the container it is resizing.
outline: none !important;
}
.graph-cell-icon{
.graph-cell-icon {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width:30px;
height:30px;
width: 30px;
height: 30px;
align-self: center;
position: relative;
}
@@ -837,8 +878,8 @@ However we always want it to be the width of the container it is resizing.
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width:12px;
height:12px;
width: 12px;
height: 12px;
bottom: 0;
right: -5px;
}
@@ -846,9 +887,10 @@ However we always want it to be the width of the container it is resizing.
.graph-cell .graph-cell-row-count {
position: absolute;
top: 30%;
left: calc(50% - 60px);
right: calc(50% + 17px);
margin-right: 3px;
min-width: 20px;
text-align: right;
text-align: left;
outline: none !important;
}
@@ -861,7 +903,7 @@ However we always want it to be the width of the container it is resizing.
right: 0px;
}
.graph-cell-cost{
.graph-cell-cost {
border-radius: 15px;
width: fit-content;
padding: 1px 8px 0px 8px;