grafana Datasource插件数据流原型

切换插件操作

查询条件更改onchange

<PanelChromer />

panel plugin 适配器(<DashboardPanel/>)

接收到RefreshEventt事件

发布PanelQueriesChangedEvent事件

DataSource第三方插件

<panelEditor/>

全局状态 State

订阅 Emitter 事件

grafana 插件

Mysql plugn URL

query URL

页面信息变化dispatch()

const panel = new PanelModel() 并将panel 插件存储在panelModel对象plugin属性

 PanelModel

getPanel()loadPanelPlugin()importPanelPlugin()

QueryOptionCtrl模块数据源的面板范围设置

ES pluginQuery pluginMysql plugnMDB plugin.......

是否为第三方插件

dataSourcePlugin

插件适配器

ReduxTookkit维护全局状态

发布RefreshEventt事件

refresh() => events.publish(new RefreshEvent()

panelModel

监听onRefresh事件

Plugin server

getQueryRunner.getData获取Panel展示数据

订阅Refresh事件刷新组件

data:存储panel渲染数据span class=\"name own-property\" var(--color-syntax-2)\"=\"\" original-title=\"type：: span class=\"object-value-string value\" color=\"var(--color-syntax-1)\" original-title=\"\

importPanelPlugin从插件池获取Panel插件

Query plugin URL

loadDatasource()

datasource 模块主要负责查询数据

datasource_srv模型

EventEmitter

PanelModel

datasource 插件模块

PanePlugin

updateQueries() 获取最新数据

datasource

<PanelChromeAngular />

QueryCtrl模块对应panel模块的metrics编辑页面

订阅EventEmiter监听Penel插件变化更新dataSource

get()下载插件

configCtrl模块对数据源的定义和配置

panel

onstateChange

AWS General Database

插件池(builtInPlugins.ts)

<QueryEditorRow/>

Panel 插件模块

MDB Plugin URL

store.getPanel()获取Panel插件对象

MDB Plugin URL

更改全局状态方法reducer

importDataSourcePlugin()

AnnotationQueryCtrl模块对应dashborad层面定义注解时的配置页面

Panel 插件

监听PanelQueriesChangedEvent事件厨房forceupdate 刷新页面

Datasource 内部插件