Skip to content

Commit a724ca5

Browse files
docs update
1 parent a3836aa commit a724ca5

File tree

7 files changed

+172
-66
lines changed

7 files changed

+172
-66
lines changed

deploy3.sh

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#!/bin/sh
2+
3+
# clear the temp pubic directory
4+
rm -rf site
5+
6+
# Generate static website. Files will be placed in site folder
7+
mkdocs build
8+
9+
# Move the files to S3 bucket for hosting
10+
aws s3 sync ./site s3://openobserve-staging-website/docs --exclude=".git/*" --profile=o2-prod
11+
12+
# invalidate cloudfront cache so that latest files can be served
13+
aws cloudfront create-invalidation --distribution-id EZ2SEJVXM7NXL --paths="/docs/*" --profile=o2-prod
14+

docs/user-guide/dashboards/.pages

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
nav:
2+
- Dashboards Overview: index.md
23
- Dashboards in OpenObserve: dashboards-in-openobserve.md
34
- Manage Dashboards: manage-dashboards.md
4-
- Index: index.md
55
- Variables: variables.md
66
- Variable Dependencies in Dashboards: variable-dependencies.md
77
- Comparison Against in Dashboards: comparison-against-in-dashboards.md

docs/user-guide/dashboards/dashboards-in-openobserve.md

Lines changed: 52 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ This guide introduces you to the **Dashboards** in OpenObserve, including what t
22

33
## Introduction to Dashboards
44

5-
In OpenObserve, **Dashboards** are central to data visualization and monitoring. They provide a way to display real-time and historical data in an interactive, easy-to-understand format.
5+
In OpenObserve, **Dashboards** are the central tool for data visualization and monitoring. They provide a way to display real-time and historical data in an interactive, easy-to-understand format.
66

77
The purpose of **Dashboards** is to offer an intuitive, at-a-glance view of your data, helping you:
88

@@ -17,40 +17,76 @@ On the left-hand side menu, click **Dashboards** to access the dashboard managem
1717

1818
![access dashboard](../../images/dashboard-1.png)
1919

20+
## How to Build Dashboards
21+
22+
<iframe width="560" height="315" src="https://www.youtube.com/embed/kjUvXQdL798?si=guA2AK3COvYJolIr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
23+
2024
## Dashboard Structure in OpenObserve
2125

22-
**Folders**: Dashboards are stored in folders. By default, the **default** folder is created. However, you can create additional folders to organize **Dashboards** based on your requirements.
26+
### Folders
27+
Dashboards are stored in folders. By default, the **default** folder is created. However, you can create additional folders to organize **Dashboards** based on your requirements.
2328

24-
- **Creating New Folders:** To create a new folder, click the **New Folder** button, and provide a folder name and description.
29+
!!! info "Create Folders"
30+
To create a new folder, click the **New Folder** button, and provide a folder name and description.
2531

2632
![create folders in dashboard](../../images/dashboard-2.png)
2733

28-
- **Editing or Deleting Folders**: To edit or delete a folder, click the vertical ellipsis (three dots) menu next to the folder name in the folder list. This allows you to rename or remove the folder as needed.
34+
!!! info "Editing or Deleting Folders"
35+
To edit or delete a folder, click the vertical ellipsis (three dots) menu next to the folder name in the folder list. This allows you to rename or remove the folder as needed.
2936

3037
![edit or delete folder](../../images/dashboard-3.png)
3138

32-
**Dashboards**: Inside each folder, you can create one or more **Dashboards**. Dashboards hold Panels, which represent visualizations of your data.
39+
### Dashboards
40+
Inside each folder, you can create one or more **Dashboards**. Dashboards hold Panels, which represent visualizations of your data.
3341

34-
- **Creating Dashboards**: To create a new Dashboard, click the **New Dashboard** button, add Name and Description for the Dashboard, and select an existing folder or create a new folder to organize the Dashboard. Use the **Import** button to import an existing Dashboard.
35-
<br>**Note**: Dashboards can contain one or more Panels for visualizing various data points or metrics.
42+
!!! info "Create Dashboards"
43+
To create a new Dashboard, click the **New Dashboard** button, add Name and Description for the Dashboard, and select an existing folder or create a new folder to organize the Dashboard. Use the **Import** button to import an existing Dashboard.
44+
<br>
45+
Dashboards can contain one or more Panels for visualizing various data points or metrics.
3646

3747
![create dashboards](../../images/dashboard-4.png)
3848

