Skip to content

feat: dashboard show time range differ warning when cache data is used #4509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
ktx-abhay merged 2 commits into from
Sep 10, 2024
Merged

feat: dashboard show time range differ warning when cache data is used #4509

ktx-abhay merged 2 commits into from
Sep 10, 2024

Conversation

@ktx-abhay
Copy link
Collaborator

@ktx-abhay ktx-abhay commented Sep 10, 2024 •
edited
Loading

Summary by CodeRabbit

  • New Features

    • Introduced a button to notify users when displayed data is cached and differs from the selected time range.
    • Added a new event to handle updates regarding cached data differences in the dashboard components.

  • Enhancements

    • Improved caching mechanism to include time range specifications for better data management.
    • Enhanced responsiveness of components to changes in cached data states.

  • Bug Fixes

    • Streamlined handling of null values in configuration options to prevent undefined values from affecting logic.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 10, 2024 •
edited
Loading

Walkthrough

The pull request introduces enhancements to the dashboard components, focusing on managing cached data in relation to the current time range. Key updates include the addition of a button to alert users about cached data discrepancies, new reactive references and event emissions for tracking cached data states, and modifications to caching functions to support time range specifications. These changes collectively improve the interactivity and responsiveness of the dashboard components.

Changes

Files Change Summary
web/src/components/dashboards/PanelContainer.vue, web/src/components/dashboards/PanelSchemaRenderer.vue Added a new button and reactive reference for cached data discrepancies, including event emissions for state updates.
web/src/composables/dashboard/usePanelCache.ts Modified savePanelCache function to include a cacheTimeRange parameter for enhanced caching control.
web/src/composables/dashboard/usePanelDataLoader.ts Introduced a new boolean state for tracking cached data time range differences and updated caching logic accordingly.
web/src/utils/dashboard/convertSQLData.ts Improved the handling of noValueConfigOption using nullish coalescing and streamlined processing of nullEntry objects.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant PanelContainer
    participant PanelSchemaRenderer
    participant usePanelDataLoader
    participant usePanelCache

    User->>PanelContainer: Select time range
    PanelContainer->>usePanelDataLoader: Update data based on time range
    usePanelDataLoader->>PanelSchemaRenderer: Emit "is-cached-data-differ-with-current-time-range-update"
    PanelSchemaRenderer->>PanelContainer: Update UI with cache status
    PanelContainer->>usePanelCache: Save panel cache with new time range
Loading
Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between b5e3772 and 47bf7e4.

Files selected for processing (5)
  • web/src/components/dashboards/PanelContainer.vue (5 hunks)
  • web/src/components/dashboards/PanelSchemaRenderer.vue (3 hunks)
  • web/src/composables/dashboard/usePanelCache.ts (1 hunks)
  • web/src/composables/dashboard/usePanelDataLoader.ts (4 hunks)
  • web/src/utils/dashboard/convertSQLData.ts (3 hunks)
Additional comments not posted (12)
web/src/composables/dashboard/usePanelCache.ts (1)

81-88: LGTM!

The changes to the savePanelCache function look good:

  • The new cacheTimeRange parameter allows for specifying a time range for the cached data, providing more granular control over the caching mechanism.
  • Deep-copying the cacheTimeRange parameter ensures that the original object is not mutated.

The code changes are approved.

web/src/components/dashboards/PanelContainer.vue (4)

112-126: LGTM!

The new button code segment looks good:

  • The button is conditionally rendered based on isCachedDataDifferWithCurrentTimeRange, providing a visual indication to the user when the displayed data is cached and differs from the selected time range.
  • The tooltip message clearly communicates the warning to the user.

The code changes are approved.

367-367: LGTM!

The new reactive reference code segment looks good:

  • The isCachedDataDifferWithCurrentTimeRange reactive reference is used to track the state of whether the cached data differs from the current time range.
  • Initializing it to false is a sensible default value.

The code changes are approved.

368-372: LGTM!

The new handler function code segment looks good:

  • The handleIsCachedDataDifferWithCurrentTimeRangeUpdate function provides a way to update the isCachedDataDifferWithCurrentTimeRange state based on the boolean input.
  • The function is correctly updating the reactive reference.

