Replace tag selection window with a search string moira-alert#48

static/app/app.ts

@@ -15,6 +15,7 @@ import {ApiStatus} from './directives/apistatus';
 import {NewContact} from './directives/newcontact';
 import {Contact} from './directives/contact';
 import {Menu} from './directives/menu';
+import {Search} from './directives/search';
 import {Selector} from './directives/selector';
 import {Schedule} from './directives/schedule';
 import {SubEditor} from './directives/subeditor';
@@ -47,6 +48,7 @@ app.directive('moiraMenu', Menu);
 app.directive('moiraSelector', Selector);
 app.directive('moiraSubEditor', SubEditor);
 app.directive('moiraSchedule', Schedule);
+app.directive('moiraSearch', Search);
 app.directive('moiraTag', Tag);
 app.directive('moiraTagsFilterList', TagsFilterList);
 app.directive('moiraTimestamp', Timestamp);

static/app/controllers/triggers.ts

@@ -20,6 +20,7 @@ export interface ITriggersScope extends ng.IScope, IPagingScope {
 	show_trigger_metrics: Array<MetricCheck>;
 	show_trigger: Trigger;
 	show_maintenance_check: MetricCheck;
+	search_string: string;
 }
 
 export class TriggersController {
@@ -35,15 +36,15 @@ export class TriggersController {
 		var saved_tags = ($cookies.get(TriggersController.TagsFilterCookie) || "").split(',').filter(function (tag: string) {
 			return tag != "";
 		});
+
+		$scope.search_string = "";
 		$scope.tags_filter = new TagFilter(new TagList(saved_tags));
 		$scope.ok_filter = $cookies.get(TriggersController.TagsOkFilterCookie) == "true";
 
 		$scope.metric_values = {};
 
-		$scope.$watch('tags_filter.selection.length', (newValue: number, oldValue: number) => {
+		$scope.$watch('search_string.length', (newValue: number, oldValue: number) => {
 			if (newValue != oldValue) {
-				$cookies.put(TriggersController.TagsFilterCookie, $scope.tags_filter.selection.to_string().join(),
-					{ expires: new Date((new Date()).getTime() + TriggersController.CookieLiveSpan) });
 				this.$location.search({page: 0});
 				this.$scope.page = 0;
 				this.load_triggers();
@@ -59,7 +60,7 @@ export class TriggersController {
 				this.load_triggers();
 			}
 		});
-		
+
 		$scope.$on('$routeUpdate', (scope, next: ng.route.ICurrentRoute) => {
 			if(this.$scope.page === parseInt(next.params['page']))
 				return;
@@ -82,7 +83,7 @@ export class TriggersController {
 	load_triggers() {
 		var num = parseInt(this.$location.search()['page'] || 0);
 		this.$scope.page = num;
-		this.api.trigger.page(num, this.$scope.size).then((data) => {
+		this.api.trigger.page(num, this.$scope.size, this.$scope.search_string).then((data) => {
 			this.$scope.triggers = [];
 			this.$scope.total = data.total;
 			InitPagesList(this.$scope);
@@ -138,8 +139,11 @@ export class TriggersController {
 				tag.data = data;
 			});
 		} else {
-			if (!this.$scope.tags_filter.selection.contains(tag) && this.$scope.tags.contains(tag)) {
-				this.$scope.tags_filter.selection.push(tag);
+			if (this.$scope.search_string === undefined) {
+				this.$scope.search_string = "";
+			}
+			if (this.$scope.search_string.indexOf('#' + tag.value) == -1) {
+				this.$scope.search_string += ' #' + tag.value;
 			}
 		}
 	};

static/app/directives/search.ts

@@ -0,0 +1,28 @@
+declare function require(string): any;
+
+export interface ISearchScope extends ng.IScope{
+	model:String;
+	clear();
+}
+
+export function Search(): ng.IDirective {
+
+	const max_items:number = 99;
+
+	return {
+		restrict: 'E',
+		template: require('./templates/search.html'),
+
+		replace: true,
+		transclude: true,
+		scope: {
+			model:"=model",
+			placeholder:"@placeholder",
+		},
+		link: function (scope:ISearchScope, element:JQuery, attrs:ng.IAttributes) {
+			scope.clear = () => {
+				scope.model = "";
+			};
+		}
+	};
+}

static/app/directives/templates/search.html

@@ -0,0 +1,11 @@
+  <nav>
+    <div class="nav-wrapper">
+      <form>
+        <div class="input-field">
+          <input id="search" type="search" ng-model="model" required placeholder="{{placeholder}}">
+          <label for="search"><i class="material-icons">search</i></label>
+          <i class="material-icons" ng-click="clear()">close</i>
+        </div>
+      </form>
+    </div>
+  </nav>

static/app/services/api.ts

@@ -125,8 +125,8 @@ export class Api {
 		delete: (trigger_id: string) => {
 			return this._query("trigger/" + trigger_id, "DELETE");
 		},
-		page: (num: number, size: number): ng.IPromise<ITriggersList> => {
-			return this._query(`trigger/page?p=${num}&size=${size}`, "GET");
+		page: (num: number, size: number, q: string): ng.IPromise<ITriggersList> => {
+			return this._query(`trigger/page?p=${num}&size=${size}&q=${encodeURIComponent(q || '')}`, "GET");
 		},
 		get: (trigger_id: string): ng.IPromise<ITriggerJson> => {
 			return this._query("trigger/" + trigger_id, "GET")
@@ -229,4 +229,4 @@ export class Api {
 			}), "GET");
 		}
 	};
-}
+}

static/tests/controllers/triggers.ts

@@ -75,7 +75,7 @@ describe("TriggersController", () => {
 		it("two trigger rows rendered", () => {
 			expect(element.find(".trigger-row").length).toBe(1);
 		});
-		
+
 	});
 
 	describe("open trigger", () => {
@@ -103,7 +103,7 @@ describe("TriggersController", () => {
 			});
 		});
 	});
-	
+
 	describe("show trigger metrics", () => {
 		beforeEach(() => {
 			controller.toggle_trigger_metrics('WARN', scope.triggers[0]);
@@ -115,7 +115,7 @@ describe("TriggersController", () => {
 			expect(scope.show_trigger_metrics[0].value.num).toBe(1);
 		});
 	});
-	
+
 	describe("add filter tag", () => {
 		var event: IAltKeyEvent;
 		beforeEach(() => {
@@ -155,4 +155,4 @@ describe("TriggersController", () => {
 			});
 		});
 	});
-})
+})

static/triggers.html

@@ -2,9 +2,8 @@
 	<div class="grey lighten-4">
 		<div class="container">
 			<div class="row fat-row">
-				<moira-selector model="tags_filter" placeholder="Type or select tags to filter" items="tags">
-					<moira-tag ng-repeat="tag in tags_filter.selection" item="tag" remove="ctrl.remove_filter_tag(tag)"></moira-tag>
-				</moira-selector>
+				<moira-search model="search_string" placeholder="Type #tag and/or trigger name/metric">
+				</moira-search>
 				<div class="hide-on-small-only col m14" style="height:100%; padding-top:2px">
 					<span class="small grey-text text-darken-1" ng-if="settings.sub_tags.length">Subscribed:</span>
 					<moira-tag item="tag" ng-repeat="tag in settings.sub_tags" ng-click="ctrl.tag_click(tag, $event)" class="clickable" disabled="{{tags_filter.selection.contains(tag)}}">