IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashlist): updated dashlist

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-04-11 16:21:25 -04:00
parent 451a8bef39
commit 31441f0b43
10 changed files with 254 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/core/components/switch.ts
View File

@ -27,11 +27,8 @@ export class SwitchCtrl {
}
internalOnChange() {
return new Promise(resolve => {
this.$timeout(() => {
this.onChange();
resolve();
});
return this.$timeout(() => {
return this.onChange();
});
}

2
public/app/features/panel/partials/panelTime.html
View File

@ -31,7 +31,7 @@
</div>
<gf-form-switch class="gf-form max-width-30"
label="Hide time override info" label-class="width-12"
checked="ctrl.panel.hideTimeOverride" switch-class="max-width-6" on-change="ctrl.render()">
checked="ctrl.panel.hideTimeOverride" switch-class="max-width-6" on-change="ctrl.refresh()">
</gf-form-switch>
</div>
</div>

58
public/app/plugins/panel/dashlist/editor.html
View File

@ -1,40 +1,32 @@
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Mode</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="ctrl.panel.mode" ng-options="f for f in ctrl.modes" ng-change="ctrl.refresh()"></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.mode === 'recently viewed'">
<span class="gf-form-label">
<i class="grafana-tip fa fa-question-circle ng-scope" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></i>
</span>
</div>
</div>
<div>
<div class="section gf-form-group">
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'">
<div class="gf-form">
<span class="gf-form-label width-10">Search options</span>
<span class="gf-form-label">Query</span>
<gf-form-switch class="gf-form" label="Starred" label-class="width-9" checked="ctrl.panel.starred" on-change="ctrl.refresh()"></gf-form-switch>
<gf-form-switch class="gf-form" label="Recently viewed" label-class="width-9" checked="ctrl.panel.recent" on-change="ctrl.refresh()"></gf-form-switch>
<gf-form-switch class="gf-form" label="Search" label-class="width-9" checked="ctrl.panel.search" on-change="ctrl.refresh()"></gf-form-switch>
<input type="text" class="gf-form-input" placeholder="title query"
ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
<gf-form-switch class="gf-form" label="Show headings" label-class="width-9" checked="ctrl.panel.headings" on-change="ctrl.refresh()"></gf-form-switch>
</div>
<div class="gf-form">
<span class="gf-form-label width-9">Max items</span>
<input class="gf-form-input max-width-5" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()">
</div>
</div>
<div class="gf-form">
<span class="gf-form-label">Tags</span>
<div class="section gf-form-group">
<h5 class="section-heading">Search</h5>
<bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
</bootstrap-tagsinput>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Query</span>
<input type="text" class="gf-form-input" placeholder="title query" ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Tags</span>
<bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
</bootstrap-tagsinput>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Limit number to</span>
<input class="gf-form-input" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()">
</div>
</div>
</div>

27
public/app/plugins/panel/dashlist/module.html
View File

@ -1,12 +1,17 @@
<div class="dashlist">
<div class="dashlist-item" ng-repeat="dash in ctrl.dashList">
<a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}">
<span class="dashlist-title">
{{dash.title}}
</span>
<span class="dashlist-star">
<i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
</span>
</a>
</div>
<div class="dashlist" ng-repeat="group in ctrl.groups">
<div class="dashlist-section" ng-if="group.show">
<h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
{{group.header}}
</h6>
<div class="dashlist-item" ng-repeat="dash in group.list">
<a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}">
<span class="dashlist-title">
{{dash.title}}
</span>
<span class="dashlist-star">
<i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
</span>
</a>
</div>
</div>
</div>

91
public/app/plugins/panel/dashlist/module.js Normal file
View File

