Dashboards & Visualizations

facing issue colorPalette implementation

sush
Engager

I implemented the <colorpalete> tag giving condition for success and failed scenario but its not getting impacting the code .

visual-

sush_0-1592805964880.png

   <format type="color" field="Stream">
      <colorPalette type="expression">case(value="P2O","#51cfc8",value="O2A","#EAD1DC",value="U2C","#93C47D")</colorPalette>
   </format>
   <format type="color">
      <colorPalette type="expression">case(value="Success","#428C43",value="Failed","#B72D0E",value="NA","#b5b8bd")</colorPalette>
   </format>

source code-

<dashboard theme="dark">
   <label>Dummy123</label>
   <init>
      <unset token="tok_details" />
      <unset token="tok_json" />
   </init>
   <search id="API_Base_Search">
      <query><![CDATA[index=devops-insights sourcetype="http:davinci_api_metrics"
| rex mode=sed "s/\"//g"
| rex "name[\:\s]+(?<API_Name>.*?)\s+\((?<Applications>.*?)\)"
| rex "steps[\:\s]+\[\s+\{\s+result[\:\s]+\{\s+duration[\:\s]+\w+\,\s+status[\:\s]+(?<APIServiceCall>.*?)\s+\}\,\s+line[\:\s]+\w+\,\s+name[\:\s]+(?<Step1>.*?)\,"
| rex "keyword[\:\s]+Given\s+\}\,\s+\{\s+result[\:\s]+\{\s+duration[\:\s]+\w+\,\s+status[\:\s]+(?<APIRequest>.*?)\s+\}\,\s+line[\:\s]+\w+\,\s+name[\:\s]+(?<Step2>.*?)\,"
| rex "keyword[\:\s]+When\s+\}\,\s+\{\s+result[\:\s]+\{\s+duration[\:\s]+\w+\,\s+status[\:\s]+(?<APIResponse>.*?)\s+\}\,"
| rex "API URL is[\:\s]+(?<API_URL>.*?)\,"
| rex "API response header should have status code as\s\\\(?<Code>.*?)\\\\,"
| rex "correlationId\\\\:\\\(?<CorrelationId>.*?)\\\\,"
| table API_Name, Applications, ,API_URL, APIServiceCall,Step1, APIRequest, Step2, APIResponse, Code, CorrelationId, _time]]></query>
      <earliest>@d</earliest>
      <latest>now</latest>
   </search>
   <row>
      <panel>
         <html>
            <p />
            <style>#user_input th[data-sort-key=IR_Number] {
width: 12% !important;
}

#test th[data-sort-key=Category] {
width: 8.3% !important;
min-width: 180px;
}
#test th[data-sort-key=Environment] {
width: 8.3% !important;
}
#test th[data-sort-key=IRNumber] {
width: 8.3% !important;
}
#test th[data-sort-key="6AM to 10AM"] {
width: 8.3% !important;
}
#test th[data-sort-key=Comments6AMto10AM] {
width: 8.3% !important;
}

#test th[data-sort-key="10AM to 2PM"] {
width: 8.3% !important;
}
#test th[data-sort-key=Comments10AMto2PM] {
width: 8.3% !important;
}
#test th[data-sort-key="2PM to 6PM"] {
width: 8.3% !important;
}
#test th[data-sort-key=Comments2PMto6PM] {
width: 8.3% !important;
}
#test th[data-sort-key="6PM to 10PM"] {
width: 8.3% !important;
}
#test th[data-sort-key=Comments6PMto10PM] {
width: 8.3% !important;
}
#test th[data-sort-key=Shakeout_Date] {
width: 8.3% !important;
}

#customWidth th[data-sort-key=count] {
width: 20% !important;
}
#test tbody tr td[data-cell-index="0"]{

border-radius: 0px !important;

text-align:left !important;

}

#test tbody tr td[data-cell-index=n]{

