fix: handle keepalive chunk

Author: astandrik

src/services/api/streaming.ts

@@ -2,6 +2,7 @@ import {parseMultipart} from '@mjackson/multipart-parser';
 import qs from 'qs';
 
 import {
+    isKeepAliveChunk,
     isQueryResponseChunk,
     isSessionChunk,
     isStreamDataChunk,
@@ -93,6 +94,9 @@ export class StreamingAPI extends BaseYdbAPI {
                     options.onStreamDataChunk(chunk);
                 } else if (isQueryResponseChunk(chunk)) {
                     options.onQueryResponseChunk(chunk);
+                } else if (isKeepAliveChunk(chunk)) {
+                    // Logging for debug purposes
+                    console.log('Received keep alive chunk');
                 }
             } catch (e) {
                 throw new Error(`Error parsing chunk: ${e}`);

src/store/reducers/query/query.ts

@@ -1,4 +1,4 @@
-import {createSlice} from '@reduxjs/toolkit';
+import {createSelector, createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
 
 import {settingsManager} from '../../../services/settings';
@@ -135,11 +135,9 @@ const slice = createSlice({
     selectors: {
         selectQueriesHistoryFilter: (state) => state.history.filter || '',
         selectTenantPath: (state) => state.tenantPath,
-        selectQueryDuration: (state) => ({
-            startTime: state.result?.startTime,
-            endTime: state.result?.endTime,
-        }),
         selectResult: (state) => state.result,
+        selectStartTime: (state) => state.result?.startTime,
+        selectEndTime: (state) => state.result?.endTime,
         selectQueriesHistory: (state) => {
             const items = state.history.queries;
             const filter = state.history.filter?.toLowerCase();
@@ -154,6 +152,17 @@ const slice = createSlice({
     },
 });
 
+export const selectQueryDuration = createSelector(
+    slice.selectors.selectStartTime,
+    slice.selectors.selectEndTime,
+    (startTime, endTime) => {
+        return {
+            startTime,
+            endTime,
+        };
+    },
+);
+
 export default slice.reducer;
 export const {
     changeUserInput,
@@ -177,7 +186,6 @@ export const {
     selectTenantPath,
     selectResult,
     selectUserInput,
-    selectQueryDuration,
     selectIsDirty,
 } = slice.selectors;
 

src/store/reducers/query/utils.ts

@@ -46,3 +46,7 @@ export function isStreamDataChunk(content: StreamingChunk): content is StreamDat
 export function isQueryResponseChunk(content: StreamingChunk): content is QueryResponseChunk {
     return content?.meta?.event === 'QueryResponse';
 }
+
+export function isKeepAliveChunk(content: StreamingChunk): content is SessionChunk {
+    return content?.meta?.event === 'KeepAlive';
+}

src/types/store/streaming.ts

@@ -19,6 +19,12 @@ export interface SessionChunk {
     };
 }
 
+export interface KeepAliveChunk {
+    meta: {
+        event: 'KeepAlive';
+    };
+}
+
 export interface StreamDataChunk {
     meta: {
         event: 'StreamData';
@@ -51,4 +57,4 @@ export interface BaseQueryResponseChunk {
 export type QueryResponseChunk = BaseQueryResponseChunk &
     (SuccessQueryResponseData | ErrorQueryResponseData);
 
-export type StreamingChunk = SessionChunk | StreamDataChunk | QueryResponseChunk;
+export type StreamingChunk = SessionChunk | StreamDataChunk | QueryResponseChunk | KeepAliveChunk;