docs: grafana greptimedb docs

docs/nightly/en/db-cloud-shared/clients/grafana-integration.md

@@ -1,6 +1,37 @@
 GreptimeDB can be configured as a [Grafana data source](https://grafana.com/docs/grafana/latest/datasources/add-a-data-source/).
 
-## Prometheus
+## GreptimeDB data source plugin
+
+{template data-source-plugin-intro%%}
+
+{template data-source-plugin-installation%%}
+
+{template preview-greptimedb-using-docker%%}
+
+{template connection-settings-title%%}
+
+Click the Add data source button and select GreptimeDB as the type.
+
+{template grafana-add-greptimedb-data-source-img%%}
+
+Fill in the following URL in the GreptimeDB server URL:
+
+{template greptime-data-source-connection-url%%}
+
+Then do the following configuration:
+
+- Database Name：`<dbname>`, leave it blank to use the default database `public`
+- In the Auth section, click basic auth, and fill in the username and password for GreptimeDB in the Basic Auth Details section (not set by default, no need to fill in).
+  - User: `<username>`
+  - Password: `<password>`
+
+Then click the Save & Test button to test the connection.
+
+{template the-detail-usage-link%%}
+
+{template create-a-dashboard%%}
+
+## Prometheus data source
 
 Click the Add data source button and select Prometheus as the type.
 
@@ -20,7 +51,7 @@ Click Custom HTTP Headers and add one header:
 
 Then click Save & Test button to test the connection.
 
-## MySQL
+## MySQL data source
 
 Click the Add data source button and select MySQL as the type. Fill in the following information in MySQL Connection:
 

docs/nightly/en/greptimecloud/integrations/grafana.md

@@ -7,7 +7,24 @@ template: ../../db-cloud-shared/clients/grafana-integration.md
 
 {template prometheus-server-url%
 
-`https://<host>/v1/prometheus`
+```txt
+https://<host>/v1/prometheus
+```
+
+%}
+
+{template greptime-data-source-connection-url%
+
+```txt
+https://<host>
+```
+
+%}
+
+{template the-detail-usage-link%
+
+For more information about how to use GreptimeDB data source,
+please refer to the [GreptimeDB data source](https://docs.greptime.com/user-guide/clients/grafana) document.
 
 %}
 

docs/nightly/en/user-guide/clients/grafana.md

@@ -5,9 +5,106 @@ template: ../../db-cloud-shared/clients/grafana-integration.md
 
 <docs-template>
 
+{template data-source-plugin-intro%
+
+The GreptimeDB data source plugin is based on the Prometheus data source and adds GreptimeDB-specific features.
+The plugin perfectly adapts to the GreptimeDB data model,
+thus providing a better user experience.
+In addition, it also solves some compatibility issues compared to using the Prometheus data source directly.
+
+%}
+
+{template data-source-plugin-installation%
+
+### Installation
+
+The GreptimeDB Data source plugin can currently only installed on a local Grafana instance.
+Make sure Grafana is installed and running before installing the plugin.
+
+You can choose one of the following installation methods:
+- Download the installation package and unzip it to the relevant directory: Grab the latest release from [release
+page](https://github.com/GreptimeTeam/greptimedb-grafana-datasource/releases/latest/),
+Unzip the file to your [grafana plugin
+directory](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#plugins).
+- Use grafana cli to download and install:
+  ```shell
+  grafana cli --pluginUrl https://github.com/GreptimeTeam/greptimedb-grafana-datasource/releases/latest/download/info8fcc-greptimedb-datasource.zip plugins install info8fcc
+  ```
+
+Note that you may need to restart your grafana server after installing the plugin.
+
+%}
+
+{template preview-greptimedb-using-docker%
+
+### Quick preview using Docker
+
+Greptime provides a docker compose file that integrates GreptimeDB, Prometheus, Prometheus Node Exporter, Grafana, and this plugin together so you can quickly experience the GreptimeDB data source plugin.
+
+```shell
+git clone https://github.com/GreptimeTeam/greptimedb-grafana-datasource.git
+cd docker
+docker compose up
+```
+
+You can also try out this plugin from a Grafana docker image:
+
+```shell
+docker run -d -p 3000:3000 --name=grafana --rm \
+  -e "GF_INSTALL_PLUGINS=https://github.com/GreptimeTeam/greptimedb-grafana-datasource/releases/latest/download/info8fcc-greptimedb-datasource.zip;info8fcc" \
+  grafana/grafana-oss
+```
+
+%}
+
+{template grafana-add-greptimedb-data-source-img%
+
+![grafana-add-greptimedb-data-source](/grafana-add-greptimedb-data-source.png)
+
+%}
+
+{template connection-settings-title%
+### Connection settings
+%}
+
+{template greptime-data-source-connection-url%
+
+```txt
+http://<host>:4000
+```
+
+%}
+
+{template create-a-dashboard%
+
+### Create a dashboard
+
+Create a new dashboard in Grafana by clicking the `Create your first dashboard` button.
+Then click `Add visualization`, select `GreptimeDB` as the data source.
+
+Select a metric from the `Metric` dropdown list, then click `Run queries` to view the metric data.
+When you see the data and confirm it is correct, click `Save` to save the panel.
+
+![grafana-create-panel-with-selecting-metric](/create-panel-with-selecting-metric-greptimedb.png)
+
+You can also create a panel using PromQL.
+Click the `code` button on the right side of the `Query` tab to switch to the PromQL editor.
+Then enter a PromQL statement, such as `system_memory_usage{state="used"}`, click `Run query` to view the metric data.
+
+![grafana-create-panel-with-promql](/grafana-create-panel-with-promql.png)
+
+
+:::tip NOTE
+GreptimeDB is compatible with most PromQL, but there are some limitations. Please refer to the [PromQL limitations](/user-guide/query-data/promql#limitations) document for more information.
+:::
+
+%}
+
 {template prometheus-server-url%
 
-`http://<host>:4000/v1/prometheus`
+```txt
+http://<host>:4000/v1/prometheus
+```
 
 %}
 

docs/nightly/zh/db-cloud-shared/clients/grafana-integration.md

@@ -1,7 +1,39 @@
 
 GreptimeDB 服务可以配置为 [Grafana 数据源](https://grafana.com/docs/grafana/latest/datasources/add-a-data-source/)。
 
-## Prometheus
+## GreptimeDB 数据源插件
+
+{template data-source-plugin-intro%%}
+
+{template data-source-plugin-installation%%}
+
+{template preview-greptimedb-using-docker%%}
+
+{template connection-settings-title%%}
+
+在 Grafana 中单击 Add data source 按钮，选择 GreptimeDB 作为类型。
+
+{template grafana-add-greptimedb-data-source-img%%}
+
+在 GreptimeDB server URL 中填写以下地址：
+
+{template greptime-data-source-connection-url%%}
+
+接下来做如下配置：
+
+- Database Name：填写数据库名称 `<dbname>`，留空则使用默认数据库 `public`
+- 在 Auth 部分中单击 basic auth，并在 Basic Auth Details 中填写 GreptimeDB 的用户名和密码。未设置可留空：
+
+  - User: `<username>`
+  - Password: `<password>`
+
+然后单击 Save & Test 按钮以测试连接。
+
+{template the-detail-usage-link%%}
+
+{template create-a-dashboard%%}
+
+## Prometheus 数据源
 
 单击 Add data source 按钮，然后选择 Prometheus 作为类型。
 
@@ -21,7 +53,7 @@ GreptimeDB 服务可以配置为 [Grafana 数据源](https://grafana.com/docs/gr
 
 然后单击 Save & Test 按钮以测试连接。
 
-## MySQL
+## MySQL 数据源
 
 单击 Add data source 按钮，然后选择 MySQL 作为类型。在 MySQL Connection 中填写以下信息：
 

docs/nightly/zh/getting-started/quick-start/visualize-data-by-grafana.md

@@ -37,5 +37,5 @@ GreptimeDB 可以作为 Prometheus 数据源配置在 Grafana 中。
 ![grafana-create-panel-with-promql](/grafana-create-panel-with-promql.png)
 
 :::tip 注意
-GreptimeDB 兼容大部分 PromQL，但是有一些限制。请参考 [PromQL 限制](/user-guide/query-data/promql#limitations) 文档获取更多信息。
+GreptimeDB 兼容大部分 PromQL，但是有一些限制。请参考 [PromQL 限制](/user-guide/query-data/promql#局限) 文档获取更多信息。
 :::

docs/nightly/zh/greptimecloud/integrations/grafana.md

@@ -7,7 +7,24 @@ template: ../../db-cloud-shared/clients/grafana-integration.md
 
 {template prometheus-server-url%
 
-`https://<host>/v1/prometheus`
+```txt
+https://<host>/v1/prometheus
+```
+
+%}
+
+{template greptime-data-source-connection-url%
+
+```txt
+https://<host>
+```
+
+%}
+
+{template the-detail-usage-link%
+
+有关如何使用 GreptimeDB 数据源的详细信息，请参阅 [使用 GreptimeDB 数据源文档](https://docs.greptime.cn/user-guide/clients/grafana)。
+
 
 %}
 

docs/nightly/zh/user-guide/clients/grafana.md

@@ -5,9 +5,111 @@ template: ../../db-cloud-shared/clients/grafana-integration.md
 
 <docs-template>
 
+{template data-source-plugin-intro%
+
+GreptimeDB 数据源插件基于 Prometheus 数据源开发并附加了特定于 GreptimeDB 的功能。
+该插件完美适配了 GreptimeDB 的数据模型，
+从而提供了更好的用户体验。
+此外，和直接使用 Prometheus 数据源相比，它还解决了一些兼容性问题。
+
+%}
+
+{template data-source-plugin-installation%
+
+### 安装
+
+GreptimeDB 数据源插件目前仅支持在本地 Grafana 中的安装，
+在安装插件前请确保 Grafana 已经安装并运行。
+
+你可以任选以下一种安装方式：
+
+- 下载安装包并解压到相关目录：从[发布页面](https://github.com/GreptimeTeam/greptimedb-grafana-datasource/releases/latest/)获取最新版本，解压文件到你的 [grafana 插件目录](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#plugins)。
+- 使用 Grafana Cli 下载并安装：
+  ```shell
+  grafana cli --pluginUrl https://github.com/GreptimeTeam/greptimedb-grafana-datasource/releases/latest/download/info8fcc-greptimedb-datasource.zip plugins install info8fcc
+  ```
+
+注意，安装插件后可能需要重新启动 Grafana 服务器。
+
+%}
+
+{template preview-greptimedb-using-docker%
+
+### 使用 Docker 快速预览
+
+Greptime 提供了一个 docker compose 文件，
+将 GreptimeDB、Prometheus、Prometheus Node Exporter、Grafana 和该插件集成在一起，
+以便你能够快速体验 GreptimeDB 数据源插件。
+
+```shell
+git clone https://github.com/GreptimeTeam/greptimedb-grafana-datasource.git
+cd docker
+docker compose up
+```
+
+你也可以从 Grafana 的 docker 镜像中试用此插件：
+
+```shell
+docker run -d -p 3000:3000 --name=grafana --rm \
+  -e "GF_INSTALL_PLUGINS=https://github.com/GreptimeTeam/greptimedb-grafana-datasource/releases/latest/download/info8fcc-greptimedb-datasource.zip;info8fcc" \
+  grafana/grafana-oss
+```
+
+%}
+
+{template grafana-add-greptimedb-data-source-img%
+
+![grafana-add-greptimedb-data-source](/grafana-add-greptimedb-data-source.png)
+
+%}
+
+
+{template connection-settings-title%
+
+### Connection 配置
+
+%}
+
+
+{template greptime-data-source-connection-url%
+
+```txt
+http://<host>:4000
+```
+
+%}
+
+
+{template create-a-dashboard%
+
+### 创建仪表盘
+
+在 Grafana 中创建一个新的仪表盘，点击 `Create your first dashboard` 按钮。
+然后，点击 `Add visualization`，选择 `GreptimeDB` 作为数据源。
+
+在 `Metric` 下拉列表中选择一个指标，然后点击 `Run query` 查看指标数据。
+当你查看数据并确认无误后，点击 `Save` 保存面板。
+
+![grafana-create-panel-with-selecting-metric](/create-panel-with-selecting-metric-greptimedb.png)
+
+你还可以使用 PromQL 创建面板。
+点击 `Query` 标签页右侧的 `code` 按钮，切换到 PromQL 编辑器。
+然后输入一个 PromQL 语句，例如 `system_memory_usage{state="used"}`，点击 `Run queries` 查看指标数据。
+
+![grafana-create-panel-with-promql](/grafana-create-panel-with-promql.png)
+
+:::tip 注意
+GreptimeDB 兼容大部分 PromQL，但是有一些限制。请参考 [PromQL 限制](/user-guide/query-data/promql#局限) 文档获取更多信息。
+:::
+
+%}
+
+
 {template prometheus-server-url%
 
-`http://<host>:4000/v1/prometheus`
+```txt
+http://<host>:4000/v1/prometheus
+```
 
 %}