modal table view

[Federico92]

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

[kamlesh_vaghela]

@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.

[Federico92]

<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 == &quot;*&quot;">
<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 "(?&lt;action&gt;\w+)\|(?&lt;time&gt;\d+)\|(?&lt;count&gt;\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 &gt;= relative_time(now(),"$tok_snapshot$") OR resolved_e &gt;= 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>

[Federico92]

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;

});