@ -0,0 +1,91 @@
///<reference path="../../../headers/common.d.ts" />
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var lodash_1 = require('lodash');
var sdk_1 = require('app/plugins/sdk');
var impression_store_1 = require('app/features/dashboard/impression_store');
// Set and populate defaults
var panelDefaults = {
mode: 'starred',
query: '',
limit: 10,
tags: [],
recent: false,
search: false,
starred: true
};
var DashListCtrl = (function (_super) {
__extends(DashListCtrl, _super);
/** @ngInject */
function DashListCtrl($scope, $injector, backendSrv) {
_super.call(this, $scope, $injector);
this.backendSrv = backendSrv;
lodash_1["default"].defaults(this.panel, panelDefaults);
if (this.panel.tag) {
this.panel.tags = [this.panel.tag];
delete this.panel.tag;
}
this.events.on('refresh', this.onRefresh.bind(this));
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
}
DashListCtrl.prototype.onInitEditMode = function () {
this.editorTabIndex = 1;
this.modes = ['starred', 'search', 'recently viewed'];
this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html');
};
DashListCtrl.prototype.onRefresh = function () {
var promises = [];
if (this.panel.recent) {
promises.push(this.getRecentDashboards());
}
if (this.panel.starred) {
promises.push(this.getStarred());
}
if (this.panel.search) {
promises.push(this.getSearch());
}
return Promise.all(promises)
.then(this.renderingCompleted.bind(this));
};
DashListCtrl.prototype.getSearch = function () {
var _this = this;
var params = {
limit: this.panel.limit,
query: this.panel.query,
tag: this.panel.tags
};
return this.backendSrv.search(params).then(function (result) {
_this.dashList = result;
_this.renderingCompleted();
});
};
DashListCtrl.prototype.getStarred = function () {
var _this = this;
var params = { limit: this.panel.limit, starred: "true" };
return this.backendSrv.search(params).then(function (result) {
_this.dashList = result;
_this.renderingCompleted();
});
};
DashListCtrl.prototype.getRecentDashboards = function () {
var _this = this;
var dashIds = lodash_1["default"].first(impression_store_1.impressions.getDashboardOpened(), this.panel.limit);
return this.backendSrv.search({ dashboardIds: dashIds, limit: this.panel.limit }).then(function (result) {
_this.dashList = dashIds.map(function (orderId) {
return lodash_1["default"].find(result, function (dashboard) {
return dashboard.id === orderId;
});
}).filter(function (el) {
return el !== undefined;
});
});
};
DashListCtrl.templateUrl = 'module.html';
return DashListCtrl;
}(sdk_1.PanelCtrl));
exports.DashListCtrl = DashListCtrl;
exports.PanelCtrl = DashListCtrl;

102
public/app/plugins/panel/dashlist/module.ts
View File

