mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-01-23 17:30:23 +00:00
335 lines
17 KiB
HTML
335 lines
17 KiB
HTML
<div
|
|
class="tab-pane"
|
|
data-bind="setTemplateReady: true,
|
|
attr:{
|
|
id: tabId
|
|
}"
|
|
role="tabpanel"
|
|
>
|
|
<div class="tabPaneContentContainer">
|
|
<div class="mongoQueryHelper" data-bind="visible: isPreferredApiMongoDB && sqlQueryEditorContent().length === 0">
|
|
Start by writing a Mongo query, for example: <strong>{'id':'foo'}</strong> or <strong>{ }</strong> to get all the
|
|
documents.
|
|
</div>
|
|
<div class="queryEditorWithSplitter" data-bind="attr: { id: queryEditorId }">
|
|
<editor
|
|
class="queryEditor"
|
|
data-bind="css: { mongoQueryEditor: isPreferredApiMongoDB }"
|
|
params="{
|
|
content: initialEditorContent,
|
|
contentType: monacoSettings.language,
|
|
isReadOnly: monacoSettings.readOnly,
|
|
lineNumbers: 'on',
|
|
ariaLabel: 'Editing Query',
|
|
updatedContent: sqlQueryEditorContent,
|
|
selectedContent: selectedContent
|
|
}"
|
|
></editor>
|
|
<!-- Splitter - Start -->
|
|
<div class="splitter ui-resizable-handle ui-resizable-s" data-bind="attr: { id: splitterId }">
|
|
<img class="queryEditorHorizontalSplitter" src="/HorizontalSplitter.svg" alt="Splitter" />
|
|
</div>
|
|
</div>
|
|
<!-- Splitter - End -->
|
|
|
|
<!-- Script for results metadata that is common to all APIs -->
|
|
<script type="text/html" id="result-metadata-template">
|
|
<span>
|
|
<span data-bind="text: showingDocumentsDisplayText"></span>
|
|
</span>
|
|
<span class="queryResultDivider" data-bind="visible: fetchNextPageButton.enabled"> | </span>
|
|
<span class="queryResultNextEnable" data-bind="visible: fetchNextPageButton.enabled">
|
|
<a data-bind="click: onFetchNextPageClick">
|
|
<span>Load more</span>
|
|
<img class="queryResultnextImg" src="/Query-Editor-Next.svg" alt="Fetch next page">
|
|
</a>
|
|
</span>
|
|
</script>
|
|
|
|
<!-- Query Errors Tab - Start-->
|
|
<div class="active queryErrorsHeaderContainer" data-bind="visible: errors().length > 0">
|
|
<span class="queryErrors" data-toggle="tab" data-bind="attr: { href: '#queryerrors' + tabId }">Errors</span>
|
|
</div>
|
|
<!-- Query Errors Tab - End -->
|
|
|
|
<!-- Query Results & Errors Content Container - Start-->
|
|
<div class="queryResultErrorContentContainer">
|
|
<div
|
|
class="queryEditorWatermark"
|
|
data-bind="visible: allResultsMetadata().length === 0 && errors().length === 0 && !queryResults() && !isExecuting()"
|
|
>
|
|
<p><img src="/RunQuery.png" alt="Execute Query Watermark" /></p>
|
|
<p class="queryEditorWatermarkText">Execute a query to see the results</p>
|
|
</div>
|
|
<div
|
|
class="queryResultsErrorsContent"
|
|
data-bind="visible: allResultsMetadata().length > 0 || errors().length > 0 || queryResults()"
|
|
>
|
|
<div class="togglesWithMetadata" data-bind="visible: errors().length === 0">
|
|
<div
|
|
class="toggles"
|
|
aria-label="Successful execution"
|
|
id="execute-query-toggles"
|
|
data-bind="event: { keydown: onToggleKeyDown }"
|
|
tabindex="0"
|
|
>
|
|
<div class="tab">
|
|
<input type="radio" class="radio" value="result" />
|
|
<span
|
|
class="toggleSwitch"
|
|
role="button"
|
|
tabindex="0"
|
|
data-bind="click: toggleResult, css:{ selectedToggle: isResultToggled(), unselectedToggle: !isResultToggled() }"
|
|
aria-label="Results"
|
|
>Results</span
|
|
>
|
|
</div>
|
|
<div class="tab">
|
|
<input type="radio" class="radio" value="logs" />
|
|
<span
|
|
class="toggleSwitch"
|
|
role="button"
|
|
tabindex="0"
|
|
data-bind="click: toggleMetrics, css:{ selectedToggle: isMetricsToggled(), unselectedToggle: !isMetricsToggled() }"
|
|
aria-label="Query stats"
|
|
>Query Stats</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="result-metadata"
|
|
data-bind="template: { name: 'result-metadata-template' }, visible: isResultToggled()"
|
|
></div>
|
|
</div>
|
|
<json-editor
|
|
params="{ content: queryResults, isReadOnly: true, ariaLabel: 'Query results' }"
|
|
data-bind="visible: queryResults().length > 0 && isResultToggled() && allResultsMetadata().length > 0 && errors().length === 0"
|
|
>
|
|
</json-editor>
|
|
<div
|
|
class="queryMetricsSummaryContainer"
|
|
data-bind="visible: isMetricsToggled() && allResultsMetadata().length > 0 && errors().length === 0"
|
|
>
|
|
<table class="queryMetricsSummary">
|
|
<thead class="queryMetricsSummaryHead">
|
|
<tr class="queryMetricsSummaryHeader queryMetricsSummaryTuple">
|
|
<th title="METRIC">METRIC</th>
|
|
<th></th>
|
|
<th title="VALUE">VALUE</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="queryMetricsSummaryBody" data-bind="with: aggregatedQueryMetrics">
|
|
<tr class="queryMetricsSummaryTuple">
|
|
<td title="Request Charge">Request Charge</td>
|
|
<td></td>
|
|
<td>
|
|
<span
|
|
data-bind="text: $parent.requestChargeDisplayText, attr: { title: $parent.requestChargeDisplayText }"
|
|
></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple">
|
|
<td title="Showing Results">Showing Results</td>
|
|
<td></td>
|
|
<td>
|
|
<span
|
|
data-bind="text: $parent.showingDocumentsDisplayText, attr: { title: $parent.showingDocumentsDisplayText }"
|
|
></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Retrieved document count">Retrieved document count</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Total number of retrieved documents</span>
|
|
</span>
|
|
</td>
|
|
<td><span data-bind="text: retrievedDocumentCount, attr: { title: retrievedDocumentCount }"></span></td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Retrieved document size">Retrieved document size</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Total size of retrieved documents in bytes</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span data-bind="text: retrievedDocumentSize, attr: { title: retrievedDocumentSize }"></span>
|
|
<span>bytes</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Output document count">Output document count</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Number of output documents</span>
|
|
</span>
|
|
</td>
|
|
<td><span data-bind="text: outputDocumentCount, attr: { title: outputDocumentCount }"></span></td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Output document size">Output document size</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Total size of output documents in bytes</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span data-bind="text: outputDocumentSize, attr: { title: outputDocumentSize }"></span>
|
|
<span>bytes</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Index hit document count">Index hit document count</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Total number of documents matched by the filter</span>
|
|
</span>
|
|
</td>
|
|
<td><span data-bind="text: indexHitDocumentCount, attr: { title: indexHitDocumentCount }"></span></td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Index lookup time">Index lookup time</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Time spent in physical index layer</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span data-bind="text: indexLookupTime, attr: { title: indexLookupTime }"></span> <span>ms</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Document load time">Document load time</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Time spent in loading documents</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span data-bind="text: documentLoadTime, attr: { title: documentLoadTime }"></span> <span>ms</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Query engine execution time">Query engine execution time</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText queryEngineExeTimeInfo"
|
|
>Time spent by the query engine to execute the query expression (excludes other execution times
|
|
like load documents or write results)</span
|
|
>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span
|
|
data-bind="text: runtimeExecutionTimes.queryEngineExecutionTime, attr: { title: runtimeExecutionTimes.queryEngineExecutionTime }"
|
|
></span>
|
|
<span>ms</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="System function execution time">System function execution time</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Total time spent executing system (built-in) functions</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span
|
|
data-bind="text: runtimeExecutionTimes.systemFunctionExecutionTime, attr: { title: runtimeExecutionTimes.systemFunctionExecutionTime }"
|
|
></span>
|
|
<span>ms</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="User defined function execution time">User defined function execution time</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="queryMetricTooltipText">Total time spent executing user-defined functions</span>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span
|
|
data-bind="text: runtimeExecutionTimes.userDefinedFunctionExecutionTime, attr: { title: runtimeExecutionTimes.userDefinedFunctionExecutionTime }"
|
|
></span>
|
|
<span>ms</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<td><span title="Document write time">Document write time</span></td>
|
|
<td>
|
|
<span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
|
|
<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>
|
|
</td>
|
|
<td>
|
|
<span data-bind="text: documentWriteTime, attr: { title: documentWriteTime }"></span> <span>ms</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.roundTrips() != null">
|
|
<td title="Round Trips">Round Trips</td>
|
|
<td></td>
|
|
<td><span data-bind="text: $parent.roundTrips, attr: { title: $parent.roundTrips }"></span></td>
|
|
</tr>
|
|
<!-- TODO: Report activity id for mongo queries -->
|
|
<tr class="queryMetricsSummaryTuple" data-bind="visible: $parent.activityId() != null">
|
|
<td title="Activity id">Activity id</td>
|
|
<td></td>
|
|
<td><span data-bind="text: $parent.activityId, attr: { title: $parent.activityId }"></span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="downloadMetricsLinkContainer" data-bind="visible: $parent.isQueryMetricsEnabled">
|
|
<a
|
|
id="downloadMetricsLink"
|
|
role="button"
|
|
tabindex="0"
|
|
data-bind="event: { click: onDownloadQueryMetricsCsvClick, keypress: onDownloadQueryMetricsCsvKeyPress }"
|
|
>
|
|
<img class="downloadCsvImg" src="/DownloadQuery.svg" alt="download query metrics csv" />
|
|
<span>Per-partition query metrics (CSV)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Query Errors Content - Start-->
|
|
<div
|
|
class="tab-pane active"
|
|
data-bind="
|
|
id: {
|
|
href: 'queryerrors' + tabId
|
|
},
|
|
visible: errors().length > 0"
|
|
>
|
|
<!-- ko foreach: errors -->
|
|
<div class="errorContent">
|
|
<span class="errorMessage" data-bind="text: $data.message"></span>
|
|
<span class="errorDetailsLink">
|
|
<a
|
|
data-bind="click: $parent.onErrorDetailsClick, event: { keypress: $parent.onErrorDetailsKeyPress }"
|
|
id="error-display"
|
|
tabindex="0"
|
|
aria-label="Error details link"
|
|
>More details</a
|
|
>
|
|
</span>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
<!-- Query Errors Content - End-->
|
|
</div>
|
|
</div>
|
|
<!-- Results & Errors Content Container - End-->
|
|
</div>
|
|
</div>
|