Dashboards & Visualizations

How to make the div that can be fold/unfold on dashboard

yutaka1005
Builder

I'd like to make the div that can be fold/unfold on dashboard.
So I tried to implement an easy thing using html, but it does not work.

How can I make this possible on Splunk's dashboard?
Please tell me that if someone know about it.

0 Karma
1 Solution

yutaka1005
Builder

It was able to be realized with the following code.

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
    //
    $('#<id of panel1>').closest(".dashboard-cell").css('width', '97%');
    $('#<id of panel2>').closest(".dashboard-cell").css('width', '3%');
    document.getElementById("<id of contents of panel2(table,chart...)>").style.display="none";
    var cnt = 0;
    $('#<id of button>').click(function onoff() {
        if(cnt == 0){
            cnt = 1;
            $('#<id of panel1>').closest(".dashboard-cell").css('width', '70%');
            $('#<id of panel2>').closest(".dashboard-cell").css('width', '30%');
            document.getElementById("<id of contents of panel2(table,chart...)>").style.display="block";
        } else {
            cnt = 0;
            $('#<id of panel1>').closest(".dashboard-cell").css('width', '97%');
            $('#<id of panel2>').closest(".dashboard-cell").css('width', '3%');
            document.getElementById("<id of contents of panel2(table,chart...)>").style.display="none";
        }
    });
    $(window).trigger('resize');
});

By clicking the button,
Since it is possible to change the width of panel1 and panel2 and display/non-display of contents of panel2, so, panel2 looks like a panel that can switch between folding/unfolding.

Details of processing are as follows.

In the case of cnt = 0, clicking, the width of the panel 1 is narrowed, the width of the panel 2 is widened, and the content in the panel 2 is displayed.

In the case of cnt = 1, when clicking, widens the width of the panel 1, narrows the width of the panel 2, and hides the contents in the panel 2.

View solution in original post

yutaka1005
Builder

It was able to be realized with the following code.

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
    //
    $('#<id of panel1>').closest(".dashboard-cell").css('width', '97%');
    $('#<id of panel2>').closest(".dashboard-cell").css('width', '3%');
    document.getElementById("<id of contents of panel2(table,chart...)>").style.display="none";
    var cnt = 0;
    $('#<id of button>').click(function onoff() {
        if(cnt == 0){
            cnt = 1;
            $('#<id of panel1>').closest(".dashboard-cell").css('width', '70%');
            $('#<id of panel2>').closest(".dashboard-cell").css('width', '30%');
            document.getElementById("<id of contents of panel2(table,chart...)>").style.display="block";
        } else {
            cnt = 0;
            $('#<id of panel1>').closest(".dashboard-cell").css('width', '97%');
            $('#<id of panel2>').closest(".dashboard-cell").css('width', '3%');
            document.getElementById("<id of contents of panel2(table,chart...)>").style.display="none";
        }
    });
    $(window).trigger('resize');
});

By clicking the button,
Since it is possible to change the width of panel1 and panel2 and display/non-display of contents of panel2, so, panel2 looks like a panel that can switch between folding/unfolding.

Details of processing are as follows.

In the case of cnt = 0, clicking, the width of the panel 1 is narrowed, the width of the panel 2 is widened, and the content in the panel 2 is displayed.

In the case of cnt = 1, when clicking, widens the width of the panel 1, narrows the width of the panel 2, and hides the contents in the panel 2.

rjthibod
Champion

You should probably use my app as a starting point: Developer Gadgets for Splunk https://splunkbase.splunk.com/app/3689/

It includes a library to turn Splunk panels into accordions, and it has a sliding panel on the bottom of the dashboard.

The Splunk code on http://dev.splunk.com/view/webframework-tutorials/SP-CAAAEN5 is pretty outdated an incapable of handling some situations (e.g., dealing with user inputs).

My app code is tested on various versions of Splunk and used in my company's Layer8Insight App for Splunk, so it should be good as a launching off point.

The built-in dashboard of the Developer Gadgets app will tell you how to turn a regular panel/row into an accordion.

You will need to copy the JS / CSS code for the bottom slider panel if you want to reuse for something else.

yutaka1005
Builder

To rjthibod

Thank you for answer!

I will check your app!

0 Karma

niketn
Legend

@yutaka1005, you ca either refer to the following blog to create tabs in dashboard using Simple XML JS Extension: https://www.splunk.com/blog/2015/03/30/making-a-dashboard-with-tabs-and-searches-that-run-when-click...

Or else use jQuery UI Accordion using Splunk HTML Dashboard (Web Framework) from the Splunk dev site: http://dev.splunk.com/view/webframework-tutorials/SP-CAAAEN5

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

yutaka1005
Builder

To niketnilay

Thank you for answer.

Second URL that you pasted is very similar to what I want to do.
But I want to make a panel that fades in from the side when I press the button.

Have you any ideas?

0 Karma

niketn
Legend

@yutaka1005, Fade in or Fade Out is similar to Show or Hide but with some delay (or rather animated). So would just Hide/Show suffice? Since this can be done pretty easily using depends/rejects Simple XML attributes and you can find several examples here in on Splunk Answers.

If you want Fade In or Fade Out specifically, please provide an example from any demo site (like jQuery or W3Schools or any actual site with Fade In and Fade Out implemented).

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

yutaka1005
Builder

To niketnilay

Thank you for reply.

It would be nice if I could display or hide the panel, but I would like a mechanism that can change the display/folding of the panel by pressing the button, not by using variables and "depends".

So if it can realize that mechanism, I do not care about the method (fade in, accordion menu ... etc).

There is a part called "Focus" which can change display/folding by click, in "deep dive" which is one of the contents in ITSI which is a chargeable App of Splunk.
I would like to do something similar to this.

See below ↓
http://docs.splunk.com/images/e/e3/Deep_dive.png

0 Karma

niketn
Legend

@yutaka1005, sorry, I do not have access to Splunk ITSI, but whatever I searched online gave expanded Topology Tree view not collapsed. Looking at it seems like it is an accordion.

I am glad you were able to figure out something as per your requirement.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Detecting Remote Code Executions With the Splunk Threat Research Team

WATCH NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If exploited, ...

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...