[Exploratory View] Multi Series View #103855

shahzad31 · 2021-06-30T10:02:21Z

Summary

Some notes regarding implementation decisions

First series is a main series
First series can't be deleted if there are more than one series
User can change data types
While adding series, we will not by default select data type or report metric

Chart/Series Resize panels:

User can hide chart in configure mode and can hide series list in preview mode.

User can resize both panels in both mode using an anchor.

Date time picker/comparison

In case of KPI over time, user can select any range in the main series in Subsequent series user can only select the interval defined in main series, like if user select 24 hours period, user can only select any time period in subsequent series, but it's length should always remain 24 hours.
In case of distribution there are no constraints, user can select any time period/length in any series

E2e/Functional tests:

I have added few basic functional tests, but we may need to expand coverage

Known issues:

Not being able to add space into Text box for name
Design workflow and layout is a work in progress and will probably need few iterations

elasticmachine · 2021-07-09T10:04:35Z

Pinging @elastic/uptime (Team:uptime)

elasticmachine · 2021-07-09T17:52:26Z

Pinging @elastic/apm-ui (Team:apm)

dominiqueclarke

Great work!

...k/plugins/observability/public/components/shared/exploratory_view/components/action_menu.tsx

...s/observability/public/components/shared/exploratory_view/components/series_color_picker.tsx

...ns/observability/public/components/shared/exploratory_view/configurations/lens_attributes.ts

x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx

...ervability/public/components/shared/exploratory_view/series_editor/columns/series_footer.tsx

...bservability/public/components/shared/exploratory_view/series_viewer/columns/series_info.tsx

dominiqueclarke · 2021-07-12T20:58:46Z

...ugins/observability/public/components/shared/exploratory_view/series_viewer/columns/utils.ts

