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

[ahmadshaheer]

• 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 for 2b47da1. It will automatically update as commits are pushed.}

[github-actions]

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

[github-actions]

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

[ellipsis-dev]

👍 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.

[github-actions]

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

[ellipsis-dev]

❌ 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.

[github-actions]

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

[ellipsis-dev]

👍 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.

[github-actions]

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

[makeavish]

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

[ahmadshaheer]

@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

[github-actions]

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

[ellipsis-dev]

👍 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]

@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]

@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

[makeavish]

@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

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

[github-actions]

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

[ellipsis-dev]

❌ 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]

@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]

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

[ahmadshaheer]

@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]

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

[ahmadshaheer]

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]

Docs update not needed for this change