Dashboards & Visualizations

Modal with Custom View

Federico92
Path Finder

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
Labels (4)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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();

 

 

Screenshot 2021-07-01 at 2.34.45 PM.png

 

Thanks
KV
▄︻̷̿┻̿═━一

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

 

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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();

 

 

Screenshot 2021-07-01 at 2.34.45 PM.png

 

Thanks
KV
▄︻̷̿┻̿═━一

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

 

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Federico92 

 

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

 

0 Karma

Federico92
Path Finder

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/

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...