Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to drill down from custom result value?

SathyaNarayanan
Path Finder
‎04-21-2019 12:41 AM

Hi,

I created a Dashboard with status indicator, now i need to drill down on the icon.

The icon will be green and red depends on the value.

<search base="taxi">
    <query>| search FixtureID="4TXC18-087AB" | rangemap field=Status low=0-0 severe=1-10| table FixtureID Status range</query>
    <progress>
      <set token="M12A_1">$result.range$</set>
      <set token="M12A_11">$result.FixtureID$</set>
    </progress>
  </search>
<panel>
      <title>N3A</title>
      <html>
        <div id="icon">
          <div class="custom-result-value $N3A_1$" style="display: inline-block;padding:0px;margin:0px"> </div>
          <div class="custom-result-value $N3A_2$" style="display: inline-block;padding:0px;margin:0px"> </div>
          <div class="custom-result-value $N3A_3$" style="display: inline-block;padding:0px;margin:0px"> </div>
          <div class="custom-result-value $N3A_4$" style="display: inline-block;padding:0px;margin:0px"> </div>
          <div class="custom-result-value $N3A_5$" style="display: inline-block;padding:0px;margin:0px"> </div>
          <div class="custom-result-value $N3A_6$" style="display: inline-block;padding:0px;margin:0px"> </div>
        </div>
      </html>
    </panel>

Thanks in advance

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎04-21-2019 05:50 AM

@SathyaNarayanan first off you should check out Status Indicator custom visualization which does task similar to your use case and also supports Trellis to split the visualization. However, since event Status Indicator needs custom drilldown to be coded using SimpleXML JS extension, I will try to add a run anywhere example for drilldown from status results. (While some of code you have posted does not make complete sense to me I have tried to create something on similar lines).

alt text

Following is the run anywhere Simple XML code. I have added ids to div sections with results like id="custom-result-1" etc:

<dashboard script="status_click_handler.js">
  <label>Custom Results with drilldown</label>
  <search id="search1">
    <query>
      | makeresults
      | eval value=random()
      | eval value=(value%3)
      | rangemap field=value low=0-0 elevated=1-1 severe=2-2 default=low
    </query>
    <progress>
      <set token="M12A_11">$result.value$</set>
      <set token="N3A_1">$result.range$</set>
    </progress>
    <earliest>-1s</earliest>
    <latest>0</latest>
  </search>
  <search id="search2">
    <query>
      | makeresults
      | eval value=random()
      | eval value=(value%3)
      | rangemap field=value low=0-0 elevated=1-1 severe=2-2 default=low
    </query>
    <progress>
      <set token="M12A_12">$result.value$</set>
      <set token="N3A_2">$result.range$</set>
    </progress>
    <earliest>-1s</earliest>
    <latest>0</latest>
  </search>
  <search id="search3">
    <query>
      | makeresults
      | eval value=random()
      | eval value=(value%3)
      | rangemap field=value low=0-0 elevated=1-1 severe=2-2 default=low
    </query>
    <progress>
      <set token="M12A_13">$result.value$</set>
      <set token="N3A_3">$result.range$</set>
    </progress>
    <earliest>-1s</earliest>
    <latest>0</latest>
  </search>
  <row>
    <panel>
       <html>
         <style>
          .custom-result-value {
              font-size: 55px;
              margin: 35px auto;
              text-align: center;
              font-weight: bold;
              color: rgb(85, 85, 85);
          }
          .custom-result-value:before {
              font-family: "Splunk Icons";
              font-style: normal;
              font-weight: normal;
              text-decoration: inherit;
              font-size: 110%;
          }
          .custom-result-value:hover{
              background: #eee;
          }
          .severe.custom-result-value:before {
              content: "\2297";
          }
          .severe.custom-result-value {
              color: rgb(217, 63, 60);
          }
          .high.custom-result-value {
              color: rgb(245, 143, 57);
          }
          .high.custom-result-value:before {
              content: "\ECD4";
          }
          .elevated.custom-result-value {
              color: rgb(247, 188, 56);
          }
          .elevated.custom-result-value:before {
              content: "\26A0";
          }
          .low.custom-result-value {
              color: rgb(101, 166, 55);
          }
          .low.custom-result-value:before {
              content: "\ECD3";
          }
          .guarded.custom-result-value {
              color: rgb(109, 183, 198);
          }
          .guarded.custom-result-value:before {
              content: "\0049";
          }
          .custom-result-value.icon-only {
              font-size: 90px;
          }
         </style>
         <div id="icon" style="height:100px;padding-top:20px;">
           <div id="custom-result-1" class="custom-result-value $N3A_1$" style="display:inline-block;padding:20px;margin:0px;cursor:pointer"> $M12A_11$ </div>
           <div id="custom-result-2" class="custom-result-value $N3A_2$" style="display:inline-block;padding:20px;margin:0px;cursor:pointer"> $M12A_12$ </div>
           <div id="custom-result-3" class="custom-result-value $N3A_3$" style="display:inline-block;padding:20px;margin:0px;cursor:pointer"> $M12A_13$ </div>
         </div>
         <div>
           Clicked Value: $tokClickedValue$
         </div>
       </html>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript status_click_handler.js, which handles click on div with ids like custom-result and assign the clicked value to a token tokClickedValue

