Splunk's New Dashboard Studio Demo by bitsIO

awesome thank you everyone for joining um this is the fort worth uh splunk user group um we have a special topic today everybody's uh very curious about it so splunk dashboard studio before i start you know there are few housekeeping items i'd like to say you know if possible please be unmute unless you're talking and you can post your questions on the chat or you can ask us also we'll be recording the session and post it on youtube later that you will get the link afterwards um okay so next um i'm samantha julie city of bits io bits i always partner splunk partner partner of the year 2020. i'm i've been splunking since 2013. uh i'm a constant inventory speaker uh hopefully i i'll speak at 2021 i'm not sure but uh so i've been helping a lot of customers personally i've helped and also through my company and we we help a lot of companies with the non-profit customers as well with the with the pro bono ps chris if you want to intro yeah sure cool good afternoon guys a pleasure to be here with you um i'm christian brown i'm costa rican uh i've i met a splunk like three years ago i was before part of the support team now i'm part of the pizzaio team doing consulting i'm more than glad to be with them i learned a lot so here i am joining you there so uh it's been a really great journey yeah awesome thank you chris um so um i will go through the agenda next so uh what's uh splunk style you know the dashboard studio the new uh studio and then differences between grid versus absolute i think uh well i'll have less slides and more demo uh if that's okay with everyone i guess everybody will agree with that you know it will be boring to see the static uh images the other reason is i didn't do a good job on you know putting together screenshots so but uh so quickly uh the the cool the what's new in the uh the dashboard studio is you can have you can move the icons you can place wherever you want it you can put images on on the dashboards you can change the background colors and so it is very robust and it gives you both options so one thing i would say is there are two options so you can do grade or absolute grid is totally similar to what it was before how it used to have the rows and column structure and the grid version still gives you that option but with the absolute you can you need to code you need to do a lot of coding which which chris will be showing you doing the demo how do you add a submit button and for submit you have to go add accordance earlier you can just you know press the button there and then it will add the submit button for you so there are a lot of things but it comes at a cost of you know looking looking good um the the dashboards can be customized so much that you you may end up learning a little bit of coding for that right so um you know there are some differences this is from the splunk docs uh absolute versus grid i think absolute is the is the one that you would like if you want the dashboards to be looking cool um and then grid is the you know similar uh the previous version you could say classic version of it but you know charts all charts are available background color um you can change the backing background color in the absolute but changing the background color is not supported in the green grid layout so any questions okay canvas size you you have you can choose um a different size for your dashboards um and a number of visualizations uh there is no limit to the number of visualization that can be added to the canvas i think um in the classic one you can add like i think two three four it depends on the width of your dashboard so i think that there are some restrictions there um shapes the the new one supports it icons and images images are not supported you can upload up to 16 mb of the image size oops right so this is pretty much some screenshots of and all classic xml all boring fast xml and now i we converted this into an absolute strong dashboard studio as you see right there it definitely is totally different you can uh start modifying colors start modifying searches it's gonna be different uh and i'm gonna show you as well i would like to point out some some differences so let's go to the next slide these are the main differences i found the first thing i uh i saw it was the app on splunk base right that's the first difference that is the same app right if you want you can install it if you are using a virtual lower than 8.2 however if you upgrade it's going to be included and that's something great besides that this new uh dashboard studio it's not xml it's using json formatted components right besides that it has some limitations like it doesn't accept third-party visualizations it doesn't do cluster maps as of now drill downs are a little bit limited tokens as well trellis is it's not an option now some layouts like grid and absolute and in this case you can use uh javascript or css right that's because with xml you just at the beginning of your xml you define this i started working in this case as of now uh is not possible okay just i wanted to point out that that those are the main differences that i could gather so now we can start with a demo so let me share my screen so one of the things that i want to show you it's a demo from the examples app this sample examples app as you know it has a lot of dashboards right so i'm going to take one of the uh classic xmls and i'm going to convert it to dashboard studio so we i'm going to take chart overlay and we're gonna this is being extracted out of uh from internal on a second so we're gonna convert this to dashboard studio first thing i go to my search my reporting app go to dashboards here i create a new dashboard let's call it a chart overlay as well sorry now in this case we select dash for studio here we have the option to choose to select or layout grid absolutely in this case i'm going to select absolute like it more so here is for dashboard studio just as easy as that so now what's the first thing i gotta do right if i'm taking an example if i'm converting i need to know the search right that this is executing so i click on edit something really curious about dashboard studio is that by default it comes with the time as you see here so you you don't need to add it it's there there is no need it's already there so first of all i need to grab my search right this is the search response executing got this from here i will like to explain you right what are these icons what's this try and so on so as you see right here we see this option here to view this is this is when we save it right and then you would like to edit it just we click on edit this option here is for the uh types right the area y bar column etc this option here is for the inputs as you see we have less inputs than now than well than before if we go to a temple we have text radio drop down checkpost multi-check etc now we only have four drop down multi-select text and number these other options for any items that you would like to add example this triangle okay if you would like to add it this other option is you would like to add like a line for example or not or if you would like to add an ellipse let's say you just increase this whatever you want depends on you this is something really great right that you don't have any for example if i move this here i have only like i i only have this space to move it so it's not like that you can move it whatever you want then we have this option that is on image fine so this image you can use a and url or you can find it right from from your uh files and then you browse it you select it and you can paste it there here are texts any text that you would like to write will be added and here is this year it's pretty much this option this configuration that we saw this is the searches right that we are gonna create that we are gonna this case is totally different from the classy xml because for the classic xml we only add a panel we select the panel and then right there we paste our search query and right here we have for coding or code pretty much the json formatted code so now let's add this right so we go this is a table right so we have this table we select table we select these files you can do it now or after it doesn't matter as you see here it's asking us for our uh search so i copy that search i pasted it this data source name um you can name it whatever you want so i will name it search for overlay now i run unsafe if you go down below you will see the kill in case you are looking for it so this is how it's formatted so we save it there is this button you need to be careful because if you exit uh you don't save this it's not it's not gonna be saved so this a button before it was here now it's here and here are all the options that we can modify right we can add any a title we can a description we can move this right instead of doing this manually as we did you can move it from here the position the rod the rows that you want to be display the background color example i'm going to use uh orange for example this blanket background color so everything you want can be done now this column for modding here is just only to select like um i feel that's being extracted from that search for example that one but in this case it will not happen because we are using uh a table but what happens for example let's say we're doing a single volume right so i will all i will only would like to see uh let's say the count in this case or i only want to see the average so just in case if you would like to uh use a single value you need to select this option but let me go back to the example okay so i'm taking this and drill downs remember that i mentioned to you uh the drill down is limited it changed right now with drill down you can only link to a custom url before if you go back to uh to xml you could link to a search you go into a dashboard 34 or manage tokens as right now is not possible but i'm pretty sure that's going to be available so now we have our search right i'm sorry this is not a table this is a column so we got it there right so as you see i copied and pasted the search right that's the first thing the issue here right it's this option the overlay right because with xml i just copy this option i paste it on the xml source and there we go right i know that this line it's the uh chart overlay right so in this case with uh with dash for studio it's not xml so we need to find that option so if we need we need to find that option there are some helpful docs right so the first helpful doc it's uh splunk docs or we go back to dashboards and we go to the example hot most of the dashboards that are here are on the uh hop just right you know so we go there a column and then as you see right here there are a lot of examples but uh what we are interested on is the uh chart overlay so we try to find it here and let's see if we can find it all these options just in case you can modify it here the colors etc so this is something that you cannot deal with xml and here is our chart overlay right so the first of all okay is that we gotta do is to understand the code right so we got this i know that as per the search query i know that my average is the is the line that i need to create but i need to add that option so these are the options okay so from the visualization i go to the options down below the query you can make the change here or you can go here okay you can do either of them but let's go back here to the code i prefer this one because uh i know where where i am and i don't need to look for the uh search let's say so let me go actually i'm sorry this is the initialization it's going to be search friendly search i know that the type that's a visualization column and from my options i have okay now this is the visual decision so let me go back to the visualization we are here if you need me i can make it bigger from here it says that down below the options i need to add these two okay oh wanna type it then let's just okay i'll take it into a i think i got it here just like this okay gotta be careful with some syntax errors in this case is this comma so right here i'm enabling the option of the chart overlay then here i need to specify the field name in this case it's average okay so just as just like that we created our chart overlay okay so this is one of the options right so if we we would like to add more options like field colors and such we just copy this right and paste it here i'm more you find this because that's her field name so we are assigning that color the access is so pretty much just like that we exit this we save it and now we got the same column the same chart this is definitely data coming from other from other source however right now uh this is the chart that i was expecting and this is the chart that i have okay but let's say because it's not this simple right dashboard studio is not only trying to find the option right uh as we did but let's try to add an input all right let's say i want to drop down right that instead of checking if i go to the search you can go to research from here you can go to here so i can modify this search in this case i'm checking internal right so let's say i don't want to check on internal i want to drop down of all the indexes right so i need to add an input title of the input will be indexes choking you can name this whatever you want so let's call it index and these are labels and values these are static labels and values that you can define however i would like to extract this from a search i don't want to use this one so as you see right here i don't have more options right as i did before because before i just click here as you add the input on this case was drop down i go here select the field select the token the static values and the search all right in this case i have to create this search let me show you how so in order to create this search i need a search right but uh here i don't have i don't know there is no option for me to create this search so i need to go to searches and create it so in this scenario i need to test my search okay so i need a full list of all the indexes so i'm gonna do a res call that's the easiest one here are my all my indexes so i take this search create a new search this one we're gonna i'm gonna call it index drop down [Music] [Music] okay so there this is all i need so but this is something really interesting because i create this search but how do i connect this search to the indexes right the only way to do this is editing the coding so i need to check this search back i need to go back here again with the with this type of dashboard you need to find the search id let's say in this case in order to find a search id we click on code and here is our data source id you can change it by the way it's modifiable however i'm going to check this one right and i go back to this input i need to edit my code so this is an option right but uh i need to tell this input to that i'm gonna use this search so in this case i'm gonna use this blonde docs dashboard studio okay i just need to add an input or use data sources okay so right here is how you define inputs definitely you have to read all this but lux long story short what you need is this these values okay so uh copy this this is an input for an example so but uh in order to add an input or define my label and value i just need to copy this so i copy this i go back paste it here and as you see right here let me as you see right here i establish the encoding well this option remember that uh on classic xml we have the option of label and value it's this one this means the location of the value and the location of the va the label so zero means the first line so on the first line i have my label and i have my value so i don't need to change it right here i need to define my data source so right now we know our data source we know it we can find it here so we only copy this we go back to the input and we paste it here because that's your data source and then we save it and that input took my search that's how you do it and so now i'm missing something i need to modify my search right of the chart overlay right now i'm not using internet but i'm going to use a token so i just have the token and as easy as that we just select the index and it will return me the data that i need let's refresh this let me check this okay this is not working given one second i'm sure it worked yesterday so yeah now this so is it double quotes uh do we need or let's say search here i'm switching this back is the vpn working or do we see the data now that you do the search okay a good time range yeah you got a timeline [Music] okay this is the search hey internal okay let's see if my connection okay there is data right so do we know what search it's running from there can you see here like it's taking the token and then what is the search it's using behind the scenes is there when you click on the left side is it going to show what search is it running um that's true actually if i click on view i would like to check the search i just click on the okay and then indexes what is the indexes you put is the is it searching like indexes star and these it's not picking up the underscore internal that's what i'm thinking and let me take that body off okay but i modified the search and i'm not using any talking anymore okay so i got an idea so since i created this search i can delete this yeah i can add another column i use the same search search is not getting deleted here is gonna ask me for the uh search but i just cancel it and go to my search list okay so now i'm going to modify the index it's okay it's very loud okay it's working okay yeah not sure what happened maybe this was this star was referring but uh okay so there is as you saw here this star i i didn't put it up here so by default it comes with options like default values and so if you don't want a default value you just delete it okay spread the code and we just save it one more time we see it there we go it's that remote so here okay i see the count on my overlay uh here i have nothing okay so let me see infrastructure uh so so this is how it works this is how you add the input uh the input there are a few things that remember that you need to create this search right there is something here as you see that is called uh chain search it's that's the uh that's a synonym of base search on uh on the classic xml so i can create a change search based on the uh chart overlay for example and right now i only need a average let's say so i'll i just create that search and i can uh and i can use another visualization to check that out for example but yeah i mean pretty much as easy as this if you like to change colors okay you can play with it let's see i want to see oh yes there is something else that waking up on this channel you try to change the background you try to change the chart background color you're just trying to do an overlay no the uh chart color yeah yeah i think you have to do it in code because that's the only way i could find it just do the background colors option right there is the next is the right after they show last update you can you can essentially because i didn't see a place in the chart object itself could set it a letter all right and actually yeah sometimes that happens but that definitely depends on your visualization that yeah i was going to say table the table objects if you have a table it does have a background color um but but for these if you go back in fact if you just go to your chart or excuse me go back to your dashboard it's that's actually pretty simple if you just go right there after that show last updated field and your options on the code and then just put a comma at the app at the end of it and then just add a new option at the end not the very last one so right after show last updated false oh yeah right there is fine too put a double quote and then just say background all lowercase and then the word color uh is a capital c uh background uh i did the same thing you have back group it's background oh i'm sorry background and then and then capital c yeah no it's that background color so background color with a capital c and then colon and then uh double quote and then uh hashtag or pound sign you know whatever you want to make it uh in this case zero zero zero zero or uh yeah i think there has to be six right yeah six um box is white so background color should be yeah that should work um yeah but even though the uh we the the thing that we're defining on the overlay the overlay uh it got removed because i i added a new a new uh cell works okay or actually it's not background well the background color for this one but actually i'm thinking as well this will be these uh fill colors and series colors will be as well so let me grab that as we saw with that three options let's see that's missing a comma here all right so right now so i think that was what was wrong with that background color brand new as well because i'm i'm looking at mine and that's how it's how it's specified all right there we go all right we got this memory and we should do it so now with the colors and as you see it's not it's definitely you can't select all the colors that you want but definitely you have to play with the code so let's take this one you have to make sure where you are adding which which you know comma yeah i think you might have missed a closing curly bracket on that copy maybe i yeah it's after series at the end of series color you've got a closing curly bracket and a comma that's missing if you go to the end of that string you got that into that line right above there's a big long string yeah so that should have fixed it so you can see it better it's one weather so you're trying to show the colors how you can change the bar colors right right but uh oh it's i i think that's fine i think uh at least i know which chord to see uh uh let's move on i think don't get stuck on that one um but i think we we do have the overlay showed that which was important right um and i think uh so if you go back to the example sub i think one thing we want to show everyone you are in that examples hub right the one that you were copying the code from yeah so i think this is something to highlight to everyone so they can you know go to these examples hub and pick up the pick up a lot of code from here right you don't have to code it from scratch but take the code from here if you want a chart overlay or if you go all the way top um yeah i think you can pick different types of uh visualizations right i think you picked you picked a column but a lot of things that are available you can just go to the examples home and then um take uh pick whichever you want so you can do the complete dashboards i think and and or pick from here whichever you want um i think it will it'll uh give you the code that you need and then you just have to change the field name like how chris changed the fields uh field name from get null to average and then go from there did you have anything else in there to show chris there is another dashboard that i created on the one from from the screenshot that i took this is one that i used uh pretty much this is for the usage of the app so this is for example if i would like to check this is a full list of my apps uh i would like to check how many times i've used this blonde dashboard studio so for the last 24 hours some you have to say eight times by the user and then the last time it was used trying i can have here my my time chart so this is something actually i made this based on the same thing based on the input right i changed the code and then i definitely had to use this right it's it's not as simple as it was before you have to go to the code you have to select this right i'm sorry you have to add tests you have to select your label and your value you have to define it properly and then you need to define your search if you're going to do this remember to always define your search right if you if you need if you're using an input with a search in this case uh i use it differently as you see here my label it was in the column zero and my value was in the column one so this this is a good example to understand the the meaning of the label and the value because if i go to the search this one is uh app oh this one was from this one so for example this one if i grab this search press it here so as you see right here my my label is this one so my title is this one because this is what i want to see here and this is what i'm seeing but the actual value is this because this is what i did to search right i cannot search with the label i need to search with with my value with my actual value this is the name of the folder or the name of the app on the back end so definitely this is a good example to understand the meaning of this primary zero primary one that's the position and this is my search but uh yeah i mean you can right here uh uh what's different from the column is like uh this one's a different place an area uh i had to change my my colors here so those are different options those are different uh more search that that you have to do but everything everything and definitely everything is here on the examples hub or if you would like to investigate more you can go to strong docs something that it's not as part of the dashboard studio that it's really interesting because the it changed is the submit button i'm not sure if you saw that that before you only added the submit button and that was it right as simple as that but right now uh you need to define it manually so for example i have defined it here this is my submit button so it's something that if i would like to activate i click on true i will i define it as true and here is my button however uh it depends on how you configure it because actually that's a button i find it here right as part of my inputs so if you if you would like to know how to add the submit button right you just add this so there are some it's it's totally different from what we expected it involves more to dig more and with the code run with the json format uh so it's something that definitely it has a lot of things right like you can modify anything if you would like this to be a smaller you can do it and you can place it here if you want why you just save it and view it and yeah and it will search drive without any issues however that's something that we didn't have before right um it's a lot definitely that you have to test but uh it's definitely nicer than the classic one so i know that this is a quick demo right it's really really really simple like this chart overlay i really want to show you how to search for the code how to take these options right and define them i have to define the field etc so from there uh as you know the colors you need to define it here um pretty much er your whole structure how to create a dashboard has to change because for example we now have this option to create searches and to create change searches so it's definitely better for my opinion i love it more and you can interact with it definitely better you can see a dashboard uh better so uh this is pretty sure there is a lot of coding i think it is a little bit overwhelming when you look at the code uh and and you know play with the code right but but it gives you that flexibility of placing your icons or panel wherever you want it it wasn't available earlier right so it's it's uh pretty cool um when you look at the visualizations you can put the images and all that right so did you have any other uh things are i think that's this was it right i think we covered a good amount and maybe in the future chris i think we can go do a part two with a lot of different visualizations um and you know maybe grab a different image on the background and and showcase those right i think a lot of a lot of the functionality can be showcased in in the part to coming um user group session right exactly or or we can take one of these complete searches i'm sorry one of these complete dashboards uh for example i've seen this yeah this one so we can take this one but uh it's definitely um yeah i mean it's a i know that it's a lot and that is for example this one i mean check this out and definitely it needs time to be creative and she is the full source but uh definitely something really interesting that you can uh they can try in the future yeah yeah sure awesome thank you thanks chris and this was great i think you put in a lot of time and learning it uh i know you were clicking here and there and getting the code it was awesome that what you were doing so um pretty cool um and uh maybe we can open it up for questions if uh anybody has questions uh real quick uh but you know eventually we'll we'll just uh upload this video on to youtube and you you you should all receive the link for it what do you think kelly no it looks really good i mean it looks like there's a lot of a bit of a steep learning curve i think just looking at that some of it's very exciting but obviously you have to put the work in to make it happen and i'm glad i'm really pleased to see that during the demo you know it's not quite as simple as one might think so it's really nice that actually you managed to work stuff out so we've got from that so i was quite pleased with that so how long chris have you spent roughly would you say learning the dashboard studio it was not that easy you know i i was used to uh using the classic xml just click here click there uh paste the search and that was it it took me time the first thing that took me tommy was to understand the this search right how i could use a search and put that into the input uh that took me like hours to understand it because i i couldn't find it gotta be honest with you i couldn't find it until i got it until i i could know that i had to add that in coding and then the label and then the value and then the uh primary but uh yeah it took me hours i gotta be honest no that saves us time the fact you put the time into thank you so much bye thank you yeah thanks chris yeah um if you don't have any other questions let me see if there are anything in chat no nothing in the chat so you did great job chris uh i nobody has questions i think everybody is an expert now with the new new dashboard studio so um i as i mentioned i'll um upload this video onto youtube and you should all receive it um thank you so much everyone and uh we'll do a next one part two of this thank you bye bye have a good evening bye okay fantastic you

Channel: bitsIO

Views: 1,731

Keywords:

Id: vqA-GMaLiEU

Length: 53min 16sec (3196 seconds)

Published: Tue Jun 29 2021