[Exploratory view] implement popovers for data type and metric type #112370

dominiqueclarke · 2021-09-16T01:51:31Z

Fixes #112292

This PR addresses various aspect of the exploratory view redesign

Transition data type and metric type to use a combination of buttons and popovers to more closely match the design
Move extra fields into the expanded accordion view
Update the name field to be editable when clicking the pencil icon

Note: adjustments for responsiveness will be necessary

elasticmachine · 2021-09-16T01:51:33Z

Pinging @elastic/uptime (Team:uptime)

shahzad31 · 2021-09-16T08:32:22Z

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

  return (
    <div ref={seriesBuilderRef}>
-      <EuiPanel color="subdued">
-        <SeriesEditor />
-        <AddSeriesButton />
-      </EuiPanel>
+      <SeriesEditor />
+      <AddSeriesButton />
    </div>
  );


might as well just delete this component, i don't see it having any purpose now.

shahzad31 · 2021-09-16T08:41:46Z

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

-      <ToolbarButton size="s" onClick={() => setIsOpen((prevState) => !prevState)} hasArrow={false}>
-        <EuiIcon type="dot" size="l" color={color} />
-      </ToolbarButton>
+      <EuiButtonEmpty size="s" onClick={() => setIsOpen((prevState) => !prevState)} flush="both">
+        <EuiIcon type="stopFilled" size="l" color={color} />
+      </EuiButtonEmpty>


I think we should continue using ToolbarButton here, it provides better user interaction experience.

Though it's @liciavale call to make.

I removed it for the sole purpose of removing the border, which is not present in the design.

shahzad31 · 2021-09-16T08:43:33Z

...ervability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx

+    <>
+      {!series.selectedMetricField && (
+        <EuiPopover
+          button={
+            <EuiButton
+              iconType="plusInCircle"
+              onClick={() => setShowOptions((prevState) => !prevState)}
+              fill
+              size="s"
+            >
+              {SELECT_REPORT_METRIC_LABEL}
+            </EuiButton>
+          }
+          isOpen={showOptions}
+          closePopover={() => setShowOptions((prevState) => !prevState)}
+        >
+          <EuiListGroup>
+            {options.map((option) => (
+              <EuiListGroupItem
+                key={option.value}
+                onClick={() => onChange(option.value)}
+                label={option.dropdownDisplay}
+                isDisabled={option.disabled}
+              />
+            ))}
+          </EuiListGroup>
+        </EuiPopover>
+      )}
+      {series.selectedMetricField && (
+        <EuiBadge>
+          {
+            seriesConfig?.metricOptions?.find((option) => option.id === series.selectedMetricField)
+              ?.label
+          }
+        </EuiBadge>
+      )}
+    </>


In edit/expanded mode, we should allow user to change the metric option. Since report metric can be editable.

@liciavale How do you see this interaction happening? What does the edit state look like for the report metric? Does it revert back to a button?

In my design, it is a badge that dismissed become a + add button again and we show the message that indicates that metric is missing.
After a chat with Shahzad we decided to try to find a different solution and use a single select without creating a new component behavior and my assumption is that it will always be there after they add a metric but I don't have that in my design tho' so I'm not sure how this will look like and how it will work. Would you like me to change the design to see if this is ok? Because I'm not sure about that interaction there

shahzad31

Left few comments, though nothing blocking

LGTM !!

shahzad31 · 2021-09-16T08:45:55Z

Just noticed filters are getting squeezed , we should allow them to grow to full row

shahzad31 · 2021-09-20T14:10:48Z

@elasticmachine merge upstream

…to feature/exploratory-view-popovers

…m/dominiqueclarke/kibana into feature/exploratory-view-popovers

dominiqueclarke · 2021-09-20T20:30:17Z

@liciavale @shahzad31 this is ready for a second look.

shahzad31 · 2021-09-21T16:32:54Z

Filters are still wrapping down, AFAIK, @liciavale wants them to take full row, even below breakdown component

dominiqueclarke · 2021-09-21T17:08:30Z

Filters are still wrapping down, AFAIK, @liciavale wants them to take full row, even below breakdown component

I think the easiest way to do that here, is to have filters take up a row by itself, and move breakdown down a row next to operation. Thoughts? @liciavale

dominiqueclarke · 2021-09-21T17:09:34Z

@elasticmachine merge upstream

…to feature/exploratory-view-popovers

liciavale · 2021-09-22T10:14:24Z

@dominiqueclarke Sounds good to me

…m/dominiqueclarke/kibana into feature/exploratory-view-popovers

shahzad31

Filter changes LGTM !!

dominiqueclarke · 2021-09-23T15:07:18Z

/oblt-deploy