require(
    [
        'jquery',
        'splunkjs/mvc'
    ],
    function ($, mvc) {
        var unsubmittedTokenModel=mvc.Components.get("default");
        $(document).on('click','div[id^="custom-result-"]',function () {
            unsubmittedTokenModel.set("tokClickedValue",$(this).html());
        });
    });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Preview file
1 KB
0 Karma
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎04-21-2019 05:50 AM

@SathyaNarayanan first off you should check out Status Indicator custom visualization which does task similar to your use case and also supports Trellis to split the visualization. However, since event Status Indicator needs custom drilldown to be coded using SimpleXML JS extension, I will try to add a run anywhere example for drilldown from status results. (While some of code you have posted does not make complete sense to me I have tried to create something on similar lines).

alt text

Following is the run anywhere Simple XML code. I have added ids to div sections with results like id="custom-result-1" etc:

<dashboard script="status_click_handler.js">
  <label>Custom Results with drilldown</label>
  <search id="search1">
    <query>
      | makeresults
      | eval value=random()
      | eval value=(value%3)
      | rangemap field=value low=0-0 elevated=1-1 severe=2-2 default=low
    </query>
    <progress>
      <set token="M12A_11">$result.value$</set>
      <set token="N3A_1">$result.range$</set>
    </progress>
    <earliest>-1s</earliest>
    <latest>0</latest>
  </search>
  <search id="search2">
    <query>
      | makeresults
      | eval value=random()
      | eval value=(value%3)
      | rangemap field=value low=0-0 elevated=1-1 severe=2-2 default=low
    </query>
    <progress>
      <set token="M12A_12">$result.value$</set>
      <set token="N3A_2">$result.range$</set>
    </progress>
    <earliest>-1s</earliest>
    <latest>0</latest>
  </search>
  <search id="search3">
    <query>
      | makeresults
      | eval value=random()
      | eval value=(value%3)
      | rangemap field=value low=0-0 elevated=1-1 severe=2-2 default=low
    </query>
    <progress>
      <set token="M12A_13">$result.value$</set>
      <set token="N3A_3">$result.range$</set>
    </progress>
    <earliest>-1s</earliest>
    <latest>0</latest>
  </search>
  <row>
    <panel>
       <html>
         <style>
          .custom-result-value {
              font-size: 55px;
              margin: 35px auto;
              text-align: center;
              font-weight: bold;
              color: rgb(85, 85, 85);
          }
          .custom-result-value:before {
              font-family: "Splunk Icons";
              font-style: normal;
              font-weight: normal;
              text-decoration: inherit;
              font-size: 110%;
          }
          .custom-result-value:hover{
              background: #eee;
          }
          .severe.custom-result-value:before {
              content: "\2297";
          }
          .severe.custom-result-value {
              color: rgb(217, 63, 60);
          }
          .high.custom-result-value {
              color: rgb(245, 143, 57);
          }
          .high.custom-result-value:before {
              content: "\ECD4";
          }
          .elevated.custom-result-value {
              color: rgb(247, 188, 56);
          }
          .elevated.custom-result-value:before {
              content: "\26A0";
          }
          .low.custom-result-value {
              color: rgb(101, 166, 55);
          }
          .low.custom-result-value:before {
              content: "\ECD3";
          }
          .guarded.custom-result-value {
              color: rgb(109, 183, 198);
          }
          .guarded.custom-result-value:before {
              content: "\0049";
          }
          .custom-result-value.icon-only {
              font-size: 90px;
          }
         </style>
         <div id="icon" style="height:100px;padding-top:20px;">
           <div id="custom-result-1" class="custom-result-value $N3A_1$" style="display:inline-block;padding:20px;margin:0px;cursor:pointer"> $M12A_11$ </div>
           <div id="custom-result-2" class="custom-result-value $N3A_2$" style="display:inline-block;padding:20px;margin:0px;cursor:pointer"> $M12A_12$ </div>
           <div id="custom-result-3" class="custom-result-value $N3A_3$" style="display:inline-block;padding:20px;margin:0px;cursor:pointer"> $M12A_13$ </div>
         </div>
         <div>
           Clicked Value: $tokClickedValue$
         </div>
       </html>
    </panel>
  </row>
