Skip to content

Commit

Permalink
Merge branch 'master' into cypress-cucumber
Browse files Browse the repository at this point in the history
  • Loading branch information
mdelapenya committed Feb 10, 2020
2 parents 031910e + 7f942e5 commit f7b5871
Show file tree
Hide file tree
Showing 230 changed files with 3,693 additions and 2,484 deletions.
18 changes: 18 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ A high level overview of our contributing guidelines.
- [Instrumenting with Elastic APM](#instrumenting-with-elastic-apm)
- [Debugging Unit Tests](#debugging-unit-tests)
- [Unit Testing Plugins](#unit-testing-plugins)
- [Automated Accessibility Testing](#automated-accessibility-testing)
- [Cross-browser compatibility](#cross-browser-compatibility)
- [Testing compatibility locally](#testing-compatibility-locally)
- [Running Browser Automation Tests](#running-browser-automation-tests)
Expand Down Expand Up @@ -553,6 +554,23 @@ yarn test:mocha
yarn test:browser --dev # remove the --dev flag to run them once and close
```

### Automated Accessibility Testing

To run the tests locally:

1. In one terminal window run `node scripts/functional_tests_server --config test/accessibility/config.ts`
2. In another terminal window run `node scripts/functional_test_runner.js --config test/accessibility/config.ts`

To run the x-pack tests, swap the config file out for `x-pack/test/accessibility/config.ts`.

After the server is up, you can go to this instance of Kibana at `localhost:5620`.

The testing is done using [axe](https://github.com/dequelabs/axe-core). The same thing that runs in CI,
can be run locally using their browser plugins:

- [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)
- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

### Cross-browser Compatibility

#### Testing Compatibility Locally
Expand Down
111 changes: 83 additions & 28 deletions STYLEGUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ recommended for the development of all Kibana plugins.
Besides the content in this style guide, the following style guides may also apply
to all development within the Kibana project. Please make sure to also read them:

- [Accessibility style guide](style_guides/accessibility_guide.md)
- [Accessibility style guide](https://elastic.github.io/eui/#/guidelines/accessibility)
- [SASS style guide](https://elastic.github.io/eui/#/guidelines/sass)

## General
Expand Down Expand Up @@ -45,10 +45,7 @@ This part contains style guide rules around general (framework agnostic) HTML us
Use camel case for the values of attributes such as `id` and `data-test-subj` selectors.

```html
<button
id="veryImportantButton"
data-test-subj="clickMeButton"
>
<button id="veryImportantButton" data-test-subj="clickMeButton">
Click me
</button>
```
Expand All @@ -74,6 +71,59 @@ It's important that when you write CSS/SASS selectors using classes, IDs, and at
capitalization in the CSS matches that used in the HTML. HTML and CSS follow different case sensitivity rules, and we can avoid subtle gotchas by ensuring we use the
same capitalization in both of them.
### How to generate ids?
When labeling elements (and for some other accessibility tasks) you will often need
ids. Ids must be unique within the page i.e. no duplicate ids in the rendered DOM
at any time.
Since we have some components that are used multiple times on the page, you must
make sure every instance of that component has a unique `id`. To make the generation
of those `id`s easier, you can use the `htmlIdGenerator` service in the `@elastic/eui`.
A React component could use it as follows:
```jsx
import { htmlIdGenerator } from '@elastic/eui';

render() {
// Create a new generator that will create ids deterministic
const htmlId = htmlIdGenerator();
return (<div>
<label htmlFor={htmlId('agg')}>Aggregation</label>
<input id={htmlId('agg')}/>
</div>);
}
```
Each id generator you create by calling `htmlIdGenerator()` will generate unique but
deterministic ids. As you can see in the above example, that single generator
created the same id in the label's `htmlFor` as well as the input's `id`.
A single generator instance will create the same id when passed the same argument
to the function multiple times. But two different generators will produce two different
ids for the same argument to the function, as you can see in the following example:
```js
const generatorOne = htmlIdGenerator();
const generatorTwo = htmlIdGenerator();

// Those statements are always true:
// Same generator
generatorOne('foo') === generatorOne('foo');
generatorOne('foo') !== generatorOne('bar');

// Different generator
generatorOne('foo') !== generatorTwo('foo');
```
This allows multiple instances of a single React component to now have different ids.
If you include the above React component multiple times in the same page,
each component instance will have a unique id, because each render method will use a different
id generator.
You can also use this service outside of React.
## API endpoints
The following style guide rules are targeting development of server side API endpoints.
Expand All @@ -90,7 +140,8 @@ API routes must start with the `/api/` path segment, and should be followed by t
Kibana uses `snake_case` for the entire API, just like Elasticsearch. All urls, paths, query string parameters, values, and bodies should be `snake_case` formatted.
*Right:*
_Right:_
```
POST /api/kibana/index_patterns
{
Expand All @@ -108,19 +159,19 @@ The following style guide rules apply for working with TypeScript/JavaScript fil
### TypeScript vs. JavaScript
Whenever possible, write code in TypeScript instead of JavaScript, especially if it's new code.
Whenever possible, write code in TypeScript instead of JavaScript, especially if it's new code.
Check out [TYPESCRIPT.md](TYPESCRIPT.md) for help with this process.
### Prefer modern JavaScript/TypeScript syntax
You should prefer modern language features in a lot of cases, e.g.:
* Prefer `class` over `prototype` inheritance
* Prefer arrow function over function expressions
* Prefer arrow function over storing `this` (no `const self = this;`)
* Prefer template strings over string concatenation
* Prefer the spread operator for copying arrays (`[...arr]`) over `arr.slice()`
* Use optional chaining (`?.`) and nullish Coalescing (`??`) over `lodash.get` (and similar utilities)
- Prefer `class` over `prototype` inheritance
- Prefer arrow function over function expressions
- Prefer arrow function over storing `this` (no `const self = this;`)
- Prefer template strings over string concatenation
- Prefer the spread operator for copying arrays (`[...arr]`) over `arr.slice()`
- Use optional chaining (`?.`) and nullish Coalescing (`??`) over `lodash.get` (and similar utilities)
### Avoid mutability and state
Expand All @@ -131,7 +182,7 @@ Instead, create new variables, and shallow copies of objects and arrays:
```js
// good
function addBar(foos, foo) {
const newFoo = {...foo, name: 'bar'};
const newFoo = { ...foo, name: 'bar' };
return [...foos, newFoo];
}

Expand Down Expand Up @@ -250,8 +301,8 @@ const second = arr[1];
### Magic numbers/strings
These are numbers (or other values) simply used in line in your code. *Do not
use these*, give them a variable name so they can be understood and changed
These are numbers (or other values) simply used in line in your code. _Do not
use these_, give them a variable name so they can be understood and changed
easily.
```js
Expand Down Expand Up @@ -325,19 +376,18 @@ import inSibling from '../foo/child';
Don't do this. Everything should be wrapped in a module that can be depended on
by other modules. Even things as simple as a single value should be a module.
### Only use ternary operators for small, simple code
And *never* use multiple ternaries together, because they make it more
And _never_ use multiple ternaries together, because they make it more
difficult to reason about how different values flow through the conditions
involved. Instead, structure the logic for maximum readability.
```js
// good, a situation where only 1 ternary is needed
const foo = (a === b) ? 1 : 2;
const foo = a === b ? 1 : 2;

// bad
const foo = (a === b) ? 1 : (a === c) ? 2 : 3;
const foo = a === b ? 1 : a === c ? 2 : 3;
```
### Use descriptive conditions
Expand Down Expand Up @@ -475,13 +525,12 @@ setTimeout(() => {
Use slashes for both single line and multi line comments. Try to write
comments that explain higher level mechanisms or clarify difficult
segments of your code. *Don't use comments to restate trivial things*.
segments of your code. _Don't use comments to restate trivial things_.
*Exception:* Comment blocks describing a function and its arguments
_Exception:_ Comment blocks describing a function and its arguments
(docblock) should start with `/**`, contain a single `*` at the beginning of
each line, and end with `*/`.
```js
// good

Expand Down Expand Up @@ -546,11 +595,17 @@ You can read more about these two ngReact methods [here](https://github.com/ngRe
Using `react-component` means adding a bunch of components into angular, while `reactDirective` keeps them isolated, and is also a more succinct syntax.
**Good:**
```html
<hello-component fname="person.fname" lname="person.lname" watch-depth="reference"></hello-component>
<hello-component
fname="person.fname"
lname="person.lname"
watch-depth="reference"
></hello-component>
```
**Bad:**
```html
<react-component name="HelloComponent" props="person" watch-depth="reference" />
```
Expand All @@ -564,9 +619,9 @@ Name action functions in the form of a strong verb and passed properties in the
<pagerButton onPageNext={action.turnToNextPage} />
```
## Attribution
## Attribution
Parts of the JavaScript style guide were initially forked from the
[node style guide](https://github.com/felixge/node-style-guide) created by [Felix Geisendörfer](http://felixge.de/) which is
licensed under the [CC BY-SA 3.0](http://creativecommons.org/licenses/by-sa/3.0/)
Parts of the JavaScript style guide were initially forked from the
[node style guide](https://github.com/felixge/node-style-guide) created by [Felix Geisendörfer](http://felixge.de/) which is
licensed under the [CC BY-SA 3.0](http://creativecommons.org/licenses/by-sa/3.0/)
license.
4 changes: 2 additions & 2 deletions docs/api/spaces-management/get_all.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,14 @@ The API returns the following:
"color": "#aabbcc",
"disabledFeatures": ["apm"],
"initials": "MK",
"imageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSU",
"imageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSU"
},
{
"id": "sales",
"name": "Sales",
"initials": "MK",
"disabledFeatures": ["discover", "timelion"],
"imageUrl": ""
},
}
]
--------------------------------------------------
39 changes: 39 additions & 0 deletions docs/apm/troubleshooting.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ your proposed changes at https://github.com/elastic/kibana.

Also check out the https://discuss.elastic.co/c/apm[APM discussion forum].

[[no-apm-data-found]]
==== No APM data found

This section can help with any of the following:
Expand Down Expand Up @@ -69,3 +70,41 @@ or because something is happening to the request that the Agent doesn't understa
To resolve this, you'll need to head over to the relevant {apm-agents-ref}[Agent documentation].
Specifically, view the Agent's supported technologies page.
You can also use the Agent's public API to manually set a name for the transaction.

==== Fields are not searchable

In Elasticsearch, index patterns are used to define settings and mappings that determine how fields should be analyzed.
The recommended index template file for APM Server is installed when Kibana starts.
This template defines which fields are available in Kibana for features like the Kuery bar,
or for linking to other plugins like Logs, Uptime, and Discover.

As an example, some agents store cookie values in `http.request.cookies`.
Since `http.request` has disabled dynamic indexing, and `http.request.cookies` is not declared in a custom mapping,
the values in `http.request.cookies` are not indexed and thus not searchable.

*Ensure an index pattern exists*
As a first step, you should ensure the correct index pattern exists.
In Kibana, navigate to *Management > Kibana > Index Patterns*.
In the pattern list, you should see an apm index pattern; The default is `apm-*`.
If you don't, the index pattern doesn't exist. See <<no-apm-data-found>> for information on how to fix this problem.

Selecting the `apm-*` index pattern shows a listing of every field defined in the pattern.

*Ensure a field is searchable*
There are two things you can do to if you'd like to ensure a field is searchable:

1. Index your additional data as {apm-overview-ref}/metadata.html[labels] instead.
These are dynamic by default, which means they will be indexed and become searchable and aggregatable.

2. Use the {apm-server-ref}/configuration-template.html[`append_fields`] feature. As an example,
adding the following to `apm-server.yml` will enable dynamic indexing for `http.request.cookies`:

[source,yml]
----
setup.template.enabled: true
setup.template.overwrite: true
setup.template.append_fields:
- name: http.request.cookies
type: object
dynamic: true
----
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ Constructs a new instance of the `SimpleSavedObject` class
<b>Signature:</b>

```typescript
constructor(client: SavedObjectsClient, { id, type, version, attributes, error, references, migrationVersion }: SavedObjectType<T>);
constructor(client: SavedObjectsClientContract, { id, type, version, attributes, error, references, migrationVersion }: SavedObjectType<T>);
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| client | <code>SavedObjectsClient</code> | |
| client | <code>SavedObjectsClientContract</code> | |
| { id, type, version, attributes, error, references, migrationVersion } | <code>SavedObjectType&lt;T&gt;</code> | |

47 changes: 47 additions & 0 deletions docs/settings/alert-action-settings.asciidoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
[role="xpack"]
[[alert-action-settings-kb]]
=== Alerting and action settings in Kibana
++++
<titleabbrev>Alerting and action settings</titleabbrev>
++++

Alerts and actions are enabled by default in {kib}, but require you configure the following in order to use them:

. <<using-kibana-with-security,Set up {kib} to work with {stack} {security-features}>>.
. <<configuring-tls-kib-es,Set up TLS encryption between {kib} and {es}>>.
. <<general-alert-action-settings,Specify a value for `xpack.encrypted_saved_objects.encryptionKey`>>.

You can configure the following settings in the `kibana.yml` file.


[float]
[[general-alert-action-settings]]
==== General settings

`xpack.encrypted_saved_objects.encryptionKey`::

A string of 32 or more characters used to encrypt sensitive properties on alerts and actions before they're stored in {es}. Third party credentials &mdash; such as the username and password used to connect to an SMTP service &mdash; are an example of encrypted properties.
+
If not set, {kib} will generate a random key on startup, but all alert and action functions will be blocked. Generated keys are not allowed for alerts and actions because when a new key is generated on restart, existing encrypted data becomes inaccessible. For the same reason, alerts and actions in high-availability deployments of {kib} will behave unexpectedly if the key isn't the same on all instances of {kib}.
+
Although the key can be specified in clear text in `kibana.yml`, it's recommended to store this key securely in the <<secure-settings,{kib} Keystore>>.

[float]
[[alert-settings]]
==== Action settings

`xpack.actions.whitelistedHosts`::
A list of hostnames that {kib} is allowed to connect to when built-in actions are triggered. It defaults to `[*]`, allowing any host, but keep in mind the potential for SSRF attacks when hosts are not explicitly whitelisted. An empty list `[]` can be used to block built-in actions from making any external connections.
+
Note that hosts associated with built-in actions, such as Slack and PagerDuty, are not automatically whitelisted. If you are not using the default `[*]` setting, you must ensure that the corresponding endpoints are whitelisted as well.

`xpack.actions.enabledActionTypes`::
A list of action types that are enabled. It defaults to `[*]`, enabling all types. The names for built-in {kib} action types are prefixed with a `.` and include: `.server-log`, `.slack`, `.email`, `.index`, `.pagerduty`, and `.webhook`. An empty list `[]` will disable all action types.
+
Disabled action types will not appear as an option when creating new connectors, but existing connectors and actions of that type will remain in {kib} and will not function.

[float]
[[action-settings]]
==== Alert settings

You do not need to configure any additional settings to use alerting in {kib}.
1 change: 1 addition & 0 deletions docs/settings/settings-xkb.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ include::{asciidoc-dir}/../../shared/settings.asciidoc[]

For more {kib} configuration settings, see <<settings>>.

include::alert-action-settings.asciidoc[]
include::apm-settings.asciidoc[]
include::dev-settings.asciidoc[]
include::graph-settings.asciidoc[]
Expand Down
11 changes: 1 addition & 10 deletions docs/setup/settings.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -457,16 +457,7 @@ Rollup user interface.

`i18n.locale`:: *Default: en* Set this value to change the Kibana interface language. Valid locales are: `en`, `zh-CN`, `ja-JP`.

`xpack.actions.enabledActionTypes:`:: *Default: +[ {asterisk} ]+* Set this value
to an array of action types that are enabled. An element of `*` indicates all
action types registered are enabled. The action types provided by Kibana are:
`.server-log`, `.slack`, `.email`, `.index`, `.pagerduty`, `.webhook`.

`xpack.actions.whitelistedHosts:`:: *Default: +[ {asterisk} ]+* Set this value
to an array of host names which actions such as email, slack, pagerduty, and
webhook can connect to. An element of `*` indicates any host can be connected
to. An empty array indicates no hosts can be connected to.

include::{docdir}/settings/alert-action-settings.asciidoc[]
include::{docdir}/settings/apm-settings.asciidoc[]
include::{docdir}/settings/dev-settings.asciidoc[]
include::{docdir}/settings/graph-settings.asciidoc[]
Expand Down
Loading

0 comments on commit f7b5871

Please sign in to comment.