39-
**Panels**: A Panel contains a single visualization (e.g., a line chart, bar chart, table, etc.) representing specific data.
49+
### Panels
50+
A Panel displays a single visualization using one of the [supported chart types](#supported-chart-types-in-dashboards), based on specific data.
4051

41-
- **Adding Panels**: To add a Panel inside a Dashboard, click the **Add Panel** button.
42-
<br>**Note**: Each Panel displays one type of visualization. You can add multiple Panels to a Dashboard to represent different data.
52+
!!! info "Create Panels"
53+
To add a Panel inside a Dashboard, click the **Add Panel** button. <br>
54+
Each Panel displays one type of visualization. You can add multiple Panels to a Dashboard to represent different data.
4355

4456
![add panels](../../images/dashboard-5.png)
4557

4658
Example of a Dashboard with Panels:
4759

4860
![dashboards with panels](../../images/dashboard-6.png)
4961

50-
**Tabs:** **Tabs** help organize your Panels into different sections within a **Dashboard**. For example, you might have one Tab for Performance, another for Errors, and another for Traffic Analysis.
51-
52-
- **Default Tab**: By default, Panels are added to the default Tab.
53-
- **Creating New Tabs**: To create a new Tab, click the + icon next to the default Tab and enter a Tab name. You can create new Tabs from the **Tabs** menu under the **Dashboard Settings**.
62+
### Supported Chart Types in Dashboards
63+
!!! info "The following charts are supported in Dashboards:"
64+
65+
1. Area
66+
2. Area stacked
67+
3. Vertical Bar
68+
4. Horizontal bar
69+
5. Line
70+
6. Scatter
71+
7. Vertical Bar stacked
72+
8. Horizontal bar stacked
73+
9. Geo map
74+
10. Maps
75+
11. Pie
76+
12. Donut
77+
14. Heatmap
78+
15. Metric Text
79+
16. Gauge
80+
17. HTML
81+
18. Markdown
82+
19. Sankey
83+
20. Custom Charts
84+
85+
### Tabs
86+
Tabs help organize your Panels into different sections within a **Dashboard**. For example, you might have one Tab for Performance, another for Errors, and another for Traffic Analysis.
87+
By default, Panels are added to the **Default** tab.
88+
!!! info "Create New Tabs"
89+
To create a new Tab, click the + icon next to the default Tab and enter a Tab name. You can create new Tabs from the **Tabs** menu under the **Dashboard Settings**.
5490

5591
![create new tabs](../../images/dashboard-7.png)
5692

@@ -60,4 +96,5 @@ Example of a Dashboard with Panels in different Tabs:
6096

6197
![dashboard with panels in multiple tabs](../../images/dashboard-9.png)
6298

63-
[**Next Step: Manage Dashboards**](manage-dashboards.md)
99+
## Next Step
100+
- [Manage Dashboards](manage-dashboards.md)

docs/user-guide/dashboards/index.md

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,15 @@
1-
# Index
2-
3-
4-
## Chart types
5-
6-
Following chart types are supported:
7-
8-
1. Area
9-
1. Area stacked
10-
1. Line
11-
1. Vertical Bar
12-
1. Horizontal bar
13-
1. Vertical Bar stacked
14-
1. Horizontal bar stacked
15-
1. Heatmap
16-
1. Geo map
17-
1. Pie
18-
1. Donut
19-
1. Gauge
20-
1. Metric text / Single stat
21-
1. Table
22-
23-
<iframe width="560" height="315" src="https://www.youtube.com/embed/kjUvXQdL798?si=guA2AK3COvYJolIr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
24-
25-
## Dashboard variables
26-
27-
Dashboard variables are used to make dashboards interactive. They can be used to filter data based on certain aspects e.g. host name, kubernetes namespace, etc.
28-
29-
You must define dashboard variables at dashboard level and then use them on each chart within the dashboard. This allows for filtering data across multiple charts using the same variable. These variables can be used in both SQL based charts or PromQL based charts together in a single dashboard.
30-
31-
There are 2 kinds of variables:
32-
33-
1. [Static variables](variables.md)
34-
1. Dynamic variables
35-
36-
Below is an example of a dashboard with a filter:
37-
38-
![Dashboard with filter](images/filter1.png)
1+
# Dashboards Overview
392

3+
In OpenObserve, Dashboards are used to visualize and monitor both real-time and historical data. They present information in an interactive, easy-to-read form.
404

5+
**Learn more**:
416

7+
- [Dashboards in OpenObserve](dashboards-in-openobserve.md)
8+
- [Manage Dashboards](manage-dashboards.md)
9+
- [Variables](variables.md)
10+
- [Variable Dependencies in Dashboards](variable-dependencies.md)
11+
- [Comparison Against in Dashboards](comparison-against-in-dashboards.md)
12+
- [Custom Charts](custom-charts)
4213

4314

4415

docs/user-guide/index.md

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
# User Guide
22

3-
1. [Concepts](concepts)
4-
1. [Log Search](logs)
5-
1. [Real User monitoring](rum)
6-
1. [Organizations](organizations)
7-
1. [Users](users)
8-
1. [Streams](streams)
9-
1. [Ingestion](ingestion)
10-
1. [Alerts](alerts)
11-
1. [Functions](functions)
12-
1. [Migration](migration)
3+
1. [Concepts](concepts.md)
4+
2. [Log Search](logs)
5+
3. [Metrics](metrics)
6+
4. [Real User Monitoring (RUM)](rum.md)
7+
5. [Organizations](organizations.md)
8+
6. [Users](users.md)
9+
7. [Streams](streams.md)
10+
8. [Ingestion](ingestion.md)
11+
9. [Pipelines](Pipelines)
12+
10. [Alerts](alerts)
13+
11. [Dashboards](dashboards)
14+
12. [Actions](actions)
15+
13. [Functions](functions)
16+
14. [Migration](migration)
17+
15. [Identity and Access Management (IAM)](identity-and-access-management)
18+
16. [Management](management)
19+
17. [Profile](profile)
20+
18. [Performance](performance)
21+
19. [Best Practices](best-practices)

docs/user-guide/performance/download-manager.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ The Download Manager is a background service that runs on each querier node. Its
2121

2222
The selected querier receives a broadcast event notifying it about the new file. It then uses the Download Manager to:
2323

24-
1. Download the file from the object storage (e.g., S3)
25-
2. Store it in its local disk cache
24+
1. Download the file from the object storage, such as S3.
25+
2. Store it in its local disk cache.
2626

2727
!!! Note
2828
This process is a form of **proactive caching**. The file is downloaded and cached before any user queries it, ensuring faster response times when recent data is searched.

overrides/partials/header.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{#-
2+
This file was automatically generated - do not edit
3+
-#}
4+
{% set class = "md-header" %}
5+
{% if "navigation.tabs.sticky" in features %}
6+
{% set class = class ~ " md-header--shadow md-header--lifted" %}
7+
{% elif "navigation.tabs" not in features %}
8+
{% set class = class ~ " md-header--shadow" %}
9+
{% endif %}
10+
<header class="{{ class }}" data-md-component="header">
11+
<nav class="md-header__inner md-grid" aria-label="{{ lang.t('header') }}">
12+
<!-- Logo linking to main site -->
13+
<a href="/" title="OpenObserve Homepage" class="md-header__button md-logo" aria-label="OpenObserve Homepage" data-md-component="logo">
14+
{% include "partials/logo.html" %}
15+
</a>
16+
<svg height="32" viewBox="0 0 32 32" width="32"><path d="M22 5L9 28" stroke="#EAEAEA" stroke-linecap="round" stroke-linejoin="round"></path></svg>
17+
<!-- Extra icon or text linking to /docs -->
18+
<a href="/docs" title="Docs Home" class="md-header__button" style="font-weight: bold; font-size: 1rem; padding-left: 0.5rem;">
19+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-440h320v-80H320v80Zm0 120h320v-80H320v80Zm0 120h200v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>
20+
</a>
21+
<label class="md-header__button md-icon" for="__drawer">
22+
{% set icon = config.theme.icon.menu or "material/menu" %}
23+
{% include ".icons/" ~ icon ~ ".svg" %}
24+
</label>
25+
<div class="md-header__title" data-md-component="header-title">
26+
<div class="md-header__ellipsis">
27+
<div class="md-header__topic">
28+
<span class="md-ellipsis">
29+
{{ config.site_name }}
30+
</span>
31+
</div>
32+
<div class="md-header__topic" data-md-component="header-topic">
33+
<span class="md-ellipsis">
34+
{% if page.meta and page.meta.title %}
35+
{{ page.meta.title }}
36+
{% else %}
37+
{{ page.title }}
38+
{% endif %}
39+
</span>
40+
</div>
41+
</div>
42+
</div>
43+
{% if config.theme.palette %}
44+
{% if not config.theme.palette is mapping %}
45+
{% include "partials/palette.html" %}
46+
{% endif %}
47+
{% endif %}
48+
{% if not config.theme.palette is mapping %}
49+
{% include "partials/javascripts/palette.html" %}
50+
{% endif %}
51+
{% if config.extra.alternate %}
52+
{% include "partials/alternate.html" %}
53+
{% endif %}
54+
{% if "material/search" in config.plugins %}
55+
{% set search = config.plugins["material/search"] | attr("config") %}
56+
{% if search.enabled %}
57+
<label class="md-header__button md-icon" for="__search">
58+
{% set icon = config.theme.icon.search or "material/magnify" %}
59+
{% include ".icons/" ~ icon ~ ".svg" %}
60+
</label>
61+
{% include "partials/search.html" %}
62+
{% endif %}
63+
{% endif %}
64+
{% if config.repo_url %}
65+
<div class="md-header__source">
66+
{% include "partials/source.html" %}
67+
</div>
68+
{% endif %}
69+
</nav>
70+
{% if "navigation.tabs.sticky" in features %}
71+
{% if "navigation.tabs" in features %}
72+
{% include "partials/tabs.html" %}
73+
{% endif %}
74+
{% endif %}
75+
</header>

0 commit comments

Comments
 (0)