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(panels): updated text panel to new format

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-01-25 09:56:17 -05:00
parent 3e14f8a0e5
commit 8f4cf6c797
4 changed files with 98 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/plugins/panel/text/editor.html
View File

@ -1,17 +1,17 @@
<div>
<div class="row-fluid">
<div class="span4">
<label class="small">Mode</label> <select class="input-medium" ng-model="panel.mode" ng-options="f for f in ['html','markdown','text']"></select>
<label class="small">Mode</label> <select class="input-medium" ng-model="panelCtrl.panel.mode" ng-options="f for f in ['html','markdown','text']"></select>
</div>
<div class="span2" ng-show="panel.mode == 'text'">
<label class="small">Font Size</label> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
<div class="span2" ng-show="panelCtrl.panel.mode == 'text'">
<label class="small">Font Size</label> <select class="input-mini" ng-model="panelCtrl.panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
</div>
</div>
<label class=small>Content
<span ng-show="panel.mode == 'markdown'">(This area uses <a target="_blank" href="http://en.wikipedia.org/wiki/Markdown">Markdown</a>. HTML is not supported)</span>
<span ng-show="panelCtrl.panel.mode == 'markdown'">(This area uses <a target="_blank" href="http://en.wikipedia.org/wiki/Markdown">Markdown</a>. HTML is not supported)</span>
</label>
<textarea ng-model="panel.content" rows="20" style="width:95%" ng-change="render()" ng-model-onblur>
<textarea ng-model="panelCtrl.panel.content" rows="20" style="width:95%" ng-change="panelCtrl.render()" ng-model-onblur>
</textarea>
</div>

4
public/app/plugins/panel/text/module.html
View File

@ -1,3 +1 @@
<grafana-panel>
<p ng-bind-html="content" ng-show="content"></p>
</grafana-panel>
<p ng-bind-html="ctrl.content" ng-show="ctrl.content"></p>

113
public/app/plugins/panel/text/module.js
View File

@ -1,113 +0,0 @@
define([
'angular',
'app/app',
'lodash',
'require',
'app/features/panel/panel_meta',
],
function (angular, app, _, require, PanelMeta) {
'use strict';
var converter;
/** @ngInject */
function TextPanelCtrl($scope, templateSrv, $sce, panelSrv) {
$scope.panelMeta = new PanelMeta({
panelName: 'Text',
editIcon: "fa fa-text-width",
fullscreen: true,
});
$scope.panelMeta.addEditorTab('Edit text', 'app/plugins/panel/text/editor.html');
// Set and populate defaults
var _d = {
title : 'default title',
mode : "markdown", // 'html', 'markdown', 'text'
content : "",
style: {},
};
_.defaults($scope.panel, _d);
$scope.init = function() {
panelSrv.init($scope);
$scope.ready = false;
$scope.render();
};
$scope.refreshData = function() {
$scope.panelMeta.loading = false;
$scope.render();
};
$scope.render = function() {
if ($scope.panel.mode === 'markdown') {
$scope.renderMarkdown($scope.panel.content);
}
else if ($scope.panel.mode === 'html') {
$scope.updateContent($scope.panel.content);
}
else if ($scope.panel.mode === 'text') {
$scope.renderText($scope.panel.content);
}
$scope.panelRenderingComplete();
};
$scope.renderText = function(content) {
content = content
.replace(/&/g, '&amp;')
.replace(/>/g, '&gt;')
.replace(/</g, '&lt;')
.replace(/\n/g, '<br/>');
$scope.updateContent(content);
};
$scope.renderMarkdown = function(content) {
var text = content
.replace(/&/g, '&amp;')
.replace(/>/g, '&gt;')
.replace(/</g, '&lt;');
if (converter) {
$scope.updateContent(converter.makeHtml(text));
}
else {
require(['vendor/showdown'], function (Showdown) {
converter = new Showdown.converter();
$scope.updateContent(converter.makeHtml(text));
});
}
};
$scope.updateContent = function(html) {
try {
$scope.content = $sce.trustAsHtml(templateSrv.replace(html, $scope.panel.scopedVars));
} catch(e) {
console.log('Text panel error: ', e);
$scope.content = $sce.trustAsHtml(html);
}
if(!$scope.$$phase) {
$scope.$digest();
}
};
$scope.openEditor = function() {
};
$scope.init();
}
function textPanel() {
return {
controller: TextPanelCtrl,
templateUrl: 'app/plugins/panel/text/module.html',
};
}
return {
panel: textPanel,
};
});

92
public/app/plugins/panel/text/module.ts Normal file
View File

@ -0,0 +1,92 @@
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import {PanelDirective, PanelCtrl} from '../../../features/panel/panel';
function optionsEditorTab() {
return {templateUrl: 'public/app/plugins/panel/text/editor.html'};
}
// Set and populate defaults
var panelDefaults = {
mode : "markdown", // 'html', 'markdown', 'text'
content : "# title",
};
export class TextPanelCtrl extends PanelCtrl {
converter: any;
content: string;
/** @ngInject */
constructor($scope, private templateSrv, private $sce) {
super($scope);
_.defaults(this.panel, panelDefaults);
this.render();
}
initEditorTabs() {
super.initEditorTabs();
this.editorTabs.push({title: 'Options', directiveFn: optionsEditorTab});
}
render() {
if (this.panel.mode === 'markdown') {
this.renderMarkdown(this.panel.content);
} else if (this.panel.mode === 'html') {
this.updateContent(this.panel.content);
} else if (this.panel.mode === 'text') {
this.renderText(this.panel.content);
}
// this.panelRenderingComplete();
}
refreshData() {
this.render();
}
renderText(content) {
content = content
.replace(/&/g, '&amp;')
.replace(/>/g, '&gt;')
.replace(/</g, '&lt;')
.replace(/\n/g, '<br/>');
this.updateContent(content);
}
renderMarkdown(content) {
var text = content
.replace(/&/g, '&amp;')
.replace(/>/g, '&gt;')
.replace(/</g, '&lt;');
if (this.converter) {
this.updateContent(this.converter.makeHtml(text));
} else {
System.import('vendor/showdown').then(Showdown => {
this.converter = new Showdown.converter();
this.updateContent(this.converter.makeHtml(text));
});
}
}
updateContent(html) {
try {
this.content = this.$sce.trustAsHtml(this.templateSrv.replace(html, this.panel.scopedVars));
} catch (e) {
console.log('Text panel error: ', e);
this.content = this.$sce.trustAsHtml(html);
}
if (!this.$scope.$$phase) {
this.$scope.$digest();
}
}
}
class TextPanel extends PanelDirective {
templateUrl = `app/plugins/panel/text/module.html`;
controller = TextPanelCtrl;
}
export {TextPanel as Panel}