+ *
+ * This function accepts two strings start and end time. I the start value is now then it uses the end value to parse.
+ */
+export function parseTimeParts(start: string, end: string): QuickSelect | null {


Are there tests for these utils?

these are actually copied from EUI, i have asked in EUI channel, if these can be reused
https://github.com/elastic/eui/blob/master/src/components/date_picker/super_date_picker/relative_utils.ts

dominiqueclarke · 2021-07-12T21:11:45Z

x-pack/plugins/observability/public/components/shared/exploratory_view/views/series_views.tsx

+
+  return (
+    <div ref={seriesBuilderRef}>
+      <EuiTabs size="s">{renderTabs()}</EuiTabs>


Could use EuiTabbedContent for this instead of managing which content appears yourself.

EuiTabbedContent doesn't allow managing state from outside, which is required here. this is why i had to opt out of it,

spalger

getUrl() changes in @kbn/test LGTM

smith · 2021-07-19T18:03:35Z

...plugins/apm/public/components/routing/templates/apm_service_template/analyze_data_button.tsx

+            time: { from: rangeFrom, to: rangeTo },
+            reportDefinitions: {
+              [SERVICE_NAME]: [serviceName],
+              ...(environment ? getEnvironmentDefinition(environment) : {}),


Seems like this was simpler when all of the conditional logic was in the function. Now it's split between here and the body of the function.

i agree. But typescript wasn't happy with that. Apparently switch/case isn't friendly with ts.

Case undefined: return {} wasn't resolving with ts.

it was logging warning that service.enivornment can't be assigned environemnt undefined.

i also removed as SeriesUrl

shahzad31 · 2021-07-20T12:48:51Z

@elasticmachine merge upstream

dominiqueclarke · 2021-07-20T18:56:38Z

Here are a few issues I am seeing. It is unclear if these are related to multi series or if they are existing, as I haven't tested each one of these against master.

Content for this popover could be improved

When filtering by a value that is also a breakdown, filtered out values still appear in the break down. In this example, it is the monitor name. Although we only have selected three monitor names, all of the monitor names appear in the breakdown. This is an especially bad experience when there are lots of values, causing the color options to be very similar.

When there is a lot of filters, they can press up against the Operation field
Y axis labels appear to be incorrect. In this example, I entered exploratory view through the Uptime monitor page entry. Since starting from that entry, all of my y axis labels have remained "All monitors response duration". This is happening for every report type EDIT: This appears to be the name of the series, but can lead to a lot of confusion. It appears that the series name can also be used as the x axis label in some scenarios, both of which I found confusing.
It is not possible to change select no breakdown for the core web vitals report. In this example, I'm trying to look at vitals for just one application

It is possible for report configuration to be cached causing errors. In this example, I have switched from report type KPI over time. To report type Core Web Vitals, but the wrong report configuration is listed. Notice how data type is missing. When I select data type, the configuration updates and I'm presented with the right experience.

Edge case: Select metrics and other "select x" fields are technically selectable, which can cause issues when you accidentally select them.

liciavale · 2021-07-20T19:19:59Z

@justinkambic @dominiqueclarke I have a list of issues/bugs in terms of usability that I found, I'm attaching them here.

When the users add a new series, the accordion is missing, same for colors picker and chart type. How this should work is that when a new series has been added the first one(s) should automatically collapse.

liciavale · 2021-07-20T19:24:29Z

The filters should work in the same way as the user experience app, instead of wrapping up, they should continue in a single line, which will allow saving some space.

liciavale · 2021-07-20T19:34:05Z

I'm not sure if the selected value, in this case, breakdown by, should be in bold.

dominiqueclarke · 2021-07-21T17:21:28Z

@elasticmachine merge upstream

kibanamachine · 2021-07-21T17:21:30Z

merge conflict between base and head

…into improve-styling

shahzad31 · 2021-07-21T20:20:20Z

@elasticmachine merge upstream

kibanamachine · 2021-07-21T22:37:38Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`observability`	240	260	+20

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`observability`	215	219	+4

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`apm`	4.3MB	4.3MB	+327.0B
`observability`	460.5KB	490.3KB	+29.9KB
`uptime`	947.1KB	948.2KB	+1.1KB
total			+31.3KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`observability`	9	10	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`apm`	40.6KB	40.7KB	+136.0B
`observability`	58.4KB	59.6KB	+1.2KB
total			+1.4KB

Unknown metric groups

API count

id	before	after	diff
`observability`	215	219	+4

History

💔 Build #140125 failed 88d794a
💚 Build #139714 succeeded 75f21a1
💔 Build #139496 failed 1a60730
💚 Build #139482 succeeded 1c05b4f
💔 Build #139321 failed c30cc46

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @shahzad31

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>

kibanamachine · 2021-07-22T08:17:50Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co> Co-authored-by: Shahzad <shahzad.muhammad@elastic.co> Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>

shahzad31 changed the title ~~Improve styling~~ [Exploratory View} Multi Series View Jul 1, 2021

added multi series

e6fef07

shahzad31 force-pushed the improve-styling branch from 16a573f to e6fef07 Compare July 9, 2021 09:07

shahzad31 self-assigned this Jul 9, 2021

shahzad31 added release_note:enhancement v7.15.0 v8.0.0 Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Jul 9, 2021

update layout

b7ba1f6

shahzad31 marked this pull request as ready for review July 9, 2021 10:04

shahzad31 requested review from a team as code owners July 9, 2021 10:04

justinkambic changed the title ~~[Exploratory View} Multi Series View~~ [Exploratory View] Multi Series View Jul 9, 2021

fix types

4b44628

botelastic bot added the Team:APM All issues that need APM UI Team support label Jul 9, 2021

dominiqueclarke reviewed Jul 12, 2021

View reviewed changes

shahzad31 added 12 commits July 13, 2021 12:18

fix tests

9e79501

Merge branch 'master' into improve-styling

f2988e2

Merge branch 'master' into improve-styling

78970d5

update label

f08f6a1

add comment

102fade

PR feedback

86da521

more missing i18n

cd154ff

remove unused translation

119100c

update more i18n

942f2db

transalte data labels

b7b31d5

fix type

b1b9b40

added commnet

c6c02c3

fix issues with name field space

1c05b4f

spalger approved these changes Jul 19, 2021

View reviewed changes

Merge branch 'master' into improve-styling

1a60730

smith reviewed Jul 19, 2021

View reviewed changes

smith approved these changes Jul 19, 2021

View reviewed changes

Merge branch 'master' into improve-styling

75f21a1

remove bold breakdown styling

88d794a

shahzad31 added 3 commits July 21, 2021 21:08

push stashed changes

4d55c42

Merge branch 'improve-styling' of https://github.com/shahzad31/kibana …

3759398

…into improve-styling

Merge branch 'master' into improve-styling

4993e92

Merge branch 'master' into improve-styling

0ce0d14

shahzad31 added the auto-backport Deprecated: Automatically backport this PR after it's merged label Jul 22, 2021

shahzad31 merged commit 48e6195 into elastic:master Jul 22, 2021

shahzad31 deleted the improve-styling branch July 22, 2021 08:14

kibanamachine mentioned this pull request Jul 22, 2021

[7.x] [Exploratory View] Multi Series View (#103855) #106498

Merged

paulb-elastic mentioned this pull request Jul 22, 2021

[Exploratory View] Add Multi Series elastic/uptime#321

Closed

This was referenced Aug 4, 2021

[Observability] [Exploratory View] revert exploratory view multi-series #107647

Merged

[Observability] [Exploratory View] Create multi series feature branch #108079

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Exploratory View] Multi Series View #103855

[Exploratory View] Multi Series View #103855

shahzad31 commented Jun 30, 2021 •

edited

elasticmachine commented Jul 9, 2021

elasticmachine commented Jul 9, 2021

dominiqueclarke left a comment

dominiqueclarke Jul 12, 2021

shahzad31 Jul 13, 2021

dominiqueclarke Jul 12, 2021

shahzad31 Jul 13, 2021

spalger left a comment

smith Jul 19, 2021

shahzad31 Jul 19, 2021

shahzad31 Jul 19, 2021

shahzad31 commented Jul 20, 2021

dominiqueclarke commented Jul 20, 2021 •

edited

liciavale commented Jul 20, 2021 •

edited

liciavale commented Jul 20, 2021 •

edited

liciavale commented Jul 20, 2021

dominiqueclarke commented Jul 21, 2021

kibanamachine commented Jul 21, 2021

shahzad31 commented Jul 21, 2021

kibanamachine commented Jul 21, 2021

API count

kibanamachine commented Jul 22, 2021

[Exploratory View] Multi Series View #103855

[Exploratory View] Multi Series View #103855

Conversation

shahzad31 commented Jun 30, 2021 • edited

Summary

Chart/Series Resize panels:

Date time picker/comparison

E2e/Functional tests:

elasticmachine commented Jul 9, 2021

elasticmachine commented Jul 9, 2021

dominiqueclarke left a comment

Choose a reason for hiding this comment

dominiqueclarke Jul 12, 2021

Choose a reason for hiding this comment

shahzad31 Jul 13, 2021

Choose a reason for hiding this comment

dominiqueclarke Jul 12, 2021

Choose a reason for hiding this comment

shahzad31 Jul 13, 2021

Choose a reason for hiding this comment

spalger left a comment

Choose a reason for hiding this comment

smith Jul 19, 2021

Choose a reason for hiding this comment

shahzad31 Jul 19, 2021

Choose a reason for hiding this comment

shahzad31 Jul 19, 2021

Choose a reason for hiding this comment

shahzad31 commented Jul 20, 2021

dominiqueclarke commented Jul 20, 2021 • edited

liciavale commented Jul 20, 2021 • edited

liciavale commented Jul 20, 2021 • edited

liciavale commented Jul 20, 2021

dominiqueclarke commented Jul 21, 2021

kibanamachine commented Jul 21, 2021

shahzad31 commented Jul 21, 2021

kibanamachine commented Jul 21, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

History

kibanamachine commented Jul 22, 2021

💚 Backport successful

shahzad31 commented Jun 30, 2021 •

edited

dominiqueclarke commented Jul 20, 2021 •

edited

liciavale commented Jul 20, 2021 •

edited

liciavale commented Jul 20, 2021 •

edited