The code changes are approved.

232-234: LGTM!

The new event listener code segment looks good:

  • The event listener allows the component to respond to updates regarding cached data differences.
  • The event listener is correctly bound to the @is-cached-data-differ-with-current-time-range-update event and invokes the handleIsCachedDataDifferWithCurrentTimeRangeUpdate function.

The code changes are approved.

web/src/components/dashboards/PanelSchemaRenderer.vue (2)

269-269: LGTM!

The isCachedDataDifferWithCurrentTimeRange code segment looks good:

  • Including isCachedDataDifferWithCurrentTimeRange in the destructured properties from the usePanelDataLoader function indicates that it is a significant part of the component's reactive data model.
  • The change reflects a more dynamic data handling approach.

The code changes are approved.

418-423: LGTM!

The event emission code segment looks good:

  • Emitting the "is-cached-data-differ-with-current-time-range-update" event when isCachedDataDifferWithCurrentTimeRange changes allows parent components to respond to updates regarding cached data in relation to the current time range.
  • The watch function ensures that any changes to isCachedDataDifferWithCurrentTimeRange will trigger the event emission.

The code changes are approved.

web/src/composables/dashboard/usePanelDataLoader.ts (3)

96-96: LGTM!

The addition of the isCachedDataDifferWithCurrentTimeRange state variable is a good enhancement to track the validity of cached data based on the selected time range.

107-114: Looks good!

The modifications to the saveCurrentStateToCache function to include the start_time and end_time parameters derived from selectedTimeObj are beneficial. This enhancement allows for more accurate caching based on the selected time range, improving the overall functionality of the panel data loader.

1376-1384: Good addition!

The code segment that checks for mismatches between the selected time range and the cached time range is a valuable addition. Setting state.isCachedDataDifferWithCurrentTimeRange to true when there is a discrepancy allows the application to handle situations where the cached data may not be valid anymore due to changes in the time selection. This improves the overall robustness and reliability of the panel data loader.

web/src/utils/dashboard/convertSQLData.ts (2)

218-218: Good use of nullish coalescing operator!

Defining noValueConfigOption using the nullish coalescing operator is a good practice. It ensures that if panelSchema.config?.no_value_replacement is undefined, noValueConfigOption will default to an empty string. This enhances the robustness of the code by preventing potential undefined values from propagating through the logic.

320-320: Simplified usage of noValueConfigOption improves readability!

The simplification of the usage of noValueConfigOption in the processing of nullEntry objects is a positive change. By removing the checks for undefined and directly assigning noValueConfigOption to nullEntry[key] when the key does not match timeKey or uniqueKey, the code becomes more concise and easier to understand. This improves code readability and maintainability.

Also applies to: 339-339

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the ☢️ Bug Something isn't working label Sep 10, 2024
@ktx-abhay ktx-abhay force-pushed the fix/dashboard-cache-issues branch from 959b361 to 47bf7e4 Compare September 10, 2024 11:17
@ktx-abhay ktx-abhay merged commit 83b7da0 into main Sep 10, 2024
@ktx-abhay ktx-abhay deleted the fix/dashboard-cache-issues branch September 10, 2024 11:49
@ktx-akshay ktx-akshay changed the title fix: dashboard show time range differ warning when cache data is used feat: dashboard show time range differ warning when cache data is used Sep 10, 2024
This was referenced Sep 13, 2024
Merged
Merged
Merged
@coderabbitai coderabbitai bot mentioned this pull request Sep 20, 2024
Closed
@coderabbitai coderabbitai bot mentioned this pull request Sep 30, 2024
Merged
@coderabbitai coderabbitai bot mentioned this pull request Oct 10, 2024
Merged
@coderabbitai coderabbitai bot mentioned this pull request Oct 30, 2024
Merged
@coderabbitai coderabbitai bot mentioned this pull request Nov 11, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ktx-kirtan ktx-kirtan ktx-kirtan approved these changes

Assignees

No one assigned

Labels

☢️ Bug Something isn't working

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ktx-abhay @ktx-kirtan