feat(Query): add explanation to query duration (#501)

Author: krosy1337

src/containers/Tenant/Query/QueryDuration/QueryDuration.scss

@@ -5,4 +5,12 @@
     margin-left: 10px;
 
     color: var(--yc-color-text-complementary);
+
+    &__item-with-popover {
+        white-space: nowrap;
+    }
+
+    &__popover {
+        max-width: 300px;
+    }
 }

src/containers/Tenant/Query/QueryDuration/QueryDuration.tsx

@@ -1,6 +1,9 @@
 import block from 'bem-cn-lite';
 
 import {formatDurationToShortTimeFormat, parseUsToMs} from '../../../../utils/timeParsers';
+import {LabelWithPopover} from '../../../../components/LabelWithPopover';
+
+import i18n from '../i18n';
 
 import './QueryDuration.scss';
 
@@ -17,5 +20,14 @@ export const QueryDuration = ({duration}: QueryDurationProps) => {
 
     const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
 
-    return <span className={b()}>{parsedDuration}</span>;
+    return (
+        <span className={b()}>
+            <LabelWithPopover
+                className={b('item-with-popover')}
+                contentClassName={b('popover')}
+                text={parsedDuration}
+                popoverContent={i18n('query-duration.description')}
+            />
+        </span>
+    );
 };

src/containers/Tenant/Query/i18n/en.json

@@ -20,5 +20,7 @@
   "method-description.script": "For YQL-scripts combining DDL and DML.\nAPI call: schema.scripting",
   "method-description.scan": "Read-only queries, potentially reading a lot of data.\nAPI call: table.ExecuteScan",
   "method-description.data": "DML queries for changing and fetching data in serialization mode.\nAPI call: table.executeDataQuery",
-  "method-description.query": "Any queries. An experimental API call supposed to replace all existing methods.\nAPI Call: query.ExecuteScript"
+  "method-description.query": "Any queries. An experimental API call supposed to replace all existing methods.\nAPI Call: query.ExecuteScript",
+
+  "query-duration.description": "Duration of server-side query execution"  
 }

src/containers/Tenant/Query/i18n/ru.json

@@ -20,5 +20,7 @@
   "method-description.script": "Для скриптов, совмещающих DDL и DML-конструкции.\nAPI call: schema.scripting",
   "method-description.scan": "Только читающие запросы, потенциально читающие много данных.\nAPI call: table.ExecuteScan",
   "method-description.data": "DML-запросы для изменения и выборки данных в режиме изоляции Serializable.\nAPI call: table.executeDataQuery",
-  "method-description.query": "Любые запросы. Экспериментальный перспективный метод, который в будущем заменит все остальные.\nAPI call: query.ExecuteScript"
+  "method-description.query": "Любые запросы. Экспериментальный перспективный метод, который в будущем заменит все остальные.\nAPI call: query.ExecuteScript",
+
+  "query-duration.description": "Время выполнения запроса на стороне сервера"
 }