feat(Query): progress for spyt engine [YTFRONT-3981]

packages/ui/src/ui/pages/query-tracker/QueryResults/QueryResultActions/QueryProgress.tsx

@@ -0,0 +1,27 @@
+import React, {FC} from 'react';
+import {Progress, Tooltip} from '@gravity-ui/uikit';
+import {QueryItem, QueryStatus} from '../../module/api';
+
+type Props = {
+    query: QueryItem;
+};
+
+export const QueryProgress: FC<Props> = ({query}) => {
+    if (
+        query.engine !== 'spyt' ||
+        !(query.state === QueryStatus.RUNNING || query.state === QueryStatus.COMPLETING)
+    )
+        return null;
+
+    const percent = query.progress?.spyt_progress
+        ? Math.round(query.progress.spyt_progress * 100)
+        : 0;
+
+    return (
+        <Tooltip content={`${percent}%`}>
+            <div>
+                <Progress theme="info" size="xs" value={percent} />
+            </div>
+        </Tooltip>
+    );
+};

packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx

@@ -18,6 +18,7 @@ import PlanActions from '../Plan/PlanActions';
 
 import './index.scss';
 import {ErrorTree} from './ErrorTree';
+import {QueryProgress} from './QueryResultActions/QueryProgress';
 
 const b = block('query-results');
 
@@ -58,6 +59,7 @@ export const QueryResults = React.memo(function QueryResults({
                 <QueryMetaInfo className={b('meta-info')} query={query} />
                 <div className={b('toolbar')}>{toolbar}</div>
             </div>
+            <QueryProgress query={query} />
             <NotRenderUntilFirstVisible className={b('result', {minimized})} hide={minimized}>
                 <PlanProvider
                     plan={query.progress?.yql_plan}

packages/ui/src/ui/pages/query-tracker/module/api.ts

@@ -121,6 +121,7 @@ export interface QueryItem extends DraftQuery {
         yql_plan?: Plan;
         yql_statistics?: YQLSstatistics;
         yql_progress?: Progress;
+        spyt_progress?: number;
     };
     access_control_object: string;
     error?: QueryError;