topic Re: Module Switcher not working as expected in All Apps and Add-ons

Module Switcher not working as expected

ahogbin — Thu, 27 Mar 2014 06:20:58 GMT

Help..

I am in the process of building a dashboard that allows a user to select components and the type of report that they wish to view. Depending the the input either a chart or timechart report is displayed.
I have used the sideview util 'Switcher' and the dashboard is working in part. When I load the dashboard and select report 2 for either the home or motor component then the relevant report is shown.. however if I select report 1 then for some reason both reports (1 & 2) are shown together.

I have included the xml below and I am sure that it has something to do with the position of the clsing statement but despite a bit or trial and error I am unable to get it so that both reports options behave the same.

Any guidance greatly appreciated

XML

Safire External Avg Page Response Times for Home & Motor

1
True
*

1
True
splunk.search.job

<![CDATA[
Instructions: Please select the relevant Home or Motor component from the below list.

Once done select the time periods you wish to compare and click on 'Search'.
]]>

action

home
Home

motor
Motor

<module name="Pulldown" layoutPanel="viewHeader">

report

report1
Report 1

report2
Report 2

  <!--Select time range-->
  <module name="TimeRangePicker" layoutPanel="viewHeader">
<param name="searchWhenChanged">False</param>
<module name="SubmitButton" layoutPanel="viewHeader">
  <param name="label">Click to Search</param>
  <param name="allowSoftSubmit">False</param>
  <param name="visible">True</param>
  <param name="updatePermalink">True</param>
<!--End user selection-->

   <module name="Switcher" group=" ">
    <param name="selectedGroup">$report$,</param>

   <!--Results for report 1-->
  <module name="Search" layoutPanel="panel_row1_col1" group="report1">
    <param name="search">index=summary search_name="Safire_Production_(SI)" $action$-internet*.xhtml | lookup safire_operations_lookup BUS_GRP OUTPUT COMMON_TASK PAGE | chart avg(duration) by PAGE COMMON_TASK</param>
    <param name="groupLabel">Results</param>

    <module name="HTML">
      <param name="html"><![CDATA[
        Displaying results for <b>$action.label$</b> and <b>$report.label$</b> for the selected time period
      ]]></param>
    </module>

    <module name="ViewstateAdapter">
      <param name="suppressionList">
        <item>charting.chart.nullValueMode</item>
        <item>charting.axisTitleY.visibility</item>
        <item>charting.chart.sliceCollapsingThreshold</item>
        <item>charting.legend.placement</item>
        <item>charting.chart.stackMode</item>
        <item>charting.axisY.scale</item>
        <item>charting.axisX.scale</item>
        <item>charting.chart</item>
        <item>charting.legend.labelStyle.overflowMode</item>
        <item>charting.drilldown</item>
        <item>charting.layout.splitSeries</item>
        <item>charting.axisTitleX.visibility</item>
        <item>charting.chart.style</item>
      </param>
      <module name="HiddenFieldPicker">
        <param name="strictMode">True</param>
        <module name="JobProgressIndicator">
          <module name="EnablePreview">
            <param name="display">False</param>
            <param name="enable">True</param>
            <module name="HiddenChartFormatter">
              <param name="charting.chart.nullValueMode">zero</param>
              <param name="charting.axisTitleY.visibility">visible</param>
              <param name="charting.chart.sliceCollapsingThreshold">0.01</param>
              <param name="charting.legend.placement">right</param>
              <param name="charting.chart.stackMode">stacked</param>
              <param name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</param>
              <param name="charting.axisX.scale">linear</param>
              <param name="charting.chart">bar</param>
              <param name="charting.axisY.scale">linear</param>
              <param name="charting.drilldown">all</param>
              <param name="charting.layout.splitSeries">0</param>
              <param name="charting.axisTitleX.visibility">visible</param>
              <param name="charting.chart.style">shiny</param>
              <module name="JSChart">
                <param name="width">100%</param>
                <module name="Gimp"/>
                <module name="ConvertToDrilldownSearch">
                  <module name="ViewRedirector">
                    <param name="viewTarget">flashtimeline</param>
                  </module>
                </module>
              </module>
            </module>
          </module>
        </module>
      </module>
    </module>
  </module>
    </module>

  <module name="Search" layoutPanel="panel_row1_col1" group="report2">
    <param name="search">index=summary search_name="Safire_Production_(SI)" $action$-internet*.xhtml | lookup safire_operations_lookup BUS_GRP OUTPUT COMMON_TASK PAGE | timechart avg(duration) by PAGE</param>
    <param name="groupLabel">Results</param>

    <module name="HTML">
      <param name="html"><![CDATA[
        Displaying results for <b>$action.label$</b> and <b>$report.label$</b> for the selected time period
      ]]></param>
    </module>

    <module name="ViewstateAdapter">
      <param name="suppressionList">
        <item>charting.chart.nullValueMode</item>
        <item>charting.axisTitleY.visibility</item>
        <item>charting.chart.sliceCollapsingThreshold</item>
        <item>charting.legend.placement</item>
        <item>charting.chart.stackMode</item>
        <item>charting.axisY.scale</item>
        <item>charting.axisX.scale</item>
        <item>charting.chart</item>
        <item>charting.legend.labelStyle.overflowMode</item>
        <item>charting.drilldown</item>
        <item>charting.layout.splitSeries</item>
        <item>charting.axisTitleX.visibility</item>
        <item>charting.chart.style</item>
      </param>
      <module name="HiddenFieldPicker">
        <param name="strictMode">True</param>
        <module name="JobProgressIndicator">
          <module name="EnablePreview">
            <param name="display">False</param>
            <param name="enable">True</param>
            <module name="HiddenChartFormatter">
              <param name="charting.chart.nullValueMode">zero</param>
              <param name="charting.axisTitleY.visibility">visible</param>
              <param name="charting.chart.sliceCollapsingThreshold">0.01</param>
              <param name="charting.legend.placement">right</param>
              <param name="charting.chart.stackMode">stacked</param>
              <param name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</param>
              <param name="charting.axisX.scale">linear</param>
              <param name="charting.chart">column</param>
              <param name="charting.axisY.scale">linear</param>
              <param name="charting.drilldown">all</param>
              <param name="charting.layout.splitSeries">0</param>
              <param name="charting.axisTitleX.visibility">visible</param>
              <param name="charting.chart.style">shiny</param>
              <module name="JSChart">
                <param name="width">100%</param>
                <module name="Gimp"/>
                <module name="ConvertToDrilldownSearch">
                  <module name="ViewRedirector">
                    <param name="viewTarget">flashtimeline</param>
                  </module>
                </module>
              </module>
            </module>
          </module>
        </module>
      </module>
    </module>
  </module>
    </module> 
  </module>

