xref: /5.5.2/cbas-ui/cbas-ui/cbas.html (revision f141a931)
1<div ng-show="qc.validated.valid()" class="wb-wrapper">
2
3  <mn-element-cargo depot="actions" ng-if="qc.validated.valid()">
4    <div class="header-controls">
5      <input type="file" id="loadQuery" name="files" style="display:none" accept="text/plain">
6      <a ng-if="qc.fileSupport"
7         id="loadQueryButton"
8         ng-click="qc.load_query()"
9         class="outline"
10         onchange="console.log('changed files')">IMPORT</a>
11      <a href="" ng-click="qc.unified_save()">EXPORT</a>
12    </div>
13  </mn-element-cargo>
14
15<!-- wrapper for query editor and results -->
16  <div mn-spinner="queryInProgress" class="wb-main-wrapper width-9 resp-small">
17<!-- query editor header, main editor area, and results footer -->
18    <div class="wb-query-editor">
19<!-- Editor "header row" -->
20      <div class="wb-query-editor-header">
21        <h4>Analytics Query Editor</h4>
22        <span>
23          <button
24             title="View previous queries/results" ng-click="qc.prev()"
25             qw-long-press="qc.historyMenu"
26             class="outline btn-small"
27             ng-disabled="!qc.hasPrev()">
28            &larr;
29          </button>
30          <span class="wb-history-controls-inner">
31            <a ng-click="qc.historyMenu()">history</a>
32            <small>({{qc.getCurrentIndex()}})</small>
33          </span>
34          <button
35             title="View subsequent queries/results"
36             ng-click="qc.next()"
37             qw-long-press="qc.historyMenu"
38             class="outline btn-small"
39             ng-disabled="!qc.hasNext()">
40            &rarr;
41          </button>
42        </span>
43      </div>
44<!-- Ace editor *********************************************************** -->
45      <div
46         class="wb-ace-editor"
47         ui-ace="qc.aceInputOptions"
48         ng-disabled="qc.executingQuery.busy"
49         ng-model="qc.lastResult.query">{{qc.renderPage()}}
50      </div>
51
52<!-- wrapper under query editor for button and stats -->
53      <div class="wb-query-editor-footer">
54        <span class="nowrap">
55          <button ng-click="qc.query()" class="wb-button-execute">
56            <div ng-if="!qc.executingQuery.busy">Execute</div>
57            <div ng-if="qc.executingQuery.busy" class="icon-button">
58              Cancel <span class="icon fa-spinner fa-spin fa-pulse"></span>
59            </div>
60          </button>
61          <button ng-disabled="qc.executingQuery.busy" ng-click="qc.query(true)" class="outline tight">
62             Explain
63             <span ng-if="qc.executingQuery.busy" class="icon fa-spinner fa-spin fa-pulse"></span>
64          </button>
65        </span>
66
67<!-- query results stats -->
68        <div ng-hide="qc.lastResult.hide" class="wb-result-summary">
69          <span
70             class="wb-result-status"
71             ng-class="{success: qc.status_success(), error: qc.status_fail()}">
72            {{qc.lastResult.status}}
73          </span>
74          <span ng-if="qc.lastResult.elapsedTime"> | elapsed: {{qc.lastResult.elapsedTime}} | </span>
75          <span ng-if="qc.lastResult.executionTime">execution: {{qc.lastResult.executionTime}} | </span>
76          <span ng-if="qc.lastResult.mutationCount">mutations: {{qc.lastResult.mutationCount}} | </span>
77          <span ng-if="!qc.lastResult.mutationCount && qc.lastResult.resultCount">count: {{qc.lastResult.resultCount}} | </span>
78          <span ng-if="qc.lastResult.resultSize">size: {{qc.lastResult.resultSize}} | </span>
79          <span>processed objects: {{qc.lastResult.processedObjects}}</span>
80        </div>
81
82<!-- run-time preferences -->
83        <a ng-if="qc.showOptions" ng-click="qc.options()"  class="row resp-hide-xsml">
84          <span class="icon fa-cog margin-right"></span>
85          <span class="text-smaller">preferences</span>
86        </a>
87      </div>
88    </div>
89
90    <!-- query results -->
91    <div class="wb-results-header">
92      <h4>Analytics Query Results</h4>
93      <span class="pills">
94        <a ng-click="qc.selectTab(1)"
95           ng-class="{selected: qc.isSelected(1)}">JSON</a>
96        <a ng-click="qc.selectTab(2)"
97           ng-class="{selected: qc.isSelected(2)}">Table</a>
98        <a ng-click="qc.selectTab(3)"
99           ng-class="{selected: qc.isSelected(3)}">Tree</a>
100        <!-- Temporary Hide Plan Tab  -->
101        <a ng-click="qc.selectTab(4)" ng-if="qc.isEnterprise && false"
102           ng-class="{selected: qc.isSelected(4)}">Plan</a>
103        <a ng-click="qc.selectTab(5)"
104           ng-class="{selected: qc.isSelected(5)}">Plan Text</a>
105      </span>
106    </div>
107
108    <div class="wb-results-wrapper">
109      <div class="wb-results-show-anyway" ng-if="!qc.showBigDatasets && qc.dataTooBig()">
110        <div ng-bind-html="qc.getBigDataMessage()"></div>
111        <a ng-click="qc.setShowBigData(true)" class="text-medium link-heavy">Show anyway <span class="icon fa-angle-right"></span></a>
112      </div>
113      <div class="wb-results-json" ui-ace="qc.aceOutputOptions"
114           ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
115           ng-model="qc.lastResult.result"></div>
116
117      <div class="wb-results-table"
118           ng-if="qc.isSelected(2) && (!qc.dataTooBig() || qc.showBigDatasets)"
119           qw-json-data-table="qc.lastResult.data"></div>
120
121      <div class="wb-results-tree"
122           ng-if="qc.isSelected(3) && (!qc.dataTooBig() || qc.showBigDatasets)"
123           qw-json-tree="qc.lastResult.data"></div>
124
125<!--      <div class="wb-results-explain"
126           ng-if="qc.isSelected(4)"
127           qw-explain-viz="qc.lastResult.explainResult"></div>  -->
128
129      <div class="wb-results-explain-text"
130           ng-if="qc.isSelected(5)"
131           ui-ace="qc.acePlanOptions"
132           ng-model="qc.lastResult.explainResultText"></div>
133    </div>
134  </div>
135
136  <!-- bucket insights sidebar -->
137  <div class="insights-sidebar width-3 resp-hide-sml">
138    <div class="insights-sidebar-body">
139      <div class="row">
140        <h4>Bucket Insights</h4>
141        <span>
142          <a title="Refresh bucket insights"
143             ng-click="qc.updateBuckets()"
144             class="margin-right-half"
145             ng-disabled="qc.qqs.loadingBuckets">
146            <span ng-if="qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
147            <span ng-if="!qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
148          </a>
149          <a title="expand or contract sidebar" ng-click="qc.toggleAnalysisSize()">
150            <span ng-if="!qc.analysisExpanded" class="icon fa-expand"></span>
151            <span ng-if="qc.analysisExpanded" class="icon fa-compress"></span>
152          </a>
153        </span>
154      </div>
155
156      <div mn-spinner="qc.qqs.loadingBuckets">
157        <div ng-if="qc.qqs.bucket_errors">
158          <br>
159          <p style="white-space:pre-wrap;">{{qc.qqs.bucket_errors}}
160          </p>
161        </div>
162        <div ng-if="!qc.qqs.bucket_errors">
163          <section>
164            <div class="row">
165              <h5 title="Available bucket connections">{{qc.analysisFirstSection}}</h5>
166            </div>
167            <span class="text-small" ng-repeat="bucket in qc.buckets">
168              <ul>
169                <ul>
170                  {{bucket.cbBucketName}}
171                  <span ng-if="bucket.connected" title="connected" class="icon fa-link fa-rotate-90" style="cursor:auto;"></span>
172                  <span ng-if="!bucket.connected" title="disconnected" class="icon fa-unlink fa-rotate-90" style="cursor:auto;"></span>
173                  <span ng-if="bucket.cbBucketName != bucket.id">{{bucket.id}}</span>
174                  <span ng-repeat="shadow in qc.shadows">
175                    <div ng-if="shadow.bucketName == bucket.id">
176                      <!-- only show shadow name if not filtered -->
177                      <ul ng-if="!shadow.filter" class="text-small">{{shadow.id}}</ul>
178                      <!-- show expandable shadow details if filtered -->
179                      <ul ng-if="shadow.filter">
180                        <a href="" ng-click="changeExpandShadow(shadow)" style="color: black" class="text-small">
181                          {{shadow.id}}
182                          <span class="icon fa-info-circle" style="color: #4287d6;" ng-hide="shadow.expanded"></span>
183                          <span class="icon fa-info-circle" style="color: gray;" ng-show="shadow.expanded"></span>
184                        </a>
185                        <ul class="text-small" ng-if="shadow.expanded">
186                          <ul>
187                            <span title="Filter" class="icon fa-filter" style="cursor:auto"></span> {{shadow.filter}}
188                          </ul>
189                        </ul>
190                      </ul>
191                    </div>
192                  </span>
193                </ul>
194              </ul>
195            </span>
196          </section>
197
198          <section>
199            <div class="row">
200              <h5 title="Cluster bucket with no connections">{{qc.analysisSecondSection}}</h5>
201            </div>
202            <span class="text-small" ng-repeat="bucket in qc.bucketsWithNoConnection">
203          <ul>
204            <ul>
205              {{bucket}}
206            </ul>
207          </ul>
208          </span>
209          </section>
210        </div>
211      </div>
212    </div>
213  </div>
214</div>
215