Commit aa251fc9 by Torkel Ödegaard

feat(panels): upgraded dashlist panel to new format

parent cc375f48
...@@ -48,7 +48,7 @@ class MetricsPanelCtrl extends PanelCtrl { ...@@ -48,7 +48,7 @@ class MetricsPanelCtrl extends PanelCtrl {
}, 30);; }, 30);;
} }
initEditorTabs() { initEditMode() {
this.addEditorTab('Metrics', () => { this.addEditorTab('Metrics', () => {
return { templateUrl: 'public/app/partials/metrics.html' }; return { templateUrl: 'public/app/partials/metrics.html' };
}); });
......
...@@ -33,6 +33,7 @@ export class PanelCtrl { ...@@ -33,6 +33,7 @@ export class PanelCtrl {
init() { init() {
this.publishAppEvent('panel-instantiated', {scope: this.$scope}); this.publishAppEvent('panel-instantiated', {scope: this.$scope});
this.refresh();
} }
renderingCompleted() { renderingCompleted() {
...@@ -61,7 +62,7 @@ export class PanelCtrl { ...@@ -61,7 +62,7 @@ export class PanelCtrl {
if (!this.editorTabs) { if (!this.editorTabs) {
this.editorTabs = []; this.editorTabs = [];
this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab}); this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab});
this.initEditorTabs(); this.initEditMode();
} }
this.changeView(true, true); this.changeView(true, true);
...@@ -71,7 +72,7 @@ export class PanelCtrl { ...@@ -71,7 +72,7 @@ export class PanelCtrl {
this.changeView(false, false); this.changeView(false, false);
} }
initEditorTabs() { initEditMode() {
return; return;
} }
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<strong>Mode</strong> <strong>Mode</strong>
</li> </li>
<li> <li>
<select class="input-small tight-form-input last" ng-model="panel.mode" ng-options="f for f in modes" ng-change="get_data()"></select> <select class="input-small tight-form-input last" ng-model="ctrl.panel.mode" ng-options="f for f in ctrl.modes" ng-change="ctrl.refresh()"></select>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -24,13 +24,13 @@ ...@@ -24,13 +24,13 @@
</li> </li>
<li> <li>
<input type="text" class="input-medium tight-form-input" placeholder="title query" <input type="text" class="input-medium tight-form-input" placeholder="title query"
ng-model="panel.query" ng-change="get_data()" ng-model-onblur> ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
Tags Tags
</li> </li>
<li> <li>
<bootstrap-tagsinput ng-model="panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="get_data()"> <bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
</bootstrap-tagsinput> </bootstrap-tagsinput>
</li> </li>
</ul> </ul>
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<strong>Limit number to</strong> <strong>Limit number to</strong>
</li> </li>
<li> <li>
<input class="input-small tight-form-input last" type="number" ng-model="panel.limit" ng-model-onblur ng-change="get_data()"> <input class="input-small tight-form-input last" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()">
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
<grafana-panel> <div class="dashlist">
<div class="dashlist"> <div class="dashlist-item" ng-repeat="dash in ctrl.dashList">
<div class="dashlist-item" ng-repeat="dash in dashList">
<a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}"> <a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}">
<span class="dashlist-title"> <span class="dashlist-title">
{{dash.title}} {{dash.title}}
...@@ -10,4 +9,4 @@ ...@@ -10,4 +9,4 @@
</span> </span>
</a> </a>
</div> </div>
</grafana-panel> </div>
define([
'angular',
'app/app',
'lodash',
'app/core/config',
'app/features/panel/panel_meta',
],
function (angular, app, _, config, PanelMeta) {
'use strict';
var module = angular.module('grafana.panels.dashlist', []);
app.useModule(module);
/** @ngInject */
function DashListPanelCtrl($scope, panelSrv, backendSrv) {
$scope.panelMeta = new PanelMeta({
panelName: 'Dashboard list',
editIcon: "fa fa-star",
fullscreen: true,
});
$scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/dashlist/editor.html');
var defaults = {
mode: 'starred',
query: '',
limit: 10,
tags: []
};
$scope.modes = ['starred', 'search'];
_.defaults($scope.panel, defaults);
$scope.dashList = [];
$scope.init = function() {
panelSrv.init($scope);
if ($scope.panel.tag) {
$scope.panel.tags = [$scope.panel.tag];
delete $scope.panel.tag;
}
if ($scope.isNewPanel()) {
$scope.panel.title = "Starred Dashboards";
}
};
$scope.refreshData = function() {
var params = {
limit: $scope.panel.limit
};
if ($scope.panel.mode === 'starred') {
params.starred = "true";
} else {
params.query = $scope.panel.query;
params.tag = $scope.panel.tags;
}
return backendSrv.search(params).then(function(result) {
$scope.dashList = result;
$scope.panelRenderingComplete();
});
};
$scope.init();
}
function dashListPanelDirective() {
return {
controller: DashListPanelCtrl,
templateUrl: 'app/plugins/panel/dashlist/module.html',
};
}
return {
panel: dashListPanelDirective
};
});
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import config from 'app/core/config';
import {PanelDirective, PanelCtrl} from '../../../features/panel/panel';
// Set and populate defaults
var panelDefaults = {
mode: 'starred',
query: '',
limit: 10,
tags: []
};
class DashListCtrl extends PanelCtrl {
dashList: any[];
modes: any[];
/** @ngInject */
constructor($scope, $injector, private backendSrv) {
super($scope, $injector);
_.defaults(this.panel, panelDefaults);
if (this.panel.tag) {
this.panel.tags = [$scope.panel.tag];
delete this.panel.tag;
}
}
initEditMode() {
this.modes = ['starred', 'search'];
this.icon = "fa fa-star";
this.addEditorTab('Options', () => {
return {templateUrl: 'app/plugins/panel/dashlist/editor.html'};
});
}
refresh() {
var params: any = {limit: this.panel.limit};
if (this.panel.mode === 'starred') {
params.starred = "true";
} else {
params.query = this.panel.query;
params.tag = this.panel.tags;
}
return this.backendSrv.search(params).then(result => {
this.dashList = result;
this.renderingCompleted();
});
}
}
class DashListPanel extends PanelDirective {
controller = DashListCtrl;
templateUrl = 'public/app/plugins/panel/dashlist/module.html';
}
export {
DashListCtrl,
DashListPanel as Panel
}
...@@ -18,17 +18,19 @@ export class TextPanelCtrl extends PanelCtrl { ...@@ -18,17 +18,19 @@ export class TextPanelCtrl extends PanelCtrl {
super($scope, $injector); super($scope, $injector);
_.defaults(this.panel, panelDefaults); _.defaults(this.panel, panelDefaults);
this.render();
} }
initEditorTabs() { initEditMode() {
this.icon = 'fa fa-text-width'; this.icon = 'fa fa-text-width';
this.addEditorTab('Options', () => { this.addEditorTab('Options', () => {
return { templateUrl: 'public/app/plugins/panel/text/editor.html' }; return { templateUrl: 'public/app/plugins/panel/text/editor.html' };
}); });
} }
refresh() {
this.render();
}
render() { render() {
if (this.panel.mode === 'markdown') { if (this.panel.mode === 'markdown') {
this.renderMarkdown(this.panel.content); this.renderMarkdown(this.panel.content);
...@@ -40,10 +42,6 @@ export class TextPanelCtrl extends PanelCtrl { ...@@ -40,10 +42,6 @@ export class TextPanelCtrl extends PanelCtrl {
this.renderingCompleted(); this.renderingCompleted();
} }
refresh() {
this.render();
}
renderText(content) { renderText(content) {
content = content content = content
.replace(/&/g, '&amp;') .replace(/&/g, '&amp;')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment