Skip to content
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.

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

feat: add 'create channel' option in channels list and refetch alert channels on opening the channels dropdown #6416

Conversation

ahmadshaheer
Copy link
Collaborator

@ahmadshaheer ahmadshaheer commented Nov 11, 2024

  • Added a "Create Channel" option in the channel selection dropdown that redirects users to the channel creation page.
  • Implemented auto-refresh of the channels list whenever the dropdown is opened to ensure users always see the latest available notification channels.

Summary

Related Issues / PR's

close https://github.com/SigNoz/engineering-pod/issues/1979

Screenshots

2024-11-11.11-47-39.mov

Affected Areas and Manually Tested Areas

  • Create alert
  • Edit alert

Note

This PR just addresses the above tasks. the alerts components might need revamp, we can pick that as a separate task


Important

Adds 'Create Channel' option in dropdown and auto-refreshes channel list using refetch in useFetch.

  • Behavior:
    • Adds 'Create Channel' option in ChannelSelect dropdown to redirect to channel creation page.
    • Implements auto-refresh of channels list in BasicInfo.tsx using useFetch with refetch capability.
  • Hooks:
    • Updates useFetch in useFetch.ts to support refetching with fetchData function.
  • Components:
    • Adds onDropdownOpen prop to ChannelSelect to trigger refetching channels.

This description was created by Ellipsis for 2b47da1. It will automatically update as commits are pushed.

Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

@github-actions github-actions bot added enhancement New feature or request docs required labels Nov 11, 2024
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Reviewed everything up to 0b7da41 in 1 minute and 3 seconds

More details
  • Looked at 164 lines of code in 3 files
  • Skipped 0 files when reviewing.
  • Skipped posting 2 drafted comments based on config settings.
1. frontend/src/hooks/useFetch.ts:33
  • Draft comment:
    Consider resetting the loading state to true at the beginning of the fetchData function to ensure it accurately reflects the current state of the fetch operation.
  • Reason this comment was not posted:
    Decided after close inspection that this draft comment was likely wrong and/or not actionable:
    The comment suggests a change that might not be necessary because the loading state is already managed correctly. The fetchData function is only called when state.loading is true, so resetting it to true at the start of fetchData seems redundant. The current logic appears to handle the loading state appropriately, as it starts with loading set to true and only changes to false after a fetch attempt.
    I might be missing a scenario where fetchData is called without the loading state being true, but the current useEffect setup seems to ensure that fetchData is only called when loading is true.
    Given the current setup, it seems unlikely that fetchData would be called with loading set to false, as the useEffect hook checks for state.loading before calling fetchData.
    The comment is unnecessary because the loading state is already managed correctly. The fetchData function is only called when loading is true, making the suggested change redundant.
2. frontend/src/container/FormAlertRules/ChannelSelect/index.tsx:74
  • Draft comment:
    Avoid using inline styles in React components. Instead, use external stylesheets, CSS classes, or styled components.
  • Reason this comment was not posted:
    Comment was on unchanged code.

Workflow ID: wflow_zNZEHcu22GXtPJX9


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

@ahmadshaheer ahmadshaheer force-pushed the feat/alert-channels-polling-and-new-channel-option-in-channels-list branch from 0b7da41 to 4b9a832 Compare November 11, 2024 07:32
Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

❌ Changes requested. Incremental review on 4b9a832 in 1 minute and 11 seconds

More details
  • Looked at 217 lines of code in 3 files
  • Skipped 0 files when reviewing.
  • Skipped posting 5 drafted comments based on config settings.
1. frontend/src/hooks/useFetch.ts:15
  • Draft comment:
    Consider initializing loading to false instead of null to avoid confusion, as loading should represent a binary state: true (loading) or false (not loading).
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The useFetch hook is designed to fetch data and manage its state. However, the loading state is set to true initially and is never set back to null. This can lead to confusion as loading should ideally represent a binary state: true (loading) or false (not loading).
2. frontend/src/hooks/useFetch.ts:23
  • Draft comment:
    Consider checking if the state is already loading before setting it to loading again to prevent unnecessary state updates.
  • Reason this comment was not posted:
    Confidence changes required: 50%
    The useFetch hook now includes a refetch function, which is a good addition. However, the fetchData function should ensure that it doesn't set the state to loading if it's already loading to prevent unnecessary state updates.
