xref: /6.0.3/cbas-ui/cbas-ui/cbas.html (revision bb1cab45)
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
94        <a
95           ng-click="qc.copyResultAsCSV()"
96           class="margin-left-half"
97           title="Copy results in tabular format">
98          <span class="icon fa-copy"></span>
99        </a>
100      </h4>
101      <span class="pills">
102        <a ng-click="qc.selectTab(1)"
103           ng-class="{selected: qc.isSelected(1)}">JSON</a>
104        <a ng-click="qc.selectTab(2)"
105           ng-class="{selected: qc.isSelected(2)}">Table</a>
106        <a ng-click="qc.selectTab(3)"
107           ng-class="{selected: qc.isSelected(3)}">Tree</a>
108        <a ng-click="qc.selectTab(4)" ng-if="qc.isEnterprise"
109           ng-class="{selected: qc.isSelected(4)}">Plan</a>
110        <a ng-click="qc.selectTab(5)"
111           ng-class="{selected: qc.isSelected(5)}">Plan Text</a>
112      </span>
113    </div>
114
115    <div class="wb-results-wrapper">
116      <div class="wb-results-show-anyway" ng-if="!qc.showBigDatasets && qc.dataTooBig()">
117        <div ng-bind-html="qc.getBigDataMessage()"></div>
118        <a ng-click="qc.setShowBigData(true)" class="text-medium link-heavy">Show anyway <span class="icon fa-angle-right"></span></a>
119      </div>
120      <div class="wb-results-json" ui-ace="qc.aceOutputOptions"
121           ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
122           ng-model="qc.lastResult.result"></div>
123
124      <div class="wb-results-table"
125           ng-if="qc.isSelected(2) && (!qc.dataTooBig() || qc.showBigDatasets)"
126           qw-json-data-table="qc.lastResult.data"></div>
127
128      <div class="wb-results-tree"
129           ng-if="qc.isSelected(3) && (!qc.dataTooBig() || qc.showBigDatasets)"
130           qw-json-tree="qc.lastResult.data"></div>
131
132      <div class="wb-results-explain" ng-if="qc.isSelected(4)"
133           qw-explain-viz-d3="qc.lastResult.explainResult"></div>
134
135      <div class="wb-results-explain-text"
136           ng-if="qc.isSelected(5)"
137           ui-ace="qc.acePlanOptions"
138           ng-model="qc.lastResult.explainResultText"></div>
139    </div>
140  </div>
141
142<!-- datasets  sidebar -->
143  <div class="insights-sidebar width-3 resp-hide-sml">
144    <div class="insights-sidebar-body">
145      <div class="row">
146        <h4>Datasets</h4>
147        <span>
148          <a title="Refresh dataset insights"
149             ng-click="qc.updateBuckets()"
150             class="margin-right-half"
151             ng-disabled="qc.qqs.loadingBuckets">
152            <span ng-if="qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
153            <span ng-if="!qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
154          </a>
155          <a title="expand or contract sidebar" ng-click="qc.toggleAnalysisSize()">
156            <span ng-if="!qc.analysisExpanded" class="icon fa-expand"></span>
157            <span ng-if="qc.analysisExpanded" class="icon fa-compress"></span>
158          </a>
159        </span>
160      </div>
161
162      <div mn-spinner="qc.qqs.loadingBuckets">
163        <div ng-if="qc.qqs.bucket_errors">
164          <br>
165          <p style="white-space:pre-wrap;" class="text-small">{{qc.qqs.bucket_errors}}
166          </p>
167        </div>
168        <div ng-if="!qc.qqs.bucket_errors">
169          <section class="text-small" ng-repeat="dataverse in qc.dataverses">
170            <p class="margin-bottom-0">Dataverse: {{dataverse.DataverseName}}</p>
171       <!-- <div ng-show="dataverse.links.length > 0">
172              <h5 style="line-height:1.4">Links:</h5>
173              <span ng-repeat="link in dataverse.links">
174                <div class="text-small margin-bottom-half indent-1">{{link.Name}}</div>
175              </span>
176            </div> -->
177            <span ng-repeat="shadow in qc.shadows">
178              <div ng-if="shadow.DataverseName === dataverse.DataverseName" ng-init="shadow.expanded = false">
179                <span class="row margin-bottom-0">
180                  <span ng-click="changeExpandShadow(shadow)" class="cursor-pointer">
181                    <span
182                       class="icon fa-caret-down fa-fw"
183                       ng-class="{'fa-caret-right': !shadow.expanded}"></span>
184                    <strong>{{shadow.id}}</strong>
185                  </span>
186                  <span
187                     ng-show="shadow.remaining === qc.datasetDisconnectedState"
188                     title="disconnected"
189                     class="icon fa-unlink"
190                     style="color: #e07f82">
191                  </span>
192                  <span
193                     ng-show="shadow.remaining > 0 || shadow.remaining == 0"
194                     title="connected"
195                     class="icon fa-link">
196                  </span>
197                </span>
198
199                <div class="margin-bottom-half padding-left-half" ng-show="shadow.expanded">
200                  <p class="margin-bottom-half">Bucket:<br>
201                    {{shadow.LinkName}}.{{shadow.bucketName}} <span ng-show="shadow.filter">|</span> {{shadow.filter}}
202                  </p>
203                  <p
204                     class="margin-bottom-half"
205                     ng-show="shadow.indexes.length > 0">
206                    Index<span ng-show="shadow.indexes.length > 1">es</span>:<br>
207                    <span ng-repeat="idx in shadow.indexes">
208                      {{idx.IndexName}} <span ng-repeat="key in idx.keys">({{key}})<br></span>
209                    </span>
210                  </p>
211                </div>
212                <div
213                   class="margin-bottom-1 padding-left-half"
214                   ng-show="shadow.remaining > 0">
215                  <em class="text-smaller">
216                    remaining mutations: {{shadow.remaining}}
217                  </em>
218                </div>
219              </div>
220            </span>
221
222            <span
223               ng-show="shadow.remaining === qc.datasetDisconnectedState"
224               title="disconnected"
225               class="icon fa-unlink"
226               style="color: #e07f82">
227            </span>
228            <span
229               ng-show="shadow.remaining > 0 || shadow.remaining == 0"
230               title="connected"
231               class="icon fa-link">
232            </span>
233
234          </section>
235
236          <section>
237            <h5>Couchbase Buckets</h5>
238            <span class="text-small indent-1" ng-repeat="bucket in qc.clusterBuckets">
239              {{bucket}}<br>
240            </span>
241          </section>
242        </div>
243      </div>
244    </div>
245  </div>
246</div>
247