dominiqueclarke · 2021-09-27T12:45:19Z

@elasticmachine merge upstream

…to feature/exploratory-view-popovers

liciavale · 2021-09-27T13:12:20Z

@dominiqueclarke Looks good!
One thing, regarding this:

Update the name field to be editable when clicking the pencil icon

Would it be possible that when a user clicks again on the pencil it saves the changes? I think it would be the expected behaviour for this.

The rest LGTM!

…m/dominiqueclarke/kibana into feature/exploratory-view-popovers

shahzad31 · 2021-09-28T10:17:08Z

Moved @liciavale Comment from other PR #112949

here

Hi @shahzad31 , it looks good!
I have just a couple of comments and example screenshots regarding this.

Should each multi-select filter in this component be all the same sizes as the ones in user experience?

Can we use the same style of Clear filters that we have in user experience?

What do you think to leave a spacer between Filters applied and Breakdown like we do between the filter component and the filter applied? They are too close atm like we do.

I also found a small bug, if you try to remove an excluded filter this is not working (Clear filters and remove included filters seem to work fine)

I think the rest of the filters looks good :)

dominiqueclarke · 2021-09-28T15:04:41Z

Moved @liciavale Comment from other PR #112949

here

Hi @shahzad31 , it looks good! I have just a couple of comments and example screenshots regarding this.

Should each multi-select filter in this component be all the same sizes as the ones in user experience?

Can we use the same style of Clear filters that we have in user experience?

What do you think to leave a spacer between Filters applied and Breakdown like we do between the filter component and the filter applied? They are too close atm.

I also found a small bug, if you try to remove an excluded filter this is not working (Clear filters and remove included filters seem to work fine)

I think the rest of the filters looks good :)

@liciavale

The width is based on the layout where the filters are placed. UX has a flex layout that is forcing the filter group to take up extra space. In exploratory view, we aren't using a flex layout since the filters are on a single line by themselves. So they are taking up only the space they need based on the existing EuiFilterGroup component.
This has been resolved
This has been resolved
I'd like to keep scope of this ticket small and focused on design and not functionality, especially since it's starting to drag on. I've raised [Observability] [Exploratory View] Negate filters are not able to be removed in multi series view #113279 for this bug to address in a different PR.

kibanamachine · 2021-09-28T16:44:12Z

💚 Build Succeeded

History

💚 Build #155953 succeeded 32d8b78
💔 Build #155907 failed ed99b8f97c675e1c5f24e21a50e4ff3920f1e78d
💚 Build #155730 succeeded 993932b
💚 Build #155049 succeeded a100310
💚 Build #154670 succeeded c55da9b

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

…113464) * Revert "[Observability][Exploratory View] revert exploratory view multi-series (#107647)" This reverts commit 1649661. * Revert "[Observability][Exploratory View] revert exploratory view multi-series (#107647)" This reverts commit 1649661. * [Observability] [Exploratory View] Create multi series feature branch (#108079) * Revert "[Observability][Exploratory View] revert exploratory view multi-series (#107647)" This reverts commit 1649661. * Revert "[Observability][Exploratory View] revert exploratory view multi-series (#107647)" This reverts commit 1649661. * update types * update tests * [Observability] exploratory view design issues (#111028) * remove custom y axis labels for better clarity * move add series button to the bottom * disable auto apply * fix missing test * When series count changes, collapse other series. (#110894) Co-authored-by: Kibana Machine <[email protected]> * Feature/observability exploratory view multi series panels (#111555) Co-authored-by: Kibana Machine <[email protected]> * [Exploratory View] Fix date range picker on secondary series (#111700) Co-authored-by: Kibana Machine <[email protected]> * [Exploratory View] Collapse series only on add, not delete (#111790) * [Exploratory view] Remove preview panel (#111884) * [Exploratory view] implement popovers for data type and metric type (#112370) * implement popovers for data type and metric type * adjust types * add IncompleteBadge * make report metric dismissable * show date-picker even if metric is undefined * adjust styles of expanded series row * add truncation to series name * move incomplete badge and add edit pencil * add tooltip to data type badge * adjust content * lint * delete extra file * move filters row * adjust name editing behavior * adjust filter styles Co-authored-by: Kibana Machine <[email protected]> * move cases button to top * fix types * more types :( Co-authored-by: Justin Kambic <[email protected]> Co-authored-by: shahzad31 <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Shahzad <[email protected]>

…lastic#113464) * Revert "[Observability][Exploratory View] revert exploratory view multi-series (elastic#107647)" This reverts commit 1649661. * Revert "[Observability][Exploratory View] revert exploratory view multi-series (elastic#107647)" This reverts commit 1649661. * [Observability] [Exploratory View] Create multi series feature branch (elastic#108079) * Revert "[Observability][Exploratory View] revert exploratory view multi-series (elastic#107647)" This reverts commit 1649661. * Revert "[Observability][Exploratory View] revert exploratory view multi-series (elastic#107647)" This reverts commit 1649661. * update types * update tests * [Observability] exploratory view design issues (elastic#111028) * remove custom y axis labels for better clarity * move add series button to the bottom * disable auto apply * fix missing test * When series count changes, collapse other series. (elastic#110894) Co-authored-by: Kibana Machine <[email protected]> * Feature/observability exploratory view multi series panels (elastic#111555) Co-authored-by: Kibana Machine <[email protected]> * [Exploratory View] Fix date range picker on secondary series (elastic#111700) Co-authored-by: Kibana Machine <[email protected]> * [Exploratory View] Collapse series only on add, not delete (elastic#111790) * [Exploratory view] Remove preview panel (elastic#111884) * [Exploratory view] implement popovers for data type and metric type (elastic#112370) * implement popovers for data type and metric type * adjust types * add IncompleteBadge * make report metric dismissable * show date-picker even if metric is undefined * adjust styles of expanded series row * add truncation to series name * move incomplete badge and add edit pencil * add tooltip to data type badge * adjust content * lint * delete extra file * move filters row * adjust name editing behavior * adjust filter styles Co-authored-by: Kibana Machine <[email protected]> * move cases button to top * fix types * more types :( Co-authored-by: Justin Kambic <[email protected]> Co-authored-by: shahzad31 <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Shahzad <[email protected]> # Conflicts: # test/functional/page_objects/common_page.ts

…113464) (#114120) * Revert "[Observability][Exploratory View] revert exploratory view multi-series (#107647)" This reverts commit 1649661. * Revert "[Observability][Exploratory View] revert exploratory view multi-series (#107647)" This reverts commit 1649661. * [Observability] [Exploratory View] Create multi series feature branch (#108079) * Revert "[Observability][Exploratory View] revert exploratory view multi-series (#107647)" This reverts commit 1649661. * Revert "[Observability][Exploratory View] revert exploratory view multi-series (#107647)" This reverts commit 1649661. * update types * update tests * [Observability] exploratory view design issues (#111028) * remove custom y axis labels for better clarity * move add series button to the bottom * disable auto apply * fix missing test * When series count changes, collapse other series. (#110894) Co-authored-by: Kibana Machine <[email protected]> * Feature/observability exploratory view multi series panels (#111555) Co-authored-by: Kibana Machine <[email protected]> * [Exploratory View] Fix date range picker on secondary series (#111700) Co-authored-by: Kibana Machine <[email protected]> * [Exploratory View] Collapse series only on add, not delete (#111790) * [Exploratory view] Remove preview panel (#111884) * [Exploratory view] implement popovers for data type and metric type (#112370) * implement popovers for data type and metric type * adjust types * add IncompleteBadge * make report metric dismissable * show date-picker even if metric is undefined * adjust styles of expanded series row * add truncation to series name * move incomplete badge and add edit pencil * add tooltip to data type badge * adjust content * lint * delete extra file * move filters row * adjust name editing behavior * adjust filter styles Co-authored-by: Kibana Machine <[email protected]> * move cases button to top * fix types * more types :( Co-authored-by: Justin Kambic <[email protected]> Co-authored-by: shahzad31 <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Shahzad <[email protected]> # Conflicts: # test/functional/page_objects/common_page.ts

implement popovers for data type and metric type

1c1c983

dominiqueclarke added enhancement New value added to drive a business result Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Sep 16, 2021

dominiqueclarke requested a review from a team as a code owner September 16, 2021 01:51

dominiqueclarke requested a review from liciavale September 16, 2021 01:52

adjust types

2f53d5b

shahzad31 reviewed Sep 16, 2021

View reviewed changes

shahzad31 approved these changes Sep 16, 2021

View reviewed changes

kibanamachine and others added 9 commits September 20, 2021 10:10

Merge branch 'feature/observability-exploratory-view-multi-series' in…

1a36b6f

…to feature/exploratory-view-popovers

add IncompleteBadge

f161d06

make report metric dismissable

0317ab5

show date-picker even if metric is undefined

a00726c

adjust styles of expanded series row

8bac216

add truncation to series name

2683518

move incomplete badge and add edit pencil

c882664

add tooltip to data type badge

1906a27

Merge branch 'feature/exploratory-view-popovers' of https://github.co…

d3cf859

…m/dominiqueclarke/kibana into feature/exploratory-view-popovers

dominiqueclarke added 3 commits September 21, 2021 07:08

adjust content

8a8b1cb

lint

3165df3

delete extra file

8b59c10

Merge branch 'feature/observability-exploratory-view-multi-series' in…

c55da9b

…to feature/exploratory-view-popovers

dominiqueclarke added 2 commits September 22, 2021 13:00

move filters row

61f672d

Merge branch 'feature/exploratory-view-popovers' of https://github.co…

a100310

…m/dominiqueclarke/kibana into feature/exploratory-view-popovers

shahzad31 approved these changes Sep 23, 2021

View reviewed changes

Merge branch 'feature/observability-exploratory-view-multi-series' in…

993932b

…to feature/exploratory-view-popovers

dominiqueclarke added 2 commits September 27, 2021 15:49

adjust name editing behavior

ba2a6a3

Merge branch 'feature/exploratory-view-popovers' of https://github.co…

32d8b78

…m/dominiqueclarke/kibana into feature/exploratory-view-popovers

dominiqueclarke force-pushed the feature/exploratory-view-popovers branch from ed99b8f to 32d8b78 Compare September 27, 2021 23:52

adjust filter styles

c778a3a

liciavale approved these changes Sep 28, 2021

View reviewed changes

dominiqueclarke merged commit bff70dd into elastic:feature/observability-exploratory-view-multi-series Sep 28, 2021

dominiqueclarke deleted the feature/exploratory-view-popovers branch September 28, 2021 17:57

dominiqueclarke mentioned this pull request Oct 20, 2021

[Exploratory View] Update report and metric type configuration to match design #112292

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Exploratory view] implement popovers for data type and metric type #112370

