xref: /6.0.3/cbas-ui/cbas-ui/cbas.html (revision 2a2fdae7)
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        <a ng-click="qc.selectTab(4)" ng-if="qc.isEnterprise"
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" ng-if="qc.isSelected(4)"
126           qw-explain-viz-d3="qc.lastResult.explainResult"></div>
127
128      <div class="wb-results-explain-text"
129           ng-if="qc.isSelected(5)"
130           ui-ace="qc.acePlanOptions"
131           ng-model="qc.lastResult.explainResultText"></div>
132    </div>
133  </div>
134
135<!-- datasets  sidebar -->
136  <div class="insights-sidebar width-3 resp-hide-sml">
137    <div class="insights-sidebar-body">
138      <div class="row">
139        <h4>Datasets</h4>
140        <span>
141          <a title="Refresh dataset insights"
142             ng-click="qc.updateBuckets()"
143             class="margin-right-half"
144             ng-disabled="qc.qqs.loadingBuckets">
145            <span ng-if="qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
146            <span ng-if="!qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
147          </a>
148          <a title="expand or contract sidebar" ng-click="qc.toggleAnalysisSize()">
149            <span ng-if="!qc.analysisExpanded" class="icon fa-expand"></span>
150            <span ng-if="qc.analysisExpanded" class="icon fa-compress"></span>
151          </a>
152        </span>
153      </div>
154
155      <div mn-spinner="qc.qqs.loadingBuckets">
156        <div ng-if="qc.qqs.bucket_errors">
157          <br>
158          <p style="white-space:pre-wrap;" class="text-small">{{qc.qqs.bucket_errors}}
159          </p>
160        </div>
161        <div ng-if="!qc.qqs.bucket_errors">
162          <section>
163            <span class="text-small" ng-repeat="dataverse in qc.dataverses">
164              <h5 style="line-height:1.4">Dataverse:</h5>
165              <div class="text-small margin-bottom-half indent-1">{{dataverse.DataverseName}}</div>
166              <div ng-show="dataverse.links.length > 0">
167                <h5 style="line-height:1.4">Links:</h5>
168                <span ng-repeat="link in dataverse.links">
169                  <div class="text-small margin-bottom-half indent-1">{{link.Name}}</div>
170                </span>
171              </div>
172              <span ng-repeat="shadow in qc.shadows">
173                <div ng-if="shadow.DataverseName === dataverse.DataverseName" ng-init="shadow.expanded = false">
174                  <span class="row margin-bottom-0">
175                    <span ng-click="changeExpandShadow(shadow)" class="cursor-pointer">
176                      <span
177                         class="icon fa-caret-down fa-fw"
178                         ng-class="{'fa-caret-right': !shadow.expanded}"></span>
179                      {{shadow.id}}
180                      <span
181                         ng-show="shadow.remaining === qc.datasetDisconnectedState"
182                         title="disconnected"
183                         class="icon fa-unlink"
184                         style="color: #e07f82">
185                      </span>
186                      <span
187                         ng-show="shadow.remaining > 0 || shadow.remaining == 0"
188                         title="connected"
189                         class="icon fa-link">
190                      </span>
191                    </span>
192                    <span
193                       ng-show="shadow.remaining > 0"
194                       title="Remaining mutations: {{shadow.remaining}}"
195                       class="text-smaller">
196                      {{shadow.remaining}}
197                    </span>
198                  </span>
199                  <div class="text-smaller margin-bottom-half indent-1" ng-show="shadow.expanded">
200                    <h5 style="line-height:1.4">Bucket</h5>
201                    {{shadow.bucketName}} <span ng-show="shadow.filter">|</span> {{shadow.filter}}
202                    <h5 style="line-height:1.4">Link</h5>
203                    {{shadow.LinkName}}
204                    <h5 style="line-height:1.4" ng-show="shadow.indexes.length > 0" class="margin-top-half">
205                      Index<span ng-show="shadow.indexes.length > 1">es</span>
206                    </h5>
207                    <span ng-repeat="idx in shadow.indexes">
208                      {{idx.IndexName}} <span ng-repeat="key in idx.keys">({{key}})</span><br>
209                    </span>
210                  </div>
211                </div>
212              </span>
213            </span>
214          </section>
215
216          <section>
217            <h5>Couchbase Buckets</h5>
218            <span class="text-small indent-1" ng-repeat="bucket in qc.clusterBuckets">
219              {{bucket}}<br>
220            </span>
221          </section>
222        </div>
223      </div>
224    </div>
225  </div>
226</div>
227