Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
- About spkriyaz
spkriyaz
Path Finder
Member since:
06-04-2020
07-04-2023
Community Statistics
| Posts | 49 |
| Solutions | 1 |
| Karma Given | 8 |
| Karma Received | 2 |
| Member Since | 06-04-2020 |
Activity Feed
- Posted Extension for the existing javascript and css created for acknowledging errors? on Dashboards & Visualizations. 06-27-2023 07:12 AM
- Posted Re: Why am I Receiving "A custom JavaScript error caused an issue loading your dashboard"? on Dashboards & Visualizations. 06-26-2023 09:21 AM
- Karma Re: Why am I Receiving "A custom JavaScript error caused an issue loading your dashboard"? for kamlesh_vaghela. 06-26-2023 09:20 AM
- Posted Re: Receiving "A custom JavaScript error caused an issue loading your dashboard"? on Dashboards & Visualizations. 06-22-2023 10:10 AM
- Posted How to represent two fields values in row wise and one field value column wise in Splunk table? on Splunk Search. 06-01-2022 08:39 AM
- Posted Re: Table row expansion with dynamic search in the JS on Building for the Splunk Platform. 07-30-2021 03:12 AM
- Karma Re: Table row expansion with dynamic search in the JS for kamlesh_vaghela. 07-30-2021 03:12 AM
- Posted Re: Table row expansion with dynamic search in the JS on Building for the Splunk Platform. 07-30-2021 12:41 AM
- Karma Re: Table row expansion with dynamic search in the JS for kamlesh_vaghela. 07-29-2021 10:45 AM
- Posted Re: Table row expansion with dynamic search in the JS on Building for the Splunk Platform. 07-29-2021 10:39 AM
- Posted Re: Table row expansion with dynamic search in the JS on Building for the Splunk Platform. 07-29-2021 09:38 AM
- Posted Re: Table row expansion with dynamic search in the JS on Building for the Splunk Platform. 07-29-2021 07:57 AM
- Posted Re: custom row expansion on Building for the Splunk Platform. 07-29-2021 07:21 AM
- Posted Table row expansion with dynamic search in the JS on Building for the Splunk Platform. 07-29-2021 07:19 AM
- Tagged Table row expansion with dynamic search in the JS on Building for the Splunk Platform. 07-29-2021 07:19 AM
- Posted Re: custom row expansion on Building for the Splunk Platform. 07-29-2021 07:07 AM
- Posted Re: custom row expansion on Building for the Splunk Platform. 07-29-2021 06:13 AM
- Tagged Re: custom row expansion on Building for the Splunk Platform. 07-29-2021 06:13 AM
- Posted Line chart color in my dashboard fades out on Dashboards & Visualizations. 04-27-2021 05:02 AM
- Tagged Line chart color in my dashboard fades out on Dashboards & Visualizations. 04-27-2021 05:02 AM
Topics I've Started
| Subject | Karma | Author | Latest Post |
|---|---|---|---|
| 0 | |||
| 0 | |||
| 0 | |||
| 0 | |||
| 0 | |||
| 0 | |||
| 0 | |||
| 0 | |||
| 0 | |||
| 0 |
06-27-2023
07:12 AM
Hi
We had a javascript and css created to acknowledge the errors in Splunk dashboard. Reference link is here https://community.splunk.com/t5/Dashboards-Visualizations/Need-help-in-applying-checkbox-in-splunk-table-and-saving-the-on/m-p/503603#M33311
It needs a feature "SELECT ALL" option at the top of the row to select all the errors in that particular page. So that we can acknowledge the errors at one instance. Current logic, we are clicking the tick box one by one before pressing the acknowledge button. Is it possible to append this logic in the existing JS without breaking current logic?
Please refer the JS, XML and CSS attached
CSS:
/* The standalone checkbox square*/
.checkbox {
width:0px;
height:0px;
border: 2px solid #000;
display: inline-block;
}
/* This is what simulates a checkmark icon */
.checkbox.checked:after {
content: '';
display: block;
width: 2px;
height: 7px;
/* "Center" the checkmark */
position:relative;
top:1px;
left:-8px;
border: solid black;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox, .radio {
min-height: 12px;
padding-left: 12px;
}
td.numeric, th.numeric {
text-align: left;
}
#myTable tr.range-acked td {
background-color: #82e566 !important;
}
#myTable tr.range-not-acked td {
background-color: #ff0000b3 !important;
}
JS:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
// Access the "default" token model
var tokens = mvc.Components.get("default");
var selected_values_array = [];
var submittedTokens = mvc.Components.get('submitted');
console.log("This is Multi-select table JS");
// Custom renderer for applying checkbox.
var CustomRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
return _(['Tick']).contains(cell.field);
},
render: function ($td, cell) {
var cell_value = cell.value.split("|")[0];
var ack_value = cell.value.split("|")[1];
var ack_flag = ack_value !== "";
console.log(cell.value,ack_flag,ack_value);
var div = (ack_flag ? $('<div>') :$('<div>').attr({
"id": "chk-number" + cell_value,
"value": cell_value
}).addClass('checkbox').click(function () {
if ($(this).attr('class') === "checkbox") {
selected_values_array.push($(this).attr('value'));
$(this).removeClass();
$(this).addClass("checkbox checked");
console.log(selected_values_array);
} else {
$(this).removeClass();
$(this).addClass("checkbox");
var i = selected_values_array.indexOf($(this).attr('value'));
if (i != -1) {
selected_values_array.splice(i, 1);
}
console.log(selected_values_array);
}
}))
var b = (ack_flag ? $td.addClass('range-cell').addClass('range-acked') : $td.addClass('range-cell').addClass('range-not-acked'));
div.appendTo($td);
}
});
//List of table ID
var sh = mvc.Components.get("myTable");
if (typeof(sh) != "undefined") {
sh.getVisualization(function (tableView) {
tableView.on('rendered', function() {
console.log("Output 1");
setTimeout(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() {
console.log("Output 2");
$(this).parents('tr').addClass(this.className);
console.log(this.className);
});
console.log("Output 3");
},100);
});
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRenderer());
tableView.table.render();
});
}
// Disabling button while search is running
var mysearch = mvc.Components.get('mysearch');
var mainSearch = mvc.Components.get('mainSearch');
var myrevertsearch = mvc.Components.get('myrevertsearch');
var myjirasearch = mvc.Components.get('myjirasearch');
mysearch.on('search:start', function (properties) {
$("#mybutton").attr('disabled', true);
});
mysearch.on('search:done', function (properties) {
$("#mybutton").attr('disabled', false);
mainSearch.startSearch();
});
myrevertsearch.on('search:done', function (properties) {
console.log("Revert Search Done");
$("#myrevertbutton").attr('disabled', false);
mainSearch.startSearch();
console.log("Main Search Done");
});
myjirasearch.on('search:start', function (properties) {
$("#myjirabutton").attr('disabled', true);
});
myjirasearch.on('search:done', function (properties) {
$("#myjirabutton").attr('disabled', false);
mainSearch.startSearch();
});
$(document).ready(function () {
//setting up tokens with selected value.
$("#mybutton").on("click", function (e) {
e.preventDefault();
tokens.set("mytoken", selected_values_array.join());
submittedTokens.set(tokens.toJSON());
$("#mybutton").attr('disabled', true);
});
$("#myrevertbutton").on("click", function (e) {
e.preventDefault();
myrevertsearch.startSearch();
$("#myrevertbutton").attr('disabled', true);
console.log("Hiee");
});
$("#myjirabutton").on("click", function (e) {
e.preventDefault();
tokens.set("myjiratoken", selected_values_array.join());
submittedTokens.set(tokens.toJSON());
$("#myjirabutton").attr('disabled', true);
});
});
});
XML:
<form version="1.1" script="jiraselect.js" stylesheet="multiselect_color.css" hideEdit="true" isVisible="true" hideAppBar="true">
<label>Error Acknowledgment UI</label>
<search id="ram_inst_search" ref="rpt_ram_institution"></search>
<search id="mysearch">
<query> |inputlookup $dash$ | dedup ID | where ID IN ($mytoken$)
| eval Ack=now(),Ack_time="UPD",Ack_By="$env:user_email$"+","+strftime(Ack,"%c")
| outputlookup $dash$ append=True</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<search id="myjirasearch">
<query> |inputlookup $dash$ | dedup ID | where ID IN ($myjiratoken$)
| eval Ack=now(),Ack_time="JIRA",Ack_By="$env:user_email$"+","+strftime(Ack,"%c")
| eval Message_Text = "Update from SD to raise JIRA ticket - "+Message_Text
| eval Message_Text= if(isnull(Ack_By) AND LIKE(Message_Text,"%Update from SD to raise JIRA%"),substr(Message_Text,39,len(Message_Text)),Message_Text)
| outputlookup $dash$ append=True</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<search id="myrevertsearch">
<query> |inputlookup $dash$ | where ID = "$UnAckID$"
| eval Ack="",Ack_time="",Ack_By=""
| eval Message_Text= if(LIKE(Message_Text,"%Update from SD to raise JIRA%"),substr(Message_Text,39,len(Message_Text)),Message_Text)
| outputlookup $dash$ append=True</query>
</search>
<!-- Information panel -->
<fieldset submitButton="true" autoRun="false">
<input type="radio" token="dash" searchWhenChanged="true">
<label>Choose Current/Historic Data</label>
<choice value="ram_error_ack_kv">Monthly</choice>
<choice value="ram_error_ack_kv_bkup">Historic</choice>
<default>ram_error_ack_kv</default>
<initialValue>ram_error_ack_kv</initialValue>
</input>
<input type="time" token="time1" searchWhenChanged="true">
<label>Time Window</label>
<default>
<earliest>-2h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="dropdown" token="inst" searchWhenChanged="true">
<label>Institution EMEA</label>
<choice value="*">ALL</choice>
<default>*</default>
<fieldForLabel>Institution_name</fieldForLabel>
<fieldForValue>Institution</fieldForValue>
<search>
<query>|inputlookup emea_institution_kv_data
| join type=outer Institution
[ | inputlookup institution_name.csv
| sort institution_number
| eval Institution=institution_number]
| eval Institution_name=if(isnull(institution_name),substr(Institution,7,2)+" "+"Inst",institution_name)
| table Inst_desc Institution Institution_name</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
</input>
<input type="dropdown" token="ackby" searchWhenChanged="true">
<label>Acknowledged By</label>
<choice value="*">ALL</choice>
<default>*</default>
<fieldForLabel>Ack_name</fieldForLabel>
<fieldForValue>Ack_name</fieldForValue>
<search>
<query>|inputlookup acknowledged_names.csv</query>
<earliest>-7d@h</earliest>
<latest>now</latest>
</search>
</input>
<input type="dropdown" token="ackflag" searchWhenChanged="true">
<label>Acknowledged (Y/N)</label>
<choice value="*">ALL</choice>
<choice value="Yes">Yes</choice>
<choice value="No">No</choice>
<default>*</default>
<initialValue>Yes</initialValue>
</input>
<input type="text" token="UnAckID" searchWhenChanged="true">
<label>Enter Un Ack ID</label>
</input>
<input type="text" token="error" searchWhenChanged="true">
<label>Type Error String here</label>
<default></default>
</input>
</fieldset>
<row>
<panel>
<html>
<h3>
<a href="https://de-splunk.1dc.com/en-US/manager/TA-omnipay-platform/admin/macros/error_skiplist?f_ns=TA-omnipay-platform&uri=%2FservicesNS%2Fnobody%2FTA-omnipay-platform%2Fadmin%2Fmacros%2Ferror_skiplist&action=edit&ns=TA-omnipay-platform" target="blank">
<font color="blue">Click to Update Error Skip List</font>
</a>
</h3>
<style>
div.fieldset.dashboard-form-globalfieldset div.dashboard-element.html.dashboard-element-html {
display: inline-block;
}
</style>
<div>
<input type="button" id="mybutton" value="Ack Selected Rows"/>
<input type="button" id="myrevertbutton" value="Un Ack Entered Id"/>
<input type="button" id="myjirabutton" value="Ack and Create Jira Ticket"/>
<a href="https://de-splunk.1dc.com/en-US/app/TA-omnipay-platform/ram_error_dashboard" class="btn btn-primary" text-align="right">Refresh</a>
</div>
</html>
</panel>
</row>
<row>
<panel>
<html>
<div class="imgheader">
<div style="text-align: right;">
<h4>
<a data-toggle="modal" data-target="#Help_modal">
<font color="blue">Help, information for this dashboard</font>
</a>
</h4>
</div>
</div>
<style>
#Help_modal.dropdown-menu {
float: left;
min-width: 421px;
top: -1000% !important;
left: 40% !important;
}
.close {
text-align: right;
border-radius: 1px 2px 2px 2px;
<!--width: 30% !important;
height: 600px !important;-->
}
pre {
text-align: left;
}
.modal-footer {
background: #ffe0 !important;
padding: 1px 1px 1px 1px;
}
</style>
<!--<div class="modal custom-modal-60 fade" id="Help_modal" tabindex="-1" role="dialog" aria-labelledby="Help_modal_Label">-->
<div class="dropdown-menu other-menu shared-poptart close" id="Help_modal" tabindex="-1" role="dialog" aria-labelledby="Help_modal_Label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"/>
</button>-->
<div style="text-align: left;">
<h4 class="modal-title" id="Help_modal_Label">Dashboard:</h4>
</div>
</div>
<pre>
<b>Dashboard Information</b>
This dashboard is for acknowledging or unacknowledge errors
<p>
<b>For queries or feedback on this dashboard, mail to</b>:<b>
</p>
</pre>
<!--<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>-->
</div>
</div>
</div>
</html>
</panel>
</row>
<row>
<panel>
<html>
<style>
<!--#test h2 {
text-align: center !important;
background-color: aliceblue;
}-->
.dashboard-body {
padding: 2px 2px 2px 2px;
<!--color: #3c444d;-->
color: #ce8820;
background-color: #ffffff;
min-height: 500px;
}
.dashboard-row .dashboard-panel h2.panel-title {
text-align: center !important;
background-color: mistyrose;
border: 1px solid black;
font-size: 21px;
font-weight: bold;
padding: 12px 2px 12px 2px;
margin: 2px 2px 2px 2px;
}
.dashboard-row .dashboard-panel .panel-head h3 {
text-align: center !important;
background-color: rgba(0, 164, 253, 0.37);
}
.dashboard-row .dashboard-panel .panel-body.html, .dashboard-row .dashboard-panel .panel-body.splunk-html {
padding: 0px !important;
}
td.numeric, th.numeric {
text-align: center !important;
}
.table td, .table th {
text-align: left;
color: black !important;
border: 1px solid black !important;
font-size: 13.5px;
}
label {
font-weight: bold;
}
.table .sorts a {
color: black;
font-weight: 500;
font-size: 14.3px;
}
.fieldset {
margin-bottom: -17px;
}
.dashboard-header h1 {
font-size: 30px;
font-weight: 700;
line-height: 76px;
text-align: center;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
background-color: coral;
color: #3c444d;
}
.dashboard-header {
margin-bottom: 10px;
min-height: 28px;
background: chocolate;
padding: 2px;
}
.dashboard-row .dashboard-cell {
float: left;
<!--background-color: darkslategrey; -->
}
.results-table {
color: black;
}
.SimpleResultsTable table.simpleResultsTable {
white-space:pre-line;
}
#myTable tr.range-acked td {
background-color: #82e566 !important;
border: 1px solid black;
}
#myTable tr.range-not-acked td {
background-color: #ff6363 !important;
border: 1px solid black;
}
.modal-header .close {
top: 20px;
right: -220px;
margin-top: -2px;
position: unset;
background-color: none;
border: 1px solid transparent;
color: #5c6773;
-webkit-box-shadow: none;
box-shadow: none;
text-decoration: none;
text-shadow: none;
-webkit-transition: background .2s,border .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
transition: background .2s,border .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
transition: background .2s,border .2s,box-shadow .2s,text-decoration .2s;
transition: background .2s,border .2s,box-shadow .2s,text-decoration .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
-webkit-filter: none;
filter: none;
}
</style>
</html>
<table id="myTable">
<search id="mainSearch">
<query>|inputlookup $dash$
| rename "Package_Name,Procedure_Name,File_Name,Host_Name" AS Package_Name_Procedure_Name_File_Name_Host_Name
| search `error_skiplist`
| dedup ID
| eval fields=split(Ack_By,",") | eval Ack_name=mvindex(fields,0)
| eval Ack_name = if(isnotnull(Ack_name),Ack_name,"NA")
| eval ack_flag=if(isnotnull(Ack_By),"Yes","No")
| search Institution=$inst$ Platform="EMEA" Ack_name=$ackby$ ack_flag=$ackflag$ Message_Text="*$error$*"
| eval _time=strptime(Date_Time,"%d-%m-%Y %H:%M:%S")
| convert mstime(_time) AS ms_time
| addinfo
| where ms_time >= info_min_time AND ms_time <= info_max_time
| eval Ack=if(isnull(Ack_time),"",Ack_time)
| eval Tick=ID."|".Ack
| eval "Program_ID Program_Name" = Program_ID+","+Program_Name | makemv delim="," "Program_ID Program_Name"
| makemv delim="," Package_Name_Procedure_Name_File_Name_Host_Name
| makemv delim="," Ack_By
| rex max_match=100 field=Message_Text "(?<split__regex>.{0,100}(?:\s|$)|[^\s]+)" | rename split__regex as Message_Text
| table Tick ID ms_time Institution Date_Time Ack Ack_By Ack_time "Program_ID Program_Name", Program_Run_ID Package_Name_Procedure_Name_File_Name_Host_Name Message_Text email
| sort 0 - ms_time
| eval skip_ram_user=if(like(Package_Name_Procedure_Name_File_Name_Host_Name,"%RAM%"),1,if(like(Package_Name_Procedure_Name_File_Name_Host_Name,"%ram%"),1,0))
| where skip_ram_user != 1
| fields - email Ack ms_time Ack_name Ack_time skip_ram_user</query>
<earliest>$time1.earliest$</earliest>
<latest>$time1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="count">25</option>
<option name="drilldown">row</option>
<option name="refresh.display">progressbar</option>
<option name="wrap">true</option>
<drilldown>
<condition field="*"></condition>
</drilldown>
</table>
</panel>
</row>
<row depends="noshow">
<panel>
<html>
<style>
.input-dropdown {
min-width: 190px !important;
width: 190px !important;
max-width: 170px !important;
}
.splunk-dropdown .select2-container {
min-width: 190px !important;
width: 190px !important;
max-width: 170px !important;
}
.input-text {
min-width: 190px !important;
width: 190px !important;
max-width: 170px !important;
}
.input-text > input[type="text"] {
min-width: 190px !important;
width: 190px !important;
max-width: 170px !important;
}
</style>
</html>
</panel>
</row>
</form>
... View more
Labels
- Labels:
-
CSS
-
dashboard
-
javascript
06-26-2023
09:21 AM
Hi @kamlesh_vaghela , This solution worked. Thanks!
... View more
06-22-2023
10:10 AM
Hi @kamlesh_vaghela , I used your javascript it restricted the error popping out from the dashboard but it impacts the filter that are in the dashboard. The filter dropdown doesn't work and after few clicks the filter vanishes. I have copied the console details below.
... View more
06-01-2022
08:39 AM
HI,
I am trying to recreate the same structure in Splunk which was created in excel. I have five fields week, total transactions, codes, count of codes and code percentage.
Sample data are shown below the first two column in blue should be represented in row wise and next three column in orange should be represented in column wise in Splunk table.
I want to display the week and total transaction in row wise followed by column codes showing the count and percentage of it in column wise for each code like below.
Please let me know if it is possible?
Thanks
... View more
Labels
- Labels:
-
table
07-30-2021
03:12 AM
It's perfect now 😃 Thank you @kamlesh_vaghela
... View more
07-30-2021
12:41 AM
Yes, I did that to get rid of the query and key column from the parent table. But, there is bug which I mentioned with the screenshot. Did you get a chance to see my screenshot? When I flip back to the same row which I opened earlier this error pops out.
... View more
07-29-2021
10:39 AM
Thanks @kamlesh_vaghela, I did find a solution to get rid of the key column, I replaced the key with the process in the JS. Since, process column is required in the parent table now process will act as a click event and make the row expansion work as I expected. I found a bug. When I try to expand the row in a sequence it works fine but when I try to expand the row which I already expanded once then I am getting error. For example, I have 3 rows 1,2 and 3. If I click on 1 then 2 then 3 and again if I click on 1 it throws below error. The loop doesn't work.
... View more
07-29-2021
09:38 AM
Thanks @kamlesh_vaghela, I could find there was an issue with the search I corrected it and the could see the value in the expanded row. But, I have one more issue like the "query" column is getting populated in the parent table. If I try to hide using the fields option or css then "query" column won't be available for the JS to do the row expand. Is there any way to hide the "query" column from the parent table and make the row expansion work?
... View more
07-29-2021
07:57 AM
Hi @kamlesh_vaghela, I changed the search like below in your JS and tried. It didn't work. Still the row expand shows "No result found" //update the search with the sourcetype that we are interested in this._searchManager.set({ search: 'query="' + processCell.value + '" ' }); Thanks,
... View more
07-29-2021
07:21 AM
Hi @kamlesh_vaghela, I created a new question https://community.splunk.com/t5/Developing-for-Splunk-Enterprise/Table-row-expansion-with-dynamic-search-in-the-JS/td-p/561377 Thanks 🙂
... View more
07-29-2021
07:19 AM
Hi, Below is the JS which I have for table row expansion which works fine for my requirement. I want the search given in the JS should be passed from my Splunk dashboard instead of hardcoding it here. This is because I don't want to update the JS whenever I want to add or delete anything in my search. Below search in JS which I want to be passed through Splunk dynamically instead of hardcoding in JS: this._searchManager.set({ search: 'index=idx_omn source=vs.csv | eval key=process+" "+oprocess_start_date | search key="' + processCell.value + '" | stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins values(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift values(local_amt) as local_amt values(eur_local) as eur_local BY file_number_list| table process,oprocess_start_date,oprocess_end_date,file_number_list,otrans,otpm,oelapsed_mins,total_count,local_currency,local_swift,local_amt,eur_local '}); XML: <dashboard script="custom_table_row_expansion1.js">
<label>Visa row expansion</label>
<row>
<panel>
<table id="expand_with_events">
<search>
<query>index="idx_omn" source="vs.csv"
| eval key=process+" "+oprocess_start_date
| stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins sum(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift sum(local_amt) as local_amt sum(eur_local) as eur_local BY key
| table process oprocess_start_date oprocess_end_date otrans otpm oelapsed_mins total_count local_currency local_swift local_amt eur_local key</query>
<earliest>0</earliest>
<latest></latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard> JS: 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) {
// initialize will run once, so we will set up a search and a chart to be reused.
this._searchManager = new SearchManager({
id: 'details-search-manager',
preview: false
});
//this._chartView = new ChartView({
// managerid: 'details-search-manager',
// 'charting.legend.placement': 'none'
//});
this._TableView = new TableView({
id: 'TestTable',
managerid: 'details-search-manager',
drilldown: 'cell'
});
},
canRender: function(rowData) {
// Since more than one row expansion renderer can be registered we let each decide if they can handle that
// data
// Here we will always handle it.
return true;
},
render: function($container, rowData) {
// rowData contains information about the row that is expanded. We can see the cells, fields, and values
// We will find the key(process and start date) cell to use its value
var processCell = _(rowData.cells).find(function (cell) {
return cell.field === 'key';
});
//update the search with the key that we are interested in
this._searchManager.set({ search: 'index=idx_omn source=vs.csv | eval key=process+" "+oprocess_start_date | search key="' + processCell.value + '" | stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins values(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift values(local_amt) as local_amt values(eur_local) as eur_local BY file_number_list| table process,oprocess_start_date,oprocess_end_date,file_number_list,otrans,otpm,oelapsed_mins,total_count,local_currency,local_swift,local_amt,eur_local '});
// $container is the jquery object where we can put out content.
// In this case we will render our chart and add it to the $container
//$container.append(this._chartView.render().el);
$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.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
}); I did try by creating a field called "query" which has the query for the row expansion and passed it to the below JS but it didn't return any result. Please ignore this approach if there is any better solution available. XML for passing the entire query to column called query: <dashboard script="custom_table_row_expansion2.js">
<label>Visa row expansion Clone</label>
<row>
<panel>
<table id="expand_with_events">
<search>
<query>index="idx_omn" source="vs.csv"
| eval key=process+" "+oprocess_start_date
| eval query1 = "idx_omn source=\"visabase.csv\" | search key =\""
| eval query2 = "\"| stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins values(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift values(local_amt) as local_amt values(eur_local) as eur_local BY file_number_list"
| eval query = query1+key+query2
| stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins sum(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift sum(local_amt) as local_amt sum(eur_local) as eur_local values(query) as query BY key
| table process oprocess_start_date oprocess_end_date otrans otpm oelapsed_mins total_count local_currency local_swift local_amt eur_local key query</query>
<earliest>0</earliest>
<latest></latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard> JS for the new try which didn't redturn any result: 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) {
// initialize will run once, so we will set up a search and a chart to be reused.
this._searchManager = new SearchManager({
id: 'details-search-manager',
preview: false
});
//this._chartView = new ChartView({
// managerid: 'details-search-manager',
// 'charting.legend.placement': 'none'
//});
this._TableView = new TableView({
id: 'TestTable',
managerid: 'details-search-manager',
drilldown: 'cell'
});
},
canRender: function(rowData) {
// Since more than one row expansion renderer can be registered we let each decide if they can handle that
// data
// Here we will always handle it.
return true;
},
render: function($container, rowData) {
// rowData contains information about the row that is expanded. We can see the cells, fields, and values
// We will find the sourcetype cell to use its value
var processCell = _(rowData.cells).find(function (cell) {
return cell.field === 'query';
});
//update the search with the sourcetype that we are interested in
this._searchManager.set({ search: 'index= "' + processCell.value + '" '});
// $container is the jquery object where we can put out content.
// In this case we will render our chart and add it to the $container
//$container.append(this._chartView.render().el);
$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.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
}); Thanks,
... View more
- Tags:
- javascript
Labels
- Labels:
-
other
07-29-2021
07:07 AM
Hi @kamlesh_vaghela, Thank you for acknowledging my question. Below is the JS which I have for table row expansion which works fine for my requirement. I want the search given in the JS should be passed from my Splunk dashboard instead of hardcoding it here. This is because I don't to update the JS whenever I want to add or delete anything in my search. Below search in JS which I want to be passed through Splunk dynamically instead of hardcoding in JS: this._searchManager.set({ search: 'index=idx_omn source=vs.csv | eval key=process+" "+oprocess_start_date | search key="' + processCell.value + '" | stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins values(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift values(local_amt) as local_amt values(eur_local) as eur_local BY file_number_list| table process,oprocess_start_date,oprocess_end_date,file_number_list,otrans,otpm,oelapsed_mins,total_count,local_currency,local_swift,local_amt,eur_local '}); XML: <dashboard script="custom_table_row_expansion1.js">
<label>Visa row expansion</label>
<row>
<panel>
<table id="expand_with_events">
<search>
<query>index="idx_omn" source="vs.csv"
| eval key=process+" "+oprocess_start_date
| stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins sum(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift sum(local_amt) as local_amt sum(eur_local) as eur_local BY key
| table process oprocess_start_date oprocess_end_date otrans otpm oelapsed_mins total_count local_currency local_swift local_amt eur_local key</query>
<earliest>0</earliest>
<latest></latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard> JS: 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) {
// initialize will run once, so we will set up a search and a chart to be reused.
this._searchManager = new SearchManager({
id: 'details-search-manager',
preview: false
});
//this._chartView = new ChartView({
// managerid: 'details-search-manager',
// 'charting.legend.placement': 'none'
//});
this._TableView = new TableView({
id: 'TestTable',
managerid: 'details-search-manager',
drilldown: 'cell'
});
},
canRender: function(rowData) {
// Since more than one row expansion renderer can be registered we let each decide if they can handle that
// data
// Here we will always handle it.
return true;
},
render: function($container, rowData) {
// rowData contains information about the row that is expanded. We can see the cells, fields, and values
// We will find the key(process and start date) cell to use its value
var processCell = _(rowData.cells).find(function (cell) {
return cell.field === 'key';
});
//update the search with the key that we are interested in
this._searchManager.set({ search: 'index=idx_omn source=vs.csv | eval key=process+" "+oprocess_start_date | search key="' + processCell.value + '" | stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins values(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift values(local_amt) as local_amt values(eur_local) as eur_local BY file_number_list| table process,oprocess_start_date,oprocess_end_date,file_number_list,otrans,otpm,oelapsed_mins,total_count,local_currency,local_swift,local_amt,eur_local '});
// $container is the jquery object where we can put out content.
// In this case we will render our chart and add it to the $container
//$container.append(this._chartView.render().el);
$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.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
}); I did try by creating a field called "query" which has the query for the row expansion and passed it to the below JS but it didn't return any result. Please ignore this approach if there is any better solution available. XML for passing the entire query to column called query: <dashboard script="custom_table_row_expansion2.js">
<label>Visa row expansion Clone</label>
<row>
<panel>
<table id="expand_with_events">
<search>
<query>index="idx_omn" source="vs.csv"
| eval key=process+" "+oprocess_start_date
| eval query1 = "idx_omn source=\"visabase.csv\" | search key =\""
| eval query2 = "\"| stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins values(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift values(local_amt) as local_amt values(eur_local) as eur_local BY file_number_list"
| eval query = query1+key+query2
| stats values(process) as process values(oprocess_start_date) as oprocess_start_date values(oprocess_end_date) as oprocess_end_date values(otrans) as otrans values(otpm) as otpm values(oelapsed_mins) as oelapsed_mins sum(total_count) as total_count values(local_currency) as local_currency values(local_swift) as local_swift sum(local_amt) as local_amt sum(eur_local) as eur_local values(query) as query BY key
| table process oprocess_start_date oprocess_end_date otrans otpm oelapsed_mins total_count local_currency local_swift local_amt eur_local key query</query>
<earliest>0</earliest>
<latest></latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard> JS for the new try which didn't redturn any result: 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) {
// initialize will run once, so we will set up a search and a chart to be reused.
this._searchManager = new SearchManager({
id: 'details-search-manager',
preview: false
});
//this._chartView = new ChartView({
// managerid: 'details-search-manager',
// 'charting.legend.placement': 'none'
//});
this._TableView = new TableView({
id: 'TestTable',
managerid: 'details-search-manager',
drilldown: 'cell'
});
},
canRender: function(rowData) {
// Since more than one row expansion renderer can be registered we let each decide if they can handle that
// data
// Here we will always handle it.
return true;
},
render: function($container, rowData) {
// rowData contains information about the row that is expanded. We can see the cells, fields, and values
// We will find the sourcetype cell to use its value
var processCell = _(rowData.cells).find(function (cell) {
return cell.field === 'query';
});
//update the search with the sourcetype that we are interested in
this._searchManager.set({ search: 'index= "' + processCell.value + '" '});
// $container is the jquery object where we can put out content.
// In this case we will render our chart and add it to the $container
//$container.append(this._chartView.render().el);
$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.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
});
});
... View more
07-29-2021
06:13 AM
Hi @vnravikumar I would like to know whether we can pass the entire splunk search dynamically which is used in JS for row expansion? Instead of hardcoding the search is there a way to pass the entire search dynamically to the javascript. The problem I am facing is, i need to keep on updating the search in the JS whenever I want to add a column. So if I could pass the entire search dynamically from Splunk to the JS and the JS helps in row expansion. Thanks,
... View more
- Tags:
- row expansion
04-27-2021
05:02 AM
Hi, I have multiple panels in my dashboard but my line chart and pie chart color in the dashboard gets faded. Could you please let me know any fix for this. I tried multiple option but not sure why its getting fade. When the dashboard gets loaded initially then the actual color in the line chart is good like image 1. But after few seconds it fades like image 2.
... View more
- Tags:
- chart color fades
Labels
- Labels:
-
chart
03-18-2021
11:06 AM
Hi @kamlesh_vaghela, Can this tooltip changes be applied to heatmap tooltip? I have only xaxis and yaxis value in the heatmap tooltip when I hover the heatmap blocks like below. Is it possible to add more fields to this tooltip? I have extra fields values that needs to populated like minutes, process name etc. Could you please advice on the same? I have posted a question please refer this https://community.splunk.com/t5/Dashboards-Visualizations/How-to-display-more-values-in-heatmap-tooltip/m-p/544059#M37312 Thanks in advance!
... View more
03-16-2021
12:16 PM
Hi, I am using heatmap to display the buffer time, it uses only the count for the specific time frame. So, I converted the HH:MM:SS to minutes and used as a count. But I want to show the buffer time in both minutes and HH:MM:SS along with the process name in the tooltip when I mouseover. Currently only the x axis and yaxis values(minutes and date) are shown I want to add more values to the tooltip so that I can see HH:MM:SS, minutes, process name and the date. Could you please help me to know what are possible changes required in the heatmap js or any alternate solution. Sample screenshot of heatmap showing only the xaxis and yaxis value. Need to show additional values like minutes in HH:MM:SS and process name in this tooltip. The js which I used is the js came with heatmap app in Splunk.
... View more
Labels
- Labels:
-
javascript
02-11-2021
01:26 AM
Hi @niketn , I would like to know whether the JS which you provided can have a dynamic IDs instead of hardcoding it. If I am applying this JS for more than one panel then instead of me hardcoding the ID for the second one in the JS can this be done for incremental IDs automatically. For example: The below JS works for ID "single" and drilldownTarget. But if I want to apply this to another single value panel as "single1" and another target panel "drilldownTarget1". I may need to code the JS like below. Instead can we dynamically pass the "single" ID to increment along with drilldownTarget where I won't need to update the JS again and again. So the JS works for multiple panel by just providing the ID in the XML not in JS. Let me know your suggestion require(["jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"],
function($, mvc) {
console.log("Inside Custom Single Drilldown JS");
$(document).on("click","#single", function(e) {
e.preventDefault(); // Prevent default drilldown if needed
var url = window.location.href.split("#")[0] + "#drilldownTarget"; // Add/Replace url fragment
window.location.href = url; // Go to specified position
});
$(document).on("click","#single1", function(e) {
e.preventDefault(); // Prevent default drilldown if needed
var url = window.location.href.split("#")[0] + "#drilldownTarget1"; // Add/Replace url fragment
window.location.href = url; // Go to specified position
});
});
... View more
02-01-2021
09:21 AM
Hi All, I created a heatmap which includes hourly data for a day with addcoltotals at the end. The heatmap X axis is not aligned according the value it populates. Initially I thought it is due to the addcoltotals value but even after removing it the X axis is not aligned properly. If you see the marker of X axis which I have encircled in red it moves to further and further as it progress to next hour. So finally if you see the 23:00 is shown near the totals blocks. Please let me know whether I can align the X axis according the heatmap blocks also it is possible to show the totals which shouldn't affect the aligned of the x axis.
... View more
- Tags:
- heatmap
11-18-2020
10:13 AM
Hi, I'm using the Gantt chart visualization from the Gantt chart app to show the status of batch processes. Currently if I click the gantt chart it takes me to the search query instead I want to open another gantt chart. The problem now is I'm having a hard time getting the Gantt chart to drilldown into another Gantt chart when I click the bar(as shown in below image) of the gantt chart. What I'm trying to achieve is to have the user be taken to another Gantt chart that shows the history of the process (say part 7 days) of the bar he clicked on in the original Gantt chart. Any lead or reference would help 🙂 Below is the main gantt chart which I have, when i click on the bar it should drilldown to another gantt chart and pass the process as token so the new gantt chart where I have the history of processes for past 7 days. <form script="gantt:autodiscover.js">
<label>Process Monitoring</label>
<fieldset submitButton="false">
<input type="dropdown" token="tko_posting_date" searchWhenChanged="true">
<label>Posting Date</label>
<search>
<query>| gentimes start=-31 end=1 | sort -starttime
| eval date=strftime(starttime,"%d-%m-%Y %a")
| eval pdate=strftime(starttime,"%Y%m%d")
| eval today=strftime(now(), "%d-%m-%Y %a")
| eval yesterday=strftime(relative_time(now(),"-1d@d"), "%d-%m-%Y %a")
| eval adate=case(date = today, "Today", date = yesterday, "Yesterday", 1=1 , date)
| eval sortd=case(date = today, "1", date = yesterday, "2", 1=1 , "0")
| eval endtime=endtime+43200
| table pdate adate sortd starttime endtime
| sort sortd, pdate desc</query>
</search>
<fieldForLabel>adate</fieldForLabel>
<fieldForValue>pdate</fieldForValue>
<selectFirstChoice>true</selectFirstChoice>
<change>
<set token="tko_set_earliest">$row.starttime$</set>
<set token="tko_set_latest">$row.endtime$</set>
</change>
</input>
<input type="dropdown" token="tko_inst" searchWhenChanged="true">
<label>Select Institution</label>
<fieldForLabel>institution_name</fieldForLabel>
<fieldForValue>institution_number</fieldForValue>
<search>
<query>| inputlookup institution_name.csv
| table institution_name institution_number</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<default></default>
<initialValue>*</initialValue>
<choice value="*">ALL</choice>
</input>
<input type="dropdown" token="tko_emins" searchWhenChanged="true">
<label>Elapsed Mins</label>
<choice value="1">Non-Zero Values</choice>
<choice value="0">All Values</choice>
<default>1</default>
</input>
</fieldset>
<row>
<panel>
<html>
<h2>Gantt Chart demo</h2>
<div id="demo-search" class="splunk-manager" data-require="splunkjs/mvc/searchmanager"
data-options="{
"search": { "type": "token_safe", "value": "| inputlookup jobs.csv | search institution_number=$$tko_inst$$ posting_date=$$tko_posting_date$$ duration>=$$tko_emins$$ " },
"earliest_time": { "type": "token_safe", "value": "$$tko_set_earliest$$" },
"latest_time": { "type": "token_safe", "value": "$$tko_set_latest$$" },
"cancelOnUnload": true,
"preview": true
}">
</div>
<div id="demo-view" class="splunk-view" data-require="app/gantt/components/gantt/gantt" data-options="{
"managerid": "demo-search",
"startField": "startField",
"durationField": "duration",
"categoryLabel": "Process",
"categoryField": "process"
}">
</div>
</html>
</panel>
</row>
</form> Any thoughts?
... View more
- Tags:
- Gantt chart
11-17-2020
04:21 PM
Hi All, I have an HTML page which is basically created to list the different process run time on a daily basis in a Gantt chart. So when I click on the specific process it will show the 7 days history of the process run time. I tried to use Gantt chart in Splunk apps but that doesn't satisfy my purpose of showing the history when I click on the process. So I would like to know whether we can append this change to the Splunk Gantt chart and also is there a way whether we can use the HTML code and recreate the same in Splunk dashboard. Any reference would help. Thanks,
... View more
Labels
- Labels:
-
CSS
-
javascript
-
simple XML
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
07-04-2023
12:47 PM
|
