EAGLE-1053 Support typeahead in Eagle UI

eagle-server/src/main/webapp/app/dev/partials/metric/preview.html

@@ -21,9 +21,6 @@
 		<div class="box box-primary">
 			<div class="box-header with-border">
 				<h3 class="box-title">Configure</h3>
-				<div class="box-tools pull-right">
-					<input class="form-control input-sm" type="text" placeholder="Metric Filter" ng-model="metricFilter" ng-change="updateMetricFilter()" />
-				</div>
 			</div>
 			<div class="box-body">
 				<div class="form-group">
@@ -36,9 +33,7 @@ <h3 class="box-title">Configure</h3>
 				</div>
 				<div class="form-group">
 					<label>Metric Name</label>
-					<select class="form-control" ng-model="metricName">
-						<option ng-repeat="metric in metricList track by metric">{{metric}}</option>
-					</select>
+					<input type="text" class="form-control" ng-model="metricName" uib-typeahead="state for state in metricList | filter:$viewValue | limitTo:8" />
 				</div>
 				<div class="form-group">
 					<label>Groups</label>

eagle-server/src/main/webapp/app/dev/public/js/ctrls/metricCtrl.js

@@ -40,27 +40,18 @@
 
 		$scope.commonOption = {};
 
-		$scope.originMetricList = $scope.metricList = [$scope.metricName];
+		$scope.metricList = [$scope.metricName];
 		CompatibleEntity.groups({
 			query: 'MetricSchemaService',
 			groups: 'metricName',
 			fields: 'count',
 			limit: 9999,
 		})._promise.then(function (res) {
-			$scope.originMetricList = $.map(res.data.obj, function (obj) {
+			$scope.metricList = $.map(res.data.obj, function (obj) {
 				return obj.key[0];
 			}).sort();
-			$scope.updateMetricFilter();
 		});
 
-		$scope.updateMetricFilter = function () {
-			var filter = $scope.metricFilter.toUpperCase();
-
-			$scope.metricList = $.grep($scope.originMetricList, function (name) {
-				return name.toUpperCase().indexOf(filter) !== -1;
-			});
-		};
-
 		$scope.loadSeries = function() {
 			$scope.currentMetricName = $scope.metricName;