topic Re: modal table view in Dashboards & Visualizations

modal table view

Federico92 — Mon, 07 Jun 2021 09:53:48 GMT

Hi everyone

I need to insert this search into a modal popup to visualize this table

|loadjob savedsearch:"tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value="#N/A" |search $tok_permissions$
| search $tok_company$ $tok_contract$ $tok_contact_type$ $tok_service$ $tok_element$ $tok_category$ $tok_subcategory$ $tok_type$ $tok_queue$
| search (state_group="Open" OR state_group="Pending" OR state_group="Resolved" OR state_group="Closed")
| where (created_e >= relative_time($tok_trend_time$,"@$tok_snapshot_span$") AND created_e < relative_time($tok_trend_time$,"+$tok_snapshot_span$@$tok_snapshot_span$")) OR (resolved_e >= relative_time($tok_trend_time$,"@$tok_snapshot_span$") AND resolved_e < relative_time($tok_trend_time$,"+$tok_snapshot_span$@$tok_snapshot_span$"))
| table id state priority queue assigned_to created resolved"

I wrote this two codes

app.js

require([

'underscore',

'backbone',

'../app/ticket_aide/components/ModalView',

'splunkjs/mvc',

'splunkjs/mvc/searchmanager',

'splunkjs/mvc/simplexml/ready!',

'splunkjs/mvc/savedsearchmanager',

'splunkjs/mvc/postprocessmanager',

'splunkjs/mvc/chartview',

'splunkjs/mvc/simplexml/element/table'

], function(_, Backbone, ModalView, mvc, SearchManager, SavedSearchManager, PostProcessManager) {

var master = mvc.Components.get('master');

var tokens=mvc.Components.get("default");

tokens.on("change:created_lower_bound", function(created_lower_bound) {

tokens.set('created_lower_bound',created_lower_bound)

});

tokens.on("change:created_upper_bound", function(created_upper_bound) {

tokens.set('created_upper_bound',created_upper_bound)

});

tokens.on("change:tok_company", function(tok_company) {

tokens.set('ton_company',tok_company)

});

tokens.on("change:tok_contract", function(tok_contract) {

tokens.set('tok_contract',tok_contract)

});

tokens.on("change:tok_contact_type", function(tok_contact_type) {

tokens.set('tok_contact_type',tok_contact_type)

});

tokens.on("change:tok_service", function(tok_service) {

tokens.set('tok_service',tok_service)

});

tokens.on("change:tok_element", function(tok_element) {

tokens.set('tok_element',tok_element)

});

tokens.on("change:tok_category", function(tok_category) {

tokens.set('tok_category',tok_category)

});

tokens.on("change:tok_subcategory", function(tok_subcategory) {

tokens.set('tok_subcategory',tok_subcategory)

});

tokens.on("change:tok_type", function(tok_type) {

tokens.set('tok_type',tok_type)

});

tokens.on("change:tok_queue", function(tok_queue) {

tokens.set('tok_queue',tok_queue)

});

tokens.on("change:tok_permissions", function(tok_permissions) {

tokens.set('tok_permissions',tok_permissions)

});

tokens.on("change:tok_snapshot_span", function(tok_snapshot_span) {

token.set('tok_snapshot_span',tok_snapshot_span)

});

var mysavedsearch= new SavedSearchManager ({

id: "mysavedsearch",

searchname: "ticket_aide_master",

app: "ticket_aide"

})

var detailSearch = new PostProcessManager({

id: "detailSearch",

managerid: mysavedsearch,

preview: false,

cache: false,

search: "| fillnull value=\"#N/A\" |search $tok_permissions$ | search $tok_company$ $tok_contract$ $tok_contact_type$ $tok_service$ $tok_element$ $tok_category$ $tok_subcategory$ $tok_type$ $tok_queue$ | search (state_group=\"Open\" OR state_group=\"Pending\" OR state_group=\"Resolved\" OR state_group=\"Closed\") | where (created_e >= relative_time($tok_trend_time$,\"@$tok_snapshot_span$\") AND created_e < relative_time($tok_trend_time$,\"+$tok_snapshot_span$@$tok_snapshot_span$\")) OR (resolved_e >= relative_time($tok_trend_time$,\"@$tok_snapshot_span$\") AND resolved_e < relative_time($tok_trend_time$,\"+$tok_snapshot_span$@$tok_snapshot_span$\")) | table id state priority queue assigned_to created resolved"

},{tokens: true});

master.on("click", function(e) {

e.preventDefault();

console.log("E",e);

if(e.data['click.value'] === "_time") {

var _title= e.data['click.value']

tokens.set('tok_trend_time',_title)

var modal=new ModalView({ title: _title, search: detailSearch })

modal.show();

};

});

But this code doesn't work and i'm not able to find any error or issue. Any suggestions? Thx

Re: modal table view

Federico92 — Mon, 07 Jun 2021 09:55:25 GMT

ModalView.js

define([

'underscore',

'backbone',

'jquery',

'splunkjs/mvc',

'splunkjs/mvc/searchmanager',

'splunkjs/mvc/simplexml/element/table',

"splunkjs/mvc/chartview"

], function(_, Backbone, $, mvc, SearchManager, TableElement, ChartView) {

var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +

"<div class=\"modal-header\"><h3><%- title %></h3><button class=\"close\">Close</button></div>" +

"<div class=\"modal-body\"></div>" +

"<div class=\"modal-footer\"></div>" +

"</div>" +

"<div class=\"modal-backdrop\"></div>";

var ModalView = Backbone.View.extend({

defaults: {

title: 'Not set'

initialize: function(options) {

this.options = options;

this.options = _.extend({}, this.defaults, this.options);

this.childViews = [];

console.log('Hello from the modal window: ', this.options.title);

this.template = _.template(modalTemplate);

events: {

'click .close': 'close',

'click .modal-backdrop': 'close'

render: function() {

var data = { title : this.options.title };

this.$el.html(this.template(data));

return this;

show: function() {

$(document.body).append(this.render().el);

$(this.el).find('.modal-body').append('<div id="modalVizualization"/>');

$(this.el).find('.modal').css({

width:'90%',

height:'auto',

left: '5%',

'margin-left': '0',

'max-height':'100%'

});

var search = mvc.Components.get(this.options.search.id);

var detailTable = new TableElement ({

id: "detailTable",

managerid: search.name,

pageSize: "5",

el: $('#modalVizualization')

}).render();

this.childViews.push(detailTable);

search.startSearch();

close: function() {

this.unbind();

this.remove();

_.each(this.childViews, function(childView) {

childView.unbind();

childView.remove();

});

}

});

return ModalView;

});

Re: modal table view

kamlesh_vaghela — Mon, 07 Jun 2021 10:52:42 GMT

@Federico92

Just want to know, what is the purpose of using on change function of tokens?

tokens.on("change:tok_permissions", function(tok_permissions) { tokens.set('tok_permissions',tok_permissions) });

And id it possible to share your sample XML for more clarity?

Thanks
KV
▄︻̷̿┻̿═━一

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

Re: modal table view

Federico92 — Mon, 07 Jun 2021 12:17:48 GMT

<search id="base">
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value`
|search $tok_permissions$
| search $tok_company$ $tok_contract$ $tok_contact_type$ $tok_service$ $tok_element$ $tok_category$ $tok_subcategory$ $tok_type$ $tok_queue$</query>
</search>
<fieldset submitButton="false">
<input type="multiselect" token="tok_company" depends="$tok_show_all$" id="input1">
<label>$lbl_company$</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_company$</fieldForLabel>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value` company
|search $tok_permissions$
| stats count by company
| fields company
|rename company as $lbl_company$</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="form.tok_snapshot"></unset>
<unset token="form.tok_trend_overlay"></unset>
<unset token="form.tok_open_dimension"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
<unset token="tok_show_trend_table"></unset>
<unset token="tok_export"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>company="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
<fieldForValue>$lbl_company$</fieldForValue>
</input>
<input type="multiselect" token="tok_contract" depends="$tok_show_all$">
<label>$lbl_contract$</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_contract$</fieldForLabel>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value` contract
|search $tok_permissions$
| stats count by contract
| fields contract
| rename contract as "$lbl_contract$"</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="form.tok_snapshot"></unset>
<unset token="form.tok_trend_overlay"></unset>
<unset token="form.tok_open_dimension"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
<unset token="tok_show_trend_table"></unset>
<unset token="tok_export"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>contract="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
<fieldForValue>$lbl_contract$</fieldForValue>
</input>
<input type="multiselect" token="tok_contact_type" depends="$tok_show_all$">
<choice value="*">All</choice>
<label>$lbl_contact_type$</label>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_contact_type$</fieldForLabel>
<fieldForValue>$lbl_contact_type$</fieldForValue>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value` contact_type
|search $tok_permissions$
| stats count by contact_type
| fields contact_type
| rename contact_type as "$lbl_contact_type$"</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="form.tok_snapshot"></unset>
<unset token="form.tok_trend_overlay"></unset>
<unset token="form.tok_open_dimension"></unset>
<unset token="tok_show_backlog_table"></unset>
<unset token="tok_show_trend_table"></unset>
<unset token="tok_export"></unset>
<unset token="tok_show_table"></unset>
<unset token="tok_table_state_filter"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>contact_type="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
</input>
<input type="multiselect" token="tok_service" depends="$tok_show_all$">
<label>$lbl_service$</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_service$</fieldForLabel>
<fieldForValue>$lbl_service$</fieldForValue>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value` service
|search $tok_permissions$
| stats count by service
| fields service
| rename service as "$lbl_service$"</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="tok_export"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>service="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
</input>
<input type="multiselect" token="tok_element" depends="$tok_show_all$">
<label>$lbl_element$</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_element$</fieldForLabel>
<fieldForValue>$lbl_element$</fieldForValue>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value` element
|search $tok_permissions$
| stats count by element
| fields element
| rename element as "$lbl_element$"</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="tok_export"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>element="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
</input>
<input type="multiselect" token="tok_category" depends="$tok_show_all$">
<label>$lbl_category$</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_category$</fieldForLabel>
<fieldForValue>$lbl_category$</fieldForValue>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value`category
|search $tok_permissions$
| stats count by category
| fields category
| rename category as "$lbl_category$"</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="tok_export"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>category="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
</input>
<input type="multiselect" token="tok_subcategory" depends="$tok_show_all$">
<label>$lbl_subcategory$</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_subcategory$</fieldForLabel>
<fieldForValue>$lbl_subcategory$</fieldForValue>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value` subcategory
|search $tok_permissions$
| stats count by subcategory
| fields subcategory
| rename subcategory as "$lbl_subcategory$"</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="tok_export"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>subcategory="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
</input>
<input type="multiselect" token="tok_type" depends="$tok_show_all$">
<label>$lbl_type$</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_type$</fieldForLabel>
<fieldForValue>$lbl_type$</fieldForValue>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value` type
|search $tok_permissions$
| stats count by type
| fields type
| rename type as "$lbl_type$"</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="tok_export"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>type="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
</input>
<input type="multiselect" token="tok_queue" depends="$tok_show_all$">
<label>$lbl_queue$</label>
<choice value="*">All</choice>
<default>*</default>
<initialValue>*</initialValue>
<fieldForLabel>$lbl_queue$</fieldForLabel>
<fieldForValue>$lbl_queue$</fieldForValue>
<search>
<query>| loadjob savedsearch="tkt_aide_orchestrator:ticket_aide:ticket_aide_master"
| fillnull value=`get_null_value` queue
|search $tok_permissions$
| stats count by queue
| fields queue
| rename queue as "$lbl_queue$"</query>
<earliest>0</earliest>
<latest></latest>
</search>
<change>
<unset token="tok_export"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
</change>
<prefix>(</prefix>
<suffix>)</suffix>
<valuePrefix>queue="</valuePrefix>
<valueSuffix>"</valueSuffix>
<delimiter> OR </delimiter>
</input>
</fieldset>
<row>
<panel depends="$tok_show_all$">
<single>
<search base="base">
<query>| search state_group="Open" OR state_group="Pending"
| stats count</query>
</search>
<option name="drilldown">all</option>
<option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
<option name="underLabel">Tickets in Backlog</option>
<drilldown>
<condition match="tok_l1_show_backlog == "*"">
<unset token="tok_l1_show_backlog"></unset>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition>
<set token="tok_l1_show_backlog">*</set>
<set token="form.tok_trend_overlay">backlog</set>
<set token="form.tok_snapshot">-30d@d</set>
<unset token="tok_l11_show_backlog_table"></unset>
<unset token="tok_l1_show_aging"></unset>
</condition>
</drilldown>
</single>
</panel>
</row>
<row depends="$tok_l1_show_backlog$">
<panel depends="$tok_show_all$" id="master">
<input type="dropdown" token="tok_snapshot">
<label>Snapshots</label>
<choice value="@w1">Week to date</choice>
<choice value="-7d@d">Last 7 days</choice>
<choice value="-30d@d">Last 30 days</choice>
<choice value="-90d@d">Last 90 days</choice>
<choice value="@mon">Month to date</choice>
<choice value="-6mon@mon">Last 6 months</choice>
<choice value="-12mon@mon">Last 12 months</choice>
<choice value="@y">Year to date</choice>
<choice value="-y@y">2 Years to date</choice>
<choice value="-20y@y">All data</choice>
<change>
<condition value="@w1">
<set token="tok_snapshot_span">d</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition value="-7d@d">
<set token="tok_snapshot_span">d</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition value="-30d@d">
<set token="tok_snapshot_span">d</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition value="-90d@d">
<set token="tok_snapshot_span">d</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition value="@mon">
<set token="tok_snapshot_span">d</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition value="-6mon@mon">
<set token="tok_snapshot_span">mon</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition value="-12mon@mon">
<set token="tok_snapshot_span">mon</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition value="@y">
<set token="tok_snapshot_span">mon</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
<condition value="-20y@y">
<set token="tok_snapshot_span">mon</set>
<unset token="tok_l11_show_backlog_table"></unset>
</condition>
</change>
<default>-30d@d</default>
<initialValue>-30d@d</initialValue>
</input>
<input type="dropdown" token="tok_trend_overlay">
<label>Overlay</label>
<choice value="backlog">Backlog</choice>
<choice value="bpe">BPE</choice>
<default>backlog</default>
<initialValue>backlog</initialValue>
<change>
<unset token="tok_l11_show_backlog_table"></unset>
</change>
</input>
<chart>
<search base="base">
<query>| search $tok_l1_show_backlog$ (state_group="Open" OR state_group="Pending" OR state_group="Resolved" OR state_group="Closed")
| eval created_flag = if((state_group="Open" OR state_group="Pending" OR state_group="Resolved" OR state_group="Closed"),1,0)
| eval resolved_flag = if((state_group="Resolved" OR state_group="Closed"),1,0)
| eval marker = case(created_ym=resolved_ym,1,1=1,0)
| eval list = mvappend("created|".created_ymd."|".created_flag, "resolved|".resolved_ymd."|".resolved_flag)
| fields list
| mvexpand list
| rex field=list "(?<action>\w+)\|(?<time>\d+)\|(?<count>\d)"
| fields time action count
| chart sum(count) as count over time by action
| fillnull value=0 created resolved
| eval backlog = created - resolved
| streamstats sum(backlog) as backlog
| eval _time = strptime(time,"%Y%m%d")
| where _time >= relative_time(now(),"$tok_snapshot$") OR resolved_e >= relative_time(_time,"$tok_snapshot$")
| timechart span=$tok_snapshot_span$ sum(created) as created sum(resolved) as resolved last(backlog) as backlog
| eval bpe = if(created=0 OR resolved=0, 0.00,round(resolved/created,2))
| table _time created resolved $tok_trend_overlay$
| filldown $tok_trend_overlay$</query>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">collapsed</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.abbreviation">none</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.abbreviation">none</option>
<option name="charting.axisY2.enabled">1</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">column</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.overlayFields">bpe,backlog</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">default</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">all</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">bottom</option>
<option name="charting.lineWidth">2</option>
<option name="refresh.display">progressbar</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
<drilldown>
<condition></condition>
</drilldown>
</chart>
</panel>
</row>