dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'mircopz-feature/hide-timewindow-fields'

Browse Source
This commit is contained in:
Igor Kulikov 2019-08-16 12:52:47 +03:00
commit d94907c146
13 changed files with 132 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/app/api/time.service.js
View File

@ -234,7 +234,10 @@ function TimeService($translate, $http, $q, types) {
var currentTime = (new Date).getTime(); var currentTime = (new Date).getTime();
var timewindow = { var timewindow = {
displayValue: "", displayValue: "",
selectedTab: 0, selectedTab: 0,
hideInterval: false,
hideAggregation: false,
hideAggInterval: false,
realtime: { realtime: {
interval: SECOND, interval: SECOND,
timewindowMs: MINUTE // 1 min by default timewindowMs: MINUTE // 1 min by default
@ -381,4 +384,4 @@ function TimeService($translate, $http, $q, types) {
} }
} }

3
ui/src/app/components/dashboard.tpl.html
View File

@ -56,7 +56,8 @@
<span ng-bind-html="vm.widgetTitleTooltip(widget)"></span> <span ng-bind-html="vm.widgetTitleTooltip(widget)"></span>
</md-tooltip> </md-tooltip>
</span> </span>
<tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow> <tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" is-edit="vm.isEdit"
ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
</div> </div>
<div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(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()"
ng-class="{'tb-widget-actions-absolute': !(vm.showWidgetTitlePanel(widget)&&(vm.hasWidgetTitleTemplate(widget)||vm.showWidgetTitle(widget)||vm.hasAggregation(widget)))}"> ng-class="{'tb-widget-actions-absolute': !(vm.showWidgetTitlePanel(widget)&&(vm.hasWidgetTitleTemplate(widget)||vm.showWidgetTitle(widget)||vm.hasAggregation(widget)))}">

4
ui/src/app/components/timeinterval.directive.js
View File

@ -231,7 +231,9 @@ function Timeinterval($compile, $templateCache, timeService) {
required: '=ngRequired', required: '=ngRequired',
min: '=?', min: '=?',
max: '=?', max: '=?',
predefinedName: '=?' predefinedName: '=?',
hideFlag: '=?',
isEdit: '=?'
}, },
link: linker link: linker
}; };

19
ui/src/app/components/timeinterval.tpl.html
View File

