About kamlesh_vaghela

kamlesh_vaghela · ‎06-02-2023

@anissabnk You can achieve such a format using your own HTML and CSS. You can try below sample code for your POC. <dashboard script="convert_to_html.js"> <label>HTML Table from SPL</label> <search id="mySearch"> <done> <set token="tokHTML">$result.data$</set> </done> <query>|makeresults count=10 | eval a=1 | accum a | eval NW="NW"+a, P="P"+a, NAOK="NAOK"+a, NAKO="NAKO"+a, TRMOK="TRMOK"+a, TRMKO="TRMKO"+a | table NW P NAOK NAKO TRMOK TRMKO</query> <earliest>-24h@h</earliest> <latest>now</latest> <sampleRatio>1</sampleRatio> </search> <row> <panel> <html> <div id="htmlPanelWithToken"> </div> </html> </panel> </row> <row> <panel> <html> <style> .th_td_class { background-color: chocolate; color: white; text-align: center; } .td_class { background-color: orange; color: white; border: 2px solid black; text-align: center; } .tr_class { background-color: chocolate; color: white; text-align: center; border: 2px solid black; } .td_content_class { text-align: center; border: 2px solid black; } </style> </html> </panel> </row> </dashboard> JS require([ 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!' ], function ($, mvc,) { var mySearch = mvc.Components.get("mySearch"); var mySearchResults = mySearch.data("results"); mySearchResults.on("data", function () { resultArray = mySearchResults.data().rows; $("#htmlPanelWithToken").html(""); var generateDataContent = ""; //Iterate Result set $.each(resultArray, function (index, value) { // Create proper HTML content from result // generateHTMLContent = "<table><tr><td>" + value[1] + "</td><td>" + value[2] + "</td></tr></table>"; //value[1] = data field //value[2] = data1 field generateDataContent = generateDataContent + `<tr> <td class="td_content_class">`+ value[0] + `</td> <td class="td_content_class">`+ value[1] + `</td> <td class="td_content_class">`+ value[2] + `</td> <td class="td_content_class">`+ value[3] + `</td> <td class="td_content_class">`+ value[4] + `</td> <td class="td_content_class">`+ value[5] + `</td> </tr>`; }) var generateHTMLContent = ` <table width="25%"> <thead> <tr> <td class="tr_class">F</td> <td class="tr_class">V</td> </tr> </thead> <tbody> <tr> <td class="td_content_class">N</td> <td class="td_content_class">W</td> </tr> <tr> <td class="td_content_class">P</td> <td class="td_content_class">P</td> </tr> <tr> <td class="td_content_class">D</td> <td class="td_content_class">123</td> </tr> </tbody> </table> <br/> <table width="100%"> <thead> <tr> <td colspan="2"></td> <td class="tr_class" colspan="2">NA</td> <td class="tr_class" colspan="2">TRM</td> </tr> <tr> <td class="td_class">NW</td> <td class="td_class">P</td> <td class="td_class">OK</td> <td class="td_class">KO</td> <td class="td_class">OK</td> <td class="td_class">KO</td> </tr> </thead> <tbody> `+ generateDataContent + ` </tbody> </table> <br /> <table width="50%"> <tbody> <tr> <td class="td_content_class">Total</td> <td class="td_content_class">W</td> <td class="td_content_class">P</td> <td class="td_content_class">11</td> <td class="td_content_class">10</td> <td class="td_content_class">1111</td> <td class="td_content_class">2222</td> </tr> </tbody> </table> `; $("#htmlPanelWithToken").html(generateHTMLContent); }); }); I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎06-01-2023

@rrovers You can use Javascript to achieve your requirement. I'm sharing the extended javascript code to you so can start. <dashboard script="convert_to_html.js"> <label>HTML from SPL</label> <search id="mySearch"> <done> <set token="tokHTML">$result.data$</set> </done> <query>| makeresults | eval data="<b>Network Map One </b><br></br>|-- Device 1: 10.100.100.4<br></br>|-- Device 2: 10.100.100.250<br></br>|-- Device 3: 10.100.3.42 (Mode: MASTER)<br></br>", data1="<b>Network Map Two</b><br></br>|-- Device 1: 10.100.100.4<br></br>|-- Device 2: 10.100.100.250<br></br>|-- Device 3: 10.100.3.42 (Mode: MASTER)<br></br>"</query> <earliest>-24h@h</earliest> <latest>now</latest> <sampleRatio>1</sampleRatio> </search> <row> <panel> <html> <div id="htmlPanelWithToken"> </div> </html> </panel> </row> </dashboard> convert_to_html.js require([ 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!' ], function ($, mvc,) { var mySearch = mvc.Components.get("mySearch"); var mySearchResults = mySearch.data("results"); mySearchResults.on("data", function () { resultArray = mySearchResults.data().rows; var generateHTMLContent = ""; $("#htmlPanelWithToken").html(generateHTMLContent); //Iterate Result set $.each(resultArray, function (index, value) { // console.log(index, value) console.log(index, value[0]) console.log(index, value[1]) console.log(index, value[2]) // Create proper HTML content from result generateHTMLContent = "<table><tr><td>" + value[1] + "</td><td>" + value[2] + "</td></tr></table>"; //value[1] = data field //value[2] = data1 field console.log(generateHTMLContent); }) $("#htmlPanelWithToken").html(generateHTMLContent); }); }); I hope this will help you. In case you required further help then please share more about your requirement with sample data and expected output. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-29-2023

@Renunaren Here I suggest displaying the trimmed value in table view and displaying the full value by expanding the table row. This is a sample search for trimming value. | makeresults | eval A="a b c d e f g h " | rex field=A "(?<displayA>^.*\n.*\n.*\n.\n)" And this is an example of "How to use Row expansion" https://community.splunk.com/t5/Dashboards-Visualizations/Receiving-quot-A-custom-JavaScript-error-caused-an-issue-loading/m-p/644630/highlight/true#M52646 Let me know if you need more help on this. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-28-2023

@damode1 Can you please try this? YOUR_SEARCH | spath | eval EventData = json_object("FileVersion", FileVersion,"Company",Company, "TerminalSessionId",TerminalSessionId, "UtcTime",UtcTime, "Product",Product) | eval NewJson = json_object("ID",ID, "Timestamp", Timestamp,"EventData",json(EventData)) | table _raw NewJson My Sample Search : | makeresults | eval _raw="{\"ID\": 1,\"Timestamp\": \"2023-05-18T05:07:59.940594300Z\",\"FileVersion\": \"10.0.17134.1 (WinBuild.160101.0800)\",\"Company\": \"Microsoft Corporation\",\"TerminalSessionId\": 0,\"UtcTime\": \"2018-08-20 15:18:59.929\",\"Product\": \"Microsoft® Windows® Operating System\",}" | spath | eval EventData = json_object("FileVersion", FileVersion,"Company",Company, "TerminalSessionId",TerminalSessionId, "UtcTime",UtcTime, "Product",Product) | eval NewJson = json_object("ID",ID, "Timestamp", Timestamp,"EventData",json(EventData)) | table _raw NewJson I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-28-2023

@noviceregex Can you please share some sample events from both sources and your expected output from those? KV

kamlesh_vaghela · ‎05-28-2023

@Jasmine Have you tried to achieve this by adding a custom click event on Submit button using JS Extention? KV

kamlesh_vaghela · ‎05-26-2023

@sweetie This kind of error only happens when some reference object is not properly defined. What I suggest, is just follow the code I have shared with you and add your changes. Just be careful when you define any object OR mention any id. KV

kamlesh_vaghela · ‎05-26-2023

@sweetie What is the console error? Did you check my above working example? KV

kamlesh_vaghela · ‎05-25-2023

@sweetie As you are using Splunk version 8.x.x there is no need to add any version in the dashboard. Can you please try this Sample Example? require([ 'splunkjs/mvc/tableview', 'splunkjs/mvc/chartview', 'splunkjs/mvc/searchmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function ( TableView, ChartView, SearchManager, mvc, _ ) { console.log("HIe"); // var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ // canRender: function (cell) { // return cell.field; // }, // render: function ($container, rowData) { // console.log(rowData.value); // $container.html(rowData.value) // } // }); var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({ initialize: function (args) { this._searchManager = new SearchManager({ preview: false }, { tokens: true, tokenNamespace: "submitted" }); this._TableView = new TableView({ managerid: this._searchManager.name, drilldown: 'cell' }); }, canRender: function (rowData) { return true; }, render: function ($container, rowData) { var processCell = _(rowData.cells).find(function (cell) { return cell.field === 'SID'; }); value = processCell.value // var tokens = mvc.Components.get("default") // var id = tokens.get("splunk_id") this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="' + value + '",c=1 | accum c ' }); $container.append(this._TableView.render().el); } }); var tableElement = mvc.Components.getInstance("table1"); tableElement.getVisualization(function (tableView) { // Add custom cell renderer, the table will re-render automatically. // tableView.table.addCellRenderer(new CustomRangeRenderer()); // tableView.render(); tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer()); }); }); <dashboard script="a.js" theme="dark" hideFilters="True"> <label>Label</label> <row> <panel> <table id="table1"> <search> <query>| makeresults count=10 | eval count=1 | accum count | eval SID = count</query> <earliest>-1w@w1</earliest> <latest>@w1</latest> </search> <option name="drilldown">row</option> <option name="refresh.display">progressbar</option> <drilldown> <condition></condition> </drilldown> </table> </panel> </row> </dashboard> Screenshot Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-23-2023

@sweetie Can you please share your JS and sample XML with dummy queries? May be with both I can help you with this. KV

kamlesh_vaghela · ‎05-23-2023

Yes @sweetie Modules should be required properly in Custom Javascript. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-22-2023

Glad to help you Happy Splunking KV

kamlesh_vaghela · ‎05-19-2023

@fredclown May be the below example will help you, Can you please try this? a.js require([ 'splunkjs/mvc/searchmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function ( SearchManager, mvc, _ ) { var tokens = mvc.Components.get("default"); var submittedTokens = mvc.Components.get('submitted'); var searhId1 = mvc.Components.get("searhId1"); searhId1.on('search:start', function (properties) { tokens.set("afterDone", "search in progress"); submittedTokens.set(tokens.toJSON()); }); searhId1.on('search:done', function (properties) { console.log("in search done", properties); tokens.set("afterDone", "search done"); submittedTokens.set(tokens.toJSON()); }); }); XML <dashboard script="a.js"> <label>Fire JavaScript After Search Panels are Done</label> <row> <panel> <table id="panelId1"> <search id="searhId1"> <query>index="_internal" | stats count by source | eval "Test Case" = source. "@@". count | eval "Color"= if(count>5000,"OK","KO")</query> <earliest>-1w@w1</earliest> <latest>@w1</latest> </search> <option name="drilldown">row</option> <option name="refresh.display">progressbar</option> </table> </panel> </row> <row> <panel> <title>After Done $$afterDone$$</title> <single> <search> <query>| makeresults | eval value= "$afterDone$" | table value</query> <earliest>-24h@h</earliest> <latest>now</latest> </search> <option name="drilldown">none</option> <option name="field">range</option> <option name="colorBy">value</option> </single> </panel> </row> </dashboard> Note: Just observe the Panel Search and JS code on Search start and done. You can do any logic execution and customisation during this event. I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-19-2023

@sweetie Can you please try this? I have corrected some code. require([ 'splunkjs/mvc/tableview', 'splunkjs/mvc/chartview', 'splunkjs/mvc/searchmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function ( TableView, ChartView, SearchManager, mvc, _ ) { var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({ initialize: function (args) { this._searchManager = new SearchManager({ id: 'details-search-manager', preview: false }); this._TableView = new TableView({ managerid: 'details-search-manager' }); }, canRender: function (rowData) { return true; }, render: function ($container, rowData) { var sourcetypeCell = _(rowData.cells).find(function (cell) { return cell.field === 'SID'; }); value = processCell.value; this._searchManager.set({ search: '|makeresults count=10 | eval a="A", value="' + value + '" ' }); } }); var tableElement = mvc.Components.getInstance("table1"); tableElement.getVisualization(function (tableView) { tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer()); }); }); I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-19-2023

@deepikagooty Can you please try this Sample JS Code? require([ 'splunkjs/mvc/tableview', 'splunkjs/mvc/chartview', 'splunkjs/mvc/searchmanager', 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function( TableView, ChartView, SearchManager, mvc, _ ) { console.log("HIe"); var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { return cell.field; }, render: function($container, rowData) { console.log(rowData.value); $container.html(rowData.value) } }); var EventSearchBasedRowExpansionRendererSecondLevel = TableView.BaseRowExpansionRenderer.extend({ initialize: function(args) { this._searchManager = new SearchManager({ preview: false }, { tokens: true, tokenNamespace: "submitted" }); this._TableView = new TableView({ managerid: this._searchManager.name, drilldown: 'cell' }); }, canRender: function(rowData) { return true; }, render: function($container, rowData) { var processCell = _(rowData.cells).find(function(cell) { return cell.field === 'a'; }); value = processCell.value // var tokens = mvc.Components.get("default") this._searchManager.set({ search: '|makeresults count=100 | eval b="B", value="'+value+'",c=2 | accum c '}); $container.append(this._TableView.render().el); } }); var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({ initialize: function(args) { this._searchManager = new SearchManager({ preview: false }, { tokens: true, tokenNamespace: "submitted" }); this._TableView = new TableView({ managerid: this._searchManager.name, drilldown: 'cell' }); this._TableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRendererSecondLevel()); }, canRender: function(rowData) { return true; }, render: function($container, rowData) { var processCell = _(rowData.cells).find(function(cell) { return cell.field === 'Test Case'; }); value = processCell.value // var tokens = mvc.Components.get("default") // var id = tokens.get("splunk_id") this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="'+value+'",c=1 | accum c '}); $container.append(this._TableView.render().el); } }); var tableElement = mvc.Components.getInstance("expand_with_events"); tableElement.getVisualization(function(tableView) { // Add custom cell renderer, the table will re-render automatically. tableView.table.addCellRenderer(new CustomRangeRenderer()); tableView.render(); tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer()); }); }); I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-18-2023

@sweetie Is it possible for you to share your sample custom JS code and Splunk version? KV

kamlesh_vaghela · ‎05-16-2023

@Razziat JS will always load first. When the dashboard is getting loaded, Splunk JS Extension will be loaded just before the dashboard is ready for use. Splunk JS Extension has 2 token models. default token model submitted token model https://dev.splunk.com/enterprise/docs/developapps/visualizedata/convertsimplexml/tokenmodels/ You need to write your javascript code according to the requirements and these two models. Eg, if you are customizing the TableView then you should declare the customization code in JS, which execute before the dashboard gets finished to load. And the same declared code will be executed on the basis of the lifecycle of that component (in this example, TableView). TableView is dependent on the SearchManager. When searching is done then TableView is getting populated and will be displayed, at this point, our defined Custom JS logic will be executed and will change the Table Row/Cell. Your XML code looks good to me. If you want your JS to be executed after dashboard loading then use below JS code and put your code in the SECTION. require([ 'splunkjs/mvc', 'underscore', 'splunkjs/mvc/simplexml/ready!' ], function( mvc, _ ) { console.log("HIe"); $(document).ready(function () { /*Add Your code here.*/ }); }); For further help, you can share your sample JS here OR you can message it to me. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎05-15-2023

@Razziat Can you please share your Sample Dashboard code? KV

kamlesh_vaghela · ‎04-26-2023

@Zer0sss Can you please share your sample XML and JS code? KV

kamlesh_vaghela · ‎04-10-2023

kamlesh_vaghela · ‎04-05-2023

@davidlang in such a case, you need to modify the event before indexing. With the below event, I have created a source type that will do the same for you. foo.json {"message": "{\"foo\": \"bar\"}"} {"message": "{\"foo\": \"bar\"}"} {"message": "{\"foo\": \"bar\"}"} {"message": "{\"foo\": \"bar\"}"} {"message": "{\"foo\": \"bar\"}"} props.conf [davidlang_source_type] DATETIME_CONFIG = CURRENT LINE_BREAKER = ([\r\n]+) NO_BINARY_CHECK = true SEDCMD-a = s/{\"message\":\s\"/{"message":/g SEDCMD-b = s/\"}$/}/g SEDCMD-c = s/\\"/"/g SHOULD_LINEMERGE = false category = Custom disabled = false pulldown_type = true INDEXED_EXTRACTIONS = json Note: Just use this trick on your original event. I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎04-05-2023

@nb662x Share your full sample event. we need _raw from your search. index=YOUR_INDEX | head 1| table _raw Copy and paste in a code block ( </>). This is code block KV

kamlesh_vaghela · ‎04-05-2023

@michaeler Can you please check this app for a working example? https://github.com/KamleshVaghela/splunk_dashboard_model_view_examples Please also go through my below answers. https://community.splunk.com/t5/Dashboards-Visualizations/Modal-Pop-up-to-show-Splunk-Panel-on-html-button-Click/td-p/578864 https://community.splunk.com/t5/Dashboards-Visualizations/Modal-Drill-down/m-p/555986 I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎04-05-2023

@abhisplunk1 Can you please try this? YOUR_SEARCH | rex field=_raw "<Data>(?<json_data>(?!<\/Data>)[\s\S]*)<\/Data>" max_match=0 | eval json_data = replace(json_data,""","\""), json_data = replace(json_data,"\n","") |table json_data | spath input=json_data I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

kamlesh_vaghela · ‎04-05-2023

@abhisplunk1 Can you please try this? YOUR_SEARCH | rex field=_raw "<Data>(?<json_data>(?!<\/Data>)[\s\S]*)<\/Data>" max_match=0 | eval json_data = replace(json_data,""","\""), json_data = replace(json_data,"\n","") |table json_data | spath input=json_data My Sample Search : | makeresults | eval _raw="<25>1 2023-04-03T13:12:32.0Z AH-1249259-001 EPOEvents - EventFwd [agentInfo@3401 tenantId=\"1\" bpsId=\"1\" tenantGUID=\"{00000000-0000-0000-0000-000000000000}\" tenantNodePath=\"1\2\"] <?xml version=\"1.0\" encoding=\"utf-8\"?> <EPOEvent><MachineInfo><AgentGUID>{8396cab6-ec77-11ea-2747-3448edc44e42}</AgentGUID><MachineName>KB89A2AEBECBD</MachineName> <RawMACAddress>12345</RawMACAddress> <IPAddress>12345</IPAddress> <AgentVersion>5.7.5.504</AgentVersion> <OSName>Windows 10</OSName> <TimeZoneBias>300</TimeZoneBias> <UserName>chill</UserName> </MachineInfo> <SoftwareInfo ProductName=\"BeyondTrust Privilege Management\" ProductVersion=\"23.1.0.259\" ProductFamily=\"Secure\"> <Event> <EventID>202256</EventID> <Severity>0</Severity> <GMTTime>2023-04-03T13:10:36</GMTTime> <LocalTime>2023-04-03T08:10:36</LocalTime> <CustomFields target=\"AvectoReportingEvents\"> <Data>{"Header" : {"AgentVersion" : "23.1.259.0", "Code" : "106", "EndpointType" : "MicrosoftWindows", "HostDomainName": "my.com", "RuleScriptStatus": "", "AuthMethods": [], "IdPAuthenticationUserName": "", "ConfigurationID": "be94d460-c4cb-4827-8f3b-5572727c54e6", "UACTriggered": 0 }} </Data> <EventId>106</EventId> <SentTime>2023-04-03T13:10:36Z</SentTime> <Version>23.1.0.259</Version></CustomFields></Event></SoftwareInfo></EPOEvent>" | rex field=_raw "<Data>(?<json_data>(?!<\/Data>)[\s\S]*)<\/Data>" max_match=0 | eval json_data = replace(json_data,""","\""), json_data = replace(json_data,"\n","") |table json_data | spath input=json_data I hope this will help you. Thanks KV If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

Posts	2640
Solutions	496
Karma Given	60
Karma Received	773
Member Since	‎09-23-2015

Online Status	Offline
Date Last Visited	Tuesday

Why am I Receiving "A custom JavaScript error caus...

How can we delete particular data from KVStore usi...

How to restrict time range picker to specific peri...

Is there any way to send Splunk indexed Data to an...

Are there any limitations of search string length ...

Why am I getting an error to start a fresh Splunk ...

Why AppInspect tool Fails check_lookup_files check...

Got Error: "The splunk daemon (splunkd) is already...

How to add custom validation on Configuration Page...

How to change app banner css when open search in s...

Re: Custom Table format- How to merge cells?

Re: How can I display the html in a field as separ...

Re: Need to fix the row height and extend the cell...

Re: How to convert multiple individual json object...

Re: How to display JSON array difference?

Re: How to achieve static value in dropdown list?

Re: Receiving "A custom JavaScript error caused an...

Re: Receiving "A custom JavaScript error caused an...

Re: Receiving "A custom JavaScript error caused an...

Re: Receiving "A custom JavaScript error caused an...

Re: Receiving "A custom JavaScript error caused an...

Re: Fire JavaScript After Search Panels are Done

Re: Fire JavaScript After Search Panels are Done

Re: Receiving "A custom JavaScript error caused an...

Re: How can I achieve a two level row expansions f...

Re: Receiving "A custom JavaScript error caused an...

Re: JS script loaded before searches in a dashboar...

Re: JS script loaded before searches in a dashboar...

Re: A custom JavaScript error caused an issue load...

Re: How to parse escaped json at index time?

Re: How to parse escaped json at index time?

Re: How to extract the json based key value pair f...

Re: Drilldown search displayed as pop-up box?

Re: How to achieve auto field extraction of nested...

Re: How to achieve auto field extraction of nested...