No datapoints No datapoints returned from metric query
diff --git a/public/app/panels/table/module.html b/public/app/panels/table/module.html
new file mode 100644
index 00000000000..0463d751817
--- /dev/null
+++ b/public/app/panels/table/module.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/app/panels/table/module.ts b/public/app/panels/table/module.ts
new file mode 100644
index 00000000000..e65278d44a8
--- /dev/null
+++ b/public/app/panels/table/module.ts
@@ -0,0 +1,136 @@
+///
+
+import angular = require('angular');
+import $ = require('jquery');
+import _ = require('lodash');
+import moment = require('moment');
+import PanelMeta = require('app/features/panel/panel_meta');
+import TimeSeries = require('app/core/time_series');
+
+var panelDefaults = {
+ targets: [{}],
+};
+
+export class TablePanelCtrl {
+
+ constructor($scope, $rootScope, $q, panelSrv, panelHelper) {
+ $scope.ctrl = this;
+
+ $scope.panelMeta = new PanelMeta({
+ panelName: 'Table',
+ editIcon: "fa fa-table",
+ fullscreen: true,
+ metricsEditor: true,
+ });
+
+ $scope.panelMeta.addEditorTab('Options', 'app/panels/table/options.html');
+ $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html');
+
+ _.defaults($scope.panel, panelDefaults);
+
+ $scope.refreshData = function(datasource) {
+ var data = {
+ columns: [],
+ rows: [],
+ };
+
+ data.columns.push({text: 'Time'});
+ data.columns.push({text: 'Value'});
+ data.columns.push({text: 'Value2'});
+ data.rows.push([
+ moment().format('LLL'), 17.2, 15.12
+ ]);
+ data.rows.push([
+ moment().format('LLL'), 12.2, 122.3244
+ ]);
+ data.rows.push([
+ moment().format('LLL'), 111.2, 2312.22
+ ]);
+
+ panelHelper.broadcastRender($scope, data);
+
+ // panelHelper.updateTimeRange($scope);
+ //
+ // return panelHelper.issueMetricQuery($scope, datasource)
+ // .then($scope.dataHandler, function(err) {
+ // $scope.seriesList = [];
+ // $scope.render([]);
+ // throw err;
+ // });
+ };
+
+ $scope.dataHandler = function(results) {
+ $scope.seriesList = _.map(results.data, $scope.seriesHandler);
+ panelHelper.broadcastRender($scope, $scope.seriesList);
+ };
+
+ $scope.seriesHandler = function(seriesData, index) {
+ var datapoints = seriesData.datapoints;
+ var alias = seriesData.target;
+ var colorIndex = index % $rootScope.colors.length;
+ var color = $scope.panel.aliasColors[alias] || $rootScope.colors[colorIndex];
+
+ var series = new TimeSeries({
+ datapoints: datapoints,
+ alias: alias,
+ color: color,
+ });
+
+ return series;
+ };
+
+ panelSrv.init($scope);
+ }
+}
+
+export function tablePanelDirective() {
+ 'use strict';
+ return {
+ restrict: 'E',
+ templateUrl: 'app/panels/table/module.html',
+ controller: TablePanelCtrl,
+ link: function(scope, elem) {
+ var data;
+
+ function renderPanel() {
+ var rootDiv = elem.find('.table-panel-container');
+ var tableDiv = $('');
+ var i, y, rowElem, colElem, column, row;
+
+ rowElem = $('|
');
+ for (i = 0; i < data.columns.length; i++) {
+ column = data.columns[i];
+ colElem = $('' + column.text + ' | ');
+ rowElem.append(colElem);
+ }
+
+ tableDiv.append(rowElem);
+
+ for (y = 0; y < data.rows.length; y++) {
+ row = data.rows[y];
+ rowElem = $('
|
')
+ for (i = 0; i < data.columns.length; i++) {
+ colElem = $('
' + row[i] + ' | ');
+ rowElem.append(colElem);
+ }
+ tableDiv.append(rowElem);
+ }
+
+ rootDiv.empty();
+ rootDiv.append(tableDiv);
+ }
+
+ scope.$on('render', function(event, renderData) {
+ data = renderData || data;
+ if (!data) {
+ scope.get_data();
+ return;
+ }
+ renderPanel();
+ });
+ }
+ };
+}
+
+angular.module('grafana.directives').directive('grafanaPanelTable', tablePanelDirective);
+