feat: trace funnels list page

[ahmadshaheer]

Summary

Related Issues / PR's

Screenshots

2025-03-17.14-17-15.mov

Affected Areas and Manually Tested Areas

---

Important

Adds trace funnels management feature with create, rename, delete, and list functionalities, including new routes, components, and API integrations.

• Behavior:
  • Adds TracesFunnels and TracesFunnelDetails components for managing trace funnels.
  • Implements createFunnel, getFunnelsList, getFunnelById, renameFunnel, and deleteFunnel functions in traceFunnels/index.ts for API interactions.
  • Introduces useFunnelsList, useFunnelDetails, useCreateFunnel, useRenameFunnel, and useDeleteFunnel hooks in useFunnels.tsx for managing funnel data.
  • Adds search and sort functionalities in useHandleTraceFunnelsSearch.tsx and useHandleTraceFunnelsSort.tsx.
• Routes:
  • Adds routes TRACES_FUNNELS and TRACES_FUNNELS_DETAIL in routes.ts and AppRoutes.
  • Updates TracesModulePage to include a new tab for funnels.
• Components:
  • Adds CreateFunnel, DeleteFunnel, RenameFunnel, FunnelsList, FunnelsEmptyState, SearchBar, and Header components in TracesFunnels.
  • Introduces LearnMore component for additional information links.
• Styles:
  • Adds styles for new components in TracesFunnels and SignozModal.
  • Updates dateTimeFormats.ts with FUNNELS_LIST_DATE format.
• Permissions:
  • Updates routePermission in permission/index.ts to include new routes.

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

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 8944136 in 4 minutes and 51 seconds

More details

• Looked at 2157 lines of code in 39 files
• Skipped 0 files when reviewing.
• Skipped posting 26 drafted comments based on config settings.

1. frontend/src/components/LearnMore/LearnMore.tsx:23

• Draft comment:
  Avoid using inline color values; use design tokens or a predefined color constant instead.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

2. frontend/src/components/SignozModal/SignozModal.tsx:14

• Draft comment:
  Ensure non-inline usage of styles; check that styling is applied via CSS classes.
• Reason this comment was not posted:
  Comment was on unchanged code.

3. frontend/src/constants/dateTimeFormats.ts:59

• Draft comment:
  ‘FUNNELS_LIST_DATE’ should be reviewed to ensure consistency with existing design tokens if available.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50%
  This comment seems to misunderstand what design tokens are. Design tokens are typically for visual design elements like colors, spacing, typography - not date format strings. This is a date format pattern file, and the new format follows the established patterns. The comment about design tokens doesn't make sense in this context.
  Could there be some broader design system that includes date format standardization that I'm not aware of? Maybe there's a company-wide date format guideline that should be consulted?
  Even if such guidelines exist, this file itself appears to be the source of truth for date formats in the frontend, and the new format follows the established patterns within it.
  The comment should be deleted as it incorrectly suggests checking design tokens for what is actually a date format string, and the format is already consistent with the existing patterns in this file.

4. frontend/src/constants/reactQueryKeys.ts:54

• Draft comment:
  Ensure query key names are consistent and follow naming conventions. No specific issue, but double-check if similar naming is enforced across code.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

5. frontend/src/constants/routes.ts:59

• Draft comment:
  Routes for funnels (TRACES_FUNNELS, TRACES_FUNNELS_DETAILS) are hardcoded. Verify usage of design tokens if needed for styling routes.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

6. frontend/src/hooks/TracesFunnels/useFunnels.tsx:27

• Draft comment:
  Verify that the query key array for funnels list and funnel details follows best practices for caching. The structure looks consistent.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

7. frontend/src/hooks/TracesFunnels/useHandleTraceFunnelsSort.tsx:47

• Draft comment:
  Ensure that sorting function handles cases where the sorting key does not return a numeric value; currently defaults to comparing creation_timestamp.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is asking the author to ensure that a specific behavior is handled in the sorting function. It is not suggesting a specific code change or asking for a test to be written. It is more of a reminder to check the behavior, which violates the rule against asking the author to ensure behavior is intended.

8. frontend/src/pages/TracesFunnels/components/DeleteFunnel/DeleteFunnel.tsx:54

• Draft comment:
  Ensure deletion confirmation messages are localized and consistent with design tokens if applicable.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

9. frontend/src/pages/TracesFunnels/components/FunnelsEmptyState/FunnelsEmptyState.styles.scss:11

• Draft comment:
  Border color values use hardcoded token names; check if these colors have design token equivalents.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

10. frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.tsx:65

• Draft comment:
  Button disabled check uses newFunnelName === initialName; consider trimming whitespace or deeper validation if needed.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

11. frontend/src/pages/TracesFunnels/index.tsx:64

• Draft comment:
  Ensure usage of destructured payload from useFunnelsList properly handles missing data (empty array fallback is provided, but verify error handling).
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

12. frontend/src/pages/TracesModulePage/TracesModulePage.tsx:16

• Draft comment:
  Avoid using process.env.NODE_ENV conditional in route definitions for production; consider externalizing feature flags.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50%
  The code explicitly shows this is a temporary solution with a TODO. The author knows this isn't permanent. The comment suggests a better approach, but given the TODO, the author is already aware this needs to change. The comment doesn't add new information or suggest something the author doesn't already know.
  The comment does suggest a specific alternative (feature flags) which could be helpful. Maybe the author doesn't know about feature flag infrastructure.
  Given the TODO comment and temporary nature, the author is already planning to remove this. Adding another comment about how to do it properly isn't necessary at this stage.
  Delete the comment since it's redundant with the TODO and doesn't provide actionable value given the temporary nature of the code.

13. frontend/src/pages/TracesModulePage/constants.tsx:3

• Draft comment:
  Use predefined icons if available from the design tokens rather than directly importing icons from lucide-react.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

14. frontend/src/utils/permission/index.ts:47

• Draft comment:
  Avoid using hardcoded role arrays inline; centralize permission constants if possible.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

15. frontend/src/pages/TracesFunnelDetails/TracesFunnelDetails.tsx:8

• Draft comment:
  Avoid inline styles with hardcoded colors. Instead of style={{ color: '#fff' }}, add a CSS class that uses design tokens or predefined color constants.
• Reason this comment was not posted:
  Marked as duplicate.

16. frontend/src/hooks/TracesFunnels/useHandleTraceFunnelsSort.tsx:47

• Draft comment:
  The sorting logic falls back to 'creation_timestamp' if the selected field isn’t numeric. Ensure that all sortable fields are numeric or update the logic to handle string sorting as needed.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50%
  The comment is pointing out a potential design limitation, but it's phrased as a verification request ("Ensure that..."). It's not clear if string sorting is actually needed - we don't have the FunnelData type definition to know what fields exist. The current implementation might be intentionally designed to only sort numeric fields.
  Without seeing the FunnelData type definition, we can't be certain if string sorting is actually needed. The current implementation might be a deliberate design choice.
  Even if string sorting might be needed, the comment violates the rule about not asking authors to verify or ensure things. If string sorting is required, it should be stated as a direct issue.
  Delete the comment because it violates the rule about verification requests and lacks clear evidence that string sorting is actually needed.

17. frontend/src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx:66

• Draft comment:
  Avoid inline styles for the icon opacity. Instead of using style={{ opacity: '0.4' }} on the Search icon, define a CSS class using design tokens for opacity.
• Reason this comment was not posted:
  Marked as duplicate.

18. frontend/src/AppRoutes/pageComponents.ts:41

• Draft comment:
  It appears that the webpackChunkName for TracesFunnels is incorrectly set to "Traces Save Views". This is likely a copy-paste typo. Consider updating it (e.g., to "Traces Funnels") for clarity.
• Reason this comment was not posted:
  Marked as duplicate.

19. frontend/src/AppRoutes/pageComponents.ts:109

• Draft comment:
  Typo in the component name 'ListAllALertsPage' (line 109): 'ALerts' should likely be 'Alerts'. Correcting this will improve code consistency.
• 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.

20. frontend/src/AppRoutes/routes.ts:24

• Draft comment:
  Typo detected: The import 'ListAllALertsPage' appears to have an extra capitalized 'A' in 'ALerts'. Consider renaming it to 'ListAllAlertsPage' for consistency and clarity.
• 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.

21. frontend/src/constants/dateTimeFormats.ts:54

• Draft comment:
  Typographical error: In the 'UTC_MONTH_COMPACT' format at line 54, the string is 'MMM DD,YYYY, HH:mm (UTC Z)'. Consider inserting a space after the comma to make it 'MMM DD, YYYY, HH:mm (UTC Z)' for consistency and clarity.
• 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.

22. frontend/src/constants/reactQueryKeys.ts:18

• Draft comment:
  Typographical error: 'GET_ALL_ALLERTS' appears to have an extra 'L'. Consider renaming it to 'GET_ALL_ALERTS'.
• 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.

23. frontend/src/constants/reactQueryKeys.ts:33

• Draft comment:
  Lexicographical error: The string 'GET_DAEMONSET_LIST,' contains a trailing comma within its value. It should likely be 'GET_DAEMONSET_LIST' (without the comma).
• 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.

24. frontend/src/constants/routes.ts:42

• Draft comment:
  Consider renaming 'UN_AUTHORIZED' to 'UNAUTHORIZED' (both the constant name and the route '/un-authorized' to '/unauthorized') for consistency with common spelling.
• 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.

25. frontend/src/container/TopNav/DateTimeSelectionV2/config.ts:97

• Draft comment:
  Typographical error: In the RelativeDurationOptions array, the label on line 97 reads 'Last 6 hour'. It should be corrected to 'Last 6 hours' for consistency.
• 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.

26. frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx:1

• Draft comment:
  Typo/Copy-Paste Issue: The component 'CreateFunnel' is importing '../RenameFunnel/RenameFunnel.styles.scss'. Please check if you intended to import a specific 'CreateFunnel.styles.scss' file or if the styling should remain shared. This might be a leftover from duplicating or copying code from the RenameFunnel component.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50%
  The shared CSS class names suggest this is intentional reuse of styles between funnel-related modals. There's no CreateFunnel.styles.scss file mentioned in the diff. The comment assumes this is a mistake without evidence. Sharing styles between similar components is a valid pattern. The comment is making assumptions without strong evidence of an actual problem.
  I could be wrong about the intentional style sharing - maybe these components should have separate styling. Also, the component/index.tsx rule suggests they care about file organization.
  Even if separate styling might be preferred, we don't have strong evidence this is a mistake rather than intentional sharing. The file organization rule doesn't specifically prohibit sharing style files.
  Delete the comment because it's speculative and lacks strong evidence that this is actually a problem rather than intentional style sharing between related components.

Workflow ID: wflow_jbDXHIXFKtv62qJL

---

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.

[ellipsis-dev]

❌ Changes requested. Incremental review on 82aa320 in 1 minute and 38 seconds

More details

• Looked at 121 lines of code in 9 files
• Skipped 0 files when reviewing.
• Skipped posting 20 drafted comments based on config settings.

1. frontend/src/AppRoutes/pageComponents.ts:41

• Draft comment:
  Route name updated for consistency; ensure related navigation components are updated accordingly.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the PR author to ensure that related navigation components are updated, which violates the rule against asking the author to ensure things are tested or verified. It doesn't provide a specific suggestion or point out a specific issue with the code.

2. frontend/src/AppRoutes/routes.ts:240

• Draft comment:
  Updated route path to use correct key (TRACES_FUNNELS_DETAIL). Verify consistency with ROUTES definition.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 50% <= threshold 50%
  The comment is asking the author to verify consistency with another part of the codebase, which violates the rule against asking the author to double-check things. However, it does point out a specific change and its relation to another part of the code, which could be useful for the author to consider.

3. frontend/src/constants/routes.ts:59

• Draft comment:
  Renamed route key from TRACES_FUNNELS_DETAILS to TRACES_FUNNELS_DETAIL for consistency.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is purely informative, stating that a route key was renamed for consistency. It doesn't provide a suggestion, ask for confirmation, or point out a potential issue.

4. frontend/src/container/TopNav/DateTimeSelectionV2/config.ts:207

• Draft comment:
  Update routesToSkip list to use updated route key TRACES_FUNNELS_DETAIL.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

5. frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx:43

• Draft comment:
  Ensure generatePath uses updated route key (TRACES_FUNNELS_DETAIL) for correct navigation.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

6. frontend/src/pages/TracesFunnels/components/FunnelsList/FunnelsList.tsx:21

• Draft comment:
  Route generation updated to use TRACES_FUNNELS_DETAIL; verify that all related navigation is consistent.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is asking the PR author to verify consistency in navigation, which is against the rules of asking for confirmation or verification. It doesn't provide a specific suggestion or point out a specific issue.

7. frontend/src/utils/permission/index.ts:103

• Draft comment:
  Permission mapping updated to use TRACES_FUNNELS_DETAIL; ensure the key matches in all parts of the app.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is asking the author to ensure that the key matches in all parts of the app, which is a form of asking for confirmation or verification. This violates the rule against asking the author to ensure or verify things.

8. frontend/src/AppRoutes/pageComponents.ts:41

• Draft comment:
  Updated webpackChunkName for TracesFunnels now correctly reflects the component. Good consistency.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is purely informative and does not provide any actionable feedback or suggestions for improvement. It simply states that something was updated correctly, which does not align with the rules for useful comments.

9. frontend/src/AppRoutes/routes.ts:240

• Draft comment:
  Renamed route constant to TRACES_FUNNELS_DETAIL for funnel details for consistency across the app.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is purely informative, explaining a change that was made. It doesn't provide any actionable feedback or suggestions for improvement.

10. frontend/src/constants/routes.ts:59

• Draft comment:
  Route constant renamed to TRACES_FUNNELS_DETAIL ensures the URL pattern is consistent.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is purely informative and does not provide any actionable feedback or suggestions for improvement. It simply states that a change was made and that it ensures consistency, which does not align with the rules for useful comments.

11. frontend/src/container/TopNav/DateTimeSelectionV2/config.ts:207

• Draft comment:
  Updated routesToSkip to use TRACES_FUNNELS_DETAIL. Ensures consistency with the route definitions.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is purely informative, explaining what was done and why. It doesn't provide a suggestion, ask for confirmation, or point out a potential issue.

12. frontend/src/pages/TracesFunnelDetails/TracesFunnelDetails.tsx:8

• Draft comment:
  Avoid inline styling for color. Consider moving the color style to a CSS class to adhere to best practices.
• Reason this comment was not posted:
  Comment was on unchanged code.

13. frontend/src/pages/TracesFunnels/components/CreateFunnel/CreateFunnel.tsx:43

• Draft comment:
  Updated generatePath to use the new TRACES_FUNNELS_DETAIL route constant. Looks consistent.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is purely informative, as it only acknowledges a change made in the code without providing any actionable feedback or suggestions. It does not align with the rules provided, which state that purely informative comments should be removed.

14. frontend/src/pages/TracesFunnels/components/FunnelsList/FunnelsList.styles.scss:30

• Draft comment:
  Duplicate 'letter-spacing' property removed in the __title block. This cleanup improves maintainability.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is purely informative, as it just states that a duplicate property was removed. It doesn't provide any actionable feedback or suggestions for improvement.

15. frontend/src/pages/TracesFunnels/components/FunnelsList/FunnelsList.tsx:22

• Draft comment:
  Consistently using TRACES_FUNNELS_DETAIL in generatePath for navigating to funnel details.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

16. frontend/src/utils/permission/index.ts:104

• Draft comment:
  Route permission entry updated to use TRACES_FUNNELS_DETAIL. Ensure permissions across the app match the updated route constant.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  This comment is asking the author to ensure that permissions across the app match the updated route constant. This falls under the rule of not asking the author to ensure or verify things, which is not allowed.

17. frontend/src/AppRoutes/pageComponents.ts:109

• Draft comment:
  Typographical error: The exported constant ListAllALertsPage appears to have an extra capital 'L' in 'ALerts'. It should likely be renamed to ListAllAlertsPage for consistency.
• 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.

18. frontend/src/AppRoutes/routes.ts:24

• Draft comment:
  Typographical error: The component name 'ListAllALertsPage' seems to contain a typo. It is likely intended to be 'ListAllAlertsPage'. Please correct the capitalization for consistency.
• 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.

19. frontend/src/container/TopNav/DateTimeSelectionV2/config.ts:97

• Draft comment:
  Typo: In the RelativeDurationOptions array, the label for the value '6h' reads 'Last 6 hour'. It should be corrected to 'Last 6 hours' to maintain plural consistency.
• 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.

20. frontend/src/utils/permission/index.ts:104

• Draft comment:
  The key was renamed from 'TRACES_FUNNELS_DETAILS' to 'TRACES_FUNNELS_DETAIL'. Please verify that this change is intentional and aligns with the naming conventions used elsewhere in the file (e.g. using plural vs. singular as appropriate).
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 40% <= threshold 50%
  The comment is asking the PR author to verify their intention regarding a naming change. This violates the rule against asking for confirmation of intention. However, it does point out a potential inconsistency in naming conventions, which could be useful for the author to consider. The comment could be rephrased to suggest checking naming conventions without asking for confirmation.

Workflow ID: wflow_ootZmNnr3JeImmGx

---

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.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 2fc530c in 32 seconds

More details

• Looked at 21 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 2 drafted comments based on config settings.

1. frontend/src/pages/TracesFunnels/components/FunnelsList/FunnelsList.tsx:19

• Draft comment:
  Good refactor: extracting funnelDetailsLink improves readability and avoids redundant generatePath calls.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

2. frontend/src/pages/TracesFunnels/components/FunnelsList/FunnelsList.tsx:18

• Draft comment:
  Using a constant to store the generated link improves readability. Consider using useMemo if funnel.id rarely changes to avoid regenerating the path on every render.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

Workflow ID: wflow_6oYyilY5TO4B6UAO

---

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

[ellipsis-dev]

👍 Looks good to me! Incremental review on 44a73ee in 52 seconds

More details

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

1. frontend/src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx:67

• Draft comment:
  Avoid using inline styles (e.g., opacity here). Use a CSS class or styled component instead to maintain consistency.
• 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/pages/TracesFunnels/components/SearchBar/SearchBar.tsx:67

• Draft comment:
  Avoid inline styles. Move the opacity styling (currently set via style={{ opacity: '0.4' }}) into a CSS class or styled component that uses design tokens for consistency.
• 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.

Workflow ID: wflow_fetLx9ioho2XMVEJ

---

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