TB-63: Improve alarms widget. Introduce auto-fill height setting for dashboard layout.

Igor Kulikov
1 parent 8a37cf0d
Showing 23 changed files with 173 additions and 76 deletions
ui/src/app/asset/assets.tpl.html
ui/src/app/common/types.constant.js
ui/src/app/common/utils.service.js
ui/src/app/components/dashboard.directive.js
ui/src/app/components/dashboard.tpl.html
ui/src/app/components/grid.directive.js
ui/src/app/components/widget.controller.js
ui/src/app/customer/customers.tpl.html
ui/src/app/dashboard/dashboard-settings.controller.js
ui/src/app/dashboard/dashboard-settings.tpl.html
ui/src/app/dashboard/layouts/dashboard-layout.tpl.html
ui/src/app/dashboard/states/dashboard-state-dialog.controller.js
ui/src/app/dashboard/states/dashboard-state-dialog.tpl.html
ui/src/app/dashboard/states/default-state-controller.js
ui/src/app/dashboard/states/entity-state-controller.js
ui/src/app/device/devices.tpl.html
ui/src/app/locale/locale.constant.js
ui/src/app/locale/translate-handler.js
ui/src/app/plugin/plugins.tpl.html
ui/src/app/rule/rules.tpl.html
--- a/ui/src/app/asset/assets.tpl.html
View file @69a0b74
+++ b/ui/src/app/asset/assets.tpl.html
View file @69a0b74
@@ -31,7 +31,7 @@
                        on-unassign-from-customer="vm.unassignFromCustomer(event, vm.grid.detailsConfig.currentItem, isPublic)"
                        on-delete-asset="vm.grid.deleteItem(event, vm.grid.detailsConfig.currentItem)"></tb-asset>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'attribute.attributes' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.attributes' | translate }}">
             <tb-attribute-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.asset}}"
@@ -39,7 +39,7 @@
                                 default-attribute-scope="{{vm.types.attributesScope.server.value}}">
             </tb-attribute-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'attribute.latest-telemetry' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.latest-telemetry' | translate }}">
             <tb-attribute-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.asset}}"
@@ -48,19 +48,19 @@
                                 disable-attribute-scope-selection="true">
             </tb-attribute-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'alarm.alarms' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'alarm.alarms' | translate }}">
             <tb-alarm-table flex entity-type="vm.types.entityType.asset"
                             entity-id="vm.grid.operatingItem().id.id">
             </tb-alarm-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'asset.events' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'asset.events' | translate }}">
             <tb-event-table flex entity-type="vm.types.entityType.asset"
                             entity-id="vm.grid.operatingItem().id.id"
                             tenant-id="vm.grid.operatingItem().tenantId.id"
                             default-event-type="{{vm.types.eventType.error.value}}">
             </tb-event-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'relation.relations' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'relation.relations' | translate }}">
             <tb-relation-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.asset}}">
--- a/ui/src/app/common/types.constant.js
View file @69a0b74
+++ b/ui/src/app/common/types.constant.js
View file @69a0b74
@@ -394,7 +394,6 @@ export default angular.module('thingsboard.types', [])
                 cards: "cards"
             },
             translate: {
-                dashboardStatePrefix: "dashboardState.state.",
                 customTranslationsPrefix: "custom."
             }
         }
--- a/ui/src/app/common/utils.service.js
View file @69a0b74
+++ b/ui/src/app/common/utils.service.js
View file @69a0b74
@@ -135,7 +135,8 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, types) {
         isLocalUrl: isLocalUrl,
         validateDatasources: validateDatasources,
         createKey: createKey,
-        createLabelFromDatasource: createLabelFromDatasource
+        createLabelFromDatasource: createLabelFromDatasource,
+        insertVariable: insertVariable
     }
     return service;
@@ -407,4 +408,18 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, types) {
         return label;
     }
+    function insertVariable(pattern, name, value) {
+        var result = angular.copy(pattern);
+        var match = varsRegex.exec(pattern);
+        while (match !== null) {
+            var variable = match[0];
+            var variableName = match[1];
+            if (variableName === name) {
+                result = result.split(variable).join(value);
+            }
+            match = varsRegex.exec(pattern);
+        }
+        return result;
+    }
+
 }
--- a/ui/src/app/components/dashboard.directive.js
View file @69a0b74
+++ b/ui/src/app/components/dashboard.directive.js
View file @69a0b74
@@ -58,6 +58,7 @@ function Dashboard() {
             columns: '=',
             margins: '=',
             isEdit: '=',
+            autofillHeight: '=',
             isMobile: '=',
             isMobileDisabled: '=?',
             isEditActionEnabled: '=',
@@ -102,6 +103,8 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     vm.isMobileDisabled = angular.isDefined(vm.isMobileDisabled) ? vm.isMobileDisabled : false;
+    vm.isMobileSize = false;
+
     if (!('dashboardTimewindow' in vm)) {
         vm.dashboardTimewindow = timeService.defaultTimewindow();
     }
@@ -178,6 +181,7 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     vm.widgetPadding = widgetPadding;
     vm.showWidgetTitle = showWidgetTitle;
     vm.showWidgetTitlePanel = showWidgetTitlePanel;
+    vm.showWidgetActions = showWidgetActions;
     vm.widgetTitleStyle = widgetTitleStyle;
     vm.widgetTitle = widgetTitle;
     vm.widgetActions = widgetActions;
@@ -271,12 +275,15 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     function updateMobileOpts() {
         var isMobileDisabled = vm.isMobileDisabled === true;
-        var isMobile = vm.isMobile === true && !isMobileDisabled;
+        var isMobile = vm.isMobile === true && !isMobileDisabled || vm.autofillHeight;
         var mobileBreakPoint = isMobileDisabled ? 0 : (isMobile ? 20000 : 960);
+
         if (!isMobile && !isMobileDisabled) {
             isMobile = !$mdMedia('gt-sm');
         }
-        var rowHeight = isMobile ? 70 : 'match';
+
+        var rowHeight = detectRowSize(isMobile);
+
         if (vm.gridsterOpts.isMobile != isMobile) {
             vm.gridsterOpts.isMobile = isMobile;
             vm.gridsterOpts.mobileModeEnabled = isMobile;
@@ -287,6 +294,17 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         if (vm.gridsterOpts.rowHeight != rowHeight) {
             vm.gridsterOpts.rowHeight = rowHeight;
         }
+
+        vm.isMobileSize = checkIsMobileSize();
+    }
+
+    function checkIsMobileSize() {
+        var isMobileDisabled = vm.isMobileDisabled === true;
+        var isMobileSize = vm.isMobile === true && !isMobileDisabled;
+        if (!isMobileSize && !isMobileDisabled) {
+            isMobileSize = !$mdMedia('gt-sm');
+        }
+        return isMobileSize;
     }
     $scope.$watch(function() { return $mdMedia('gt-sm'); }, function() {
@@ -297,6 +315,34 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         updateMobileOpts();
     });
+    $scope.$watch('vm.autofillHeight', function () {
+        if (vm.autofillHeight) {
+            //if (gridsterParent.height()) {
+            //    updateMobileOpts();
+            //} else {
+            if ($scope.parentHeighWatcher) {
+                $scope.parentHeighWatcher();
+            }
+            if (gridsterParent.height()) {
+                updateMobileOpts();
+            }
+            $scope.parentHeighWatcher = $scope.$watch(function() { return gridsterParent.height(); },
+                function(newHeight) {
+                    if (newHeight) {
+                        updateMobileOpts();
+                    }
+               }
+            );
+        } else {
+            if ($scope.parentHeighWatcher) {
+                $scope.parentHeighWatcher();
+                $scope.parentHeighWatcher = null;
+            }
+
+            updateMobileOpts();
+        }
+    });
+
     $scope.$watch('vm.isMobileDisabled', function () {
         updateMobileOpts();
     });
@@ -333,6 +379,12 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         $scope.$broadcast('toggleDashboardEditMode', vm.isEdit);
     });
