Commit 8ecf2d12 by Patrick O'Carroll

fixed width of images and removed gifs and fixed text a bit in search

parent 411c81fe
......@@ -42,7 +42,7 @@ The image above shows you the top header for a Dashboard.
Dashboards are at the core of what Grafana is all about. Dashboards are composed of individual Panels arranged on a grid. Grafana ships with a variety of Panels. Grafana makes it easy to construct the right queries, and customize the display properties so that you can create the perfect Dashboard for your need. Each Panel can interact with data from any configured Grafana Data Source (currently InfluxDB, Graphite, OpenTSDB, Prometheus and Cloudwatch). The [Basic Concepts](/guides/basic_concepts) guide explores these key ideas in detail.
<img src="/img/docs/v50/dashboard_annotated.png" class="no-shadow">
<img src="/img/docs/v50/dashboard_annotated.png" class="no-shadow" width="700px">
1. Zoom out time range
2. Time picker dropdown. Here you can access relative time range options, auto refresh options and set custom absolute time ranges.
......
......@@ -17,7 +17,7 @@ Dashboards are exported in Grafana JSON format, and contain everything you need
The export feature is accessed in the share window which you open by clicking the share button in the dashboard menu.
{{< docs-imagebox img="/img/docs/v50/export_modal.png" >}}
{{< docs-imagebox img="/img/docs/v50/export_modal.png" max-width="700px" >}}
### Making a dashboard portable
......@@ -31,12 +31,12 @@ the dashboard, and will also be added as an required input when the dashboard is
To import a dashboard open dashboard search and then hit the import button.
{{< docs-imagebox img="/img/docs/v50/import_step1.png" >}}
{{< docs-imagebox img="/img/docs/v50/import_step1.png" max-width="700px" >}}
From here you can upload a dashboard json file, paste a [Grafana.com](https://grafana.com) dashboard
url or paste dashboard json text directly into the text area.
{{< docs-imagebox img="/img/docs/v50/import_step2.png" >}}
{{< docs-imagebox img="/img/docs/v50/import_step2.png" max-width="700px" >}}
In step 2 of the import process Grafana will let you change the name of the dashboard, pick what
data source you want the dashboard to use and specify any metric prefixes (if the dashboard use any).
......@@ -45,7 +45,7 @@ data source you want the dashboard to use and specify any metric prefixes (if th
Find dashboards for common server applications at [Grafana.com/dashboards](https://grafana.com/dashboards).
{{< docs-imagebox img="/img/docs/v50/gcom_dashboard_list.png" >}}
{{< docs-imagebox img="/img/docs/v50/gcom_dashboard_list.png" max-width="700px" >}}
## Import & Sharing with Grafana 2.x or 3.0
......
......@@ -10,9 +10,9 @@ weight = 5
# Dashboard Search
Dashboards can be searched by the dashboard name, filtered by one (or many) tags or filtered by starred status. The dashboard search is accessed through the dashboard picker, available in the dashboard top nav area.
Dashboards can be searched by the dashboard name, filtered by one (or many) tags or filtered by starred status. The dashboard search is accessed through the dashboard picker, available in the dashboard top nav area. The dashboard search can also be opened by using the shortcut `F`.
<img class="no-shadow" src="/img/docs/v50/dashboard_search_annotated.png">
<img class="no-shadow" src="/img/docs/v50/dashboard_search_annotated.png" width="700px">
1. `Search Bar`: The search bar allows you to enter any string and search both database and file based dashboards in real-time.
2. `Starred`: Here you find all your starred dashboards.
......@@ -25,9 +25,7 @@ When using only a keyboard, you can use your keyboard arrow keys to navigate the
## Find by dashboard name
<img class="no-shadow" src="/img/docs/v50/dashboard_search_text.gif" max-width="800px">
To search and load dashboards click the open folder icon in the header or use the shortcut `CTRL`+`F`. Begin typing any part of the desired dashboard names. Search will return results for for any partial string match in real-time, as you type.
Begin typing any part of the desired dashboard names in the search bar. Search will return results for for any partial string match in real-time, as you type.
Dashboard search is:
- Real-time
......@@ -40,27 +38,8 @@ Tags are a great way to organize your dashboards, especially as the number of da
To filter the dashboard list by tag, click on any tag appearing in the right column. The list may be further filtered by clicking on additional tags:
<img class="no-shadow" src="/img/docs/v50/dashboard_search_tag_filtering.gif" max-width="800px">
Alternately, to see a list of all available tags, click the tags link in the search bar. All tags will be shown, and when a tag is selected, the dashboard search will be instantly filtered:
<img class="no-shadow" src="/img/docs/v50/dashboard_search_tags_all_filtering.gif" max-width="800px">
<img class="no-shadow" src="/img/docs/v50/tagdropdown2.gif" max-width="800px">
<img class="no-shadow" src="/img/docs/v50/tagdropdown3.gif" max-width="800px">
<img class="no-shadow" src="/img/docs/v50/tagdropdown4.gif" max-width="800px">
Alternately, to see a list of all available tags, click the tags dropdown menu. All tags will be shown, and when a tag is selected, the dashboard search will be instantly filtered:
When using only a keyboard: `tab` to focus on the *tags* link, `▼` down arrow key to find a tag and select with the `Enter` key.
**Note**: When multiple tags are selected, Grafana will show dashboards that include **all**.
<!-- ## Filter by Starred
Starring is a great way to organize and find commonly used dashboards. To show only starred dashboards in the list, click the *starred* link in the search bar:
<img class="no-shadow" src="/img/docs/v2/dashboard_search_starred_filtering.gif">
When using only a keyboard: `tab` to focus on the *stars* link, `▼` down arrow key to find a tag and select with the `Enter` key. -->
**Note**: When multiple tags are selected, Grafana will show dashboards that include **all**.
\ No newline at end of file
......@@ -13,7 +13,7 @@ weight = 7
Grafana provides numerous ways to manage the time ranges of the data being visualized, both at the Dashboard-level and the Panel-level.
<img class="no-shadow" src="/img/docs/v50/timepicker.png">
<img class="no-shadow" src="/img/docs/v50/timepicker.png" width="700px">
In the top right, you have the master Dashboard time picker (it's in between the 'Zoom out' and the 'Refresh' links).
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment