feat: duration & endtime in queries history (#1169)

Author: sareyu

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,22 @@ function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
             sortable: false,
             width: 600,
         },
+        {
+            name: 'EndTime',
+            header: i18n('history.endTime'),
+            render: ({row}) => (row.endTime ? formatDateTime(row.endTime.toString()) : '-'),
+            align: 'right',
+            width: 200,
+            sortable: false,
+        },
+        {
+            name: 'Duration',
+            header: i18n('history.duration'),
+            render: ({row}) => (row.durationUs ? formatToMs(parseUsToMs(row.durationUs)) : '-'),
+            align: 'right',
+            width: 150,
+            sortable: false,
+        },
     ];
 
     return (

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

@@ -179,7 +179,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);

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, endTime} = stats;
+            newQueries.splice(index, 1, {
+                ...state.history.queries[index],
+                durationUs,
+                endTime,
+            });
+
+            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) {
@@ -150,6 +183,11 @@ interface SendQueryParams extends QueryRequestParams {
     enableTracingLevel?: boolean;
 }
 
+interface QueryStats {
+    durationUs?: string | number;
+    endTime?: string | number;
+}
+
 export const executeQueryApi = api.injectEndpoints({
     endpoints: (build) => ({
         executeQuery: build.mutation<IQueryResult, SendQueryParams>({
@@ -162,7 +200,7 @@ export const executeQueryApi = api.injectEndpoints({
                     enableTracingLevel,
                     queryId,
                 },
-                {signal},
+                {signal, dispatch},
             ) => {
                 let action: ExecuteActions = 'execute';
                 let syntax: QuerySyntax = QUERY_SYNTAX.yql;
@@ -175,6 +213,7 @@ export const executeQueryApi = api.injectEndpoints({
                 }
 
                 try {
+                    const timeStart = Date.now();
                     const response = await window.api.sendQuery(
                         {
                             schema,
@@ -201,6 +240,19 @@ export const executeQueryApi = api.injectEndpoints({
                     }
 
                     const data = parseQueryAPIExecuteResponse(response);
+
+                    const queryStats: QueryStats = {};
+                    if (data.stats) {
+                        const {DurationUs, Executions: [{FinishTimeMs}] = [{}]} = data.stats;
+                        queryStats.durationUs = DurationUs;
+                        queryStats.endTime = FinishTimeMs;
+                    } else {
+                        const now = Date.now();
+                        queryStats.durationUs = (now - timeStart) * 1000;
+                        queryStats.endTime = now;
+                    }
+
+                    dispatch(updateQueryInHistory(queryStats, queryId));
                     return {data};
                 } catch (error) {
                     return {error};
@@ -211,13 +263,20 @@ 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 function updateQueryInHistory(stats: QueryStats, queryId: string) {
+    return {
+        type: UPDATE_QUERY_IN_HISTORY,
+        data: {queryId, stats},
+    } as const;
+}
+
 export const goToPreviousQuery = () => {
     return {
         type: GO_TO_PREVIOUS_QUERY,

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;
+    durationUs?: 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>;