Design PR: layout tweaks, responsive styles #72944

ryankeairns · 2020-07-22T19:29:16Z

Related to #70571

Adds some basic responsive styles
Increase gutters between cards
Make icons monotone
Add 'App directory' link to footer (needs hooked up)
Remove height on page header; also fixes extra space when no solutions available
Shortened paragraph text in front of link to change landing page
Removed ScreenReaderOnly title since the page has an actual page title; seemed unnecessary
Probably renamed some CSS classes :)
Changed how header and page are structured to avoid the bg color showing through on the bottom of the page

elasticmachine · 2020-07-22T19:29:51Z

Pinging @elastic/kibana-core-ui (Team:Core UI)

MichaelMarcialis

These changes look great. Thanks so much for the help! I left a few nit comments, but nothing too major. Let me know if you have any questions.

src/plugins/home/public/application/components/change_home_route/change_home_route.tsx

MichaelMarcialis · 2020-07-23T15:44:23Z

src/plugins/home/public/application/components/home.js

            </EuiFlexItem>
            <EuiFlexItem grow={false}>
-              <EuiFlexGroup alignItems="flexEnd">
-                <EuiFlexItem>
+              <EuiFlexGroup className="homPageHeader__menu" alignItems="flexEnd">


Wondering if we should also drop a responsive={false} prop here, to keep the buttons from stacking and taking up a lot of vertical real estate. Thoughts?

As it stands, the menu stays horizontal down to tablet portrait size. It only stacks below 768, however if set to responsive={false} then the menu goes off the screen. I'd like to convert this to a button + menu/popover, but then I wonder if we should consider hiding the menu altogether since performing these actions on a phone is unrealistic to begin with. Let's leave it as-is, its functional, and consider improving it later if there is sufficient demand for further investment of time.

src/plugins/home/public/application/components/_solutions_panel.scss

src/plugins/home/public/application/components/home.js

src/plugins/home/public/application/components/solutions_panel/solutions_panel.tsx

MichaelMarcialis · 2020-07-23T15:59:11Z

src/plugins/home/public/application/components/_solutions_panel.scss

@@ -3,10 +3,22 @@
  min-height: $euiSize*16;


Since my mistake of assuming there was a 32px gutter option for EuiFlexGroup, can we change this margin-top property to offset the cards -24px over the header after the gutters are reverted back to 24px? That way the offset/overlap matches the gutter spacing.

Due to the margin being applied by the EuiFlex items, the euiSizeXL effectively results in a -24px overlap.

MichaelMarcialis · 2020-07-23T16:24:35Z

src/plugins/home/public/application/components/_home.scss

  margin: 0 auto;
  max-width: $homePageWidth;
-  padding: $euiSizeXL $euiSize 0;
+  padding: $euiSizeXL $euiSize $euiSizeXXL;


I'm wondering if it would be better to set the padding to $euiSizeXL $euiSize by default, and then if the below solutions container is rendered/visible, then a modifier class is added to apply additional bottom padding (to account for the overlap of those solution cards).

Also, I imagine we probably want to have some top padding always applied to the .homPage element, to ensure that page contents are properly spaced from the header when the solution cards aren't present.

The logic for checking solutions exists a layer deeper than the home page, so that presents a challenge. As a simple alternative, I've changed the solutions component (that contains said logic) to output a larger spacer when no solutions exist. This results in the following layout:

The extra padding in the header remains, but it feels less noticeable (to me) with the 'add data' panel pushing down from the header a bit. I think this gets us by for now given this feels like an edge case scenario.

kibanamachine · 2020-07-27T17:58:27Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: a8459f0
Pipeline Steps (look for red circles / failed steps)
Interpreting CI Failures

Failed CI Steps

Test Failures

Kibana Pipeline / kibana-oss-agent / Chrome UI Functional Tests.test/functional/apps/home/_home·js.homepage app Kibana takes you home clicking on console on homepage should take you to console app

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

[00:00:00]       │
[00:19:46]         └-: homepage app
[00:19:46]           └-> "before all" hook
[00:19:46]           └-> "before all" hook
[00:20:24]           └-: Kibana takes you home
[00:20:24]             └-> "before all" hook
[00:20:24]             └-> clicking on kibana logo should take you to home page
[00:20:24]               └-> "before each" hook: global before each
[00:20:24]               │ debg navigating to settings url: http://localhost:6171/app/management
[00:20:24]               │ debg navigate to: http://localhost:6171/app/management
[00:20:24]               │ debg ... sleep(700) start
[00:20:24]               │ debg browser[INFO] http://localhost:6171/app/management?_t=1595869040588 341 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-P5polb1UreUSOe5V/Pv7tc+yeZuJXiOi/3fqhGsU7BE='), or a nonce ('nonce-...') is required to enable inline execution.
[00:20:24]               │
[00:20:24]               │ debg browser[INFO] http://localhost:6171/bundles/app/core/bootstrap.js 42:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:20:25]               │ debg ... sleep(700) end
[00:20:25]               │ debg returned from get, calling refresh
[00:20:26]               │ debg browser[INFO] http://localhost:6171/34964/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.js 452:106112 "INFO: 2020-07-27T16:57:21Z
[00:20:26]               │        Adding connection to http://localhost:6171/elasticsearch
[00:20:26]               │
[00:20:26]               │      "
[00:20:26]               │ERROR browser[SEVERE] http://localhost:6171/34964/bundles/core/core.entry.js 83:273544 TypeError: Failed to fetch
[00:20:26]               │ debg browser[INFO] http://localhost:6171/app/management?_t=1595869040588 341 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-P5polb1UreUSOe5V/Pv7tc+yeZuJXiOi/3fqhGsU7BE='), or a nonce ('nonce-...') is required to enable inline execution.
[00:20:26]               │
[00:20:26]               │ debg browser[INFO] http://localhost:6171/bundles/app/core/bootstrap.js 42:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:20:26]               │ debg browser[INFO] http://localhost:6171/34964/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.js 452:106112 "INFO: 2020-07-27T16:57:22Z
[00:20:26]               │        Adding connection to http://localhost:6171/elasticsearch
[00:20:26]               │
[00:20:26]               │      "
[00:20:26]               │ debg currentUrl = http://localhost:6171/app/management
[00:20:26]               │          appUrl = http://localhost:6171/app/management
[00:20:26]               │ debg TestSubjects.find(kibanaChrome)
[00:20:26]               │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:20:26]               │ debg ... sleep(501) start
[00:20:27]               │ debg ... sleep(501) end
[00:20:27]               │ debg in navigateTo url = http://localhost:6171/app/management
[00:20:27]               │ debg TestSubjects.exists(statusPageContainer)
[00:20:27]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="statusPageContainer"]') with timeout=2500
[00:20:29]               │ debg --- retry.tryForTime error: [data-test-subj="statusPageContainer"] is not displayed
[00:20:30]               │ debg TestSubjects.click(headerGlobalNav > logo)
[00:20:30]               │ debg Find.clickByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:20:30]               │ debg Find.findByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:20:30]               │ debg isGlobalLoadingIndicatorVisible
[00:20:30]               │ debg TestSubjects.exists(globalLoadingIndicator)
[00:20:30]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:20:30]               │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:20:30]               │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:20:30]               │ debg browser[INFO] http://localhost:6171/34964/bundles/plugin/home/home.chunk.2.js 0:78481 Object
[00:20:30]               │ debg browser[INFO] http://localhost:6171/34964/bundles/plugin/home/home.chunk.2.js 0:78481 Object
[00:20:30]               └- ✓ pass  (6.3s) "homepage app Kibana takes you home clicking on kibana logo should take you to home page"
[00:20:30]             └-> clicking on console on homepage should take you to console app
[00:20:30]               └-> "before each" hook: global before each
[00:20:30]               │ debg TestSubjects.click(homeSynopsisLinkconsole)
[00:20:30]               │ debg Find.clickByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:20:30]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:20:40]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:20:40]               │      Wait timed out after 10003ms
[00:20:41]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:20:51]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:20:51]               │      Wait timed out after 10048ms
[00:20:51]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:21:01]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:21:01]               │      Wait timed out after 10035ms
[00:21:02]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:21:12]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:21:12]               │      Wait timed out after 10036ms
[00:21:12]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:21:22]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:21:22]               │      Wait timed out after 10038ms
[00:21:23]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:21:33]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:21:33]               │      Wait timed out after 10011ms
[00:21:33]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:21:43]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:21:43]               │      Wait timed out after 10037ms
[00:21:44]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:21:54]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:21:54]               │      Wait timed out after 10038ms
[00:21:54]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:22:04]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:22:04]               │      Wait timed out after 10029ms
[00:22:05]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:22:15]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:22:15]               │      Wait timed out after 10031ms
[00:22:15]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:22:25]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:22:25]               │      Wait timed out after 10029ms
[00:22:26]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:22:36]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:22:36]               │      Wait timed out after 10023ms
[00:22:36]               │ info Taking screenshot "/dev/shm/workspace/kibana/test/functional/screenshots/failure/homepage app Kibana takes you home clicking on console on homepage should take you to console app.png"
[00:22:37]               │ info Current URL is: http://localhost:6171/app/home#/
[00:22:37]               │ info Saving page source to: /dev/shm/workspace/kibana/test/functional/failure_debug/html/homepage app Kibana takes you home clicking on console on homepage should take you to console app.html
[00:22:37]               └- ✖ fail: homepage app Kibana takes you home clicking on console on homepage should take you to console app
[00:22:37]               │      Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:22:37]               │ Wait timed out after 10023ms
[00:22:37]               │     at /dev/shm/workspace/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
[00:22:37]               │     at process._tickCallback (internal/process/next_tick.js:68:7)
[00:22:37]               │       at onFailure (test/common/services/retry/retry_for_success.ts:28:9)
[00:22:37]               │       at retryForSuccess (test/common/services/retry/retry_for_success.ts:68:13)
[00:22:37]               │ 
[00:22:37]               │

Stack Trace

Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
Wait timed out after 10023ms
    at /dev/shm/workspace/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at onFailure (test/common/services/retry/retry_for_success.ts:28:9)
    at retryForSuccess (test/common/services/retry/retry_for_success.ts:68:13)

Kibana Pipeline / kibana-oss-agent / Firefox UI Functional Tests.test/functional/apps/home/_home·js.homepage app Kibana takes you home clicking on console on homepage should take you to console app

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

[00:00:00]       │
[00:11:40]         └-: homepage app
[00:11:40]           └-> "before all" hook
[00:11:40]           └-> "before all" hook
[00:11:40]           └-: Kibana takes you home
[00:11:40]             └-> "before all" hook
[00:11:40]             └-> clicking on kibana logo should take you to home page
[00:11:40]               └-> "before each" hook: global before each
[00:11:40]               │ debg navigating to settings url: http://localhost:6111/app/management
[00:11:40]               │ debg navigate to: http://localhost:6111/app/management
[00:11:40]               │ debg browser[log] "^ A single error about an inline script not firing due to content security policy is expected!"
[00:11:40]               │ debg ... sleep(700) start
[00:11:41]               │ debg ... sleep(700) end
[00:11:41]               │ debg returned from get, calling refresh
[00:11:41]               │ debg browser[info] "INFO: 2020-07-27T17:01:50Z
[00:11:41]               │        Adding connection to http://localhost:6111/elasticsearch
[00:11:41]               │
[00:11:41]               │      "
[00:11:42]               │ERROR browser[error] (new TypeError("NetworkError when attempting to fetch resource.", ""))
[00:11:42]               │ debg browser[log] "^ A single error about an inline script not firing due to content security policy is expected!"
[00:11:42]               │ debg currentUrl = http://localhost:6111/app/management
[00:11:42]               │          appUrl = http://localhost:6111/app/management
[00:11:42]               │ debg TestSubjects.find(kibanaChrome)
[00:11:42]               │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:11:43]               │ debg browser[info] "INFO: 2020-07-27T17:01:52Z
[00:11:43]               │        Adding connection to http://localhost:6111/elasticsearch
[00:11:43]               │
[00:11:43]               │      "
[00:11:44]               │ debg ... sleep(501) start
[00:11:44]               │ debg ... sleep(501) end
[00:11:44]               │ debg in navigateTo url = http://localhost:6111/app/management
[00:11:44]               │ debg TestSubjects.exists(statusPageContainer)
[00:11:44]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="statusPageContainer"]') with timeout=2500
[00:11:47]               │ debg --- retry.tryForTime error: [data-test-subj="statusPageContainer"] is not displayed
[00:11:47]               │ debg TestSubjects.click(headerGlobalNav > logo)
[00:11:47]               │ debg Find.clickByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:11:47]               │ debg Find.findByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:11:47]               │ debg isGlobalLoadingIndicatorVisible
[00:11:47]               │ debg TestSubjects.exists(globalLoadingIndicator)
[00:11:47]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:11:47]               │ debg browser[log] ({directories:[{id:"home_tutorial_directory", title:"Add an integration", description:"Add data from a variety of common sources.", icon:"indexOpen", showOnHomePage:true, path:"/app/home#/tutorial_directory", category:"data"}, {id:"advanced_settings", title:"Advanced Settings", description:"Customize your Kibana experience", icon:"gear", path:"/app/management/kibana/settings", showOnHomePage:true, category:"admin"}, {id:"console", title:"Console", description:"Skip cURL and use this JSON interface to work with your data directly.", icon:"consoleApp", path:"/app/dev_tools#/console", showOnHomePage:true, category:"admin"}, {id:"dashboard", title:"Dashboard", description:"Display and share a collection of visualizations and saved searches.", icon:"dashboardApp", path:"/app/dashboards#/list", showOnHomePage:true, category:"data"}, {id:"discover", title:"Discover", description:"Interactively explore your data by querying and filtering raw documents.", icon:"discoverApp", path:"/app/discover#/", showOnHomePage:true, category:"data"}, {id:"home_sample_data", title:"Sample Data", description:"Load a data set and a Kibana dashboard", icon:"tableDensityExpanded", showOnHomePage:true, path:"/app/home#/tutorial_directory/sampleData", category:"data"}, {id:"saved_objects", title:"Saved Objects", description:"Import, export, and manage your saved searches, visualizations, and dashboards.", icon:"savedObjectsApp", path:"/app/management/kibana/objects", showOnHomePage:true, category:"admin"}, {id:"stack-management", title:"Stack Management", description:"Your center console for managing the Elastic Stack.", icon:"managementApp", path:"/app/management", showOnHomePage:true, category:"admin"}, {id:"visualize", title:"Visualize", description:"Create visualizations and aggregate data stores in your Elasticsearch indices.", icon:"visualizeApp", path:"/app/visualize#/", showOnHomePage:true, category:"data"}]})
[00:11:47]               │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:11:47]               │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:11:47]               │ debg browser[log] ({directories:[{id:"home_tutorial_directory", title:"Add an integration", description:"Add data from a variety of common sources.", icon:"indexOpen", showOnHomePage:true, path:"/app/home#/tutorial_directory", category:"data"}, {id:"advanced_settings", title:"Advanced Settings", description:"Customize your Kibana experience", icon:"gear", path:"/app/management/kibana/settings", showOnHomePage:true, category:"admin"}, {id:"console", title:"Console", description:"Skip cURL and use this JSON interface to work with your data directly.", icon:"consoleApp", path:"/app/dev_tools#/console", showOnHomePage:true, category:"admin"}, {id:"dashboard", title:"Dashboard", description:"Display and share a collection of visualizations and saved searches.", icon:"dashboardApp", path:"/app/dashboards#/list", showOnHomePage:true, category:"data"}, {id:"discover", title:"Discover", description:"Interactively explore your data by querying and filtering raw documents.", icon:"discoverApp", path:"/app/discover#/", showOnHomePage:true, category:"data"}, {id:"home_sample_data", title:"Sample Data", description:"Load a data set and a Kibana dashboard", icon:"tableDensityExpanded", showOnHomePage:true, path:"/app/home#/tutorial_directory/sampleData", category:"data"}, {id:"saved_objects", title:"Saved Objects", description:"Import, export, and manage your saved searches, visualizations, and dashboards.", icon:"savedObjectsApp", path:"/app/management/kibana/objects", showOnHomePage:true, category:"admin"}, {id:"stack-management", title:"Stack Management", description:"Your center console for managing the Elastic Stack.", icon:"managementApp", path:"/app/management", showOnHomePage:true, category:"admin"}, {id:"visualize", title:"Visualize", description:"Create visualizations and aggregate data stores in your Elasticsearch indices.", icon:"visualizeApp", path:"/app/visualize#/", showOnHomePage:true, category:"data"}]})
[00:11:47]               └- ✓ pass  (7.8s) "homepage app Kibana takes you home clicking on kibana logo should take you to home page"
[00:11:47]             └-> clicking on console on homepage should take you to console app
[00:11:47]               └-> "before each" hook: global before each
[00:11:47]               │ debg TestSubjects.click(homeSynopsisLinkconsole)
[00:11:47]               │ debg Find.clickByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:11:47]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:11:57]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:11:57]               │      Wait timed out after 10009ms
[00:11:58]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:08]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:08]               │      Wait timed out after 10012ms
[00:12:08]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:18]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:18]               │      Wait timed out after 10016ms
[00:12:19]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:29]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:29]               │      Wait timed out after 10015ms
[00:12:29]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:39]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:39]               │      Wait timed out after 10007ms
[00:12:40]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:50]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:50]               │      Wait timed out after 10006ms
[00:12:50]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:00]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:00]               │      Wait timed out after 10012ms
[00:13:01]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:11]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:11]               │      Wait timed out after 10006ms
[00:13:11]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:21]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:21]               │      Wait timed out after 10014ms
[00:13:22]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:32]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:32]               │      Wait timed out after 10010ms
[00:13:32]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:42]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:42]               │      Wait timed out after 10011ms
[00:13:43]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:53]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:53]               │      Wait timed out after 10008ms
[00:13:53]               │ info Taking screenshot "/dev/shm/workspace/kibana/test/functional/screenshots/failure/homepage app Kibana takes you home clicking on console on homepage should take you to console app.png"
[00:13:54]               │ info Current URL is: http://localhost:6111/app/home#/
[00:13:54]               │ info Saving page source to: /dev/shm/workspace/kibana/test/functional/failure_debug/html/homepage app Kibana takes you home clicking on console on homepage should take you to console app.html
[00:13:54]               └- ✖ fail: homepage app Kibana takes you home clicking on console on homepage should take you to console app
[00:13:54]               │      Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:54]               │ Wait timed out after 10008ms
[00:13:54]               │     at /dev/shm/workspace/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
[00:13:54]               │     at process._tickCallback (internal/process/next_tick.js:68:7)
[00:13:54]               │       at onFailure (test/common/services/retry/retry_for_success.ts:28:9)
[00:13:54]               │       at retryForSuccess (test/common/services/retry/retry_for_success.ts:68:13)
[00:13:54]               │ 
[00:13:54]               │

