Worked on dashlist panel, can now do searched

This commit is contained in:
Torkel Ödegaard
2015-02-05 09:48:14 +01:00
parent ff47eccf4b
commit d5471c153a
8 changed files with 74 additions and 25 deletions

View File

@@ -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;
});
};

View File

@@ -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>

View File

@@ -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>

View File

@@ -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;
});

View File

@@ -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">

View File

@@ -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();
};

View File

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

View File

@@ -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"
}
]
}