diff --git a/docs/canvas/canvas-edit-workpads.asciidoc b/docs/canvas/canvas-edit-workpads.asciidoc new file mode 100644 index 0000000000000..6ad2d89be4a42 --- /dev/null +++ b/docs/canvas/canvas-edit-workpads.asciidoc @@ -0,0 +1,136 @@ +[role="xpack"] +[[edit-workpads]] +== Edit workpads + +To create the look and feel that you want, apply format settings to the entire workpad, or individual elements. + +[float] +[[create-variables]] +=== Create variables + +When you frequently use copy and paste, create variables to easily reuse strings and patterns. For example, when you clone a large workpad and need to connect your elements to a new index, use variables to update +each element instead of updating them manually. + +. Create the variables. +.. Click *Add a variable*. +.. Specify the variable options, then click *Save changes*. + +. Apply the variable. +.. Copy the variable. +.. Select the element you want to change, then open the expression editor. +.. Paste the variable. + +For example, to change the index pattern for a set of charts: + +Specify the variable options. + +[role="screenshot"] +image::images/specify_variable_syntax.png[Image describing how to specify the variable syntax] + +Copy the variable, then apply it to each element you want to update in the *Expression editor*. + +[role="screenshot"] +image::images/copy_variable_syntax.png[Image demonstrating expression editor] + +[float] +[[apply-changes-to-the-entire-workpad]] +=== Apply changes to the entire workpad + +With stylesheets, you can change the look of the entire workpad, including fonts, colors, layout, and more. + +To get started, enter the changes you want to make in the *Global CSS overrides* text editor, then click *Apply stylesheet*. + +For example, to change the background for the entire workpad, enter: + +[source,text] +-------------------------------------------------- +.canvasPage { +background-color: #3990e6; +} +-------------------------------------------------- + +[float] +[[change-the-element-settings]] +=== Change the element settings + +Element settings enable you to change the display options at the element level. For example, use the element settings to change the dimensions, style, or location of an element. + +[float] +[[change-the-display-options]] +==== Change the display options + +Choose the display options for your elements. The options available depend on the element you select. + +To change the element display options, click *Display*, then make your changes in the editor. + +To use CSS overrides: + +. Click *+* next to *Element style*, then select *CSS*. +. In the *CSS* text editor, enter the changes you want to make, then click *Apply stylesheet*. + +For example, to center an element, enter: + +[source,text] +-------------------------------------------------- +.canvasRenderEl h1 { +text.align: center; +} +-------------------------------------------------- + +[float] +[[clone-elements]] +==== Clone elements +To use an element with the same functionality and appearance in multiple places, clone the element. + +Select the element, then click *Edit > Clone*. + +[role="screenshot"] +image::images/clone_element.gif[Image showing how to clone elements] + +[float] +[[move-and-resize-elements]] +==== Move and resize elements + +Canvas provides you with many options to move and resize the elements on your workpad. + +* To move elements, click and hold the element, then drag to the new location. + +* To move elements by 1 pixel, select the element, press and hold Shift, then use your arrow keys. + +* To move elements by 10 pixels, select the element, then use your arrow keys. + +* To resize elements, click and drag the resize handles to the new dimensions. + +[float] +[[edit-elements]] +==== Edit elements + +The element editing options allow you to arrange and organize the elements on your workpad page. + +To align two or more elements: + +. Press and hold Shift, then select the elements you want to align. + +. Click *Edit > Alignment*, then select the alignment option. + +To distribute three or more elements: + +. Press and hold Shift, then select the elements you want to distribute. + +. Click *Edit > Distribution*, then select the distribution option. + +To reorder elements: + +. Select the element you want to reorder. + +. Click *Edit > Order*, then select the order option. + +[float] +[[delete-elements]] +==== Delete elements + +When you no longer need an element, delete it from your workpad. + +. Select the element you want to delete. + +. Click *Edit > Delete*. diff --git a/docs/canvas/canvas-expression-lifecycle.asciidoc b/docs/canvas/canvas-expression-lifecycle.asciidoc index 895c1382c4d36..7d48c593f9e18 100644 --- a/docs/canvas/canvas-expression-lifecycle.asciidoc +++ b/docs/canvas/canvas-expression-lifecycle.asciidoc @@ -30,7 +30,7 @@ The filtered <> becomes the _context_ of the next functi Let’s look at another expression, which uses the same <> function, but instead produces a pie chart. -image::images/canvas-functions-can-take-arguments-pie-chart.png[Pie Chart, height=400] +image::images/canvas-functions-can-take-arguments-pie-chart.png[Pie chart showing output of demodata function] [source,text] ---- filters @@ -47,7 +47,7 @@ If the expression stopped there, it would produce a `pointseries` data type as t The end result is a simple pie chart that uses the default color palette, but the <> function can take additional arguments that control how it gets rendered. For example, you can provide a `hole` argument to turn your pie chart into a donut chart by changing the expression to: -image::images/canvas-functions-can-take-arguments-donut-chart.png[Donut Chart, height=400] +image::images/canvas-functions-can-take-arguments-donut-chart.png[Alternative output as donut chart] [source,text] ---- filters @@ -83,7 +83,7 @@ You can substitute one function for another to change the output. For example, y Let’s change that last pie chart into a bubble chart by replacing the <> function with the <> function. This is possible because both functions can accept a `pointseries` data type as their _context_. Switching the functions will work, but it won’t produce a useful visualization on its own since you don’t have the x-axis and y-axis defined. You will also need to modify the <> function to change its output. In this case, you can change the `size` argument to `y`, so the maximum price values are plotted on the y-axis, and add an `x` argument using the `@timestamp` field in the data to plot those values over time. This leaves you with the following expression and produces a bubble chart showing the max price of each state over time: -image::images/canvas-change-your-expression-chart.png[Bubble Chart, height=400] +image::images/canvas-change-your-expression-chart.png[Bubble Chart, with price along x axis, and time along y axis] [source,text] ---- filters @@ -95,7 +95,7 @@ filters Similar to the <> function, the <> function takes arguments that control the design elements of the visualization. As one example, passing a `legend` argument with a value of `false` to the function will hide the legend on the chart. -image::images/canvas-change-your-expression-chart-no-legend.png[Bubble Chart Without Legend, height=400] +image::images/canvas-change-your-expression-chart-no-legend.png[Bubble Chart Without Legend] [source,text,subs=+quotes] ---- filters diff --git a/docs/canvas/canvas-present-workpad.asciidoc b/docs/canvas/canvas-present-workpad.asciidoc index 9cd4ecc9519e1..824bc43f19e7b 100644 --- a/docs/canvas/canvas-present-workpad.asciidoc +++ b/docs/canvas/canvas-present-workpad.asciidoc @@ -4,6 +4,24 @@ When you are ready to present your workpad, use and enable the presentation options. +. Configure the autoplay options. + +.. From the workpad menu, click *View > Autoplay settings*. + +.. Under *Change cycling interval*, select the interval you want to use, or *Set a custom interval*. ++ +[role="screenshot"] +image::images/canvas-autoplay-interval.png[Element autoplay interval] + +. To enable autoplay, click *View > Turn autoplay on*. + +. To start your presentation, click *View > Enter fullscreen mode*. ++ +[role="screenshot"] +image::images/canvas-fullscreen.png[Image showing how to enter fullscreen mode from view dropdown] + +. When you are ready to exit fullscreen mode, press the Esc (Escape) key. + [float] [[view-fullscreen-mode]] ==== View your workpad in fullscreen mode @@ -11,7 +29,7 @@ When you are ready to present your workpad, use and enable the presentation opti Click the *Enter fullscreen mode* icon. [role="screenshot"] -image::images/canvas-fullscreen.png[Fullscreen mode] +image::images/canvas-zoom-controls.png[Zoom controls, also in view dropdown] [float] [[enable-autoplay]] diff --git a/docs/canvas/canvas-share-workpad.asciidoc b/docs/canvas/canvas-share-workpad.asciidoc index 5cae3fcc7b531..e824dfecf99cb 100644 --- a/docs/canvas/canvas-share-workpad.asciidoc +++ b/docs/canvas/canvas-share-workpad.asciidoc @@ -15,7 +15,7 @@ Create a JSON file of your workpad that you can export outside of {kib}. . Select *Download as JSON*. + [role="screenshot"] -image::images/canvas-export-workpad.png[Export single workpad] +image::images/canvas-export-workpad.png[Export single workpad through JSON, from Share dropdown] Want to export multiple workpads? Go to the *Canvas workpads* view, select the workpads you want to export, then click *Export*. @@ -32,7 +32,7 @@ For more information, refer to <> by entering -your search criteria in the Query bar. By default you can use Kibana's <> -which features autocomplete and a simple, easy to use syntax. Kibana's legacy query -language (based on Lucene https://lucene.apache.org/core/2_9_4/queryparsersyntax.html[query syntax]) -is still available for the time being under the options menu in the Query Bar. When this -legacy query language is selected, the full JSON-based {ref}/query-dsl.html[Elasticsearch Query DSL] -can also be used. - -When you submit a search request, the histogram, Documents table, and Fields -list are updated to reflect the search results. The total number of hits -(matching documents) is shown in the toolbar. The Documents table shows the -first five hundred hits. By default, the hits are listed in reverse -chronological order, with the newest documents shown first. You can reverse -the sort order by clicking the Time column header. You can also sort the table -by the values in any indexed field. For more information, see <>. - -To search your data, enter your search criteria in the Query bar and -press *Enter* or click *Search* image:images/search-button.jpg[] to submit -the request to Elasticsearch. +== Search data +Many Kibana apps embed a query bar for real-time search, including +*Discover* and *Dashboard*. + +[float] +=== Search your data + +To search the indices that match the current <>, +enter your search criteria in the query bar. By default, you'll use +{kib}'s <> (KQL), which +features autocomplete and a simple, easy-to-use syntax. If you prefer to use +{kib}'s legacy query +language, based on the +Lucene https://lucene.apache.org/core/2_9_4/queryparsersyntax.html[query syntax], +you can switch to it from the KQL popup in the query bar. When you enable the +legacy query language, you can use the full +JSON-based {ref}/query-dsl.html[Elasticsearch Query DSL]. + + +[float] +[[autorefresh]] +=== Refresh search results +As more documents are added to the indices you're searching, the search results +shown in *Discover*, and used to display visualizations, get stale. Using the +time filter, you can +configure a refresh interval to periodically resubmit your searches to +retrieve the latest results. + +[role="screenshot"] +image::images/autorefresh-interval.png[Image showing what refresh interval option looks like. The configurable time interval is located in the dropdown] + +You can also manually refresh the search results by +clicking the *Refresh* button. + +[float] +=== Searching large amounts of data + +Sometimes you want to search through large amounts of data no matter how long +the search takes. While this might not happen often, there are times +that long-running queries are required. Consider a threat hunting scenario +where you need to search through years of data. + +If you run a query, and the run time gets close to the +timeout, you're presented the option to ignore the timeout. This enables you to +run queries with large amounts of data to completion. + +By default, a query times out after 30 seconds. +The timeout is in place to avoid unintentional load on the cluster. include::kuery.asciidoc[] diff --git a/docs/discover/set-time-filter.asciidoc b/docs/discover/set-time-filter.asciidoc index c53850b38a2b0..c10ad9fce855a 100644 --- a/docs/discover/set-time-filter.asciidoc +++ b/docs/discover/set-time-filter.asciidoc @@ -14,7 +14,7 @@ range in the histogram. Use the time filter to change the time range. By default, the time filter is set to the last 15 minutes. -. Click image:images/time-filter-calendar.png[]. +. Click image:images/time-filter-calendar.png[Calendar icon]. . Choose one of the following: @@ -53,5 +53,4 @@ when you hover over a valid start point. * Click the dropdown, then select an interval. [role="screenshot"] -image::images/Histogram-Time.png[Time range selector in Histogram] - +image::images/Histogram-Time.png[Time range selector in Histogram dropdown] diff --git a/docs/discover/viewing-field-stats.asciidoc b/docs/discover/viewing-field-stats.asciidoc index 3631aba73fb20..8cd0c77fbcdcd 100644 --- a/docs/discover/viewing-field-stats.asciidoc +++ b/docs/discover/viewing-field-stats.asciidoc @@ -11,4 +11,4 @@ they are available in the side bar if you uncheck "Hide missing fields". To view field data statistics, click the name of a field in the fields list. -image:images/filter-field.png[Field Statistics,height=317] +image:images/filter-field.png[Fields list that displays the top five search results]