-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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
[APM] Transition to Elastic charts for all relevant APM charts #80298
[APM] Transition to Elastic charts for all relevant APM charts #80298
Conversation
ee8ce4c
to
a362e98
Compare
7a2b3e3
to
e244cbe
Compare
@elasticmachine merge upstream |
Take most of the work directly from elastic#80298 to add the error rate chart to the overview. Rename the existing chart that's on the transactions overview so it still keeps using the old chart for the time being. We don't want to mix chart types (react-vis + elastic-charts) on the same page becuase the interactions are different. We'll switch the transactions page to use elastic charts in a future PR. Hide the error rate chart on RUM services.
@elasticmachine merge upstream |
* Add error rate chart to overview Take most of the work directly from #80298 to add the error rate chart to the overview. Rename the existing chart that's on the transactions overview so it still keeps using the old chart for the time being. We don't want to mix chart types (react-vis + elastic-charts) on the same page becuase the interactions are different. We'll switch the transactions page to use elastic charts in a future PR. Hide the error rate chart on RUM services.
* Add error rate chart to overview Take most of the work directly from elastic#80298 to add the error rate chart to the overview. Rename the existing chart that's on the transactions overview so it still keeps using the old chart for the time being. We don't want to mix chart types (react-vis + elastic-charts) on the same page becuase the interactions are different. We'll switch the transactions page to use elastic charts in a future PR. Hide the error rate chart on RUM services.
Take most of the work directly from #80298 to add the error rate chart to the overview. Rename the existing chart that's on the transactions overview so it still keeps using the old chart for the time being. We don't want to mix chart types (react-vis + elastic-charts) on the same page becuase the interactions are different. We'll switch the transactions page to use elastic charts in a future PR. Hide the error rate chart on RUM services.
Pinging @elastic/apm-ui (Team:apm) |
@elasticmachine merge upstream |
retest |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Had a couple nits and couldn't run it locally due to unrelated issues but code looks good.
x-pack/plugins/apm/public/components/shared/charts/transaction_error_rate_chart/index.tsx
Outdated
Show resolved
Hide resolved
apmTimeseries, | ||
anomalyTimeseries, | ||
}); | ||
const { apmTimeseries, anomalyTimeseries } = charts; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this supposed to be apm
or tpm
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good question, maybe timeseries
would be enough. WDYT?
@@ -31,40 +31,37 @@ export interface ITpmBucket { | |||
} | |||
|
|||
export interface ITransactionChartData { | |||
tpmSeries: ITpmBucket[]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd love to see if we can get rid of this file. Not sure if it's possible but it feels like there's a lot of extra data massaging going on that we don't need.
@@ -15,7 +15,7 @@ export function useTransactionBreakdown() { | |||
uiFilters, | |||
} = useUrlParams(); | |||
|
|||
const { data = { timeseries: [] }, error, status } = useFetcher( | |||
const { data = { timeseries: undefined }, error, status } = useFetcher( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks redundant - or am I missing something?
const { data = { timeseries: undefined }, error, status } = useFetcher( | |
const { data = { timeseries }, error, status } = useFetcher( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
timeseries
is not defined above for me to initialize the data with it, that's why I added the undefined. And it is initialized as undefined
because I just show the Loading chart component
, if the status is equal to Loading
or Pending
and the timeseries
is undefined. Otherwise, I'd show the Loading every time the user pushes the Refresh
button in the DatePicker or when the auto-refresh is on.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
Show resolved
Hide resolved
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
Outdated
Show resolved
Hide resolved
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
Outdated
Show resolved
Hide resolved
x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm
@sqren I'm going to merge this PR and handle some comments on another PR with the remaining charts. |
@elasticmachine merge upstream |
💚 Build SucceededMetrics [docs]@kbn/optimizer bundle module count
async chunks size
History
To update your PR or re-run it, just comment with: |
} | ||
|
||
if ( | ||
(!distribution || distribution.noHits) && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is noHits
still used?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I will fix that while doing this issue. #82953
x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
Show resolved
Hide resolved
…ic#80298) * adding elastic charts * fixing some stuff * refactoring * fixing ts issues * fixing unit test * fix i18n * adding isLoading prop * adding annotations toggle, replacing transaction error rate to elastic chart * adding loading state * adding empty message * fixing i18n * removing unused files * fixing i18n * removing e2e test since elastic charts uses canvas * addressing pr comments Co-authored-by: Kibana Machine <[email protected]>
… (#82955) * adding elastic charts * fixing some stuff * refactoring * fixing ts issues * fixing unit test * fix i18n * adding isLoading prop * adding annotations toggle, replacing transaction error rate to elastic chart * adding loading state * adding empty message * fixing i18n * removing unused files * fixing i18n * removing e2e test since elastic charts uses canvas * addressing pr comments Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
Solves part of #70290
Done:
To do (Another PR):
Issues:
Transactions page:
Transaction detail page:
Error page:
Error detail page: