166 lines
8.4 KiB
HTML
166 lines
8.4 KiB
HTML
<div class="chosen-container chosen-container-multi" style="width: 100%;" title="">
|
|
<ul class="chosen-choices" style="overflow-x:auto;">
|
|
<li class="btn btn-info search-choice" ng-repeat=" data in metricsDataKey">
|
|
<span>{{data}}</span>
|
|
<a class="ace-icon fa fa-wrench" ng-click="filter(this)"></a>
|
|
<a class="search-choice-close" data-option-array-index="{{data}}" ng-click="removeSelected(this)"></a>
|
|
</li>
|
|
<li class="search-field" style="width:100%;">
|
|
<input type="text" ng-model="searchText" autocomplete="off" style="width: 100%; height: 30px;"></input>
|
|
</li>
|
|
</ul>
|
|
<div class="chosen-drop">
|
|
<ul class="chosen-results">
|
|
<li ng-repeat = "name in filtered = (names |filter: searchText)|limitTo: 200" ng-class="{ 'active-result':metricsDataKey.indexOf(name) < 0,'result-selected': metricsDataKey.indexOf(name) >= 0}" data-option-array-index="{{name}}">{{name}}</li>
|
|
<li ng-if="filtered.length > 200" class="result-selected" style="background-color:blue;">Showing the first 200/{{filtered.length}} records</li>
|
|
<li ng-if="filtered.length <= 200" class="result-selected" style="background-color:blue;">Showing {{filtered.length}} records</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/ng-template" id="filter.html">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Metrics</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-hover nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th width="100px">Group By</th >
|
|
<th width="500px">Choices</th >
|
|
<th> Actions </th>
|
|
</tr >
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="group in metrics[0].group_by track by $index">
|
|
<td>
|
|
<select ng-model="group.name" ng-options="groupType for groupType in groups" ng-change="cleanGroupBy($index)"></select>
|
|
</td>
|
|
<td ng-if='!group.name'>
|
|
</td>
|
|
<td ng-if='group.name == "tag"'>
|
|
<input type="text" ng-model="group.tags"/ >
|
|
</td>
|
|
<td ng-if='group.name == "time"'>
|
|
<input type="text" ng-model="group.range_size.value" style="width: 25px" />
|
|
<select ng-model="group.range_size.unit" ng-options="tu for tu in timeUnit"></select>
|
|
Count:<input type="text" ng-model="group.group_count" style="width: 25px" />
|
|
</td>
|
|
<td ng-if='group.name == "value"'>
|
|
<input type="text" ng-model="group.range_size" style="width: 25px" />
|
|
</td>
|
|
<td>
|
|
<span class="action" ng-click="addGroup()">
|
|
<i class="fa fa-plus-circle bigger-140 blue"></i>
|
|
</span>
|
|
|
|
<span class="action" ng-click="removeGroup($index)">
|
|
<i class="fa fa-minus-circle bigger-140 blue"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr ng-if="(!metrics[0].group_by) || metrics[0].group_by.length == 0">
|
|
<td></td>
|
|
<td></td>
|
|
<td>
|
|
<span class="action" ng-click="addGroup()">
|
|
<i class="fa fa-plus-circle bigger-140 blue"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="table table-hover nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th width="100px">Aggregator</th >
|
|
<th width="500px">Choices</th >
|
|
<th> Actions </th>
|
|
</tr >
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="aggregator in metrics[0].aggregators track by $index">
|
|
<td>
|
|
<select ng-model="aggregator.name" ng-options="aggregatorType for aggregatorType in aggregatorTypes" ng-change="cheanAggregator($index)"></select>
|
|
</td>
|
|
<td>
|
|
<span ng-if="aggregator.name != 'div' && aggregator.name != 'rate' && aggregator.name != 'sampler'&& aggregator.name != 'scale'">
|
|
Sampling:
|
|
<input type="text" ng-model="aggregator.sampling.value" style="width: 25px" / >
|
|
<select ng-model="aggregator.sampling.unit" ng-options="tu for tu in timeUnit"></select>
|
|
<span ng-if="aggregator.name == 'percentile'"> percentile: <input type="text" ng-model="aggregator.percentile" style="width: 25px" / ></span>
|
|
|
|
</span>
|
|
<span ng-if="aggregator.name == 'div'"> Divisor:<input type="number" ng-model="aggregator.divisor" /></span>
|
|
<span ng-if="aggregator.name == 'rate' || aggregator.name == 'sampler'"> <select ng-model="aggregator.unit" ng-options="tu for tu in timeUnit"></select></span>
|
|
<span ng-if="aggregator.name == 'scale'"> Factor:<input type="number" ng-model="aggregator.factor" /></span>
|
|
</td>
|
|
<td>
|
|
<span class="action" ng-click="addAggregator()">
|
|
<i class="fa fa-plus-circle bigger-140 blue"></i>
|
|
</span>
|
|
|
|
<span class="action" ng-click="removeAggregator($index)">
|
|
<i class="fa fa-minus-circle bigger-140 blue"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr ng-if = "metrics[0].aggregators.length == 0">
|
|
<td></td>
|
|
<td></td>
|
|
<td>
|
|
<span class="action" ng-click="addAggregator()">
|
|
<i class="fa fa-plus-circle bigger-140 blue"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="table table-hover nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th width="100px">tag</th >
|
|
<th width="500px">Choices</th >
|
|
<th> Actions </th>
|
|
</tr >
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="tag in allTags track by $index">
|
|
<td>
|
|
<select ng-model="tag.selectedTag" ng-options="key as key for (key , value) in displayTags"></select>
|
|
</td>
|
|
<td>
|
|
|
|
<select ng-options="v for v in displayTags[tag.selectedTag]" ng-model="tag.tagValue"></select>
|
|
</td>
|
|
<td>
|
|
<span class="action" ng-click="addTag()">
|
|
<i class="fa fa-plus-circle bigger-140 blue"></i>
|
|
</span>
|
|
|
|
<span class="action" ng-click="removeTag($index)">
|
|
<i class="fa fa-minus-circle bigger-140 blue"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr ng-if = "allTags.length == 0">
|
|
<td></td>
|
|
<td></td>
|
|
<td>
|
|
<span class="action" ng-click="addTag()">
|
|
<i class="fa fa-plus-circle bigger-140 blue"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" ng-click="ok()">OK</button>
|
|
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
|
|
</div>
|
|
</script> |