From 612a8c7dd1e25bffd7e3192aa6d5ee7e97ff97cd Mon Sep 17 00:00:00 2001
From: Vladyslav <vprykhodko@thingsboard.io>
Date: Tue, 14 Apr 2020 11:38:30 +0300
Subject: [PATCH] [3.0] Minor fix (#2615)

* Improvement tenant setting from mobile view

* Improvement timewindow setting from mobile view

* Improvement entity-view setting from mobile view

* Update license header and license config
---
 pom.xml                                       |  3 ++
 .../home/pages/tenant/tenant.component.html   |  4 +--
 .../home/pages/tenant/tenant.component.ts     |  9 +++---
 .../home/pages/tenant/tenant.module.ts        |  6 ++--
 .../tenant/tenants-table-config.resolver.ts   |  7 +---
 .../entity/entity-autocomplete.component.scss | 21 ++++++++++++
 .../entity/entity-autocomplete.component.ts   |  2 +-
 .../entity/entity-type-select.component.ts    | 16 +++++-----
 .../json-form/react/json-form-ace-editor.tsx  |  3 +-
 .../json-form/react/json-form-array.tsx       |  2 +-
 .../react/json-form-base-component.tsx        |  2 +-
 .../json-form/react/json-form-checkbox.tsx    |  2 +-
 .../json-form/react/json-form-color.tsx       |  2 +-
 .../json-form/react/json-form-css.tsx         |  2 +-
 .../json-form/react/json-form-date.tsx        |  2 +-
 .../json-form/react/json-form-fieldset.tsx    |  2 +-
 .../json-form/react/json-form-help.tsx        | 15 +++++++++
 .../json-form/react/json-form-html.tsx        |  2 +-
 .../json-form/react/json-form-image.tsx       |  2 +-
 .../json-form/react/json-form-javascript.tsx  |  2 +-
 .../json-form/react/json-form-json.tsx        |  2 +-
 .../json-form/react/json-form-number.tsx      |  2 +-
 .../json-form/react/json-form-radios.tsx      | 15 +++++++++
 .../json-form/react/json-form-rc-select.tsx   |  3 +-
 .../json-form/react/json-form-react.tsx       |  2 +-
 .../json-form/react/json-form-schema-form.tsx |  2 +-
 .../json-form/react/json-form-select.tsx      | 15 +++++++++
 .../json-form/react/json-form-text.tsx        |  2 +-
 .../time/datetime-period.component.html       |  4 +--
 .../time/datetime-period.component.scss       |  6 ++++
 .../components/time/datetime.component.scss   |  3 +-
 .../components/time/datetime.component.ts     |  6 ++--
 .../time/timeinterval.component.html          |  4 +--
 .../time/timeinterval.component.scss          |  6 ++++
 .../components/time/timeinterval.component.ts | 11 ++-----
 .../time/timewindow-panel.component.html      |  8 ++---
 .../time/timewindow-panel.component.scss      |  4 +++
 .../time/timewindow-panel.component.ts        | 20 +++---------
 .../components/time/timewindow.component.html |  4 +--
 .../components/time/timewindow.component.scss |  1 +
 .../components/time/timewindow.component.ts   | 32 ++++++-------------
 ui-ngx/src/assets/.gitkeep                    |  0
 42 files changed, 152 insertions(+), 106 deletions(-)
 create mode 100644 ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.scss
 delete mode 100644 ui-ngx/src/assets/.gitkeep

diff --git a/pom.xml b/pom.xml
index 0da9f2f5bf..7cadb38031 100755
--- a/pom.xml
+++ b/pom.xml
@@ -320,12 +320,15 @@
                             <exclude>docker/haproxy/**</exclude>
                             <exclude>docker/tb-node/**</exclude>
                             <exclude>ui/**</exclude>
+                            <exclude>src/browserslist</exclude>
+                            <exclude>**/*.raw</exclude>
                         </excludes>
                         <mapping>
                             <proto>JAVADOC_STYLE</proto>
                             <cql>DOUBLEDASHES_STYLE</cql>
                             <scss>JAVADOC_STYLE</scss>
                             <jsx>SLASHSTAR_STYLE</jsx>
+                            <tsx>SLASHSTAR_STYLE</tsx>
                             <conf>SCRIPT_STYLE</conf>
                             <gradle>JAVADOC_STYLE</gradle>
                         </mapping>
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
index 04e160b126..48c57184ab 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageTenantAdmins')"
@@ -28,7 +28,7 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{'tenant.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onTenantIdCopied($event)"
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.ts b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.ts
index b2809b980d..c8317a20c5 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.ts
@@ -18,11 +18,10 @@ import { Component, Inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Customer } from '@shared/models/customer.model';
-import {Tenant} from '@app/shared/models/tenant.model';
-import {ActionNotificationShow} from '@app/core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {ContactBasedComponent} from '../../components/entity/contact-based.component';
+import { Tenant } from '@app/shared/models/tenant.model';
+import { ActionNotificationShow } from '@app/core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { ContactBasedComponent } from '../../components/entity/contact-based.component';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.module.ts b/ui-ngx/src/app/modules/home/pages/tenant/tenant.module.ts
index 004bafd96a..4997342ad5 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.module.ts
@@ -17,9 +17,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import {TenantComponent} from '@modules/home/pages/tenant/tenant.component';
-import {TenantRoutingModule} from '@modules/home/pages/tenant/tenant-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { TenantComponent } from '@modules/home/pages/tenant/tenant.component';
+import { TenantRoutingModule } from '@modules/home/pages/tenant/tenant-routing.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { TenantTabsComponent } from '@home/pages/tenant/tenant-tabs.component';
 
 @NgModule({
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
index 14406718fa..11e1d1e466 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
@@ -27,14 +27,9 @@ import {
 import { TenantService } from '@core/http/tenant.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import {
-  EntityType,
-  entityTypeResources,
-  entityTypeTranslations
-} from '@shared/models/entity-type.models';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
 import { TenantComponent } from '@modules/home/pages/tenant/tenant.component';
 import { EntityAction } from '@home/models/entity/entity-component.models';
-import { User } from '@shared/models/user.model';
 import { TenantTabsComponent } from '@home/pages/tenant/tenant-tabs.component';
 
 @Injectable()
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.scss b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.scss
new file mode 100644
index 0000000000..a4b3fb932d
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host ::ng-deep {
+  .mat-form-field-infix {
+    width: auto;
+    min-width: 100px;
+  }
+}
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
index dc533c1e66..97f22c5de7 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
@@ -30,7 +30,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 @Component({
   selector: 'tb-entity-autocomplete',
   templateUrl: './entity-autocomplete.component.html',
-  styleUrls: [],
+  styleUrls: ['./entity-autocomplete.component.scss'],
   providers: [{
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => EntityAutocompleteComponent),
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
index 6ea4a04f76..2695867f96 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts
@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import {AfterViewInit, Component, forwardRef, Input, OnInit} from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {Store} from '@ngrx/store';
-import {AppState} from '@app/core/core.state';
-import {TranslateService} from '@ngx-translate/core';
-import {AliasEntityType, EntityType, entityTypeTranslations} from '@app/shared/models/entity-type.models';
-import {EntityService} from '@core/http/entity.service';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import { AfterViewInit, Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@app/core/core.state';
+import { TranslateService } from '@ngx-translate/core';
+import { AliasEntityType, EntityType, entityTypeTranslations } from '@app/shared/models/entity-type.models';
+import { EntityService } from '@core/http/entity.service';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   selector: 'tb-entity-type-select',
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx
index 1cc48877b8..7a631623a0 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import * as React from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
 import reactCSS from 'reactcss';
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx
index a92eb103b5..37318a2714 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
index 440e71c7a3..677544a764 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx
index 88fcc4be54..0690dbc601 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx
index aa4336dad8..39f05c737e 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx
index 552fd76843..a5107ad4db 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx
index a120c1a203..4a7f265ad8 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx
index c15c526504..ab175dbeb3 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-fieldset.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-help.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-help.tsx
index 4f328f72b0..8b09878fd3 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-help.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-help.tsx
@@ -1,3 +1,18 @@
+/*
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import * as React from 'react';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx
index bbe1c50e53..4d7d0c956f 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx
index 349d9c687b..f7f01796d5 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx
index d724d5cf95..4530434b03 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx
index d335836e21..5fc5f5d98f 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx
index 4617ee1fa4..a9c7ea5320 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx
index 85f884d331..8b2789f9c9 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx
@@ -1,3 +1,18 @@
+/*
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import * as React from 'react';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx
index 3fac3276f8..842c897e36 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import * as React from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
 import Select, {Option} from 'rc-select';
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx
index 2988a351e0..cd03f83581 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx
index bee5e63a1a..3fbfbe2a61 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx
index 565325ccf2..3695df6fe4 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx
@@ -1,3 +1,18 @@
+/*
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import * as React from 'react';
 import {
   JsonFormFieldProps,
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx
index c7045d759f..7b82468f07 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2016-2019 The Thingsboard Authors
+ * Copyright © 2016-2020 The Thingsboard Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/ui-ngx/src/app/shared/components/time/datetime-period.component.html b/ui-ngx/src/app/shared/components/time/datetime-period.component.html
index cb72c7b0ad..1ed050194f 100644
--- a/ui-ngx/src/app/shared/components/time/datetime-period.component.html
+++ b/ui-ngx/src/app/shared/components/time/datetime-period.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section fxLayout="column" fxLayoutAlign="start start">
-  <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px">
+  <section fxLayout="row" fxLayout.xs="row wrap" fxLayoutAlign="start start" fxLayoutGap="16px">
     <mat-form-field>
       <mat-placeholder translate>datetime.date-from</mat-placeholder>
       <mat-datetimepicker-toggle [for]="startDatePicker" matPrefix></mat-datetimepicker-toggle>
@@ -30,7 +30,7 @@
       <input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startTimePicker" (ngModelChange)="onStartDateChange()">
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px">
+  <section fxLayout="row" fxLayout.xs="row wrap" fxLayoutAlign="start start" fxLayoutGap="16px">
     <mat-form-field>
       <mat-placeholder translate>datetime.date-to</mat-placeholder>
       <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
diff --git a/ui-ngx/src/app/shared/components/time/datetime-period.component.scss b/ui-ngx/src/app/shared/components/time/datetime-period.component.scss
index 77c1268657..5e5a9c0ede 100644
--- a/ui-ngx/src/app/shared/components/time/datetime-period.component.scss
+++ b/ui-ngx/src/app/shared/components/time/datetime-period.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../scss/constants';
+
 :host ::ng-deep {
   .mat-form-field-wrapper {
     padding-bottom: 8px;
@@ -22,5 +24,9 @@
   }
   .mat-form-field-infix {
     width: 150px;
+
+    @media #{$mat-xs} {
+      width: 100%;
+    }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/time/datetime.component.scss b/ui-ngx/src/app/shared/components/time/datetime.component.scss
index 77c1268657..a2e27f2190 100644
--- a/ui-ngx/src/app/shared/components/time/datetime.component.scss
+++ b/ui-ngx/src/app/shared/components/time/datetime.component.scss
@@ -21,6 +21,7 @@
     bottom: 8px;
   }
   .mat-form-field-infix {
-    width: 150px;
+    width: auto;
+    min-width: 100px;
   }
 }
diff --git a/ui-ngx/src/app/shared/components/time/datetime.component.ts b/ui-ngx/src/app/shared/components/time/datetime.component.ts
index 5277147489..1574dc75c0 100644
--- a/ui-ngx/src/app/shared/components/time/datetime.component.ts
+++ b/ui-ngx/src/app/shared/components/time/datetime.component.ts
@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import {Component, forwardRef, Input, OnInit} from '@angular/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   selector: 'tb-datetime',
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.html b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
index d1d9a86887..4de184141d 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.html
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
@@ -22,7 +22,7 @@
   </section>
   <section class="interval-section" fxLayout="column" fxFlex [fxShow]="advanced && (isEdit || !hideFlag)">
     <label class="tb-small interval-label" translate>{{ predefinedName }}</label>
-    <section fxLayout="row" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
+    <section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
       <mat-form-field class="number-input">
         <mat-label translate>timeinterval.days</mat-label>
         <input matInput [disabled]="hideFlag || disabled" type="number" step="1" min="0" [(ngModel)]="days" (ngModelChange)="onTimeInputChange('days')"/>
@@ -44,7 +44,7 @@
   <section class="interval-section" fxLayout="row" fxFlex [fxShow]="!advanced && (isEdit || !hideFlag)">
     <mat-form-field fxFlex>
       <mat-label translate>{{ predefinedName }}</mat-label>
-      <mat-select matInput [disabled]="hideFlag || disabled" [(ngModel)]="intervalMs" (ngModelChange)="onIntervalMsChange()" style="min-width: 150px;">
+      <mat-select [disabled]="hideFlag || disabled" [(ngModel)]="intervalMs" (ngModelChange)="onIntervalMsChange()" style="min-width: 150px;">
         <mat-option *ngFor="let interval of intervals" [value]="interval.value">
           {{ interval.name | translate:interval.translateParams }}
         </mat-option>
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.scss b/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
index fae58d8dc6..6453b024b9 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../scss/constants';
+
 :host {
   min-width: 355px;
 
@@ -37,6 +39,10 @@
     }
   }
 
+  @media #{$mat-xs} {
+    min-width: 0;
+    width: 100%;
+  }
 }
 
 :host ::ng-deep {
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts
index a377a1986e..ff2eeb16bf 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts
@@ -14,15 +14,8 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormControl,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  Validator
-} from '@angular/forms';
-import { Timewindow } from '@shared/models/time/time.models';
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TimeInterval, TimeService } from '@core/services/time.service';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
index 43aaacea71..5c5d7cff6c 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
@@ -39,11 +39,12 @@
               <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
                             (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
             </section>
-            <section fxLayout="column" [fxShow]="isEdit || !timewindow.hideInterval">
+            <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
               <div formGroupName="history" class="mat-content mat-padding" style="padding-top: 8px;">
                 <mat-radio-group formControlName="historyType">
                   <mat-radio-button [value]="historyTypes.LAST_INTERVAL" color="primary">
                     <section fxLayout="column">
+                      <span translate>timewindow.last</span>
                       <tb-timeinterval
                         formControlName="timewindowMs"
                         predefinedName="timewindow.last"
@@ -80,7 +81,7 @@
           <section fxFlex fxLayout="column" [fxShow]="isEdit || !timewindow.hideAggregation">
             <mat-form-field>
               <mat-label translate>aggregation.function</mat-label>
-              <mat-select matInput formControlName="type" style="min-width: 150px;">
+              <mat-select formControlName="type" style="min-width: 150px;">
                 <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
                   {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
                 </mat-option>
@@ -138,8 +139,7 @@
           predefinedName="aggregation.group-interval">
         </tb-timeinterval>
       </div>
-      <div fxLayout="row" class="tb-panel-actions">
-        <span fxFlex></span>
+      <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
         <button type="submit"
                 mat-raised-button
                 color="primary"
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
index f19a298aff..9bbcc75d75 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
@@ -35,6 +35,10 @@
     margin-right: 5px;
   }
 
+  tb-timeinterval[ng-reflect-fx-show="true"] {
+    margin-bottom: -16px;
+  }
+
   .limit-slider-container {
     >:first-child {
       margin-right: 16px;
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
index dea27b8f4f..f10074f323 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
@@ -14,28 +14,16 @@
 /// limitations under the License.
 ///
 
+import { Component, Inject, InjectionToken, OnInit, ViewContainerRef } from '@angular/core';
 import {
-  Component,
-  Inject,
-  InjectionToken,
-  OnInit,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
-import {
-  Aggregation,
   aggregationTranslations,
-  AggregationType, DAY,
-  HistoryWindow,
+  AggregationType,
+  DAY,
   HistoryWindowType,
-  IntervalWindow,
   Timewindow,
   TimewindowType
 } from '@shared/models/time/time.models';
-import { DatePipe } from '@angular/common';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { OverlayRef } from '@angular/cdk/overlay';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html
index e1f7e4ea1e..cce90ea208 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html
@@ -23,7 +23,7 @@
 </button>
 <section *ngIf="!asButton" cdkOverlayOrigin #timewindowPanelOrigin="cdkOverlayOrigin"
          class="tb-timewindow" fxLayout="row" fxLayoutAlign="start center">
-  <button *ngIf="direction === 'left'" [disabled]="timewindowDisabled" mat-button mat-icon-button class="tb-mat-32"
+  <button *ngIf="direction === 'left'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
           type="button"
           (click)="openEditMode()"
           matTooltip="{{ 'timewindow.edit' | translate }}"
@@ -36,7 +36,7 @@
         [matTooltipPosition]="tooltipPosition">
     {{innerValue?.displayValue}}
   </span>
-  <button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-button mat-icon-button class="tb-mat-32"
+  <button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
           type="button"
           (click)="openEditMode()"
           matTooltip="{{ 'timewindow.edit' | translate }}"
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.scss b/ui-ngx/src/app/shared/components/time/timewindow.component.scss
index 20f23be541..a030c7e5ee 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.scss
@@ -15,6 +15,7 @@
  */
 :host {
   min-width: 52px;
+  margin: 8px 0;
   section.tb-timewindow {
     min-height: 32px;
     padding: 0 6px;
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts
index fd715906cf..649d48343e 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts
@@ -14,32 +14,19 @@
 /// limitations under the License.
 ///
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef, Inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core';
+import { Component, forwardRef, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
 import {
+  cloneSelectedTimewindow,
   HistoryWindowType,
+  initModelFromDefaultTimewindow,
   Timewindow,
-  TimewindowType,
-  initModelFromDefaultTimewindow, cloneSelectedTimewindow
+  TimewindowType
 } from '@shared/models/time/time.models';
-import { DatePipe } from '@angular/common';
-import {
-  Overlay,
-  CdkOverlayOrigin,
-  OverlayConfig,
-  OverlayPositionBuilder, ConnectedPosition, PositionStrategy, OverlayRef
-} from '@angular/cdk/overlay';
+import { DatePipe, DOCUMENT } from '@angular/common';
+import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import {
   TIMEWINDOW_PANEL_DATA,
   TimewindowPanelComponent,
@@ -48,7 +35,6 @@ import {
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { DOCUMENT } from '@angular/common';
 import { WINDOW } from '@core/services/window.service';
 import { TimeService } from '@core/services/time.service';
 import { TooltipPosition } from '@angular/material/tooltip';
@@ -163,14 +149,14 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
     if (this.timewindowDisabled) {
       return;
     }
-    const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']);
+    const isGtXs = this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
     const position = this.overlay.position();
     const config = new OverlayConfig({
       panelClass: 'tb-timewindow-panel',
       backdropClass: 'cdk-overlay-transparent-backdrop',
-      hasBackdrop: isGtSm,
+      hasBackdrop: isGtXs,
     });
-    if (isGtSm) {
+    if (isGtXs) {
       config.minWidth = '417px';
       config.maxHeight = '440px';
       const panelHeight = 375;
diff --git a/ui-ngx/src/assets/.gitkeep b/ui-ngx/src/assets/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000