Adding top operations to execution plans (#19902)

* Adding top operations to execution plans

* Adding title to links

* Fixing pr comments

* Hiding top operations icon in execution plan editor

* Reducing outline width, adding separator and removing placeholder text

* Registering TopOperationsTabView
This commit is contained in:
Aasim Khan
2022-07-07 12:50:52 -07:00
committed by GitHub
parent 738ea546af
commit 9cfa1436d9
14 changed files with 580 additions and 34 deletions

View File

@@ -89,13 +89,15 @@ 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 {
.eps-container .execution-plan .plan .header,
.top-operations-tab .top-operations-container .query-row {
padding: 5px;
font-weight: bolder;
}
/* execution plan header that contains the relative query cost, query statement and recommendations */
.eps-container .execution-plan .plan .header .query-row {
.eps-container .execution-plan .plan .header .query-row,
.top-operations-tab .top-operations-container .query-row{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
@@ -117,6 +119,8 @@ However we always want it to be the width of the container it is resizing.
height: 100%;
overflow: scroll;
position: relative;
outline-offset: -3px;
outline-width: 3px;
}
.eps-container .properties {
@@ -613,6 +617,23 @@ However we always want it to be the width of the container it is resizing.
height: auto;
}
.eps-container .ep-top-operations {
background-image: url(../images/actionIcons/topOperations.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-top-operations,
.hc-black .eps-container .ep-top-operations {
background-image: url(../images/actionIcons/topOperationsDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .comparison-editor {
width: 100%;
height: 100%;
@@ -759,3 +780,22 @@ However we always want it to be the width of the container it is resizing.
.eps-container .comparison-editor .parent-row-styling {
font-weight: bold;
}
.top-operations-tab {
overflow: scroll;
display: flex;
flex-direction: column;
}
.top-operations-tab .top-operations-container {
flex: 1;
width: 100%;
min-height: 300px;
overflow: scroll;
}
.top-operations-tab .top-operations-container .table-container {
flex: 1;
height: calc(100% - 50px);
}