Modal with Custom View

[Federico92]

Hi everyone. I need an help to insert in a Modal View one splunk visualization contained in Event Timeline App.

I wrote this code with splunk dev help

ticketModalTest.js

require([

    'underscore',

    'backbone',

    '../app/Optimus/components/ModalViewTest',

    'splunkjs/mvc',

    'splunkjs/mvc/searchmanager',

    'splunkjs/mvc/simplexml/ready!'

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

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

    var tokens = mvc.Components.getInstance("submitted");

  var detailSearch7 = new SearchManager({

        id: "detailSearch7",

        earliest_time: "0",

        latest_time: "now",

        preview: true,

        cache: false,

        search: "index=optimus_execution_statistics_idx | stats latest(script_name) as script_name latest(execution_status) as execution_status latest(execution_started) as execution_started latest(execution_ended) as execution_ended latest(category_name) as category_name latest(execution_host) as execution_host by _time execution_id |   where _time = $tok_snapshot_earliest$ | eval execution_started_unix = strptime(execution_started, \"%Y-%m-%d %H:%M:%S\")| sort limit=0 - execution_started| where _time >= relative_time(now(), \"-2d@d\")| stats values(execution_ended) as execution_ended values(eval(execution_id.\"|\".execution_host.\"|\".execution_started.\"|\".execution_ended)) as fullid by execution_started execution_id execution_host _time script_name execution_status| streamstats max(execution_ended) as execution_ended by execution_id | sort 0 _time| streamstats time_window=1h values(eval(execution_id.\"|\".execution_host.\"|\".execution_started.\"|\".execution_ended.\"|\".script_name)) as prev_fullid| mvexpand prev_fullid| rex field=prev_fullid \"(?<prev_execution_id>.*)\\|(?<prev_execution_host>.*)\\|(?<prev_execution_started>.*)\|(?<prev_execution_ended>.*)\\|(?<prev_script_name>.*)\"| fields - fullid prev_fullid| table execution_started execution_ended execution_id execution_host *| eval overlap = if(execution_started >= prev_execution_started AND execution_started <= prev_execution_ended, 1, 0)| eval cat = prev_execution_id| eval execution_started_unix = strptime(execution_started, \"%Y-%m-%d %H:%M:%S\")| eval execution_ended_unix = strptime(execution_ended, \"%Y-%m-%d %H:%M:%S\")| eval end=if(execution_status=\"In Progress\",now(),execution_ended_unix)| eval exclude=if(execution_started_unix = (relative_time(now(),\"@d\")-1) AND execution_ended_unix=(execution_started_unix-1) AND execution_status=\"Closed\",1,0)| eval start = execution_started_unix| eval color = case(execution_status=\"Closed\" and exclude=\"0\",\"#4FA484\", execution_status=\"Error\",\"#AF575A\", execution_status=\"Restarted\",\"#EC9960\", execution_status=\"In Progress\",\"#006d9c\")| eval group = if(len(substr(prev_execution_host, 8, len(prev_execution_host))) = 1, \"FCACLIP0\" + substr(prev_execution_host, 8, len(prev_execution_host)), \"FCACLIP\" + substr(prev_execution_host, 8, len(prev_execution_host)))| strcat cat \"|\" prev_script_name cat| eval label=cat | sort group| eval tooltip=cat | eval label=null|dedup tooltip | table label start end group color tooltip"

    },{tokens: true, tokenNamespace: "submitted"});

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

        e.preventDefault();

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

            var tok_snapshot_earliest= e.data['click.value'];

            tokens.set('tok_snapshot_earliest',tok_snapshot_earliest);

            var _title = tok_snapshot_earliest +"Panels"

            var modal = new ModalView({ title: _title, search7: detailSearch7 });

            modal.show();

        }

    });

});

ModalViewTest.js 

define([

    'underscore',

    'backbone',

    'jquery',

    'splunkjs/mvc',

    'splunkjs/mvc/searchmanager',

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

    'splunkjs/mvc/visualizationregistry'

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

        var modalTemplate = "<div id=\"pivotModal2\" 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="modalVizualizationTest"></div>');

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

                        width:'90%',

                        height:'80%',

                        position: 'fixed',

                        right: '0',

                        left: '0',

                       'margin-right': 'auto',

                        'margin-left': 'auto',

                        height: '80vh',

                        'overflow-y': 'auto',

                });

                var customViz = VisualizationRegistry.getVisualizer('event-timeline-viz','event-timeline-viz');

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

                var myViz = new customViz({

                    id: "myViz",

                    managerid: search7.name,

                    drilldown: "none",

                    el: $('modalVizualizationTest'),

                    showPager: false,

                    "link.openSearch.visible": "false",

                    "link.exportResults.visible": "false",

                    "link.inspectSearch.visible": "false",

                    "refresh.link.visible": "false",

                    "showLastUpdated": false

                }).render();

                this.childViews.push(myViz);

                search7.startSearch();

},

            close: function() {

               this.unbind();

               this.remove();

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

                   childView.unbind();

                   childView.remove();

               });

            }

        });

        return ModalView;

});

Any suggestion about why this code doesn't work? Thanks

[kamlesh_vaghela · Accepted solution]

@Federico92 

You missed # .  🙂 

Just confirm  el: $('#modalVizualizationTest'), in below block.

var myViz = new customViz({
                id: "myViz",
                managerid: search7.name,
                drilldown: "none",
                el: $('#modalVizualizationTest'),
                showPager: false,
                "link.openSearch.visible": "false",
                "link.exportResults.visible": "false",
                "link.inspectSearch.visible": "false",
                "refresh.link.visible": "false",
                "showLastUpdated": false
            }).render();

Thanks
KV
▄︻̷̿┻̿═━一

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

[kamlesh_vaghela]

@Federico92 

Can you please share your XML and app link on Splunkbase?

[Federico92]

Dashboard XML

<form hideFilters="true" script="loadLabels.js,multiselectAllRemove.js, ticketModalTest.js" theme="light">
<init>
<!-- https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12 -->
<set token="qualitativePaired">[0xa6cee3,0x1f78b4,0xb2df8a,0x33a02c,0xfb9a99,0xe31a1c,0xfdbf6f,0xff7f00,0xcab2d6,0x6a3d9a,0xffff99,0xb15928]</set>
<set token="red_green">[0xe31a1c,0x33a02c]</set>
<set token="green_red">[0x33a02c,0xe31a1c]</set>
<set token="form.tok_weeks">-7w@w1</set>
<set token="form.tok_stats">max</set>
</init>
<label>Execution Statistics Clone</label>
<search id="base_execution_statistics">
<query>
index=optimus_execution_statistics_idx
| stats latest(script_name) as script_name latest(execution_status) as execution_status latest(execution_started) as execution_started latest(execution_ended) as execution_ended latest(category_name) as category_name latest(execution_host) as execution_host by _time execution_id
</query>
<earliest>-30d@d</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<fieldset submitButton="false" autoRun="true"></fieldset>
<row depends="$ghost_boo$">
<panel>
<html>
<style>

#modalVizualization {
display: flex; !important;
}

#modalVizualization4 {
display: flex; !important;
}

#nousage .ccat-default_category {
fill: rgb(66, 150, 58) !important;
stroke: rgb(66, 150, 58) !important;
}

#usage .ccat-default_category {
fill: rgb(173, 47, 47) !important;
stroke: rgb(173, 47, 47) !important;
}

#compare .ccat-Free {
fill: rgb(66, 150, 58) !important;
stroke: rgb(66, 150, 58) !important;
}

#compare .ccat-Used {
fill: rgb(173, 47, 47) !important;
stroke: rgb(173, 47, 47) !important;
}

#table1 h3.dashboard-element-title {
color:white !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<title>Execution Statistics Filters</title>
<input type="dropdown" token="tok_time_range">
<label>Time Range</label>
<choice value="-2d@d">2 Days</choice>
<choice value="-7d@d">7 Days</choice>
<choice value="-30d@d">30 Days</choice>
<initialValue>-2d@d</initialValue>
<default>-2d@d</default>
<change>
<condition>
<unset token="tok_overlap_time"></unset>
</condition>
</change>
</input>
</panel>
</row>
<row>
<panel>
<title>Usage Trend</title>
<input type="dropdown" token="tok_choice">
<label>Metric</label>
<choice value="Active VMs">Active VMs</choice>
<choice value="License Usage">License Usage</choice>
<default>Active VMs</default>
<initialValue>Active VMs</initialValue>
<change>
<condition>
<unset token="tok_overlap_time"></unset>
</condition>
</change>
</input>
<chart id="ticket_modal_1">
<search base="base_execution_statistics">
<query>| where _time &gt;= relative_time(now(), "$tok_time_range$")
| stats values(execution_ended) as execution_ended values(eval(execution_id."|".execution_host."|".execution_started."|".execution_ended)) as fullid by _time execution_started execution_id execution_host
| streamstats time_window=1h values(eval(execution_id."|".execution_host."|".execution_started."|".execution_ended)) as prev_fullid
| mvexpand prev_fullid
| rex field=prev_fullid "(?&lt;prev_execution_id&gt;.*)\|(?&lt;prev_execution_host&gt;.*)\|(?&lt;prev_execution_started&gt;.*)\|(?&lt;prev_execution_ended&gt;.*)"
| fields - fullid prev_fullid
| table execution_started execution_ended execution_id execution_host _time *
| where strptime(prev_execution_ended,"%Y-%m-%d %H:%M:%S") &gt;= _time
| eval overlap = case(execution_id=prev_execution_id,0,execution_started=prev_execution_ended AND execution_host=prev_execution_host,0,execution_started &gt;= prev_execution_started AND execution_started &lt;= prev_execution_ended,1,1=1,0)
| stats sum(overlap) as overlap values(execution_host) as execution_host by execution_id _time
| timechart span=10m max(overlap) as "Max Overlap" dc(execution_id) as "Active Scripts" dc(execution_host) as "Active VMs"
| eval "License Usage" = if(isnull('Max Overlap'),0,'Max Overlap' + 1)
| eval "Limit" = `number_of_licenses`
| eval "Limit Reached" = if('$tok_choice$'&gt;='Limit','$tok_choice$',null)
| fields _time "$tok_choice$" "Limit Reached"
| where _time &gt;= relative_time(now(), "$tok_time_range$")</query>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisLabelsY.majorUnit">1</option>
<option name="charting.axisTitleX.visibility">collapsed</option>
<option name="charting.axisTitleY.visibility">collapsed</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">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">line</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.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">ellipsisEnd</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">bottom</option>
<option name="charting.lineWidth">2</option>
<option name="charting.seriesColors">$green_red$</option>
<option name="height">250</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>
</form>

SplunkBase App

https://splunkbase.splunk.com/app/4370/