@ -7,16 +7,19 @@ import {impressions} from 'app/features/dashboard/impression_store';
// Set and populate defaults
var panelDefaults = {
mode: 'starred',
query: '',
limit: 10,
tags: []
tags: [],
recent: false,
search: false,
starred: true,
headings: true,
};
class DashListCtrl extends PanelCtrl {
static templateUrl = 'module.html';
dashList: any[];
groups: any[];
modes: any[];
/** @ngInject */
@ -31,6 +34,31 @@ class DashListCtrl extends PanelCtrl {
this.events.on('refresh', this.onRefresh.bind(this));
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
this.groups = [
{list: [], show: false, header: "Starred dashboards",},
{list: [], show: false, header: "Recently viewed dashboards"},
{list: [], show: false, header: "Search"},
];
// update capability
if (this.panel.mode) {
if (this.panel.mode === 'starred') {
this.panel.starred = true;
this.panel.headings = false;
}
if (this.panel.mode === 'recently viewed') {
this.panel.recent = true;
this.panel.starred = false;
this.panel.headings = false;
}
if (this.panel.mode === 'search') {
this.panel.search = true;
this.panel.starred = false;
this.panel.headings = false;
}
delete this.panel.mode;
}
}
onInitEditMode() {
@ -40,34 +68,60 @@ class DashListCtrl extends PanelCtrl {
}
onRefresh() {
var params: any = {limit: this.panel.limit};
var promises = [];
if (this.panel.mode === 'recently viewed') {
var dashIds = _.first(impressions.getDashboardOpened(), this.panel.limit);
promises.push(this.getRecentDashboards());
promises.push(this.getStarred());
promises.push(this.getSearch());
return this.backendSrv.search({dashboardIds: dashIds, limit: this.panel.limit}).then(result => {
this.dashList = dashIds.map(orderId => {
return _.find(result, dashboard => {
return dashboard.id === orderId;
});
}).filter(el => {
return el !== undefined;
});
return Promise.all(promises)
.then(this.renderingCompleted.bind(this));
}
this.renderingCompleted();
});
getSearch() {
this.groups[2].show = this.panel.search;
if (!this.panel.search) {
return Promise.resolve();
}
if (this.panel.mode === 'starred') {
params.starred = "true";
} else {
params.query = this.panel.query;
params.tag = this.panel.tags;
}
var params = {
limit: this.panel.limit,
query: this.panel.query,
tag: this.panel.tags,
};
return this.backendSrv.search(params).then(result => {
this.dashList = result;
this.renderingCompleted();
this.groups[2].list = result;
});
}
getStarred() {
this.groups[0].show = this.panel.starred;
if (!this.panel.starred) {
return Promise.resolve();
}
var params = {limit: this.panel.limit, starred: "true"};
return this.backendSrv.search(params).then(result => {
this.groups[0].list = result;
});
}
getRecentDashboards() {
this.groups[1].show = this.panel.recent;
if (!this.panel.recent) {
return Promise.resolve();
}
var dashIds = _.first(impressions.getDashboardOpened(), this.panel.limit);
return this.backendSrv.search({dashboardIds: dashIds, limit: this.panel.limit}).then(result => {
this.groups[1].list = dashIds.map(orderId => {
return _.find(result, dashboard => {
return dashboard.id === orderId;
});
}).filter(el => {
return el !== undefined;
});
});
}
}

58
public/dashboards/home.json
View File

@ -9,65 +9,61 @@
"hideControls": true,
"sharedCrosshair": false,
"rows": [
{
{
"collapse": false,
"editable": true,
"height": "90px",
"height": "25px",
"panels": [
{
"content": "<div class=\"text-center dashboard-header\">\n <span>Home Dashboard</span>\n</div>",
"editable": true,
"id": 1,
"links": [],
"mode": "html",
"span": 12,
"style": {},
"title": "",
"transparent": true,
"type": "text",
"links": []
"type": "text"
}
],
"title": "New row"
},
{
},
{
"collapse": false,
"editable": true,
"height": "510px",
"panels": [
{
"id": 2,
"limit": 10,
"mode": "starred",
"query": "",
"span": 3.75,
"tags": [],
"title": "Starred dashboards",
"type": "dashlist"
},
{
"id": 3,
"limit": 10,
"mode": "recently viewed",
"limit": 4,
"links": [],
"query": "",
"span": 3.75,
"span": 7,
"tags": [],
"title": "Recently viewed dashboards",
"type": "dashlist"
"title": "",
"transparent": false,
"type": "dashlist",
"recent": true,
"search": false,
"starred": true,
"headings": true
},
{
"title": "",
"error": false,
"span": 4.5,
"editable": true,
"type": "pluginlist",
"isNew": true,
"error": false,
"id": 4,
"links": []
"isNew": true,
"links": [],
"span": 5,
"title": "",
"transparent": false,
"type": "pluginlist"
}
],
"title": "Row"
}
],
}
],
"time": {
"from": "now-6h",
"to": "now"
@ -105,7 +101,7 @@
"annotations": {
"list": []
},
"schemaVersion": 9,
"version": 5,
"schemaVersion": 12,
"version": 2,
"links": []
}

8
public/sass/components/_panel_dashlist.scss
View File

@ -1,5 +1,11 @@
.dashlist-item {
.dashlist-section-header {
margin-bottom: $spacer;
color: $text-color-weak;
}
.dashlist-section {
margin-bottom: $spacer;
}
.dashlist-link {

4
public/sass/pages/_dashboard.scss
View File

@ -278,11 +278,11 @@ div.flot-text {
.dashboard-header {
font-family: $headings-font-family;
font-size: $font-size-h2;
font-size: $font-size-h3;
text-align: center;
span {
display: inline-block;
@include brand-bottom-border();
padding: 1.2rem .5rem .4rem .5rem;
padding: 0.5rem .5rem .2rem .5rem;
}
}

30
tsconfig.json
View File

@ -6,33 +6,13 @@
"noImplicitAny": false,
"target": "es5",
"rootDir": "public/",
"sourceRoot": "public/",
"module": "system",
"noEmitOnError": true,
"emitDecoratorMetadata": true
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"files": [
"public/app/app.ts",
"public/app/core/controllers/grafana_ctrl.ts",
"public/app/core/controllers/signup_ctrl.ts",
"public/app/core/core.ts",
"public/app/core/core_module.ts",
"public/app/core/directives/array_join.ts",
"public/app/core/directives/give_focus.ts",
"public/app/core/filters/filters.ts",
"public/app/core/routes/bundle_loader.ts",
"public/app/core/table_model.ts",
"public/app/core/time_series.ts",
"public/app/core/utils/datemath.ts",
"public/app/core/utils/flatten.ts",
"public/app/core/utils/rangeutil.ts",
"public/app/features/dashboard/timepicker/timepicker.ts",
"public/app/features/panel/panel_meta.ts",
"public/app/plugins/datasource/influxdb/influx_query.ts",
"public/app/plugins/datasource/influxdb/query_part.ts",
"public/app/plugins/panels/table/controller.ts",
"public/app/plugins/panels/table/editor.ts",
"public/app/plugins/panels/table/module.ts",
"public/app/plugins/panels/table/renderer.ts",
"public/app/plugins/panels/table/transformers.ts"
"public/app/**/*.ts"
]
}
}