feat(Preview): add rows count and truncated flag (#1715)

Author: Raubzeug

src/containers/Tenant/Query/Preview/Preview.scss

@@ -1,15 +1,15 @@
-@use '../../../../styles/mixins.scss';
+@import '../../../../styles/mixins.scss';
 
 .kv-preview {
     height: 100%;
-    @include mixins.flex-container();
-    @include mixins.query-data-table();
-
+    @include flex-container();
+    @include query-data-table();
     &__header {
         position: sticky;
         top: 0;
 
         display: flex;
+        flex-shrink: 0;
         justify-content: space-between;
         align-items: center;
 
@@ -22,17 +22,18 @@
 
     &__title {
         display: flex;
+        gap: var(--g-spacing-1);
     }
 
     &__table-name {
-        margin-left: 4px;
+        margin-left: var(--g-spacing-1);
 
         color: var(--g-color-text-complementary);
     }
 
     &__controls-left {
         display: flex;
-        gap: 5px;
+        gap: var(--g-spacing-1);
     }
     &__message-container {
         padding: 15px 20px;

src/containers/Tenant/Query/Preview/Preview.tsx

@@ -1,5 +1,5 @@
 import {Xmark} from '@gravity-ui/icons';
-import {Button, Icon, Loader} from '@gravity-ui/uikit';
+import {Button, Icon, Loader, Text} from '@gravity-ui/uikit';
 
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
@@ -28,9 +28,14 @@ export const Preview = ({database, path, type}: PreviewProps) => {
 
     const isPreviewAvailable = isTableType(type);
 
-    const query = `select * from \`${path}\` limit 32`;
+    const query = `select * from \`${path}\` limit 101`;
     const {currentData, isFetching, error} = previewApi.useSendQueryQuery(
-        {database, query, action: isExternalTableType(type) ? 'execute-query' : 'execute-scan'},
+        {
+            database,
+            query,
+            action: isExternalTableType(type) ? 'execute-query' : 'execute-scan',
+            limitRows: 100,
+        },
         {
             skip: !isPreviewAvailable,
             refetchOnMountOrArgChange: true,
@@ -47,7 +52,12 @@ export const Preview = ({database, path, type}: PreviewProps) => {
         return (
             <div className={b('header')}>
                 <div className={b('title')}>
-                    {i18n('preview.title')} <div className={b('table-name')}>{path}</div>
+                    {i18n('preview.title')}
+                    <Text color="secondary" variant="body-2">
+                        {data.truncated ? `${i18n('preview.truncated')} ` : ''}(
+                        {data.result?.length ?? 0})
+                    </Text>
+                    <div className={b('table-name')}>{path}</div>
                 </div>
                 <div className={b('controls-left')}>
                     <EnableFullscreenButton disabled={Boolean(error)} />

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

@@ -17,6 +17,7 @@
   "preview.title": "Preview",
   "preview.not-available": "Preview is not available",
   "preview.close": "Close preview",
+  "preview.truncated": "truncated",
 
   "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",

src/store/reducers/preview.ts

@@ -7,15 +7,16 @@ interface SendQueryParams {
     query?: string;
     database?: string;
     action?: ExecuteActions;
+    limitRows?: number;
 }
 
 export const previewApi = api.injectEndpoints({
     endpoints: (build) => ({
         sendQuery: build.query({
-            queryFn: async ({query, database, action}: SendQueryParams, {signal}) => {
+            queryFn: async ({query, database, action, limitRows}: SendQueryParams, {signal}) => {
                 try {
                     const response = await window.api.sendQuery(
-                        {query, database, action},
+                        {query, database, action, limit_rows: limitRows},
                         {signal, withRetries: true},
                     );