3. frontend/src/hooks/useFetch.ts:57
  • Draft comment:
    Ensure that fetchData's dependencies are correct to avoid unnecessary re-renders. Currently, it depends on functions and param, which seems appropriate.
  • Reason this comment was not posted:
    Confidence changes required: 33%
    The useFetch hook's fetchData function is called within a useEffect hook for the initial fetch. This is a good practice to ensure data is fetched when the component mounts. However, the useEffect dependency array includes fetchData, which is a function created with useCallback. This is correct as it ensures the effect runs when fetchData changes, but it's important to ensure fetchData's dependencies are correct to avoid unnecessary re-renders.
4. frontend/src/container/FormAlertRules/ChannelSelect/index.tsx:99
  • Draft comment:
    Ensure that refetchChannels is not called unnecessarily to avoid performance issues. Currently, it is called only when the dropdown is opened, which is appropriate.
  • Reason this comment was not posted:
    Confidence changes required: 33%
    The ChannelSelect component uses the onDropdownVisibleChange prop to trigger a refetch of channels when the dropdown is opened. This is a good approach to ensure the list is up-to-date. However, it's important to ensure that the refetchChannels function is not called unnecessarily, which could lead to performance issues.
5. frontend/src/container/FormAlertRules/ChannelSelect/index.tsx:56
  • Draft comment:
    Use design tokens or predefined color constants instead of hardcoding color values to maintain consistency in design and theming. This applies to other instances in this file as well.
  • Reason this comment was not posted:
    Decided after close inspection that this draft comment was likely wrong and/or not actionable:
    The code is already using a design token for the color value, which aligns with the comment's suggestion. Therefore, the comment is not applicable to the current code and should be removed.
    I might be missing some context about other instances in the file, but based on the provided code, the use of Color.BG_ROBIN_500 is correct.
    The comment specifically mentions hardcoding color values, which is not the case here. The use of a design token is evident, so the comment is not applicable.
    The comment is not applicable as the code already uses a design token for the color value. The comment should be removed.

Workflow ID: wflow_JfV5VpaR8MoTyTBR


Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Incremental review on 4ccf527 in 22 seconds

More details
  • Looked at 55 lines of code in 2 files
  • Skipped 0 files when reviewing.
  • Skipped posting 2 drafted comments based on config settings.
1. frontend/src/container/FormAlertRules/ChannelSelect/index.tsx:53
  • Draft comment:
    Good use of a styled component for consistent styling of the 'Create a new channel' option.
  • Reason this comment was not posted:
    Confidence changes required: 0%
    The PR introduces a styled component StyledCreateChannelOption for styling the 'Create a new channel' option. This is a good practice for maintaining consistent styling and separation of concerns.
2. frontend/src/container/FormAlertRules/ChannelSelect/index.tsx:4
  • Draft comment:
    Avoid using inline styles. Move the width: '100%' style to the StyledSelect styled component.
  • Reason this comment was not posted:
    Comment was on unchanged code.

Workflow ID: wflow_3LMYJecg0ohskHiF


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

Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

@makeavish
Copy link
Member

@ahmadshaheer What happens when there's no alert channel exist, please post screen record of the same

@ahmadshaheer
Copy link
Collaborator Author

@ahmadshaheer What happens when there's no alert channel exist, please post screen record of the same

Sure, @makeavish.

2024-11-11.17-02-26.mov

Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

👍 Looks good to me! Incremental review on 51c0eaa in 34 seconds

More details
  • Looked at 38 lines of code in 1 files
  • Skipped 0 files when reviewing.
  • Skipped posting 1 drafted comments based on config settings.
1. frontend/src/container/FormAlertRules/ChannelSelect/index.tsx:62
  • Draft comment:
    Using window.open can be blocked by pop-up blockers. Consider using history.push for navigation within the app instead.
  • Reason this comment was not posted:
    Comment was on unchanged code.

Workflow ID: wflow_vSqqjdInNnU2cqQz


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

@makeavish
Copy link
Member

@ahmadshaheer
There's an extra event which is unexpectedly fired and also create new notification channel should fire an event Alert: Create notification channel button clicked
https://www.loom.com/share/6a36a128db4b4f7389e176c48770ac0c?sid=2b334473-b545-4a9f-a6ed-bbc0ca7ccc84

@ahmadshaheer
Copy link
Collaborator Author

@ahmadshaheer There's an extra event which is unexpectedly fired and also create new notification channel should fire an event Alert: Create notification channel button clicked https://www.loom.com/share/6a36a128db4b4f7389e176c48770ac0c?sid=2b334473-b545-4a9f-a6ed-bbc0ca7ccc84

