feat(QueryEditor): display query duration

Author: artemmufazalov

src/containers/Tenant/QueryEditor/QueryDuration/QueryDuration.scss

@@ -0,0 +1,8 @@
+.ydb-query-duration {
+    display: flex;
+    align-items: center;
+
+    margin-left: 10px;
+
+    color: var(--yc-color-text-complementary);
+}

src/containers/Tenant/QueryEditor/QueryDuration/QueryDuration.tsx

@@ -0,0 +1,21 @@
+import block from 'bem-cn-lite';
+
+import {formatDurationToShortTimeFormat, parseUsToMs} from '../../../../utils/timeParsers';
+
+import './QueryDuration.scss';
+
+interface QueryDurationProps {
+    duration?: string;
+}
+
+const b = block('ydb-query-duration');
+
+export const QueryDuration = ({duration}: QueryDurationProps) => {
+    if (!duration) {
+        return null;
+    }
+
+    const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
+
+    return <span className={b()}>{parsedDuration}</span>;
+};

src/containers/Tenant/QueryEditor/QueryResult/QueryResult.js

@@ -18,6 +18,7 @@ import {prepareQueryError} from '../../../../utils/query';
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
 import ResultIssues from '../Issues/Issues';
+import {QueryDuration} from '../QueryDuration/QueryDuration';
 
 import './QueryResult.scss';
 
@@ -116,15 +117,11 @@ function QueryResult(props) {
                         </Fullscreen>
                     )}
                 </React.Fragment>
-            )
+            );
         }
 
         if (error) {
-            return (
-                <div className={b('error')}>
-                    {prepareQueryError(error)}
-                </div>
-            );
+            return <div className={b('error')}>{prepareQueryError(error)}</div>;
         }
     };
 
@@ -136,6 +133,7 @@ function QueryResult(props) {
 
                     {props.stats && !props.error && (
                         <React.Fragment>
+                            <QueryDuration duration={props.stats?.DurationUs} />
                             <Divider />
                             <RadioButton
                                 options={resultOptions}

src/utils/timeParsers/i18n/en.json

@@ -1,11 +1,11 @@
 {
-  "daysHours": "{{days}}d {{hours}}h",
-  "hoursMin": "{{hours}}h {{minutes}}m",
-  "minSec": "{{minutes}}m {{seconds}}s",
-  "secMs": "{{seconds}}s {{ms}}ms",
-  "days": "{{days}}d",
-  "hours": "{{hours}}h",
-  "min": "{{minutes}}m",
-  "sec": "{{seconds}}s",
-  "ms": "{{ms}}ms"
+  "daysHours": "{{days}}\u00a0d\u00a0{{hours}}\u00a0h",
+  "hoursMin": "{{hours}}\u00a0h\u00a0{{minutes}}\u00a0m",
+  "minSec": "{{minutes}}\u00a0m\u00a0{{seconds}}\u00a0s",
+  "secMs": "{{seconds}}\u00a0s\u00a0{{ms}}\u00a0ms",
+  "days": "{{days}}\u00a0d",
+  "hours": "{{hours}}\u00a0h",
+  "min": "{{minutes}}\u00a0m",
+  "sec": "{{seconds}}\u00a0s",
+  "ms": "{{ms}}\u00a0ms"
 }

src/utils/timeParsers/i18n/ru.json

@@ -1,11 +1,11 @@
 {
-  "daysHours": "{{days}}д {{hours}}ч",
-  "hoursMin": "{{hours}}ч {{minutes}}м",
-  "minSec": "{{minutes}}м {{seconds}}с",
-  "secMs": "{{seconds}}с {{ms}}мс",
-  "days": "{{days}}д",
-  "hours": "{{hours}}ч",
-  "min": "{{minutes}}м",
-  "sec": "{{seconds}}с",
-  "ms": "{{ms}}мс"
+  "daysHours": "{{days}}\u00a0д\u00a0{{hours}}\u00a0ч",
+  "hoursMin": "{{hours}}\u00a0ч\u00a0{{minutes}}\u00a0м",
+  "minSec": "{{minutes}}\u00a0м\u00a0{{seconds}}\u00a0с",
+  "secMs": "{{seconds}}\u00a0с\u00a0{{ms}}\u00a0мс",
+  "days": "{{days}}\u00a0д",
+  "hours": "{{hours}}\u00a0ч",
+  "min": "{{minutes}}\u00a0м",
+  "sec": "{{seconds}}\u00a0с",
+  "ms": "{{ms}}\u00a0мс"
 }

src/utils/timeParsers/parsers.ts

@@ -1,5 +1,6 @@
 import type {IProtobufTimeObject} from '../../types/api/common';
 
+import {isNumeric} from '../utils';
 import {parseProtobufDurationToMs, parseProtobufTimestampToMs} from '.';
 
 export const parseLag = (value: string | IProtobufTimeObject | undefined) =>
@@ -16,3 +17,11 @@ export const parseTimestampToIdleTime = (value: string | IProtobufTimeObject | u
     // Usually it below 100ms, so it could be omitted
     return duration < 0 ? 0 : duration;
 };
+
+export const parseUsToMs = (value: string | number | undefined) => {
+    if (!value || !isNumeric(value)) {
+        return 0;
+    }
+
+    return Math.round(Number(value) / 1000);
+};