激活处理程序
激活处理程序是提供外部行为给场景对象的实用工具。当场景对象挂载时，激活处理程序将被调用。
类似于 React 的 useEffect，激活处理程序返回一个 function(解激活处理程序)，该处理程序应该用于清理在激活处理程序中添加的所有行为。解激活处理程序在场景对象卸载时被调用。
注意
激活处理程序在您想要向核心场景对象添加外部行为时特别有用。它们减少了实现处理场景对象连接的自定义场景对象的需求。
本主题描述了如何创建和使用激活处理程序。
添加激活处理程序
按照以下步骤创建激活处理程序。
步骤 1. 创建场景
首先创建一个渲染时间序列面板和文本面板的场景
const queryRunner = new SceneQueryRunner({
datasource: {
type: 'prometheus',
uid: '<PROVIDE_GRAFANA_DS_UID>',
},
queries: [
{
refId: 'A',
range: true,
format: 'time_series',
expr: 'rate(prometheus_http_requests_total[5m])',
},
],
});
const timeSeriesPanel = PanelBuilders.timeseries().setTitle('Panel title').setData(queryRunner).build();
const debugView = PanelBuilders.text()
.setTitle('Debug view')
.setOption('mode', TextMode.HTML)
.setOption('content', '')
.build();
const scene = new EmbeddedScene({
$timeRange: new SceneTimeRange(),
controls: [new SceneTimePicker({ isOnCanvas: true }), new SceneRefreshPicker({ isOnCanvas: true })],
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexItem({
body: timeSeriesPanel,
}),
new SceneFlexItem({
width: '30%',
body: debugView,
}),
],
}),
});
步骤 2. 添加激活处理程序
为 SceneQueryRunner 添加一个激活处理程序，该处理程序订阅状态更改并在文本面板中显示执行的查询。请注意，只有在 SceneQueryRunner 被激活后，才会创建对状态的订阅
queryRunner.addActivationHandler(() => {
let log = '';
const sub = queryRunner.subscribeToState((state) => {
log =
`${new Date(Date.now()).toLocaleTimeString()} Executed query: <pre>${state.queries.map((q) => q.expr)}</pre>\n` +
log;
debugView.setState({
options: {
content: log,
},
});
});
});
步骤 3. 返回一个去激活处理程序
从激活处理程序中返回一个函数，当对象被去激活时，该函数将取消订阅 queryRunner 的状态更改
queryRunner.addActivationHandler(() => {
let log = '';
const sub = queryRunner.subscribeToState((state) => {
log =
`${new Date(Date.now()).toLocaleTimeString()} Executed query: <pre>${state.queries.map((q) => q.expr)}</pre>\n` +
log;
debugView.setState({
options: {
content: log,
},
});
});
// Return deactivation handler
return () => {
sub.unsubscribe();
};
});