border-radius: 0px !important;

text-align:left !important;

}

#test tbody tr td{

border-radius: 8px !important;

text-align:left !important;

border: 2px solid black;

}

#test thead tr th{

border-radius: 8px 8px 0px 0px !important;

background-color: mediumvioletred !important;

text-align:center !important;

}

#test table {

margin:4px !important;

border:2px;

border-radius:5px 5px 0px 0px;

min-width:99% !important

}</style>
         </html>
         <table id="test">
            <title>API Calls Summary</title>
            <search base="API_Base_Search">
               <query>| eval Stream=case(like(API_Name,"Logistics Booking API"),"P2O",like(API_Name,"Tramas Feasbility Check API"),"P2O")
| eval Scenario=case(like(API_Name,"Logistics Booking API"),"Add New Mobile",like(API_Name,"Tramas Feasbility Check API"),"Service Migration")
| eval ReaponseAPI=case((like(APIServiceCall,"passed") AND like(APIRequest,"passed") AND like(APIResponse,"passed")),"Success",true(),"Failed")
| fields Stream,Scenario,CorrelationId, API_Name, , API_URL, ReaponseAPI, _time
| eval Hour=strftime(_time, "%H")
| eval 08:00=if(Hour==08,ReaponseAPI,"")
| eval 09:00=if(Hour==09,ReaponseAPI,"")
| eval 10:00=if(Hour==10,ReaponseAPI,"")
| eval 11:00=if(Hour==11,ReaponseAPI,"")
| eval 12:00=if(Hour==12,ReaponseAPI,"")
| eval 13:00=if(Hour==13,ReaponseAPI,"")
| eval 14:00=if(Hour==14,ReaponseAPI,"")
| eval 15:00=if(Hour==15,ReaponseAPI,"")
| eval 16:00=if(Hour==16,ReaponseAPI,"")
| eval 17:00=if(Hour==17,ReaponseAPI,"")
| eval 18:00=if(Hour==18,ReaponseAPI,"")
| eval 19:00=if(Hour==19,ReaponseAPI,"")
| eval 20:00=if(Hour==20,ReaponseAPI,"")
| eval 21:00=if(Hour==21,ReaponseAPI,"")
| stats values(Stream) as Stream, values(Scenario) as Scenario,
values(08:00) as 08:00, values(09:00) as 09:00, values(10:00) as 10:00, values(11:00) as 11:00, values(12:00) as 12:00, values(13:00) as 13:00,
values(14:00) as 14:00, values(15:00) as 15:00, values(16:00) as 16:00,
values(17:00) as 17:00,
values(18:00) as 18:00,
values(19:00) as 19:00,
values(20:00) as 20:00,
values(21:00) as 21:00,
values(22:00) as 22:00,
by API_Name
| fields Stream,Scenario, API_Name, 08:00,09:00,10:00,11:00,12:00,13:00,14:00,15:00,16:00,17:00,18:00,19:00,20:00,21:00,22:00</query>
            </search>
            <option name="count">100</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">cell</option>
            <option name="percentagesRow">false</option>
            <option name="rowNumbers">false</option>
            <option name="totalsRow">false</option>
            <option name="wrap">false</option>
            <format type="color" field="Stream">
               <colorPalette type="expression">case(value="P2O","#51cfc8",value="O2A","#EAD1DC",value="U2C","#93C47D")</colorPalette>
            </format>
            <format type="color">
               <colorPalette type="expression">case(value="Success","#428C43",value="Failed","#B72D0E",value="NA","#b5b8bd")</colorPalette>
            </format>
            <drilldown>
               <set token="tok_API_Name">$row.API_Name$</set>
               <set token="tok_hour">$click.name2$</set>
               <set token="tok_details">true</set>
               <unset token="tok_json" />
            </drilldown>
         </table>
      </panel>
   </row>
   <row>
      <panel depends="$tok_details$">
         <table>
            <title>Details of the selected $tok_API_Name$ Call</title>
            <search base="API_Base_Search">
               <query>| search API_Name="$tok_API_Name$"
