[Core UI] Home Page Redesign Class & Style Tweaks #74037

MichaelMarcialis · 2020-08-01T01:06:14Z

Summary

Hey, @cqliu1! Here's my stab at classing the solution panels like we were discussing earlier. Made a few additional tweaks while I was poking around, as well. Whenever you have a moment, take a peek and let me know if you have any questions/suggestions. Changes include:

Updating all of the homSolutionsSection related classes.
Switching the color-based classing of the solution panels to solution-based classing by repurposing the id prop.
Utilize EUI color variables to allow the solution panels to honor light and dark modes, rather than color being static.
General SCSS clean up.

Also, I had a general question regarding the current use of a button element on the solution panels to link to the landing pages. Does it absolutely need to be a button? Semantically speaking, I'm thinking an a element might be more appropriate. Also, switching to an a element avoids rendering invalid HTML (which is currently happening because of the use of divs and such as children of the button element). Thoughts?

Parent Issue: #70571

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 (elastic#72481)

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

…nent

…catalogue [Design PR] Card images as backgrounds, consolidate styles, BEM changes

elasticmachine · 2020-08-01T01:06:17Z

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

ryankeairns

Thanks for cleaning things up. All the additional flex work and class changes are good with me. As you'll see in the comments, there are two main threads I think we need to discuss further:

Whether to treat the solution cards more like branded elements (i.e. not switching between light/dark mode)
Keeping the home page agnostic / not hard coding solution id's. Instead, having the solution plugin register content to the home page and using a more generic styling mechanism.

ryankeairns · 2020-08-03T14:34:55Z

src/plugins/home/public/application/components/solutions_section/solution_panel.tsx

      <EuiPanel
        paddingSize="none"
-        className="homSolutionsSection__panel"
+        className={`homSolutionPanel  homSolutionPanel--${solution.id}`}


@cqliu1 should clarify, but there was feedback on the dev side that we should not hard code solution id's. Instead, the home page should remain agnostic while the plugins themselves push content into the home page.

As seen below, this results in the plugin registering a CSS class name which is unconventional, but allows us to push some complexity down the roadmap. In other words, we know this could be improved but we don't have a current need (nor do we anticipate any in the near team) for additional solutions to be added. At the point another solution or further content is needed, then we could improve upon the plugin registration format (i.e. use an enumerated prop instead of a class name).

Yeah, @cqliu1 and I spoke about the hard-coding of classes issue. I thought it was more the issue of hard-coding the solution classes (versus dynamically generating the classes, as I'm doing here by concatenating the solution.id prop to a class prefix string) was the issue. But perhaps I misunderstood the issue? If I have, then I'm not sure why classifying based on the content type (in this case, solution name) would be frowned upon if that is the case. Would it be possible to elaborate, assuming I've misunderstood?

Since all the home plugin code lives in OSS, we want to avoid hardcoding names or other things that refer to licensed features, which I would assume includes CSS selectors as well. Would it be possible to use generic selectors that weren't solution or color specific?

Forgive me, but I'm still struggling to understand why this approach would be frowned upon. For the OSS situation, since the solution panels wouldn't be rendered on the home page, wouldn't these classes be absent from the OSS version of Kibana? Or do you mean simply having those classes present in the SCSS/CSS is problematic (regardless if the elements with these classes are rendered)?

If I understand correctly, OSS code is rendering an element with a CSS class that is derived from the name of a solution that is registered via X-Pack. Is the CSS that applies to these CSS classes also in X-pack? If so, that seems reasonable. The only downside is that X-Pack will need to know the details of how these CSS classes are derived from the name of the solution, and this is somewhat brittle.

I ended up not needing to use DEFAULT_APP_CATEGORIES and found a way to refactor all of the home page redesign code without leaving any reference to features unavailable in OSS. These CSS classes are the only place where these solution IDs would appear. I was trying to avoid any mention of specific features/solutions in the home plugin code, but I don't feel that strongly against it if it's not a big deal to have solution specific selectors in Home plugin CSS files.

I ended up not needing to use DEFAULT_APP_CATEGORIES and found a way to refactor all of the home page redesign code without leaving any reference to features unavailable in OSS

That's great, and even better than I thought!! Given that, I think it makes sense to explore alternatives to hard-coding these solution specific styles in OSS. Ideally, OSS wouldn't know anything about X-Pack specific concerns. This ensures that we're creating OSS APIs in a truly extensible manner.

Just to make sure I understand, even though the only place that these solution-specific modifier classes would appear in the OSS version of Kibana is that one CSS file, we still wish to change them to no longer reference the solutions?

If so, anyone have any recommendations that aren't solution or style oriented?

I think this may circle back to what was previously in place and started this thread.

Say we have generic named classes that define several alternatives for card 'branding'. With those in place, the solution can define which brand it wants to follow. I realize this is all a little artificial feeling since solutions don't have defined brands afaik... although the solutions do have logos that we can lean on for color selection (as we've done already).

We could, in the future, expand this concept so that each solution plugin defines their brand settings in the plugin (register a brand color, namely). Catherine and I discussed this, but decided it was a bit much to bite off at the moment which is how we landed on the somewhat clunky class name approach. If it feels better, we could have each solution pass a brand color that is used for the header background color. In that case though, we might then need to do without the background images as that starts to get more complex and messy for this first version.

I'm not sure I've got a good alternative... I'll keep brainstorming, but let's go ahead and merge in these changes and leave the solution specific CSS selectors in there for now.

ryankeairns · 2020-08-03T14:35:49Z

src/plugins/home/public/plugin.ts

      path: '/app/dashboards',
      order: 400,
-      className: 'homSolutionsSection__blueCard',
    });


See comment above regarding why we likely need to keep this (or something similar to it).

My reasoning for changing this class (and similar classes) is because I'm attempting to avoid classifying elements based on the styles they will convey. Instead, I'm trying to classify elements based on their content and/or role. Doing so will prove more sustainable maintenance-wise.

For example, if we were to change the color of this element from blue to purple, we'd have to update both the CSS and the class name. With the class structure I'm proposing, we'd only have to update the CSS. Thoughts?

Let's get a better understanding of the id usage here. Generally speaking, I agree that putting the color in the class name is not great.

ryankeairns · 2020-08-03T14:35:58Z

x-pack/plugins/enterprise_search/public/plugin.ts

      path: '/app/enterprise_search/app_search', // TODO: update this link to enterprise search landing page
      order: 100,
-      className: 'homSolutionsSection__greenCard',
    });


See comment above regarding why we likely need to keep this (or something similar to it).

See my comment above as well :)

ryankeairns · 2020-08-03T14:36:04Z

x-pack/plugins/observability/public/plugin.ts

        path: '/app/observability',
        order: 200,
-        className: 'homSolutionsSection__magentaCard',
      });


See comment above regarding why we likely need to keep this (or something similar to it).

See my comment above as well :)

ryankeairns · 2020-08-03T14:36:09Z

x-pack/plugins/security_solution/public/plugin.tsx

        icon: APP_ICON,
        path: APP_OVERVIEW_PATH,
        order: 300,
-        className: 'homSolutionsSection__blackCard',


See comment above regarding why we likely need to keep this (or something similar to it).

See my comment above as well :)

ryankeairns · 2020-08-03T14:41:59Z

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

-    }
-  }
+.homSolutionPanel__icon {
+  background-color: $euiColorEmptyShade !important;


I'm thinking we should treat the card header designs more as branded elements meaning they don't change between light and dark themes. In the dark theme we do adjust colors for added contrast which then gets applied to buttons, icons, etc. In this case however, I feel this lightening leads to a less desirable visual treatment for the cards.

I'd like to hear other opinions, but I am in favor of treating the card headers more like brand elements - keeping the richer colors/not changing between themes/hard coding those values. This would include the background color, text color, and icon colors.

For those following along, this PR results in a dark mode that looks like:

Prior to this PR, it looks like:

cc:/ @alexfrancoeur

While I like the concept of considering these card "branded" to some degree, I do personally prefer the high contrast colored header areas that is provided by using the EUI color variables. I like the attention it demands and the resulting look is one that doesn't offend me. Perhaps the branding concept and changing the colors between light and dark themes need not be mutually exclusive?

It's subjective, I know, but on first sight I did not prefer the light shades of green and pink.

We're following the color variables religiously throughout Kibana - and for good reason - but this situation strikes me as a possible exception.

ryankeairns · 2020-08-03T14:44:59Z

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

-  .homSolutionsSection__multiple {
-    max-width: 50%;
+.homSolutionPanel__header {
+  background-color: $euiColorPrimary;


I won't pepper this on each related change, but see the comment above regarding the solution card header design.

Cool, left a comment above :)

…-class-tweaks # Conflicts: # src/plugins/advanced_settings/public/plugin.ts # src/plugins/home/public/application/components/__snapshots__/home.test.js.snap # src/plugins/home/public/application/components/_index.scss # src/plugins/home/public/application/components/add_data/add_data.tsx # src/plugins/home/public/application/components/change_home_route/__snapshots__/change_home_route.test.tsx.snap # src/plugins/home/public/application/components/change_home_route/change_home_route.test.tsx # src/plugins/home/public/application/components/change_home_route/change_home_route.tsx # src/plugins/home/public/application/components/home.js # src/plugins/home/public/application/components/home.test.js # src/plugins/home/public/application/components/manage_data/manage_data.tsx # src/plugins/home/public/plugin.ts # src/plugins/management/public/plugin.ts # src/plugins/saved_objects_management/public/plugin.ts # x-pack/plugins/apm/public/plugin.ts # x-pack/plugins/enterprise_search/public/plugin.ts # x-pack/plugins/infra/server/features.ts # x-pack/plugins/ingest_manager/kibana.json # x-pack/plugins/observability/public/plugin.ts # x-pack/plugins/painless_lab/public/plugin.tsx # x-pack/plugins/reporting/public/plugin.tsx # x-pack/plugins/searchprofiler/public/plugin.ts # x-pack/plugins/security_solution/public/plugin.tsx # x-pack/plugins/uptime/public/apps/plugin.ts

kibanamachine · 2020-08-05T21:02:18Z

💔 Build Failed

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

Failed CI Steps

Test Failures

"before all" hook for "navigates to the Overview page".Kibana navigation to all pages in the Security app "before all" hook for "navigates to the Overview page"

Link to Jenkins

Stack Trace

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

AssertionError: Timed out retrying: Expected to find content: 'Security' within the selector: 'a' but never did.

Because this error occurred during a `before all` hook we are skipping the remaining tests in the current suite: `Kibana navigation to all pa...`
    at Object.exports.loginAndWaitForPage (http://localhost:6111/__cypress/tests?p=cypress/integration/navigation.spec.ts:792:8)
    at Context.eval (http://localhost:6111/__cypress/tests?p=cypress/integration/navigation.spec.ts:642:17)

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:12:24]         └-: homepage app
[00:12:24]           └-> "before all" hook
[00:12:24]           └-> "before all" hook
[00:12:25]           └-: Kibana takes you home
[00:12:25]             └-> "before all" hook
[00:12:25]             └-> clicking on kibana logo should take you to home page
[00:12:25]               └-> "before each" hook: global before each
[00:12:25]               │ debg navigating to settings url: http://localhost:61141/app/management
[00:12:25]               │ debg navigate to: http://localhost:61141/app/management
[00:12:25]               │ debg browser[log] "^ A single error about an inline script not firing due to content security policy is expected!"
[00:12:25]               │ debg ... sleep(700) start
[00:12:26]               │ debg ... sleep(700) end
[00:12:26]               │ debg returned from get, calling refresh
[00:12:27]               │ debg browser[info] "INFO: 2020-08-05T21:40:17Z
[00:12:27]               │        Adding connection to http://localhost:61141/elasticsearch
[00:12:27]               │
[00:12:27]               │      "
[00:12:27]               │ERROR browser[error] (new TypeError("NetworkError when attempting to fetch resource.", ""))
[00:12:27]               │ debg browser[log] "^ A single error about an inline script not firing due to content security policy is expected!"
[00:12:27]               │ debg currentUrl = http://localhost:61141/app/management
[00:12:27]               │          appUrl = http://localhost:61141/app/management
[00:12:27]               │ debg TestSubjects.find(kibanaChrome)
[00:12:27]               │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:12:29]               │ debg browser[info] "INFO: 2020-08-05T21:40:20Z
[00:12:29]               │        Adding connection to http://localhost:61141/elasticsearch
[00:12:29]               │
[00:12:29]               │      "
[00:12:29]               │ debg ... sleep(501) start
[00:12:30]               │ debg ... sleep(501) end
[00:12:30]               │ debg in navigateTo url = http://localhost:61141/app/management
[00:12:30]               │ debg TestSubjects.exists(statusPageContainer)
[00:12:30]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="statusPageContainer"]') with timeout=2500
[00:12:32]               │ debg --- retry.tryForTime error: [data-test-subj="statusPageContainer"] is not displayed
[00:12:33]               │ debg TestSubjects.click(headerGlobalNav > logo)
[00:12:33]               │ debg Find.clickByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:12:33]               │ debg Find.findByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:12:33]               │ debg isGlobalLoadingIndicatorVisible
[00:12:33]               │ debg TestSubjects.exists(globalLoadingIndicator)
[00:12:33]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:12:33]               │ERROR browser[error] (new TypeError("this.renderFeatureCard is not a function", "http://localhost:61141/35454/bundles/plugin/home/home.chunk.2.js", 1))
[00:12:33]               │ERROR browser[error] (new TypeError("this.renderFeatureCard is not a function", "http://localhost:61141/35454/bundles/plugin/home/home.chunk.2.js", 1))
[00:12:34]               │ debg --- retry.tryForTime error: [data-test-subj="globalLoadingIndicator"] is not displayed
[00:12:35]               │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:12:35]               │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:12:35]               └- ✓ pass  (10.6s) "homepage app Kibana takes you home clicking on kibana logo should take you to home page"
[00:12:35]             └-> clicking on console on homepage should take you to console app
[00:12:35]               └-> "before each" hook: global before each
[00:12:35]               │ debg TestSubjects.click(homeSynopsisLinkconsole)
[00:12:35]               │ debg Find.clickByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:35]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:45]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:45]               │      Wait timed out after 10077ms
[00:12:46]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:12:56]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:12:56]               │      Wait timed out after 10014ms
[00:12:56]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:06]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:06]               │      Wait timed out after 10009ms
[00:13:07]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:17]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:17]               │      Wait timed out after 10015ms
[00:13:17]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:27]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:27]               │      Wait timed out after 10041ms
[00:13:28]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:38]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:38]               │      Wait timed out after 10016ms
[00:13:38]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:48]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:48]               │      Wait timed out after 10013ms
[00:13:49]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:59]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:13:59]               │      Wait timed out after 10008ms
[00:13:59]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:14:09]               │ debg --- retry.try failed again with the same message...
[00:14:10]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:14:20]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:14:20]               │      Wait timed out after 10006ms
[00:14:20]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:14:30]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:14:30]               │      Wait timed out after 10012ms
[00:14:31]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:14:41]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:14:41]               │      Wait timed out after 10005ms
[00:14:41]               │ info Taking screenshot "/dev/shm/workspace/parallel/14/kibana/test/functional/screenshots/failure/homepage app Kibana takes you home clicking on console on homepage should take you to console app.png"
[00:14:41]               │ info Current URL is: http://localhost:61141/app/home#/
[00:14:41]               │ info Saving page source to: /dev/shm/workspace/parallel/14/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:14:42]               └- ✖ fail: homepage app Kibana takes you home clicking on console on homepage should take you to console app
[00:14:42]               │      Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:14:42]               │ Wait timed out after 10005ms
[00:14:42]               │     at /dev/shm/workspace/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
[00:14:42]               │     at process._tickCallback (internal/process/next_tick.js:68:7)
[00:14:42]               │       at onFailure (test/common/services/retry/retry_for_success.ts:28:9)
[00:14:42]               │       at retryForSuccess (test/common/services/retry/retry_for_success.ts:68:13)
[00:14:42]               │ 
[00:14:42]               │

Stack Trace

Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
Wait timed out after 10005ms
    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)

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:12:17]         └-: homepage app
[00:12:17]           └-> "before all" hook
[00:12:17]           └-> "before all" hook
[00:12:17]           └-: Kibana takes you home
[00:12:17]             └-> "before all" hook
[00:12:17]             └-> clicking on kibana logo should take you to home page
[00:12:17]               └-> "before each" hook: global before each
[00:12:17]               │ debg navigating to settings url: http://localhost:61141/app/management
[00:12:17]               │ debg navigate to: http://localhost:61141/app/management
[00:12:18]               │ debg browser[log] "^ A single error about an inline script not firing due to content security policy is expected!"
[00:12:18]               │ debg ... sleep(700) start
[00:12:18]               │ debg ... sleep(700) end
[00:12:18]               │ debg returned from get, calling refresh
[00:12:19]               │ debg browser[info] "INFO: 2020-08-05T21:24:31Z
[00:12:19]               │        Adding connection to http://localhost:61141/elasticsearch
[00:12:19]               │
[00:12:19]               │      "
[00:12:20]               │ERROR browser[error] (new TypeError("NetworkError when attempting to fetch resource.", ""))
[00:12:20]               │ debg browser[log] "^ A single error about an inline script not firing due to content security policy is expected!"
[00:12:20]               │ debg currentUrl = http://localhost:61141/app/management
[00:12:20]               │          appUrl = http://localhost:61141/app/management
[00:12:20]               │ debg TestSubjects.find(kibanaChrome)
[00:12:20]               │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:12:22]               │ debg browser[info] "INFO: 2020-08-05T21:24:34Z
[00:12:22]               │        Adding connection to http://localhost:61141/elasticsearch
[00:12:22]               │
[00:12:22]               │      "
[00:12:23]               │ debg ... sleep(501) start
[00:12:23]               │ debg ... sleep(501) end
[00:12:23]               │ debg in navigateTo url = http://localhost:61141/app/management
[00:12:23]               │ debg TestSubjects.exists(statusPageContainer)
[00:12:23]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="statusPageContainer"]') with timeout=2500
[00:12:26]               │ debg --- retry.tryForTime error: [data-test-subj="statusPageContainer"] is not displayed
[00:12:26]               │ debg TestSubjects.click(headerGlobalNav > logo)
[00:12:26]               │ debg Find.clickByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:12:26]               │ debg Find.findByCssSelector('[data-test-subj="headerGlobalNav"] [data-test-subj="logo"]') with timeout=10000
[00:12:27]               │ debg isGlobalLoadingIndicatorVisible
[00:12:27]               │ debg TestSubjects.exists(globalLoadingIndicator)
[00:12:27]               │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:12:27]               │ERROR browser[error] (new TypeError("this.renderFeatureCard is not a function", "http://localhost:61141/35454/bundles/plugin/home/home.chunk.2.js", 1))
[00:12:27]               │ERROR browser[error] (new TypeError("this.renderFeatureCard is not a function", "http://localhost:61141/35454/bundles/plugin/home/home.chunk.2.js", 1))
[00:12:27]               │ debg --- retry.tryForTime error: [data-test-subj="globalLoadingIndicator"] is not displayed
[00:12:29]               │ debg --- retry.tryForTime failed again with the same message...
[00:12:29]               │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:12:29]               │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:12:29]               └- ✓ pass  (11.9s) "homepage app Kibana takes you home clicking on kibana logo should take you to home page"
[00:12:29]             └-> clicking on console on homepage should take you to console app
[00:12:29]               └-> "before each" hook: global before each
[00:12:29]               │ debg TestSubjects.click(homeSynopsisLinkconsole)
[00:12:29]               │ debg Find.clickByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[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 10046ms
[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 10008ms
[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 10010ms
[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 10011ms
[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 10013ms
[00:13:22]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:13:32]               │ debg --- retry.try failed again with the same message...
[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 10010ms
[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 10014ms
[00:13:53]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:14:03]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:14:03]               │      Wait timed out after 10015ms
[00:14:04]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:14:14]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:14:14]               │      Wait timed out after 10005ms
[00:14:15]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:14:25]               │ debg --- retry.try failed again with the same message...
[00:14:25]               │ debg Find.findByCssSelector('[data-test-subj="homeSynopsisLinkconsole"]') with timeout=10000
[00:14:35]               │ debg --- retry.try error: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:14:35]               │      Wait timed out after 10011ms
[00:14:36]               │ info Taking screenshot "/dev/shm/workspace/parallel/14/kibana/test/functional/screenshots/failure/homepage app Kibana takes you home clicking on console on homepage should take you to console app.png"
[00:14:36]               │ info Current URL is: http://localhost:61141/app/home#/
[00:14:36]               │ info Saving page source to: /dev/shm/workspace/parallel/14/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:14:36]               └- ✖ fail: homepage app Kibana takes you home clicking on console on homepage should take you to console app
[00:14:36]               │      Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
[00:14:36]               │ Wait timed out after 10011ms
[00:14:36]               │     at /dev/shm/workspace/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
[00:14:36]               │     at process._tickCallback (internal/process/next_tick.js:68:7)
[00:14:36]               │       at onFailure (test/common/services/retry/retry_for_success.ts:28:9)
[00:14:36]               │       at retryForSuccess (test/common/services/retry/retry_for_success.ts:68:13)
[00:14:36]               │ 
[00:14:36]               │

Stack Trace

Error: retry.try timeout: TimeoutError: Waiting for element to be located By(css selector, [data-test-subj="homeSynopsisLinkconsole"])
Wait timed out after 10011ms
    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 75 more failures, only showing the first 3.

Build metrics

async chunks size

id	value	diff	baseline
home	560.0KB	-4.8KB	564.7KB

page load bundle size

id	value	diff	baseline
enterpriseSearch	18.2KB	-43.0B	18.2KB
home	27.1KB	-42.0B	27.2KB
observability	49.4KB	-45.0B	49.5KB
securitySolution	806.2KB	-43.0B	806.3KB
total		-173.0B

History

💔 Build #65955 failed 7a309cf

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

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

cqliu1 and others added 29 commits July 27, 2020 20:12

Fixed home page header links spacing

4a5e35a

Hide solutions wrapper when no solutions are available

bb3bdd1

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

338f385

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

Fixed merge conflict

507656b

Fixed click handler for change home route button

65d3c1a

Updated app directory link

8ddb840

Moved app directory link from ChangeHomeRoute component to home compo…

a3df8c5

…nent

Updated tests

f73bbe3

Added FeatureCatalogueRegistryStart type

cf3f33d

BROKEN

0079a2e

Home page refactor

b54bcf1

Fixed prop types

