From a8478c4ff9a7cb0bcc11d1f7e65adb2aabbf2bbd Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Fri, 27 Sep 2024 15:50:14 +0300
Subject: [PATCH 1/6] Timewindow: add space between config button and
 timewindow type selection

---
 .../app/shared/components/time/timewindow-panel.component.scss   | 1 +
 1 file changed, 1 insertion(+)

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 dcf03ed094..1451f4cd41 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
@@ -32,6 +32,7 @@
     }
 
     &-settings-btn {
+      margin: 0 8px;
       color: rgba(0, 0, 0, 0.54);
     }
   }

From d7859dd51ab6257dc19f91abd86b6a928bf90b77 Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Fri, 27 Sep 2024 15:51:17 +0300
Subject: [PATCH 2/6] Timewindow: reduce height of datapoints limit slider

---
 .../time/datapoints-limit.component.scss      | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss
index c2ffa0bb34..c39f4f3e6a 100644
--- a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss
+++ b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss
@@ -25,6 +25,27 @@
   mat-form-field input[type=number] {
     text-align: center;
   }
+
+  .mdc-slider {
+    height: 40px;
+
+    ::ng-deep {
+      .mdc-slider__thumb {
+        left: -20px;
+        height: 40px;
+        width: 40px;
+
+        .mat-ripple-element.mat-mdc-slider-focus-ripple,
+        .mat-ripple-element.mat-mdc-slider-active-ripple,
+        .mat-ripple-element.mat-mdc-slider-hover-ripple {
+          left: 0 !important;
+          top: 0 !important;
+          height: 40px !important;
+          width: 40px !important;
+        }
+      }
+    }
+  }
 }
 
 @media #{$mat-gt-sm} {

From ea109a15f6f87bb8269351722a99e426843b43bd Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Fri, 27 Sep 2024 16:03:01 +0300
Subject: [PATCH 3/6] Fix "time zone" spelling