+    $scope.$watch('vm.isMobileSize', function (newVal, prevVal) {
+        if (!angular.equals(newVal, prevVal)) {
+            $scope.$broadcast('mobileModeChanged', vm.isMobileSize);
+        }
+    });
+
     $scope.$on('gridster-resized', function (event, sizes, theGridster) {
         if (checkIsLocalGridsterElement(theGridster)) {
             vm.gridster = theGridster;
@@ -345,13 +397,12 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     $scope.$on('gridster-mobile-changed', function (event, theGridster) {
         if (checkIsLocalGridsterElement(theGridster)) {
             vm.gridster = theGridster;
-            var rowHeight = vm.gridster.isMobile ? 70 : 'match';
+            var rowHeight = detectRowSize(vm.gridster.isMobile);
             if (vm.gridsterOpts.rowHeight != rowHeight) {
                 vm.gridsterOpts.rowHeight = rowHeight;
                 updateGridsterParams();
             }
-
-            $scope.$broadcast('mobileModeChanged', vm.gridster.isMobile);
+            vm.isMobileSize = checkIsMobileSize();
             //TODO: widgets visibility
             /*$timeout(function () {
@@ -360,6 +411,21 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         }
     });
+    function detectRowSize(isMobile) {
+        var rowHeight = isMobile ? 70 : 'match';
+        if (vm.autofillHeight) {
+            var viewportHeight = gridsterParent.height();
+            var totalRows = 0;
+            for (var i = 0; i < vm.widgets.length; i++) {
+                var w = vm.widgets[i];
+                var sizeY = widgetSizeY(w);
+                totalRows += sizeY;
+            }
+            rowHeight = (viewportHeight - (vm.gridsterOpts.margins[1])) / totalRows;
+        }
+        return rowHeight;
+    }
+
     function widgetOrder(widget) {
         var order;
         if (vm.widgetLayouts && vm.widgetLayouts[widget.id]) {
@@ -650,7 +716,7 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     }
     function widgetSizeY(widget) {
-        if (vm.gridsterOpts.isMobile) {
+        if (vm.gridsterOpts.isMobile && !vm.autofillHeight) {
             var mobileHeight;
             if (vm.widgetLayouts && vm.widgetLayouts[widget.id]) {
                 mobileHeight = vm.widgetLayouts[widget.id].mobileHeight;
@@ -673,7 +739,7 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     }
     function setWidgetSizeY(widget, sizeY) {
-        if (!vm.gridsterOpts.isMobile) {
+        if (!vm.gridsterOpts.isMobile && !vm.autofillHeight) {
             if (vm.widgetLayouts && vm.widgetLayouts[widget.id]) {
                 vm.widgetLayouts[widget.id].sizeY = sizeY;
             } else {
@@ -759,6 +825,15 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         }
     }
+    function showWidgetActions(widget) {
+        var ctx = widgetContext(widget);
+        if (ctx && ctx.hideTitlePanel) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
     function widgetTitleStyle(widget) {
         if (angular.isDefined(widget.config.titleStyle)) {
             return widget.config.titleStyle;
--- a/ui/src/app/components/dashboard.tpl.html
View file @69a0b74
+++ b/ui/src/app/components/dashboard.tpl.html
View file @69a0b74
@@ -23,7 +23,7 @@
 </md-content>
 <md-menu md-position-mode="target target" tb-mousepoint-menu>
 	<md-content id="gridster-parent" class="tb-dashboard-content" flex layout-wrap ng-click="" tb-contextmenu="vm.openDashboardContextMenu($event, $mdOpenMousepointMenu)">
-		<div ng-class="vm.dashboardClass" id="gridster-background" style="height: auto; min-height: 100%;">
+		<div ng-class="vm.dashboardClass" id="gridster-background" style="height: auto; min-height: 100%; display: inline;">
 			<div id="gridster-child" gridster="vm.gridsterOpts">
 				<ul>
 					<li gridster-item="vm.widgetItemMap" class="tb-noselect" ng-repeat="widget in vm.widgets">
@@ -50,7 +50,7 @@
 									<span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead">{{vm.widgetTitle(widget)}}</span>
 									<tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
 								</div>
-								<div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetTitlePanel(widget)" tb-mousedown="$event.stopPropagation()">
+								<div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(widget)" tb-mousedown="$event.stopPropagation()">
 									<md-button ng-repeat="action in vm.widgetActions(widget)"
 											   aria-label="{{ action.name | translate }}"
 											   ng-show="!vm.isEdit && action.show"
@@ -103,6 +103,7 @@
 										 aliasController: vm.aliasController,
 										 stateController: vm.stateController,
 										 isEdit: vm.isEdit,
+										 isMobile: vm.isMobileSize,
 										 stDiff: vm.stDiff,
 										 dashboardTimewindow: vm.dashboardTimewindow,
 										 dashboardTimewindowApi: vm.dashboardTimewindowApi }">
--- a/ui/src/app/components/grid.directive.js
View file @69a0b74
+++ b/ui/src/app/components/grid.directive.js
View file @69a0b74
@@ -124,7 +124,7 @@ function Grid() {
 }
 /*@ngInject*/
-function GridController($scope, $state, $mdDialog, $document, $q, $timeout, $translate, $mdMedia, $templateCache) {
+function GridController($scope, $state, $mdDialog, $document, $q, $timeout, $translate, $mdMedia, $templateCache, $window) {
     var vm = this;
@@ -155,6 +155,7 @@ function GridController($scope, $state, $mdDialog, $document, $q, $timeout, $tra
     vm.refreshList = refreshList;
     vm.saveItem = saveItem;
     vm.toggleItemSelection = toggleItemSelection;
+    vm.triggerResize = triggerResize;
     $scope.$watch(function () {
         return $mdMedia('xs') || $mdMedia('sm');
@@ -600,6 +601,11 @@ function GridController($scope, $state, $mdDialog, $document, $q, $timeout, $tra
         }
     }
+    function triggerResize() {
+        var w = angular.element($window);
+        w.triggerHandler('resize');
+    }
+
     function moveToTop() {
         moveToIndex(0, true);
     }
--- a/ui/src/app/components/widget.controller.js
View file @69a0b74
+++ b/ui/src/app/components/widget.controller.js
View file @69a0b74
@@ -21,7 +21,7 @@ import Subscription from '../api/subscription';
 /*@ngInject*/
 export default function WidgetController($scope, $timeout, $window, $element, $q, $log, $injector, $filter, $compile, tbRaf, types, utils, timeService,
-                                         datasourceService, alarmService, entityService, deviceService, visibleRect, isEdit, stDiff, dashboardTimewindow,
+                                         datasourceService, alarmService, entityService, deviceService, visibleRect, isEdit, isMobile, stDiff, dashboardTimewindow,
                                          dashboardTimewindowApi, widget, aliasController, stateController, widgetInfo, widgetType) {
     var vm = this;
@@ -50,7 +50,7 @@ export default function WidgetController($scope, $timeout, $window, $element, $q
         height: 0,
         hideTitlePanel: false,
         isEdit: isEdit,
-        isMobile: false,
+        isMobile: isMobile,
         widgetConfig: widget.config,
         settings: widget.config.settings,
         units: widget.config.units || '',
@@ -618,7 +618,6 @@ export default function WidgetController($scope, $timeout, $window, $element, $q
     function gridsterItemInitialized(item) {
         if (item && item.gridster) {
-            widgetContext.isMobile = item.gridster.isMobile;
             gridsterItemInited = true;
             onInit();
             // gridsterItemElement = $(item.$element);
--- a/ui/src/app/customer/customers.tpl.html
View file @69a0b74
+++ b/ui/src/app/customer/customers.tpl.html
View file @69a0b74
@@ -31,7 +31,7 @@
 				on-manage-dashboards="vm.openCustomerDashboards(event, vm.grid.detailsConfig.currentItem)"
 				on-delete-customer="vm.grid.deleteItem(event, vm.grid.detailsConfig.currentItem)"></tb-customer>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'attribute.attributes' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.attributes' | translate }}">
 			<tb-attribute-table flex
 								entity-id="vm.grid.operatingItem().id.id"
 								entity-type="{{vm.types.entityType.customer}}"
@@ -39,7 +39,7 @@
 								default-attribute-scope="{{vm.types.attributesScope.server.value}}">
 			</tb-attribute-table>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'attribute.latest-telemetry' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.latest-telemetry' | translate }}">
 			<tb-attribute-table flex
 								entity-id="vm.grid.operatingItem().id.id"
 								entity-type="{{vm.types.entityType.customer}}"
@@ -48,19 +48,19 @@
 								disable-attribute-scope-selection="true">
 			</tb-attribute-table>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'alarm.alarms' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'alarm.alarms' | translate }}">
 			<tb-alarm-table flex entity-type="vm.types.entityType.customer"
 							entity-id="vm.grid.operatingItem().id.id">
 			</tb-alarm-table>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'customer.events' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'customer.events' | translate }}">
 			<tb-event-table flex entity-type="vm.types.entityType.customer"
 							entity-id="vm.grid.operatingItem().id.id"
 							tenant-id="vm.grid.operatingItem().tenantId.id"
 							default-event-type="{{vm.types.eventType.error.value}}">
 			</tb-event-table>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'relation.relations' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'relation.relations' | translate }}">
 			<tb-relation-table flex
 							   entity-id="vm.grid.operatingItem().id.id"
 							   entity-type="{{vm.types.entityType.customer}}">
--- a/ui/src/app/dashboard/dashboard-settings.controller.js
View file @69a0b74
+++ b/ui/src/app/dashboard/dashboard-settings.controller.js
View file @69a0b74
@@ -68,6 +68,7 @@ export default function DashboardSettingsController($scope, $mdDialog, statesCon
         vm.gridSettings.color = vm.gridSettings.color || 'rgba(0,0,0,0.870588)';
         vm.gridSettings.columns = vm.gridSettings.columns || 24;
         vm.gridSettings.margins = vm.gridSettings.margins || [10, 10];
+        vm.gridSettings.autoFillHeight = angular.isDefined(vm.gridSettings.autoFillHeight) ? vm.gridSettings.autoFillHeight : false;
         vm.hMargin = vm.gridSettings.margins[0];
         vm.vMargin = vm.gridSettings.margins[1];
         vm.gridSettings.backgroundSizeMode = vm.gridSettings.backgroundSizeMode || '100%';
--- a/ui/src/app/dashboard/dashboard-settings.tpl.html
View file @69a0b74
+++ b/ui/src/app/dashboard/dashboard-settings.tpl.html
View file @69a0b74
@@ -121,6 +121,9 @@
                                 </div>
                             </md-input-container>
                         </div>
+                        <md-checkbox flex aria-label="{{ 'dashboard.autofill-height' | translate }}"
+                                     ng-model="vm.gridSettings.autoFillHeight">{{ 'dashboard.autofill-height' | translate }}
+                        </md-checkbox>
                         <div flex
                              ng-required="false"
                              md-color-picker
--- a/ui/src/app/dashboard/layouts/dashboard-layout.tpl.html
View file @69a0b74
+++ b/ui/src/app/dashboard/layouts/dashboard-layout.tpl.html
View file @69a0b74
@@ -49,6 +49,7 @@
             state-controller="vm.dashboardCtx.stateController"
             dashboard-timewindow="vm.dashboardCtx.dashboardTimewindow"
             is-edit="vm.isEdit"
+            autofill-height="vm.layoutCtx.gridSettings.autoFillHeight && !vm.isEdit"
             is-mobile="vm.isMobile"
             is-mobile-disabled="vm.widgetEditMode"
             is-edit-action-enabled="vm.isEdit"
--- a/ui/src/app/dashboard/states/dashboard-state-dialog.controller.js
View file @69a0b74
+++ b/ui/src/app/dashboard/states/dashboard-state-dialog.controller.js
View file @69a0b74
@@ -53,12 +53,6 @@ export default function DashboardStateDialogController($scope, $mdDialog, $filte
         if (!vm.stateIdTouched && vm.isAdd) {
             vm.state.id = vm.state.name.toLowerCase().replace(/\W/g,"_");
         }
-        var result = $filter('filter')(vm.allStates, {name: vm.state.name}, true);
-        if (result && result.length && result[0].id !== vm.prevStateId) {
-            $scope.theForm.name.$setValidity('stateExists', false);
-        } else {
-            $scope.theForm.name.$setValidity('stateExists', true);
-        }
     }
     function checkStateId() {
--- a/ui/src/app/dashboard/states/dashboard-state-dialog.tpl.html
View file @69a0b74
+++ b/ui/src/app/dashboard/states/dashboard-state-dialog.tpl.html
View file @69a0b74
@@ -37,18 +37,15 @@
                             <input name="name" required ng-model="vm.state.name">
                             <div ng-messages="theForm.name.$error">
                                 <div ng-message="required" translate>dashboard.state-name-required</div>
-                                <div ng-message="stateExists" translate>dashboard.state-name-exists</div>
                             </div>
                         </md-input-container>
                         <md-input-container class="md-block">
                             <label translate>dashboard.state-id</label>
-                            <input name="stateId" ng-model="vm.state.id"
-                                   ng-change="vm.stateIdTouched = true"
-                                   ng-pattern="/^[a-zA-Z0-9_]*$/">
+                            <input name="stateId" required ng-model="vm.state.id"
+                                   ng-change="vm.stateIdTouched = true">
                             <div ng-messages="theForm.stateId.$error">
                                 <div ng-message="required" translate>dashboard.state-id-required</div>
                                 <div ng-message="stateExists" translate>dashboard.state-id-exists</div>
-                                <div ng-message="pattern" translate>dashboard.invalid-state-id-format</div>
                             </div>
                         </md-input-container>
                         <md-checkbox flex aria-label="{{ 'dashboard.is-root-state' | translate }}"
--- a/ui/src/app/dashboard/states/default-state-controller.js
View file @69a0b74
+++ b/ui/src/app/dashboard/states/default-state-controller.js
View file @69a0b74
@@ -97,10 +97,10 @@ export default function DefaultStateController($scope, $location, $state, $state
     function getStateName(id, state) {
         var result = '';
-        var translationId = types.translate.dashboardStatePrefix + id;
+        var translationId = types.translate.customTranslationsPrefix + state.name;
         var translation = $translate.instant(translationId);
         if (translation != translationId) {
-            result = translation;
+            result = translation + '';
         } else {
             result = state.name;
         }
--- a/ui/src/app/dashboard/states/entity-state-controller.js
View file @69a0b74
+++ b/ui/src/app/dashboard/states/entity-state-controller.js
View file @69a0b74
@@ -17,7 +17,7 @@
 import './entity-state-controller.scss';
 /*@ngInject*/
-export default function EntityStateController($scope, $location, $state, $stateParams, $q, $translate, types, dashboardUtils, entityService) {
+export default function EntityStateController($scope, $location, $state, $stateParams, $q, $translate, utils, types, dashboardUtils, entityService) {
     var vm = this;
@@ -106,18 +106,17 @@ export default function EntityStateController($scope, $location, $state, $stateP
     function getStateName(index) {
         var result = '';
         if (vm.stateObject[index]) {
+            var stateName = vm.states[vm.stateObject[index].id].name;
+            var translationId = types.translate.customTranslationsPrefix + stateName;
+            var translation = $translate.instant(translationId);
+            if (translation != translationId) {
+                stateName = translation + '';
+            }
             var params = vm.stateObject[index].params;
             if (params && params.entityName) {
-                result = params.entityName;
+                result = utils.insertVariable(stateName, 'entityName', params.entityName);
             } else {
-                var id = vm.stateObject[index].id;
-                var translationId = types.translate.dashboardStatePrefix + id;
-                var translation = $translate.instant(translationId);
-                if (translation != translationId) {
-                    result = translation;
-                } else {
-                    result = vm.states[vm.stateObject[index].id].name;
-                }
+                result = stateName;
             }
         }
         return result;
--- a/ui/src/app/device/devices.tpl.html
View file @69a0b74
+++ b/ui/src/app/device/devices.tpl.html
View file @69a0b74
@@ -32,7 +32,7 @@
                        on-manage-credentials="vm.manageCredentials(event, vm.grid.detailsConfig.currentItem)"
                        on-delete-device="vm.grid.deleteItem(event, vm.grid.detailsConfig.currentItem)"></tb-device>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'attribute.attributes' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.attributes' | translate }}">
             <tb-attribute-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.device}}"
@@ -40,7 +40,7 @@
                                 default-attribute-scope="{{vm.types.attributesScope.client.value}}">
             </tb-attribute-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'attribute.latest-telemetry' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.latest-telemetry' | translate }}">
             <tb-attribute-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.device}}"
@@ -49,19 +49,19 @@
                                 disable-attribute-scope-selection="true">
             </tb-attribute-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'alarm.alarms' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'alarm.alarms' | translate }}">
             <tb-alarm-table flex entity-type="vm.types.entityType.device"
                             entity-id="vm.grid.operatingItem().id.id">
             </tb-alarm-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'device.events' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'device.events' | translate }}">
             <tb-event-table flex entity-type="vm.types.entityType.device"
                             entity-id="vm.grid.operatingItem().id.id"
                             tenant-id="vm.grid.operatingItem().tenantId.id"
                             default-event-type="{{vm.types.eventType.error.value}}">
             </tb-event-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'relation.relations' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'relation.relations' | translate }}">
             <tb-relation-table flex
                                entity-id="vm.grid.operatingItem().id.id"
                                entity-type="{{vm.types.entityType.device}}">
--- a/ui/src/app/locale/locale.constant.js
View file @69a0b74
+++ b/ui/src/app/locale/locale.constant.js
View file @69a0b74
@@ -431,6 +431,7 @@ export default angular.module('thingsboard.locale', [])
                     "vertical-margin-required": "Vertical margin value is required.",
                     "min-vertical-margin-message": "Only 0 is allowed as minimum vertical margin value.",
                     "max-vertical-margin-message": "Only 50 is allowed as maximum vertical margin value.",
+                    "autofill-height": "Auto fill layout height",
                     "display-title": "Display dashboard title",
                     "toolbar-always-open": "Keep toolbar opened",
                     "title-color": "Title color",
@@ -472,11 +473,9 @@ export default angular.module('thingsboard.locale', [])
                     "state": "Dashboard state",
                     "state-name": "Name",
                     "state-name-required": "Dashboard state name is required.",
-                    "state-name-exists": "Dashboard state with the same name is already exists.",
                     "state-id": "State Id",
                     "state-id-required": "Dashboard state id is required.",
                     "state-id-exists": "Dashboard state with the same id is already exists.",
-                    "invalid-state-id-format": "Only alphanumeric characters and underscore are allowed.",
                     "is-root-state": "Root state",
                     "delete-state-title": "Delete dashboard state",
                     "delete-state-text": "Are you sure you want delete dashboard state with name '{{stateName}}'?",
@@ -1169,9 +1168,6 @@ export default angular.module('thingsboard.locale', [])
                     "es_ES": "Spanish"
                 },
                 "custom": {
-                    "alarms": {
-                        "title": "Super ${entityName}"
-                    }
                 }
             }
         }
--- a/ui/src/app/locale/translate-handler.js
View file @69a0b74
+++ b/ui/src/app/locale/translate-handler.js
View file @69a0b74
@@ -18,8 +18,7 @@
 export default function ThingsboardMissingTranslateHandler($log, types) {
     return function (translationId) {
-        if (translationId && !translationId.startsWith(types.translate.dashboardStatePrefix) &&
-                             !translationId.startsWith(types.translate.customTranslationsPrefix)) {
+        if (translationId && !translationId.startsWith(types.translate.customTranslationsPrefix)) {
             $log.warn('Translation for ' + translationId + ' doesn\'t exist');
         }
     };
--- a/ui/src/app/plugin/plugins.tpl.html
View file @69a0b74
+++ b/ui/src/app/plugin/plugins.tpl.html
View file @69a0b74
@@ -31,7 +31,7 @@
                  on-export-plugin="vm.exportPlugin(event, vm.grid.detailsConfig.currentItem)"
                  on-delete-plugin="vm.grid.deleteItem(event, vm.grid.detailsConfig.currentItem)"></tb-plugin>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" label="{{ 'attribute.attributes' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.attributes' | translate }}">
             <tb-attribute-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.plugin}}"
@@ -39,7 +39,7 @@
                                 default-attribute-scope="{{vm.types.attributesScope.server.value}}">
             </tb-attribute-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" label="{{ 'attribute.latest-telemetry' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.latest-telemetry' | translate }}">
             <tb-attribute-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.plugin}}"
@@ -48,19 +48,19 @@
                                 disable-attribute-scope-selection="true">
             </tb-attribute-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" label="{{ 'alarm.alarms' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'alarm.alarms' | translate }}">
             <tb-alarm-table flex entity-type="vm.types.entityType.plugin"
                             entity-id="vm.grid.operatingItem().id.id">
             </tb-alarm-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" label="{{ 'plugin.events' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'plugin.events' | translate }}">
             <tb-event-table flex entity-type="vm.types.entityType.plugin"
                             entity-id="vm.grid.operatingItem().id.id"
                             tenant-id="vm.grid.operatingItem().tenantId.id"
                             default-event-type="{{vm.types.eventType.lcEvent.value}}">
             </tb-event-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" label="{{ 'relation.relations' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isPluginEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'relation.relations' | translate }}">
             <tb-relation-table flex
                                entity-id="vm.grid.operatingItem().id.id"
                                entity-type="{{vm.types.entityType.plugin}}">
--- a/ui/src/app/rule/rules.tpl.html
View file @69a0b74
+++ b/ui/src/app/rule/rules.tpl.html
View file @69a0b74
@@ -31,7 +31,7 @@
                                on-export-rule="vm.exportRule(event, vm.grid.detailsConfig.currentItem)"
                                on-delete-rule="vm.grid.deleteItem(event, vm.grid.detailsConfig.currentItem)"></tb-rule>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" label="{{ 'attribute.attributes' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.attributes' | translate }}">
             <tb-attribute-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.rule}}"
@@ -39,7 +39,7 @@
                                 default-attribute-scope="{{vm.types.attributesScope.server.value}}">
             </tb-attribute-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" label="{{ 'attribute.latest-telemetry' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.latest-telemetry' | translate }}">
             <tb-attribute-table flex
                                 entity-id="vm.grid.operatingItem().id.id"
                                 entity-type="{{vm.types.entityType.rule}}"
@@ -48,19 +48,19 @@
                                 disable-attribute-scope-selection="true">
             </tb-attribute-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" label="{{ 'alarm.alarms' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'alarm.alarms' | translate }}">
             <tb-alarm-table flex entity-type="vm.types.entityType.rule"
                             entity-id="vm.grid.operatingItem().id.id">
             </tb-alarm-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" label="{{ 'rule.events' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'rule.events' | translate }}">
             <tb-event-table flex entity-type="vm.types.entityType.rule"
                             entity-id="vm.grid.operatingItem().id.id"
                             tenant-id="vm.grid.operatingItem().tenantId.id"
                             default-event-type="{{vm.types.eventType.lcEvent.value}}">
             </tb-event-table>
         </md-tab>
-        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" label="{{ 'relation.relations' | translate }}">
+        <md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode && vm.isRuleEditable(vm.grid.operatingItem())" md-on-select="vm.grid.triggerResize()" label="{{ 'relation.relations' | translate }}">
             <tb-relation-table flex
                                entity-id="vm.grid.operatingItem().id.id"
                                entity-type="{{vm.types.entityType.rule}}">
--- a/ui/src/app/tenant/tenants.tpl.html
View file @69a0b74
+++ b/ui/src/app/tenant/tenants.tpl.html
View file @69a0b74
@@ -29,7 +29,7 @@
 				   on-manage-users="vm.openTenantUsers(event, vm.grid.detailsConfig.currentItem)"
 				   on-delete-tenant="vm.grid.deleteItem(event, vm.grid.detailsConfig.currentItem)"></tb-tenant>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'attribute.attributes' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.attributes' | translate }}">
 			<tb-attribute-table flex
 								entity-id="vm.grid.operatingItem().id.id"
 								entity-type="{{vm.types.entityType.tenant}}"
@@ -37,7 +37,7 @@
 								default-attribute-scope="{{vm.types.attributesScope.server.value}}">
 			</tb-attribute-table>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'attribute.latest-telemetry' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'attribute.latest-telemetry' | translate }}">
 			<tb-attribute-table flex
 								entity-id="vm.grid.operatingItem().id.id"
 								entity-type="{{vm.types.entityType.tenant}}"
@@ -46,19 +46,19 @@
 								disable-attribute-scope-selection="true">
 			</tb-attribute-table>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'alarm.alarms' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'alarm.alarms' | translate }}">
 			<tb-alarm-table flex entity-type="vm.types.entityType.tenant"
 							entity-id="vm.grid.operatingItem().id.id">
 			</tb-alarm-table>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'tenant.events' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'tenant.events' | translate }}">
 			<tb-event-table flex entity-type="vm.types.entityType.tenant"
 							entity-id="vm.grid.operatingItem().id.id"
 							tenant-id="vm.types.id.nullUid"
 							default-event-type="{{vm.types.eventType.error.value}}">
 			</tb-event-table>
 		</md-tab>
-		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" label="{{ 'relation.relations' | translate }}">
+		<md-tab ng-if="!vm.grid.detailsConfig.isDetailsEditMode" md-on-select="vm.grid.triggerResize()" label="{{ 'relation.relations' | translate }}">
 			<tb-relation-table flex
 							   entity-id="vm.grid.operatingItem().id.id"
 							   entity-type="{{vm.types.entityType.tenant}}">
--- a/ui/src/app/widget/lib/alarms-table-widget.js
View file @69a0b74
+++ b/ui/src/app/widget/lib/alarms-table-widget.js
View file @69a0b74
@@ -210,6 +210,9 @@ function AlarmsTableWidgetController($element, $scope, $filter, $mdMedia, $mdDia
         var cssString = 'table.md-table th.md-column {\n'+
             'color: ' + mdDarkSecondary + ';\n'+
             '}\n'+
+            'table.md-table th.md-column.md-checkbox-column md-checkbox:not(.md-checked) .md-icon {\n'+
+            'border-color: ' + mdDarkSecondary + ';\n'+
+            '}\n'+
             'table.md-table th.md-column md-icon.md-sort-icon {\n'+
             'color: ' + mdDarkDisabled + ';\n'+
             '}\n'+
@@ -220,6 +223,9 @@ function AlarmsTableWidgetController($element, $scope, $filter, $mdMedia, $mdDia
             'color: ' + mdDark + ';\n'+
             'border-top: 1px '+mdDarkDivider+' solid;\n'+
             '}\n'+
+            'table.md-table td.md-cell.md-checkbox-cell md-checkbox:not(.md-checked) .md-icon {\n'+
+            'border-color: ' + mdDarkSecondary + ';\n'+
+            '}\n'+
             'table.md-table td.md-cell.md-placeholder {\n'+
             'color: ' + mdDarkDisabled + ';\n'+
             '}\n'+
--- a/ui/src/scss/main.scss
View file @69a0b74
+++ b/ui/src/scss/main.scss
View file @69a0b74
@@ -324,8 +324,14 @@ pre.tb-highlight {
         tr {
           &.md-row:not([disabled]) {
             outline: none;
+            &:hover {
+              background-color: rgba(221, 221, 221, 0.3) !important;
+            }
+            &.md-selected {
+              background-color: rgba(221, 221, 221, 0.5) !important;
+            }
             &.tb-current, &.tb-current:hover{
-              background-color: #dddddd !important;
+              background-color: rgba(221, 221, 221, 0.65) !important;
             }
           }
         }