xref: /6.0.3/cbas-ui/cbas-ui/cbas.html (revision 1a7b11f7)
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        <a ng-click="qc.selectTab(4)" ng-if="qc.isEnterprise"
105           ng-class="{selected: qc.isSelected(4)}">Plan</a>
106        <a ng-click="qc.selectTab(5)"
107           ng-class="{selected: qc.isSelected(5)}">Plan Text</a>
108      </span>
109    </div>
110
111    <div class="wb-results-wrapper">
112      <div class="wb-results-show-anyway" ng-if="!qc.showBigDatasets && qc.dataTooBig()">
113        <div ng-bind-html="qc.getBigDataMessage()"></div>
114        <a ng-click="qc.setShowBigData(true)" class="text-medium link-heavy">Show anyway <span class="icon fa-angle-right"></span></a>
115      </div>
116      <div class="wb-results-json" ui-ace="qc.aceOutputOptions"
117           ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
118           ng-model="qc.lastResult.result"></div>
119
120      <div class="wb-results-table"
121           ng-if="qc.isSelected(2) && (!qc.dataTooBig() || qc.showBigDatasets)"
122           qw-json-data-table="qc.lastResult.data"></div>
123
124      <div class="wb-results-tree"
125           ng-if="qc.isSelected(3) && (!qc.dataTooBig() || qc.showBigDatasets)"
126           qw-json-tree="qc.lastResult.data"></div>
127
128      <div class="wb-results-explain" ng-if="qc.isSelected(4)"
129           qw-explain-viz-d3="qc.lastResult.explainResult"></div>
130
131      <div class="wb-results-explain-text"
132           ng-if="qc.isSelected(5)"
133           ui-ace="qc.acePlanOptions"
134           ng-model="qc.lastResult.explainResultText"></div>
135    </div>
136  </div>
137
138  <!-- dataset insights sidebar -->
139  <div class="insights-sidebar width-3 resp-hide-sml">
140    <div class="insights-sidebar-body">
141      <div class="row">
142        <h4>Dataset Insights</h4>
143        <span>
144          <a title="Refresh dataset insights"
145             ng-click="qc.updateBuckets()"
146             class="margin-right-half"
147             ng-disabled="qc.qqs.loadingBuckets">
148            <span ng-if="qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
149            <span ng-if="!qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
150          </a>
151          <a title="expand or contract sidebar" ng-click="qc.toggleAnalysisSize()">
152            <span ng-if="!qc.analysisExpanded" class="icon fa-expand"></span>
153            <span ng-if="qc.analysisExpanded" class="icon fa-compress"></span>
154          </a>
155        </span>
156      </div>
157
158      <div mn-spinner="qc.qqs.loadingBuckets">
159        <div ng-if="qc.qqs.bucket_errors">
160          <br>
161          <p style="white-space:pre-wrap;">{{qc.qqs.bucket_errors}}
162          </p>
163        </div>
164        <div ng-if="!qc.qqs.bucket_errors">
165          <section>
166            <div class="row">
167              <h5 title="Available bucket connections">{{qc.analysisFirstSection}}</h5>
168            </div>
169            <span class="text-small" ng-repeat="bucket in qc.buckets">
170              <ul>
171                  <span ng-repeat="shadow in qc.shadows">
172                    <div ng-if="shadow.bucketName == bucket.id">
173                      <ul>
174                        <span> {{shadow.id}}
175                        <a href="" ng-click="changeExpandShadow(shadow)" style="color: black" class="text-small">
176                          <span class="icon fa-info-circle" style="color: #4287d6;" ng-hide="shadow.expanded"></span>
177                          <span class="icon fa-info-circle" style="color: gray;" ng-show="shadow.expanded"></span>
178                        </a>
179                          <span ng-show="shadow.remaining == 0" title="Remaining mutations: {{shadow.remaining}}" class="icon fa-random" style="color: green;"></span>
180                          <span ng-show="shadow.remaining > 0" title="Remaining mutations: {{shadow.remaining}}" class="icon fa-random" style="color: orange;"></span>
181                          <span ng-show="shadow.remaining < 0" title="Disconnected" class="icon fa-random" style="color: gray;"></span>
182                        </span>
183                        <ul class="text-small" ng-if="shadow.expanded">
184                          <ul>
185                            <span title="Bucket" class="icon fa-database" style="cursor:auto"></span> {{shadow.bucketName}}
186                          </ul>
187                          <ul>
188                            <span ng-if="shadow.filter" 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            </span>
208          </section>
209
210          <section>
211            <div class="row">
212              <h5 title="Cluster buckets">{{qc.analysisSecondSection}}</h5>
213            </div>
214            <span class="text-small" ng-repeat="bucket in qc.clusterBuckets">
215          <ul>
216            <ul>
217              <span title="Bucket" class="icon fa-database" style="cursor:auto"></span> {{bucket}}
218            </ul>
219          </ul>
220          </span>
221          </section>
222        </div>
223      </div>
224    </div>
225  </div>
226</div>
227