[Exploratory view] implement popovers for data type and metric type #112370

dominiqueclarke commented Sep 16, 2021 •

edited

Loading

elasticmachine commented Sep 16, 2021

shahzad31 Sep 16, 2021

shahzad31 Sep 16, 2021

dominiqueclarke Sep 16, 2021

shahzad31 Sep 16, 2021

dominiqueclarke Sep 16, 2021

liciavale Sep 16, 2021 •

edited

Loading

shahzad31 left a comment

shahzad31 commented Sep 16, 2021

shahzad31 commented Sep 20, 2021

dominiqueclarke commented Sep 20, 2021

shahzad31 commented Sep 21, 2021

dominiqueclarke commented Sep 21, 2021 •

edited

Loading

dominiqueclarke commented Sep 21, 2021

liciavale commented Sep 22, 2021

shahzad31 left a comment

dominiqueclarke commented Sep 23, 2021

dominiqueclarke commented Sep 27, 2021

liciavale commented Sep 27, 2021 •

edited

Loading

shahzad31 commented Sep 28, 2021

dominiqueclarke commented Sep 28, 2021 •

edited by liciavale

Loading

kibanamachine commented Sep 28, 2021

[Exploratory view] implement popovers for data type and metric type #112370

[Exploratory view] implement popovers for data type and metric type #112370

Conversation

dominiqueclarke commented Sep 16, 2021 • edited Loading

elasticmachine commented Sep 16, 2021

shahzad31 Sep 16, 2021

Choose a reason for hiding this comment

shahzad31 Sep 16, 2021

Choose a reason for hiding this comment

dominiqueclarke Sep 16, 2021

Choose a reason for hiding this comment

shahzad31 Sep 16, 2021

Choose a reason for hiding this comment

dominiqueclarke Sep 16, 2021

Choose a reason for hiding this comment

liciavale Sep 16, 2021 • edited Loading

Choose a reason for hiding this comment

shahzad31 left a comment

Choose a reason for hiding this comment

shahzad31 commented Sep 16, 2021

shahzad31 commented Sep 20, 2021

dominiqueclarke commented Sep 20, 2021

shahzad31 commented Sep 21, 2021

dominiqueclarke commented Sep 21, 2021 • edited Loading

dominiqueclarke commented Sep 21, 2021

liciavale commented Sep 22, 2021

shahzad31 left a comment

Choose a reason for hiding this comment

dominiqueclarke commented Sep 23, 2021

dominiqueclarke commented Sep 27, 2021

liciavale commented Sep 27, 2021 • edited Loading

shahzad31 commented Sep 28, 2021

dominiqueclarke commented Sep 28, 2021 • edited by liciavale Loading

kibanamachine commented Sep 28, 2021

💚 Build Succeeded

History

dominiqueclarke commented Sep 16, 2021 •

edited

Loading

liciavale Sep 16, 2021 •

edited

Loading

dominiqueclarke commented Sep 21, 2021 •

edited

Loading

liciavale commented Sep 27, 2021 •

edited

Loading

dominiqueclarke commented Sep 28, 2021 •

edited by liciavale

Loading