Skip to content

Add query execution history tab#41883

Open
xiyaoeva wants to merge 1 commit into
appsmithorg:releasefrom
xiyaoeva:feature/query-execution-history
Open

Add query execution history tab#41883
xiyaoeva wants to merge 1 commit into
appsmithorg:releasefrom
xiyaoeva:feature/query-execution-history

Conversation

@xiyaoeva

@xiyaoeva xiyaoeva commented Jun 9, 2026

Copy link
Copy Markdown

Description

Tip

Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).

Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.

Fixes #Issue Number
or
Fixes Issue URL

Warning

If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.

Automation

/ok-to-test tags=""

🔍 Cypress test results

Caution

If you modify the content in this section, you are likely to disrupt the CI result for your PR.

Communication

Should the DevRel and Marketing teams inform users about this change?

  • Yes
  • No

Summary by CodeRabbit

  • New Features
    • Added execution history tab to plugin actions and queries. View recent run details including status, duration, environment, and request/response previews. History stores the last 20 executions per action.

@coderabbitai

coderabbitai Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

This PR adds action execution history tracking to plugin actions and queries. It captures execution metadata (status, duration, environment, request/response previews) in a bounded Redux store, records entries via saga dispatch on success/failure/cancellation, and displays them in a new "History" tab within plugin action and query debugger interfaces.

Changes

Action Execution History Tracking

Layer / File(s) Summary
Redux state, type, and reducer foundation
app/client/src/ce/constants/ReduxActionConstants.tsx, app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
Defines ActionExecutionHistoryEntry interface with status, duration, environment, request/response previews, and creation time. Adds ADD_ACTION_EXECUTION_HISTORY_ENTRY action type and reducer handler that prepends entries while enforcing a 20-entry limit per action ID.
Redux action creator and selector
app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts, app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
Exports addActionExecutionHistoryEntry() action creator to dispatch history entries and getActionExecutionHistory(id) selector to retrieve per-action history from Redux state with empty-array fallback.
Saga-based history recording
app/client/src/sagas/ActionExecution/PluginActionSaga.ts
Introduces getActionExecutionHistoryPreview() helper to safely cap and stringify request/response bodies. Dispatches history entries on user cancellation (CANCELLED, "0" duration), execution failure (FAILURE, with error details), and success (SUCCESS, with request/response previews).
ActionExecutionHistoryTab component
app/client/src/PluginActionEditor/components/PluginActionResponse/components/ActionExecutionHistoryTab.tsx
Renders a two-pane history UI with styled left list showing formatted timestamp, environment, status label (color-coded by result), and duration, plus right detail pane with metadata and request/response previews. Tracks selected entry in local state.
History tab in PluginActionResponse
app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx
Selects per-action execution history from Redux and integrates a "History" tab (with entry count) into the response tabs for both API and non-API plugin types.
History tab in QueryDebuggerTabs
app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx
Selects per-action execution history from Redux and appends a "History" tab to the query debugger response tabs, displaying history via ActionExecutionHistoryTab.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

📜 History now flows through the editor's veins,
Twenty moments captured, none in vain,
From cancels, fails, and triumphs bright,
The debug tabs illuminate each flight. ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning PR description is a boilerplate template with no actual details filled in—no issue reference, motivation, context, or meaningful content provided. Replace template with actual description: reference the issue, explain what the history feature does, mention context/motivation, and note any dependencies or design considerations.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed Title is clear and directly related to the main changeset—adding execution history tracking and UI across query/plugin editors.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx (1)

223-230: ⚡ Quick win

Keep History tab adjacent to Response for consistent debugger ordering.

With current push at Line [223], History lands after Logs/Errors in fullscreen mode. Consider inserting it next to Response to match the plugin action debugger ordering.

