[Search Profiler] Quick style fix up including dark theme (#33445)
* Quick unrelated fixes * [Search Profiler] Quick fix style fix up including dark theme * Fixed IE * Remove unused translation * Make the main panel always visible and scroll independently * Space out flyout title * Fix up for the new tabs directive
This commit is contained in:
Caroline Horn
GitHub
parent
1b95bed2da
commit
e4d3b5dc08
4
packages/kbn-ui-framework/dist/kui_light.css
vendored
4
packages/kbn-ui-framework/dist/kui_light.css
vendored
|
|
@ -56,10 +56,6 @@
|
|||
* 4. Fix an IE bug which causes the last child to overflow the container.
|
||||
* 5. Fixing this bug means we now need to align the children to the right.
|
||||
*/
|
||||
:focus:not([class^="eui"]) {
|
||||
-webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate;
|
||||
animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate; }
|
||||
|
||||
/**
|
||||
* 1. Required for IE11.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -7,15 +7,8 @@
|
|||
.dshStartScreen {
|
||||
text-align: center;
|
||||
padding: $euiSize;
|
||||
background-color: $euiColorLightestShade;
|
||||
color: $euiColorDarkShade;
|
||||
|
||||
> * {
|
||||
max-width: 36em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dshSaveModal,
|
||||
.dshCloneModal {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
}
|
||||
|
||||
.kuiLocalMenuItem {
|
||||
@include euiFontSizeS;
|
||||
font-weight: $euiFontWeightMedium;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,145 +1,135 @@
|
|||
.prfDevTool {
|
||||
|
||||
.prfDevTool__panel {
|
||||
background-color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: $euiBorderThin;
|
||||
.prfDevTool__panel {
|
||||
border-bottom: $euiBorderThin;
|
||||
}
|
||||
|
||||
.prfDevTool__panelBody {
|
||||
margin-top: $euiSizeS;
|
||||
margin-left: $euiSizeL;
|
||||
}
|
||||
|
||||
// Profile details treeview
|
||||
.prfDevTool__shardDetailsWrapper {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.prfDevTool__shardDetails--dim small {
|
||||
color: $euiColorDarkShade;
|
||||
}
|
||||
|
||||
.prfDevTool__shardBody {
|
||||
margin-top: $euiSize;
|
||||
}
|
||||
|
||||
.prfDevTool__shardDetails {
|
||||
line-height: 1;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&:disabled {
|
||||
text-decoration: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.prfDevTool__shard {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.prfDevTool__index {
|
||||
width: 100%;
|
||||
padding: $euiSize $euiSizeS;
|
||||
}
|
||||
|
||||
.prfDevTool__tvRow--last {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prfDevTool__tvRow,
|
||||
.prfDevTool__tvHeader {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.prfDevTool__tvHeader {
|
||||
@include euiFontSizeXS;
|
||||
color: $euiColorDarkShade;
|
||||
}
|
||||
|
||||
.prfDevTool__cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: $euiSizeXS;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.prfDevTool__shardBody {
|
||||
padding-top: $euiSizeXS;
|
||||
margin: 0 0 0 $euiSizeXS;
|
||||
&:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.prfDevTool__panelBody {
|
||||
padding: $euiSize $euiSizeXS $euiSizeXS;
|
||||
margin-top: $euiSize;
|
||||
margin-left: $euiSizeS;
|
||||
.prfDevTool__detail {
|
||||
font-size: $euiFontSizeS;
|
||||
padding-left: $euiSizeL - 3px; // Alignment is weird
|
||||
margin-bottom: $euiSizeS;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.euiLink {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Profile details treeview
|
||||
.prfDevTool__shardDetails {
|
||||
float: left;
|
||||
margin-bottom: $euiSizeXS;
|
||||
.prfDevTool__description {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fa {
|
||||
width: $euiSizeM;
|
||||
height: $euiSizeM;
|
||||
cursor: pointer;
|
||||
}
|
||||
.prfDevTool__time,
|
||||
.prfDevTool__totalTime,
|
||||
.prfDevTool__percentage {
|
||||
width: $euiSize * 5.5;
|
||||
}
|
||||
|
||||
// BADGES (and those used for progress)
|
||||
|
||||
.prfDevTool__badge {
|
||||
border: none;
|
||||
display: block;
|
||||
// Force text to always be dark on top of white -> pink color
|
||||
color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightestShade);
|
||||
}
|
||||
|
||||
.prfDevTool__progress--percent {
|
||||
@include prfDevToolProgress;
|
||||
width: $euiSize * 4;
|
||||
}
|
||||
|
||||
.prfDevTool__progress--time {
|
||||
@include prfDevToolProgress(#FFAFAF);
|
||||
background-color: #F5F5F5; // Must be light at all times
|
||||
width: $euiSize * 15.5;
|
||||
// Force text to always be dark on top of white -> pink color
|
||||
color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightestShade);
|
||||
}
|
||||
|
||||
// Breakdown table
|
||||
.prfDevTool__breakdown {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.prfDevTool__flyoutSubtitle {
|
||||
margin-bottom: $euiSizeS;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include euiBreakpoint('xs', 's') {
|
||||
.prfDevTool__shardDetailsWrapper {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.prfDevTool__shardDetails--dim {
|
||||
color: $euiColorDarkShade;
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: $euiSizeXS;
|
||||
}
|
||||
|
||||
.prfDevTool__shard {
|
||||
margin-top: $euiSizeS;
|
||||
min-width: 100%;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.prfDevTool__index {
|
||||
margin-top: $euiSize;
|
||||
min-width: 100%;
|
||||
padding: $euiSizeS;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.prfDevTool__tvRow:hover,
|
||||
.prfDevTool__tvRow--last {
|
||||
border-bottom: $euiBorderThin;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prfDevTool__tvRow,
|
||||
.prfDevTool__tvHeader {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.prfDevTool__tvHeader {
|
||||
margin-bottom: $euiSizeS;
|
||||
|
||||
> .prfDevTool__cell {
|
||||
color: $euiColorDarkShade;
|
||||
}
|
||||
}
|
||||
|
||||
.prfDevTool__cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prfDevTool__detail {
|
||||
font-style: italic;
|
||||
font-size: $euiFontSizeXS;
|
||||
padding-left: $euiSize;
|
||||
}
|
||||
|
||||
.prfDevTool__description {
|
||||
background-color: $euiColorEmptyShade;
|
||||
text-align: left;
|
||||
|
||||
.fa-bars {
|
||||
padding-left: $euiSizeS;
|
||||
}
|
||||
}
|
||||
|
||||
.prfDevTool__time,
|
||||
.prfDevTool__totalTime {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.prfDevTool__percentage {
|
||||
width: 15%;
|
||||
background-color: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
// Progressbar
|
||||
.prfDevTool__graph {
|
||||
height: 20px;
|
||||
border: 1px solid $euiColorMediumShade;
|
||||
background: linear-gradient(to top, $euiColorLightShade, $euiColorLightestShade 23%);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin: $euiSizeXS;
|
||||
}
|
||||
|
||||
.prfDevTool__graphLabel {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
line-height: $euiFontSizeM;
|
||||
vertical-align: middle;
|
||||
font-size: $euiFontSizeXS;
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.prfDevTool__bar {
|
||||
height: 20px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */
|
||||
// SASSTODO This pink color is hardcoded elsewhere in the javascript and in tests, needs an overall redesign
|
||||
background: rgba(255, 175, 175, .1);
|
||||
background: linear-gradient(to top, rgba(255, 175, 175, .3) 0%, rgba(255, 175, 175, .6) 100%);
|
||||
vertical-align: middle;
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Breakdown table
|
||||
.prfDevTool__breakdown {
|
||||
width:100%;
|
||||
|
||||
td {
|
||||
padding-right: $euiSizeXS;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@import 'directives';
|
||||
@import 'mixins';
|
||||
@import 'directives';
|
||||
|
|
|
|||
36
x-pack/plugins/searchprofiler/public/directives/_mixins.scss
Normal file
36
x-pack/plugins/searchprofiler/public/directives/_mixins.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
@mixin prfDevToolProgress($color: tintOrShade($euiColorPrimary, 60%, 60%)) {
|
||||
border: none;
|
||||
display: block;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
to left,
|
||||
$color 0%,
|
||||
$color var(--prfDevToolProgressPercentage, auto),
|
||||
$euiColorLightestShade var(--prfDevToolProgressPercentage, auto),
|
||||
$euiColorLightestShade 100%
|
||||
);
|
||||
|
||||
.prfDevTool__progress--percent-ie {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include internetExplorerOnly {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.prfDevTool__progress--percent-ie {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: $color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.prfDevTool__progressText {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +1,62 @@
|
|||
<div>
|
||||
<b>{{detailRow.indexName}}</b>
|
||||
<p>[{{detailRow.shardID}}][{{detailRow.shardNumber}}]</p>
|
||||
<br/>
|
||||
<b
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.typeTitle"
|
||||
i18n-default-message="Type"
|
||||
></b>
|
||||
<p>{{detailRow.query_type}}</p>
|
||||
<b
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.descriptionTitle"
|
||||
i18n-default-message="Description"
|
||||
></b>
|
||||
<p>{{detailRow.lucene}}</p>
|
||||
<b>
|
||||
<span
|
||||
tooltip="{{:: 'xpack.searchProfiler.highlightDetails.totalTimeTooltip' | i18n: { defaultMessage: 'The total time spent at this query component, inclusive of children' } }}"
|
||||
tooltip-placement="left"
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.totalTimeTitle"
|
||||
i18n-default-message="Total Time"
|
||||
></span>
|
||||
</b>
|
||||
<p>{{detailRow.time | msToPretty:3 }}</p>
|
||||
<b>
|
||||
<span
|
||||
tooltip="{{:: 'xpack.searchProfiler.highlightDetails.selfTimeTooltip' | i18n: { defaultMessage: 'The time spent by this query component alone, exclusive of children' } }}"
|
||||
tooltip-placement="left"
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.selfTimeTitle"
|
||||
i18n-default-message="Self Time"
|
||||
></span>
|
||||
</b>
|
||||
<p>{{detailRow.selfTime | msToPretty:3 }}</p>
|
||||
<b
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.timingBreakdownTitle"
|
||||
i18n-default-message="Timing Breakdown"
|
||||
></b>
|
||||
<table class="prfDevTool__breakdown">
|
||||
<tr style="background-color:{{breakdown.color}}" ng-repeat="breakdown in detailRow.breakdown">
|
||||
<td><span tooltip="{{breakdown.tip}}" tooltip-placement="left">{{breakdown.key}}</span></td>
|
||||
<td>{{breakdown.time | nsToPretty: 1}}</td>
|
||||
<td style="width:33%; background-color:white;">
|
||||
<div class="prfDevTool__graph progress">
|
||||
<div class="prfDevTool__bar" style="width:{{breakdown.relative}}%"></div>
|
||||
<p class="prfDevTool__graphLabel">{{breakdown.relative}}%</p>
|
||||
</div>
|
||||
<div class="euiFlyoutHeader euiFlyoutHeader--hasBorder">
|
||||
<h2 id="flyoutTitle">
|
||||
<small class="prfDevTool__flyoutSubtitle">{{detailRow.indexName}}</small> <br>
|
||||
<strong>[{{detailRow.shardID}}][{{detailRow.shardNumber}}]</strong>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="euiFlyoutBody">
|
||||
<div class="euiText">
|
||||
<dl>
|
||||
<dt
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.typeTitle"
|
||||
i18n-default-message="Type"
|
||||
></dt>
|
||||
<dd>{{detailRow.query_type}}</dd>
|
||||
<dt
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.descriptionTitle"
|
||||
i18n-default-message="Description"
|
||||
></dt>
|
||||
<dd><code>{{detailRow.lucene}}</code></dd>
|
||||
<dt>
|
||||
<span
|
||||
tooltip="{{:: 'xpack.searchProfiler.highlightDetails.totalTimeTooltip' | i18n: { defaultMessage: 'The total time spent at this query component, inclusive of children' } }}"
|
||||
tooltip-placement="left"
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.totalTimeTitle"
|
||||
i18n-default-message="Total Time"
|
||||
></span>
|
||||
</dt>
|
||||
<dd>{{detailRow.time | msToPretty:3 }}</dd>
|
||||
<dt>
|
||||
<span
|
||||
tooltip="{{:: 'xpack.searchProfiler.highlightDetails.selfTimeTooltip' | i18n: { defaultMessage: 'The time spent by this query component alone, exclusive of children' } }}"
|
||||
tooltip-placement="left"
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.selfTimeTitle"
|
||||
i18n-default-message="Self Time"
|
||||
></span>
|
||||
</dt>
|
||||
<dd>{{detailRow.selfTime | msToPretty:3 }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<br>
|
||||
<h3><strong
|
||||
i18n-id="xpack.searchProfiler.highlightDetails.timingBreakdownTitle"
|
||||
i18n-default-message="Timing Breakdown"
|
||||
></strong></h3>
|
||||
<br>
|
||||
<table class="prfDevTool__breakdown" width="100%">
|
||||
<tr ng-repeat="breakdown in detailRow.breakdown">
|
||||
<td class="prfDevTool__cell prfDevTool__description"><span tooltip="{{breakdown.tip}}" tooltip-placement="left">{{breakdown.key}}</span></td>
|
||||
<td class="prfDevTool__cell prfDevTool__time">
|
||||
<span class="euiBadge prfDevTool__badge" ng-style="{'background-color': breakdown.color}">
|
||||
{{breakdown.time | nsToPretty: 1}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="prfDevTool__cell prfDevTool__percentage">
|
||||
<span class="euiBadge euiBadge--default prfDevTool__progress--percent" style="--prfDevToolProgressPercentage: {{breakdown.relative}}%">
|
||||
<span class="prfDevTool__progress--percent-ie" ng-style="{'width': breakdown.relative + '%'}"></span>
|
||||
<span class="prfDevTool__progressText">{{breakdown.relative}}%</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,95 +1,111 @@
|
|||
<div class="prfDevTool__panel panel-default prfDevTool__index" ng-repeat="index in profileResponse">
|
||||
<div class="prfDevTool__shardDetails--dim">
|
||||
<span
|
||||
tooltip-placement="bottom"
|
||||
tooltip="{{:: 'xpack.searchProfiler.profileTree.cumulativeTimeTooltip' | i18n: { defaultMessage: 'The cumulative time of all shards in the index. Note: this is not wall-clock time, as shards can execute in parallel.' } }}">
|
||||
<h3>{{:: 'xpack.searchProfiler.profileTree.cumulativeTimeTitle' | i18n: { defaultMessage: "Cumulative Time:" } }} {{ index.time[target] | msToPretty: 3 }}</h3>
|
||||
</span><br/>
|
||||
</div>
|
||||
<div class="prfDevTool__shardDetails" style="margin-left:5px">
|
||||
<h3>
|
||||
<b
|
||||
i18n-id="xpack.searchProfiler.profileTree.indexTitle"
|
||||
i18n-default-message="Index:"
|
||||
></b>
|
||||
{{index.name}}
|
||||
</h3>
|
||||
<div class="prfDevTool__panel prfDevTool__index" ng-repeat="index in profileResponse">
|
||||
<div class="prfDevTool__shardDetailsWrapper">
|
||||
<div class="prfDevTool__shardDetails--dim">
|
||||
<span
|
||||
tooltip-placement="bottom"
|
||||
tooltip="{{:: 'xpack.searchProfiler.profileTree.cumulativeTimeTooltip' | i18n: { defaultMessage: 'The cumulative time of all shards in the index. Note: this is not wall-clock time, as shards can execute in parallel.' } }}">
|
||||
<small>{{:: 'xpack.searchProfiler.profileTree.cumulativeTimeTitle' | i18n: { defaultMessage: "Cumulative Time:" } }}</small> {{ index.time[target] | msToPretty: 3 }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="prfDevTool__shardDetails">
|
||||
<h3>
|
||||
<b
|
||||
i18n-id="xpack.searchProfiler.profileTree.indexTitle"
|
||||
i18n-default-message="Index:"
|
||||
></b>
|
||||
{{index.name}}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-repeat="shard in index.shards">
|
||||
|
||||
<div class="prfDevTool__panel prfDevTool__shard">
|
||||
<div class="prfDevTool__shardBody">
|
||||
<div class="prfDevTool__shardDetails--dim" style="width:150px">
|
||||
<div class="prfDevTool__graph progress">
|
||||
<div class="prfDevTool__bar" style="width:{{shard.relative[target]}}%"></div>
|
||||
<p class="prfDevTool__graphLabel">{{shard.time[target] | msToPretty: 3}}</p>
|
||||
<div class="prfDevTool__shardDetailsWrapper">
|
||||
<div class="prfDevTool__shardDetails--dim">
|
||||
<span class="euiBadge euiBadge--default prfDevTool__progress--time" style="--prfDevToolProgressPercentage: {{shard.relative[target]}}%">
|
||||
<span class="prfDevTool__progress--percent-ie" ng-style="{'width': shard.relative[target] + '%'}"></span>
|
||||
<span class="prfDevTool__progressText">{{shard.time[target] | msToPretty: 3}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<button class="euiLink prfDevTool__shardDetails" ng-click="shardVisibility = !shardVisibility">
|
||||
<icon type="'arrowRight'" ng-if="!shardVisibility" />
|
||||
<icon type="'arrowDown'" ng-if="shardVisibility" />
|
||||
[{{shard.id[0]}}][{{shard.id[2]}}]
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="prfDevTool__shardDetails">
|
||||
<span class="fa" aria-hidden="true"
|
||||
ng-click="shardVisibility = !shardVisibility"
|
||||
ng-class="visible[row.id].visible ? 'fa-chevron-down' : 'fa-chevron-right'"
|
||||
style="font-size:9px">
|
||||
</span>
|
||||
<b>[{{shard.id[0]}}][{{shard.id[2]}}]</b>
|
||||
</div>
|
||||
<div class="treeviewwrapper"
|
||||
ng-repeat="search in shard[target]"
|
||||
ng-hide="!shardVisibility"
|
||||
ng-class="{'prfDevTool__panelBody' : shardVisibility}">
|
||||
|
||||
<div class="prfDevTool__tvHeader">
|
||||
<div
|
||||
class="prfDevTool__cell prfDevTool__description"
|
||||
i18n-id="xpack.searchProfiler.profileTree.header.typeTitle"
|
||||
i18n-default-message="Type"
|
||||
i18n-default-message="Type and description"
|
||||
></div>
|
||||
<div
|
||||
class="prfDevTool__cell prfDevTool__time"
|
||||
i18n-id="xpack.searchProfiler.profileTree.header.selfTimeTitle"
|
||||
i18n-default-message="Self Time"
|
||||
i18n-default-message="Self time"
|
||||
></div>
|
||||
<div
|
||||
class="prfDevTool__cell prfDevTool__totalTime"
|
||||
i18n-id="xpack.searchProfiler.profileTree.header.totalTimeTitle"
|
||||
i18n-default-message="Total Time"
|
||||
></div>
|
||||
<div
|
||||
class="prfDevTool__cell prfDevTool__percentage"
|
||||
i18n-id="xpack.searchProfiler.profileTree.header.percentageTimeTitle"
|
||||
i18n-default-message="% Time"
|
||||
i18n-default-message="Total time"
|
||||
></div>
|
||||
<div class="prfDevTool__cell prfDevTool__percentage"></div>
|
||||
</div>
|
||||
<div class="prfDevTool__tvRow"
|
||||
|
||||
<div
|
||||
ng-repeat="row in search.flat"
|
||||
ng-show="row.depth === 0 ? true : visible[row.parentId].visible"
|
||||
style="background-color:{{row.absoluteColor}}"
|
||||
ng-mouseenter="updateDetail(row, index.name, shard.id[0], shard.id[2])"
|
||||
ng-class="row.id == getHighlightedRow() ? 'prfDevTool__tvRow--last' : ''">
|
||||
<div class="prfDevTool__cell prfDevTool__description" style="padding-left:{{row.depth * 10}}px;">
|
||||
<div style="display:inline;" ng-class="row.hasChildren ? '' : 'fa-bars'">
|
||||
<span class="fa" aria-hidden="true"
|
||||
ng-click="toggle(row.id)"
|
||||
ng-class="visible[row.id].visible ? 'fa-chevron-down' : 'fa-chevron-right'"
|
||||
ng-hide="!row.hasChildren"
|
||||
style="font-size:9px">
|
||||
</span>
|
||||
ng-class="row.id == getHighlightedRow() ? 'prfDevTool__tvRow--last' : ''"
|
||||
style="padding-left:{{row.depth * 32}}px;"
|
||||
>
|
||||
|
||||
<div class="prfDevTool__tvRow">
|
||||
<div class="prfDevTool__cell prfDevTool__description">
|
||||
<button class="euiLink prfDevTool__shardDetails" ng-disabled="!row.hasChildren" ng-click="row.hasChildren && toggle(row.id)">
|
||||
<icon type="'arrowRight'" ng-if="row.hasChildren && !visible[row.id].visible" />
|
||||
<icon type="'arrowDown'" ng-if="row.hasChildren && visible[row.id].visible" />
|
||||
<!-- Use dot icon for alignment if arrow isn't there -->
|
||||
<icon type="'dot'" color="'subdued'" ng-if="!row.hasChildren" />
|
||||
{{row.query_type}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="prfDevTool__cell prfDevTool__time">
|
||||
<span class="euiBadge prfDevTool__badge" ng-style="{'background-color': row.absoluteColor}">
|
||||
{{row.selfTime | msToPretty: 1}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="prfDevTool__cell prfDevTool__totalTime">
|
||||
<span class="euiBadge prfDevTool__badge" ng-style="{'background-color': row.absoluteColor}">
|
||||
{{row.time | msToPretty: 1}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="prfDevTool__cell prfDevTool__percentage">
|
||||
<span class="euiBadge euiBadge--default prfDevTool__progress--percent" style="--prfDevToolProgressPercentage: {{row.timePercentage}}%">
|
||||
<span class="prfDevTool__progress--percent-ie" ng-style="{'width': row.timePercentage + '%'}"></span>
|
||||
<span class="prfDevTool__progressText">{{row.timePercentage}}%</span>
|
||||
</span>
|
||||
</div>
|
||||
{{row.query_type}}
|
||||
<span class='prfDevTool__detail'>
|
||||
<span
|
||||
tooltip-placement="top"
|
||||
tooltip="{{row.lucene.length > 40 ? row.lucene : ''}}">
|
||||
{{row.lucene | limitTo : 40}}{{row.lucene.length > 40 ? '...' : ''}}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="prfDevTool__cell prfDevTool__time">{{row.selfTime | msToPretty: 1}}</div>
|
||||
<div class="prfDevTool__cell prfDevTool__totalTime">{{row.time | msToPretty: 1}}</div>
|
||||
<div class="prfDevTool__cell prfDevTool__percentage">
|
||||
<div class="prfDevTool__graph progress">
|
||||
<div class="prfDevTool__bar" style="width:{{row.timePercentage}}%"></div>
|
||||
<p class="prfDevTool__graphLabel">{{row.timePercentage}}%</p>
|
||||
</div>
|
||||
|
||||
<div class="prfDevTool__tvRow">
|
||||
<span class='prfDevTool__detail'>
|
||||
<code class="euiCode"
|
||||
tooltip-placement="top"
|
||||
tooltip="{{row.lucene.length > 120 ? row.lucene : ''}}">
|
||||
{{row.lucene | limitTo : 120}}{{row.lucene.length > 120 ? '...' : ''}}
|
||||
</code>
|
||||
<button class="euiLink euiLink--small euiLink--primary" ng-click="updateDetail(row, index.name, shard.id[0], shard.id[2])">
|
||||
View details
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,101 @@
|
|||
@import '@elastic/eui/src/components/header/variables';
|
||||
@import '@elastic/eui/src/components/panel/mixins';
|
||||
|
||||
.prfDevTool {
|
||||
height: calc(100vh - #{$euiHeaderChildSize});
|
||||
overflow: hidden;
|
||||
|
||||
.prfDevTool__wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
position: absolute;
|
||||
width: 99%; // SASSTODO Short-term fix (incl IE11) until markup can be re-arranged
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.prfDevTool__main {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding: 0 $euiSizeS;
|
||||
flex: 3;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.prfDevTool__details {
|
||||
padding: $euiSizeS;
|
||||
flex: 1;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.prfDevTool__sense {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
order: 1;
|
||||
|
||||
.kuiTextInput {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Ace Editor overrides
|
||||
.ace_editor {
|
||||
height: 100%;
|
||||
padding-bottom: $euiSizeXXL;
|
||||
outline: solid 1px $euiColorLightShade;
|
||||
}
|
||||
|
||||
.errorMarker {
|
||||
position: absolute;
|
||||
background: rgba($euiColorDanger, .5);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.error {
|
||||
/* These styles are arbitrary */
|
||||
padding: $euiSize;
|
||||
font-weight: bold;
|
||||
color: $euiColorDanger;
|
||||
border: 1px solid $euiColorDanger;
|
||||
}
|
||||
.devApp__container {
|
||||
overflow: hidden;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.prfDevTool__container {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex: 1 1 auto;
|
||||
padding: $euiSize;
|
||||
overflow: hidden;
|
||||
|
||||
// SASSTODO/EUITODO/HACK: Reset font styles of headers
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@include euiPanel('prfDevTool__main');
|
||||
|
||||
.prfDevTool__main {
|
||||
flex: 3;
|
||||
order: 2;
|
||||
margin-left: $euiSize;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
|
||||
// Make only the tab content scroll
|
||||
search-profiler-tabs {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
profiletree {
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.prfDevTool__details {
|
||||
max-width: map-get($euiBreakpoints, 's');
|
||||
}
|
||||
|
||||
highlightdetails {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.prfDevTool__sense {
|
||||
flex: 1;
|
||||
order: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kuiTextInput {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Ace Editor overrides
|
||||
.ace_editor {
|
||||
min-height: $euiSize * 10;
|
||||
flex-grow: 1;
|
||||
margin-bottom: $euiSize;
|
||||
margin-top: $euiSize;
|
||||
outline: solid 1px $euiColorLightShade;
|
||||
}
|
||||
|
||||
.errorMarker {
|
||||
position: absolute;
|
||||
background: rgba($euiColorDanger, .5);
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
@include euiBreakpoint('xs', 's') {
|
||||
.prfDevTool__container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.prfDevTool__sense,
|
||||
.prfDevTool__main {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.prfDevTool__main {
|
||||
margin: $euiSize 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,115 +1,114 @@
|
|||
<kbn-dev-tools-app class="prfDevTool">
|
||||
<div class="prfDevTool__container kuiViewContent kuiViewContentItem" ng-controller="profileViz">
|
||||
<div class="prfDevTool__wrapper">
|
||||
<div class="prfDevTool__main">
|
||||
<div class="prfDevTool__container" ng-controller="profileViz">
|
||||
<div class="prfDevTool__main">
|
||||
|
||||
<search-profiler-tabs
|
||||
ng-if="profileResponse.length > 0"
|
||||
profile-response="profileResponse"
|
||||
activate-tab="activateTab"
|
||||
active-tab="activeTab"
|
||||
>
|
||||
</search-profiler-tabs>
|
||||
<search-profiler-tabs
|
||||
profile-response="profileResponse"
|
||||
activate-tab="activateTab"
|
||||
active-tab="activeTab"
|
||||
>
|
||||
</search-profiler-tabs>
|
||||
|
||||
<profileTree ng-show="activeTab.search" data="profileResponse" target="searches"></profileTree>
|
||||
<profileTree ng-show="activeTab.aggregations" data="profileResponse" target="aggregations"></profileTree>
|
||||
<profileTree ng-if="activeTab.search" data="profileResponse" target="searches"></profileTree>
|
||||
<profileTree ng-if="activeTab.aggregations" data="profileResponse" target="aggregations"></profileTree>
|
||||
|
||||
<!-- License error notice -->
|
||||
<div class="euiCallout euiCallOut--warning" ng-hide="licenseEnabled">
|
||||
<h2
|
||||
class="kuiTitle kuiVerticalRhythmSmall"
|
||||
i18n-id="xpack.searchProfiler.licenseErrorMessageTitle"
|
||||
i18n-default-message="{warningIcon} License error"
|
||||
i18n-values="{ html_warningIcon: '<span class=\'kuiIcon fa-warning kuiIcon--error\'></span>' }"
|
||||
></h2>
|
||||
<!-- License error notice -->
|
||||
<div class="euiCallout euiCallOut--warning" style="padding: 16px" ng-hide="licenseEnabled">
|
||||
<h2
|
||||
class="kuiTitle kuiVerticalRhythmSmall"
|
||||
i18n-id="xpack.searchProfiler.licenseErrorMessageTitle"
|
||||
i18n-default-message="{warningIcon} License error"
|
||||
i18n-values="{ html_warningIcon: '<span class=\'kuiIcon fa-warning kuiIcon--error\'></span>' }"
|
||||
></h2>
|
||||
|
||||
<p
|
||||
class="kuiText kuiVerticalRhythmSmall"
|
||||
i18n-id="xpack.searchProfiler.licenseErrorMessageDescription"
|
||||
i18n-default-message="The Profiler Visualization requires an active license ({licenseTypeList} or {platinumLicenseType}), but none were found in your cluster."
|
||||
i18n-values="{
|
||||
html_licenseTypeList: '<code>' + trialLicense + '</code>, <code>' + basicLicense + '</code>, <code>' + goldLicense + '</code>',
|
||||
html_platinumLicenseType: '<code>' + platinumLicense + '</code>',
|
||||
}"
|
||||
></p>
|
||||
<p
|
||||
class="kuiText kuiVerticalRhythmSmall"
|
||||
i18n-id="xpack.searchProfiler.licenseErrorMessageDescription"
|
||||
i18n-default-message="The Profiler Visualization requires an active license ({licenseTypeList} or {platinumLicenseType}), but none were found in your cluster."
|
||||
i18n-values="{
|
||||
html_licenseTypeList: '<code>' + trialLicense + '</code>, <code>' + basicLicense + '</code>, <code>' + goldLicense + '</code>',
|
||||
html_platinumLicenseType: '<code>' + platinumLicense + '</code>',
|
||||
}"
|
||||
></p>
|
||||
|
||||
<p
|
||||
class="kuiText kuiVerticalRhythmSmall"
|
||||
i18n-id="xpack.searchProfiler.registerLicenseDescription"
|
||||
i18n-default-message="Please {registerLicenseLink} to continue using the Search Profiler"
|
||||
i18n-values="{
|
||||
html_registerLicenseLink: '<a class=\'kuiLink\' href=\'https://www.elastic.co/subscriptions\' rel=\'noopener\'>' + registerLicenseLinkLabel + '</a>',
|
||||
}"
|
||||
></p>
|
||||
</div>
|
||||
<p
|
||||
class="kuiText kuiVerticalRhythmSmall"
|
||||
i18n-id="xpack.searchProfiler.registerLicenseDescription"
|
||||
i18n-default-message="Please {registerLicenseLink} to continue using the Search Profiler"
|
||||
i18n-values="{
|
||||
html_registerLicenseLink: '<a class=\'kuiLink\' href=\'https://www.elastic.co/subscriptions\' rel=\'noopener\'>' + registerLicenseLinkLabel + '</a>',
|
||||
}"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<div class="prfDevTool__sense">
|
||||
<!-- Form -->
|
||||
<div class="kuiFieldGroup">
|
||||
<div class="kuiFieldGroupSection">
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<label
|
||||
class="kuiLabel"
|
||||
for="searchProfilerIndexInput"
|
||||
i18n-id="xpack.searchProfiler.formIndexLabel"
|
||||
i18n-default-message="Index"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<input
|
||||
id="searchProfilerIndexInput"
|
||||
class="kuiTextInput"
|
||||
type="text"
|
||||
ng-model="index"
|
||||
placeholder="_all"
|
||||
ng-disabled="!licenseEnabled"
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiFieldGroupSection">
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<label
|
||||
class="kuiLabel"
|
||||
for="searchProfilerTypeInput"
|
||||
i18n-id="xpack.searchProfiler.formTypeLabel"
|
||||
i18n-default-message="Type"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<input
|
||||
id="searchProfilerTypeInput"
|
||||
class="kuiTextInput"
|
||||
type="text"
|
||||
ng-model="type"
|
||||
ng-disabled="!licenseEnabled"
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code editor -->
|
||||
<div style="height:85%;margin-bottom:5px;padding-top:20px">
|
||||
<div ui-ace="{ onLoad : aceLoaded, mode: 'json' }" ng-model="query" class="ace_editor"></div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<button
|
||||
class="kuiButton kuiButton--primary"
|
||||
style="float:right;"
|
||||
ng-click="profile()"
|
||||
ng-disabled="!licenseEnabled || !query"
|
||||
i18n-id="xpack.searchProfiler.formProfileButtonLabel"
|
||||
i18n-default-message="Profile"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<aside class="prfDevTool__details">
|
||||
<highlightdetails ng-show="highlight.details && licenseEnabled"></highlightdetails>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="prfDevTool__sense">
|
||||
<!-- Form -->
|
||||
<div class="kuiFieldGroup">
|
||||
<div class="kuiFieldGroupSection">
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<label
|
||||
class="euiFormLabel"
|
||||
for="searchProfilerIndexInput"
|
||||
i18n-id="xpack.searchProfiler.formIndexLabel"
|
||||
i18n-default-message="Index"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<input
|
||||
id="searchProfilerIndexInput"
|
||||
class="kuiTextInput"
|
||||
type="text"
|
||||
ng-model="index"
|
||||
placeholder="_all"
|
||||
ng-disabled="!licenseEnabled"
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiFieldGroupSection">
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<label
|
||||
class="euiFormLabel"
|
||||
for="searchProfilerTypeInput"
|
||||
i18n-id="xpack.searchProfiler.formTypeLabel"
|
||||
i18n-default-message="Type"
|
||||
></label>
|
||||
</div>
|
||||
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
<input
|
||||
id="searchProfilerTypeInput"
|
||||
class="kuiTextInput"
|
||||
type="text"
|
||||
ng-model="type"
|
||||
ng-disabled="!licenseEnabled"
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code editor -->
|
||||
<div ui-ace="{ onLoad : aceLoaded, mode: 'json' }" ng-model="query" class="ace_editor"></div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div><button
|
||||
class="kuiButton kuiButton--primary"
|
||||
style="float:right;"
|
||||
ng-click="profile()"
|
||||
ng-disabled="!licenseEnabled || !query"
|
||||
i18n-id="xpack.searchProfiler.formProfileButtonLabel"
|
||||
i18n-default-message="Profile"
|
||||
>
|
||||
</button></div>
|
||||
</div>
|
||||
|
||||
<aside class="prfDevTool__details euiFlyout euiFlyout--medium" ng-show="highlight.details && licenseEnabled">
|
||||
<highlightdetails></highlightdetails>
|
||||
<div class="euiFlyoutFooter">
|
||||
<button class="kuiButton kuiButton--primary prfDevTool__detailsCloseBtn" ng-click="resetHighlightPanel()">close</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</kbn-dev-tools-app>
|
||||
|
|
|
|||
|
|
@ -7445,7 +7445,6 @@
|
|||
"xpack.searchProfiler.platinumLicenseTitle": "白金级",
|
||||
"xpack.searchProfiler.profileTree.cumulativeTimeTitle": "累计时间：",
|
||||
"xpack.searchProfiler.profileTree.cumulativeTimeTooltip": "索引中所有分片的累计时间。注意：这不是时钟时间，因为分片可以并行执行。",
|
||||
"xpack.searchProfiler.profileTree.header.percentageTimeTitle": "时间百分比",
|
||||
"xpack.searchProfiler.profileTree.header.selfTimeTitle": "独自时间",
|
||||
"xpack.searchProfiler.profileTree.header.totalTimeTitle": "总时间",
|
||||
"xpack.searchProfiler.profileTree.header.typeTitle": "类型",
|
||||
|
|
|
|||
Loading…
Reference in a new issue