diff --git a/public/app/panels/table/module.html b/public/app/panels/table/module.html index 0463d751817..c85252354dc 100644 --- a/public/app/panels/table/module.html +++ b/public/app/panels/table/module.html @@ -1,4 +1,6 @@ - -
-
- +
+ +
+
+ +
diff --git a/public/app/panels/table/module.ts b/public/app/panels/table/module.ts index e65278d44a8..36094dd90b2 100644 --- a/public/app/panels/table/module.ts +++ b/public/app/panels/table/module.ts @@ -6,6 +6,7 @@ import _ = require('lodash'); import moment = require('moment'); import PanelMeta = require('app/features/panel/panel_meta'); import TimeSeries = require('app/core/time_series'); +import {TableModel} from './table_model'; var panelDefaults = { targets: [{}], @@ -29,54 +30,19 @@ export class TablePanelCtrl { _.defaults($scope.panel, panelDefaults); $scope.refreshData = function(datasource) { - var data = { - columns: [], - rows: [], - }; + panelHelper.updateTimeRange($scope); - 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; - // }); + 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; + $scope.tableModel = TableModel.transform(results.data, $scope.panel); + panelHelper.broadcastRender($scope, $scope.tableModel); }; panelSrv.init($scope); @@ -94,13 +60,13 @@ export function tablePanelDirective() { function renderPanel() { var rootDiv = elem.find('.table-panel-container'); - var tableDiv = $('
'); + 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 + ''); + colElem = $('' + column.text + ''); rowElem.append(colElem); } @@ -108,7 +74,7 @@ export function tablePanelDirective() { for (y = 0; y < data.rows.length; y++) { row = data.rows[y]; - rowElem = $('') + rowElem = $(''); for (i = 0; i < data.columns.length; i++) { colElem = $('' + row[i] + ''); rowElem.append(colElem); diff --git a/public/app/panels/table/specs/table_model_specs.ts b/public/app/panels/table/specs/table_model_specs.ts new file mode 100644 index 00000000000..7cb9575eb86 --- /dev/null +++ b/public/app/panels/table/specs/table_model_specs.ts @@ -0,0 +1,28 @@ +import {describe, beforeEach, it, sinon, expect} from 'test/lib/common'; + +import {TableModel} from '../table_model'; + +describe('when getting tableData', () => { + + describe('simple time series', () => { + var panel = { + }; + + it ('should return 2 columns', () => { + var data = TableModel.transform([ + { + target: 'test', + datapoints: [[12.12, new Date().getTime()]], + } + ], panel); + + expect(data.columns.length).to.be(2); + expect(data.rows.length).to.be(1); + + expect(data.columns[0].text).to.be('Time'); + expect(data.columns[1].text).to.be('Value'); + }); + + }); + +}); diff --git a/public/app/panels/table/table_model.ts b/public/app/panels/table/table_model.ts new file mode 100644 index 00000000000..0351f30b33b --- /dev/null +++ b/public/app/panels/table/table_model.ts @@ -0,0 +1,43 @@ +/// + +import moment = require('moment'); +import _ = require('lodash'); + +export class TableModel { + columns: any[]; + rows: any[]; + + static transform(data, panel) { + var model = new TableModel(); + + if (!data || data.length === 0) { + return model; + } + + model.columns = [ + {text: 'Time'}, + {text: 'Value'}, + ]; + model.rows = []; + + for (var i = 0; i < data.length; i++) { + var series = data[i]; + for (var y = 0; y < series.datapoints.length; y++) { + var dp = series.datapoints[y]; + var time = moment(dp[1]).format('LLL'); + var value = dp[0]; + if (value === null) { + value = 'null'; + } else if (_.isNumber(value)) { + value = value.toFixed(2); + } + + model.rows.push([time, value]); + } + } + + return model; + } +} + + diff --git a/public/less/grafana.less b/public/less/grafana.less index 6e23faa214d..e82c3b93c01 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -1,18 +1,19 @@ @import "type.less"; @import "login.less"; @import "submenu.less"; -@import "graph.less"; +@import "panel_graph.less"; +@import "panel_dashlist.less"; +@import "panel_singlestat.less"; +@import "panel_table.less"; @import "bootstrap-tagsinput.less"; @import "tables_lists.less"; @import "search.less"; @import "panel.less"; @import "forms.less"; -@import "singlestat.less"; @import "tightform.less"; @import "sidemenu.less"; @import "navbar.less"; @import "gfbox.less"; -@import "dashlist.less"; @import "admin.less"; @import "validation.less"; @import "fonts.less"; diff --git a/public/less/dashlist.less b/public/less/panel_dashlist.less similarity index 100% rename from public/less/dashlist.less rename to public/less/panel_dashlist.less diff --git a/public/less/graph.less b/public/less/panel_graph.less similarity index 100% rename from public/less/graph.less rename to public/less/panel_graph.less diff --git a/public/less/singlestat.less b/public/less/panel_singlestat.less similarity index 100% rename from public/less/singlestat.less rename to public/less/panel_singlestat.less diff --git a/public/less/panel_table.less b/public/less/panel_table.less new file mode 100644 index 00000000000..a46fb7e65b9 --- /dev/null +++ b/public/less/panel_table.less @@ -0,0 +1,49 @@ +.table-panel-wrapper { + .panel-content { + padding: 0; + } + .panel-title-container { + padding-bottom: 4px; + } +} + +.gf-table-panel* { + box-sizing: border-box; +} + +.gf-table-panel { + width: 100%; + table-layout: fixed; + border-collapse: collapse; +} + +.gf-table-panel tr { + border-bottom: 2px solid @bodyBackground; +} + +.gf-table-panel th { + background: @grafanaTargetFuncBackground; + padding: 5px 0 5px 15px; + text-align: left; + border-top: 2px solid @bodyBackground; + + &:first-child { + padding-left: 15px; + } +} + +.gf-table-panel td { + padding: 15px 0 15px 15px; + + &:first-child { + padding-left: 15px; + } +} + +.gf-table-panel .ellipsis { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +}