javascript - Grafana:从面板插件配置 InfluxDB 查询。从 typescript 设置值后，html 输入元素出现问题

Question

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

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

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

除了“选择”之外，我还尝试过各种其他命令，例如:“单击”、“聚焦”和“模糊”。我可以看到正确的文本已填充到正确的输入框中，但包含上述数据的表格并未更新。如果我手动更改字符，它就会应用并且表格会正确更新。有谁知道我如何才能完成这项工作？感觉我已经非常接近实现我所需要的了，只是还缺少最后一 block 。如果我可以使用标准的 InfluxDB 数据源插件并且只修改面板插件，那就太好了。

Answer 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 对象。