@ -16,7 +16,12 @@
--> -->
<section layout="row"> <section layout="row">
<section layout="column" flex ng-show="advanced"> <section layout="column" layout-align=" none" ng-show="isEdit">
<label class="tb-small advanced-label" translate>timewindow.hide</label>
<md-checkbox aria-label="{{ 'timewindow.hide' | translate }}" ng-model="hideFlag">
</md-checkbox>
</section>
<section layout="column" flex ng-show="advanced && (isEdit || !hideFlag)">
<label class="tb-small" translate>{{ predefinedName }}</label> <label class="tb-small" translate>{{ predefinedName }}</label>
<section layout="row" layout-align="start start" flex> <section layout="row" layout-align="start start" flex>
<md-input-container> <md-input-container>
@ -25,7 +30,7 @@
</md-input-container> </md-input-container>
<md-input-container> <md-input-container>
<label translate>timeinterval.hours</label> <label translate>timeinterval.hours</label>
<input type="number" ng-model="hours" step="1" aria-label="{{ 'timeinterval.hours' | translate }}"> <input ng-disabled="hideFlag" type="number" ng-model="hours" step="1" aria-label="{{ 'timeinterval.hours' | translate }}">
</md-input-container> </md-input-container>
<md-input-container> <md-input-container>
<label translate>timeinterval.minutes</label> <label translate>timeinterval.minutes</label>
@ -33,23 +38,23 @@
</md-input-container> </md-input-container>
<md-input-container> <md-input-container>
<label translate>timeinterval.seconds</label> <label translate>timeinterval.seconds</label>
<input type="number" ng-model="secs" step="1" aria-label="{{ 'timeinterval.seconds' | translate }}"> <input ng-disabled="hideFlag" type="number" ng-model="secs" step="1" aria-label="{{ 'timeinterval.seconds' | translate }}">
</md-input-container> </md-input-container>
</section> </section>
</section> </section>
<section layout="row" flex ng-show="!advanced"> <section layout="row" flex ng-show="!advanced && (isEdit || !hideFlag)">
<md-input-container flex> <md-input-container flex>
<label translate>{{ predefinedName }}</label> <label translate>{{ predefinedName }}</label>
<md-select ng-model="intervalMs" style="min-width: 150px;" aria-label="predefined-interval"> <md-select ng-disabled="hideFlag" ng-model="intervalMs" style="min-width: 150px;" aria-label="predefined-interval">
<md-option ng-repeat="interval in intervals" ng-value="interval.value"> <md-option ng-repeat="interval in intervals" ng-value="interval.value">
{{interval.name}} {{interval.name}}
</md-option> </md-option>
</md-select> </md-select>
</md-input-container> </md-input-container>
</section> </section>
<section layout="column" layout-align="center center"> <section layout="column" layout-align="center center" ng-show="(isEdit || !hideFlag)">
<label class="tb-small advanced-label" translate>timeinterval.advanced</label> <label class="tb-small advanced-label" translate>timeinterval.advanced</label>
<md-switch class="advanced-switch" ng-model="advanced" aria-label="predefined-switcher"> <md-switch ng-disabled="hideFlag" class="advanced-switch" ng-model="advanced" aria-label="predefined-switcher">
</md-switch> </md-switch>
</section> </section>
</section> </section>

