1<div
2   ng-controller="qwQueryController as qc"
3   ng-show="qc.validated.valid()"
4   class="wb-wrapper">
5
6  <mn-element-cargo depot="actions" ng-if="qc.validated.valid()">
7    <div class="header-controls">
8      <input type="file" id="loadQuery" name="files" style="display:none" accept="text/plain">
9      <a
10         ng-if="qc.fileSupport"
11         id="loadQueryButton"
12         ng-click="qc.load_query()"
13         class="outline"
14         onchange="console.log('changed files')">
15        IMPORT
16      </a>
17      <a ng-click="qc.unified_save()">EXPORT</a>
18    </div>
19  </mn-element-cargo>
20
21<!-- wrapper for query editor and results -->
22  <div mn-spinner="queryInProgress" class="wb-main-wrapper width-9 resp-small">
23<!-- query editor header, main editor area, and results footer -->
24    <div class="wb-query-editor">
25<!-- Editor "header row" -->
26      <div class="wb-query-editor-header">
27        <h4>Query Editor</h4>
28        <span>
29          <button
30             title="View previous queries & results" ng-click="qc.prev()"
31             qw-long-press="qc.historyMenu"
32             class="outline btn-small"
33             ng-disabled="!qc.hasPrev()">
34            &larr;
35          </button>
36          <span class="wb-history-controls-inner">
37            <a ng-click="qc.historyMenu()">history</a>
38            ({{qc.getCurrentIndex()}})
39          </span>
40          <button
41             title="View subsequent queries & results"
42             ng-click="qc.next()"
43             qw-long-press="qc.historyMenu"
44             class="outline btn-small"
45             ng-disabled="!qc.hasNext()">
46            &rarr;
47          </button>
48        </span>
49      </div>
50<!-- Ace editor *********************************************************** -->
51      <div
52         class="wb-ace-editor"
53         ui-ace="qc.aceInputOptions"
54         ng-disabled="qc.executingQuery.busy"
55         ng-model="qc.lastResult.query">
56      </div>
57
58<!-- wrapper under query editor for button and stats -->
59      <div class="wb-query-editor-footer">
60        <span class="nowrap">
61          <button ng-click="qc.query()" class="wb-button-execute">
62            <div ng-if="!qc.executingQuery.busy">Execute</div>
63            <div ng-if="qc.executingQuery.busy" class="icon-button">
64              Cancel <span class="icon fa-spinner fa-spin fa-pulse"></span>
65            </div>
66          </button>
67          <button ng-disabled="qc.executingQuery.busy" ng-click="qc.query(true)" class="outline tight">
68             Explain
69             <span  ng-if="qc.executingQuery.busy" class="icon fa-spinner fa-spin fa-pulse"></span>
70          </button>
71        </span>
72
73<!-- query results stats -->
74        <div ng-hide="qc.lastResult.hide" class="wb-result-summary">
75          <span
76            class="wb-result-status"
77            ng-class="{success: qc.status_success() || qc.lastResult.status == 'explain success', error: qc.status_fail()}">
78            {{qc.lastResult.status}}</span>
79          <span ng-if="qc.lastResult.elapsedTime"> | elapsed: {{qc.lastResult.elapsedTime}} | </span>
80          <span ng-if="qc.lastResult.executionTime">execution: {{qc.lastResult.executionTime}} | </span>
81          <span ng-if="qc.lastResult.mutationCount">mutations: {{qc.lastResult.mutationCount}} | </span>
82          <span ng-if="!qc.lastResult.mutationCount && qc.lastResult.resultCount" ng-attr-title="sortCount: {{qc.lastResult.sortCount}}">
83          count: {{qc.lastResult.resultCount}} | </span>
84          <span ng-if="qc.lastResult.resultSize">size: {{qc.lastResult.resultSize}}</span>
85        </div>
86
87<!-- run-time preferences -->
88        <a ng-if="qc.showOptions" ng-click="qc.options()" class="row resp-hide-xsml">
89          <span class="icon fa-cog margin-right"></span>
90          <span class="text-smaller">preferences</span>
91        </a>
92      </div>
93
94    </div>
95
96<!-- query results -->
97    <div class="wb-results-header">
98      <h4>Query Results
99        <a
100           ng-click="qc.copyResultAsCSV()"
101           class="margin-left-half"
102           title="Copy results in tabular format">
103          <span class="icon fa-copy"></span>
104        </a>
105        <span
106           ng-if="qc.lastResult.warnings"
107           tooltip-trigger="'mouseenter'"
108           tooltip-append-to-body="true"
109           class="fa-warning icon orange-3 cursor-pointer"
110           uib-tooltip-html="{{qc.lastResult.warnings}}">
111        </span>
112      </h4>
113      <span class="pills">
114        <a ng-click="qc.selectTab(1)"
115           ng-class="{selected: qc.isSelected(1)}">JSON</a>
116        <a ng-click="qc.selectTab(2)"
117           ng-class="{selected: qc.isSelected(2)}">Table</a>
118        <a ng-click="qc.selectTab(3)"
119           ng-class="{selected: qc.isSelected(3)}">Tree</a>
120        <a ng-click="qc.selectTab(4)" ng-if="qc.isEnterprise"
121           ng-class="{selected: qc.isSelected(4)}">Plan</a>
122        <a ng-click="qc.selectTab(5)"
123           ng-class="{selected: qc.isSelected(5)}"
124           class="resp-hide-xsml">Plan Text</a>
125      </span>
126    </div>
127
128    <div class="wb-results-wrapper">
129      <div class="wb-results-show-anyway" ng-if="!qc.showBigDatasets && qc.dataTooBig()">
130        <div ng-bind-html="qc.getBigDataMessage()"> </div>
131        <a ng-click="qc.setShowBigData(true)" class="text-medium link-heavy">Show anyway <span class="icon fa-angle-right"></span></a>
132      </div>
133
134      <div class="wb-results-json" ui-ace="qc.aceOutputOptions"
135        ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
136        ng-model="qc.lastResult.result"></div>
137
138      <div class="wb-results-table"
139        ng-if="qc.isSelected(2)"
140        qw-json-data-table="qc.lastResult.data"></div>
141
142      <div class="wb-results-tree"
143        ng-if="qc.isSelected(3) && (!qc.dataTooBig() || qc.showBigDatasets)"
144        qw-json-tree="qc.lastResult.data"></div>
145
146      <div class="wb-results-explain" ng-if="qc.isSelected(4)"
147        qw-explain-viz-d3="qc.lastResult.explainResult"></div>
148
149      <div class="wb-results-explain-text" ng-if="qc.isSelected(5)"
150        ui-ace="qc.acePlanOptions"
151        ng-model="qc.lastResult.explainResultText"></div>
152    </div>
153  </div>
154
155<!-- bucket insights sidebar -->
156  <div class="insights-sidebar width-3 show-scrollbar resp-hide-sml">
157    <div ng-if="qc.qqs.bucket_errors"  class="insights-sidebar-body">{{qc.qqs.bucket_errors}}</div>
158    <div ng-if="!qc.qqs.bucket_errors" class="insights-sidebar-body">
159      <div class="row">
160        <h4>Bucket Insights</h4>
161          <a title="expand or contract sidebar"
162             ng-click="qc.toggleAnalysisSize()">
163            <span ng-if="!qc.analysisExpanded" class="icon fa-expand"></span>
164            <span ng-if="qc.analysisExpanded" class="icon fa-compress"></span>
165          </a>
166      </div>
167
168      <section>
169        <h5 title="Buckets with a primary index support all queries.">Fully Queryable Buckets</h5>
170        <span ng-repeat="bucket in qc.buckets"
171            ng-show="bucket.has_prim">
172            <div bucket-display="bucket"></div>
173        </span>
174      </section>
175
176      <section>
177        <h5 title="Buckets with only secondary indexes require a 'where' clause using indexed fields.">Queryable on Indexed Fields</h5>
178          <span ng-repeat="bucket in qc.buckets"
179            ng-show="!bucket.has_prim && bucket.has_sec">
180            <div bucket-display="bucket"></div>
181          </span>
182      </section>
183
184      <section>
185        <h5 title="Buckets with no index cannot be queried.">Non-Indexed Buckets</h5>
186          <span ng-repeat="bucket in qc.buckets"
187            ng-show="!bucket.has_prim && !bucket.has_sec">
188            <div bucket-display="bucket"></div>
189          </span>
190      </section>
191    </div>
192  </div>
193</div>
194