Re: Module Switcher not working as expected

sideview — Thu, 27 Mar 2014 06:49:28 GMT

You're right. The reason why the switcher is only showing and hiding the "report1" section is that the "report2" section is not a child of the switcher at all.

Especially on a view this complicated (or half this complicated), you need to be very careful with your indentation so as to minimize your own confusion. If the file was indented cleanly, it would have been easy for you to spot the misalignment - the fact that "report1" and "report2" were not siblings of eachother.

There's basically an extra </module> tag before the "report2" section, that you'll have to move to the end of that same section.

However... there's a lot else that is quite wrong with this approach and there's a lot of dead stuff in this view that can be removed. I've taken the liberty of cleaning it all up and posting the result to pastebin. The cleaned up version is half the size. http://pastebin.com/xtZRVU8X

1) The only difference between the report1 section and the report2 section, is that the first does chart avg(duration) by PAGE COMMON_TASK and the second does | timechart avg(duration) by PAGE.

Just have those be the two values of your Pulldown, and dont use the Switcher module at all. Switcher should be a last resort, for when you have some difference between sections where the module config per section has to be fundamentally different. Here you can factor the difference into a single $foo$ token. This will drastically simplify your view.

2) You're setting searchWhenChanged to False on the TimeRangePicker even though you have allowSoftSubmit to False on the SubmitButton. Change searchWhenChanged to True (you should quite honestly never use False ever. it is kind of evil and the UI can behave badly)

3) lots of dead or vestigial module code.

a) I strongly suspect that your ViewstateAdapter module is actually serving no purpose and it has just been copied over from some original simpleXML conversion long ago. Delete it entirely

b) HiddenFieldPicker and Gimp are definitely doing nothing, and are vestigial carryovers from simpleXML conversion. Delete them.

c) JobProgressIndicator and EnablePreview should never contain downstream modules (it does no harm but it makes no sense). This is a bug in the SimpleXML conversion code. De-indent these child modules. Save your eyesight a little.

4) weird things on the <view> tag. Some of these are side effects of simplexml conversion, but you can delete autoCancelInterval="90" isVisible="true" objectMode="SimpleForm" and also autorun="False". Some of those are defaults and some are having no effect.
5) updatePermalink on the SubmitButton module isn't going to be doing anything useful so you can remove it. However... if you want a permalink to be constantly updated, even in an arbitrary form search view in advanced XML like this, you can use the Sideview URLLoader module with the keepUrlUpdated param set to true, and it will actually update a working permalink as well as enable back button and forward button for all the pulldown changes.

6) the groupLabel param is meaningless and it's just cruft accidentally inserted by the simpleXml conversion code. You can delete all of these.

7) lots of duplicated layoutPanel attributes. If layoutPanel is specified for a given module, all its downstream modules will inherit that layoutPanel so there's no need to specify it again.