Stack Trace

Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
Wait timed out after 10008ms
    at /dev/shm/workspace/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at onFailure (test/common/services/retry/retry_for_success.ts:28:9)
    at retryForSuccess (test/common/services/retry/retry_for_success.ts:68:13)

Kibana Pipeline / kibana-oss-agent / Firefox UI Functional Tests.test/functional/apps/home/_home·js.homepage app Kibana takes you home clicking on console on homepage should take you to console app

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has failed 1 times on tracked branches: https://dryrun

[00:00:00]       │
[00:11:43]         └-: homepage app
[00:11:43]           └-> "before all" hook
[00:11:43]           └-> "before all" hook
[00:11:43]           └-: Kibana takes you home
[00:11:43]             └-> "before all" hook
[00:11:43]             └-> clicking on kibana logo should take you to home page
[00:11:43]               └-> "before each" hook: global before each
[00:11:43]               │ debg navigating to settings url: http://localhost:6111/app/management
[00:11:43]               │ debg navigate to: http://localhost:6111/app/management
[00:11:43]               │ debg browser[log] "^ A single error about an inline script not firing due to content security policy is expected!"
[00:11:43]               │ debg ... sleep(700) start
[00:11:44]               │ debg ... sleep(700) end
[00:11:44]               │ debg returned from get, calling refresh
[00:11:45]               │ debg browser[info] "INFO: 2020-07-27T16:46:30Z
[00:11:45]               │        Adding connection to http://localhost:6111/elasticsearch
[00:11:45]               │
[00:11:45]               │      "
[00:11:45]               │ERROR browser[error] (new TypeError("NetworkError when attempting to fetch resource.", ""))
[00:11:45]               │ debg browser[log] "^ A single error about an inline script not firing due to content security policy is expected!"
[00:11:45]               │ debg currentUrl = http://localhost:6111/app/management
[00:11:45]               │          appUrl = http://localhost:6111/app/management
[00:11:45]               │ debg TestSubjects.find(kibanaChrome)
[00:11:45]               │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:11:47]               │ debg browser[info] "INFO: 2020-07-27T16:46:32Z
[00:11:47]               │        Adding connection to http://localhost:6111/elasticsearch
[00:11:47]               │
[00:11:47]               │      "
[00:11:47]               │ debg ... sleep(501) start
[00:11:48]               │ debg ... sleep(501) end
[00:11:48]               │ debg in navigateTo url = http://localhost:6111/app/management
[00:11:48]               │ debg TestSubjects.exists(statusPageContainer)
[00:11:48]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="statusPageContainer"]') with timeout=2500
[00:11:50]               │ debg --- retry.tryForTime error: [data-test-subj="statusPageContainer"] is not displayed
[00:11:51]               │ debg TestSubjects.click(headerGlobalNav > logo)
[00:11:51]               │ debg Find.clickByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:11:51]               │ debg Find.findByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:11:51]               │ debg isGlobalLoadingIndicatorVisible
[00:11:51]               │ debg TestSubjects.exists(globalLoadingIndicator)
[00:11:51]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:11:51]               │ debg browser[log] ({directories:[{id:"home_tutorial_directory", title:"Add an integration", description:"Add data from a variety of common sources.", icon:"indexOpen", showOnHomePage:true, path:"/app/home#/tutorial_directory", category:"data"}, {id:"advanced_settings", title:"Advanced Settings", description:"Customize your Kibana experience", icon:"gear", path:"/app/management/kibana/settings", showOnHomePage:true, category:"admin"}, {id:"console", title:"Console", description:"Skip cURL and use this JSON interface to work with your data directly.", icon:"consoleApp", path:"/app/dev_tools#/console", showOnHomePage:true, category:"admin"}, {id:"dashboard", title:"Dashboard", description:"Display and share a collection of visualizations and saved searches.", icon:"dashboardApp", path:"/app/dashboards#/list", showOnHomePage:true, category:"data"}, {id:"discover", title:"Discover", description:"Interactively explore your data by querying and filtering raw documents.", icon:"discoverApp", path:"/app/discover#/", showOnHomePage:true, category:"data"}, {id:"home_sample_data", title:"Sample Data", description:"Load a data set and a Kibana dashboard", icon:"tableDensityExpanded", showOnHomePage:true, path:"/app/home#/tutorial_directory/sampleData", category:"data"}, {id:"saved_objects", title:"Saved Objects", description:"Import, export, and manage your saved searches, visualizations, and dashboards.", icon:"savedObjectsApp", path:"/app/management/kibana/objects", showOnHomePage:true, category:"admin"}, {id:"stack-management", title:"Stack Management", description:"Your center console for managing the Elastic Stack.", icon:"managementApp", path:"/app/management", showOnHomePage:true, category:"admin"}, {id:"visualize", title:"Visualize", description:"Create visualizations and aggregate data stores in your Elasticsearch indices.", icon:"visualizeApp", path:"/app/visualize#/", showOnHomePage:true, category:"data"}]})
[00:11:51]               │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:11:51]               │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:11:51]               │ debg browser[log] ({directories:[{id:"home_tutorial_directory", title:"Add an integration", description:"Add data from a variety of common sources.", icon:"indexOpen", showOnHomePage:true, path:"/app/home#/tutorial_directory", category:"data"}, {id:"advanced_settings", title:"Advanced Settings", description:"Customize your Kibana experience", icon:"gear", path:"/app/management/kibana/settings", showOnHomePage:true, category:"admin"}, {id:"console", title:"Console", description:"Skip cURL and use this JSON interface to work with your data directly.", icon:"consoleApp", path:"/app/dev_tools#/console", showOnHomePage:true, category:"admin"}, {id:"dashboard", title:"Dashboard", description:"Display and share a collection of visualizations and saved searches.", icon:"dashboardApp", path:"/app/dashboards#/list", showOnHomePage:true, category:"data"}, {id:"discover", title:"Discover", description:"Interactively explore your data by querying and filtering raw documents.", icon:"discoverApp", path:"/app/discover#/", showOnHomePage:true, category:"data"}, {id:"home_sample_data", title:"Sample Data", description:"Load a data set and a Kibana dashboard", icon:"tableDensityExpanded", showOnHomePage:true, path:"/app/home#/tutorial_directory/sampleData", category:"data"}, {id:"saved_objects", title:"Saved Objects", description:"Import, export, and manage your saved searches, visualizations, and dashboards.", icon:"savedObjectsApp", path:"/app/management/kibana/objects", showOnHomePage:true, category:"admin"}, {id:"stack-management", title:"Stack Management", description:"Your center console for managing the Elastic Stack.", icon:"managementApp", path:"/app/management", showOnHomePage:true, category:"admin"}, {id:"visualize", title:"Visualize", description:"Create visualizations and aggregate data stores in your Elasticsearch indices.", icon:"visualizeApp", path:"/app/visualize#/", showOnHomePage:true, category:"data"}]})
[00:11:51]               └- ✓ pass  (8.1s) "homepage app Kibana takes you home clicking on kibana logo should take you to home page"
[00:11:51]             └-> clicking on console on homepage should take you to console app
[00:11:51]               └-> "before each" hook: global before each
[00:11:51]               │ debg TestSubjects.click(homeSynopsisLinkconsole)
[00:11:51]               │ debg Find.clickByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:11:51]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:01]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:01]               │      Wait timed out after 10009ms
[00:12:02]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:12]               │ debg --- retry.try failed again with the same message...
[00:12:12]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:22]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:22]               │      Wait timed out after 10020ms
[00:12:23]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:33]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:33]               │      Wait timed out after 10009ms
[00:12:33]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:43]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:43]               │      Wait timed out after 10011ms
[00:12:44]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:54]               │ debg --- retry.try failed again with the same message...
[00:12:54]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:04]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:04]               │      Wait timed out after 10005ms
[00:13:05]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:15]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:15]               │      Wait timed out after 10012ms
[00:13:15]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:25]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:25]               │      Wait timed out after 10010ms
[00:13:26]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:36]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:36]               │      Wait timed out after 10008ms
[00:13:36]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:46]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:46]               │      Wait timed out after 10010ms
[00:13:47]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:57]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:57]               │      Wait timed out after 10008ms
[00:13:57]               │ info Taking screenshot "/dev/shm/workspace/kibana/test/functional/screenshots/failure/homepage app Kibana takes you home clicking on console on homepage should take you to console app.png"
[00:13:57]               │ info Current URL is: http://localhost:6111/app/home#/
[00:13:57]               │ info Saving page source to: /dev/shm/workspace/kibana/test/functional/failure_debug/html/homepage app Kibana takes you home clicking on console on homepage should take you to console app.html
[00:13:57]               └- ✖ fail: homepage app Kibana takes you home clicking on console on homepage should take you to console app
[00:13:57]               │      Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:57]               │ Wait timed out after 10008ms
[00:13:57]               │     at /dev/shm/workspace/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
[00:13:57]               │     at process._tickCallback (internal/process/next_tick.js:68:7)
[00:13:57]               │       at onFailure (test/common/services/retry/retry_for_success.ts:28:9)
[00:13:57]               │       at retryForSuccess (test/common/services/retry/retry_for_success.ts:68:13)
[00:13:57]               │ 
[00:13:57]               │

Stack Trace

Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
Wait timed out after 10008ms
    at /dev/shm/workspace/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at onFailure (test/common/services/retry/retry_for_success.ts:28:9)
    at retryForSuccess (test/common/services/retry/retry_for_success.ts:68:13)

and 2 more failures, only showing the first 3.

Build metrics

async chunks size

id	value	diff	baseline
home	536.9KB	+10.6KB	526.4KB

History

💔 Build #63732 failed 0059f80

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

MichaelMarcialis

@ryankeairns: Thanks for making those changes and answering my questions. Giving this the thumbs up.

* layout tweaks, responsive styles * address feedback, improve bg color setup * use EUI var for header height

Adds auto scroll to advanced setting provided in the URL hash Registered plugins to feature catalogue to be displayed on home page Rearrange add data section Fix solution panel conditional rendering Removed extraneous import Remmoved environment update from observability plugin Registrered features to feature catalog for ingest manager, ml, and index lifecycle management Fixed import Added max width to Kibana solution card Fixed feature id Fixed enterprise search link Updated solutions logos Fixed beta label on ingest manager card Fixed logos Cleaned up CSS Change home route redirects user to advanced settings Conditionally renders default route advanced setting link Restored app search logo Hides graph description on home page on basic license Style home page header and other misc design tweaks (#72481) Fixed home page header links spacing Hide solutions wrapper when no solutions are available Design PR: layout tweaks, responsive styles (#72944) * layout tweaks, responsive styles * address feedback, improve bg color setup * use EUI var for header height Fixed merge conflict Fixed click handler for change home route button Updated app directory link Moved app directory link from ChangeHomeRoute component to home component Updated tests Added FeatureCatalogueRegistryStart type Home page refactor Fixed prop types Fixed nav links Removed images from solution card components card images as backgrounds, consolidate styles, BEM changes style token icons for dark mode fix page height Updated home page feature order values Added solutions registry to feature catalogue Renamed solutions_panel to solutions_section Updated copy Removed imports Chore: makes home plugin optional dependency Fixed merge conflict Added tests for new home components Reverted component rename [Core UI] Home Page Redesign Class & Style Tweaks (#74037) Co-authored-by: Catherine Liu <catherine.liu@elastic.co> Co-authored-by: Ryan Keairns <contactryank@gmail.com> Co-authored-by: Catherine Liu <catherineqliu@outlook.com> Fixed i18n errors Adde feature catalogue registry tests Rename components

Adds auto scroll to advanced setting provided in the URL hash Registered plugins to feature catalogue to be displayed on home page Rearrange add data section Fix solution panel conditional rendering Removed extraneous import Remmoved environment update from observability plugin Registrered features to feature catalog for ingest manager, ml, and index lifecycle management Fixed import Added max width to Kibana solution card Fixed feature id Fixed enterprise search link Updated solutions logos Fixed beta label on ingest manager card Fixed logos Cleaned up CSS Change home route redirects user to advanced settings Conditionally renders default route advanced setting link Restored app search logo Hides graph description on home page on basic license Style home page header and other misc design tweaks (#72481) Fixed home page header links spacing Hide solutions wrapper when no solutions are available Design PR: layout tweaks, responsive styles (#72944) * layout tweaks, responsive styles * address feedback, improve bg color setup * use EUI var for header height Fixed merge conflict Fixed click handler for change home route button Updated app directory link Moved app directory link from ChangeHomeRoute component to home component Updated tests Added FeatureCatalogueRegistryStart type Home page refactor Fixed prop types Fixed nav links Removed images from solution card components card images as backgrounds, consolidate styles, BEM changes style token icons for dark mode fix page height Updated home page feature order values Added solutions registry to feature catalogue Renamed solutions_panel to solutions_section Updated copy Removed imports Chore: makes home plugin optional dependency Fixed merge conflict Added tests for new home components Reverted component rename [Core UI] Home Page Redesign Class & Style Tweaks (#74037) Co-authored-by: Catherine Liu <catherine.liu@elastic.co> Co-authored-by: Ryan Keairns <contactryank@gmail.com> Co-authored-by: Catherine Liu <catherineqliu@outlook.com> Fixed i18n errors Adde feature catalogue registry tests Rename components Switched solution descriptions to static strings Fixed registered features Fixed i18n errors Show/hide solutions based on available nav links Removed solution property from feature catalogue entry Revert text changes Updated security link Updated snapshots Fixed home plugin tests Added solutions section tests Removed mock Fixed tutorial directory a11y tests Fix ui capabilities catalogue test Turned solution title into link Added tests Fixed security solution tests Fixed ts errors Updated snapshots Revert vega snapshot changes Retrieves height of global nav when scrolling to a field in advanced settings Removed a tag from solution panel title Apply a11y feedback Updated snapshots Added proptypes Updated chrome ui header snapshots Fixed manage data tests

layout tweaks, responsive styles

0059f80

ryankeairns requested a review from a team as a code owner July 22, 2020 19:29

ryankeairns requested review from cqliu1 and MichaelMarcialis July 22, 2020 19:29

ryankeairns added the REASSIGN from Team:Core UI Deprecated label for old Core UI team label Jul 22, 2020

MichaelMarcialis reviewed Jul 23, 2020

View reviewed changes

ryankeairns added 2 commits July 27, 2020 11:18

address feedback, improve bg color setup

a8459f0

use EUI var for header height

97cf47d

MichaelMarcialis approved these changes Jul 27, 2020

View reviewed changes

cqliu1 merged commit 1e1ed92 into elastic:elastic-home-page Jul 27, 2020

cqliu1 pushed a commit that referenced this pull request Jul 28, 2020

Design PR: layout tweaks, responsive styles (#72944)

338f385

* layout tweaks, responsive styles * address feedback, improve bg color setup * use EUI var for header height

cqliu1 pushed a commit that referenced this pull request Aug 4, 2020

Design PR: layout tweaks, responsive styles (#72944)

efe73b7

* layout tweaks, responsive styles * address feedback, improve bg color setup * use EUI var for header height

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design PR: layout tweaks, responsive styles #72944

Design PR: layout tweaks, responsive styles #72944

ryankeairns commented Jul 22, 2020 •

edited

Loading

elasticmachine commented Jul 22, 2020

MichaelMarcialis left a comment

MichaelMarcialis Jul 23, 2020

ryankeairns Jul 27, 2020 •

edited

Loading

MichaelMarcialis Jul 23, 2020

ryankeairns Jul 27, 2020

MichaelMarcialis Jul 23, 2020

ryankeairns Jul 27, 2020

kibanamachine commented Jul 27, 2020

Standard Out

Stack Trace

Standard Out

Stack Trace

Standard Out

Stack Trace

MichaelMarcialis left a comment

Design PR: layout tweaks, responsive styles #72944

Design PR: layout tweaks, responsive styles #72944

Conversation

ryankeairns commented Jul 22, 2020 • edited Loading

elasticmachine commented Jul 22, 2020

MichaelMarcialis left a comment

Choose a reason for hiding this comment

MichaelMarcialis Jul 23, 2020

Choose a reason for hiding this comment

ryankeairns Jul 27, 2020 • edited Loading

Choose a reason for hiding this comment

MichaelMarcialis Jul 23, 2020

Choose a reason for hiding this comment

ryankeairns Jul 27, 2020

Choose a reason for hiding this comment

MichaelMarcialis Jul 23, 2020

Choose a reason for hiding this comment

ryankeairns Jul 27, 2020

Choose a reason for hiding this comment

kibanamachine commented Jul 27, 2020

💔 Build Failed

Failed CI Steps

Test Failures

Standard Out

Stack Trace

Standard Out

Stack Trace

Standard Out

Stack Trace

Build metrics

async chunks size

History

MichaelMarcialis left a comment

Choose a reason for hiding this comment

ryankeairns commented Jul 22, 2020 •

edited

Loading

ryankeairns Jul 27, 2020 •

edited

Loading