EUI dashboard add panel #17374

nreese · 2018-03-23T19:47:52Z

elasticmachine · 2018-03-23T20:10:56Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-03-23T21:52:34Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-03-23T23:32:32Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

stacey-gammon · 2018-03-24T14:29:29Z

Wow, how are you so productive @nreese??

Screenshot looks great, but I notice there isn't a type column anymore. Can it be easily added back in? Wonder if we'll need a bit more horizontal room. Is it easy to add more horizontal room to these side panel pop outs? I could see more columns eventually being useful, like last updated time.

trevan · 2018-03-27T17:37:18Z

Should the "add" button at the top be highlighted in some manner to indicate that the panel is connected to it?

nreese · 2018-05-17T19:04:16Z

Screenshot looks great, but I notice there isn't a type column anymore

@stacey-gammon What type column? The current table does not display any visualization type data.

nreese · 2018-05-17T19:42:31Z

Should the "add" button at the top be highlighted in some manner to indicate that the panel is connected to it?

@trevan I am going to change the styling so the menu takes up the entire height of the screen and flyout owns the focus. This way, it will not be possible to click any of the other nav buttons and the flyout will close if the user clicks outside of the flyout.

nreese · 2018-05-17T20:10:08Z

Is it easy to add more horizontal room to these side panel pop outs

@stacey-gammon Right now the CSS style makes the flyout be 33% of page width but that can easily be increased. What do you think makes the most sense?

elasticmachine · 2018-05-17T21:19:01Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

stacey-gammon · 2018-05-18T12:20:24Z

Ah, my badd @nreese - didn't realize the original add panel table dropped the type column - I was thinking of the visualize landing page. In that case, it looks good the way you have it! Good to know we can easily increase width if we want to add more columns later.

elasticmachine · 2018-05-18T18:59:03Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-18T22:15:27Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-21T17:00:59Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-21T18:52:15Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-21T20:52:16Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-21T22:27:00Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-22T01:36:11Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-22T02:53:19Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

stacey-gammon

👏

stacey-gammon · 2018-05-22T13:49:06Z

src/core_plugins/kibana/public/dashboard/top_nav/saved_object_finder.js

@@ -0,0 +1,161 @@
+import _ from 'lodash';


This is great, but since multiple places use the saved object finder, I'm thinking we should put this in a more generic spot than in dashboard. Maybe ui/saved_objects? The angular one is in a mix of ui/partials and ui/directives which I think is a bad spot for it (and obvi wouldn't fit well with the react version).

Then other teams can use it when they start reactifying too.

stacey-gammon · 2018-05-22T13:54:21Z

src/core_plugins/kibana/public/dashboard/top_nav/saved_object_finder.js

+}
+
+SavedObjectFinder.propTypes = {
+  addNewButton: PropTypes.node,


If we make this usable on Discover too (the Open panel uses the saved object finder), it's not an add new button but a manage button, so we might just want to call it 'callToActionButton' or something more generic.

stacey-gammon · 2018-05-22T13:59:33Z

src/core_plugins/kibana/public/dashboard/top_nav/show_add_panel.js

+    isOpen = false;
+  };
+  const find = (type, search, page, perPage) => {
+    return savedObjectsClient.find({


Original saved object finder has logic for filtering out lab visualizations based on the advanced setting, think we need to copy that here.

Can you add a test for this too?

Should the filtering out labs visualizations logic exist in show_add_panel or saved_object_finder?

Since the saved object finder takes in type and find, I think it kinda fits best in show_add_panel. Then we don't have to add more (if type == visualize { do this} ) logic inside of the saved object finder which tries to be more generic.

Eventually this add panel stuff will change too so it fits with the more generic embeddable concept, maybe once we get closer to k7 and we have a design that doesn't include the two tabs. Then embeddables can have a generic isLab parameter and we don't need the specific type checks.

stacey-gammon · 2018-05-22T14:04:05Z

test/functional/services/dashboard/add_panel.js

@@ -132,7 +154,7 @@ export function DashboardAddPanelProvider({ getService, getPageObjects }) {
      log.debug(`DashboardAddPanel.addVisualization(${vizName})`);
      await this.ensureAddPanelIsShowing();
      await this.filterEmbeddableNames(`"${vizName.replace('-', ' ')}"`);
-      await find.clickByPartialLinkText(vizName);
+      await testSubjects.click(`addPanel${vizName.split(' ').join('-')}`);


Since you added this in, do you still need to have the logic that changes all the spaces to dashes in the callers?

Not sure what you mean here. Could you explain a little more?

You changed some code above, turning things like
await dashboardAddPanel.addVisualization('Rendering Test: animal sounds pie'); into await dashboardAddPanel.addVisualization('Rendering-Test:-animal-sounds-pie'); Which makes it seems like addVisualization should no longer be called with a visualization name with spaces in it, but here you are taking a name with spaces and dynamically adding the dashes. So seems like the other changes could be discarded.

stacey-gammon · 2018-05-22T14:05:13Z

test/functional/services/dashboard/add_panel.js

-        await testSubjects.click('paginateNext');
-        await PageObjects.header.waitUntilLoadingHasFinished();
+      // Clear all toasts that could hide pagination controls
+      const toasts = await find.allByCssSelector('.euiToast');


I think this will be very useful logic for other tests too. Maybe put into PageObjects.header? or PageObjects.common? Or add a new toastsService?

stacey-gammon · 2018-05-22T14:06:56Z

test/functional/apps/dashboard/_embeddable_rendering.js

@@ -36,8 +36,6 @@ export default function ({ getService, getPageObjects }) {
      const panelCount = await PageObjects.dashboard.getPanelCount();
      expect(panelCount).to.be(27);

-      await PageObjects.dashboard.waitForRenderComplete();


I'm a little worried why leaving this in broke the tests. Reporting relies on render complete so if something isn't working right, it might be a bug. Was it just flaky or consistently broken?

Although it's in a weird spot anyway and kinda looks like it was accidentally left in (I'm sure my bad). So I'm fine with removing it, just still curious how it caused things to fail.

It would run locally fine with that line in. It always failed on CI if that line is in. One panel never set render to true and I could not figure out why - and why it would work locally

…ttons in nav from getting clicked and leaving slide out open

elasticmachine · 2018-05-23T18:06:52Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-23T21:02:21Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-05-23T22:20:27Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

stacey-gammon

LGTM 💯

* EUI add panel * implement add functionallity * style flyout so top nav is not covered * add noItemsMessage * add new visualization button * remove angular add_panel template * seperate search bar and table into its own component * fix functional tests * make slide out panel own focus to avoid weirdness of letting other buttons in nav from getting clicked and leaving slide out open * remove deprecated method componentWillMount * add jest test for DashboardAddPanel * fix paging and replace EuiSearcBar with EuiFieldSearch * fix functional tests * fix dashboard filter bar functional test * another functional test fix * add more context to functional test failure message * give search input a default value * remove call to waitForRenderComplete to see if tests will pass * fix dashboard filtering test * updates from Stacey-Gammon review * support filtering out lab visualizations * add functional test for testing visualize:enableLabs with add panel * add sorting by title to SavedObjectFinder componenet * move add panel tabs to state * clean up labs test differently

nreese added the Feature:Dashboard Dashboard related features label Mar 23, 2018

nreese force-pushed the euiAddPanel branch from 497c6e9 to 26ef9e4 Compare March 23, 2018 19:49

nreese force-pushed the euiAddPanel branch from fad8b74 to d8c4854 Compare March 23, 2018 21:08

nreese requested review from stacey-gammon and chrisdavies March 23, 2018 23:36

nreese added v7.0.0 v6.4.0 labels Mar 29, 2018

nreese force-pushed the euiAddPanel branch from c73c095 to 9f88eb7 Compare May 17, 2018 18:49

nreese force-pushed the euiAddPanel branch from ca4b9e5 to 45ee677 Compare May 17, 2018 20:20

nreese force-pushed the euiAddPanel branch from 6309a4d to 7f3d545 Compare May 21, 2018 15:52

nreese force-pushed the euiAddPanel branch from 2b02b77 to 3f48895 Compare May 21, 2018 21:25

stacey-gammon reviewed May 22, 2018

View reviewed changes

nreese added 14 commits May 23, 2018 10:56

fix functional tests

45ecd19

make slide out panel own focus to avoid weirdness of letting other bu…

4aa15a0

…ttons in nav from getting clicked and leaving slide out open

remove deprecated method componentWillMount

6748adc

add jest test for DashboardAddPanel

031ad07

fix paging and replace EuiSearcBar with EuiFieldSearch

2b15e8c

fix functional tests

b57c131

fix dashboard filter bar functional test

f81b028

another functional test fix

1652fd5

add more context to functional test failure message

e9c09dd

give search input a default value

59633f5

remove call to waitForRenderComplete to see if tests will pass

8c97480

fix dashboard filtering test

22e4b0e

updates from Stacey-Gammon review

4b453df

support filtering out lab visualizations

6c6538f

nreese force-pushed the euiAddPanel branch from 7a4ad57 to 6c6538f Compare May 23, 2018 16:56

nreese added 3 commits May 23, 2018 13:27

add functional test for testing visualize:enableLabs with add panel

607aa9c

add sorting by title to SavedObjectFinder componenet

791f8eb

move add panel tabs to state

ecd9f15

clean up labs test differently

9518bef

stacey-gammon approved these changes May 24, 2018

View reviewed changes

nreese merged commit 9c3481c into elastic:master May 24, 2018

nreese mentioned this pull request May 24, 2018

[6.x] EUI dashboard add panel (#17374) #19404

Merged

This was referenced Jun 1, 2018

improvement of the loading panel (use of the wide space) #1565

Closed

Dashboard/Visualization search needs to be able to keep best match criteria #19656

Closed

nreese deleted the euiAddPanel branch July 18, 2018 16:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

EUI dashboard add panel #17374

EUI dashboard add panel #17374

nreese commented Mar 23, 2018 •

edited

Loading

elasticmachine commented Mar 23, 2018

elasticmachine commented Mar 23, 2018

elasticmachine commented Mar 23, 2018

stacey-gammon commented Mar 24, 2018

trevan commented Mar 27, 2018

nreese commented May 17, 2018

nreese commented May 17, 2018

nreese commented May 17, 2018

elasticmachine commented May 17, 2018

stacey-gammon commented May 18, 2018

elasticmachine commented May 18, 2018

elasticmachine commented May 18, 2018

elasticmachine commented May 21, 2018

elasticmachine commented May 21, 2018

elasticmachine commented May 21, 2018

elasticmachine commented May 21, 2018

elasticmachine commented May 22, 2018

elasticmachine commented May 22, 2018

stacey-gammon left a comment

stacey-gammon May 22, 2018

stacey-gammon May 22, 2018

stacey-gammon May 22, 2018

nreese May 22, 2018 •

edited

Loading

stacey-gammon May 22, 2018

stacey-gammon May 22, 2018

nreese May 22, 2018

stacey-gammon May 22, 2018

stacey-gammon May 22, 2018

stacey-gammon May 22, 2018

nreese May 22, 2018

elasticmachine commented May 23, 2018

elasticmachine commented May 23, 2018

elasticmachine commented May 23, 2018

stacey-gammon left a comment

EUI dashboard add panel #17374

EUI dashboard add panel #17374

Conversation

nreese commented Mar 23, 2018 • edited Loading

elasticmachine commented Mar 23, 2018

💔 Build Failed

elasticmachine commented Mar 23, 2018

💔 Build Failed

elasticmachine commented Mar 23, 2018

💚 Build Succeeded

stacey-gammon commented Mar 24, 2018

trevan commented Mar 27, 2018

nreese commented May 17, 2018

nreese commented May 17, 2018

nreese commented May 17, 2018

elasticmachine commented May 17, 2018

💔 Build Failed

stacey-gammon commented May 18, 2018

elasticmachine commented May 18, 2018

💔 Build Failed

elasticmachine commented May 18, 2018

💔 Build Failed

elasticmachine commented May 21, 2018

💔 Build Failed

elasticmachine commented May 21, 2018

💔 Build Failed

elasticmachine commented May 21, 2018

💔 Build Failed

elasticmachine commented May 21, 2018

💔 Build Failed

elasticmachine commented May 22, 2018

💔 Build Failed

elasticmachine commented May 22, 2018

💚 Build Succeeded

stacey-gammon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nreese May 22, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented May 23, 2018

💚 Build Succeeded

elasticmachine commented May 23, 2018

💔 Build Failed

elasticmachine commented May 23, 2018

💚 Build Succeeded

stacey-gammon left a comment

Choose a reason for hiding this comment

nreese commented Mar 23, 2018 •

edited

Loading

nreese May 22, 2018 •

edited

Loading