topic Re: Not able to apply dynamic image through JS in All Apps and Add-ons

Not able to apply dynamic image through JS

kajolsharma — Fri, 25 Jun 2021 10:44:08 GMT

Hi,

Want to apply below arrow dynamically in my dashboard. Hav used custom JS and CSS for it. However, it is not working for my query :

Whereas it is working for |makeresults | eval A ="UP"| eval B="DOWN" | fields B.Not able to understand y though. Can you guys pls help here urgently ?

Re: Not able to apply dynamic image through JS

kamlesh_vaghela — Fri, 25 Jun 2021 13:37:37 GMT

@kajolsharma

It should work with your search as well. Can you please your sample code for this? Meanwhile you can try this search also.

index = *highjump_server* Server_location=Abilene Status_Code=* | stats sum(Status_Code) AS Status | eval B=case (Status=0,"UP",Status=1,"DOWN",1=1,"DOWN") | eval _time=now() | table B _time

Re: Not able to apply dynamic image through JS

kajolsharma — Fri, 25 Jun 2021 17:11:07 GMT

Thanks Kamlesh it worked.

Meanwhile I hav got another issue ,the JS what i hav written works for single panel id. However i hav 19 such panels. How should i modify it ?Any suggestions. Below is JS which i am using :

require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView) { var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { return cell.field; }, render: function($td, cell) { var value = cell.value; if(value=="UP" ) { $td.html("<div class='up'> </div>") } else if(value=="DOWN") { $td.html("<div class='down'> </div>") } else if(value=="UNKNOWN" || value=="N/A") { $td.html("<div class='unknown'> </div>") } else if(value=="WARN") { $td.html("<div class='warn'> </div>") } } }); var sh = mvc.Components.get("sample"); if(typeof(sh)!="undefined") { sh.getVisualization(function(tableView) { // Add custom cell renderer and force re-render tableView.table.addCellRenderer(new CustomRangeRenderer()); tableView.table.render(); }); } });

Re: Not able to apply dynamic image through JS

kamlesh_vaghela — Fri, 25 Jun 2021 18:07:49 GMT

Yes @kajolsharma

You can apply the common logic as many panels you want.

Just check below JS. I have added some logic for multiple panels.

require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView) { var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { return cell.field; }, render: function($td, cell) { var value = cell.value; if (value == "UP") { $td.html("<div class='up'> </div>") } else if (value == "DOWN") { $td.html("<div class='down'> </div>") } else if (value == "UNKNOWN" || value == "N/A") { $td.html("<div class='unknown'> </div>") } else if (value == "WARN") { $td.html("<div class='warn'> </div>") } } }); //List of table IDs to add icon var tableIDs = ["sample", "sample1", "sample2", "samplen", "sample19"]; 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(); }); } } });

I hope this will help you.

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Re: Not able to apply dynamic image through JS

kajolsharma — Fri, 25 Jun 2021 17:54:34 GMT

I think there is a slight modification

//List of table IDs to add icon var tableIDs = ["sample", "sample1", "sample2", "samplen", "sample19"]; for (i = 0; i < tableIDs.length; i++) { //var sh = mvc.Components.get("sample"); 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(); }); } } });

correction

Re: Not able to apply dynamic image through JS

kamlesh_vaghela — Fri, 25 Jun 2021 18:08:29 GMT

Yes @kajolsharma I have updated my answer.

Glad to help you. 🙂

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Re: Not able to apply dynamic image through JS

kajolsharma — Mon, 28 Jun 2021 06:19:59 GMT

Hi, I am not able to remove below scrollbar. Any suggestions?

Re: Not able to apply dynamic image through JS

kamlesh_vaghela — Mon, 28 Jun 2021 06:33:05 GMT

@kajolsharma

Can you please share your code?

Re: Not able to apply dynamic image through JS

kajolsharma — Mon, 28 Jun 2021 06:39:14 GMT

<panel id="sk1"> <title>ABILENE</title> <html> <head> <style> .down { background-image: url('/static/app/ERPTower/downarrow.png') !important; background-repeat: no-repeat !important; background-size: 50px 50px; !important; width: 280px; !important; height: 100px; !important; background-position: center; !important; position: relative; !important; } .up { background-image: url('/static/app/ERPTower/up2.png') !important; background-repeat: no-repeat !important; background-size: 50px 50px; !important; width: 280px; !important; height: 100px; !important; background-position: center; !important; position: relative; !important; } </style> </head> </html> <html> <div> <img class="center" height="240px" width="220px" src="/static/app/ERPTower/warehouse2.png"/> </div> </html> <table id="sample"> <search>  <query>index = *highjump_server* | search Server_location=Abilene| stats sum(Status_Code) AS Status | eval B=case (Status=0,"UP",Status=1,"DOWN") |eval _time=now() | table B|rename B as " "</query> <earliest>$time.earliest$</earliest> <latest>$time.latest$</latest> </search> <option name="drilldown">cell</option> <option name="refresh.display">progressbar</option> <drilldown> <link target="_blank">/app/ERPTower/high_jump_kpis_in_progress</link> </drilldown> </table> <html id="alertbar"> <div> <span class="fas fa-exclamation-triangle" style="color: red; margin-right: 5px; margin-left: 5px;"/> <a href="batch_alert_analytics" target="_new" style="color: white; margin-right:5px;">Notifications: $sd$</a> </div> </html> <html> <style> div#alertbar { bottom: 0px; background: #4d4e61; border-radius: 0px 0px 5px 5px; vertical-align: bottom; position: absolute; } #sk1{ width: 20% !important; align: center !important; text-align: center !important; padding: 0px !important; margin: 0px 0px 0px 0p !important; } </style> </html> </panel>

Re: Not able to apply dynamic image through JS

kamlesh_vaghela — Mon, 28 Jun 2021 08:38:27 GMT

@kajolsharma

I'm not able to reproduce the issue. But you can try overflow: hidden;.

Re: Not able to apply dynamic image through JS

kajolsharma — Mon, 05 Jul 2021 08:42:26 GMT

How can we implement tooltip for the below arrow ? Tooltip can include search query which gives results for which server is UP....For example: Webserver: Up