---
 ui-ngx/src/assets/locale/locale.constant-en_US.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index bb4fc57e8a..0ae6c03bf5 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4739,10 +4739,10 @@
         "queue-singleton-hint": "Select a queue for message forwarding in multi-instance environments. 'Main' queue is used by default."
     },
     "timezone": {
-      "timezone": "Timezone",
-      "select-timezone": "Select timezone",
-      "no-timezones-matching": "No timezones matching '{{timezone}}' were found.",
-      "timezone-required": "Timezone is required.",
+      "timezone": "Time zone",
+      "select-timezone": "Select time zone",
+      "no-timezones-matching": "No time zones matching '{{timezone}}' were found.",
+      "timezone-required": "Time zone is required.",
       "browser-time": "Browser Time"
     },
     "queue": {

From ae589e16a6aa377536536a912ca601a1ce27c879 Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Fri, 27 Sep 2024 16:10:46 +0300
Subject: [PATCH 4/6] Fix "time window" spelling

---
 .../assets/locale/locale.constant-en_US.json  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 0ae6c03bf5..161091bf49 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1251,7 +1251,7 @@
         "display-dashboards-selection": "Display dashboards selection",
         "display-entities-selection": "Display entities selection",
         "display-filters": "Display filters",
-        "display-dashboard-timewindow": "Display timewindow",
+        "display-dashboard-timewindow": "Display time window",
         "display-dashboard-export": "Display export",
         "display-update-dashboard-image": "Display update dashboard image",
         "dashboard-logo-settings": "Dashboard logo settings",
@@ -5157,8 +5157,8 @@
         "days": "Days"
     },
     "timewindow": {
-        "timewindow": "Timewindow",
-        "timewindow-settings": "Timewindow settings",
+        "timewindow": "Time window",
+        "timewindow-settings": "Time window settings",
         "years": "{ years, plural, =1 { year } other {# years } }",
         "years-short": "{{ years }}y",
         "months": "{ months, plural, =1 { month } other {# months } }",
@@ -5186,7 +5186,7 @@
         "history": "History",
         "last-prefix": "last",
         "period": "from {{ startTime }} to {{ endTime }}",
-        "edit": "Edit timewindow",
+        "edit": "Edit time window",
         "date-range": "Date range",
         "for-all-time": "For all time",
         "last": "Last",
@@ -5196,7 +5196,7 @@
         "just-now": "Just now",
         "just-now-lower": "just now",
         "ago": "ago",
-        "style": "Timewindow style",
+        "style": "Time window style",
         "icon": "Icon",
         "icon-position": "Icon position",
         "icon-position-left": "Left",
@@ -5207,7 +5207,7 @@
         "preview": "Preview",
         "relative": "Relative",
         "range": "Range",
-        "hide-timewindow-section": "Hide timewindow section from end-users",
+        "hide-timewindow-section": "Hide time window section from end-users",
         "disable-custom-interval": "Disable custom interval selection"
     },
     "tooltip": {
@@ -6033,10 +6033,10 @@
         "units-short": "Units",
         "decimals-short": "Decimals",
         "decimals-suffix": "decimals",
-        "timewindow": "Timewindow",
-        "use-dashboard-timewindow": "Use dashboard timewindow",
-        "use-widget-timewindow": "Use widget timewindow",
-        "display-timewindow": "Display timewindow",
+        "timewindow": "Time window",
+        "use-dashboard-timewindow": "Use dashboard time window",
+        "use-widget-timewindow": "Use widget time window",
+        "display-timewindow": "Display time window",
         "legend": "Legend",
         "display-legend": "Display legend",
         "datasources": "Datasources",

From 3a6fd408d03912213fae71450a825fa1aa448c34 Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Fri, 27 Sep 2024 16:58:56 +0300
Subject: [PATCH 5/6] Timewindow configuration: add hints for hide options

---
 .../timewindow-config-dialog.component.html   | 36 ++++++++++++++-----
 .../assets/locale/locale.constant-en_US.json  |  7 ++++
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index 333c70f24f..9d786e14c1 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
@@ -54,7 +54,9 @@
         <div class="tb-form-row">
           <mat-slide-toggle *ngIf="!quickIntervalOnly"
                             class="mat-slide" formControlName="hideLastInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-timeinterval
             formControlName="timewindowMs"
@@ -71,7 +73,9 @@
            class="tb-form-row">
         <mat-slide-toggle *ngIf="!quickIntervalOnly"
                           class="mat-slide" formControlName="hideQuickInterval">
-          {{ 'timewindow.hide' | translate }}
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
+            {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-quick-time-interval
           displayLabel="false"
@@ -105,7 +109,9 @@
         </div>
         <div class="tb-form-row">
           <mat-slide-toggle class="mat-slide" formControlName="hideLastInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-timeinterval
             formControlName="timewindowMs"
@@ -120,7 +126,9 @@
 
       <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED" class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">
-          {{ 'timewindow.hide' | translate }}
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-fixed-interval' | translate}}">
+            {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-datetime-period
           formControlName="fixedTimewindow"
@@ -134,7 +142,9 @@
 
       <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" class="tb-form-row">
           <mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-quick-time-interval
             displayLabel="false"
@@ -152,7 +162,9 @@
         <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
         <div class="tb-form-row column-xs">
           <mat-slide-toggle class="mat-slide" formControlName="hideAggregation">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-aggregation' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <ng-container formGroupName="aggregation">
             <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
@@ -171,7 +183,9 @@
         <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
         <div class="tb-form-row column-xs">
           <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-max-values' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <ng-container formGroupName="aggregation">
             <tb-datapoints-limit formControlName="limit"
@@ -229,7 +243,9 @@
 
         <ng-template #hideAggInterval>
           <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-group-interval' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
         </ng-template>
       </section>
@@ -239,7 +255,9 @@
       <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
       <div class="tb-form-row column-xs">
         <mat-slide-toggle class="mat-slide" formControlName="hideTimezone">
-          {{ 'timewindow.hide' | translate }}
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-timezone' | translate}}">
+            {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true"
                             formControlName="timezone"
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 161091bf49..c78917d779 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -5208,6 +5208,13 @@
         "relative": "Relative",
         "range": "Range",
         "hide-timewindow-section": "Hide time window section from end-users",
+        "hide-last-interval": "Hide last interval from end-users",
+        "hide-relative-interval": "Hide relative interval from end-users",
+        "hide-fixed-interval": "Hide fixed interval from end-users",
+        "hide-aggregation": "Hide aggregation from end-users",
+        "hide-group-interval": "Hide grouping interval from end-users",
+        "hide-max-values": "Hide max values from end-users",
+        "hide-timezone": "Hide time zone from end-users",
         "disable-custom-interval": "Disable custom interval selection"
     },
     "tooltip": {

From 286238a4f56981a3fb4b753007582116639f82ba Mon Sep 17 00:00:00 2001
From: Chantsova Ekaterina <chantsova.ekaterina@gmail.com>
Date: Mon, 30 Sep 2024 12:44:11 +0300
Subject: [PATCH 6/6] Timewindow: added gap for configuration button (edit
 mode)

---
 .../app/shared/components/time/timewindow-panel.component.html  | 2 +-
 .../app/shared/components/time/timewindow-panel.component.scss  | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

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 e631eff949..45bd25d30e 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
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="timewindowForm" class="tb-timewindow-form">
-  <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom no-gap" *ngIf="!historyOnly">
+  <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom" *ngIf="!historyOnly">
     <tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
                       [options]="timewindowTypeOptions" formControlName="selectedTab">
     </tb-toggle-select>
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 1451f4cd41..dcf03ed094 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
@@ -32,7 +32,6 @@
     }
 
     &-settings-btn {
-      margin: 0 8px;
       color: rgba(0, 0, 0, 0.54);
     }
   }