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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...