random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-25 06:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix a11y bugs in query stats table: too many columns, header info not passed to column contents (#209)

Browse Source
This commit is contained in:
Laurent Nguyen 2020-09-17 10:43:01 +02:00 committed by GitHub
parent 562ac38ff1
commit 9b021b29b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/Explorer/Tabs/QueryTab.html
View File

@ -111,17 +111,18 @@
data-bind="visible: isMetricsToggled() && allResultsMetadata().length > 0 && errors().length === 0" data-bind="visible: isMetricsToggled() && allResultsMetadata().length > 0 && errors().length === 0"
> >
<table class="queryMetricsSummary"> <table class="queryMetricsSummary">
<caption>
Query Statistics
</caption>
<thead class="queryMetricsSummaryHead"> <thead class="queryMetricsSummaryHead">
<tr class="queryMetricsSummaryHeader queryMetricsSummaryTuple"> <tr class="queryMetricsSummaryHeader queryMetricsSummaryTuple">
<th title="METRIC">METRIC</th> <th title="METRIC" scope="col">METRIC</th>
<th></th> <th title="VALUE" scope="col">VALUE</th>
<th title="VALUE">VALUE</th>
</tr> </tr>
</thead> </thead>
<tbody class="queryMetricsSummaryBody" data-bind="with: aggregatedQueryMetrics"> <tbody class="queryMetricsSummaryBody" data-bind="with: aggregatedQueryMetrics">
<tr class="queryMetricsSummaryTuple"> <tr class="queryMetricsSummaryTuple">
<td title="Request Charge">Request Charge</td> <td title="Request Charge">Request Charge</td>
<td></td>
<td> <td>
<span <span
data-bind="text: $parent.requestChargeDisplayText, attr: { title: $parent.requestChargeDisplayText }" data-bind="text: $parent.requestChargeDisplayText, attr: { title: $parent.requestChargeDisplayText }"
@ -130,7 +131,6 @@
</tr> </tr>
<tr class="queryMetricsSummaryTuple"> <tr class="queryMetricsSummaryTuple">
<td title="Showing Results">Showing Results</td> <td title="Showing Results">Showing Results</td>
<td></td>
<td> <td>
<span <span
data-bind="text: $parent.showingDocumentsDisplayText, attr: { title: $parent.showingDocumentsDisplayText }" data-bind="text: $parent.showingDocumentsDisplayText, attr: { title: $parent.showingDocumentsDisplayText }"
@ -138,8 +138,8 @@
</td> </td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Retrieved document count">Retrieved document count</span></td>
<td> <td>
<span title="Retrieved document count">Retrieved document count</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Total number of retrieved documents</span> <span class="queryMetricTooltipText">Total number of retrieved documents</span>
@ -148,8 +148,8 @@
<td><span data-bind="text: retrievedDocumentCount, attr: { title: retrievedDocumentCount }"></span></td> <td><span data-bind="text: retrievedDocumentCount, attr: { title: retrievedDocumentCount }"></span></td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Retrieved document size">Retrieved document size</span></td>
<td> <td>
<span title="Retrieved document size">Retrieved document size</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Total size of retrieved documents in bytes</span> <span class="queryMetricTooltipText">Total size of retrieved documents in bytes</span>
@ -161,8 +161,8 @@
</td> </td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Output document count">Output document count</span></td>
<td> <td>
<span title="Output document count">Output document count</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Number of output documents</span> <span class="queryMetricTooltipText">Number of output documents</span>
@ -171,8 +171,8 @@
<td><span data-bind="text: outputDocumentCount, attr: { title: outputDocumentCount }"></span></td> <td><span data-bind="text: outputDocumentCount, attr: { title: outputDocumentCount }"></span></td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Output document size">Output document size</span></td>
<td> <td>
<span title="Output document size">Output document size</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Total size of output documents in bytes</span> <span class="queryMetricTooltipText">Total size of output documents in bytes</span>
@ -184,8 +184,8 @@
</td> </td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Index hit document count">Index hit document count</span></td>
<td> <td>
<span title="Index hit document count">Index hit document count</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Total number of documents matched by the filter</span> <span class="queryMetricTooltipText">Total number of documents matched by the filter</span>
@ -194,8 +194,8 @@
<td><span data-bind="text: indexHitDocumentCount, attr: { title: indexHitDocumentCount }"></span></td> <td><span data-bind="text: indexHitDocumentCount, attr: { title: indexHitDocumentCount }"></span></td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Index lookup time">Index lookup time</span></td>
<td> <td>
<span title="Index lookup time">Index lookup time</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Time spent in physical index layer</span> <span class="queryMetricTooltipText">Time spent in physical index layer</span>
@ -206,8 +206,8 @@
</td> </td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Document load time">Document load time</span></td>
<td> <td>
<span title="Document load time">Document load time</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Time spent in loading documents</span> <span class="queryMetricTooltipText">Time spent in loading documents</span>
@ -218,8 +218,8 @@
</td> </td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Query engine execution time">Query engine execution time</span></td>
<td> <td>
<span title="Query engine execution time">Query engine execution time</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText queryEngineExeTimeInfo" <span class="queryMetricTooltipText queryEngineExeTimeInfo"
@ -236,8 +236,8 @@
</td> </td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="System function execution time">System function execution time</span></td>
<td> <td>
<span title="System function execution time">System function execution time</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Total time spent executing system (built-in) functions</span> <span class="queryMetricTooltipText">Total time spent executing system (built-in) functions</span>
@ -251,8 +251,8 @@
</td> </td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="User defined function execution time">User defined function execution time</span></td>
<td> <td>
<span title="User defined function execution time">User defined function execution time</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Total time spent executing user-defined functions</span> <span class="queryMetricTooltipText">Total time spent executing user-defined functions</span>
@ -266,8 +266,8 @@
</td> </td>
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
<td><span title="Document write time">Document write time</span></td>
<td> <td>
<span title="Document write time">Document write time</span>
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0"> <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
<img class="infoImg" src="/info-bubble.svg" alt="More information" /> <img class="infoImg" src="/info-bubble.svg" alt="More information" />
<span class="queryMetricTooltipText">Time spent to write query result set to response buffer</span> <span class="queryMetricTooltipText">Time spent to write query result set to response buffer</span>
@ -279,7 +279,6 @@
</tr> </tr>
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.roundTrips() != null"> <tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.roundTrips() != null">
<td title="Round Trips">Round Trips</td> <td title="Round Trips">Round Trips</td>
<td></td>
<td><span data-bind="text: $parent.roundTrips, attr: { title: $parent.roundTrips }"></span></td> <td><span data-bind="text: $parent.roundTrips, attr: { title: $parent.roundTrips }"></span></td>
</tr> </tr>
<!-- TODO: Report activity id for mongo queries --> <!-- TODO: Report activity id for mongo queries -->

36
src/Explorer/Tabs/QueryTab.less
View File

@ -93,7 +93,7 @@
margin-left: @MediumSpace; margin-left: @MediumSpace;
.flex-display(); .flex-display();
.flex-direction(); .flex-direction();
.togglesWithMetadata { .togglesWithMetadata {
margin-top: @MediumSpace; margin-top: @MediumSpace;
@ -102,23 +102,23 @@
height: @ToggleHeight; height: @ToggleHeight;
width: @ToggleWidth; width: @ToggleWidth;
margin-left: @MediumSpace; margin-left: @MediumSpace;
&:focus { &:focus {
.focus(); .focus();
} }
.tab { .tab {
margin-right: @MediumSpace; margin-right: @MediumSpace;
} }
.toggleSwitch { .toggleSwitch {
.toggleSwitch(); .toggleSwitch();
} }
.selectedToggle { .selectedToggle {
.selectedToggle(); .selectedToggle();
} }
.unselectedToggle { .unselectedToggle {
.unselectedToggle(); .unselectedToggle();
} }
@ -136,7 +136,7 @@
.queryResultNextEnable { .queryResultNextEnable {
color: @AccentMediumHigh; color: @AccentMediumHigh;
font-size: @mediumFontSize; font-size: @mediumFontSize;
cursor: pointer; cursor: pointer;
img { img {
height: @ImgHeight; height: @ImgHeight;
@ -153,7 +153,7 @@
img { img {
height: @ImgHeight; height: @ImgHeight;
width: @ImgWidth; width: @ImgWidth;
margin-left: @SmallSpace; margin-left: @SmallSpace;
} }
} }
} }
@ -181,7 +181,7 @@
cursor: pointer; cursor: pointer;
padding: @SmallSpace; padding: @SmallSpace;
} }
.queryMetricsSummaryContainer { .queryMetricsSummaryContainer {
.flex-display(); .flex-display();
.flex-direction(); .flex-direction();
@ -195,10 +195,14 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
caption {
width: 100px;
}
.queryMetricsSummaryHead { .queryMetricsSummaryHead {
.flex-display(); .flex-display();
} }
.queryMetricsSummaryHeader.queryMetricsSummaryTuple { .queryMetricsSummaryHeader.queryMetricsSummaryTuple {
font-size: 10px; font-size: 10px;
} }
@ -207,7 +211,7 @@
.flex-display(); .flex-display();
.flex-direction(); .flex-direction();
} }
.queryMetricsSummaryTuple { .queryMetricsSummaryTuple {
border-bottom: 1px solid @BaseMedium; border-bottom: 1px solid @BaseMedium;
height: 32px; height: 32px;
@ -221,18 +225,14 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
flex: 0 1 auto; flex: 0 0 50%;
}
&:nth-child(2) {
flex: 1 1 auto;
} }
&:nth-child(3) { &:nth-child(3) {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
flex: 0 0 50%; flex: 0 0 50%;
} }
.queryMetricInfoTooltip { .queryMetricInfoTooltip {
@ -264,7 +264,7 @@
.tooltipTextAfter(); .tooltipTextAfter();
} }
} }
.queryEngineExeTimeInfo { .queryEngineExeTimeInfo {
width: @QueryEngineExeInfo; width: @QueryEngineExeInfo;
top: -85px; top: -85px;