feat: redesign query (#1974)

Author: astandrik

package-lock.json

@@ -130,7 +130,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "^1.50.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package.json

@@ -18,8 +18,11 @@ const config: PlaywrightTestConfig = {
         ? undefined
         : {
               command: 'npm run dev',
+              env: {
+                  REACT_APP_DISABLE_CHECKS: 'true',
+              },
               port: 3000,
-              reuseExistingServer: true,
+              reuseExistingServer: !process.env.CI,
           },
     use: {
         baseURL: baseUrl || 'http://localhost:3000/',

playwright.config.ts

@@ -2,16 +2,4 @@
     display: flex;
     align-items: center;
     gap: 4px;
-
-    color: var(--g-color-text-complementary);
-    &__result-status-icon {
-        color: var(--g-color-text-positive);
-        &_error {
-            color: var(--g-color-text-danger);
-        }
-    }
-
-    &__query-settings-icon {
-        color: var(--g-color-text-hint);
-    }
 }

src/components/ElapsedTime/ElapsedTime.scss

@@ -1,20 +1,16 @@
 import React from 'react';
 
-import {
-    CircleCheck,
-    CircleInfo,
-    CircleQuestionFill,
-    CircleStop,
-    CircleXmark,
-} from '@gravity-ui/icons';
-import {Icon, Spin, Tooltip} from '@gravity-ui/uikit';
+import {duration} from '@gravity-ui/date-utils';
+import {CircleCheckFill, CircleQuestionFill, CircleStop, CircleXmark} from '@gravity-ui/icons';
+import type {LabelProps, TextProps} from '@gravity-ui/uikit';
+import {Icon, Label, Spin, Text} from '@gravity-ui/uikit';
 
-import i18n from '../../containers/Tenant/Query/i18n';
 import {isQueryCancelledError} from '../../containers/Tenant/Query/utils/isQueryCancelledError';
+import {selectQueryDuration} from '../../store/reducers/query/query';
 import {cn} from '../../utils/cn';
-import {useChangedQuerySettings} from '../../utils/hooks/useChangedQuerySettings';
+import {HOUR_IN_SECONDS, SECOND_IN_MS} from '../../utils/constants';
+import {useTypedSelector} from '../../utils/hooks';
 import {isAxiosError} from '../../utils/response';
-import QuerySettingsDescription from '../QuerySettingsDescription/QuerySettingsDescription';
 
 import './QueryExecutionStatus.scss';
 
@@ -26,57 +22,83 @@ interface QueryExecutionStatusProps {
     loading?: boolean;
 }
 
-const QuerySettingsIndicator = () => {
-    const {isIndicatorShown, changedLastExecutionSettingsDescriptions} = useChangedQuerySettings();
-
-    if (!isIndicatorShown) {
-        return null;
-    }
-
-    return (
-        <Tooltip
-            openDelay={0}
-            content={
-                <QuerySettingsDescription
-                    prefix={i18n('banner.query-settings.message')}
-                    querySettings={changedLastExecutionSettingsDescriptions}
-                />
-            }
-        >
-            <Icon data={CircleInfo} className={b('query-settings-icon')} />
-        </Tooltip>
-    );
-};
-
 export const QueryExecutionStatus = ({className, error, loading}: QueryExecutionStatusProps) => {
     let icon: React.ReactNode;
     let label: string;
+    let theme: LabelProps['theme'];
+    let textColor: TextProps['color'];
+    const {startTime, endTime} = useTypedSelector(selectQueryDuration);
+
+    const [queryDuration, setQueryDuration] = React.useState<number>(
+        startTime ? (endTime || Date.now()) - startTime : 0,
+    );
+
+    const isCancelled = isQueryCancelledError(error);
+
+    const setDuration = React.useCallback(() => {
+        if (startTime) {
+            const actualEndTime = endTime || Date.now();
+            setQueryDuration(actualEndTime - startTime);
+        }
+    }, [endTime, startTime]);
+
+    React.useEffect(() => {
+        let timerId: ReturnType<typeof setInterval> | undefined;
+        setDuration();
+
+        if (loading) {
+            timerId = setInterval(setDuration, SECOND_IN_MS);
+        } else {
+            clearInterval(timerId);
+        }
+        return () => {
+            clearInterval(timerId);
+        };
+    }, [loading, setDuration]);
+
+    const formattedQueryDuration = React.useMemo(() => {
+        return queryDuration > HOUR_IN_SECONDS * SECOND_IN_MS
+            ? duration(queryDuration).format('hh:mm:ss')
+            : duration(queryDuration).format('mm:ss');
+    }, [queryDuration]);
 
     if (loading) {
+        theme = 'info';
+        textColor = 'info-heavy';
         icon = <Spin size="xs" />;
         label = 'Running';
     } else if (isAxiosError(error) && error.code === 'ECONNABORTED') {
+        theme = 'danger';
+        textColor = 'danger-heavy';
         icon = <Icon data={CircleQuestionFill} />;
         label = 'Connection aborted';
-    } else if (isQueryCancelledError(error)) {
-        icon = <Icon data={CircleStop} />;
+    } else if (isCancelled) {
+        theme = 'warning';
+        textColor = 'warning-heavy';
+        icon = <Icon data={CircleStop} className={b('result-status-icon', {error: true})} />;
         label = 'Stopped';
     } else {
         const hasError = Boolean(error);
+        theme = hasError ? 'danger' : 'success';
+        textColor = hasError ? 'danger-heavy' : 'positive-heavy';
         icon = (
             <Icon
-                data={hasError ? CircleXmark : CircleCheck}
+                data={hasError ? CircleXmark : CircleCheckFill}
                 className={b('result-status-icon', {error: hasError})}
             />
         );
         label = hasError ? 'Failed' : 'Completed';
     }
 
     return (
-        <div className={b(null, className)}>
-            {icon}
-            {label}
-            {isQueryCancelledError(error) || loading ? null : <QuerySettingsIndicator />}
-        </div>
+        <Label
+            theme={theme}
+            size="m"
+            className={b(null, className)}
+            icon={icon}
+            value={formattedQueryDuration}
+        >
+            <Text color={textColor}>{label}</Text>
+        </Label>
     );
 };