fix: fixed widgets not visible after saving in the dashboard detail

[SagarRajput-7]

Summary

Here we had a race condition in maintaining 2 interdependent variables dashboardLayout and layouts caused by the parallel execution of the get and put calls triggered from different sources.

The get API gets called with the updated values and returns the correct result. Meanwhile, the put call doesn't wait for the get call to finish and update the variables; rather, it continues with the older value. In those cases when the put call finishes after the get call, it overrides the updated value. Hence, we see the widget coming and then going away.

Related Issues / PR's

• Dashboard panel not visible in dashboard details #6947

Solves following customer issues:

• https://signoz-team.slack.com/archives/C02C7P6KE06/p1728319342518089
• https://signoz-team.slack.com/archives/C02B85R4R0A/p1728367047032009

Screenshots

Before:

Screen.Recording.2025-02-13.at.8.01.23.AM.mov

After:

Solved-Dashboard-not-visible.mov

Affected Areas and Manually Tested Areas

---

Important

Fix widgets visibility issue by adding isDashboardFetching check in GridCardLayout.tsx and updating dashboard context in Dashboard.tsx.

• Behavior:
  • Add isDashboardFetching check in GraphLayout in GridCardLayout.tsx to prevent saving layout during fetch.
  • Modify useDashboard in Dashboard.tsx to set isDashboardFetching state during dashboard data fetch.
• Context:
  • Add isDashboardFetching to IDashboardContext in types.ts and Dashboard.tsx.
• Misc:
  • Update DashboardProvider in Dashboard.tsx to manage isDashboardFetching state.

^{This description was created by for 98ec616. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 98ec616 in 1 minute and 3 seconds

More details

• Looked at 90 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 5 drafted comments based on config settings.

1. frontend/src/container/GridCardLayout/GridCardLayout.tsx:487

• Draft comment:
  Avoid inline styles in React. Consider moving the background color style to a CSS class or styled component.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

2. frontend/src/container/GridCardLayout/GridCardLayout.tsx:232

• Draft comment:
  Good addition of '!isDashboardFetching' in the condition to prevent premature layout saves during an active fetch. Consider adding isDashboardFetching (and updateDashboardMutation.isLoading) to the dependency array or a comment justifying their exclusion to avoid stale closures.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

3. frontend/src/providers/Dashboard/Dashboard.tsx:262

• Draft comment:
  Nice use of a try-finally block in the async queryFn to manage the isDashboardFetching state. This pattern ensures the flag resets even if an error occurs.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

4. frontend/src/providers/Dashboard/Dashboard.tsx:436

• Draft comment:
  The context value now passes isDashboardFetching, ensuring components consuming the Dashboard context have access to the updated fetch status.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

5. frontend/src/providers/Dashboard/types.ts:50

• Draft comment:
  The IDashboardContext interface now includes isDashboardFetching, which aligns well with the context changes in DashboardProvider.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

Workflow ID: wflow_nS3AWvtjE5aeOGA8

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.