feat: duration & endtime in queries history

src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -13,7 +13,9 @@ import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants'
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import type {QueryInHistory} from '../../../../types/store/executeQuery';
 import {cn} from '../../../../utils/cn';
+import {formatDateTime} from '../../../../utils/dataFormatters/dataFormatters';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {formatToMs, parseUsToMs} from '../../../../utils/timeParsers';
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import i18n from '../i18n';
 
@@ -46,7 +48,7 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const columns: Column<QueryInHistory>[] = [
         {
             name: 'queryText',
-            header: 'Query Text',
+            header: i18n('history.queryText'),
             render: ({row}) => {
                 return (
                     <div className={b('query')}>
@@ -57,6 +59,23 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
             sortable: false,
             width: 600,
         },
+        {
+            name: 'EndTime',
+            header: i18n('history.endTime'),
+            render: ({row}) =>
+                row.endTime ? formatDateTime(new Date(row.endTime as string).getTime()) : '-',
+            align: 'right',
+            width: 200,
+            sortable: false,
+        },
+        {
+            name: 'Duration',
+            header: i18n('history.duration'),
+            render: ({row}) => (row.duration ? formatToMs(parseUsToMs(row.duration)) : '-'),
+            align: 'right',
+            width: 150,
+            sortable: false,
+        },
     ];
 
     return (

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -16,6 +16,7 @@ import {
     goToPreviousQuery,
     saveQueryToHistory,
     setTenantPath,
+    updateQueryInHistory,
 } from '../../../../store/reducers/executeQuery';
 import {explainQueryApi} from '../../../../store/reducers/explainQuery/explainQuery';
 import type {PreparedExplainResponse} from '../../../../store/reducers/explainQuery/types';
@@ -84,6 +85,7 @@ interface QueryEditorProps {
     showPreview: boolean;
     setShowPreview: (...args: Parameters<typeof setShowPreview>) => void;
     saveQueryToHistory: (...args: Parameters<typeof saveQueryToHistory>) => void;
+    updateQueryInHistory: (...args: Parameters<typeof updateQueryInHistory>) => void;
 }
 
 function QueryEditor(props: QueryEditorProps) {
@@ -170,6 +172,10 @@ function QueryEditor(props: QueryEditorProps) {
             schema,
             enableTracingLevel,
             queryId,
+        }).then((res) => {
+            if ('data' in res) {
+                props.updateQueryInHistory(res.data.stats, queryId);
+            }
         });
         setIsResultLoaded(true);
         props.setShowPreview(false);
@@ -179,7 +185,7 @@ function QueryEditor(props: QueryEditorProps) {
         if (!text) {
             const {queries, currentIndex} = history;
             if (query !== queries[currentIndex]?.queryText) {
-                props.saveQueryToHistory(input);
+                props.saveQueryToHistory(input, queryId);
             }
         }
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
@@ -413,6 +419,7 @@ const mapStateToProps = (state: RootState) => {
 
 const mapDispatchToProps = {
     saveQueryToHistory,
+    updateQueryInHistory,
     goToPreviousQuery,
     goToNextQuery,
     setShowPreview,

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

@@ -52,5 +52,9 @@
   "filter.text.placeholder": "Search by query text...",
 
   "gear.tooltip": "Query execution settings have been changed for ",
-  "banner.query-settings.message": "Query results are displayed for "
+  "banner.query-settings.message": "Query results are displayed for ",
+
+  "history.queryText": "Query text",
+  "history.endTime": "End time",
+  "history.duration": "Duration"
 }

src/store/reducers/executeQuery.ts

@@ -25,6 +25,7 @@ const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
 const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
+const UPDATE_QUERY_IN_HISTORY = 'query/UPDATE_QUERY_IN_HISTORY';
 const SET_QUERY_HISTORY_FILTER = 'query/SET_QUERY_HISTORY_FILTER';
 const GO_TO_PREVIOUS_QUERY = 'query/GO_TO_PREVIOUS_QUERY';
 const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
@@ -65,9 +66,9 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
         }
 
         case SAVE_QUERY_TO_HISTORY: {
-            const queryText = action.data;
+            const {queryText, queryId} = action.data;
 
-            const newQueries = [...state.history.queries, {queryText}].slice(
+            const newQueries = [...state.history.queries, {queryText, queryId}].slice(
                 state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
             );
             settingsManager.setUserSettingsValue(QUERIES_HISTORY_KEY, newQueries);
@@ -82,6 +83,38 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
             };
         }
 
+        case UPDATE_QUERY_IN_HISTORY: {
+            const {queryId, stats} = action.data;
+
+            if (!stats) {
+                return state;
+            }
+
+            const index = state.history.queries.findIndex((item) => item.queryId === queryId);
+
+            if (index === -1) {
+                return state;
+            }
+
+            const newQueries = [...state.history.queries];
+            const {DurationUs, Executions: [{FinishTimeMs}] = [{}]} = stats;
+            newQueries.splice(index, 1, {
+                ...state.history.queries[index],
+                duration: DurationUs,
+                endTime: FinishTimeMs,
+            });
+
+            settingsManager.setUserSettingsValue(QUERIES_HISTORY_KEY, newQueries);
+
+            return {
+                ...state,
+                history: {
+                    ...state.history,
+                    queries: newQueries,
+                },
+            };
+        }
+
         case GO_TO_PREVIOUS_QUERY: {
             const currentIndex = state.history.currentIndex;
             if (currentIndex <= 0) {
@@ -211,10 +244,17 @@ export const executeQueryApi = api.injectEndpoints({
     overrideExisting: 'throw',
 });
 
-export const saveQueryToHistory = (queryText: string) => {
+export const saveQueryToHistory = (queryText: string, queryId: string) => {
     return {
         type: SAVE_QUERY_TO_HISTORY,
-        data: queryText,
+        data: {queryText, queryId},
+    } as const;
+};
+
+export const updateQueryInHistory = (stats: IQueryResult['stats'], queryId: string) => {
+    return {
+        type: UPDATE_QUERY_IN_HISTORY,
+        data: {queryId, stats},
     } as const;
 };
 

src/types/store/executeQuery.ts

@@ -5,11 +5,15 @@ import type {
     saveQueryToHistory,
     setQueryHistoryFilter,
     setTenantPath,
+    updateQueryInHistory,
 } from '../../store/reducers/executeQuery';
 
 export interface QueryInHistory {
+    queryId?: string;
     queryText: string;
     syntax?: string;
+    endTime?: string | number;
+    duration?: string | number;
 }
 
 export interface ExecuteQueryState {
@@ -29,6 +33,7 @@ export type ExecuteQueryAction =
     | ReturnType<typeof goToPreviousQuery>
     | ReturnType<typeof changeUserInput>
     | ReturnType<typeof saveQueryToHistory>
+    | ReturnType<typeof updateQueryInHistory>
     | ReturnType<typeof setTenantPath>
     | ReturnType<typeof setQueryHistoryFilter>;