Solved: Re: How to change a Simple XML table height when n...

gabriel_vasseur · ‎06-26-2023

The solution in Solved: Re: How do you make a table that reduces in height... - Splunk Community does not work anymore, at least not for Splunk Cloud version 9.0.2303.201.

Hopefully it's just a simple tweak that's needed?

**UPDATE** I'm adding a screenshot and the code that I use that used to work:

<dashboard version="1.1" theme="dark">
  <label>TEMP GABS test css</label>
  <row>
    <panel>
      <table id="table1">
        <search>
          <done>
            <condition match="'job.resultCount' != 0">
              <set token="table1TableHeightCSS"></set>
              <set token="table1TableAlertCSS"></set>
            </condition>
            <condition match="'job.resultCount' == 0">
              <set token="table1TableHeightCSS">height: 50px !important;</set>
              <set token="table1TableAlertCSS">position:relative; top: -130px !important;</set>
            </condition>
          </done>
          <query>| stats count
| where count&gt;0</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <search>
          <query>| stats count
</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row depends="$never_set$">
    <panel>
      <html>
        <style>
          #table1 .splunk-table{
            $table1TableHeightCSS$
          }
          #table1 .alert-info{
            $table1TableAlertCSS$
          }
        </style>
      </html>
    </panel>
  </row>          
</dashboard>

**UPDATE2** If I go in and out of the edit source mode, it starts to work:

But if I just reload the dashboard from scratch it doesn't.

I've cleared all my browser's data (cookies, cache, etc) and restarted my browser (edge version 114.0.1823.51) and can confirm the same behaviour.

Paul_Dixon · ‎09-11-2023

Glad you found a solution that works! its very temperamental it seems, but a really useful piece of code to save masses of whitespace when no results

View solution in original post

kamlesh_vaghela · ‎06-27-2023

@gabriel_vasseur

Did you check with another browser like Chrome, Safari, or Firefox, ??

KV

gabriel_vasseur · ‎06-27-2023

It needs to work with Edge.

I did check with Opera and got the exact same behaviour: doesn't work on first load, but if I go to "edit source" and back it starts working, but then doesn't work again if I reload the page.

kamlesh_vaghela · ‎06-27-2023

@gabriel_vasseur

Any idea how much time it's taking for a search?

And

Meanwhile an you please try this?

<dashboard version="1.1" theme="dark">
  <label>TEMP GABS test css</label>
  <row>
    <panel>
      <table id="table1">
        <search>
          <progress>
            <set token="table1TableHeightCSS">height: 50px !important;</set>
            <set token="table1TableAlertCSS">position:relative; top: -130px !important;</set>
          </progress>
          <done>
            <condition match="'job.resultCount' != 0">
              <set token="table1TableHeightCSS"></set>
              <set token="table1TableAlertCSS"></set>
            </condition>
            <condition match="'job.resultCount' == 0">
              <set token="table1TableHeightCSS">height: 50px !important;</set>
              <set token="table1TableAlertCSS">position:relative; top: -130px !important;</set>
            </condition>
          </done>
          <query>| stats count
| where count&gt;0</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <search>
          <query>| stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row depends="$never_set$">
    <panel>
      <html>
        <style>
          #table1 .splunk-table{
            $table1TableHeightCSS$
          }
          #table1 .alert-info{
            $table1TableAlertCSS$
          }
        </style>
      </html>
    </panel>
  </row>          
</dashboard>

Just use your original search.

KV

gabriel_vasseur · ‎06-27-2023

I don't understand your question about timing. The solution should not depend on the time it takes to run the search. It shouldn't depend on the search either.

It doesn't work with "| stats count | where count>0" which is about the simplest search I can think of that produces no results. It takes no time at all, just however long it take to load the dashboard. A few seconds the first time, a fraction of a second when refreshing the page. Either way the CSS just doesn't work.

I tried your suggestion but it yields the exact same behaviour.

Have you got access to a Splunk Cloud instance of the same version (9.0.2303.201)? If yes, can you reproduce the issue?

kamlesh_vaghela · ‎06-27-2023

@gabriel_vasseur

I have requested a free Splunk Cloud Instance for the same. So waiting for it. Please check you messages for further communication.

KV

kamlesh_vaghela · ‎06-26-2023

@gabriel_vasseur

technically it should work. Can you please share your sample XML code if possible?

KV

gabriel_vasseur · ‎06-27-2023

Thanks for having as look. I thought this was going to be much more straightforward... I've now updated the original post with a lot more information. Hopefully that'll help?

Paul_Dixon · ‎09-08-2023

I had the same issue after a recent Splunk upgrade, the token height was working then it suddenly didn't. I found that it no longer liked the default condition being blank:

<set token="table1TableAlertCSS"></set>

so i set default to '1' and it worked for me:

gabriel_vasseur · ‎09-11-2023

With high expectations I tried it and sadly it didn't work for me. However, building on your idea that it didn't like the CSS to be initially empty I eventually found the following solution:

<dashboard version="1.1" theme="light">
  <label>GABS Test css</label>
  <row>
    <panel>
      <table id="doneID">
        <title>Test</title>
        <search>
          <done>
            <condition match="'job.resultCount' == 0">
              <set token="doneTableHeightCSS">height: 50px !important;</set>
              <set token="doneTableAlertCSS">position:relative; top: -130px !important;</set>
            </condition>
            <condition>
              <set token="doneTableHeightCSS"></set>
              <set token="doneTableAlertCSS"></set>
            </condition>
          </done>
          <query>
| stats count
| search count=5
</query>
          <earliest>@d</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </table>
    </panel>
  </row>
  <row depends="$never_set$">
    <panel>
      <html>
        <style>
          #doneID .splunk-table {
            1;
            $doneTableHeightCSS$
          }
          #doneID .alert-info{
            1;
            $doneTableAlertCSS$
          }
        </style>
      </html>
    </panel>
  </row>
</dashboard>

More than happy to give you the credit for it. If you re-submit it I'll accept it as a solution.

Paul_Dixon · ‎09-11-2023

Glad you found a solution that works! its very temperamental it seems, but a really useful piece of code to save masses of whitespace when no results

How to change a Simple XML table height when no results is found?

simple XML

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

.conf24 | Session Scheduler is Live!!

Introducing the Splunk Community Dashboard Challenge!