Просмотр исходного кода

Worked on dashlist panel, can now do searched

Torkel Ödegaard 11 лет назад
Родитель
Сommit
d5471c153a

+ 4 - 8
src/app/controllers/search.js

@@ -18,7 +18,6 @@ function (angular, _, config, $) {
       $scope.query = { query: 'title:' };
       $scope.db = datasourceSrv.getGrafanaDB();
       $scope.currentSearchId = 0;
-      $scope.starsPromise = $scope.grafana.user.getStars();
 
       // events
       $scope.onAppEvent('dashboard-deleted', $scope.dashboardDeleted);
@@ -78,13 +77,10 @@ function (angular, _, config, $) {
         .then(function(results) {
           if (localSearchId < $scope.currentSearchId) { return; }
 
-          $scope.starsPromise.then(function(stars) {
-            $scope.starredIds = stars.dashboardIds;
-            $scope.tagsOnly = results.tagsOnly;
-            $scope.results.dashboards = results.dashboards;
-            $scope.results.tags = results.tags;
-            $scope.resultCount = results.tagsOnly ? results.tags.length : results.dashboards.length;
-          });
+          $scope.tagsOnly = results.tagsOnly;
+          $scope.results.dashboards = results.dashboards;
+          $scope.results.tags = results.tags;
+          $scope.resultCount = results.tagsOnly ? results.tags.length : results.dashboards.length;
         });
     };
 

+ 41 - 0
src/app/panels/dashlist/editor.html

@@ -0,0 +1,41 @@
+
+<div class="editor-row">
+	<div class="section" style="margin-bottom: 20px">
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 110px">
+					<strong>Mode</strong>
+				</li>
+				<li>
+					<select class="input-small tight-form-input" ng-model="panel.mode" ng-options="f for f in modes" ng-change="get_data()"></select>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+	<div class="section" style="margin-bottom: 20px" ng-if="panel.mode === 'search'">
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 110px">
+					<strong>Search options</strong>
+				</li>
+				<li class="tight-form-item">
+					Query
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input" placeholder="title query"
+					ng-model="panel.query" ng-change="get_data()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Tag
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input" placeholder="full tag name"
+					ng-model="panel.tag" ng-change="get_data()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+</div>
+

+ 1 - 1
src/app/panels/dashlist/module.html

@@ -6,7 +6,7 @@
 				{{dash.title}}
 			</span>
 			<span class="dashlist-star">
-				<i class="fa fa-star"></i>
+				<i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': !dash.isStarred}"></i>
 			</span>
 		</a>
 	</div>

+ 15 - 1
src/app/panels/dashlist/module.js

@@ -26,9 +26,16 @@ function (angular, app, _, config, PanelMeta) {
       fullscreen: true,
     });
 
+    $scope.panelMeta.addEditorTab('Options', 'app/panels/dashlist/editor.html');
+
     var defaults = {
+      mode: 'starred',
+      query: '',
+      tag: '',
     };
 
+    $scope.modes = ['starred', 'search'];
+
     _.defaults($scope.panel, defaults);
 
     $scope.dashList = [];
@@ -44,7 +51,14 @@ function (angular, app, _, config, PanelMeta) {
     };
 
     $scope.get_data = function() {
-      backendSrv.get('/api/search', { starred: 1 }).then(function(result) {
+      var params = {};
+      if ($scope.panel.mode === 'starred') {
+        params.starred = 1;
+      } else {
+        params.q = "tags:" + $scope.panel.tag + " AND title:" + $scope.panel.query;
+      }
+
+      backendSrv.get('/api/search', params).then(function(result) {
         $scope.dashList = result.dashboards;
         $scope.panelMeta.loading = false;
       });

+ 1 - 1
src/app/partials/search.html

@@ -61,7 +61,7 @@
 					<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name  class="label label-tag">
 						{{tag}}
 					</a>
-					<i class="fa" ng-class="{'fa-star': starredIds[row.id], 'fa-star-o': !starredIds[row.id]}"></i>
+					<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
 				</div>
 
 				<a class="search-result-link">

+ 1 - 11
src/app/services/userSrv.js

@@ -7,7 +7,7 @@ function (angular, _) {
 
   var module = angular.module('grafana.services');
 
-  module.service('userSrv', function(backendSrv, $q) {
+  module.service('userSrv', function() {
 
     function User() {
       if (window.grafanaBootData.user) {
@@ -15,16 +15,6 @@ function (angular, _) {
       }
     }
 
-    User.prototype.getStars = function() {
-      if (!this.isSignedIn) {
-        return $q.when([]);
-      }
-
-      return backendSrv.get('/api/user/stars').then(function(stars) {
-        return stars;
-      });
-    };
-
     this.getSignedInUser = function() {
       return new User();
     };

+ 7 - 1
src/css/less/dashlist.less

@@ -10,7 +10,13 @@
   border: 1px solid @grafanaTargetBorder;
   .fa {
     float: right;
-    color: @orange;
     padding-top: 3px;
   }
+  .fa-star {
+    color: @orange;
+  }
+
+  &:hover {
+    background-color: @grafanaTargetFuncBackground;
+  }
 }

+ 4 - 2
src/dashboards/home.json

@@ -25,19 +25,21 @@
       ]
     },
     {
-      "height": "410px",
+      "height": "610px",
       "panels": [
         {
           "id": 2,
           "span": 6,
           "type": "dashlist",
+          "mode": "starred",
           "title": "Starred dashboards"
         },
         {
           "id": 3,
           "span": 6,
           "type": "dashlist",
-          "title": "Previously visited dashboards"
+          "mode": "search",
+          "title": "Dashboards"
         }
       ]
     }