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. 

 

View solution in original post

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
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!