xref: /5.5.2/cbas-ui/cbas-ui/cbas.html (revision f645b600)
1<div id="currentUI"
2     ng-show="qc.validated.valid()"
3     class="row items-top">
4
5  <mn-element-cargo depot="actions" ng-if="qc.validated.valid()">
6    <div class="header-controls">
7      <input type="file" id="loadQuery" name="files" style="display:none" accept="text/plain">
8      <a href=""
9         ng-if="qc.fileSupport"
10         id="loadQueryButton"
11         ng-click="qc.load_query()"
12         class="outline"
13         onchange="console.log('changed files')">IMPORT</a>
14      <a href="" ng-click="qc.unified_save()">EXPORT</a>
15    </div>
16  </mn-element-cargo>
17
18  <!-- wrapper for query editor and results -->
19  <div mn-spinner="queryInProgress" id="query_wrapper" class="width-9">
20    <!-- query_box is the query editor -->
21    <div id="query_box">
22      <!-- Editor "header row" -->
23      <div id="query_header" class="row">
24
25        <h4>Analytics Query Editor</h4>
26        <div class="query-history-controls">
27          <button
28                  title="View previous queries/results" ng-click="qc.prev()"
29                  qw-long-press="qc.historyMenu"
30                  class="outline btn-small"
31                  ng-disabled="!qc.hasPrev()">
32            &larr;
33          </button>
34          <span class="query-history-controls-inner">
35            <a class="link-heavy text-small" ng-click="qc.historyMenu()">history</a>
36            <small>({{qc.getCurrentIndex()}})</small>
37          </span>
38          <button
39                  title="View subsequent queries/results"
40                  ng-click="qc.next()"
41                  qw-long-press="qc.historyMenu"
42                  class="outline btn-small"
43                  ng-disabled="!qc.hasNext()">
44            &rarr;
45          </button>
46        </div>
47      </div>
48      <!-- Ace editor -->
49      <div id="query_editor" ui-ace="qc.aceInputOptions"
50           ng-disabled="qc.executingQuery.busy"
51           ng-model="qc.lastResult.query">{{qc.renderPage()}}
52      </div>
53
54    </div>
55
56    <!-- wrapper under query editor for button and stats -->
57    <div id="query_footer" class="row">
58      <span class="nowrap">
59        <button ng-click="qc.query()" class="qw-button-exec">
60          <div ng-if="!qc.executingQuery.busy">Execute</div>
61          <div ng-if="qc.executingQuery.busy" class="icon-button">Cancel <span
62                  class="icon fa-spinner fa-spin fa-pulse"></span></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 id="result_summary" ng-hide="qc.lastResult.hide" class="text-smaller">
72        <span
73                ng-class="{success: qc.status_success(), error: qc.status_fail()}"
74                class="semi-bold">
75          {{qc.lastResult.status}}</span>
76        <span> | elapsed: {{qc.lastResult.elapsedTime}} | </span>
77        <span>execution: {{qc.lastResult.executionTime}} | </span>
78        <span ng-if="qc.lastResult.mutationCount">mutations: {{qc.lastResult.mutationCount}} | </span>
79        <span ng-if="!qc.lastResult.mutationCount">count: {{qc.lastResult.resultCount}} | </span>
80        <span>size: {{qc.lastResult.resultSize}} | </span>
81        <span>processed objects: {{qc.lastResult.processedObjects}}</span>
82      </div>
83
84      <a href="" ng-if="qc.showOptions" ng-click="qc.options()" class="row">
85        <span class="icon fa-cog margin-right"></span>
86        <span class="text-smaller">Preferences</span>
87      </a>
88    </div>
89
90    <!-- query results -->
91    <div id="result_header" class="row">
92      <h4>Analytics Query Results</h4>
93      <span class="pills">
94        <a ng-click="qc.selectTab(1)"
95           ng-class="{selected: qc.isSelected(1)}">JSON</a>
96        <a ng-click="qc.selectTab(2)"
97           ng-class="{selected: qc.isSelected(2)}">Table</a>
98        <a ng-click="qc.selectTab(3)"
99           ng-class="{selected: qc.isSelected(3)}">Tree</a>
100        <!-- Temporary Hide Plan Tab  -->
101        <a ng-click="qc.selectTab(4)" ng-if="qc.isEnterprise && false"
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 id="result_box">
109      <div id="show_anyway" ng-if="!qc.showBigDatasets && qc.dataTooBig()">
110        <div ng-bind-html="qc.getBigDataMessage()"></div>
111        <a href="" ng-click="qc.setShowBigData(true)" class="text-medium link-heavy">Show anyway <span
112                class="icon fa-angle-right"></span></a>
113      </div>
114      <div id="result_editor" ui-ace="qc.aceOutputOptions"
115           ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
116           ng-model="qc.lastResult.result"></div>
117      <div id="result_table"
118           ng-if="qc.isSelected(2) && (!qc.dataTooBig() || qc.showBigDatasets)"
119           qw-json-data-table="qc.lastResult.data"></div>
120      <div id="result_tree"
121           ng-if="qc.isSelected(3) && (!qc.dataTooBig() || qc.showBigDatasets)"
122           qw-json-tree="qc.lastResult.data"></div>
123      <div id="query_plan" ng-if="qc.isSelected(4)"
124           qw-explain-viz="qc.lastResult.explainResult"></div>
125      <div id="query_plan_text" ng-if="qc.isSelected(5)"
126           ui-ace="qc.acePlanOptions"
127           ng-model="qc.lastResult.explainResultText"></div>
128    </div>
129  </div>
130
131  <!-- bucket insights sidebar -->
132  <div ng-if="true" id="metadata" class="width-3">
133    <!-- title + icons -->
134    <div class="row">
135      <h4>Bucket Insights</h4>
136      <span>
137          <a title="Refresh bucket insights"
138             ng-click="qc.updateBuckets()"
139             class="margin-right-half"
140             ng-disabled="qc.qqs.loadingBuckets">
141            <span ng-if="qc.qqs.loadingBuckets" class="icon fa-refresh" style="color: gray"></span>
142            <span ng-if="!qc.qqs.loadingBuckets" class="icon fa-refresh"></span>
143        </a>
144        <a title="expand or contract sidebar" ng-click="qc.toggleAnalysisSize()">
145            <span ng-if="!qc.analysisExpanded" class="icon fa-expand"></span>
146            <span ng-if="qc.analysisExpanded" class="icon fa-compress"></span>
147          </a>
148        </span>
149    </div>
150    <!-- details -->
151    <div mn-spinner="qc.qqs.loadingBuckets">
152      <div ng-if="qc.qqs.bucket_errors">
153        <br>
154        <p style="white-space:pre-wrap;">{{qc.qqs.bucket_errors}}
155        </p>
156      </div>
157      <div ng-if="!qc.qqs.bucket_errors" id="sidebar_body">
158        <section>
159          <div class="row">
160            <h5 title="Available bucket connections">{{qc.analysisFirstSection}}</h5>
161          </div>
162          <span class="text-small" ng-repeat="bucket in qc.buckets">
163        <ul>
164          <ul>
165            {{bucket.cbBucketName}}
166            <span ng-if="bucket.connected" title="connected" class="icon fa-link fa-rotate-90"
167                  style="cursor:auto;"></span>
168        <span ng-if="!bucket.connected" title="disconnected" class="icon fa-unlink fa-rotate-90"
169              style="cursor:auto;"></span>
170        <span ng-if="bucket.cbBucketName != bucket.id">{{bucket.id}}</span>
171        <span ng-repeat="shadow in qc.shadows">
172          <div ng-if="shadow.bucketName == bucket.id">
173           <a href="" ng-click="changeExpandShadow(shadow)" class="text-small">
174        <span class="icon fa-caret-down fa-fw" ng-show="shadow.expanded"></span>
175        <span class="icon fa-caret-right fa-fw" ng-hide="shadow.expanded"></span> {{shadow.id}}
176        </a>
177        <ul class="text-small" ng-if="shadow.expanded">
178          <ul ng-if="shadow.filter">
179            <span title="Filter" class="icon fa-filter" style="cursor:auto"></span> {{shadow.filter}}
180          </ul>
181        </ul>
182        </div>
183        </span>
184        </ul>
185        </ul>
186        </span>
187        </section>
188
189        <section>
190          <div class="row">
191            <h5 title="Cluster bucket with no connections">{{qc.analysisSecondSection}}</h5>
192          </div>
193          <span class="text-small" ng-repeat="bucket in qc.bucketsWithNoConnection">
194        <ul>
195          <ul>
196            {{bucket}}
197          </ul>
198        </ul>
199        </span>
200        </section>
201      </div>
202    </div>
203  </div>
204</div>
205