😎 I'm fairly certain that many of your charting keys were explicitly setting values that happen to be the default values for the given key in the charting framework, so I removed those.

In the end your XML becomes a LOT simpler with all these fixes and cleanups.

For some reason the answers site is being a bit ornery with respect to posting large code samples, so I've put a cleaned up version over in pastebin for you.

http://pastebin.com/xtZRVU8X

One more note - a useful and cheap trick to perfectly indent a crazily-indented view, is to load that view in the Sideview Editor, then pick something at random to edit. Submit the form however with the exact values that it loaded with. The Sideview Editor will write the XML back to disk, but it will do lots of little cleanup things to it and one of those is that the indentation will get fixed. You might have to fish the file out of local and move ti over to default, but it can be useful.

Re: Module Switcher not working as expected

ahogbin — Thu, 27 Mar 2014 22:24:30 GMT

Hello,
Thank you very much. Your answer makes a lot of sense and the information you provide is of so much help in helping me to gain a better understanding of XML ad its intricacies.

One other question if I may.. is it possible to display a different chart type (bar or column) from either a user input (ie they select Bar or Column from a list) or dependent on the report being run (Bar for Report 1 and Column for Report 2).

Cheers and thank you again.

Alastair

Re: Module Switcher not working as expected

sideview — Thu, 27 Mar 2014 23:51:00 GMT

Yes. For the first - making it depend directly on user input, either a) make the "name" param of the form element module be "charting.chart", in which case the charting stuff picks it up directly. or b) use a ValueSetter module with its name set to "charting.chart", and its value set to other token(s)

For the second question, use either a) ValueSetter's conditional logic ( http://answers.splunk.com/answers/108257/modify-the-clicked-field-value-if-clicked-field-x ) to set the chart type depending on some other key, or b) in the Pulldown docs there's a method to set more than one value.

Re: Module Switcher not working as expected

ahogbin — Fri, 28 Mar 2014 01:11:58 GMT

Umm ... ok. I have created a radio button with options for either bar or column and passing the value to $graph$.
When I then try to pass the selected value to charting.chart>$graph$ the result is not what I expect and the chart is displayed as a column regardless of chart type selected.
My question is how do I pass the selected graph type to the chart?
I can also (and preferred method) pass the graph type based on report run (ie value>report1,graph type. However I am still stuck on getting the 'graph type' value over to charting.chart

Cheers,

Alastair

Re: Module Switcher not working as expected

sideview — Fri, 28 Mar 2014 01:45:55 GMT

I gave you too much info at once. 😃 I gave you 4 ways to do it when you only need one. Best one is to change the "name" param of your radio button from "graph" to "charting.chart" like so

<param name="name">charting.chart</param>

and then your two Radio values are "bar" and "column". That's it. when you set charting.chart to "column" or "bar" with a HiddenChartFormatter module you're creating a $foo$ token. Here we just create it directly with the pulldown.

Re: Module Switcher not working as expected

ahogbin — Fri, 28 Mar 2014 03:17:54 GMT

Almost there.. I have added the graph type as a delimited option to the 'report' so I now have
chart avg(duration) by PAGE COMMON_TASK,bar
timechart avg(duration) by PAGE,column

I have then used the value setter

reportSplit
,
$report$
but I am unsure as to how to pass the graph component thru to the graph (the split works as it returns the correct search).

Re: Module Switcher not working as expected

ahogbin — Fri, 28 Mar 2014 07:48:34 GMT

Below the valuesetter module I have added
charting.chart
$reportSplit[1]$

but to no avail.
I know that the value is being picked up as it is possible to pipe the output to a text string (reportSplit[1] displays the correct value of either bar or column).. but the value is not being recognised by the chart and the chart is displayed as a column chart regardless.
Sorry for so many questions and thank you so much for all your help.

Alastair

Re: Module Switcher not working as expected

sideview — Fri, 28 Mar 2014 16:51:36 GMT

HTML modules are excellent debugging tools. Just above the FlashChart (as a sibling not a parent), put an HTML module with $charting.chart$. Is it possible there's simply a HiddenChartFormatter between the ValueSetter and the JSChart that is also setting $charting.chart$ to column?

Re: Module Switcher not working as expected

ahogbin — Mon, 31 Mar 2014 04:59:28 GMT

The penny finally dropped and all is now working as expected. After reading another post from someone trying to do a similar thing I saw your answer re using valuesetter and arg.whatever to set the required values
I added
$reportSplit[1]$
In the place of the HiddenChartFormatter and hey presto it worked.
Thank you again for all your help... it has been hugely appreciated.
Cheers,

Alastair

Re: Module Switcher not working as expected

sideview — Mon, 31 Mar 2014 05:30:15 GMT

Glad to hear. Well you're officially a dangerous user now, if you can master a view with this much going on in it. 😃 Cheers.