Re: How can to modify filter without relaunching j...

marylenebrey · ‎12-27-2019

Hi,

I have a problem with my javascript in Splunk.

On my dashboard, I have two filters :

- Filter on the date
- Filter on type of product

And I have dynamic pop-up, that I manage by javascript :

Below my javascript :

  var POP_UP= new TableView({
                       managerid: 'SA_PopUp',
                       count: 10,
                       el: $('# SA_Tableview')
       }, {tokens: true}).render();

When I modify the date filter, the pop-up updates automatically but when I update the filter on product type,
I have to restart javascript (Ctrl - F5) for having the pop-up.
Do you know why?

How can I modify the product type filter without relaunching javascript ?

Thanks in advance.

niketn · ‎12-29-2019

@marylenebrey you might have to provide more details. Do you have searchWhenChanged set to true for Date Filter and if so is it the same for Product filter as well?

What is the behavior of the dynamic pop up? When and where should it display? Should it be on change of Data and/or Product inputs or some other event in the dropdown? What is the query used in the table for dynamic pop up? Are both filter values passed to the dynamic pop up table query?

Would it be possible for you to share more code from Simple XML and JavaScript?

Please mask/anonymize any sensitive code/information before posting on Splunk Answers.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

marylenebrey · ‎12-30-2019

Hi @niketn,

No, I don't have searchWhenChanged for the date filter, I don't know why I have not a problem with the date.
I tried with searchWhenChanged but without success.

I want my pop-up to appear when I click on a token (which displays the result of the request)
when I modify the filter on the product or the date, this token is updated and the pop-up must also be updated.

Below ma javascript and my XML :

XML :

WAN dashboard_Last_Version

      <search id="pop_demo">
      <query>index="myindex" sourcetype="mysourcetype"

| lookup Product_type.csv Product OUTPUT "Product siglum"
| search "Product siglum"=$Product$
| eval Target_Rate=case(Site_Type == "Z" ,"40%", Site_Type == "X" ,"60%", Site_Type == "W" ,"20%")
| eval demo_status=case(demo < Target_Rate, "RED", Availibility_round > Target_Rate, "GREEN")
| table Product, demo_status

<earliest>$time.earliest$</earliest>
<latest>$time.latest$</latest>
    </search>


<query>

index="myindex" sourcetype="mysourcetype"
|stats counts(incidents) as product

$result.product$

<input type="time" token="time">
  <label>Time range</label>
  <default>
    <earliest>-2mon@mon</earliest>
    <latest>now</latest>
  </default>
</input>

<input type="dropdown" token="Product" >
  <label>Product</label>
  <default>*</default>
  <choice value="*">All</choice>
  <initialValue>*</initialValue>
  <search>
    <query>| inputlookup Product_type.csv

| rename "Product siglum" as Product
| dedup Product
| table Product
-24h@h
now

Product
Product

<panel>
  <!--
   MODAL FOR MACHIN start__________________________________________________________________________________________________________
   -->
  <!--
   MODAL FOR MACHIN end__________________________________________________________________________________________________________
   -->
  <html>
    <body>    

        <div class="flex_col">
          <p>Demo</p>
            <div class="numberCircle flex_col">
              <div id="numberCircle_Global_Avai" data-toggle="modal" data-target="#Availability_Global">
            <p>$global$%</p>
            </div>
          </div>
        </div>
    </body>

    </html>
  <html>
    <div class="modal fade" id="InterModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">Demo</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&amp;times;</span>
            </button>
            </div>
           <div class="modal-body">
            <div id="Global_Tableview"/>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    </html>
</panel>

Javascript :

require([
'jquery',
'underscore',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'bootstrap.tab',
'splunkjs/mvc/simplexml/ready!'
],
function($, _, mvc, TableView){
var defaultTokenModelun = mvc.Components.getInstance('default', {create: true});
var submittedTokenModelun = mvc.Components.getInstance('submitted', {create: true});
function setToken(name, value) {
var defaultTokenModel = mvc.Components.get('default');
if (defaultTokenModel) {
defaultTokenModel.set(name, value);
}
var submittedTokenModel = mvc.Components.get('submitted');
if (submittedTokenModel) {
submittedTokenModel.set(name, value);
}
}
var pop_demo = new TableView({
managerid: 'pop_demo',
count: 10,
el: $('#Global_Tableview')
}, {tokens: true}).render();

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 _(['demo_status']).contains(cell.field);
     },
     render: function($td, cell) {
         // Add a class to the cell based on the returned value

//console.log(cell);
var value = cell.value;
// Apply interpretation for number of historical searches
if (cell.field === 'demo_status') {
if (value == 'RED') {
//console.log("Test5");
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value == 'GREEN') {
$td.addClass('range-cell').addClass('range-low');

}
}
}

});
var myCellRenderer = new CustomRangeRenderer();

    // Add the custom cell renderer to the table

pop_demo.addCellRenderer(myCellRenderer);

    // Render the table

pop_demo.render();

Thanks you,

How can to modify filter without relaunching javascript

Access Tokens Page - New & Improved

Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!

Transform your security operations with Splunk Enterprise Security