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] 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": {