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

niketn
Legend

@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

niketn
Legend

@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!

Enterprise Security Content Update (ESCU) | New Releases

In December, the Splunk Threat Research Team had 1 release of new security content via the Enterprise Security ...

Why am I not seeing the finding in Splunk Enterprise Security Analyst Queue?

(This is the first of a series of 2 blogs). Splunk Enterprise Security is a fantastic tool that offers robust ...

Index This | What are the 12 Days of Splunk-mas?

December 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...