Dashboards & Visualizations

Are there timing races with requirejs splunkjs/ready! when loading appserver/static js modules

abramble
Explorer

TL/DR: A custom cell renderer only works after using table pagination or column sorting controls, but it seems related to loading appserver/static code with require.

I am attempting to add a custom table cell renderer to a simple xml dashboard. Doing this as per the documented examples works as expected. Here is the dashboard xml for testing.

<dashboard script="icon_test.js">
  <label>Icon Test</label>
  <row>
    <panel>
      <table id="asset_test">
        <title>Asset Icons</title>
        <search>
          <query>| inputlookup asset_rendering | stats count by asset_name</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

icon_test.js loads successfully and modifies the desired cell , just placing square brackets around the cell value. When the dashboard loads everything works.

// icon_test.js
require([
  'underscore',
  'splunkjs/mvc',
  'splunkjs/mvc/tableview',
  'splunkjs/mvc/simplexml/ready!'
], function(_, mvc, TableView) {

  var SimpleRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) { return cell.field === 'asset_name'; },
    render: function($td,cell) {
      $td.text("[[ " + cell.value + " ]]");
    }
  });


  var target = mvc.Components.get('icon_test');
  var viz = target.getVisualization(
    function(tableView) {
      tableView.addCellRenderer( new SimpleRenderer() );
    }
  );

}

The above works just fine.

In order to add icons based on the cell value across many dashboards, the icon code has been moved into its own module, and is loaded by icon_test.js require as '/static/app/myapp/customicons.js'

// customicons.js
define([],function() {   
  var cssRex = new RegExp('[^\w\d_]','g');
  var iconMaker = {
    getIcon: function(name) {
      // contrived example
      var css_name = name.toString().replace( cssRex , '_' );

      var icon = document.createElement('div');
      icon.className = 'asset-icon-' + css_name;
      icon.style = 'color: green';
      icon.innerText = name;
      return icon;
    }
  };
  return iconMaker;
});

Still no problem. However - if customicons.js requires any further modules from appserver/static , the issue arises, making it difficult to factor out reusable parts.

Can anyone suggest work arounds for this?

Possibilities I'm considering but am unsure if they'll help;

  • putting all shared code into one file and use define with module names and see where that takes me.
  • add a build step to the app (does not currently need one) and use webpack to bundle everything
Get Updates on the Splunk Community!

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...

What's New in Splunk Cloud Platform 9.0.2208?!

Howdy!  We are happy to share the newest updates in Splunk Cloud Platform 9.0.2208! Analysts can benefit ...

Admin Console: A Single, Unified Interface for All Your Cloud Admin Needs

WATCH NOWJoin us to learn how the admin console can save you time and give you more control over the Splunk® ...