Dynamic Text 功能介绍

grafana 插件安装

1	grafana-cli plugins install marcusolsson-dynamictext-panel

Grafana 修改admin 的默认密码

进入容器

1 2	进入容器 docker exec -it 775c7c9ee1e1 /bin/bash

修改密码

该方法基于 Grafana 4.1 以上

1	grafana-cli admin reset-admin-password <new password>

Grafana中使用动态文本看板

Markdown 动态模版渲染

使用 Markdown 动态模版渲染blog信息

编辑视图

代码块

- Timestamp: {{variable "__from"}}
- Seconds: {{variable "__from:date:seconds"}}
- Parsed: {{variable "__from:date:YYYY-MM-DD"}}
- ISO:
  - From {{variable "__from:date:iso"}}
  - To {{variable "__from:date"}}

## {{test}}
## {{test}}

{{json @root}}

使用 Markdown 动态模版渲染实现表格形式展示

效果图

表数据

渲染后效果

编辑视图

代码块

1
2
3


```json
{{{json @root}}}

### 使用 Markdown 动态模版渲染表数据到并格式化为json
- 效果图

![](/images/grafana/202407221637_0.png)

- 编辑视图

![](/images/grafana/202407221637.png)

- 代码块

```md
| Title | Date | Category |
| ----- | ------ | ---- |
{{#each data}}
| {{title}} | {{date pubDate 'MMM, DD YYYY'}} | {{category}}
{{/each}}

html 动态模版渲染

基于 html 动态模版渲染

编辑视图

代码块

<table width=100% style='border:2px solid #5D3FC4'>
   <tr>
      <td class='name'>
         <p style='margin:0'><b class='name'>{{first_name}} {{last_name}}</b>
         </p>
      </td>
      <td rowspan=3 class='photo' width=200px>
         <img width=120px src="{{photo}}">
      </td>
   </tr>
   <tr>
      <td style='background-color:#f6f2ff;color:#5F3DC4'>login
         <b style='font-family: silom;font-size:14px'>{{login}}</b>
         <br>role <b style='font-family: silom;font-size:14px'>{{role}}</b>
      </td>
   </tr>
   <tr>
      <td class='desc'>
         <p style='margin:0'>
            {{#if (eq status 'active')}}
         <p style='px;color:#549728; font-size:22px; font-family:Roboto;margin:0'><b>Active</b></p>
         {{/if}}
         {{#if (eq status 'not active')}}
         <p style='px;color:#FF5656; font-size:22px; font-family:Roboto;margin:0'><b>Not Active</b></p>
         {{/if}}
         Last Login Date <br><b> {{date last_login_date 'YYYY-MM-DD HH:MM'}}</b></p>
      </td>
   </tr>
</table>

使用html 实现前端交互操作

编辑视图

代码块

content

1
2
3

<a type="button" onclick="myFunc()" class="btn btn-danger">{{test}}</a>

<button onclick="myFunc()">{{test}}</button>

js

1
2
3

myFunc = () => {
  alert('Bonjour!');
};

参考资料

volkovlabs-dynamictext-panel