diff --git a/ui/src/app/widget/lib/timeseries-table-widget.js b/ui/src/app/widget/lib/timeseries-table-widget.js index 58a626cb9b..28ac811f1b 100644 --- a/ui/src/app/widget/lib/timeseries-table-widget.js +++ b/ui/src/app/widget/lib/timeseries-table-widget.js @@ -47,11 +47,37 @@ function TimeseriesTableWidget() { /*@ngInject*/ function TimeseriesTableWidgetController($element, $scope, $filter) { var vm = this; + let dateFormatFilter = 'yyyy-MM-dd HH:mm:ss'; vm.sources = []; vm.sourceIndex = 0; vm.defaultPageSize = 10; vm.defaultSortOrder = '-0'; + vm.query = { + "search": null + }; + + vm.enterFilterMode = enterFilterMode; + vm.exitFilterMode = exitFilterMode; + + function enterFilterMode () { + vm.query.search = ''; + vm.ctx.hideTitlePanel = true; + } + + function exitFilterMode () { + vm.query.search = null; + vm.ctx.hideTitlePanel = false; + } + + vm.searchAction = { + name: 'action.search', + show: true, + onAction: function() { + vm.enterFilterMode(); + }, + icon: 'search' + }; $scope.$watch('vm.ctx', function() { if (vm.ctx) { @@ -64,6 +90,7 @@ function TimeseriesTableWidgetController($element, $scope, $filter) { }); function initialize() { + vm.ctx.widgetActions = [ vm.searchAction ]; vm.showTimestamp = vm.settings.showTimestamp !== false; var origColor = vm.widgetConfig.color || 'rgba(0, 0, 0, 0.87)'; var defaultColor = tinycolor(origColor); @@ -167,7 +194,7 @@ function TimeseriesTableWidgetController($element, $scope, $filter) { vm.cellContent = function(source, index, row, value) { if (index === 0) { - return $filter('date')(value, 'yyyy-MM-dd HH:mm:ss'); + return $filter('date')(value, dateFormatFilter); } else { var strContent = ''; if (angular.isDefined(value)) { @@ -291,7 +318,30 @@ function TimeseriesTableWidgetController($element, $scope, $filter) { } function reorder(source) { + let searchRegExp = new RegExp(vm.query.search); + source.data = $filter('orderBy')(source.data, source.query.order); + if (vm.query.search !== null) { + source.data = source.data.filter(function(item){ + for (let i = 0; i < item.length; i++) { + if (vm.showTimestamp) { + if (i === 0) { + if (searchRegExp.test($filter('date')(item[i], dateFormatFilter))) { + return true; + } + } else { + if (searchRegExp.test(item[i])) { + return true; + } + } + } else { + if (searchRegExp.test(item[i])) { + return true; + } + } + } + }); + } } function convertData(data) { diff --git a/ui/src/app/widget/lib/timeseries-table-widget.scss b/ui/src/app/widget/lib/timeseries-table-widget.scss index 99a06537e9..da3ee81644 100644 --- a/ui/src/app/widget/lib/timeseries-table-widget.scss +++ b/ui/src/app/widget/lib/timeseries-table-widget.scss @@ -26,4 +26,8 @@ tb-timeseries-table-widget { .md-table-pagination>* { height: 46px; } + + .tb-data-table md-toolbar { + z-index: 10; + } } diff --git a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html index 32fb8e438c..2e7286c163 100644 --- a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html +++ b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html @@ -15,33 +15,71 @@ limitations under the License. --> +
+
+ +
+ + search + + {{'entity.search' | translate}} + + + + + + + + close + + {{ 'action.close' | translate }} + + +
+
- - - - - - - - - - - - - - - -
Timestamp{{ h.dataKey.label }}
-
-
- - -
-
\ No newline at end of file + + + + + + + + + + + + + + + + +
+ Timestamp + + {{ h.dataKey.label }} +
+
+ + +
+
+
+
\ No newline at end of file