1<div
2   ng-show="qc.validated.valid()"
3   class="wb-wrapper">
4
5  <mn-element-cargo depot="actions" ng-if="qc.validated.valid()">
6    <div class="header-controls">
7      <a
8         ng-if="qc.showOptions"
9         ng-click="qc.options()">
10        <span class="icon fa-cog fa-lg"></span>
11      </a>
12      <input
13         type="file"
14         id="loadQuery"
15         name="files"
16         style="display:none"
17         accept=".txt,.json">
18      <a
19
20         id="loadQueryButton"
21         ng-click="qc.do_import()"
22         class="outline resp-hide-sml"
23         onchange="console.log('changed files')">
24        IMPORT
25      </a>
26      <a
27         ng-click="qc.unified_save()"
28         class="resp-hide-sml">
29        EXPORT
30      </a>
31    </div>
32  </mn-element-cargo>
33
34<!-- wrapper for query editor and results ------------------------------------>
35  <div mn-spinner="queryInProgress" class="wb-main-wrapper width-9 resp-small">
36<!-- query editor header, main editor area, and results footer --------------->
37    <div class="wb-query-editor">
38<!-- Editor "header row" ----------------------------------------------------->
39      <div class="wb-query-editor-header"  ng-click="qc.handleClick('editor')">
40        <h4>Query Editor</h4>
41        <span class="wb-history-controls">
42          <span
43             title="View previous queries & results" ng-click="qc.prev()"
44             qw-long-press="qc.historyMenu"
45             class="icon angle-icon left"
46             ng-disabled="!qc.hasPrev()">
47
48          </span>
49          <span class="wb-history-controls-inner">
50            <a ng-click="qc.historyMenu()">history</a>
51            ({{qc.getCurrentIndex()}})
52          </span>
53          <span
54             title="View subsequent queries & results"
55             ng-click="qc.next()"
56             qw-long-press="qc.historyMenu"
57             class="icon angle-icon right"
58             ng-disabled="!qc.hasNext()">
59
60          </span>
61        </span>
62        <div class="wb-fullscreen resp-hide-sml" ng-click="qc.toggleFullscreen()">
63          <span ng-if="!qc.fullscreen" class="icon fa-expand" title="expand"></span>
64          <span ng-if="qc.fullscreen" class="icon fa-compress" title="contract"></span>
65        </div>
66      </div>
67<!-- Ace editor -------------------------------------------------------------->
68      <div ng-click="qc.handleClick('editor')"
69         class="wb-ace-editor"
70         ui-ace="qc.aceInputOptions"
71         ng-model="qc.lastResult().query">
72      </div>
73
74<!-- wrapper under query editor for button and stats ------------------------->
75      <div class="wb-query-editor-footer"  ng-click="qc.handleClick('results')">
76        <span class="wb-button-wrapper nowrap">
77          <button ng-click="qc.query()" class="wb-button-execute">
78            <div ng-if="!qc.lastResult().busy">Execute</div>
79            <div ng-if="qc.lastResult().busy" class="icon-button">
80              Cancel
81              <span class="icon fa-spinner fa-spin fa-pulse"></span>
82            </div>
83          </button>
84          <button
85             ng-disabled="qc.lastResult().busy"
86             ng-click="qc.query(true)"
87             class="outline tight">
88            Explain
89            <span  ng-if="qc.lastResult().busy" class="icon fa-spinner fa-spin fa-pulse"></span>
90          </button>
91          <button ng-if="qc.isEnterprise()"
92             ng-disabled="qc.lastResult().busy"
93             ng-click="qc.runAdviseOnLatest()"
94             class="outline tight">
95             Advise
96            <span  ng-if="qc.lastResult().busy" class="icon fa-spinner fa-spin fa-pulse"></span>
97          </button>
98 
99        </span>
100<!-- query execution summary stats -------------------------------------------->
101        <div class="wb-result-summary">
102          <span class="wb-result-summary" ng-if="!qc.isEnterprise()">
103            <a href="https://index-advisor.couchbase.com/indexadvisor" target="_blank">External Query Advisor</a>&nbsp;&nbsp;&nbsp;&nbsp;
104          </span>
105          <span
106             class="nowrap wb-result-status padding-right-half"
107             ng-class="{success: qc.status_success() || qc.lastResult().status == 'explain success', error: qc.status_fail()}">
108            {{qc.lastResult().status}}
109          </span>
110          <span class="nowrap" ng-hide="qc.lastResult().status == 'executing'">
111            {{qc.lastResult().getLastRun()}}
112          </span>
113          <span ng-if="qc.lastResult().elapsedTime" class="nowrap pipe">
114            elapsed: {{qc.lastResult().elapsedTime}}
115          </span>
116          <span ng-if="qc.lastResult().executionTime" class="nowrap pipe">
117            execution: {{qc.lastResult().executionTime}}
118          </span>
119          <span ng-if="qc.lastResult().mutationCount" class="nowrap pipe">
120            mutations: {{qc.lastResult().mutationCount}}
121          </span>
122          <span ng-if="!qc.lastResult().mutationCount && qc.lastResult().resultCount" class="nowrap pipe">
123            docs: {{qc.lastResult().resultCount}}
124          </span>
125          <span ng-if="qc.lastResult().resultSize" class="nowrap pipe">
126            size: {{qc.lastResult().resultSize}} bytes
127          </span>
128        </div>
129
130        <div>
131          <a
132             ng-disabled="qc.executingQuery.busy"
133             ng-click="$event.stopPropagation(); qc.format(); qc.handleClick('editor');"
134             class="text-smallish nowrap resp-hide-xsml">
135            <span class="icon fa-align-right"></span>
136            format
137          </a>
138        </div>
139      </div>
140    </div>
141
142<!-- query results ------------------------------------------------------------>
143    <div  ng-click="qc.handleClick('results')" class="wb-results-header">
144      <h4>Query Results
145        <span
146           class="icon fa-copy"
147           ng-click="qc.copyResultAsCSV()"
148           title="Copy results in tabular format">
149        </span>
150        <span
151           ng-if="qc.lastResult().warnings"
152           tooltip-trigger="'mouseenter'"
153           tooltip-append-to-body="true"
154           class="fa-warning icon force-orange-3 cursor-pointer"
155           uib-tooltip-html="{{qc.lastResult().warnings}}">
156        </span>
157        <span class="icon fa-search" ng-if="qc.isSelected(1)" ng-click="qc.aceSearchOutput()"></span>
158      </h4>
159
160      <span class="pills">
161        <a ng-click="qc.selectTab(2)"
162           ng-class="{selected: qc.isSelected(2)}">Table</a>
163        <a ng-click="qc.selectTab(1)"
164           ng-class="{selected: qc.isSelected(1)}">JSON</a>
165        <a ng-click="qc.selectTab(3)"
166           ng-class="{selected: qc.isSelected(3)}"
167           class="resp-hide-med">Tree</a>
168        <a ng-click="qc.selectTab(4)"
169           ng-class="{selected: qc.isSelected(4)}">Plan</a>
170        <a ng-click="qc.selectTab(5)"
171           ng-class="{selected: qc.isSelected(5)}"
172           class="resp-hide-med">Plan Text</a>
173        <a ng-click="qc.selectTab(6)" ng-if="qc.isEnterprise()"
174           ng-class="{selected: qc.isSelected(6)}">Advice
175             <span ng-if="qc.hasRecommendedIndex(qc.lastResult())">*</span>
176         </a>
177      </span>
178    </div>
179
180    <div class="wb-results-wrapper" ng-click="qc.handleClick('results')">
181      <div class="wb-results-show-anyway" ng-if="!qc.showBigDatasets && qc.dataTooBig()">
182        <div ng-bind-html="qc.getBigDataMessage()"> </div>
183        <a ng-click="qc.setShowBigData(true)" class="text-medium link-heavy">Show anyway <span class="icon fa-angle-right"></span></a>
184      </div>
185
186      <div class="wb-results-json" ui-ace="qc.aceOutputOptions"
187        ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
188        ng-model="qc.lastResult().result"></div>
189
190      <div class="wb-results-table"
191        ng-if="qc.isSelected(2) && qc.lastResult().data"
192        qw-json-data-table="qc.lastResult().data"></div>
193
194      <div class="wb-results-tree"
195        ng-if="qc.isSelected(3) && (!qc.dataTooBig() || qc.showBigDatasets)"
196        qw-json-tree="qc.lastResult().data"></div>
197
198      <div class="wb-results-explain" ng-if="qc.isSelected(4)"
199        qw-explain-viz-d3="qc.lastResult().explainResult"></div>
200
201      <div class="wb-results-explain-text" ng-if="qc.isSelected(5)"
202        ui-ace="qc.acePlanOptions"
203        ng-model="qc.lastResult().explainResultText"></div>
204
205      <div class="wb-results-advice" style="overflow:auto" ng-if="qc.isSelected(6)"
206        qw-advice-viz="qc.lastResult().advice || qc.lastResult().query"></div>
207    </div>
208  </div>
209
210<!-- data insights sidebar ------------------------------------------------ -->
211  <div class="insights-sidebar width-3 resp-hide-sml">
212    <div ng-if="qc.qqs.bucket_errors" class="insights-sidebar-body">
213      {{qc.qqs.bucket_errors}}
214    </div>
215    <div ng-if="!qc.qqs.bucket_errors" class="insights-sidebar-body narrow-scrollbar">
216      <div class="row margin-bottom-half">
217        <h4>Data Insights</h4>
218        <div class="insights-sidebar-expand" ng-click="qc.toggleAnalysisSize()">
219          <span ng-if="!qc.analysisExpanded" class="icon fa-expand" title="expand"></span>
220          <span ng-if="qc.analysisExpanded" class="icon fa-compress" title="contract"></span>
221        </div>
222      </div>
223
224      <section ng-if="qc.has_prim_buckets()">
225        <h5 title="Buckets with a primary index support all queries. Not recommended for production!">
226          Queryable Buckets
227        </h5>
228        <span
229           ng-repeat="bucket in qc.buckets"
230           ng-show="bucket.has_prim">
231          <div bucket-display="bucket"></div>
232        </span>
233      </section>
234
235      <section ng-if="qc.has_sec_buckets()">
236        <h5 title="Buckets with only secondary indexes require a 'WHERE' clause using indexed fields.">
237          Queryable On Indexed Fields
238        </h5>
239          <span
240             ng-repeat="bucket in qc.buckets"
241             ng-show="!bucket.has_prim && bucket.has_sec">
242            <div bucket-display="bucket"></div>
243          </span>
244      </section>
245
246      <section ng-if="qc.has_unindexed_buckets()">
247        <h5 title="Buckets with no index can only be queried by document id.">Queryable By Doc ID Only</h5>
248          <span
249             ng-repeat="bucket in qc.buckets"
250             ng-show="!bucket.has_prim && !bucket.has_sec">
251            <div bucket-display="bucket"></div>
252          </span>
253      </section>
254<!-- bucket insights refresh button ---------------------------------------- -->
255      <div class="row flex-right fix-position-br wb-refresh-btn" ng-if="!qc.fullscreen">
256        <button
257           title="Refresh bucket insights"
258           ng-click="qc.updateBuckets()"
259           class="outline"
260           ng-disabled="qc.qqs.loadingBuckets">
261          Refresh &nbsp;
262          <span class="icon fa-refresh"></span>
263        </button>
264      </div>
265    </div>
266  </div>
267</div>
268