[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
2020-04-14 11:38:30 +03:00 · 2020-04-14 11:38:30 +03:00 · 612a8c7dd1
commit 612a8c7dd1
parent 88ff9f4d19
42 changed files with 152 additions and 106 deletions
--- 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>
--- 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)"
--- 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({
--- 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({
--- 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()
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.scss
+++ 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;
+  }
+}
--- 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),
--- 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',
--- 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';
--- 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.
--- 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.
--- 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.
--- 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.
--- 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.
--- 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.
--- 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.
--- 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';

--- 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.
--- 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.
--- 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.
--- 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.
--- 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.
--- 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';
--- 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';
--- 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.
--- 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.
--- 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,
--- 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.
--- 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>
--- 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%;
+    }
  }
 }
--- 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;
  }
 }
--- 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',
--- 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>
--- 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 {
--- 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';

--- 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"
--- 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;
--- 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';
--- 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 }}"
--- 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;
--- 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;
--- a/ui-ngx/src/assets/.gitkeep
+++ b/ui-ngx/src/assets/.gitkeep