| eval currentwindow="$tok_hour$".":00"
| eval currenttime=now()
| eval currenttime=strftime(currenttime, "%d-%m-%Y")
| eval starttime_tok=currenttime+"T"+currentwindow
| eval starttime_tok=strptime(starttime_tok,"%d-%m-%YT%H:%M:%S")
| eval endtime_tok=starttime_tok+3600
| eval slot=if(_time&gt;starttime_tok AND _time&lt;endtime_tok,"Yes", "No")
| where slot="Yes"


| eval APIServiceCall=Step1." - ".APIServiceCall
| eval APIRequest=Step2." - ".APIRequest
| eval APIResponse=Code." - ".APIResponse
| eval API_Call_Summary=APIServiceCall."#".APIRequest."#".APIResponse
| eval API_Call_Summary=split(API_Call_Summary,"#")
| fields API_Name, CorrelationId, Applications, API_URL, API_Call_Summary, _time</query>
            </search>
            <option name="count">100</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">cell</option>
            <option name="percentagesRow">false</option>
            <option name="rowNumbers">false</option>
            <option name="totalsRow">false</option>
            <option name="wrap">true</option>
            <format type="color" field="API_URL">
               <colorPalette type="sharedList">["0xEAD1DC"]</colorPalette>
               <scale type="sharedCategory" />
            </format>
            <format type="color" field="API_Name">
               <colorPalette type="map" />
            </format>
            <drilldown>
               <set token="tok_json">true</set>
               <set token="tok_CorId">$row.CorrelationId$</set>
            </drilldown>
         </table>
      </panel>
   </row>
   <row>
      <panel depends="$tok_json$">
         <table>
            <title>Details of $tok_API_Name$ for CorrelationId $tok_CorId$</title>
            <search>
               <query>index=devops-insights sourcetype="http:davinci_api_metrics"
| search $tok_CorId$
| table _raw
| rename _raw as Event_Details</query>
               <earliest>$earliest$</earliest>
               <latest>$latest$</latest>
            </search>
            <option name="count">100</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">none</option>
            <option name="percentagesRow">false</option>
            <option name="refresh.display">progressbar</option>
            <option name="rowNumbers">false</option>
            <option name="totalsRow">false</option>
            <option name="wrap">true</option>
         </table>
      </panel>
   </row>
</dashboard>

 

Labels (2)
Tags (3)
0 Karma

niketn
Legend

@sush if you want to apply colorPalette to table cell/s, you need to supply the field name. Since you have static CSS for various hourly buckets, you would need to create something similar for colorPalette format as well. For example following should work for 08:00 and 09:00 table cell columns respectively.

   <format type="color" field="08:00">
      <colorPalette type="expression">case(value="Success","#428C43",value="Failed","#B72D0E",value="NA","#b5b8bd")</colorPalette>
   </format>
   <format type="color" field="09:00">
      <colorPalette type="expression">case(value="Success","#428C43",value="Failed","#B72D0E",value="NA","#b5b8bd")</colorPalette>
   </format>

 PS: You are better off applying table cell color using JS if you want to write a generic code instead of creating 24 format section in Simple XML like above. Refer to one of my older answers to do this using JS: https://community.splunk.com/t5/Dashboards-Visualizations/How-can-I-get-the-Table-cell-colorization-...

On a different note, seems like your CSS style override lines of code can be reduced as same override is applied to multiple selectors. Also your SPL can be improved. You are also using Base search to pass events directly without using a transforming command which may lead to performance issues and silent dropping of data if event limit is reached for base search. ( However, all other tips later if needed 🙂 )

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Get Updates on the Splunk Community!

Detecting Remote Code Executions With the Splunk Threat Research Team

WATCH NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If exploited, ...

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

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...