1<div
2   ng-controller="qwQueryMonitorController as qmc"
3   ng-show="qmc.validated.valid()">
4
5  <div class="row margin-bottom-half">
6<!-- top row w/ title/time/pill selectors -->
7    <div class="row">
8      <h4 class="inline">
9        <span ng-if="qmc.isSelected(1)">Slowest Active Queries</span>
10        <span ng-if="qmc.isSelected(2)">Slowest Completed Queries</span>
11        <span ng-if="qmc.isSelected(3)">Slowest Prepared Queries</span>
12        <small>
13          {{qmc.updatedTime()}}
14          <span ng-if="qmc.get_update_flag()" class="loading"></span>
15          <span ng-if="!qmc.get_update_flag()" class="loading-placeholder"></span>
16        </small>
17      </h4>
18      <button class="outline tight icon-small indent-1"
19        ng-click="qmc.toggle_update()">
20        <span ng-if="qmc.get_update_flag()" class="icon fa-pause"></span>
21        <span ng-if="!qmc.get_update_flag()" class="icon fa-play"></span>
22        &nbsp;{{qmc.get_toggle_label()}}
23      </button>
24    </div>
25
26    <div class="pills text-right">
27      <a ng-click="qmc.selectTab(1)" ng-class="{selected: qmc.isSelected(1)}">Active</a>
28      <a ng-click="qmc.selectTab(2)" ng-class="{selected: qmc.isSelected(2)}">Completed</a>
29      <a ng-click="qmc.selectTab(3)" ng-class="{selected: qmc.isSelected(3)}">Prepared</a>
30    </div>
31  </div>
32
33<!--  Insufficient permissions ************************************  -->
34  <div id="not_permitted" ng-if="!qc.validated.monitoringAllowed()">
35    Insufficient permissions to perform query monitoring.
36  </div>
37
38  <div id="monitoring_tables" ng-if="qc.validated.monitoringAllowed()">
39
40<!-- ACTIVE QUERIES TABLE  ************************************  -->
41    <div class="qm-table-active cbui-table" ng-if="qmc.isSelected(1)">
42      <!-- table wrapper -->
43      <div class="cbui-table-header padding-left">
44        <!-- table header row, no <section> wrapper -->
45        <span class="cbui-table-cell flex-grow-3" ng-click="qmc.update_active_sort('statement')">query
46          <span ng-if="qmc.show_up_caret_active('statement')" class="icon fa-caret-up"></span>
47          <span ng-if="qmc.show_down_caret_active('statement')" class="icon fa-caret-down"></span>
48        </span> <span class="cbui-table-cell" ng-click="qmc.update_active_sort('node')">node
49          <span ng-if="qmc.show_up_caret_active('node')" class="icon fa-caret-up"></span>
50          <span ng-if="qmc.show_down_caret_active('node')" class="icon fa-caret-down"></span>
51        </span>
52        <span class="cbui-table-cell" ng-click="qmc.update_active_sort('elapsedTime')">duration
53          <span ng-if="qmc.show_up_caret_active('elapsedTime')" class="icon fa-caret-up"></span>
54          <span ng-if="qmc.show_down_caret_active('elapsedTime')" class="icon fa-caret-down"></span>
55        </span> <span class="cbui-table-cell flex-grow-2" ng-click="qmc.update_active_sort('requestId')">request ID
56          <span ng-if="qmc.show_up_caret_active('requestId')" class="icon fa-caret-up"></span>
57          <span ng-if="qmc.show_down_caret_active('requestId')" class="icon fa-caret-down"></span>
58        </span>
59        <span class="cbui-table-cell" ng-click="qmc.update_active_sort('state')">state
60          <span ng-if="qmc.show_up_caret_active('state')" class="icon fa-caret-up"></span>
61          <span ng-if="qmc.show_down_caret_active('state')" class="icon fa-caret-down"></span>
62        </span>
63        <span class="cbui-table-cell" ng-click="qmc.update_active_sort('users')">user
64          <span ng-if="qmc.show_up_caret_active('users')" class="icon fa-caret-up"></span>
65          <span ng-if="qmc.show_down_caret_active('users')" class="icon fa-caret-down"></span>
66        </span> <span class="cbui-table-cell flex-grow-1-5"></span>
67      </div>
68
69      <section
70        ng-repeat="result in qmc.monitoring.active_requests | orderBy:qmc.active_sort_by:qmc.active_sort_reverse">
71        <div class="cbui-tablerow padding-left">
72          <span
73             class="cbui-table-cell flex-grow-3 cursor-pointer"
74             uib-tooltip="{{result.statement}}"
75             tooltip-placement="top"
76             tooltip-append-to-body="true"
77             tooltip-class="break-word">
78            {{result.statement}}
79          </span>
80          <span class="cbui-table-cell">
81            {{result.node}}
82          </span>
83          <span class="cbui-table-cell">
84            {{result.elapsedTime}}
85          </span>
86          <span class="cbui-table-cell flex-grow-2 wrap">
87            {{result.requestId}}
88          </span>
89          <span class="cbui-table-cell">
90            {{result.state}}
91          </span>
92          <span class="cbui-table-cell">
93            {{result.users}}
94          </span>
95          <span class="cbui-table-cell flex-grow-1-5 wrap text-right">
96            <a ui-sref="app.admin.query.workbench({query: result.statement})" class="nowrap">
97              Edit
98            </a>
99            <a class="margin-left-half nowrap" ng-click="qmc.cancelQueryById(result.requestId)">
100              {{qmc.getCancelLabel(result.requestId)}}
101            </a>
102          </span>
103        </div>
104      </section>
105    </div>
106
107<!-- COMPLETED TABLE  ***************************************************  -->
108
109    <div class="qm-table-completed cbui-table" ng-if="qmc.isSelected(2)">
110      <div class="cbui-table-header padding-left">
111        <span class="cbui-table-cell flex-grow-3 wrap" ng-click="qmc.update_completed_sort('statement')">query
112            <span ng-if="qmc.show_up_caret_completed('statement')" class="icon fa-caret-up"></span>
113            <span ng-if="qmc.show_down_caret_completed('statement')" class="icon fa-caret-down"></span>
114        </span>
115          <span class="cbui-table-cell" ng-click="qmc.update_completed_sort('node')">node
116            <span ng-if="qmc.show_up_caret_completed('node')" class="icon fa-caret-up"></span>
117            <span ng-if="qmc.show_down_caret_completed('node')" class="icon fa-caret-down"></span>
118          </span>
119          <span class="cbui-table-cell" ng-click="qmc.update_completed_sort('elapsedTime')">duration
120            <span ng-if="qmc.show_up_caret_completed('elapsedTime')" class="icon fa-caret-up"></span>
121            <span ng-if="qmc.show_down_caret_completed('elapsedTime')" class="icon fa-caret-down"></span>
122          </span>
123          <span class="cbui-table-cell" ng-click="qmc.update_completed_sort('resultCount')">result count
124            <span ng-if="qmc.show_up_caret_completed('resultCount')" class="icon fa-caret-up"></span>
125            <span ng-if="qmc.show_down_caret_completed('resultCount')" class="icon fa-caret-down"></span>
126          </span>
127          <span class="cbui-table-cell" ng-click="qmc.update_completed_sort('state')">state
128            <span ng-if="qmc.show_up_caret_completed('state')" class="icon fa-caret-up"></span>
129            <span ng-if="qmc.show_down_caret_completed('state')" class="icon fa-caret-down"></span>
130          </span>
131          <span class="cbui-table-cell" ng-click="qmc.update_completed_sort('requestTime')">run at
132            <span ng-if="qmc.show_up_caret_completed('requestTime')" class="icon fa-caret-up"></span>
133            <span ng-if="qmc.show_down_caret_completed('requestTime')" class="icon fa-caret-down"></span>
134          </span>
135          <span class="cbui-table-cell" ng-click="qmc.update_completed_sort('users')">user
136            <span ng-if="qmc.show_up_caret_completed('users')" class="icon fa-caret-up"></span>
137            <span ng-if="qmc.show_down_caret_completed('users')" class="icon fa-caret-down"></span>
138          </span>
139          <span class="cbui-table-cell flex-grow-half"></span>
140      </div>
141
142      <section ng-repeat="result in qmc.monitoring.completed_requests | orderBy:qmc.completed_sort_by:qmc.completed_sort_reverse">
143        <div class="cbui-tablerow padding-left">
144          <span
145             class="cbui-table-cell flex-grow-3 cursor-pointer"
146             uib-tooltip="{{result.statement}}"
147             tooltip-placement="top"
148             tooltip-append-to-body="true"
149             tooltip-class="break-word">
150            {{result.statement}}
151          </span>
152          <span class="cbui-table-cell">
153            {{result.node}}
154          </span>
155          <span class="cbui-table-cell">
156            {{result.elapsedTime}}
157          </span>
158          <span class="cbui-table-cell">
159            {{result.resultCount}}
160          </span>
161          <span class="cbui-table-cell">
162            {{result.state}}
163          </span>
164          <span class="cbui-table-cell cursor-pointer" uib-tooltip="{{result.requestTime}}"
165             tooltip-placement="top"
166             tooltip-append-to-body="true"
167             tooltip-class="break-word">
168            {{result.requestTime | limitTo:8:11}} {{result.requestTime | limitTo:3:-3}}
169          </span>
170          <span class="cbui-table-cell">
171            {{result.users}}
172          </span>
173          <span class="cbui-table-cell flex-grow-half text-right">
174            <a ui-sref="app.admin.query.workbench({query: result.statement})" class="nowrap">
175              edit
176            </a>
177          </span>
178        </div>
179      </section>
180    </div>
181
182<!-- PREPARED TABLE  *****************************************************  -->
183
184    <div class="qm-table-prepared cbui-table" ng-if="qmc.isSelected(3)">
185      <div class="cbui-table-header padding-left">
186        <span  class="cbui-table-cell flex-grow-3 wrap" ng-click="qmc.update_prepared_sort('statement')">query
187          <span ng-if="qmc.show_up_caret_prepared('statement')" class="icon fa-caret-up"></span>
188          <span ng-if="qmc.show_down_caret_prepared('statement')" class="icon fa-caret-down"></span>
189        </span>
190        <span class="cbui-table-cell" ng-click="qmc.update_prepared_sort('node')">node
191          <span ng-if="qmc.show_up_caret_prepared('node')" class="icon fa-caret-up"></span>
192          <span ng-if="qmc.show_down_caret_prepared('node')" class="icon fa-caret-down"></span>
193        </span>
194        <span class="cbui-table-cell" ng-click="qmc.update_prepared_sort('avgElapsedTime')">avg elapsed
195          <span ng-if="qmc.show_up_caret_prepared('avgElapsedTime')" class="icon fa-caret-up"></span>
196          <span ng-if="qmc.show_down_caret_prepared('avgElapsedTime')" class="icon fa-caret-down"></span>
197        </span>
198        <span class="cbui-table-cell" ng-click="qmc.update_prepared_sort('uses')">times used
199          <span ng-if="qmc.show_up_caret_prepared('uses')" class="icon fa-caret-up"></span>
200          <span ng-if="qmc.show_down_caret_prepared('uses')" class="icon fa-caret-down"></span>
201        </span>
202      </div>
203
204      <section ng-repeat="result in qmc.monitoring.prepareds | orderBy:qmc.prepared_sort_by:qmc.prepared_sort_reverse">
205        <div class="cbui-tablerow padding-left">
206          <span
207           class="cbui-table-cell flex-grow-3 cursor-pointer"
208           uib-tooltip="{{result.statement}}"
209           tooltip-placement="top"
210           tooltip-append-to-body="true"
211           tooltip-class="break-word">
212            {{result.statement}}
213          </span>
214          <span class="cbui-table-cell">
215            {{result.node}}
216          </span>
217          <span class="cbui-table-cell">
218            {{result.avgElapsedTime}}
219          </span>
220          <span class="cbui-table-cell">
221            {{result.uses}}
222          </span>
223        </div>
224      </section>
225    </div>
226  </div>
227
228<!-- QUERY STATISTICS ****************************************************** -->
229  <div class="qm-stats" ng-if="qc.validated.monitoringAllowed()">
230
231    <div class="column vertical-divider" ng-if="qc.validated.clusterStatsAllowed()">
232      <span class="width-6" ng-if="qmc.getSummaryStat('query_requests_250ms') != null">{{qmc.stats["query_requests_250ms"].title}} - last minute</span> <span class="text-right width-6">{{qmc.getSummaryStat("query_requests_250ms") | number:0}}</span><br>
233      <span class="width-6" ng-if="qmc.getSummaryStat('query_requests_500ms') != null">{{qmc.stats["query_requests_500ms"].title}} - last minute</span> <span class="text-right width-6">{{qmc.getSummaryStat("query_requests_500ms") | number:0}}</span><br>
234      <span class="width-6" ng-if="qmc.getSummaryStat('query_requests_1000ms') != null">{{qmc.stats["query_requests_1000ms"].title}} - last minute</span> <span class="text-right width-6">{{qmc.getSummaryStat("query_requests_1000ms") | number:0}}</span><br>
235      <span class="width-6" ng-if="qmc.getSummaryStat('query_requests_5000ms') != null">{{qmc.stats["query_requests_5000ms"].title}} - last minute</span> <span class="text-right width-6">{{qmc.getSummaryStat("query_requests_5000ms") | number:0}}</span><br>
236    </div>
237
238    <div class="column wide vertical-divider text-center" ng-if="qc.validated.clusterStatsAllowed()">
239      <div class="width-12 text-center semi-bold">Last Minute</div>
240      <span class="text-center">
241        <div mn-plot mn-plot-config="qmc.stats['query_requests'].config"
242          is-small-graph="true" style="width: 100px; height: 25px;">
243        </div>
244        <desc>requests per sec: {{qmc.getAverageStat("query_requests") | number:1}}</desc>
245      </span>
246      <span class="text-center indent-2">
247        <div mn-plot mn-plot-config="qmc.stats['query_avg_req_time'].config"
248          is-small-graph="true" style="width: 100px; height: 25px;">
249        </div>
250        <desc>avg. request time: {{qmc.getAverageStat("query_avg_req_time") | number:1}} sec</desc>
251      </span>
252      <span class="text-center indent-2">
253        <div mn-plot mn-plot-config="qmc.stats['query_avg_svc_time'].config"
254          is-small-graph="true" style="width: 100px; height: 25px;" >
255        </div>
256        <desc>avg. service time: {{qmc.getAverageStat("query_avg_svc_time") | number:1}} sec</desc>
257      </span>
258      <hr>
259      <desc>Memory utilization (this node): {{qmc.getVital("memory_util") | number:0}}%</desc>
260    </div>
261
262    <div class="column wide vertical-divider text-center" ng-if="!qc.validated.clusterStatsAllowed()">
263      <desc>memory utilization (this node): {{qmc.getVital("memory_util") | number:0}}%</desc>
264      <br>
265      <br>
266      <br>
267      <br>
268    </div>
269
270    <div class="column">
271      <span class="width-6">requests/sec - last minute</span> <span class="text-right width-6">{{qmc.getVital("request.per.sec.1min") | number:1}}</span><br>
272      <span class="width-6">requests/sec - last 5 minutes</span> <span class="text-right width-6">{{qmc.getVital("request.per.sec.5min") | number:1}}</span><br>
273      <span class="width-6">requests/sec - last 15 minutes</span> <span class="text-right width-6">{{qmc.getVital("request.per.sec.15min") | number:1}}</span><br>
274      <span class="width-6">mean request time</span> <span class="text-right width-6">{{qmc.getVital("request_time.mean") | number:1}}</span><br>
275    </div>
276  </div>
277</div>
278