Skip to content

Commit

Permalink
[DOCS] Changed time picker to time filter (#46956) (#47523)
Browse files Browse the repository at this point in the history
* [DOCS] Changed time picker to time filter

* Final changes

* Review comments

* Review comments pt 2
  • Loading branch information
KOTungseth authored Oct 7, 2019
1 parent f36b3a1 commit 3fe9dcc
Show file tree
Hide file tree
Showing 13 changed files with 70 additions and 80 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ The list of common parameters:
- *responseHandler*: <string> one of the available response handlers or a <function> for a custom response handler
- *editor*: <string> one of the available editors or Editor class for custom one
- *editorConfig*: object holding editor parameters
- *options.showTimePicker*: <bool> show or hide time picker (defaults to true)
- *options.showTimePicker*: <bool> show or hide time filter (defaults to true)
- *options.showQueryBar*: <bool> show or hide query bar (defaults to true)
- *options.showFilterBar*: <bool> show or hide filter bar (defaults to true)
- *options.showIndexSelection*: <bool> show or hide index selection (defaults to true)
Expand Down Expand Up @@ -275,7 +275,7 @@ VisTypesRegistryProvider.register(MyNewVisType);
[[development-visualization-request-handlers]]
=== Visualization Request Handlers
Request handler gets called when one of the following keys on AppState change:
`vis`, `query`, `filters` or `uiState` and when timepicker is updated. On top
`vis`, `query`, `filters` or `uiState` and when the time filter is updated. On top
of that it will also get called on force refresh.

By default visualizations will use the `courier` request handler. They can also choose to use any of the other provided
Expand Down Expand Up @@ -417,7 +417,7 @@ The `vis` object holds the visualization state and is the window into kibana:
- *vis.getUiState()*: gets UI state of visualization
- *vis.uiStateVal(name, val)*: updates a property in UI state
- *vis.isEditorMode()*: returns true if in editor mode
- *vis.API.timeFilter*: allows you to access time picker
- *vis.API.timeFilter*: allows you to access time filter
- *vis.API.queryFilter*: gives you access to queryFilter
- *vis.API.events.click*: default click handler
- *vis.API.events.brush*: default brush handler
Expand All @@ -430,12 +430,12 @@ visualization's render method.
For the parameters that should not be saved with the visualization you should use the UI state.
These hold viewer-specific state, such as popup open/closed, custom colors applied to the series etc.

You can access filter bar and time picker through the objects defined on `vis.API`
You can access the filter bar and time filter through the objects defined on `vis.API`

[[development-vis-timefilter]]
==== timeFilter

Update the timefilter time values and call update() method on it to update time picker
Update the timefilter time values and call update() method on it to update the time filter

["source","js"]
-----------
Expand Down
19 changes: 0 additions & 19 deletions docs/discover/autorefresh.asciidoc

This file was deleted.

40 changes: 19 additions & 21 deletions docs/discover/search.asciidoc
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
[[search]]
== Searching Your Data
== Searching your data
You can search the indices that match the current index pattern by entering
your search criteria in the Query bar. By default you can use Kibana's standard query language
which features autocomplete and a simple, easy to use syntax. Kibana's legacy query
Expand All @@ -24,7 +24,7 @@ the request to Elasticsearch.
include::kuery.asciidoc[]

[[lucene-query]]
=== Lucene Query Syntax
=== Lucene query syntax
Kibana's legacy query language was based on the Lucene query syntax. For the time being this syntax
is still available under the options menu in the Query Bar and in Advanced Settings. The following
are some tips that can help get you started.
Expand Down Expand Up @@ -70,15 +70,15 @@ Kibana see <<xpack-security-authorization>>.
[role="screenshot"]
image::discover/images/read-only-badge.png[Example of Discover's read only access indicator in Kibana's header]

==== Saving a Search
==== Save a search
To save the current search:

. Click *Save* in the Kibana toolbar.
. Enter a name for the search and click *Save*.

You can import, export and delete saved searches from *Management/Kibana/Saved Objects*.

==== Opening a Saved Search
==== Open a saved search
To load a saved search into Discover:

. Click *Open* in the Kibana toolbar.
Expand All @@ -102,7 +102,7 @@ Saved queries don't include information specific to Discover, such as the curren
==== Read only access
If you have insufficient privileges to save queries, the *Save current query* button isn't visible in the saved query management popover. For more information, see <<xpack-security-authorization, Granting access to Kibana>>

==== Saving a query
==== Save a query
To save the current query text, filters, and time filter:

. Click *#* in the search bar, next to the query text input.
Expand All @@ -117,13 +117,13 @@ image::discover/images/saved-query-management-component-all-privileges.png["Exam
image::discover/images/saved-query-save-form-default-filters.png["Example of the saved query management save form with the filters option included and the time filter option excluded",width="80%"]
. Click *Save*.

==== Loading a query
==== Load a query
To load a saved query into Discover, Dashboard, or Visualize:

. Click *#* in the search bar, next to the query text input.
. Select the query you want to load. You might need to scroll down to find the query you are looking for.

==== Saving changes to a query
==== Save changes to a query
If you load a query and then make changes to the query text, the filters, or the time filter, you can save the changes as a new query or update the existing query.

To save the changes as a new query:
Expand All @@ -143,13 +143,13 @@ To save the changes to the current query:
. Enter a description, and then select the filter options that you want to include.
. Click *Save*.

==== Clearing a query
==== Clear a query
To clear a query that is currently loaded in an application:

. Click *#* in the search bar.
. Click *Clear* in the popover.

==== Deleting a query
==== Delete a query
To completely delete a query:

. Click *#* in the search bar, next to the query text input.
Expand All @@ -162,7 +162,7 @@ image::discover/images/saved-query-management-component-delete-query-button.png[
You can import, export, and delete saved queries from <<managing-saved-objects, Saved Objects in Management>>.

[[select-pattern]]
=== Changing Which Indices You're Searching
=== Change the indices you're searching
When you submit a search request, the indices that match the currently-selected
index pattern are searched. The current index pattern is shown below the toolbar.
To change which indices you are searching, click the index pattern and select a
Expand All @@ -172,24 +172,22 @@ For more information about index patterns, see <<settings-create-pattern,
Creating an Index Pattern>>.

[[autorefresh]]
=== Refreshing the Search Results
=== Refresh the 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. You can
configure a refresh interval to periodically resubmit your searches to
retrieve the latest results.

To enable auto refresh:
. Click image:images/time-filter-calendar.png[].

. Click the *Time Picker* image:images/time-picker.jpg[Time Picker] in the
Kibana toolbar.
. Click *Auto refresh*.
. Choose a refresh interval from the list.
. In the *Refresh every* field, enter the refresh rate, then select the interval
from the dropdown.

. Click *Start*.
+
image::images/autorefresh-intervals.png[]

When auto refresh is enabled, the refresh interval is displayed next to the
Time Picker, along with a Pause button. To temporarily disable auto refresh,
click *Pause*.
To disable auto refresh, click *Stop*.

NOTE: If auto refresh is not enabled, you can manually refresh visualizations
by clicking *Refresh*.
If auto refresh is not enabled, click *Refresh* to manually refresh the search
results.
68 changes: 39 additions & 29 deletions docs/discover/set-time-filter.asciidoc
Original file line number Diff line number Diff line change
@@ -1,46 +1,56 @@
[[set-time-filter]]
== Setting the time filter
You can
set a time filter if your index contains time-based events and a time-field is
configured for the selected index pattern.
By default, the time filter is set to the last 15 minutes. You can use the time
picker to change the time filter, or select a specific time
range in the histogram.
If your index contains time-based events, and a time-field is configured for the
selected index pattern, set a time filter that displays only the data within the
specified time range.

You can use the time filter to change the time range, or select a specific time
range in the histogram.

[float]
=== Filter with the time picker

To quickly select from popular time range options, click the calendar
dropdown image:infrastructure/images/time-filter-calendar.png[].

[[use-time-filter]]
=== Use the time filter

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[].

. Choose one of the following:

* *Quick select* to use a recent time range, then use the back and forward
arrows to move through the time ranges.

* *Commonly used* to use a time range from options such as *Last 15 minutes*,
*Today*, and *Week to date*.

* *Recently used date ranges* to use a previously selected data range that
you recently used.

* *Refresh every* to specify an automatic refresh rate.
+
[role="screenshot"]
image::images/Timepicker-View.png[Time picker menu]

With the time picker, you can choose from:

* *Quick select* to choose a recent time range, and use the back and forward arrows to move through the time ranges.
* *Commonly used* to choose a time range from options such as *Last 15 minutes*, *Today*, and *Week to date*.
* *Refresh every* to specify an auto-refresh rate.

For control over the start and end times,
click the start time or end time in
the bar next to the calendar dropdown. In this popup,
you can select *Absolute*, *Relative* or *Now*,
and then specify the required options.
image::images/Timepicker-View.png[Time filter menu]

. To set the start and end times, click the bar next to the time filter.
In the popup, select *Absolute*, *Relative* or *Now*, then specify the required
options.
+
[role="screenshot"]
image::images/time-filter-bar.png[Time filter bar]

[float]
=== Filter from the histogram
=== Select a time range from the histogram

To select a specific time range in the histogram, choose one of the following:

You can set a time filter from the histogram in two ways:
* Click the bar that represents the time range you want to zoom in on.

* Click the bar that represents the time interval you want to zoom in on.
* Click and drag to view a specific timespan. You must start the selection with
* Click and drag to view a specific time range. You must start the selection with
the cursor over the background of the chart--the cursor changes to a plus sign
when you hover over a valid start point.

To use a different interval, click the dropdown and select an interval.
* Click the dropdown, then select an interval.

[role="screenshot"]
image::images/Histogram-Time.png[Time range selector in Histogram]
Expand Down
Binary file modified docs/images/autorefresh-intervals.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/autorefresh.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/time-filter-bar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/time-filter-calendar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/infrastructure/infra-ui.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ For example, enter `host.hostname : "host1"` to see only the information for `ho
[[infra-date]]
=== Specify the time and date

Click the time selector image:infrastructure/images/infra-time-selector.png[time selector icon] to choose the timeframe for the metrics.
Click the time filter image:infrastructure/images/infra-time-selector.png[time filter icon] to choose the timeframe for the metrics.
The values shown are the values for the last minute at the specified time and date.

[float]
Expand Down
5 changes: 3 additions & 2 deletions docs/logs/using.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,9 @@ If so, <<xpack-logs-configuring, configure the logs source data>> to change the
[[logs-time]]
=== Specify the time and date

Click the time selector image:logs/images/logs-time-selector.png[time selector icon] to choose the timeframe for the logs.
Log entries for the time you specify appear in the middle of the page, with the earlier entries above and the later entries below.
Click image:images/time-filter-calendar.png[time filter calendar], then choose the time range for the logs.

Log entries for the specified time appear in the middle of the page, with the earlier entries above and the later entries below.

To quickly jump to a nearby point in time, click the minimap timeline to the right.
// ++ what's this thing called? It's minimap in the UI. Would timeline be better?
Expand Down
2 changes: 1 addition & 1 deletion docs/plugins/known-plugins.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ This list of plugins is not guaranteed to work on your version of Kibana. Instea

[float]
=== Other
* https://github.com/nreese/kibana-time-plugin[Time picker as a dashboard panel] Widget to view and edit the time range from within dashboards.
* https://github.com/nreese/kibana-time-plugin[Time filter as a dashboard panel] Widget to view and edit the time range from within dashboards.

* https://github.com/Webiks/kibana-API.git[Kibana-API] (webiks) Exposes an API with Kibana functionality.
Use it to create, edit and embed visualizations, and also to search inside an embedded dashboard.
Expand Down
2 changes: 1 addition & 1 deletion docs/user/monitoring/beats-details.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ image::user/monitoring/images/monitoring-beats.jpg["Monitoring Beats",link="imag
To view an overview of the Beats data in the cluster, click *Overview*. The
overview page has a section for activity in the last day, which is a real-time
sample of data. Below that, a summary bar and charts follow the typical paradigm
of data in the Monitoring UI, which is bound to the span of the time picker in
of data in the Monitoring UI, which is bound to the span of the time filter in
the top right corner of the page. This overview page can therefore show
up-to-date or historical information.

Expand Down
2 changes: 1 addition & 1 deletion docs/visualize/vega.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ Here is an example of an Elasticsearch query that counts the number of documents
// An object instead of a string for the url value
// is treated as a context-aware Elasticsearch query.
url: {
// Filter the time picker (upper right corner) with this field
// Specify the time filter (upper right corner) with this field
%timefield%: @timestamp
// Apply dashboard context filters when set
%context%: true
Expand Down

0 comments on commit 3fe9dcc

Please sign in to comment.