Proposed adjustment
-    responseTabs.push({
+    responseTabs.splice(1, 0, {
       key: ACTION_EXECUTION_HISTORY_TAB,
       title: "History",
       count: actionExecutionHistory.length,
       panelComponent: (
         <ActionExecutionHistoryTab history={actionExecutionHistory} />
       ),
     });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx` around lines
223 - 230, The History tab is currently appended via responseTabs.push which
places it after Logs/Errors; instead insert it immediately after the Response
tab so ordering matches the plugin debugger. Locate the responseTabs array and
replace the push for ACTION_EXECUTION_HISTORY_TAB by determining the index of
the Response tab (e.g., find where key === RESPONSE_TAB or title === "Response")
and use splice(index + 1, 0, { key: ACTION_EXECUTION_HISTORY_TAB, title:
"History", count: actionExecutionHistory.length, panelComponent:
<ActionExecutionHistoryTab history={actionExecutionHistory} /> }) so the History
tab appears adjacent to Response.
app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx (1)

43-43: ⚡ Quick win

Centralize the History tab key/title in shared debugger constants/messages.

Line [43] introduces a local key and Lines [106]/[170] hardcode the title; the same pattern is repeated in QueryDebuggerTabs. Please move these to shared constants/messages to avoid drift and keep both debuggers aligned.

Also applies to: 105-107, 169-171

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx`
at line 43, There’s a locally defined ACTION_EXECUTION_HISTORY_TAB and hardcoded
tab titles in usePluginActionResponseTabs (and duplicated in QueryDebuggerTabs);
move the tab key and displayed title into the shared debugger constants/messages
module and import them instead of redefining/inline strings. Specifically:
remove the local ACTION_EXECUTION_HISTORY_TAB in usePluginActionResponseTabs,
replace the title strings used inside the tab definitions with the shared
message constant, export a single ACTION_EXECUTION_HISTORY_TAB and corresponding
title/message from the shared debugger constants/messages file, and update
QueryDebuggerTabs to import and use those same symbols so both debuggers remain
aligned.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@app/client/src/PluginActionEditor/components/PluginActionResponse/components/ActionExecutionHistoryTab.tsx`:
- Line 112: The current empty-state copy in ActionExecutionHistoryTab.tsx is
context-specific ("Run this query…"); update the Text element (the node
rendering Text with kind="body-m" inside the ActionExecutionHistoryTab
component) to use neutral wording such as "Run this action to see execution
history." so it applies both in query and action debugger contexts.

In `@app/client/src/sagas/ActionExecution/PluginActionSaga.ts`:
- Around line 742-753: The preview generation is using JSON.stringify(value,
null, 2) which pretty-prints and is expensive on the hot path; update the logic
that sets preview (the branch using isString and JSON.stringify) to use a
compact JSON.stringify(value) (no spacing) or another non-pretty fast serializer
instead, so large responses don't incur extra CPU/memory before truncation; keep
the existing fallback (String(value)) and preserve the later truncation logic
that uses ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT and the preview variable.

---

Nitpick comments:
In
`@app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx`:
- Line 43: There’s a locally defined ACTION_EXECUTION_HISTORY_TAB and hardcoded
tab titles in usePluginActionResponseTabs (and duplicated in QueryDebuggerTabs);
move the tab key and displayed title into the shared debugger constants/messages
module and import them instead of redefining/inline strings. Specifically:
remove the local ACTION_EXECUTION_HISTORY_TAB in usePluginActionResponseTabs,
replace the title strings used inside the tab definitions with the shared
message constant, export a single ACTION_EXECUTION_HISTORY_TAB and corresponding
title/message from the shared debugger constants/messages file, and update
QueryDebuggerTabs to import and use those same symbols so both debuggers remain
aligned.

In `@app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx`:
- Around line 223-230: The History tab is currently appended via
responseTabs.push which places it after Logs/Errors; instead insert it
immediately after the Response tab so ordering matches the plugin debugger.
Locate the responseTabs array and replace the push for
ACTION_EXECUTION_HISTORY_TAB by determining the index of the Response tab (e.g.,
find where key === RESPONSE_TAB or title === "Response") and use splice(index +
1, 0, { key: ACTION_EXECUTION_HISTORY_TAB, title: "History", count:
actionExecutionHistory.length, panelComponent: <ActionExecutionHistoryTab
history={actionExecutionHistory} /> }) so the History tab appears adjacent to
Response.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: be35e7d8-1689-44e3-a626-d8f10545ef2e

📥 Commits

Reviewing files that changed from the base of the PR and between 3afa599 and 0a3337b.

📒 Files selected for processing (8)
  • app/client/src/PluginActionEditor/components/PluginActionResponse/components/ActionExecutionHistoryTab.tsx
  • app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts
  • app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts
  • app/client/src/PluginActionEditor/store/pluginEditorReducer.ts
  • app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx
  • app/client/src/ce/constants/ReduxActionConstants.tsx
  • app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx
  • app/client/src/sagas/ActionExecution/PluginActionSaga.ts

if (!selectedRun) {
return (
<EmptyState>
<Text kind="body-m">Run this query to see execution history.</Text>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use context-neutral empty-state copy.

Line [112] says “Run this query…”, but this component is also used in action debugger contexts. Please switch to neutral wording (for example, “Run this action to see execution history.”).

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@app/client/src/PluginActionEditor/components/PluginActionResponse/components/ActionExecutionHistoryTab.tsx`
at line 112, The current empty-state copy in ActionExecutionHistoryTab.tsx is
context-specific ("Run this query…"); update the Text element (the node
rendering Text with kind="body-m" inside the ActionExecutionHistoryTab
component) to use neutral wording such as "Run this action to see execution
history." so it applies both in query and action debugger contexts.

Comment on lines +742 to +753
try {
preview = isString(value) ? value : JSON.stringify(value, null, 2);
} catch (e) {
preview = String(value);
}

if (!preview) return String(value);

if (preview.length <= ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT) return preview;

return `${preview.slice(0, ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT)}...`;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Avoid pretty-printed JSON in execution-history preview generation on the hot path.

Line [743] uses JSON.stringify(value, null, 2) for every non-string preview before truncation, which adds avoidable CPU/memory work for large responses and can hurt editor responsiveness during runs.

Suggested low-cost improvement
 function getActionExecutionHistoryPreview(value: unknown) {
   if (isNil(value)) return "";
 
-  let preview = "";
+  if (isString(value)) {
+    return value.length <= ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT
+      ? value
+      : `${value.slice(0, ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT)}...`;
+  }
+
+  let preview = "";
 
   try {
-    preview = isString(value) ? value : JSON.stringify(value, null, 2);
+    preview = JSON.stringify(value);
   } catch (e) {
     preview = String(value);
   }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/client/src/sagas/ActionExecution/PluginActionSaga.ts` around lines 742 -
753, The preview generation is using JSON.stringify(value, null, 2) which
pretty-prints and is expensive on the hot path; update the logic that sets
preview (the branch using isString and JSON.stringify) to use a compact
JSON.stringify(value) (no spacing) or another non-pretty fast serializer
instead, so large responses don't incur extra CPU/memory before truncation; keep
the existing fallback (String(value)) and preserve the later truncation logic
that uses ACTION_EXECUTION_HISTORY_PREVIEW_LIMIT and the preview variable.

@github-actions

Copy link
Copy Markdown

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

@github-actions github-actions Bot added the Stale label Jun 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant