[App Search, Crawler] Fix validation step panel padding/whitespace

[orhantoy]

Summary

This PR fixes some padding/whitespace issues which I think was introduced as part of the EUI upgrade: #113633

Before:

After:

[kibanamachine]

💛 Build succeeded, but was flaky

• continuous-integration/kibana-ci/pull-request

• Commit: e8ebcdf

• Storybooks Preview

• Flaky suites:

  • xpack-kibana-ciGroup8

---

Test Failures

Kibana Pipeline / general / Performance Tests.x-pack/test/performance/tests/reporting_dashboard·ts.performance reporting dashbaord downloaded PDF has OK status

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has failed 3 times on tracked branches: https://github.com/elastic/kibana/issues/110470

[00:00:00]     │
[00:00:00]       └-: performance
[00:00:00]         └-> "before all" hook in "performance"
[00:00:00]         └-: reporting dashbaord
[00:00:00]           └-> "before all" hook for "downloaded PDF has OK status"
[00:00:00]           └-> "before all" hook for "downloaded PDF has OK status"
[00:00:00]             │ debg resolved import for x-pack/test/performance/kbn_archives/reporting_dashboard to /dev/shm/workspace/parallel/20/kibana/x-pack/test/performance/kbn_archives/reporting_dashboard.json
[00:00:00]             │ info importing 4 saved objects { space: undefined }
[00:00:00]             │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/5w5rzta-R6W90xV2heCAlw] update_mapping [_doc]
[00:00:00]             │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/5w5rzta-R6W90xV2heCAlw] update_mapping [_doc]
[00:00:00]             │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/5w5rzta-R6W90xV2heCAlw] update_mapping [_doc]
[00:00:00]             │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/5w5rzta-R6W90xV2heCAlw] update_mapping [_doc]
[00:00:00]             │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/5w5rzta-R6W90xV2heCAlw] update_mapping [_doc]
[00:00:00]             │ succ import success
[00:00:00]             │ info [x-pack/test/performance/es_archives/reporting_dashboard] Loading "mappings.json"
[00:00:00]             │ info [x-pack/test/performance/es_archives/reporting_dashboard] Loading "data.json.gz"
[00:00:00]             │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [foo] creating index, cause [api], templates [], shards [1]/[1]
[00:00:00]             │ info [x-pack/test/performance/es_archives/reporting_dashboard] Created index "foo"
[00:00:00]             │ debg [x-pack/test/performance/es_archives/reporting_dashboard] "foo" settings {"index":{"number_of_replicas":"1","number_of_shards":"1"}}
[00:00:03]             │ info [x-pack/test/performance/es_archives/reporting_dashboard] Indexed 10000 docs into "foo"
[00:00:03]           └-> downloaded PDF has OK status
[00:00:03]             └-> "before each" hook: global before each for "downloaded PDF has OK status"
[00:00:03]             │ debg navigating to dashboards url: http://localhost:61201/app/dashboards
[00:00:03]             │ debg navigate to: http://localhost:61201/app/dashboards
[00:00:03]             │ debg browser[INFO] http://localhost:61201/login?next=%2Fapp%2Fdashboards%3F_t%3D1634649410677 281 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:00:03]             │
[00:00:03]             │ debg browser[INFO] http://localhost:61201/bootstrap.js 41:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:03]             │ debg ... sleep(700) start
[00:00:04]             │ debg ... sleep(700) end
[00:00:04]             │ debg returned from get, calling refresh
[00:00:05]             │ debg browser[INFO] http://localhost:61201/login?next=%2Fapp%2Fdashboards%3F_t%3D1634649410677 281 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:00:05]             │
[00:00:05]             │ debg browser[INFO] http://localhost:61201/bootstrap.js 41:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:05]             │ debg currentUrl = http://localhost:61201/login?next=%2Fapp%2Fdashboards%3F_t%3D1634649410677
[00:00:05]             │          appUrl = http://localhost:61201/app/dashboards
[00:00:05]             │ debg TestSubjects.find(kibanaChrome)
[00:00:05]             │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:00:06]             │ debg Found login page
[00:00:06]             │ debg TestSubjects.setValue(loginUsername, test_user)
[00:00:06]             │ debg TestSubjects.click(loginUsername)
[00:00:06]             │ debg Find.clickByCssSelector('[data-test-subj="loginUsername"]') with timeout=10000
[00:00:06]             │ debg Find.findByCssSelector('[data-test-subj="loginUsername"]') with timeout=10000
[00:00:06]             │ warn browser[SEVERE] http://localhost:61201/api/licensing/info - Failed to load resource: the server responded with a status of 401 (Unauthorized)
[00:00:06]             │ debg TestSubjects.setValue(loginPassword, changeme)
[00:00:06]             │ debg TestSubjects.click(loginPassword)
[00:00:06]             │ debg Find.clickByCssSelector('[data-test-subj="loginPassword"]') with timeout=10000
[00:00:06]             │ debg Find.findByCssSelector('[data-test-subj="loginPassword"]') with timeout=10000
[00:00:06]             │ debg TestSubjects.click(loginSubmit)
[00:00:06]             │ debg Find.clickByCssSelector('[data-test-subj="loginSubmit"]') with timeout=10000
[00:00:06]             │ debg Find.findByCssSelector('[data-test-subj="loginSubmit"]') with timeout=10000
[00:00:06]             │ debg Find.waitForDeletedByCssSelector('.kibanaWelcomeLogo') with timeout=10000
[00:00:06]             │ proc [kibana] [2021-10-19T13:16:54.502+00:00][INFO ][plugins.security.routes] Logging in with provider "basic" (basic)
[00:00:07]             │ debg browser[INFO] http://localhost:61201/app/dashboards?_t=1634649410677 281 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:00:07]             │
[00:00:07]             │ debg browser[INFO] http://localhost:61201/bootstrap.js 41:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:07]             │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"]') with timeout=60000
[00:00:09]             │ debg Find.findByCssSelector('[data-test-subj="kibanaChrome"] nav:not(.ng-hide)') with timeout=60000
[00:00:10]             │ debg browser[INFO] http://localhost:61201/app/dashboards?_t=1634649417181 281 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:00:10]             │
[00:00:10]             │ debg browser[INFO] http://localhost:61201/bootstrap.js 41:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:10]             │ debg Finished login process currentUrl = http://localhost:61201/app/dashboards
[00:00:10]             │ debg ... sleep(501) start
[00:00:11]             │ debg ... sleep(501) end
[00:00:11]             │ debg in navigateTo url = http://localhost:61201/app/dashboards
[00:00:11]             │ debg Waiting up to 20000ms for dashboard landing page...
[00:00:11]             │ debg onDashboardLandingPage
[00:00:11]             │ debg TestSubjects.exists(dashboardLandingPage)
[00:00:11]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="dashboardLandingPage"]') with timeout=5000
[00:00:11]             │ debg Load Saved Dashboard dashboard
[00:00:11]             │ debg gotoDashboardLandingPage
[00:00:11]             │ debg onDashboardLandingPage
[00:00:11]             │ debg TestSubjects.exists(dashboardLandingPage)
[00:00:11]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="dashboardLandingPage"]') with timeout=5000
[00:00:11]             │ debg searchForItemWithName: dashboard
[00:00:11]             │ debg TestSubjects.find(tableListSearchBox)
[00:00:11]             │ debg Find.findByCssSelector('[data-test-subj="tableListSearchBox"]') with timeout=10000
[00:00:12]             │ debg isGlobalLoadingIndicatorVisible
[00:00:12]             │ debg TestSubjects.exists(globalLoadingIndicator)
[00:00:12]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:00:12]             │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:00:12]             │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:00:14]             │ debg TestSubjects.click(dashboardListingTitleLink-dashboard)
[00:00:14]             │ debg Find.clickByCssSelector('[data-test-subj="dashboardListingTitleLink-dashboard"]') with timeout=10000
[00:00:14]             │ debg Find.findByCssSelector('[data-test-subj="dashboardListingTitleLink-dashboard"]') with timeout=10000
[00:00:14]             │ debg isGlobalLoadingIndicatorVisible
[00:00:14]             │ debg TestSubjects.exists(globalLoadingIndicator)
[00:00:14]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="globalLoadingIndicator"]') with timeout=1500
[00:00:14]             │ debg browser[INFO] http://localhost:61201/app/dashboards#/view/37b49c50-2dc6-11eb-8af3-cb3aa84dbabd?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now)) 281 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:00:14]             │
[00:00:14]             │ debg browser[INFO] http://localhost:61201/bootstrap.js 41:19 "^ A single error about an inline script not firing due to content security policy is expected!"
[00:00:16]             │ debg --- retry.tryForTime error: [data-test-subj="globalLoadingIndicator"] is not displayed
[00:00:16]             │ debg TestSubjects.exists(globalLoadingIndicator-hidden)
[00:00:16]             │ debg Find.existsByCssSelector('[data-test-subj="globalLoadingIndicator-hidden"]') with timeout=100000
[00:00:16]             │ debg TestSubjects.missingOrFail(dashboardLandingPage)
[00:00:16]             │ debg Find.waitForDeletedByCssSelector('[data-test-subj="dashboardLandingPage"]') with timeout=10000
[00:00:17]             │ debg openPdfReportingPanel
[00:00:17]             │ debg openShareMenuItem title:PDF Reports
[00:00:17]             │ debg TestSubjects.exists(shareContextMenu)
[00:00:17]             │ debg Find.existsByDisplayedByCssSelector('[data-test-subj="shareContextMenu"]') with timeout=2500
[00:00:17]             │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [.async-search] creating index, cause [auto(bulk api)], templates [], shards [1]/[0]
[00:00:20]             │ debg --- retry.tryForTime error: [data-test-subj="shareContextMenu"] is not displayed
[00:00:20]             │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/5w5rzta-R6W90xV2heCAlw] update_mapping [_doc]
[00:00:20]             │ debg TestSubjects.click(shareTopNavButton)
[00:00:20]             │ debg Find.clickByCssSelector('[data-test-subj="shareTopNavButton"]') with timeout=10000
[00:00:20]             │ debg Find.findByCssSelector('[data-test-subj="shareTopNavButton"]') with timeout=10000
[00:00:21]             │ debg Find.findByCssSelector('div.euiContextMenuPanel') with timeout=10000
[00:00:22]             │ debg TestSubjects.click(sharePanel-PDFReports)
[00:00:22]             │ debg Find.clickByCssSelector('[data-test-subj="sharePanel-PDFReports"]') with timeout=10000
[00:00:22]             │ debg Find.findByCssSelector('[data-test-subj="sharePanel-PDFReports"]') with timeout=10000
[00:00:22]             │ debg Find.waitForElementStale with timeout=10000
[00:00:23]             │ debg TestSubjects.click(generateReportButton)
[00:00:23]             │ debg Find.clickByCssSelector('[data-test-subj="generateReportButton"]') with timeout=10000
[00:00:23]             │ debg Find.findByCssSelector('[data-test-subj="generateReportButton"]') with timeout=10000
[00:00:23]             │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/5w5rzta-R6W90xV2heCAlw] update_mapping [_doc]
[00:00:24]             │ debg getReportURL
[00:00:24]             │ debg TestSubjects.getAttribute(downloadCompletedReportButton, href, tryTimeout=120000, findTimeout=60000)
[00:00:24]             │ debg TestSubjects.find(downloadCompletedReportButton)
[00:00:24]             │ debg Find.findByCssSelector('[data-test-subj="downloadCompletedReportButton"]') with timeout=60000
[00:01:25]             │ debg --- retry.tryForTime error: Waiting for element to be located By(css selector, [data-test-subj="downloadCompletedReportButton"])
[00:01:25]             │      Wait timed out after 61161ms
[00:01:25]             │ debg TestSubjects.find(downloadCompletedReportButton)
[00:01:25]             │ debg Find.findByCssSelector('[data-test-subj="downloadCompletedReportButton"]') with timeout=60000
[00:02:27]             │ debg --- retry.tryForTime error: Waiting for element to be located By(css selector, [data-test-subj="downloadCompletedReportButton"])
[00:02:27]             │      Wait timed out after 61257ms
[00:02:27]             │ debg Find.findByCssSelector('[data-test-errorText]') with timeout=10000
[00:02:37]             │ info Taking screenshot "/dev/shm/workspace/parallel/20/kibana/x-pack/test/functional/screenshots/failure/performance reporting dashbaord downloaded PDF has OK status.png"
[00:02:37]             │ info Current URL is: http://localhost:61201/app/dashboards#/view/37b49c50-2dc6-11eb-8af3-cb3aa84dbabd?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))
[00:02:37]             │ info Saving page source to: /dev/shm/workspace/parallel/20/kibana/x-pack/test/performance/failure_debug/html/performance reporting dashbaord downloaded PDF has OK status.html
[00:02:37]             └- ✖ fail: performance reporting dashbaord downloaded PDF has OK status
[00:02:37]             │      TimeoutError: Waiting for element to be located By(css selector, [data-test-errorText])
[00:02:37]             │ Wait timed out after 10057ms
[00:02:37]             │       at /dev/shm/workspace/parallel/20/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
[00:02:37]             │       at runMicrotasks (<anonymous>)
[00:02:37]             │       at processTicksAndRejections (node:internal/process/task_queues:96:5)
[00:02:37]             │ 
[00:02:37]             │ 

Stack Trace

TimeoutError: Waiting for element to be located By(css selector, [data-test-errorText])
Wait timed out after 10057ms
    at /dev/shm/workspace/parallel/20/kibana/node_modules/selenium-webdriver/lib/webdriver.js:842:17
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  remoteStacktrace: ''
}

---

Metrics [docs]

Async chunks

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

id	before	after	diff
enterpriseSearch	1.4MB	1.4MB	-27.0B

History

• 💔 Build #162618 failed 7b9ed68

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

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.