Dashboards & Visualizations

Right top align "last updated time" token, within Time picker fieldset panel using separate div ?

pgadhari
Builder

I am trying to top-right align my "last updated time" token (as a separate div) in the Timepicker panel , but I am getting issues. How do I resolve this issue ? I want to show the time in the top-right corner of the panel, as shown in the image. Please help ?

Below is the XML for the same. At present, it is showing in bottom right of the div.

 <row>
    <panel>
     <title>Tools Analytics</title>
      <input type="dropdown" token="mon" searchWhenChanged="true">
        <label>Select Month</label>
        <fieldForLabel>Month</fieldForLabel>
        <fieldForValue>Month</fieldForValue>
        <search>
          <query>index=com sourcetype=subs|table _time|eval Month=strftime(_time,"%B-%Y")|table Month|dedup Month</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <default>July-2019</default>
        <initialValue>July-2019</initialValue>
      </input>
      <html>
        <style>
          .updatetime {
            color: blue;
            font-size: 17px;
            text-align: right;
            margin-right: 20px;
          }
        </style>
        <div class="updatetime">
          Last Update : $update_time$
        </div>
     </html>
    </panel>
  </row>

alt text

1 Solution

@pgadhari please try the following panels with ids and corresponding CSS override as per your need. Please try out and confirm!

PS: Dashboard (Beta) app currently does not support CSS or JS Extension as it is just subset of Splunk Developer Cloud (React UI based) which allows you to build Dashboard based on New Dashboard Framework through UI and JSON code but nothing more.

<dashboard>
  <label>Last Update Time Alignment</label>
  <row>
     <panel id="panel_header_inputs">
      <title>Tools Analytics</title>
       <input type="dropdown" token="mon" searchWhenChanged="true">
         <label>Select Month</label>
         <fieldForLabel>Month</fieldForLabel>
         <fieldForValue>Month</fieldForValue>
         <search>
           <query>index=com sourcetype=subs|table _time|eval Month=strftime(_time,"%B-%Y")|table Month|dedup Month</query>
           <earliest>0</earliest>
           <latest></latest>
         </search>
         <default>July-2019</default>
         <initialValue>July-2019</initialValue>
       </input>
     </panel>
     <panel id="panel_header_message">
       <html>
         <style>
           #panel_header_input .dashboard-panel{
            margin-right: 0px !important;
           }
           .updatetime {
             color: blue;
             font-size: 17px;
             text-align: right;
             margin-right: 20px;
             padding-top: 70px !important;
           }
         </style>
         <div class="updatetime">
           Last Update : $update_time$
         </div>
      </html>
     </panel>
   </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

@pgadhari please try the following panels with ids and corresponding CSS override as per your need. Please try out and confirm!

PS: Dashboard (Beta) app currently does not support CSS or JS Extension as it is just subset of Splunk Developer Cloud (React UI based) which allows you to build Dashboard based on New Dashboard Framework through UI and JSON code but nothing more.

<dashboard>
  <label>Last Update Time Alignment</label>
  <row>
     <panel id="panel_header_inputs">
      <title>Tools Analytics</title>
       <input type="dropdown" token="mon" searchWhenChanged="true">
         <label>Select Month</label>
         <fieldForLabel>Month</fieldForLabel>
         <fieldForValue>Month</fieldForValue>
         <search>
           <query>index=com sourcetype=subs|table _time|eval Month=strftime(_time,"%B-%Y")|table Month|dedup Month</query>
           <earliest>0</earliest>
           <latest></latest>
         </search>
         <default>July-2019</default>
         <initialValue>July-2019</initialValue>
       </input>
     </panel>
     <panel id="panel_header_message">
       <html>
         <style>
           #panel_header_input .dashboard-panel{
            margin-right: 0px !important;
           }
           .updatetime {
             color: blue;
             font-size: 17px;
             text-align: right;
             margin-right: 20px;
             padding-top: 70px !important;
           }
         </style>
         <div class="updatetime">
           Last Update : $update_time$
         </div>
      </html>
     </panel>
   </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

pgadhari
Builder

Sure. I will try this out and get back to you. Thanks.

0 Karma

pgadhari
Builder

Yes, this works. Thanks.

woodcock
Esteemed Legend

You might try the new Dashboards (Beta) app on Splunk. I have heard that it is a complete update of the dashboarding framework and has many more options.

0 Karma

pgadhari
Builder

Yes, i saw that app, looks really interesting. But my current Splunk version is 6.6.3 and I have plan to upgrade it in next couple of weeks. That Beta app is not support on Splunk version 6.6.3, hence is there any alternate solution that you can provide for my issue ? Please advise ?

0 Karma
Get Updates on the Splunk Community!

Welcome to the Future of Data Search & Exploration

You have more data coming at you than ever before. Over the next five years, the total amount of digital data ...

What’s new on Splunk Lantern in August

This month’s Splunk Lantern update gives you the low-down on all of the articles we’ve published over the past ...

This Week's Community Digest - Splunk Community Happenings [8.3.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...