How to create a dashboard with dynamic charts/panels based on the number of hosts and hide panels if there is no data?

[jamesmonico]

Hello,

I have a rather confusing issue I've been attempting to solve (with no luck) for quite some time. I'm attempting to create a dashboard which has several indexes. An example panel that has been added is the CPU Load in % by host. This works fine on its own, however, some indexes may have well over 20-30 hosts which unfortunately does not look acceptable if the image were to be extracted for use.

Is it possible to dynamically add charts/panels, i.e. if an index has 50 hosts then create 10 charts, each containing 5 hosts for the same CPU Load search? Is it also possible to hide a panel/chart entirely if there's no data? (I read about a 'depends' option for chart however I'm not sure how I could integrate that for no data found).

Thanks in advance!

[jeffland]

I don't think that Simple XML allows entirely dynamic creation of an arbitrary number of panels or rows. depends will also require you to add all panels in advance before allowing some of them to display, I wouldn't recommend that much.

You could do it quick and dirty by using the multi-series mode. This will yield a chart for each host, but you'll have to adjust the height of the panel to accomodate the number of series. This will also enforce one series per chart, so it doesn't really implement your desired "five cpu percentages per panel" idea.

Another way to do it would be in javascript, where you could run a for-loop over the number of host you have and create the dashboard dynamically that way.

[bmacias84]

I've done this with using Splunk Web Framework and Javascript. It can be a pain since you also have to manage all the splunk instance of your splunk panel/charts. Each instance is identified by its id if you plan on refreshing data. Here is a simple example for ideas.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/headerview",
    "splunkjs/mvc/footerview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchbarview",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/radiogroupview",
    "splunkjs/mvc/multidropdownview",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel",
    // "splunkjs/mvc/checkboxview"
  ],
  function(
    mvc,
    utils,
    TokenUtils,
    _,
    $,
    DashboardController,
    HeaderView,
    FooterView,
    Dashboard,
    PanelRef,
    ChartElement,
    EventElement,
    HtmlElement,
    ListElement,
    MapElement,
    SingleElement,
    TableElement,
    FormUtils,
    EventHandler,
    DropdownInput,
    RadioGroupInput,
    MultiSelectInput,
    CheckboxGroupInput,
    TextInput,
    TimeRangeInput,
    SubmitButton,
    SearchBarView,
    TableView,
    RadioGroupView,
    MultiDropdownView,
    SearchManager) {
  (function() {
// var instanceList = [];
// Splunk search managers
    new SearchManager({
      id: "search1",
      latest_time: "now",
      earliest_time: "-1h@h",
      autostart: "true",
      search: "| metadata type=hosts | dedup host | table host"
    });
var manager = splunkjs.mvc.Components.getInstance("search1");
// gets data
    manager.on('search:done', function() {
      var results = manager.data('results');
      results.on('data', function() {
        var rows = results.data().rows
        for (var i in rows) {
          /*
           create your charts
         */
        }
      });
    });
}

[blhuynh]

If I saved this as a dynamicchart.js file in /appserver/static, would I just call this in my SimpleXML file to generate the webpage? Thanks