topic Re: Create Tab in Dashboard in Dashboards & Visualizations

Create Tab in Dashboard

khanlarloo — Sun, 07 Jun 2020 03:36:57 GMT

hi
i create tab in my dashbord base on this
Link :https://www.splunk.com/blog/2015/03/30/making-a-dashboard-with-tabs-and-searches-that-run-when-clicked.html
but at the end it does't show my search,here is the screenshot of my dashboard;

Re: Create Tab in Dashboard

niketn — Mon, 11 Dec 2017 08:58:44 GMT

@khanlarloo, This might be because host value is not provided in the text box.

Re: Create Tab in Dashboard

khanlarloo — Tue, 12 Dec 2017 10:21:27 GMT

No i check every thing and it's correct but it dosen't show my result.
When i use link switching it's working.but in tab it is not working.

Re: Create Tab in Dashboard

cmerriman — Tue, 12 Dec 2017 12:46:13 GMT

have you double checked that Search by Host is provided in that text box? Perhaps set a default to that input. You may also need to check that Search when changed is set to true in the simple xml, otherwise add a Submit button to the dashboard. It looks like the panel is waiting for inputs to be submitted.

Re: Create Tab in Dashboard

niketn — Tue, 12 Dec 2017 13:49:33 GMT

@khanlarloo, as stated earlier I feel the issue is with default value not set for host text box. I was able to recreate the same. Also, if you have not made any changes to the tabs.js script file, you should have searchWhenChanged="false" for inputs and have submitButton="true" for fieldset.

Following is run anywhere dashboard similar to your screenshot based on Splunk's _internal index.
PS: I have not made any changes to JS, however, I have included CSS within the dashboard to avoid dependency with an additional CSS file for running this example.
Submit button should be present to run the example, unless you have made corrections to handle the same in tabs.js file.

<form script="tabs.js">
  <label>tabs with Simple XML JS and CSS extension</label>
  <fieldset submitButton="true" autoRun="false">
    <input type="time" token="tokTime">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="text" token="tokHost" searchWhenChanged="false">
      <label>Search by host</label>
    </input>
    <input type="text" token="tokLogLevel" searchWhenChanged="false">
      <label>Search by Log Level</label>
      <default>*</default>
    </input>
  </fieldset>
  <row depends="$alwaysHideCSSStyle$">
    <panel>
      <html>
        <style>
          #tabs{
              border-bottom: 0px;
          }

          #tabs > .dashboard-cell > .dashboard-panel{
              margin-bottom: 0px;
              border-bottom: 0px;
          }

          #element1 > .html{
              padding-left: 0px; /* This fixes some weirdness where the first tab doesn't look right due to the left part of the tab showing */
              padding-right: 0px;
              padding-top: 0px;
          }

          #tab_1 > .dashboard-cell > .dashboard-panel{
              border-top: 0px;
          }          
        </style>
      </html>
    </panel>
  </row>
  <row id="tabs">
    <panel>
      <html>
        <ul id="tabs" class="nav nav-tabs">
          <li class="active">
            <a href="#" class="toggle-tab" data-toggle="tab" data-elements="tab_component_errors" data-token="control_token_components">Top 10 Components with Error</a>
          </li>
          <li>
            <a href="#" class="toggle-tab" data-toggle="tab" data-elements="tab_error_timechart" data-token="control_token_timechart">Error Timechart</a>
          </li>
          <li>
            <a href="#" class="toggle-tab" data-toggle="tab" data-elements="tab_error_messages" data-token="control_token_messages">Top Error Messages</a>
          </li>
        </ul>
      </html>
    </panel>
  </row>
  <row id="tab_component_errors">
    <panel>
      <title>Top 10 Components with Error</title>
      <chart>
        <search>
          <query>| search * $control_token_components$ index=_internal sourcetype=splunkd host=$tokHost$ log_level="$tokLogLevel$" log_level!=INFO
| top 10 component showperc=f</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
  <row id="tab_error_timechart">
    <panel>
      <title>Error Timechart</title>
      <chart>
        <search>
          <query>| search * $control_token_timechart$ index=_internal sourcetype=splunkd host="$tokHost$" log_level="$tokLogLevel$" log_level!=INFO
| timechart count by log_level</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</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">area</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">stacked</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
  <row id="tab_error_messages">
    <panel>
      <title>Top Error Messages</title>
      <chart>
        <search>
          <query>| search * $control_token_messages$ index=_internal sourcetype=splunkd host="$tokHost$" log_level="$tokLogLevel$" log_level!=INFO
| top 10 message showperc=f</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</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">pie</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">stacked</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>

Re: Create Tab in Dashboard

khanlarloo — Wed, 13 Dec 2017 05:12:22 GMT

tanx for helping me.i change the submitButton="true" and searchWhenChanged="false" now it works.

Re: Create Tab in Dashboard

johnward4 — Mon, 19 Mar 2018 20:41:34 GMT

@niketnilay

How would you use the link switching to show multiple search panels for each option. For example, I'd like to create a tabbed or link switched dashboard to show 'Current' or 'Historical' data. In each I have several panels that I would like to display depending on which option is chosen.

Who it be easier to map each link switch option to a view/dashboard?

Re: Create Tab in Dashboard

niketn — Tue, 20 Mar 2018 05:01:27 GMT

@johnward4 I would request you to provide a mock screenshot of what you need. Also if the requirement/use case is different from the Dashboard Tabs using JS then you would need to post a separate question with as much details as possible so that community experts can assist you better.

Re: Create Tab in Dashboard

abhayneilam — Mon, 02 Jul 2018 14:45:54 GMT

where is the tab.js file . Kindly provide that as well

Re: Create Tab in Dashboard

niketn — Mon, 02 Jul 2018 15:35:03 GMT

@abhayneilam this is related to the blog post mentioned in the question. It gives you link to Github repository to download the required files.

https://www.splunk.com/blog/2015/03/30/making-a-dashboard-with-tabs-and-searches-that-run-when-clicked.html

Re: Create Tab in Dashboard

marvinlee93 — Mon, 28 Jan 2019 02:35:32 GMT

@niketnilay

Hi. I have tried the tab.js and XML code on an older browser, IE 11, it works perfectly.
However, when I'm running it on Microsoft Edge/ Google. The toggling function stops working.

Any Idea why?

Re: Create Tab in Dashboard

niketn — Mon, 28 Jan 2019 05:24:25 GMT

@marvinlee93 we have tested this with Splunk 7.0 on all IE, Edge and Chrome and it seems to work fine. Since this feature is implemented with JavaScript, why don't you try Browser Inspector tool and see whether there are any Console errors.

Re: Create Tab in Dashboard

bnorthway_splun — Wed, 22 Apr 2020 22:12:52 GMT

There is an updated dashboard tab example available here: https://github.com/LukeMurphey/splunk-dashboard-tabs-example