xref: /5.5.2/cbas-ui/cbas-ui/cbas.html (revision ae3a8e21)
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.executingQuery.busy">
75            <span ng-if="qc.lastResult.elapsedTime"> | elapsed: {{qc.lastResult.elapsedTime}} | </span>
76            <span ng-if="qc.lastResult.executionTime">execution: {{qc.lastResult.executionTime}} | </span>
77            <span ng-if="qc.lastResult.resultCount">count: {{qc.lastResult.resultCount}} | </span>
78            <span ng-if="qc.lastResult.resultSize">size: {{qc.lastResult.resultSize}} | </span>
79            <span ng-if="qc.lastResult.processedObjects == 0 || qc.lastResult.processedObjects">processed objects: {{qc.lastResult.processedObjects}}</span>
80          </span>
81        </div>
82
83<!-- run-time preferences -->
84        <a ng-if="qc.showOptions" ng-click="qc.options()"  class="row resp-hide-xsml">
85          <span class="icon fa-cog margin-right"></span>
86          <span class="text-smaller">preferences</span>
87        </a>
88      </div>
89    </div>
90
91    <!-- query results -->
92    <div class="wb-results-header">
93      <h4>Analytics Query Results</h4>
94      <span class="pills">
95        <a ng-click="qc.selectTab(1)"
96           ng-class="{selected: qc.isSelected(1)}">JSON</a>
97        <a ng-click="qc.selectTab(2)"
98           ng-class="{selected: qc.isSelected(2)}">Table</a>
99        <a ng-click="qc.selectTab(3)"
100           ng-class="{selected: qc.isSelected(3)}">Tree</a>
101        <!-- Temporary Hide Plan Tab  -->
102        <a ng-click="qc.selectTab(4)" ng-if="qc.isEnterprise && false"
103           ng-class="{selected: qc.isSelected(4)}">Plan</a>
104        <a ng-click="qc.selectTab(5)"
105           ng-class="{selected: qc.isSelected(5)}">Plan Text</a>
106      </span>
107    </div>
108
109    <div class="wb-results-wrapper">
110      <div class="wb-results-show-anyway" ng-if="!qc.showBigDatasets && qc.dataTooBig()">
111        <div ng-bind-html="qc.getBigDataMessage()"></div>
112        <a ng-click="qc.setShowBigData(true)" class="text-medium link-heavy">Show anyway <span class="icon fa-angle-right"></span></a>
113      </div>
114      <div class="wb-results-json" ui-ace="qc.aceOutputOptions"
115           ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
116           ng-model="qc.lastResult.result"></div>
117
118      <div class="wb-results-table"
119           ng-if="qc.isSelected(2) && (!qc.dataTooBig() || qc.showBigDatasets)"
120           qw-json-data-table="qc.lastResult.data"></div>
121
122      <div class="wb-results-tree"
123           ng-if="qc.isSelected(3) && (!qc.dataTooBig() || qc.showBigDatasets)"
124           qw-json-tree="qc.lastResult.data"></div>
125
126<!--      <div class="wb-results-explain"
127           ng-if="qc.isSelected(4)"
128           qw-explain-viz="qc.lastResult.explainResult"></div>  -->
129
130      <div class="wb-results-explain-text"
131           ng-if="qc.isSelected(5)"
132           ui-ace="qc.acePlanOptions"
133           ng-model="qc.lastResult.explainResultText"></div>
134    </div>
135  </div>
136
137  <!-- bucket insights sidebar -->
138  <div class="insights-sidebar width-3 resp-hide-sml">
139    <div class="insights-sidebar-body">
140      <div class="row">
141        <h4>Bucket Insights</h4>
142        <span>
143          <a title="Refresh bucket insights"
144             ng-click="qc.updateBuckets()"
145             class="margin-right-half"
146             ng-disabled="qc.qqs.loadingBuckets">
147            <span ng-if="qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
148            <span ng-if="!qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
149          </a>
150          <a title="expand or contract sidebar" ng-click="qc.toggleAnalysisSize()">
151            <span ng-if="!qc.analysisExpanded" class="icon fa-expand"></span>
152            <span ng-if="qc.analysisExpanded" class="icon fa-compress"></span>
153          </a>
154        </span>
155      </div>
156
157      <div mn-spinner="qc.qqs.loadingBuckets">
158        <div ng-if="qc.qqs.bucket_errors">
159          <br>
160          <p style="white-space:pre-wrap;">{{qc.qqs.bucket_errors}}
161          </p>
162        </div>
163        <div ng-if="!qc.qqs.bucket_errors">
164          <section>
165            <div class="row">
166              <h5 title="Available bucket connections">{{qc.analysisFirstSection}}</h5>
167            </div>
168            <span class="text-small" ng-repeat="bucket in qc.buckets">
169              <ul>
170                <ul>
171                  {{bucket.cbBucketName}}
172                  <span ng-if="bucket.connected" title="connected" class="icon fa-link fa-rotate-90" style="cursor:auto;"></span>
173                  <span ng-if="!bucket.connected" title="disconnected" class="icon fa-unlink fa-rotate-90" style="cursor:auto;"></span>
174                  <span ng-if="bucket.cbBucketName != bucket.id">{{bucket.id}}</span>
175                  <span ng-repeat="shadow in qc.shadows">
176                    <div ng-if="shadow.bucketName == bucket.id">
177                      <!-- only show shadow name if not expandable -->
178                      <ul ng-if="!shadow.expandable" class="text-small">{{shadow.id}}</ul>
179                      <!-- show expandable shadow details if expandable -->
180                      <ul ng-if="shadow.expandable">
181                        <a href="" ng-click="changeExpandShadow(shadow)" style="color: black" class="text-small">
182                          {{shadow.id}}
183                          <span class="icon fa-info-circle" style="color: #4287d6;" ng-hide="shadow.expanded"></span>
184                          <span class="icon fa-info-circle" style="color: gray;" ng-show="shadow.expanded"></span>
185                        </a>
186                        <ul class="text-small" ng-if="shadow.expanded && shadow.filter">
187                          <ul>
188                            <span title="Filter" class="icon fa-filter" style="cursor:auto"></span> {{shadow.filter}}
189                          </ul>
190                        </ul>
191                      </ul>
192                      <ul ng-if="shadow.expanded && shadow.indexes" class="text-small">
193                        <ul>
194                          <ul ng-repeat="idx in shadow.indexes">
195                            <span title="Index" class="icon fa-caret-up fa-lg" style="cursor:auto"></span> {{idx.IndexName}}
196                            <ul ng-repeat="key in idx.keys">
197                              <ul>
198                                <span title="Key" class="icon fa-map-pin" style="cursor:auto"></span> {{key}}
199                              </ul>
200                            </ul>
201                          </ul>
202                        </ul>
203                      </ul>
204                    </div>
205                  </span>
206                </ul>
207              </ul>
208            </span>
209          </section>
210
211          <section>
212            <div class="row">
213              <h5 title="Cluster bucket with no connections">{{qc.analysisSecondSection}}</h5>
214            </div>
215            <span class="text-small" ng-repeat="bucket in qc.bucketsWithNoConnection">
216          <ul>
217            <ul>
218              {{bucket}}
219            </ul>
220          </ul>
221          </span>
222          </section>
223        </div>
224      </div>
225    </div>
226  </div>
227</div>
228