</dashboard>

Following is the required JavaScript status_click_handler.js, which handles click on div with ids like custom-result and assign the clicked value to a token tokClickedValue

require(
    [
        'jquery',
        'splunkjs/mvc'
    ],
    function ($, mvc) {
        var unsubmittedTokenModel=mvc.Components.get("default");
        $(document).on('click','div[id^="custom-result-"]',function () {
            unsubmittedTokenModel.set("tokClickedValue",$(this).html());
        });
    });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
1 KB
0 Karma
Reply
Solved! Jump to solution

SathyaNarayanan
Path Finder
‎04-21-2019 11:36 PM

Hi @niketnilay

Below is the complete code.

Am trying to show the status of each light, So the colour will change to green and red per the range map.

Now i need to click the icon to drill down to which light went down.

I created a Panel and need to pass tok_id to get the results.

Hope now am clear in my requirements.

<form>
  <label>AGLCMS v3</label>
  <search id="taxi">
    <query> | inputlookup RETIL_lookup  
            | dedup FixtureID 
            | join type=left FixtureID 
                [ search index=main host="DC2VPLSPSH4" source="AGLCMS.csv" 
                | rename "Field 1" as "FixtureID" 
                | rename "Field 2" as Name 
                | table "FixtureID" "Name"] 
            | eval Status=if(isnull(Name), "0","1") 
      </query>
    <earliest>0</earliest>
    <latest></latest>
  </search>
  <search base="taxi">
    <query>| search FixtureID="4TXC18-087AB" | rangemap field=Status low=0-0 severe=1-10| table FixtureID Status range</query>
    <progress>
      <set token="M12A_1">$result.range$</set>
      <set token="M12A_11">$result.FixtureID$</set>
    </progress>
  </search>
  <search base="taxi">
    <query>| search FixtureID="4TXC18-085AB" | rangemap field=Status low=0-0 severe=1-10 | table Status range</query>
    <progress>
      <set token="M12A_2">$result.range$</set>
    </progress>
  </search>
  <search base="taxi">
    <query>| search FixtureID="4TXC18-086AB" | rangemap field=Status low=0-0 severe=1-10 | table Status range</query>
    <progress>
      <set token="M12A_3">$result.range$</set>
    </progress>
  </search>
  <search base="taxi">
    <query>| search FixtureID="3TXC17-086AB" | rangemap field=Status low=0-0 severe=1-10 | table Status range</query>
    <progress>
      <set token="M12A_4">$result.range$</set>
    </progress>
  </search>
  <search base="taxi">
    <query>| search FixtureID="3TXC17-087AB" | rangemap field=Status low=0-0 severe=1-10 | table Status range</query>
    <progress>
      <set token="M12A_5">$result.range$</set>
    </progress>
  </search>
  <search base="taxi">
    <query>| search FixtureID="3TXC17-088AB" | rangemap field=Status low=0-0 severe=1-10 | table Status range</query>
    <progress>
      <set token="M12A_6">$result.range$</set>
    </progress>
  </search>
  <row depends="$hide$">
    <panel>
      <html>
          <style>
            .custom-result-value {
                font-size: 35px;
                margin: 35px auto;
                text-align: center;
                color: rgb(85, 85, 85);
                display: inline-block;
                padding:0px;
                margin:0px;
            }
            .severe.custom-result-value:before {
                content: "\25cf";
            }
            .severe.custom-result-value {
                color: rgb(255, 0, 0);
            }
            .low.custom-result-value {
                color: rgb(0, 247, 0);
            }
            .low.custom-result-value:before {
                content: "\25cf";
            }
            .custom-result-value.icon-only {
            }
            .view---pages-enterprise---6-6-3---14_Tp{color:#fbca25;}

            .dashboard-row .dashboard-panel h2.panel-title {
              font-size: 25px;
              font-weight: 600;
              padding: 12px 20px 7px 12px;
              text-align: center;
            }
            .dashboard-header h2 {
              font-weight: bold;
            }

            .dashboard-panel {
              border: 1px solid black;
              border-radius: 6px;
            }
            .dashboard-body {
                padding: 0 20px 20px;
                color: #2f2c59;
                background-color: #aea8bd;
                min-height: 150px;
            }
            .highcharts-container {
                border-radius: 6px;
            }
            .panel-head {
                  border-top-left-radius: 6px;
                  border-top-right-radius: 6px;
            }

            .dashboard-header h2 {
              font-weight: bold;
            }

            #icon {
            text-align:center;
            }

          </style>
        </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>M12A</title>
      <html>
        <div id="icon">
          <div class="custom-result-value $M12A_1$"> </div>
          <div class="custom-result-value $M12A_2$"> </div>
          <div class="custom-result-value $M12A_3$"> </div>
          <div class="custom-result-value $M12A_4$"> </div>
          <div class="custom-result-value $M12A_5$"> </div>
          <div class="custom-result-value $M12A_6$"> </div>
        </div>
      </html>
    </panel>

  </row>
  <row depends="$tok_id$">
    <panel>
      <title>Detail</title>
      <table>
        <search>
          <query>index=main source="LampFailures.csv" host="DC2VPLSPSH4" 
