ux: added search box to ds list page, closes #10106

public/app/features/plugins/ds_list_ctrl.ts

@@ -1,35 +1,31 @@
-///<reference path="../../headers/common.d.ts" />
-
 import coreModule from '../../core/core_module';
-import {appEvents} from 'app/core/core';
+import _ from 'lodash';
 
 export class DataSourcesCtrl {
   datasources: any;
+  unfiltered: any;
   navModel: any;
+  searchQuery: string;
 
   /** @ngInject */
   constructor(
     private $scope,
     private backendSrv,
     private datasourceSrv,
-    private $location,
     private navModelSrv) {
 
     this.navModel = this.navModelSrv.getNav('cfg', 'datasources', 0);
-    this.navigateToUrl = this.navigateToUrl.bind(this);
     backendSrv.get('/api/datasources').then(result => {
       this.datasources = result;
-    });
-
-    appEvents.on('location-change', payload => {
-      this.navigateToUrl(payload.href);
+      this.unfiltered = result;
     });
   }
 
-  navigateToUrl(url) {
-    // debugger;
-    this.$location.path(url);
-    this.$location.replace();
+  onQueryUpdated() {
+    let regex = new RegExp(this.searchQuery, 'ig');
+    this.datasources = _.filter(this.unfiltered, item => {
+      return regex.test(item.name) || regex.test(item.type);
+    });
   }
 
   removeDataSourceConfirmed(ds) {

public/app/features/plugins/partials/ds_list.html

@@ -1,9 +1,15 @@
 <page-header model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body">
-	<div ng-if="ctrl.datasources.length">
+	<div ng-if="ctrl.unfiltered.length">
 		<div class="page-action-bar">
+      <div class="gf-form">
+        <label class="gf-form-label">Search</label>
+        <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" give-focus="true" placeholder="Filter by name or type" />
+      </div>
+
 			<div class="page-action-bar__spacer"></div>
+
 			<a class="page-header__cta btn btn-success" href="datasources/new">
 				<i class="fa fa-plus"></i>
 				Add data source
@@ -42,7 +48,7 @@
 		</section>
 	</div>
 
-	<div ng-if="ctrl.datasources.length === 0">
+	<div ng-if="ctrl.unfiltered.length === 0">
 		<empty-list-cta model="{
 			title: 'There are no data sources defined yet',
 			buttonIcon: 'gicon gicon-dashboard-new',