Problem with icons appended with Javascript

[analiaeg]

Hello everyone.

We have a table where we are inserting an icon in a cell, by javascript, depending on the value that cell.

We have paginated the table, and on the first page, the first time the icons are not displayed, but on the second and subsequent pages they are displayed correctly. They are also shown on the first page if we go back.

So, the problem is that the icons are not shown on the first page the first time.

We have tried to put the instruction: tableView.table.render (); but in this case, the icons are displayed well on the first page, and they are shown two times on all the other pages, also if we go back to the first page.

I think the problem is that for some reason the render on the first page does not refresh to show the icons, but we have tried several things and we are not able to get them to be displayed correctly on this first page.

Does anyone know how to fix it?

I include the javascript code:

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc, TableView){  
    mvc.Components.get('kpi_table').getVisualization(function(tableView) {      
        tableView.on('rendered', function() {
            var values = $("#kpi_table").find("td");            
            values.find(".multivalue-subcell").each(function() { $(this).css("padding","3px"); });          
            if (values.length > 0)
            {   
                for(var i = 0; i < values.length; i++) {

                    if($(values[i]).find(".multivalue-subcell").length==0){
                        $(values[i]).css("vertical-align", "middle");
                    }

                    if(parseInt($(values[i]).attr("data-cell-index"))>3 && $(values[i]).find(".multivalue-subcell").length>0) {

                        var kpi       =          $(values[i].parentNode).find("td:nth-child(2)")[0].innerText;                  
                        var target    = parseInt($(values[i].parentNode).find("td:nth-child(3)")[0].innerText.replace("%",""));
                        var cur_cell  =          $(values[i]).find(".multivalue-subcell")[0];
                        var cur_value = parseInt(cur_cell.innerText.replace("%",""));                       

                        if(target>0)
                        {

                            if(kpi.trim() == "Quality of resolution ratio")
                            {                                                       
                                if(cur_value <= target) 
                                {
                                    $(cur_cell).append("<span class=\"MetKPI\"></span>");
                                }                                   
                                else
                                {
                                    $(cur_cell).append("<span class=\"NotMetKPI\"></span>");
                                }
                            }
                            else
                            {                               
                                if(cur_value >= target) 
                                {
                                    $(cur_cell).append("<span class=\"MetKPI\"></span>");
                                }                                
                                else
                                {
                                    $(cur_cell).append("<span class=\"NotMetKPI\"></span>");
                                }
                            }
                        }
                        else
                        {
                            $(cur_cell).text("N/A");
                            $(values[i]).attr('data-toggle', 'tooltip');
                            $(values[i]).attr("title", "Target N/A");
                        }
                    }
                }
                tableView.table.render();
            }           
        });
    });
});

Thanks in advance.

[efika]

I don't know if it helps now but I had the same problem with the simple table_row_highlighting example in the dashboard_examples app.

I couldn't get it to render properly the first time on the first page. Going to the next page of results everything worked correctly as well as going back to the first page.

After looking at https://answers.splunk.com/answers/562155/javascript-executing-two-times-why.html, I changed the main of the code as follows and it is working now :

mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());

    tableView.table.render();

[analiaeg]

@niketnilay, sorry, this is the search query that displays the table:

index="aiam_airbus_summary_index"
    Country="" Technology_Cluster="" owner_name=""
    (Application="") (app_family_mots="") (asset_id="") assignee_client_type="*"

    | fillnull value=0

    | stats sum(num_sla*), sum(den_sla*), sum(bad_cataloged*), sum(cancelled*), sum(requirements*) by Month
    | eval ordenar = strftime(strptime("01 ".Month, "%d %B %Y"), "%m")
    | sort ordenar | fields - ordenar

    | foreach "sum()" [ rename <> as <> ]
    | foreach "bad" [ rename <> as "den_bad"<> ]
    | foreach "can*" [ rename <> as "den_can"<> ]
    | foreach "req*" [ rename <> as "den_req"<> ]

    | foreach den_ [ eval num_<> = if(isnull(num_<>), "0", num_<>) | 
    eval <> = round((num_<> / <>) 100, 0) ."%;". <> | eval <> = if(isnull(<>), "", <>) | makemv delim=";" <> ] | fields - den*, num*

    | transpose 24 header_field=Month column_name="SLA" include_empty=true
    | lookup airbus_sla_event_enrichment.csv sla_id as SLA
    | sort sort

    | eval "Value Type" = if(isnull(kpi_group), " ", "Met Request")
    | makemv "Value Type"

    | rename kpi_group as "KPI Group", kpi_name as "KPI Name", kpi_type as "KPI Type", target as Target

    | table "KPI Group" "KPI Name" Target "Value Type" 
    [| gentimes start=01/1/2017 end=12/31/2017 increment=1d 
    | eval month = "\"".strftime(starttime, "%B %Y")."\"" 
    | dedup month 
    | stats list(month) as result 
    | nomv result
    | return $result]

[niketn]

@analiaeg, Please get the Splunk Dashboard Examples App for Table Icon Set (Rangemap) example from Splunkbase: https://splunkbase.splunk.com/app/1603/

or check the following Splunk blog for the same: https://www.splunk.com/blog/2014/03/17/custom-icons-in-splunk-6-tables.html

[careanitha]

@niketnilay - Can you please look in the below question as well and provide your comments for the same.

link text

[analiaeg]

@kamlesh_vaghela, I'm using simple XML dashboard

[niketn]

@analiaeg, Will it be possible for you to add your search query that displays the table? Also add sample mock data with field names for your table.

Can you test out whether adding table render code inside setTimeout() with slight delay lets say 100 ms or 1000ms, renders the first page with icons or not ( WITHOUT tableView.table.render(); code inside the on render event.)

