fix(query tracker): row count and truncated flag are now displayed ab…

…ove results table [#210]
ytsaurus · Dec 5, 2023 · 644f7e1 · 644f7e1
1 parent 8e2ddc7
commit 644f7e1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResultsView/index.scss b/packages/ui/src/ui/pages/query-tracker/QueryResultsView/index.scss
@@ -3,6 +3,10 @@
     position: relative;
     overflow: auto;
 
+    &__result-info {
+        margin-bottom: 10px;
+    }
+
     &__loading {
         display: flex;
         align-items: center;

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResultsView/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResultsView/index.tsx
@@ -1,4 +1,4 @@
-import {Loader} from '@gravity-ui/uikit';
+import {Loader, Text} from '@gravity-ui/uikit';
 import React from 'react';
 import {useSelector} from 'react-redux';
 import block from 'bem-cn-lite';
@@ -20,14 +20,30 @@ import './index.scss';
 
 const b = block('query-result-table');
 
+const getResultRowsInfo = (result: QueryResultReadyState) => {
+    const {row_count: total} = result.meta.data_statistics;
+    const {is_truncated: truncated} = result.meta;
+    const {pageSize} = result.settings;
+    const start = pageSize * result.page + 1;
+    const end = Math.min(pageSize * result.page + pageSize, total);
+    return {start, end, total, truncated};
+};
+
 function QueryReadyResultView({result}: {result: QueryResultReadyState}) {
     const mode = result?.settings?.viewMode;
+    const {start, end, total, truncated} = getResultRowsInfo(result);
     return (
         <>
             <NotRenderUntilFirstVisible hide={mode !== QueryResultsViewMode.Scheme}>
                 <YQLSchemeTable result={result} />
             </NotRenderUntilFirstVisible>
             <NotRenderUntilFirstVisible hide={mode !== QueryResultsViewMode.Table}>
+                <div className={b('result-info')}>
+                    <Text>
+                        Rows {start}-{end} of {total}
+                        {`${truncated ? ' (truncated)' : ''}`}
+                    </Text>
+                </div>
                 <ResultsTable result={result} />
             </NotRenderUntilFirstVisible>
         </>

diff --git a/packages/ui/src/ui/pages/query-tracker/module/api.ts b/packages/ui/src/ui/pages/query-tracker/module/api.ts
@@ -397,6 +397,7 @@ export type QueryResultMeta = {
         };
         $value: QueryResultMetaScheme[];
     };
+    is_truncated: boolean;
     data_statistics: {
         chunk_count: number;
         row_count: number;