Dear all Splunkers!!
Please help, I am trying to use Javascript to add CSS class in search result table by input.
As in pic 1, it already adds some class at result just like my input.
The blue underline is called CSS, red frame is a keyword that needs to be highlighted.
But, it doesn't change any font color and this is my XML code.
<form script="highlight.js" stylesheet="highlight.css">
<label>[Syslog Query ]</label>
<fieldset submitButton="false">
<input type="text" token="Token_1" searchWhenChanged="true">
<label>Token_1</label>
<default>*</default>
</input>
<input type="time" token="Time_Input_Token" searchWhenChanged="true">
<label></label>
<default>
<earliest>-30d@d</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<search id="Syslog_Master_Search">
<query>
<![CDATA[ ]]>
</query>
<earliest>$Time_Input_Token.earliest$</earliest>
<latest>$Time_Input_Token.latest$</latest>
</search>
<row>
<panel>
<title>[test]</title>
<input type="text" token="Token_2" searchWhenChanged="true">
<label>Token2</label>
<default>*</default>
</input>
<table id="Syslog_Table">
<search>
<query>
index=udp514idx *$Token_1$*
| table Time "Host Name" IP SysLog
| eval Search_Keyword = "(" . mvjoin(trim(split(replace(replace("$Token_2$", "\.", "\."), "\*", ".*"), ",")), "|") . ")"
| where match(SysLog, "(?i)" . Search_Keyword)
| eval SysLog = if("$Token_2$" == "*", SysLog, replace(SysLog, "(?i)(" . Search_Keyword .")", "<b class=\"Uncategorized_Syslog_Keyword_Highlight\">\1</b>"))
| table Time "Host Name" IP SysLog
</query>
</search>
<option name="wrap">false</option>
<option name="rowNumbers">true</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="count">20</option>
<fields>["Time","Host Name","IP","SysLog"]</fields>
</table>
</panel>
</row>
</form>
and this is my javascript
// Translations for zh_TW
i18n_register({"catalog": {}, "plural": function(n) { return n != 1; }});
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
return _(['SysLog']).contains(cell.field);
},
render: function($td, cell) {
$td.addClass(cell.field);
// Update the cell content
$td.html(cell.value).addClass('string');
}
});
mvc.Components.get('Syslog_Table').getVisualization(function(tableView) {
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
The result I expected is as below, my input keyword is highlighted in red.
Thank u so much!!
... View more