setTimeout(function(){ 

    tableView.on('rendered', function() {
            var values = $("#kpi_table").find("td");            
            values.find(".multivalue-subcell").each(function() { $(this).css("padding","3px"); });            
            if (values.length > 0)
            ...
            ...
    });


}, 100);

If it does try $document.ready() instead of setTimeout()

[analiaeg]

Thanks for your answer @nikethilay.

What you comment is all correct.

I have tried to apply a delay for table render function call using setTimeout() and $(document).ready(), but it doesn't work, the problem go on: existing code is working except for the first page on loading the table. Once loaded it works when user navigate away and then back to the first page.

This is the search query that displays the table:

index="aiam_airbus_summary_index"
Country="" Technology_Cluster="" owner_name=""
(Application="") (app_family_mots="") (asset_id="") assignee_client_type="*"

| fillnull value=0

| stats sum(num_sla*), sum(den_sla*), sum(bad_cataloged*), sum(cancelled*), sum(requirements*) by Month
| eval ordenar = strftime(strptime("01 ".Month, "%d %B %Y"), "%m")
| sort ordenar | fields - ordenar

| foreach "sum()" [ rename <> as <> ]
| foreach "bad" [ rename <> as "den_bad"<> ]
| foreach "can*" [ rename <> as "den_can"<> ]
| foreach "req*" [ rename <> as "den_req"<> ]

| foreach den_* [ eval num_<> = if(isnull(num_<>), "0", num_<>) |
eval <> = round((num_<> / <>) * 100, 0) ."%;". <> |
eval <> = if(isnull(<>), "", <>) |
makemv delim=";" <> ]
| fields - den*, num*

| transpose 24 header_field=Month column_name="SLA" include_empty=true
| lookup airbus_sla_event_enrichment.csv sla_id as SLA
| sort sort

| eval "Value Type" = if(isnull(kpi_group), " ", "Met Request")
| makemv "Value Type"

| rename kpi_group as "KPI Group", kpi_name as "KPI Name", kpi_type as "KPI Type", target as Target

| table "KPI Group" "KPI Name" Target "Value Type"
[| gentimes start=01/1/2017 end=12/31/2017 increment=1d
| eval month = "\"".strftime(starttime, "%B %Y")."\""
| dedup month
| stats list(month) as result
| nomv result
| return $result]

[niketn]

@analiaeg, can you report the code with code button which is 101010

Also if you can add couple of rows or sample data(mocked) from your table that would be helpful.

[kamlesh_vaghela]

@niketnilay,
Comment updated. Added Dashboard XML and CSS file.

HI @analiaeg,
Given example will display red, yellow & green signals in table cell using CSS. The table view has to page of 2 rows So you can traverse next-previous page.

Happy Splunking

[niketn]

Hi Kamlesh,

I think we would have to wait for analiaeg to provide more details. Based on the information provided so far, seems like they have a column for baseline which they are comparing against another column with multi-values. Hence I requested for more details on the field names and respective data.

Based on the details provided, seems like existing code is working except for the first page on loading the table. Once loaded it works when user navigate away and then back to the first page, so I had requested for a delay to be applied for table render function call using setTimeout(). Refer to one of the previous answers: https://answers.splunk.com/answers/588394/change-the-color-of-rows-in-a-table-based-on-text-1.html. This can eventually be changed to $(document).ready() or similar.

[kamlesh_vaghela]

HI

So Is it possible to use CustomRangeRenderer for applying css?

for eg.
kpi_table.js

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

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['count']).contains(cell.field);
        },
        render: function($td, cell) {

            // Conditions 
            if(cell.value=="red" || cell.value=="green" || cell.value=="yellow")
            {
                // apply css to cell with first condition
                $td.html("<div class='circle_"+cell.value+"'></div>")
            }
            else
            {
                // apply css to cell with else
                $td.html("<div class='align_center'>"+cell.value+"</div>")
            }
        }
    });

    //List of table IDs to add icon
    var tableIDs = ["KPI_TABLE_ID"];
    for (i=0;i<tableIDs.length;i++) {
        var sh = mvc.Components.get(tableIDs[i]);
        if(typeof(sh)!="undefined") {
            sh.getVisualization(function(tableView) {
                // Add custom cell renderer and force re-render
                tableView.table.addCellRenderer(new CustomRangeRenderer());
                tableView.table.render();
            });
        }
    }    
});

kpi_table.css

.circle_green { 
   width:1%;
   padding:10px 9px;
   margin:0 auto;
   border:0px solid #a1a1a1;
   border-radius:20px;
   background-color:rgb(7,245,7);
}
.circle_yellow { 
   width:1%;
   padding:10px 9px;
   margin:0 auto;
   border:0px solid #a1a1a1;
   border-radius:20px;
   background-color:rgb(245,245,0);
}
.circle_red { 
   width:1%;
   padding:10px 9px;
   margin:0 auto;
   border:0px solid #a1a1a1;
   border-radius:20px;
   background-color:rgb(245,7,7);
}

Dashboard XML..

<dashboard script="kpi_table.js" stylesheet="kpi_table.css">
  <label>KPI TABLE</label>
  <row>
    <panel>
      <table id="KPI_TABLE_ID">
        <search>
          <query>| makeresults | eval count="red" | append [| makeresults | eval count="green"] | append [| makeresults | eval count="yellow"]</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="count">2</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

If you need multiple columns then we can make few changes in search to make renderer works.

Thanks

[kamlesh_vaghela]

HI @analiaeg,
Are you using simple XML dashboard OR HTML dashboard?