Sure, @makeavish, will fix it.

Also displaying the Create a notification channel button, in case there are no channels, seems redundant. I think we should remove it. IMO, we can just have an option inside the dropdown to create a new channel. CC: @YounixM

Screenshot from 2024-11-12 14-41-53

image

@makeavish
Copy link
Member

@ahmadshaheer There's an extra event which is unexpectedly fired and also create new notification channel should fire an event Alert: Create notification channel button clicked https://www.loom.com/share/6a36a128db4b4f7389e176c48770ac0c?sid=2b334473-b545-4a9f-a6ed-bbc0ca7ccc84

Sure, @makeavish, will fix it.

Also displaying the Create a notification channel button, in case there are no channels, seems redundant. I think we should remove it. IMO, we can just have an option inside the dropdown to create a new channel. CC: @YounixM

Screenshot from 2024-11-12 14-41-53

image

When alert notification channel doesn't exist then we just disable Create Rule button and don't show it to user that need to create notification channel before creating alert. So we should show that as text, can keep the button.

@GeekBoySupreme might have some input on this

Copy link

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

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

❌ Changes requested. Incremental review on 2b47da1 in 47 seconds

More details
  • Looked at 79 lines of code in 2 files
  • Skipped 0 files when reviewing.
  • Skipped posting 1 drafted comments based on config settings.
1. frontend/src/container/FormAlertRules/BasicInfo.tsx:97
  • Draft comment:
    The useEffect dependency array should be empty to ensure the event is logged only once when the page is first visited. Including channels.loading might cause unnecessary re-renders.
  • Reason this comment was not posted:
    Decided after close inspection that this draft comment was likely wrong and/or not actionable:
    The comment is suggesting a change to the dependency array of a useEffect hook. The current code includes channels.loading in the dependency array, which means the effect will run whenever channels.loading changes. The comment suggests this might cause unnecessary re-renders, but the code is designed to log an event only once when the page is first visited, using hasLoggedEvent to track this. Removing channels.loading might prevent the effect from running when needed.
    The comment might be overlooking the purpose of including channels.loading in the dependency array, which is to ensure the effect runs when the loading state changes. Removing it could prevent the event from being logged correctly.
    The use of hasLoggedEvent should prevent unnecessary re-renders, as the event will only be logged once. The inclusion of channels.loading ensures the effect runs when the loading state changes, which might be necessary for the logic.
    The comment is not valid because it overlooks the purpose of including channels.loading in the dependency array. The current implementation ensures the event is logged correctly without unnecessary re-renders.

Workflow ID: wflow_hWTsWZjs8j5XM1vN


Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

@ahmadshaheer
Copy link
Collaborator Author

@ahmadshaheer There's an extra event which is unexpectedly fired and also create new notification channel should fire an event Alert: Create notification channel button clicked https://www.loom.com/share/6a36a128db4b4f7389e176c48770ac0c?sid=2b334473-b545-4a9f-a6ed-bbc0ca7ccc84

Done 👍

@YounixM
Copy link
Member

YounixM commented Nov 15, 2024

@ahmadshaheer : Based on the screen recordings, why does the whole app re-render when we click on create a new channel ??

@ahmadshaheer
Copy link
Collaborator Author

@ahmadshaheer : Based on the screen recordings, why does the whole app re-render when we click on create a new channel ??

@YounixM, it doesn’t get re-rendered, it opens the channel creation page in a new tab. It seems that isn’t clear in the recording 😅.

@YounixM
Copy link
Member

YounixM commented Nov 15, 2024

Yes @ahmadshaheer. It's looks like the whole app is reloading.

@ahmadshaheer
Copy link
Collaborator Author

Yes @ahmadshaheer. It's looks like the whole app is reloading.

@YounixM, it wasn't clear in the recording, I re-recorded it. when we click on new channel, it opens the new channel page in a new tab 🙂.

2024-11-18.09-50-15.mov

@makeavish
Copy link
Member

Docs update not needed for this change

@makeavish makeavish enabled auto-merge (squash) November 18, 2024 05:49
@makeavish makeavish merged commit a59e7b9 into develop Nov 18, 2024
15 of 18 checks passed
@YounixM YounixM deleted the feat/alert-channels-polling-and-new-channel-option-in-channels-list branch November 18, 2024 06:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs not required enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants