chore: trace funnels feedback changes #7772

ahmadshaheer · 2025-04-29T17:29:05Z

Summary

Related Issues / PR's

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

Screenshots

Before:

2025-04-29.21-56-04.mov

After:

2025-04-29.21-54-41.mov

Affected Areas and Manually Tested Areas

Important

Implement comprehensive funnel tracing functionality with new components, hooks, and UI elements for managing and visualizing funnels.

Funnel Management:
- Add AddSpanToFunnelModal for adding spans to funnels in TraceWaterfall.
- Implement FunnelProvider in FunnelContext.tsx for managing funnel state.
- Add CreateFunnel, DeleteFunnel, and RenameFunnel components for funnel CRUD operations.
- Implement useFunnelConfiguration, useFunnelGraph, useFunnelMetrics, and useFunnels hooks for funnel data handling.
UI Components:
- Add FunnelConfiguration, FunnelStep, FunnelBreadcrumb, and FunnelResults components for funnel details and results display.
- Implement FunnelGraph, FunnelMetricsTable, and FunnelTable for visualizing funnel data.
- Add StepsContent, StepsFooter, and StepsHeader for managing funnel steps.
Routing and Navigation:
- Update TracesModulePage and TracesFunnelDetails to integrate funnel views.
- Modify TracesModulePage/constants.tsx to conditionally render funnel routes.
Miscellaneous:
- Update package.json to bump lucide-react version.
- Add styles for new components in various .scss files.

^{This description was created by}^{for 64859be. You can customize this summary. It will automatically update as commits are pushed.}

ellipsis-dev

Caution

Changes requested ❌

Reviewed everything up to 2424130 in 2 minutes and 27 seconds. Click for details.

Reviewed 758 lines of code in 14 files
Skipped 1 files when reviewing.
Skipped posting 7 draft comments. View those below.
Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/src/pages/TracesFunnelDetails/components/FunnelResults/FunnelGraph.tsx:156

Draft comment:
Avoid inline style (e.g. style={{ height: 400 }}) on Spin. Consider moving styles to a CSS class 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.

2. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/AddFunnelDescriptionModal.tsx:35

Draft comment:
Resetting the description to an empty string in handleCancel clears any pre-existing description. Confirm if this is the intended behavior or if it should revert to the original funnelDescription.
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/hooks/TracesFunnels/useFunnelGraph.tsx:174

Draft comment:
Avoid hardcoded hex colors (#2655ff and #ff1018). Use design tokens or predefined color constants for consistency.
Reason this comment was not posted:
Marked as duplicate.

4. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/AddFunnelDescriptionModal.tsx:25

Draft comment:
The local state 'description' is initialized with the prop 'funnelDescription', but it doesn't update when the prop changes. Consider syncing state with prop changes using useEffect.
Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% This is a modal form component where users can edit a description. It's actually correct behavior to not sync with prop changes - this is an editing interface where users can make changes and either save or cancel them. If the state auto-synced with prop changes, it would reset user's edits. The cancel handler already handles resetting state appropriately. Maybe there are edge cases where the funnel description could change while the modal is open? What if multiple users are editing simultaneously? Even in those edge cases, it would be poor UX to suddenly change the text while a user is editing. The proper way to handle concurrent edits is through save conflict detection, not by auto-syncing the editing state. The current behavior is correct for an editing interface. The comment suggests a change that would actually make the UX worse.

5. frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx:156

Draft comment:
Avoid using inline styles (e.g., style={{ height: 400 }}) in the Spin component. Consider applying a CSS class from the stylesheet instead.
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.

6. frontend/package.json:7

Draft comment:
Typographical error: In the script "i18n:generate-hash", the file path is specified as "./i18-generate-hash.js". This appears to be a typo, as you might have intended to call it "i18n-generate-hash.js" (with an 'n'). Please check and correct the file name if necessary.
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.

7. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/AddFunnelDescriptionModal.tsx:97

Draft comment:
Consider changing 'Eg. checkout dropoff funnel' to 'e.g. checkout dropoff funnel' for consistency with common usage.
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_ybPZ0fvs7HovLii0

^{You can customize}^{by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

ellipsis-dev · 2025-04-29T17:31:44Z

frontend/src/hooks/TracesFunnels/useFunnelGraph.tsx

+		const { successSteps, errorSteps } = getStepGraphData();
+
+		if (chart.data.datasets && chart.data.datasets.length >= 2) {
+			chart.data.datasets[0].backgroundColor = successSteps.map((_, i) =>


Avoid hardcoding hovered bar colors ('#2655ff' and '#ff1018'). Use design tokens or predefined color constants to ensure design consistency.

^{This comment was generated because it violated a code review rule: irule_1wxdoFZrcunxy02g.}

GeekBoySupreme · 2025-04-30T00:24:30Z

@ahmadshaheer this should be an icon instead of -> between Step 1 and Step 2 :

ahmadshaheer · 2025-04-30T13:24:56Z

@ahmadshaheer this should be an icon instead of -> between Step 1 and Step 2 :

@GeekBoySupreme, I fixed this issue in #7780

ellipsis-dev

Caution

Changes requested ❌

Reviewed 64859be in 4 minutes and 11 seconds. Click for details.

Reviewed 6887 lines of code in 81 files
Skipped 4 files when reviewing.
Skipped posting 46 draft comments. View those below.
Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/src/types/api/traceFunnels/index.ts:33

Draft comment:
The API types for funnel data look good. As a minor suggestion, double-check that the CreateFunnelPayload’s optional property 'user' is intentionally different from the 'user_email' field in FunnelData. Consistent naming helps avoid confusion.
Reason this comment was not posted:
Confidence changes required: 50% <= threshold 50% None

2. frontend/src/types/api/traceFunnels/index.ts:3

Draft comment:
Good: The LatencyOptions enum is clearly defined and used consistently.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

3. frontend/src/hooks/TracesFunnels/useFunnelConfiguration.tsx:68

Draft comment:
Nice: Using a ref for last saved steps aids rollback on error; add an inline comment for clarity.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50% None

4. frontend/src/hooks/TracesFunnels/useFunnelConfiguration.tsx:108

Draft comment:
Good: The useEffect correctly updates funnel steps and triggers validation refetch.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

5. frontend/src/hooks/TracesFunnels/useFunnelGraph.tsx:60

Draft comment:
Good: Chart configuration and destruction/useEffect logic using Chart.js is effective.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

6. frontend/src/hooks/TracesFunnels/useFunnelMetrics.ts:39

Draft comment:
Nice: useMemo is used to derive metrics and format values with getYAxisFormattedValue.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

7. frontend/src/hooks/TracesFunnels/useFunnels.tsx:129

Draft comment:
Good: Query hooks like useValidateFunnelSteps are defined with proper enabling conditions.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

8. frontend/src/hooks/TracesFunnels/useHandleTraceFunnelsSearch.tsx:17

Draft comment:
Review: Debounce callback and safeNavigate usage are concise and clear.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

9. frontend/src/hooks/TracesFunnels/useHandleTraceFunnelsSort.tsx:24

Draft comment:
Good: Sorting uses URL params effectively and falls back to created_at when needed.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

10. frontend/src/pages/TracesFunnelDetails/TracesFunnelDetails.tsx:17

Draft comment:
Nice: Loading and error states are handled gracefully with Spinner and NotFoundContainer.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

11. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration.tsx:40

Draft comment:
Good: Component composes header, description, and steps clearly, conditionally based on context.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

12. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/RenameFunnel.tsx:25

Draft comment:
Good: RenameFunnel validates new name differs from initial before submission.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

13. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/DeleteFunnelStep.tsx:12

Draft comment:
Good: Delete modal warns the user that deletion is irreversible.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

14. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelBreadcrumb.tsx:14

Draft comment:
Good: Breadcrumb uses Link for routing; styling and structure are clear.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

15. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/InterStepConfig.tsx:15

Draft comment:
Nice: useMemo for constructing options from LatencyOptions is succinct.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

16. frontend/src/pages/TracesFunnelDetails/components/FunnelResults/FunnelGraph.tsx:96

Draft comment:
Good: Chart renders legends with hover interactions; loading and error states handle gracefully.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

17. frontend/src/pages/TracesFunnelDetails/components/FunnelResults/FunnelMetricsTable.tsx:61

Draft comment:
Good: Metrics table displays overall metrics and uses a default empty state if needed.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

18. frontend/src/pages/TracesFunnelDetails/components/FunnelResults/StepsTransitionMetrics.tsx:20

Draft comment:
Good: Transition metrics are derived with fallback if no transition is selected.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

19. frontend/src/pages/TracesFunnelDetails/components/FunnelResults/StepsTransitionResults.tsx:24

Draft comment:
Good: Generates step transitions and allows selection; UI implementation is clean.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

20. frontend/src/pages/TracesFunnelDetails/components/FunnelResults/TopSlowestTraces.tsx:11

Draft comment:
Good: Reuses FunnelTopTracesTable with useFunnelSlowTraces hook appropriately.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

21. frontend/src/pages/TracesFunnelDetails/components/FunnelResults/TopTracesWithErrors.tsx:11

Draft comment:
Good: Uses useFunnelErrorTraces hook and passes props as expected.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

22. frontend/src/pages/TracesFunnelDetails/components/FunnelResults/utils.tsx:4

Draft comment:
Good: Reusable utility defines columns for top traces table.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

23. frontend/src/pages/TracesFunnelDetails/constants.ts:4

Draft comment:
Nice: initialStepsData and LatencyPointers are clearly defined with unique IDs using v4.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

24. frontend/src/pages/TracesFunnels/FunnelContext.tsx:60

Draft comment:
Good: FunnelContext provider is comprehensive; ensure dependencies in hooks are complete.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50% None

25. frontend/src/pages/TracesFunnels/TracesFunnels.styles.scss:34

Draft comment:
Good: Modular styling using SCSS partials keeps design consistent.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

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

Draft comment:
Good: CreateFunnel modal integrates react-query mutation correctly, handles redirection.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

27. frontend/src/pages/TracesFunnels/components/DeleteFunnel/DeleteFunnel.tsx:24

Draft comment:
Good: DeleteFunnel correctly checks pathname and optionally redirects after deletion.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

28. frontend/src/pages/TracesFunnels/components/FunnelsEmptyState/FunnelsEmptyState.tsx:14

Draft comment:
Good: FunnelsEmptyState shows a clear message and new funnel button; defaults are set.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

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

Draft comment:
Good: FunnelsList maps data and conditionally renders a button based on onFunnelClick.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

30. frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.tsx:25

Draft comment:
Good: RenameFunnel validates new name vs. initial name and uses mutation properly.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

31. frontend/src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx:60

Draft comment:
Good: SearchBar composes sort popover, search input, and new funnel button effectively.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

32. frontend/src/pages/TracesFunnels/index.tsx:78

Draft comment:
Good: Main page integrates search, sort, and list components along with CreateFunnel modal.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

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

Draft comment:
Good: TabRoutes configuration sets active route based on pathname; conditional funnel details in dev mode is clear.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

34. frontend/src/pages/TracesModulePage/constants.tsx:21

Draft comment:
Good: tracesFunnel function returns either TracesFunnelDetails or TracesFunnels based on pathname.
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

35. frontend/src/types/api/traceFunnels/index.ts:9

Draft comment:
Good: API types are well-structured with consistent naming (funnel_id, created_at).
Reason this comment was not posted:
Confidence changes required: 0% <= threshold 50% None

36. frontend/src/pages/TracesFunnels/FunnelContext.tsx:180

Draft comment:
Good: FunnelProvider is comprehensive; check dependency arrays to prevent stale closures.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50% None

37. frontend/package.json:7

Draft comment:
Minor typographical note: In the 'scripts' section, the key 'i18n:generate-hash' calls 'node ./i18-generate-hash.js'. It appears that the filename might be intended to be 'i18n-generate-hash.js' (with an extra 'n') to match the 'i18n' prefix. Please verify if this is a typo.
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.

38. frontend/src/AppRoutes/pageComponents.ts:113

Draft comment:
Typo noticed: 'ListAllALertsPage' should be corrected to 'ListAllAlertsPage' to maintain consistency with naming conventions.
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.

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

Draft comment:
Typo detected: 'GET_ALL_ALLERTS' appears to have an extra 'L' in 'ALLERTS'. Consider renaming it to 'GET_ALL_ALERTS' if that is the intended 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.

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

Draft comment:
Typographical error: The value for 'GET_DAEMONSET_LIST' has an extraneous comma at the end ('GET_DAEMONSET_LIST,'). This extra comma within the string literal should be removed 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.

41. frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss:185

Draft comment:
Typographical Error: The background property uses 'var(--Ink-400, #121317)' with an uppercase 'I'. To keep consistency with other variables (e.g., '--bg-ink-200'), consider using 'var(--bg-ink-400, #121317)' if this was not intentional.
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.

42. frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx:400

Draft comment:
Typo: In the comment describing adding subsequent comma separated values, 'seperated' should be corrected to 'separated'.
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.

43. frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx:844

Draft comment:
Typo: In the comment, 'sycn' should be corrected to 'sync' to accurately reflect that the tags remain in sync with the current query.
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.

44. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/StepsContent.styles.scss:4

Draft comment:
Typo in the comment: The calculated values in the comment (64px + 12px + 32px + 16px + 50px + 34px + 45px) sum to 253px, but the comment states 219px. It looks like the final sum might be off. Please update the comment to accurately reflect the computed total.
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% While the comment is technically correct about the math error, it's just pointing out a typo in a CSS comment that doesn't affect functionality. The actual calc() value is correct (253px). Comments in CSS files are purely informational and don't impact the code behavior. According to the rules, we should not make purely informative comments. The comment does help maintain code accuracy and could prevent future confusion for developers reading the comment. Documentation accuracy can be important. However, this is a minor documentation issue in a CSS comment that doesn't affect functionality or maintainability. The rules explicitly state not to make purely informative comments. Delete the comment as it's purely informational and doesn't require any functional code changes.

45. frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/StepsContent.tsx:90

Draft comment:
The button text 'Add for new Step' feels a bit awkward compared to 'Add Funnel Step' used elsewhere. Consider using a more consistent and clear phrase like 'Add New Step' to improve readability.
Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% The rules explicitly state "Do NOT comment on any pure frontend UI or styling changes, only logic. Assume that if the author changed the UI, they did it correctly." Button text is purely a UI concern. The different wording may be intentional to distinguish between the two different contexts where these buttons appear. The text inconsistency could potentially cause user confusion, and improving UI consistency is generally good practice. While UI consistency is important, our rules explicitly tell us to trust the author on UI decisions. The different wording may be intentionally chosen to reflect the different behaviors of these buttons. Delete this comment as it violates our rule about not commenting on pure UI changes.

46. frontend/src/pages/TracesFunnels/components/DeleteFunnel/DeleteFunnel.tsx:1

Draft comment:
It looks like there's a potential typographical error in the stylesheet import on line 1. The file imports '../RenameFunnel/RenameFunnel.styles.scss', but since this is the DeleteFunnel component, it might be a mistake. Double-check if this is intentional or if it should be the DeleteFunnel stylesheet.
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_iLW1qxV3hJlSWqfe

^{You can customize}^{by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

ellipsis-dev · 2025-05-06T12:04:44Z

frontend/src/components/SignozRadioGroup/SignozRadioGroup.styles.scss

+		}
+	}
+
+	.selected_view {


Typographical consistency suggestion: Consider renaming the selected_view class to use dashes (e.g., selected-view) for consistency with other class names in this file.

ellipsis-dev · 2025-05-06T12:04:44Z

frontend/src/components/SignozRadioGroup/SignozRadioGroup.styles.scss

+}
+
+// Light mode styles
+.lightMode {


Typographical consistency suggestion: Consider renaming the .lightMode class to use kebab-case (e.g., .light-mode) to maintain naming consistency with other classes (e.g., .signoz-radio-group and .view-title).

ellipsis-dev · 2025-05-06T12:04:44Z

...end/src/pages/TracesFunnelDetails/components/FunnelConfiguration/InterStepConfig.styles.scss

+		z-index: 1;
+	}
+	&__label {
+		color: var(--Vanilla-400, #c0c1c3);


Typographical issue: In .inter-step-config &__label (line 21), the CSS variable is used as var(--Vanilla-400, #c0c1c3). Consider using a consistent naming convention (e.g., var(--bg-vanilla-400, #c0c1c3)) to match the other variable usages in the file.

…+ copy to clipboard

…span) from the legend items

* chore: change the copy from x traces to valid traces found / not found * chore: add open funnel button in add span to funnel modal * feat: display buttons for adding step details and funnel description + copy to clipboard * feat: highlight funnel graph column based on selected (total / error span) from the legend items

* feat: funnels list page basic UI * feat: get funnels list data from mock API, and handle data, loading and empty states * feat: implement funnel rename * chore: move useFunnels to hooks/TracesFunnels * feat: create traces funnels details basic page + funnel -> details redirection * fix: properly display created at in funnels list item + preventDefault * chore: add tab bar to trace funnel details page * chore: traces funnel details page overall skeleton * chore: traces funnel details results skeleton * fix: hide step count for add button only * feat: funnel details page steps and configuration (#7424) * chore: add a new tab for traces funnels * feat: funnels list page basic UI * feat: get funnels list data from mock API, and handle data, loading and empty states * feat: implement funnel rename * refactor: overall improvements * feat: implement sorting in traces funnels list page * feat: add sort column key and order to url params * chore: move useFunnels to hooks/TracesFunnels * feat: implement traces funnels search and refactor search and sort by extracting to custom hooks * chore: overall improvements to rename trace funnel modal * chore: make the rename input auto-focusable * feat: handle create funnel modal * feat: delete funnel modal and functionality * fix: fix the layout shift in funnel item caused by getContainer={false} * chore: overall improvements and use live api in traces funnels * feat: create traces funnels details basic page + funnel -> details redirection * fix: funnels traces light mode UI * fix: properly display created at in funnels list item + preventDefault * refactor: extract FunnelItemPopover into a separate component * chore: hide funnel tab from traces explorer * chore: add check to display trace funnels tab only in dev environment * chore: improve funnels modals light mode * chore: overall improvements * fix: properly pass funnel details link * chore: address PR review changes * chore: add tab bar to trace funnel details page * feat: funnel step UI with service, span, and where filters * feat: build radio button component * refactor: use the SignozRadioButton in funnel results -> step transitions radio buttons * feat: inter step config (i.e. latency type) UI * chore: improve steps header styles by removing divider width * feat: funnel steps title, description, popover UI + pass data from API * chore: update FilterSelect component to conditionally add url params and accept on change * fix: fix funnel step where clause and update the state variables for filters * chore: add support for isMultiple and fix the type in FilterSelect * feat: centralize the steps state management in StepsContent * fix: move steps state up + pass steps count from state * feat: implement auto save for updating the steps whenever any step changes * feat: implement auto save for validating steps if service name or span names change * feat: impelement funnel step removal * feat: implement add details modal for funnel steps * fix: fix the overflowing time range picker * feat: funnel details empty state * feat: add support for saving funnel description * chore: overall improvements * fix: fix the light mode styles * fix: fix the failing build + broken search UI * refactor: remove the reference of useLocation from traceFunnel item in TraceModulePage constant * fix: fix the issue of update steps getting triggered on initial render if we have filters * fix: fix the edge case of stale state causing filters to be re-added after removing * feat: funnel details page results (#7451) * feat: funnel metrics table component * feat: funnel metrics and steps transition metrics components UI * feat: funnel table component * feat: slowest traces and traces with error components * fix: overall light theme fixes * fix: fix the warning * chore: add empty and loading states to FunnelMetricsTable * feat: get overall funnel metrics from the API * fix: fix the empty state of funnel metrics table * feat: get data for slowest traces and traces with errors * fix: link trace id to trace details page * fix: get data for funnel step transition metrics and refactor the existing data fetching logic * refactor: add funnel context + overall refactoring and optimizations * refactor: move steps states to funnel context + handle empty and run funnel disabled states * feat: handle run funnel * fix: improve empty state * chore: rename isValidateStepsMutationLoading -> isValidateStepsLoading * chore: improve query key * fix: display loading state if funnel results are fetching * refactor: move steps validation fetching and states to the context API * fix: display loading state in funnel results while steps validation is fetching * fix: call validate steps API only on changing the service name or span name of any step * refactor: move validateStepsQuery key out of useEffect and update the dependencies * chore: centralize hasIncompleteSteps and run validate only if steps have service and spans * fix: handle all empty fields state + overall improvements * fix: handle long where query tags * feat: build the funnel result graph component * feat: build the funnel result graph component * feat: handle loading, error, empty states in funnel graph * fix: don't display change percentage if % is 0 * refactor: overall improvements * feat: get funnel steps graph data from API + move logic to custom hook * fix: improve empty and error states * fix: handle funnel graph legends width using css * fix: redirect to trace funnels list page on clicking delete from funnel details * fix: update the query cache while updating steps * fix: implement debounced search for funnel list search * fix: refetch steps graph data query on clicking run funnel / sync button * fix: improve the step footer spacing * chore: add gap between divider to inter-step-config * fix: handle loading state while fetching * feat: add span to funnel flow (from trace details page) (#7477) * chore: display add to funnel icon on hovering any span in trace details page * chore: add className to funnel item actions popover * feat: add funnels tab to trace details v2 tab bar * feat: add span to funnel flow * chore: hide actions popover button from funnel item in span -> funnel flows * chore: improve the funnel details UI in add span to funnel modal * fix: display empty state + don't redirect to funnels list on delete success + overall improvements * chore: add null check * fix: display add to funnel button based on feature flag * fix: display funnels tab in trace details based on feature flag * fix: remove maxTagCount * feat: change ms to ns * chore: address review comments * chore: remove feature flag and display trace funnels only in dev envirnoment * fix: handle restoring steps if updating funnel steps fail * refactor: update the get and delete funnel endpoints to adjust to the BE changes (#7697) * refactor: address review comments * fix: handle nested funnel response structure to fix missing funnel_id… (#7740) * fix: handle nested funnel response structure to fix missing funnel_id in updates Signed-off-by: Shivanshu Raj Shrivastava <shivanshu1333@gmail.com> * chore: remove console.og Signed-off-by: Shivanshu Raj Shrivastava <shivanshu1333@gmail.com> * chore: revert explicitly passing funnelId to updateFunnelSteps --------- Signed-off-by: Shivanshu Raj Shrivastava <shivanshu1333@gmail.com> Co-authored-by: ahmadshaheer <ashaheerki@gmail.com> * chore: fix api endpoint Signed-off-by: Shivanshu Raj Shrivastava <shivanshu1333@gmail.com> * refactor: incorporate the recent funnel details API changes (#7760) * chore: trace funnels feedback changes (#7772) * chore: change the copy from x traces to valid traces found / not found * chore: add open funnel button in add span to funnel modal * feat: display buttons for adding step details and funnel description + copy to clipboard * feat: highlight funnel graph column based on selected (total / error span) from the legend items * chore: trace funnel changes (#7780) * refactor: handle funnels list search on frontend * refactor: use funnel steps update API for adding / updating step title and description * feat: allow selecting user's typed option in trace funnel service and span name dropdowns * chore: properly render the -> between steps in funnel results * fix: sync funnel step name with add details modal text fields --------- Signed-off-by: Shivanshu Raj Shrivastava <shivanshu1333@gmail.com> Co-authored-by: Yunus M <myounis.ar@live.com> Co-authored-by: Shivanshu Raj Shrivastava <shivanshu1333@gmail.com>

ahmadshaheer requested a review from YounixM as a code owner April 29, 2025 17:29

github-actions bot added the chore label Apr 29, 2025

ellipsis-dev bot reviewed Apr 29, 2025

View reviewed changes

shivanshuraj1333 added the staging:blessed-wildcat staging (shivanshu) label Apr 29, 2025

shivanshuraj1333 temporarily deployed to review April 29, 2025 23:29 — with GitHub Actions Inactive

shivanshuraj1333 removed the staging:blessed-wildcat staging (shivanshu) label Apr 29, 2025

shivanshuraj1333 temporarily deployed to review April 29, 2025 23:33 — with GitHub Actions Inactive

ahmadshaheer changed the title ~~Chore/trace funnels feedback changes~~ chore: trace funnels feedback changes Apr 30, 2025

shivanshuraj1333 force-pushed the refactor/incorporate-recent-API-changes branch from 007d0ad to 3cba965 Compare May 6, 2025 11:58

shivanshuraj1333 force-pushed the chore/trace-funnels-feedback-changes branch from 2424130 to 64859be Compare May 6, 2025 12:00

ellipsis-dev bot reviewed May 6, 2025

View reviewed changes

shivanshuraj1333 force-pushed the refactor/incorporate-recent-API-changes branch from 3cba965 to aa1eff3 Compare May 6, 2025 12:10

Base automatically changed from refactor/incorporate-recent-API-changes to feat/funnel-details-page May 6, 2025 12:11

ahmadshaheer force-pushed the chore/trace-funnels-feedback-changes branch from 64859be to 2424130 Compare May 6, 2025 12:28

ahmadshaheer added 4 commits May 6, 2025 18:03

chore: change the copy from x traces to valid traces found / not found

db0f977

chore: add open funnel button in add span to funnel modal

51e8531

feat: display buttons for adding step details and funnel description …

523a34e

…+ copy to clipboard

feat: highlight funnel graph column based on selected (total / error …

ecc3bfe

…span) from the legend items

shivanshuraj1333 force-pushed the chore/trace-funnels-feedback-changes branch from 2424130 to ecc3bfe Compare May 6, 2025 12:35

shivanshuraj1333 merged commit d7bbb2b into feat/funnel-details-page May 6, 2025
2 checks passed

shivanshuraj1333 deleted the chore/trace-funnels-feedback-changes branch May 6, 2025 12:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: trace funnels feedback changes #7772

chore: trace funnels feedback changes #7772

Uh oh!

ahmadshaheer commented Apr 29, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

ellipsis-dev bot left a comment

Uh oh!

ellipsis-dev bot Apr 29, 2025

Uh oh!

GeekBoySupreme commented Apr 30, 2025

Uh oh!

ahmadshaheer commented Apr 30, 2025

Uh oh!

ellipsis-dev bot left a comment

Uh oh!

ellipsis-dev bot May 6, 2025

Uh oh!

ellipsis-dev bot May 6, 2025

Uh oh!

ellipsis-dev bot May 6, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chore: trace funnels feedback changes #7772

chore: trace funnels feedback changes #7772

Uh oh!

Conversation

ahmadshaheer commented Apr 29, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related Issues / PR's

Screenshots

Affected Areas and Manually Tested Areas

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Apr 29, 2025

Choose a reason for hiding this comment

Uh oh!

GeekBoySupreme commented Apr 30, 2025

Uh oh!

ahmadshaheer commented Apr 30, 2025

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot May 6, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot May 6, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot May 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ahmadshaheer commented Apr 29, 2025 •

edited by ellipsis-dev bot

Loading