3
ui/src/app/components/timewindow-panel.controller.js
View File

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
/*@ngInject*/ /*@ngInject*/
export default function TimewindowPanelController(mdPanelRef, $scope, timeService, types, timewindow, historyOnly, aggregation, onTimewindowUpdate) { export default function TimewindowPanelController(mdPanelRef, $scope, timeService, types, timewindow, historyOnly, aggregation, isEdit, onTimewindowUpdate) {
var vm = this; var vm = this;
@ -33,6 +33,7 @@ export default function TimewindowPanelController(mdPanelRef, $scope, timeServic
vm.maxHistoryAggInterval = maxHistoryAggInterval; vm.maxHistoryAggInterval = maxHistoryAggInterval;
vm.minDatapointsLimit = minDatapointsLimit; vm.minDatapointsLimit = minDatapointsLimit;
vm.maxDatapointsLimit = maxDatapointsLimit; vm.maxDatapointsLimit = maxDatapointsLimit;
vm.isEdit = isEdit;
if (vm.historyOnly) { if (vm.historyOnly) {
vm.timewindow.selectedTab = 1; vm.timewindow.selectedTab = 1;

128
ui/src/app/components/timewindow-panel.tpl.html
View File

@ -22,62 +22,92 @@
<md-tabs ng-class="{'tb-headless': vm.historyOnly}" md-dynamic-height md-selected="vm.timewindow.selectedTab" md-border-bottom> <md-tabs ng-class="{'tb-headless': vm.historyOnly}" md-dynamic-height md-selected="vm.timewindow.selectedTab" md-border-bottom>
<md-tab label="{{ 'timewindow.realtime' | translate }}"> <md-tab label="{{ 'timewindow.realtime' | translate }}">
<md-content class="md-padding" layout="column"> <md-content class="md-padding" layout="column">
<tb-timeinterval predefined-name="'timewindow.last'" <tb-timeinterval hide-flag="vm.timewindow.hideInterval" predefined-name="'timewindow.last'"
ng-required="vm.timewindow.selectedTab === 0" is-edit="vm.isEdit" ng-required="vm.timewindow.selectedTab === 0"
ng-model="vm.timewindow.realtime.timewindowMs" style="padding-top: 8px;"></tb-timeinterval> ng-model="vm.timewindow.realtime.timewindowMs" style="padding-top: 8px;"></tb-timeinterval>
</md-content> </md-content>
</md-tab> </md-tab>
<md-tab label="{{ 'timewindow.history' | translate }}"> <md-tab label="{{ 'timewindow.history' | translate }}">
<md-content class="md-padding" layout="column" style="padding-top: 8px;"> <section layout="row">
<md-radio-group ng-model="vm.timewindow.history.historyType" class="md-primary"> <section layout="column" class="md-padding" style="padding-top: 8px;">
<md-radio-button ng-value=0 aria-label="{{ 'timewindow.last' | translate }}" class="md-primary md-align-top-left md-radio-interactive"> <label ng-if="vm.isEdit" class="tb-small advanced-label" translate>timewindow.hide</label>
<section layout="column"> <md-checkbox ng-if="vm.isEdit" aria-label="{{ 'timewindow.hide' | translate }}"
<tb-timeinterval predefined-name="'timewindow.last'" ng-model="vm.timewindow.hideInterval">
ng-required="vm.timewindow.selectedTab === 1 && vm.timewindow.history.historyType === 0" </md-checkbox>
ng-show="vm.timewindow.history.historyType === 0" </section>
ng-model="vm.timewindow.history.timewindowMs" style="padding-top: 8px;"></tb-timeinterval> <section layout="column" flex ng-show="vm.isEdit || !vm.timewindow.hideInterval">
</section> <md-content class="md-padding" layout="column" style="padding-top: 8px;">
</md-radio-button> <md-radio-group ng-disabled="vm.timewindow.hideInterval" ng-model="vm.timewindow.history.historyType" class="md-primary">
<md-radio-button ng-value=1 aria-label="{{ 'timewindow.time-period' | translate }}" class="md-primary md-align-top-left md-radio-interactive"> <md-radio-button ng-value=0 aria-label="{{ 'timewindow.last' | translate }}" class="md-primary md-align-top-left md-radio-interactive">
<section layout="column"> <section layout="column">
<span translate>timewindow.time-period</span> <tb-timeinterval predefined-name="'timewindow.last'"
<tb-datetime-period ng-required="vm.timewindow.selectedTab === 1 && vm.timewindow.history.historyType === 0"
ng-required="vm.timewindow.selectedTab === 1 && vm.timewindow.history.historyType === 1" ng-show="vm.timewindow.history.historyType === 0"
ng-show="vm.timewindow.history.historyType === 1" ng-model="vm.timewindow.history.timewindowMs" style="padding-top: 8px;"></tb-timeinterval>
ng-model="vm.timewindow.history.fixedTimewindow" style="padding-top: 8px;"></tb-datetime-period> </section>
</section> </md-radio-button>
</md-radio-button> <md-radio-button ng-value=1 aria-label="{{ 'timewindow.time-period' | translate }}" class="md-primary md-align-top-left md-radio-interactive">
</md-radio-group> <section layout="column">
</md-content> <span translate>timewindow.time-period</span>
<tb-datetime-period
ng-required="vm.timewindow.selectedTab === 1 && vm.timewindow.history.historyType === 1"
ng-show="vm.timewindow.history.historyType === 1"
ng-model="vm.timewindow.history.fixedTimewindow" style="padding-top: 8px;"></tb-datetime-period>
</section>
</md-radio-button>
</md-radio-group>
</md-content>
</section>
</section>
</md-tab> </md-tab>
</md-tabs> </md-tabs>
<md-content ng-if="vm.aggregation" class="md-padding" layout="column"> <md-content ng-if="vm.aggregation" class="md-padding" layout="column">
<md-input-container> <section layout="row">
<label translate>aggregation.function</label> <section layout="column" style="padding-top: 5px;" ng-show="vm.isEdit">
<md-select ng-model="vm.timewindow.aggregation.type" style="min-width: 150px;"> <label class="tb-small advanced-label" translate>timewindow.hide</label>
<md-option ng-repeat="type in vm.aggregationTypes" ng-value="type.value"> <md-checkbox aria-label="{{ 'timewindow.hide' | translate }}"
{{type.name | translate}} ng-model="vm.timewindow.hideAggregation">
</md-option> </md-checkbox>
</md-select> </section>
</md-input-container> <section layout="column" flex ng-show="vm.isEdit || !vm.timewindow.hideAggregation">
<md-slider-container ng-if="vm.showLimit()"> <md-input-container>
<span translate>aggregation.limit</span> <label translate>aggregation.function</label>
<md-slider flex min="{{vm.minDatapointsLimit()}}" max="{{vm.maxDatapointsLimit()}}" step="1" <md-select ng-disabled="vm.timewindow.hideAggregation" ng-model="vm.timewindow.aggregation.type" style="min-width: 150px;">
ng-model="vm.timewindow.aggregation.limit" aria-label="limit" id="limit-slider"> <md-option ng-repeat="type in vm.aggregationTypes" ng-value="type.value">
</md-slider> {{type.name | translate}}
<md-input-container style="max-width: 80px;"> </md-option>
<input flex type="number" step="1" </md-select>
min="{{vm.minDatapointsLimit()}}" max="{{vm.maxDatapointsLimit()}}" </md-input-container>
ng-model="vm.timewindow.aggregation.limit" aria-label="limit" aria-controls="limit-slider"> </section>
</md-input-container> </section>
</md-slider-container> <section layout="row" ng-show="vm.showLimit()">
<tb-timeinterval ng-if="vm.showRealtimeAggInterval()" min="vm.minRealtimeAggInterval()" max="vm.maxRealtimeAggInterval()" <section layout="column" style="padding-top: 5px;" ng-show="vm.showLimit() && vm.isEdit">
predefined-name="'aggregation.group-interval'" <label class="tb-small advanced-label" translate>timewindow.hide</label>
ng-model="vm.timewindow.realtime.interval"> <md-checkbox aria-label="{{ 'timewindow.hide' | translate }}"
ng-model="vm.timewindow.hideAggInterval" >
</md-checkbox>
</section>
<section layout="column" flex ng-show="vm.isEdit || !vm.timewindow.hideAggInterval">
<md-slider-container>
<span translate>aggregation.limit</span>
<md-slider flex min="{{vm.minDatapointsLimit()}}" max="{{vm.maxDatapointsLimit()}}" step="1"
ng-disabled="vm.timewindow.hideAggInterval" ng-model="vm.timewindow.aggregation.limit" aria-label="limit" id="limit-slider">
</md-slider>
<md-input-container style="max-width: 80px;">
<input flex type="number" step="1" ng-disabled="vm.timewindow.hideAggInterval"
min="{{vm.minDatapointsLimit()}}" max="{{vm.maxDatapointsLimit()}}"
ng-model="vm.timewindow.aggregation.limit" aria-label="limit" aria-controls="limit-slider">
</md-input-container>
</md-slider-container>
</section>
</section>
<tb-timeinterval ng-if="vm.showRealtimeAggInterval()" min="vm.minRealtimeAggInterval()"
max="vm.maxRealtimeAggInterval()" ng-model="vm.timewindow.realtime.interval" is-edit="vm.isEdit"
hide-flag="vm.timewindow.hideAggInterval" predefined-name="'aggregation.group-interval'">
</tb-timeinterval> </tb-timeinterval>
<tb-timeinterval ng-if="vm.showHistoryAggInterval()" min="vm.minHistoryAggInterval()" max="vm.maxHistoryAggInterval()" <tb-timeinterval ng-if="vm.showHistoryAggInterval()" min="vm.minHistoryAggInterval()"
predefined-name="'aggregation.group-interval'" max="vm.maxHistoryAggInterval()" ng-model="vm.timewindow.history.interval" is-edit="vm.isEdit"
ng-model="vm.timewindow.history.interval"> hide-flag="vm.timewindow.hideAggInterval" predefined-name="'aggregation.group-interval'">
</tb-timeinterval> </tb-timeinterval>
</md-content> </md-content>
</section> </section>
@ -93,4 +123,4 @@
</section> </section>
</md-content> </md-content>
</fieldset> </fieldset>
</form> </form>

24
ui/src/app/components/timewindow.directive.js
View File

@ -42,7 +42,10 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
var linker = function (scope, element, attrs, ngModelCtrl) { var linker = function (scope, element, attrs, ngModelCtrl) {
/* tbTimewindow (ng-model) /* tbTimewindow (ng-model)
* { * {
* hideInterval: false,
* hideAggregation: false,
* hideAggInterval: false,
* realtime: { * realtime: {
* interval: 0, * interval: 0,
* timewindowMs: 0 * timewindowMs: 0
@ -64,6 +67,8 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
scope.historyOnly = angular.isDefined(attrs.historyOnly); scope.historyOnly = angular.isDefined(attrs.historyOnly);
scope.isEdit = attrs.isEdit === 'true';
scope.aggregation = scope.$eval(attrs.aggregation); scope.aggregation = scope.$eval(attrs.aggregation);
scope.isToolbar = angular.isDefined(attrs.isToolbar); scope.isToolbar = angular.isDefined(attrs.isToolbar);
@ -135,7 +140,8 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
locals: { locals: {
'timewindow': angular.copy(scope.model), 'timewindow': angular.copy(scope.model),
'historyOnly': scope.historyOnly, 'historyOnly': scope.historyOnly,
'aggregation': scope.aggregation, 'aggregation': scope.aggregation,
'isEdit': scope.isEdit,
'onTimewindowUpdate': function (timewindow) { 'onTimewindowUpdate': function (timewindow) {
scope.model = timewindow; scope.model = timewindow;
scope.updateView(); scope.updateView();
@ -176,7 +182,10 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
value.aggregation = { value.aggregation = {
type: model.aggregation.type, type: model.aggregation.type,
limit: model.aggregation.limit limit: model.aggregation.limit
}; };
value.hideInterval = model.hideInterval;
value.hideAggregation = model.hideAggregation;
value.hideAggInterval = model.hideAggInterval;
ngModelCtrl.$setViewValue(value); ngModelCtrl.$setViewValue(value);
scope.updateDisplayValue(); scope.updateDisplayValue();
} }
@ -230,6 +239,9 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
} }
model.aggregation.limit = value.aggregation.limit || Math.floor(timeService.getMaxDatapointsLimit() / 2); model.aggregation.limit = value.aggregation.limit || Math.floor(timeService.getMaxDatapointsLimit() / 2);
} }
model.hideInterval = value.hideInterval;
model.hideAggregation = value.hideAggregation;
model.hideAggInterval = value.hideAggInterval;
} }
scope.updateDisplayValue(); scope.updateDisplayValue();
}; };
@ -242,7 +254,9 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
require: "^ngModel", require: "^ngModel",
scope: { scope: {
asButton: '=asButton', asButton: '=asButton',
disabled:'=ngDisabled' disabled:'=ngDisabled',
isEdit: '=?'
}, },
link: linker link: linker
}; };
@ -279,4 +293,4 @@ function MillisecondsToTimeString($translate) {
return timeString; return timeString;
} }
} }
/* eslint-enable angular/angularelement */ /* eslint-enable angular/angularelement */

2
ui/src/app/components/widget/widget-config.tpl.html
View File

@ -34,7 +34,7 @@
<section flex layout="row" layout-align="start center" style="margin-bottom: 16px;"> <section flex layout="row" layout-align="start center" style="margin-bottom: 16px;">
<span ng-class="{'tb-disabled-label': useDashboardTimewindow}" translate style="padding-right: 8px;">widget-config.timewindow</span> <span ng-class="{'tb-disabled-label': useDashboardTimewindow}" translate style="padding-right: 8px;">widget-config.timewindow</span>
<tb-timewindow ng-disabled="useDashboardTimewindow" as-button="true" aggregation="{{ widgetType === types.widgetType.timeseries.value }}" <tb-timewindow ng-disabled="useDashboardTimewindow" as-button="true" aggregation="{{ widgetType === types.widgetType.timeseries.value }}"
flex ng-model="timewindow"></tb-timewindow> is-edit="true" flex ng-model="timewindow"></tb-timewindow>
</section> </section>
</div> </div>
<div ng-show="widgetType === types.widgetType.alarm.value" layout='column' layout-align="center" <div ng-show="widgetType === types.widgetType.alarm.value" layout='column' layout-align="center"

2
ui/src/app/dashboard/dashboard.tpl.html
View File

@ -50,7 +50,7 @@
<md-icon aria-label="{{ 'action.export' | translate }}" class="material-icons">file_download</md-icon> <md-icon aria-label="{{ 'action.export' | translate }}" class="material-icons">file_download</md-icon>
</md-button> </md-button>
<tb-timewindow ng-show="vm.isEdit || vm.displayDashboardTimewindow()" <tb-timewindow ng-show="vm.isEdit || vm.displayDashboardTimewindow()"
is-toolbar is-toolbar is-edit="vm.isEdit"
direction="left" direction="left"
tooltip-direction="bottom" aggregation="true" tooltip-direction="bottom" aggregation="true"
ng-model="vm.dashboardCtx.dashboardTimewindow"> ng-model="vm.dashboardCtx.dashboardTimewindow">

3
ui/src/app/locale/locale.constant-en_US.json
View File

@ -1412,7 +1412,8 @@
"edit": "Edit timewindow", "edit": "Edit timewindow",
"date-range": "Date range", "date-range": "Date range",
"last": "Last", "last": "Last",
"time-period": "Time period" "time-period": "Time period",
"hide": "Hide"
}, },
"user": { "user": {
"user": "User", "user": "User",

3
ui/src/app/locale/locale.constant-es_ES.json
View File

@ -1411,7 +1411,8 @@
"edit": "Editar ventana de tiempo", "edit": "Editar ventana de tiempo",
"date-range": "Rango de fecha", "date-range": "Rango de fecha",
"last": "Último(s)", "last": "Último(s)",
"time-period": "Período de tiempo" "time-period": "Período de tiempo",
"hide": "Ocultar"
}, },
"user": { "user": {
"user": "Usuario", "user": "Usuario",

3
ui/src/app/locale/locale.constant-fr_FR.json
View File

@ -1263,7 +1263,8 @@
"period": "de {{startTime}} à {{endTime}}", "period": "de {{startTime}} à {{endTime}}",
"realtime": "Temps réel", "realtime": "Temps réel",
"seconds": "{seconds, plural, 0 {second} 1 {1 second} other {# seconds}}", "seconds": "{seconds, plural, 0 {second} 1 {1 second} other {# seconds}}",
"time-period": "Période" "time-period": "Période",
"hide": "Masquer"
}, },
"user": { "user": {
"activation-email-sent-message": "L'e-mail d'activation a été envoyé avec succès!", "activation-email-sent-message": "L'e-mail d'activation a été envoyé avec succès!",

3
ui/src/app/locale/locale.constant-it_IT.json
View File

@ -1353,7 +1353,8 @@
"edit": "Modifica intervallo temporale", "edit": "Modifica intervallo temporale",
"date-range": "Intervallo date", "date-range": "Intervallo date",
"last": "Ultimo", "last": "Ultimo",
"time-period": "Intervallo temporale" "time-period": "Intervallo temporale",
"hide": "Nascondi"
}, },
"user": { "user": {
"user": "Utente", "user": "Utente",