5347be3

Fixed nav links

2d53520

Removed images from solution card components

dbd0e30

card images as backgrounds, consolidate styles, BEM changes

e1fc53a

style token icons for dark mode

d8136f6

fix page height

d904c20

Merge pull request elastic#12 from ryankeairns/home/refactor-feature-…

724f822

…catalogue [Design PR] Card images as backgrounds, consolidate styles, BEM changes

Updated home page feature order values

14e31b9

Added solutions registry to feature catalogue

fc15c55

Renamed solutions_panel to solutions_section

44bc29f

Updated copy

de161c5

changed .homSolutionsSection to .homSolutions

31cbc47

more class changes

5f7ec22

use app id for modifier class creation

b16e2e3

rm missed class

8027a18

clean up scss

2db6133

final clean up

7a309cf

MichaelMarcialis added the REASSIGN from Team:Core UI Deprecated label for old Core UI team label Aug 1, 2020

ryankeairns reviewed Aug 3, 2020

View reviewed changes

cqliu1 removed request for a team August 4, 2020 23:06

cqliu1 force-pushed the elastic-home-page branch from 3a841cb to 32c1448 Compare August 4, 2020 23:38

MichaelMarcialis requested review from a team as code owners August 4, 2020 23:38

MichaelMarcialis requested review from a team August 4, 2020 23:38

MichaelMarcialis requested review from a team as code owners August 4, 2020 23:38

MichaelMarcialis requested a review from a team August 4, 2020 23:38

MichaelMarcialis requested a review from a team as a code owner August 4, 2020 23:38

MichaelMarcialis added 2 commits August 5, 2020 15:58

correct merge conflict issues

d1f6013

cqliu1 merged commit 04233fc into elastic:elastic-home-page Aug 5, 2020

MichaelMarcialis deleted the hp-class-tweaks branch August 5, 2020 20:56

MichaelMarcialis mentioned this pull request Aug 11, 2020

[Home] Elastic home page redesign #70571

Merged

6 tasks

[Core UI] Home Page Redesign Class & Style Tweaks #74037

[Core UI] Home Page Redesign Class & Style Tweaks #74037

Uh oh!

Conversation

MichaelMarcialis commented Aug 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

elasticmachine commented Aug 1, 2020

Uh oh!

ryankeairns left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cqliu1 Aug 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MichaelMarcialis Aug 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns Aug 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns Aug 3, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns Aug 3, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Aug 5, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💔 Build Failed

Failed CI Steps

Stack Trace

Standard Out

Stack Trace

Standard Out

Stack Trace

MichaelMarcialis commented Aug 1, 2020 •

edited

Loading

cqliu1 Aug 4, 2020 •

edited

Loading

MichaelMarcialis Aug 5, 2020 •

edited

Loading

ryankeairns Aug 5, 2020 •

edited

Loading

ryankeairns Aug 3, 2020 •

edited

Loading

ryankeairns Aug 3, 2020 •

edited

Loading

kibanamachine commented Aug 5, 2020 •

edited

Loading