在第三方应用程序中突出显示Javascript表格单元格

时间:2018-04-05 20:25:04

标签: javascript highlighting splunk

我正在使用Splunk版本7.0.1,我试图根据其他两个字段突出显示我的表格单元格颜色。 Splunk在Javascript中有一个使用硬编码值的示例,但我需要基于不同字段的值。我有脚本工作,但它随机突出显示错误颜色的一些单元格。我似乎无法弄清楚为什么。

“平均响应时间”应为:

  • 如果值大于或等于阈值
  • ,则为红色
  • 如果该值大于或等于“目标”但小于“阈值”
  • ,则为琥珀色
  • 如果值小于目标
  • ,则为绿色

我的表:

Transaction    Count   "Average Response Time"    Objective   Threshold
A/P - Close Module - FM1    1   7.52    2.00    6.00  **<-Colored Red and correctly**
...
A/P - Diagnosis- Run Search - FM1   2   4.01    100.00  100.00 **<- Colored Amber incorrectly**

以下是该表的仪表板来源:

<table id="response_time_highlight">
        <title>NOTE: An Objective and/or Threshold of 100 indicates that an Objective and/or Threshold have not been identified for this particular transaction type.</title>
        <search>
          <query>index=arm sourcetype="arm:transaction" region="$region$" sitename="$sitename$" transaction_status IN ( $transaction_status$ ) username IN ( $username$ ) workstation_name IN ( $workstation_name$ ) transaction_name IN ( $transaction_name$ ) 
| stats count avg(response_time) AS response_time BY transaction_name objective threshold 
| eval threshold=round(threshold,2) 
| eval objective=round(objective,2) 
| eval response_time=round(response_time,2) 
| fields transaction_name count response_time objective threshold 
| rename response_time AS "Average Response Time" transaction_name AS "Transaction Type" objective as Objective threshold as Threshold count as "Transaction Count"
| sort +transaction_name</query>
          <earliest>$search_time.earliest$</earliest>
          <latest>$search_time.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>

这是Javascript代码(仪表板示例的修改版本之一):

    require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/tableview',
        'splunkjs/mvc/simplexml/ready!'
    ], function (_, $, mvc, TableView) {

    var objective_value;
    var threshold_value;

    // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            // Enable this custom cell renderer for response_time field
            return _(['Average Response Time', 'Objective', 'Threshold']).contains(cell.field);
        },
        render: function ($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);

            if (cell.field === 'Objective') {
                objective_value = value;
            }

            if (cell.field === 'Threshold') {
                threshold_value = value;
            }

            // Apply interpretation for number of historical searches
            if (cell.field === 'Average Response Time') {
                if (value >= threshold_value) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if (value >= objective_value) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if (value < objective_value) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }
            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });
    mvc.Components.get('response_time_highlight').getVisualization(function (tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });
});

编辑:在javascript中添加了一个console.log,显示了每个字段的输出。注意到第一行显示为未定义,并将正确的数字向下推到下一行。这是输出:

0 undefined undefined
8.64 100 100
7.52 2 6
0 2 6
7.52 2 6
1.11 10 25
2.28 2 6
2.92 2 6

0 个答案:

没有答案