Grafana：从面板插件配置 InfluxDB 查询。在从 typescript 设置值后使用 html 输入元素出现问题

Posted 2023-02-16

【中文标题】Grafana：从面板插件配置 InfluxDB 查询。在从 typescript 设置值后使用 html 输入元素出现问题

【英文标题】：Grafana: Configure InfluxDB queries from panel plugin.Problem with html input element after setting value from typescript

【发布时间】：2020-04-05 13:41:21

【问题描述】：

我已经修改了现有的 Grafana 面板插件（Boom 表），以便它可以读取配置文件，并使用该文件中的数据更新模式和阈值。

现在我还想更新数据源查询和别名以匹配模式。我正在使用 InfluxDB。我已经设法从我修改过的面板插件中填写正确的查询和别名，但问题是我无法设法“应用”别名。我可以通过从打字稿代码中发出选择命令来应用查询字符串，但这不适用于别名输入。

我通过使用 document.getElementsByClassName("gf-form-input") 读取所有输入字段来做到这一点。从返回的带有 htmlInputElements 的数组中，我找出了哪些输入是查询和别名，并通过设置值来更新它。我已经尝试使用input.value = "<alias string>" 和input.setAttribute('value', <alias string>) 进行设置。

除了“选择”之外，我还尝试了各种其他命令，例如：“单击”、“聚焦”和“模糊”。我可以看到正确的文本被填写到了正确的输入框中，但是上面有数据的表格没有更新。如果我手动更改它应用的字符并且表格正确更新。有谁知道我怎么能做到这一点？感觉就像我非常接近实现我所需要的，这只是缺少的最后一块。如果我可以使用标准的 InfluxDB 数据源插件并且只修改面板插件，那就太好了。

【参考方案1】：

事件需要通过angular触发。

请参阅以下内容： https://tommcfarlin.com/triggering-angular-events-with-jquery/

从上面的链接中获取的以下代码是解决问题的示例：

$('select[ng-model="schedule.payment_method"]').each(function() 

  // For the purposes of this example, we're going to select the first option.
  $(this)
    .children('option:eq(1)')
    .attr('selected', 'selected');

  // Make sure the select element reflects the change (as setting the option doesn't always do this properly).
  $(this).val($(this).children('option:selected').attr('value'));

  // Now use the Angular API's triggerHandler function to call the change.
  angular.element($(this)).triggerHandler('change');
);

将初始 jquery 选择器更新为别名框的选择器。

编辑： 只是做一些测试，你应该能够简单地执行

angular.element($0).triggerHandler("change")

改变值后，其中$0为别名框的dom对象。