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