No description
Find a file
Andrew Goldstein 40147fa83f
[SIEM] Apply highlighting to the Timeline data providers drop area and flyout button (#45173)
## Summary

To indicate they accept droppable data providers, this PR applies highlighting to the Timeline flyout badge and data providers drop area.

Tested in dark and light mode in:
- Chrome `76.0.3809.132`
- Firefox `69.0`
- Safari `12.1.2`

## Timeline data providers (drop area) highlighting behavior

- While a data provider is being dragged, in a page or from within the timeline itself, apply `euiColorSuccess` to the timeline data providers drop area's dashed borders and "plain" text, but NOT to the other primitives, i.e. data provider badges, `AND` / `OR` circular badges, lines, etc  
- While a data provider is being dragged, in a page or from within the timeline itself, but NOT hovering over the data providers drop area, apply the `euiColorSuccess` color with `10%` alpha channel to the background of the data providers drop area
- While a data provider is being dragged over the drop target area inside the data providers drop zone, apply the `euiColorSuccess` color with `20%` alpha channel to the background of the data providers drop area
- While a data provider is being dragged over the drop target area inside the data providers drop zone that will add the data provider as an `AND` clause, apply `euiColorSuccess` color to the dashed border, and fill the background with the `euiColorSuccess` color with `30%` alpha channel to the background of the data providers drop area
- Do NOT apply highlighting styles when a column or field (non-data provider) is dragged from the timeline or the `Events` widget

### Dark mode

![timeline-highlighting-dark](https://user-images.githubusercontent.com/4459398/64755303-ebcb1680-d4e7-11e9-8452-0f91ddae85d1.gif)

### Light mode

![timeline-highlighting-light](https://user-images.githubusercontent.com/4459398/64755318-fc7b8c80-d4e7-11e9-8621-a7eb918468aa.gif)

## Flyout button highlighting behavior

- The (default) timeline flyout button is styled as non-filled EUI button
- The button text reads `Timeline ^` (with a trailing caret), instead of `T I M E L I N E`
- Hovering over the flyout button while NOT dragging underlines the flyout button text, but does not fill the background
- When a user starts dragging a data provider, apply `euiColorSuccess` to all visible flyout button properties (e.g. border, text)
- While a data provider is being dragged, in a page or from within the timeline itself, but NOT hovering over the flyout, apply the `euiColorSuccess` color with `10%` alpha channel to the background of the flyout button
- While a data provider is being dragged, in a page or from within the timeline itself, AND hovering over the flyout such that it's in a droppable state, apply the `euiColorSuccess` color with `20%` alpha channel to the background of the flyout button
- While a data provider is being dragged, in a page or from within the timeline itself, AND hovering over the flyout such that it's in a droppable state, replace the `Timeline ^` with a circle containing a `+` plus sign
- Apply `EuiNotificationBadge` styling to the data providers badge count, and position it in the upper left-hand corner
- Do NOT apply highlighting styles when a column or field (non-data provider) is dragged from the timeline or the `Events` widget

### Dark mode

![timeline-badge-dark](https://user-images.githubusercontent.com/4459398/64755512-5ed48d00-d4e8-11e9-9be2-02da70ac4e16.gif)

### Light mode

![timeline-badge-light](https://user-images.githubusercontent.com/4459398/64755531-7449b700-d4e8-11e9-9239-62ee78a6e652.gif)

Resolves https://github.com/elastic/siem-team/issues/457
2019-09-12 01:04:20 -06:00
.ci Revert "Revert "Revert "Revert "[ci] compress jobs for CI stab… (#45454) 2019-09-11 15:27:43 -07:00
.github Move base feature controls functionality from XPack Main plugin to a dedicated XPack Features plugin (#44664) 2019-09-09 19:15:58 +02:00
bin Update node options Initialization on our scripts (#40302) 2019-08-15 16:09:22 +01:00
common/graphql
config
data
docs [DOCS] Updates Saved objects docs (#45310) 2019-09-11 14:45:43 -07:00
licenses
packages [Plugin Generator] Enhance Integration Test (#45401) 2019-09-11 15:10:47 -06:00
rfcs Add ApplicationService Mounting (#41007) 2019-09-03 13:03:05 -05:00
scripts [Plugin Generator] Add integration test (#43219) 2019-09-06 13:10:47 -06:00
src remove unused properties and duplicated operations (#45347) 2019-09-11 21:28:00 +02:00
style_guides
tasks Jenkins pipeline with parallel cigroups (#45285) 2019-09-11 11:58:28 -07:00
test Revert "Revert "Revert "Revert "[ci] compress jobs for CI stab… (#45454) 2019-09-11 15:27:43 -07:00
typings Upgrade EUI to 13.8.1 (#45052) 2019-09-11 10:03:02 -05:00
utilities
webpackShims
x-pack [SIEM] Apply highlighting to the Timeline data providers drop area and flyout button (#45173) 2019-09-12 01:04:20 -06:00
.backportrc.json [backport-config] Adds 7.4 branch (#44402) 2019-08-29 10:08:19 -07:00
.browserslistrc
.editorconfig
.eslintignore move optimize into data folder (#25944) 2019-08-28 10:09:58 -05:00
.eslintrc.js mark eslint config as root (#44699) 2019-09-03 13:57:09 -07:00
.gitattributes
.gitignore gitignore legacy optimize directory (#44314) 2019-08-28 15:01:24 -04:00
.i18nrc.json [TSVB] (Step 2) Shim new platform - renaming tsvb -> vis_type_timeseries (#44981) 2019-09-09 17:43:05 +03:00
.node-version
.nvmrc
.prettierrc
.sass-lint.yml nit: Format sass-lint (#44432) 2019-08-29 18:56:53 -04:00
.yarnrc
CONTRIBUTING.md
FAQ.md
github_checks_reporter.json
Gruntfile.js
Jenkinsfile Revert "Revert "Revert "Revert "[ci] compress jobs for CI stab… (#45454) 2019-09-11 15:27:43 -07:00
kibana.d.ts
LICENSE.txt
NOTICE.txt [Maps] Load Maki icons from spritesheet (#42499) 2019-08-06 13:32:04 -07:00
package.json Update dependencies (#45133) 2019-09-11 21:39:13 +02:00
preinstall_check.js
README.md
renovate.json5 Add ApplicationService Mounting (#41007) 2019-09-03 13:03:05 -05:00
STYLEGUIDE.md
tsconfig.browser.json
tsconfig.json Update babel related packages (#43595) 2019-08-22 18:40:57 -07:00
tsconfig.types.json
TYPESCRIPT.md
yarn.lock Update dependencies (#45133) 2019-09-11 21:39:13 +02:00

Kibana

Kibana is your window into the Elastic Stack. Specifically, it's a browser-based analytics and search dashboard for Elasticsearch.

Getting Started

If you just want to try Kibana out, check out the Elastic Stack Getting Started Page to give it a whirl.

If you're interested in diving a bit deeper and getting a taste of Kibana's capabilities, head over to the Kibana Getting Started Page.

Using a Kibana Release

If you want to use a Kibana release in production, give it a test run, or just play around:

Building and Running Kibana, and/or Contributing Code

You might want to build Kibana locally to contribute some code, test out the latest features, or try out an open PR:

Documentation

Visit Elastic.co for the full Kibana documentation.

For information about building the documentation, see the README in elastic/docs.

Version Compatibility with Elasticsearch

Ideally, you should be running Elasticsearch and Kibana with matching version numbers. If your Elasticsearch has an older version number or a newer major number than Kibana, then Kibana will fail to run. If Elasticsearch has a newer minor or patch number than Kibana, then the Kibana Server will log a warning.

Note: The version numbers below are only examples, meant to illustrate the relationships between different types of version numbers.

Situation Example Kibana version Example ES version Outcome
Versions are the same. 5.1.2 5.1.2 💚 OK
ES patch number is newer. 5.1.2 5.1.5 ⚠️ Logged warning
ES minor number is newer. 5.1.2 5.5.0 ⚠️ Logged warning
ES major number is newer. 5.1.2 6.0.0 🚫 Fatal error
ES patch number is older. 5.1.2 5.1.0 ⚠️ Logged warning
ES minor number is older. 5.1.2 5.0.0 🚫 Fatal error
ES major number is older. 5.1.2 4.0.0 🚫 Fatal error

Questions? Problems? Suggestions?

  • If you've found a bug or want to request a feature, please create a GitHub Issue. Please check to make sure someone else hasn't already created an issue for the same topic.
  • Need help using Kibana? Ask away on our Kibana Discuss Forum and a fellow community member or Elastic engineer will be glad to help you out.