Require input value in text box

[ben_leung]

When a user clicks on the search button in the dashboard, it will run the search query, populating the panel with the chart. What can I do to make it so that there has to be a value in the text box for token $hostName1$ ?

<fieldset submitButton="true">
    <input type="text" token="hostName1">
      <label>Host 1</label>
      <default/>
      <prefix> host=</prefix>
    </input>
    <input type="text" token="hostName2">
      <label>Host 2</label>
      <default/>
      <prefix>OR host=</prefix>
    </input>
    <input type="text" token="hostName3">
      <default/>
      <label>Host 3</label>
      <prefix>OR host=</prefix>
    </input>
    <input type="text" token="hostName4">
      <default/>
      <label>Host 4</label>
      <prefix>OR host=</prefix>
    </input>
    <input type="text" token="hostName5">
      <default/>
      <label>Host 5</label>
      <prefix>OR host=</prefix>
    </input>

    <chart>
      <title>Percent CPU Utilized </title>
      <searchString>index=os_core $hostName1$ $hostName2$ $hostName3$ $hostName4$ $hostName5$ $hostName6$ | eval PctCPU = 100 - pctIdle  | timechart avg(PctCPU) by host</searchString>
      <option name="charting.axisY.scale">linear</option>
      <option name="charting.chart">line</option>
      <option name="charting.chart.nullValueMode">gaps</option>
      <option name="charting.chart.stackMode">default</option>
      <option name="charting.layout.splitSeries">0</option>
      <option name="charting.legend.placement">bottom</option>
      <option name="charting.secondaryAxis.scale">linear</option>
      <option name="count">50</option>
      <option name="displayRowNumbers">true</option>
      <option name="charting.axisTitleX.visibility">visible</option>
      <option name="charting.axisTitleY.visibility">visible</option>
      <option name="charting.axisX.scale">linear</option>
      <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
      <option name="charting.chart.style">shiny</option>
      <option name="charting.drilldown"></option>
      <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
      <option name="charting.secondaryAxis.minimumNumber">0</option>
      <option name="charting.secondaryAxis.maximumNumber">100</option>
      <option name="height">150px</option>
    </chart>

[dfoster_splunk]

You could split the input field token and dashboard token to be two tokens. Then use SplunkJS to populate the second token only when the first one has a non-empty value. In the meantime the dashboard will refuse to render anything with the second token until it is populated.

Something like:

require(['splunkjs/ready!'], function(mvc) {
    mvc.Components.get('default').on('change:inputToken', function(model, newValue) {
        if (newValue) {
            mvc.Components.get('submitted').set('dashboardToken', newValue);
        }
    });
});

More info here: http://dev.splunk.com/view/webframework-concepts/SP-CAAAEW4

[ben_leung]

@linu1988 I am looking into the side view util app for more info on the pulldown module. It is too bad that the number of host values is over 100, which is why we need a text input box.

[linu1988]

you can do it. Using the pulldown module user have to choose one value or a default value will be chosen.

[dfoster_splunk]

You could just set the default value to * if matching multiple hosts is okay.

[ben_leung]

I wonder if you can default the value to something that would not even start the search. I don't think that's possible though.

[ben_leung]

If there is no way to do this in advance xml, then I will tell our users that they will have to make this a development item.

[linu1988]

put a java script in your input and validate it. If no input is given re-focus on that again. Could you give it a try?

[ben_leung]

Is this possible since without the host field, the time chart will still be able to run once the submit button is hit.