Merge branch 'master' of github.com:elastic/kibana into pr/82545

Author: Liza K

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchbar.md

@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
-    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
+SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "intl" | "indexPatterns" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "isLoading" | "filters" | "indexPatterns" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
+    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "intl" | "indexPatterns" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
 }
 ```

docs/development/plugins/data/server/kibana-plugin-plugins-data-server.search.md

@@ -34,6 +34,7 @@ search: {
         siblingPipelineType: string;
         termsAggFilter: string[];
         toAbsoluteDates: typeof toAbsoluteDates;
+        calcAutoIntervalLessThan: typeof calcAutoIntervalLessThan;
     };
     getRequestInspectorStats: typeof getRequestInspectorStats;
     getResponseInspectorStats: typeof getResponseInspectorStats;

docs/user/dashboard/tutorials.asciidoc

@@ -76,8 +76,6 @@ Now that you've created your *Lens* visualization, add it to a <<dashboard,dashb
 [[vega-lite-tutorial-create-your-first-visualizations]]
 === Create your first visualization with Vega-Lite
 
-experimental[]
-
 In this tutorial, you will learn about how to edit Vega-Lite in {kib} to create
 a stacked area chart from an {es} search query. It will give you a starting point
 for a more comprehensive
@@ -88,7 +86,7 @@ In this tutorial, you will build a stacked area chart from one of the {kib} samp
 sets.
 
 [role="screenshot"]
-image::visualize/images/vega_lite_tutorial_1.png[]
+image::visualize/images/vega_lite_tutorial_1.png[Vega-Lite tutorial stacked area chart]
 
 Before beginning this tutorial, install the <<add-sample-data, eCommerce sample data>>
 set.
@@ -98,7 +96,7 @@ line chart which shows the total number of documents across all your indices
 within the time range.
 
 [role="screenshot"]
-image::visualize/images/vega_lite_default.png[]
+image::visualize/images/vega_lite_default.png[Vega-Lite tutorial default visualization]
 
 The text editor contains a Vega-Lite spec written in https://hjson.github.io/[HJSON],
 which is similar to JSON but optimized for human editing. HJSON supports:
@@ -134,7 +132,7 @@ Click "Update". The result is probably not what you expect. You should see a fla
 line with 0 results.
 
 You've only changed the index, so the difference must be the query is returning
-no results. You can try the <<vega-browser-debugging-console, Vega debugging process>>,
+no results. You can try the <<vega-debugging, Vega debugging process>>,
 but intuition may be faster for this particular problem.
 
 In this case, the problem is that you are querying the field `@timestamp`,
@@ -332,38 +330,29 @@ your spec:
 
 If you copy and paste that into your Vega-Lite spec, and click "Update",
 you will see a warning saying `Infinite extent for field "key": [Infinity, -Infinity]`.
-Let's use our <<vega-browser-debugging-console, Vega debugging skills>> to understand why.
+Let's use our <<vega-inspector, Vega debugging skills>> to understand why.
 
 Vega-Lite generates data using the names `source_0` and `data_0`. `source_0` contains
 the results from the {es} query, and `data_0` contains the visually encoded results
 which are shown in the chart. To debug this problem, you need to compare both.
 
-To look at the source, open the browser dev tools console and type
-`VEGA_DEBUG.view.data('source_0')`. You will see:
+To inspect data sets, go to *Inspect* and select *View: Vega debug*. You will see a menu with different data sources:
 
-```js
-[{
-  doc_count: 454
-  key: "Men's Clothing"
-  time_buckets: {buckets: Array(57)}
-  Symbol(vega_id): 12822
-}, ...]
-```
+[role="screenshot"]
+image::visualize/images/vega_lite_tutorial_3.png[Data set selector showing root, source_0, data_0, and marks]
 
-To compare to the visually encoded data, open the browser dev tools console and type
-`VEGA_DEBUG.view.data('data_0')`. You will see:
+To look closer at the raw data in Vega, select the option for `source_0` in the dropdown:
 
-```js
-[{
-  doc_count: 454
-  key: NaN
-  time_buckets: {buckets: Array(57)}
-  Symbol(vega_id): 13879
-}]
-```
+[role="screenshot"]
+image::visualize/images/vega_lite_tutorial_4.png[Table for data_0 with columns key, doc_count and array of time_buckets]
+
+To compare to the visually encoded data, change the dropdown selection to `data_0`. You will see:
+
+[role="screenshot"]
+image::visualize/images/vega_lite_tutorial_5.png[Table for data_0 where the key is NaN instead of a string]
 
 The issue seems to be that the `key` property is not being converted the right way,
-which makes sense because the `key` is now `Men's Clothing` instead of a timestamp.
+which makes sense because the `key` is now category (`Men's Clothing`, `Women's Clothing`, etc.) instead of a timestamp.
 
 To fix this, try updating the `encoding` of your Vega-Lite spec to:
 
@@ -382,21 +371,13 @@ To fix this, try updating the `encoding` of your Vega-Lite spec to:
   }
 ```
 
-This will show more errors, and you can inspect `VEGA_DEBUG.view.data('data_0')` to
+This will show more errors, so you need to debug. Click *Inspect*, switch the view to *Vega Debug*, and switch to look at the visually encoded data in `data_0` to
 understand why. This now shows:
 
-```js
-[{
-  doc_count: 454
-  key: "Men's Clothing"
-  time_buckets: {buckets: Array(57)}
-  time_buckets.buckets.doc_count: undefined
-  time_buckets.buckets.key: null
-  Symbol(vega_id): 14094
-}]
-```
+[role="screenshot"]
+image::visualize/images/vega_lite_tutorial_6.png[Table for data_0 showing that the column time_buckets.buckets.key is undefined]
 
-It looks like the problem is that the `time_buckets` inner array is not being
+It looks like the problem is that the `time_buckets.buckets` inner array is not being
 extracted by Vega. The solution is to use a Vega-lite
 https://vega.github.io/vega-lite/docs/flatten.html[flatten transformation], available in {kib} 7.9 and later.
 If using an older version of Kibana, the flatten transformation is available in Vega
@@ -411,23 +392,10 @@ Add this section in between the `data` and `encoding` section:
 ```
 
 This does not yet produce the results you expect. Inspect the transformed data
-by typing `VEGA_DEBUG.view.data('data_0')` into the console again:
+by selecting `data_0` in *Data sets* again:
 
-```js
-[{
-  doc_count: 453
-  key: "Men's Clothing"
-  time_bucket.buckets.doc_count: undefined
-  time_buckets: {buckets: Array(57)}
-  time_buckets.buckets: {
-    key_as_string: "2020-06-30T15:00:00.000Z",
-    key: 1593529200000,
-    doc_count: 2
-  }
-  time_buckets.buckets.key: null
-  Symbol(vega_id): 21564
-}]
-```
+[role="screenshot"]
+image::visualize/images/vega_lite_tutorial_7.png[Table showing data_0 with multiple pages of results, but undefined values in the column time_buckets.buckets.key]
 
 The debug view shows `undefined` values where you would expect to see numbers, and
 the cause is that there are duplicate names which are confusing Vega-Lite. This can
@@ -564,7 +532,9 @@ Now that you've enabled a selection, try moving the mouse around the visualizati
 and seeing the points respond to the nearest position:
 
 [role="screenshot"]
-image::visualize/images/vega_lite_tutorial_2.png[]
+image::visualize/images/vega_lite_tutorial_2.png[Vega-Lite tutorial selection enabled]
+
+The selection is controlled by a Vega signal, and can be viewed using the <<vega-inspector, Vega Inspector>>.
 
 The final result of this tutorial is this spec:
 
@@ -683,8 +653,6 @@ The final result of this tutorial is this spec:
 [[vega-tutorial-update-kibana-filters-from-vega]]
 === Update {kib} filters from Vega
 
-experimental[]
-
 In this tutorial you will build an area chart in Vega using an {es} search query,
 and add a click handler and drag handler to update {kib} filters.
 This tutorial is not a full https://vega.github.io/vega/tutorials/[Vega tutorial],
@@ -935,6 +903,7 @@ The first step is to add a new `signal` to track the X position of the cursor:
       }]
     }
 ```
+To learn more about inspecting signals, explore the <<vega-inspector, Vega Inspector>>.
 
 Now add a new `mark` to indicate the current cursor position:
 
@@ -1756,4 +1725,4 @@ Customize and format the visualization using functions:
 image::images/timelion-conditional04.png[]
 {nbsp}
 
-For additional information on Timelion conditional capabilities, go to https://www.elastic.co/blog/timeseries-if-then-else-with-timelion[I have but one .condition()].
+For additional information on Timelion conditional capabilities, go to https://www.elastic.co/blog/timeseries-if-then-else-with-timelion[I have but one .condition()].

docs/visualize/images/vega_lite_tutorial_3.png

@@ -95,7 +95,7 @@
     "**/prismjs": "1.22.0",
     "**/request": "^2.88.2",
     "**/trim": "0.0.3",
-    "**/typescript": "4.0.2"
+    "**/typescript": "4.1.2"
   },
   "engines": {
     "node": "12.19.1",
@@ -654,7 +654,7 @@
     "file-loader": "^4.2.0",
     "file-saver": "^1.3.8",
     "formsy-react": "^1.1.5",
-    "geckodriver": "^1.20.0",
+    "geckodriver": "^1.21.0",
     "glob-watcher": "5.0.3",
     "graphql-code-generator": "^0.18.2",
     "graphql-codegen-add": "^0.18.2",
@@ -827,7 +827,7 @@
     "topojson-client": "3.0.0",
     "ts-loader": "^7.0.5",
     "tsd": "^0.13.1",
-    "typescript": "4.0.2",
+    "typescript": "4.1.2",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.1",
     "unlazy-loader": "^0.1.3",

docs/visualize/images/vega_lite_tutorial_4.png

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@kbn/dev-utils": "link:../kbn-dev-utils",
-    "@kbn/test": "link:../kbn-test"
+    "@kbn/test": "link:../kbn-test",
+    "@kbn/utils": "link:../kbn-utils"
   }
 }