| rename "Fixture ID" as FixtureID 
| table Timestamp FixtureID "MH No" "Fitting Type" Color "Lamp Power" Location Remarks 
| join FixtureID 
    [| inputlookup RETIL_lookup 
    | fields - "X-Position" "Y-Position" Description] 
| sort - Timestamp
| search FixtureID="$tok_id$"</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <html>
      <script>
            require(
     [
         'jquery',
         'splunkjs/mvc'
     ],
     function ($, mvc) {
         var unsubmittedTokenModel=mvc.Components.get("default");
         $(document).on('click','div[id^="custom-result-"]',function () {
             unsubmittedTokenModel.set("tokClickedValue",$(this).html());
         });
     });

      </script>  
    </html>
  </row>
</form>

Thanks in advance.

I have added the image for sample
alt text

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎04-23-2019 11:39 AM

As shown in my example you would need to give unique ids to each of your html div sections from where you need to drilldown.

       <div  id="custom-result_M12A-1" class="custom-result-value $M12A_1$"> </div>
       <div id="custom-result_M12A-2" class="custom-result-value $M12A_2$"> </div>
       <div id="custom-result_M12A-3" class="custom-result-value $M12A_3$"> </div>
       <div id="custom-result_M12A-4" class="custom-result-value $M12A_4$"> </div>
       <div id="custom-result_M12A-5" class="custom-result-value $M12A_5$"> </div>
       <div id="custom-result_M12A-6" class="custom-result-value $M12A_6$"> </div>

Then your JS code will change slightly as you are showing only icon and no value along with icon (in my previous example I was using value for drilldown). In this code below id of the html panel div is split to get clicked html drilldown value.

     $(document).on('click','div[id^="custom-result_"]',function () {
         var strID=($(this).attr('id'));
         var arrClickedName = strID.split("_",2);
         unsubmittedTokenModel.set("tokClickedValue",arrClickedName[1]);
     });

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

SathyaNarayanan
Path Finder
‎04-23-2019 09:24 PM

@niketnilay

Wow Niketnilay, its working fine. Thanks.

I want to create drilldown panel for it.

The value is getting passed but why the depends, is not working.

Below is the xml for the drill down

<row depends="$tokClickedValue$" >
    <panel>
      <title>Detail</title>
      <table>
        <search>
          <query>index=main source="LampFailures.csv" host="DC2VPLSPSH4" 
| rename "Fixture ID" as FixtureID 
| table Timestamp FixtureID "MH No" "Fitting Type" Color "Lamp Power" Location Remarks 
| join FixtureID 
    [| inputlookup RETIL_lookup 
    | fields - "X-Position" "Y-Position" Description] 
| sort - Timestamp
| search FixtureID="$tokClickedValue$"</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎04-24-2019 12:02 AM

Besides, creating unsubmittedTokenModel also create submittedTokenModel

 var submittedTokenModel=mvc.Components.get("submitted");

Then update 

 submittedTokenModel.set("tokClickedValue",arrClickedName[1]);

Try and confirm, whether it worked. Also if it does not then update the details as to what is not working with depends. Is the row visible and hidden not working as expected or is the query not running as expected and is waiting for input? Or both issues?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

SathyaNarayanan
Path Finder
‎04-25-2019 12:57 AM

@niketnilay

It works perfectly as expected.

Thank you very much.

0 Karma
Reply
Solved! Jump to solution

Anam
Community Manager
Community Manager
‎04-24-2019 08:17 AM

Hi @SathyaNarayanan

Were you able to test out @niketnilay solution? Did it work? If yes, please don't forget to resolve this post by clicking on "Accept". If you still need more help, please provide a comment with some feedback.

Thanks!

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎04-21-2019 06:03 AM

Reference to Status Indicator Custom Visualization on Splunkbase. Drilldown still would need to be coded on above approach.

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

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...