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 025888cc76..34d1909e38 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
@@ -15,222 +15,229 @@
     limitations under the License.
 
 -->
-<form [formGroup]="timewindowForm" (ngSubmit)="update()">
-  <fieldset [disabled]="(isLoading$ | async)">
-    <div class="mat-content" fxLayout="column">
-      <mat-tab-group dynamicHeight [ngClass]="{'tb-headless': historyOnly}"
-                     (selectedIndexChange)="timewindowForm.markAsDirty()" [(selectedIndex)]="timewindow.selectedTab">
-        <mat-tab label="{{ 'timewindow.realtime' | translate }}">
-          <section fxLayout="row">
-            <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-top: 8px; padding-left: 16px;">
-              <label class="tb-small hide-label" translate>timewindow.hide</label>
-              <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
-                            (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
-            </section>
-            <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
-              <div formGroupName="realtime" class="mat-content mat-padding" style="padding-top: 8px;">
-                <mat-radio-group *ngIf="!quickIntervalOnly" [fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
-                                 formControlName="realtimeType">
-                  <mat-radio-button [value]="realtimeTypes.LAST_INTERVAL" color="primary">
-                    <section fxLayout="row">
-                      <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
-                        <label class="tb-small hide-label" translate>timewindow.hide</label>
-                        <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideLastInterval"
-                                      (ngModelChange)="onHideLastIntervalChanged()"></mat-checkbox>
-                      </section>
-                      <section fxLayout="column">
-                        <span translate>timewindow.last</span>
-                        <tb-timeinterval
-                          formControlName="timewindowMs"
-                          predefinedName="timewindow.last"
-                          [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
-                          [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
-                                  timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
-                          style="padding-top: 8px;"></tb-timeinterval>
-                      </section>
-                    </section>
-                  </mat-radio-button>
-                  <mat-radio-button [value]="realtimeTypes.INTERVAL" color="primary">
-                    <section fxLayout="row">
-                      <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
-                        <label class="tb-small hide-label" translate>timewindow.hide</label>
-                        <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideQuickInterval"
-                                      (ngModelChange)="onHideQuickIntervalChanged()"></mat-checkbox>
-                      </section>
-                      <section fxLayout="column">
-                        <span translate>timewindow.interval</span>
-                        <tb-quick-time-interval
-                          formControlName="quickInterval"
-                          onlyCurrentInterval="true"
-                          [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
-                          [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
-                                  timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
-                          style="padding-top: 8px"></tb-quick-time-interval>
-                      </section>
-                    </section>
-                  </mat-radio-button>
-                </mat-radio-group>
-                <tb-timeinterval *ngIf="!isEdit && !timewindow.hideLastInterval && timewindow.hideQuickInterval"
-                  formControlName="timewindowMs"
-                  predefinedName="timewindow.last"
-                  required
-                  style="padding-top: 8px;"></tb-timeinterval>
-                <tb-quick-time-interval *ngIf="quickIntervalOnly || !isEdit && timewindow.hideLastInterval && !timewindow.hideQuickInterval"
-                  formControlName="quickInterval"
-                  onlyCurrentInterval="true"
-                  required
-                  style="padding-top: 8px"></tb-quick-time-interval>
-              </div>
-            </section>
-          </section>
-        </mat-tab>
-        <mat-tab label="{{ 'timewindow.history' | translate }}">
-          <section fxLayout="row">
-            <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-top: 8px; padding-left: 16px;">
-              <label class="tb-small hide-label" translate>timewindow.hide</label>
-              <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
-                            (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
-            </section>
-            <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"
-                        class="history-time-input"
-                        [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
-                        [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
-                                timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
-                        style="padding-top: 8px;"></tb-timeinterval>
-                    </section>
-                  </mat-radio-button>
-                  <mat-radio-button [value]="historyTypes.FIXED" color="primary">
-                    <section fxLayout="column">
-                      <span translate>timewindow.time-period</span>
-                      <tb-datetime-period
-                        formControlName="fixedTimewindow"
-                        class="history-time-input"
-                        [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
-                        [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
-                                timewindowForm.get('history.historyType').value === historyTypes.FIXED"
-                        style="padding-top: 8px;"></tb-datetime-period>
-                    </section>
-                  </mat-radio-button>
-                  <mat-radio-button [value]="historyTypes.INTERVAL" color="primary">
-                    <section fxLayout="column">
-                      <span translate>timewindow.interval</span>
-                      <tb-quick-time-interval
-                        formControlName="quickInterval"
-                        class="history-time-input"
-                        [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
-                        [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
-                              timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
-                        style="padding-top: 8px"></tb-quick-time-interval>
-                    </section>
-                  </mat-radio-button>
-                </mat-radio-group>
-              </div>
-            </section>
-          </section>
-        </mat-tab>
-      </mat-tab-group>
-      <div *ngIf="aggregation" formGroupName="aggregation" class="mat-content mat-padding" fxLayout="column">
-        <section fxLayout="row">
-          <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
-            <label class="tb-small hide-label" translate>timewindow.hide</label>
-            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggregation"
-                          (ngModelChange)="onHideAggregationChanged()"></mat-checkbox>
-          </section>
-          <section fxFlex fxLayout="column" [fxShow]="isEdit || !timewindow.hideAggregation">
-            <mat-form-field>
-              <mat-label translate>aggregation.function</mat-label>
-              <mat-select formControlName="type" style="min-width: 150px;">
-                <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
-                  {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </section>
+<form [formGroup]="timewindowForm" class="mat-content">
+  <mat-tab-group [ngClass]="{'tb-headless': historyOnly}"
+                 (selectedIndexChange)="timewindowForm.markAsDirty()" [(selectedIndex)]="timewindow.selectedTab">
+    <mat-tab label="{{ 'timewindow.realtime' | translate }}">
+      <section fxLayout="row">
+        <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center"
+                 style="padding-top: 8px; padding-left: 16px;">
+          <label class="tb-small hide-label" translate>timewindow.hide</label>
+          <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
+                        (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
         </section>
-        <section fxLayout="row" *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
-          <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
-            <label class="tb-small hide-label" translate>timewindow.hide</label>
-            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval"
-                          (ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox>
-          </section>
-          <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval">
-            <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
-                                                fxLayout.xs="column"  fxLayoutAlign.xs="stretch">
-              <label translate>aggregation.limit</label>
-              <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
-                <mat-slider fxFlex
-                            discrete
-                            min="{{minDatapointsLimit()}}"
-                            max="{{maxDatapointsLimit()}}"><input matSliderThumb formControlName="limit" />
-                </mat-slider>
-                <mat-form-field class="limit-slider-value">
-                  <input matInput formControlName="limit" type="number" step="1"
-                         [value]="timewindowForm.get('aggregation.limit').value"
-                         min="{{minDatapointsLimit()}}"
-                         max="{{maxDatapointsLimit()}}"/>
-                </mat-form-field>
-              </div>
-            </div>
-          </section>
+        <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
+          <div formGroupName="realtime" class="mat-content mat-padding" style="padding-top: 8px;">
+            <mat-radio-group *ngIf="!quickIntervalOnly"
+                             [fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
+                             formControlName="realtimeType">
+              <mat-radio-button [value]="realtimeTypes.LAST_INTERVAL" color="primary">
+                <section fxLayout="row">
+                  <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
+                    <label class="tb-small hide-label" translate>timewindow.hide</label>
+                    <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideLastInterval"
+                                  (ngModelChange)="onHideLastIntervalChanged()"></mat-checkbox>
+                  </section>
+                  <section fxLayout="column">
+                    <span translate>timewindow.last</span>
+                    <tb-timeinterval
+                      formControlName="timewindowMs"
+                      predefinedName="timewindow.last"
+                      [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
+                      [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+                                timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
+                      style="padding-top: 8px;"></tb-timeinterval>
+                  </section>
+                </section>
+              </mat-radio-button>
+              <mat-radio-button [value]="realtimeTypes.INTERVAL" color="primary">
+                <section fxLayout="row">
+                  <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
+                    <label class="tb-small hide-label" translate>timewindow.hide</label>
+                    <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideQuickInterval"
+                                  (ngModelChange)="onHideQuickIntervalChanged()"></mat-checkbox>
+                  </section>
+                  <section fxLayout="column">
+                    <span translate>timewindow.interval</span>
+                    <tb-quick-time-interval
+                      formControlName="quickInterval"
+                      onlyCurrentInterval="true"
+                      [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
+                      [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+                                timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
+                      style="padding-top: 8px"></tb-quick-time-interval>
+                  </section>
+                </section>
+              </mat-radio-button>
+            </mat-radio-group>
+            <tb-timeinterval *ngIf="!isEdit && !timewindow.hideLastInterval && timewindow.hideQuickInterval"
+                             formControlName="timewindowMs"
+                             predefinedName="timewindow.last"
+                             required
+                             style="padding-top: 8px;"></tb-timeinterval>
+            <tb-quick-time-interval
+              *ngIf="quickIntervalOnly || !isEdit && timewindow.hideLastInterval && !timewindow.hideQuickInterval"
+              formControlName="quickInterval"
+              onlyCurrentInterval="true"
+              required
+              style="padding-top: 8px"></tb-quick-time-interval>
+          </div>
+        </section>
+      </section>
+      <ng-container *ngTemplateOutlet="additionalData">
+      </ng-container>
+    </mat-tab>
+    <mat-tab label="{{ 'timewindow.history' | translate }}">
+      <section fxLayout="row">
+        <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center"
+                 style="padding-top: 8px; padding-left: 16px;">
+          <label class="tb-small hide-label" translate>timewindow.hide</label>
+          <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
+                        (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
+        </section>
+        <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"
+                    class="history-time-input"
+                    [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
+                    [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+                              timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
+                    style="padding-top: 8px;"></tb-timeinterval>
+                </section>
+              </mat-radio-button>
+              <mat-radio-button [value]="historyTypes.FIXED" color="primary">
+                <section fxLayout="column">
+                  <span translate>timewindow.time-period</span>
+                  <tb-datetime-period
+                    formControlName="fixedTimewindow"
+                    class="history-time-input"
+                    [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
+                    [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+                              timewindowForm.get('history.historyType').value === historyTypes.FIXED"
+                    style="padding-top: 8px;"></tb-datetime-period>
+                </section>
+              </mat-radio-button>
+              <mat-radio-button [value]="historyTypes.INTERVAL" color="primary">
+                <section fxLayout="column">
+                  <span translate>timewindow.interval</span>
+                  <tb-quick-time-interval
+                    formControlName="quickInterval"
+                    class="history-time-input"
+                    [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
+                    [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+                            timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
+                    style="padding-top: 8px"></tb-quick-time-interval>
+                </section>
+              </mat-radio-button>
+            </mat-radio-group>
+          </div>
+        </section>
+      </section>
+      <ng-container *ngTemplateOutlet="additionalData">
+      </ng-container>
+    </mat-tab>
+  </mat-tab-group>
+  <ng-template #additionalData>
+    <div *ngIf="aggregation" formGroupName="aggregation" class="mat-content mat-padding" fxLayout="column">
+      <section fxLayout="row">
+        <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
+          <label class="tb-small hide-label" translate>timewindow.hide</label>
+          <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggregation"
+                        (ngModelChange)="onHideAggregationChanged()"></mat-checkbox>
+        </section>
+        <section fxFlex fxLayout="column" [fxShow]="isEdit || !timewindow.hideAggregation">
+          <mat-form-field>
+            <mat-label translate>aggregation.function</mat-label>
+            <mat-select formControlName="type" style="min-width: 150px;">
+              <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
+                {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
         </section>
-      </div>
-      <div formGroupName="realtime"
-           *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
-           timewindow.selectedTab === timewindowTypes.REALTIME" class="mat-content mat-padding" fxLayout="column">
-        <tb-timeinterval
-          formControlName="interval"
-          [isEdit]="isEdit"
-          [(hideFlag)]="timewindow.hideAggInterval"
-          (hideFlagChange)="onHideAggIntervalChanged()"
-          [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
-          predefinedName="aggregation.group-interval">
-        </tb-timeinterval>
-      </div>
-      <div formGroupName="history"
-           *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
-           timewindow.selectedTab === timewindowTypes.HISTORY" class="mat-content mat-padding" fxLayout="column">
-        <tb-timeinterval
-          formControlName="interval"
-          [isEdit]="isEdit"
-          [(hideFlag)]="timewindow.hideAggInterval"
-          (hideFlagChange)="onHideAggIntervalChanged()"
-          [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
-          predefinedName="aggregation.group-interval">
-        </tb-timeinterval>
-      </div>
-      <div *ngIf="timezone" class="mat-content mat-padding" fxLayout="row">
+      </section>
+      <section fxLayout="row" *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
         <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
           <label class="tb-small hide-label" translate>timewindow.hide</label>
-          <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideTimezone"
-                        (ngModelChange)="onHideTimezoneChanged()"></mat-checkbox>
+          <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval"
+                        (ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox>
+        </section>
+        <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval">
+          <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
+               fxLayout.xs="column" fxLayoutAlign.xs="stretch">
+            <label translate>aggregation.limit</label>
+            <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
+              <mat-slider fxFlex
+                          discrete
+                          min="{{minDatapointsLimit()}}"
+                          max="{{maxDatapointsLimit()}}"><input matSliderThumb formControlName="limit"/>
+              </mat-slider>
+              <mat-form-field class="limit-slider-value">
+                <input matInput formControlName="limit" type="number" step="1"
+                       [value]="timewindowForm.get('aggregation.limit').value"
+                       min="{{minDatapointsLimit()}}"
+                       max="{{maxDatapointsLimit()}}"/>
+              </mat-form-field>
+            </div>
+          </div>
         </section>
-        <tb-timezone-select fxFlex [fxShow]="isEdit || !timewindow.hideTimezone"
-                        localBrowserTimezonePlaceholderOnEmpty="true"
-                        formControlName="timezone">
-        </tb-timezone-select>
-      </div>
-      <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
-        <button type="button"
-                mat-button
-                [disabled]="(isLoading$ | async)"
-                (click)="cancel()">
-          {{ 'action.cancel' | translate }}
-        </button>
-        <button type="submit"
-                mat-raised-button
-                color="primary"
-                [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
-            {{ 'action.update' | translate }}
-        </button>
-      </div>
+      </section>
+    </div>
+    <div formGroupName="realtime"
+         *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
+         timewindow.selectedTab === timewindowTypes.REALTIME" class="mat-content mat-padding" fxLayout="column">
+      <tb-timeinterval
+        formControlName="interval"
+        [isEdit]="isEdit"
+        [(hideFlag)]="timewindow.hideAggInterval"
+        (hideFlagChange)="onHideAggIntervalChanged()"
+        [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
+        predefinedName="aggregation.group-interval">
+      </tb-timeinterval>
+    </div>
+    <div formGroupName="history"
+         *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
+         timewindow.selectedTab === timewindowTypes.HISTORY" class="mat-content mat-padding" fxLayout="column">
+      <tb-timeinterval
+        formControlName="interval"
+        [isEdit]="isEdit"
+        [(hideFlag)]="timewindow.hideAggInterval"
+        (hideFlagChange)="onHideAggIntervalChanged()"
+        [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
+        predefinedName="aggregation.group-interval">
+      </tb-timeinterval>
+    </div>
+    <div *ngIf="timezone" class="mat-content mat-padding" fxLayout="row">
+      <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
+        <label class="tb-small hide-label" translate>timewindow.hide</label>
+        <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideTimezone"
+                      (ngModelChange)="onHideTimezoneChanged()"></mat-checkbox>
+      </section>
+      <tb-timezone-select fxFlex [fxShow]="isEdit || !timewindow.hideTimezone"
+                          localBrowserTimezonePlaceholderOnEmpty="true"
+                          formControlName="timezone">
+      </tb-timezone-select>
     </div>
-  </fieldset>
+  </ng-template>
 </form>
+<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+  <button type="button"
+          mat-button
+          [disabled]="(isLoading$ | async)"
+          (click)="cancel()">
+    {{ 'action.cancel' | translate }}
+  </button>
+  <button type="button"
+          mat-raised-button
+          color="primary"
+          (click)="update()"
+          [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
+    {{ 'action.update' | translate }}
+  </button>
+</div>
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 9029c48815..70f43f410c 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
@@ -16,16 +16,14 @@
 @import "../../../../scss/constants";
 
 :host {
-  width: 100%;
-  height: 100%;
-  form,
-  fieldset {
-    height: 100%;
-  }
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+  background-color: #fff;
 
   .mat-content {
     overflow: hidden;
-    background-color: #fff;
   }
 
   .mat-padding {
@@ -70,7 +68,6 @@
 :host ::ng-deep {
   .mat-mdc-radio-button {
     display: block;
-    margin-bottom: 16px;
     .mdc-form-field {
       align-items: start;
       > label {
@@ -78,4 +75,7 @@
       }
     }
   }
+  .mat-mdc-tab-group:not(.tb-headless) {
+    height: 100%;
+  }
 }
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 0c87020d5b..b525ff0c24 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts
@@ -17,6 +17,7 @@
 import {
   ChangeDetectorRef,
   Component,
+  ElementRef,
   forwardRef,
   Injector,
   Input,
@@ -179,6 +180,7 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
               private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe,
               private datePipe: DatePipe,
               private cd: ChangeDetectorRef,
+              private nativeElement: ElementRef,
               public viewContainerRef: ViewContainerRef,
               public breakpointObserver: BreakpointObserver) {
   }
@@ -193,20 +195,22 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
     if ($event) {
       $event.stopPropagation();
     }
-    const target = $event.target || $event.srcElement || $event.currentTarget;
-    const config = new OverlayConfig();
-    config.backdropClass = 'cdk-overlay-transparent-backdrop';
+    const config = new OverlayConfig({
+      panelClass: 'tb-timewindow-panel',
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: true,
+      maxHeight: '80vh',
+      height: 'min-content'
+    });
     config.hasBackdrop = true;
     const connectedPosition: ConnectedPosition = {
-      originX: 'end',
+      originX: 'start',
       originY: 'bottom',
-      overlayX: 'end',
+      overlayX: 'start',
       overlayY: 'top'
     };
-    config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)
+    config.positionStrategy = this.overlay.position().flexibleConnectedTo(this.nativeElement)
       .withPositions([connectedPosition]);
-    config.maxHeight = '70vh';
-    config.height = 'min-content';
 
     const overlayRef = this.overlay.create(config);
     overlayRef.backdropClick().subscribe(() => {