Guide to Grafana 101: Interactivity, Templating & Sharing

ravana so this is actually the third session in our series on guide to graph on our 101 session one was all about building awesome visuals Session two was getting started with alerting and this session today session 3 is about variables templates and sharing so this is an interactive session so please do two things ask questions via the Q&A feature in zoom and anytime our technical team or dashboarding experts is on hand to answer them at the end of the today's session and you can also just put your thoughts in the chat but if you have questions please use the Q&A button and not the chat button that way we can answer them individually either during the session through the demo if things happen to come up or definitely at the end of the session where we have time to take your questions and answer them I'd also just like to remind everyone that you will receive a recording of the session afterwards with things like code and other resources that you can apply what you learn in today's session into your graph on up projects and share with your team as well if they happen to not be able to make it today okay so before we get into today's roadmap I just want to give you an introduction of myself just so that we're not strangers we're gonna be spending about an hour together today just so that you know who was who's presenting to you so my name is off star I am from South Africa I'm super interested in using technology to empower people that's why I really enjoy my job as a developer advocate here at time scale I learn new things about technology and new frameworks and how to do different things in in technology all the time and I write about it on Twitter and on my website I'll talk on so if you want to follow me there you're more than welcome to so the role map for today today's session is going to consist of four parts the first one is going to be about when and why to use variables in graph on them and we're going to give you some motivation for when to use the stuff that we are that we'll learn about in parts two and three speaking of part 2 in part 2 we're going to take a look at variables in Griffin are specifically so we'll take a look at some definitions you'll learn the difference between a variable and a template as well as different types of variables in Griffin ax and then section 3 is about let's code so this is probably the most interesting part of today's session where we're gonna actually create three different types of variables and I'm gonna showcase how to use variables using the use cases of IOT monitoring where we're gonna look at the live location of buses in New York City as well as DevOps monitoring where we're going to be monitoring some metrics about micro-services running in kubernetes so that's something that you can look forward to and in those demos I'm gonna be showing you how to use variables and templates to create reusable and interactive dashboards so that's something to get you excited for what's to come and then in part four we're going to give you some resources so that you can apply what you've learned today so you can get started very quickly whether you want to use time scale and corner together or you just want to never be okra fauna skills we'll leave you with some resources and things to check out and then answer your questions okay so now that we've gone through the road map for today let's get started with the first section which is about just variables in general what are they when to use them and why should you use them so a quick word on what variables are before I think everyone who was programmed before are familiar with the concept of variables they're basically placeholders for different values in your dashboard so we're talking about - Bonnie and Griffin in particular you've probably seen these things on pre-made co-founder dashboards so if you use like the pre-made dashboards for monitoring stuff with Prometheus or monitoring in database like timescale or Postgres you've probably seen these variables but we want to know like why variables and tableting is important when creating visualization and dashboards it's important beyond just it being another thing to learn and another feature in graph ona there's five main reasons why variables and templates are actually important the first one is that it allows us to build interactive dashboards so what this means is that it allows more easy exploration of the dashboards through the UI versus writing custom code and editing queries every time you want to do some exploration of data that's being visualized so for example you can explore your data by different segments so for example devices in different locations or custom time intervals so you want to look at aggregate metrics over a quarter over a month over a week you can use variables to have make these different kinds of investigations a lot easier they also allow stakeholders to drill deeper without editing the raw code this is especially useful for non-technical stakeholders and this is something to keep in mind as well in general like when we're making these dashboards they're not just for people like us who are building them there's various stakeholders that have to use it and so learning how to make your dashboards interactive actually improves the experience not just for yourself but for your teammates and other people who rely on them so that's like the one of the biggest motivations to apply what you're going to learn today the second one is saving you time in creating dashboards for complex systems now variables and templates actually allow you to single-source your dashboards so if you have multiple identical data sources or servers you can actually make one dashboard and use a variable to change which identical resource that you're viewing so this also reduces maintenance and upkeep and we'll see an example in part three of the demo or in section 3 of the of the session today we're in the demo section where I'll be showing you exactly how to do that the third biggest motivation is for having consistent definitions so variables and templates help with keeping definitions of different calculations consistent across different people in your organization so say for example you're calculating an average value of some metric and that metric is not just a simple metric it's like a complex metric that involves an order different things by using a template and by including variables you ensure that you and other people are actually using kind of canonical definitions of this this metric versus each person having to you know potentially define their own version of it which actually can create confusion and inaccuracies and the last reason the last two reasons are that you can share and reuse these dashboards so template dashboards actually make it super easy for you to reuse the same dashboards and visuals across different projects as well as sharing them with your teammates so that you can collaborate with other people in your team on the same dashboard okay so now that we've gone through what exactly is the motivation for what we're going to learn today and when it applies let's get into the weeds a little bit which is in the next section on variables in row fauna so in this section what we're going to learn is that we'll define what a variable is and how it's different from a template and we'll learn the difference between different types of variables and well and we'll also learn some constraints to keep in mind when using variables in grow fauna but before we get into that just wanna give a reminder to ask questions if you have any questions about anything that we cover please use the Q&A button I see you've already had one question thank you to the person who asked it okay so getting intersection to the basics of variables in graph honor so you probably heard the terms variable and template used in the docs if you read the graph on our Docs these are kind of used fairly loosely and interchangeably so I just want to define them for you so that we're all on the same page so that when we go forward you'll know exactly what I mean when I talk about a variable bus as a template okay so dealing first with a variable the variable is just a placeholder whose value changes using a drop-down menu so you'll see in the image that I put on the screen in front of you this is the type of menu that you'll use in order to change the variables this drop-down at the top of your dashboards usually and these are all the values that this particular variable is going to take so you'll see this example later on it's actually the IOT monitoring example but basically these variables are very useful for changing different contexts so in this example I'm using it to change different locations of buses that are monitoring but you can also use it to change things like different apps and different servers or different segments of your of your data as well so that's what a variable is it's basically this you change it using the the drop down menu and it's a placeholder for different values and then you have a template so a template is just a query or a panel that contains a variable so here's the example here we have actually highlighted where this variable appears in this query that's powering a template and you can see I'm using in this case a variable call route we're going to see syntax for variables in a second but basically a template allows you to ask similar questions for each of an identical resource that you're monitoring some example an app a server a device instead of creating individual panels for each one of these things templates allow you to by combining templates and variables it allows you to save time and and your own dashboarding space in order to visualize these things more easily ok so another event is that understood that a template is just a query with a variable in it we're gonna come back to the specific example a bit later in the demo section but let's get into when we can use variables and when you can't use variables so those of you who use gravano before will know that the variables there's some places that rebels don't work in Griffin and one place that the variables don't work that we've discovered in previous technical sessions that we held on kevanna is in places like thresholds and alerts and doing some research and preparing for this webinar basically found there's only really four places that variables can be used so the first one is panel titles so we'll see an example of this in the demo so what's the example of like all of these in the demo so the first one is panel titles the second one is in the queries as I've told you like queries what the variables call a template then you have in your panel descriptions which describe give some more information about what a certain visualization might be looking at and so that people know without having to dig into the code and the third one is in a text panel so this might be something like a single stat or something like just a label in your dashboard they support variables labels do not work basically everywhere else so some places that people might want to use variables it's like thresholds or in alert queries and stuff like that unfortunately they don't work there but we're actually going to be doing another technical session next month in July where we cover how to work around this and other common roadblocks that you encounter when you wanna monitor visualize an alert on time series data in grow fauna but the main thing to keep in mind is that you can only really use variables in these four places titles queries panel descriptions and text panels oK we've just got one question that someone asked all the features that we're going to talk about supported in the graph owner open source version yes so kindly I'm using the open source version of the farmer using Cortana Enterprise everything that we're going to talk about is supported in the open source version of Ephron us so thank you to that person who asked the question ok and moving along to the the third part of variables in graph owner is variable syntax so syntax is important because we need a way to refer to our variables once we've asked them once we've defined them rather so we need to wait to differentiate just between normal code and code to talk refine our that hey this is actually a variable that I'm referring to and not something else so that's why it's so important and knowing the variable syntax is also important because you not only need to define you not only need to use variables yourself when you're writing code but when you're looking at like a dashboard that your teammate made you want to be able to identify what's a variable and what's not so I'm going to take you through the three different ways that you can refer to a variable in Griffin ax and we're going to use this example of variable name for server so the first way is the simplest way this is the most common way that you'll see variables referred to and that's just with a dollar sign before the variable name so in this case is dollar sign server this is good because it's clean it's easy to identify but there are some cons to this approach where you need to use this variable in a standalone way you can't actually use it in the middle of an expression but that's why there's another way to refer to a variable which is with the dollar sign and the variable name enclosed in curly brackets as you can see here and in a second option and this actually allows you to use the variable name in the middle of an expression so in this case I'm just looking at the request count for a sudden server and in this case the variable is I'm telling Ravana that hey the server is actually a variable and not some name that that I've hard coded in my my data source the third way is very similar to a number two but actually allows you to specify the format type of your variables now this actually tells Griffin about the format to display the results of the variable set so what you wanted things like comma separated value whether you want it like JSON formatted so you can actually learn them more about that by looking at the advanced variable formats doc that I've linked to on this slide I don't wanna get too much into it because it can confuse it can be confusing especially because when the majority of the time that you're writing these templates and using variables in your dashboards you're really only going to need to use syntax number one and syntax number two so I'll leave that as something that you can explore the link is there in the slides when you're going to take a look a bit later okay and then the last thing that we're gonna look at today is variable types so there's different types of variables in Griffin arts for an image that it's just a screenshot from creating a variable in Griffin and you'll notice there's many different types interval query data source custom constant etc etc now I want to just make you aware of different the two most common variable types so the first one is the query type and the second one is a custom type this is because these are the types that you'll probably use most often again and are the most useful for helping you to get started quickly which is kind of what we're covering in today's session so the first one is a query variable type and you use this when you want to query a data source in order to populate the values that your variable is gonna take so for example you might want to query Prometheus or timescale DB or Postgres or something like that in order to populate values for your queries we'll see an example of this in the demo where I use it to populate the values of different kubernetes namespaces that I'm actually monitoring the second most common variable type is the custom type and this cost custom type you actually use it for when you want to define constant values one thing that commonly trips people up is they use the constant variable type and it actually doesn't do what the name suggests you don't actually define constants this is actually used what's probably most useful for things like metric pot prefixes for dashboards that you want to share but for the custom type this actually allows you to manually manually define the variable options and we're going to see this in use in the demo in a few moments but that's the overview of variables in grow fauna I just before I go into the most exciting part of today's session I want to remind everyone to ask questions in the panel if you have anything that you are confused about want to learn more about please use the give the Q&A button in Griffin ax in order to ask a question and well either answer it live if it's relevant or save it to the end where it will definitely get answered okay so now that we've gotten to part three which is the demo I'm going to be showing you how to implement variables in different use cases to make dashboards more interactive more usable and to save you time to create them this is the most fun part so let's get started giving you an overview of what this demo is going to cover today it's gonna have three parts so the the first part is going to be about variables with DevOps data so in this case I'm going to be creating a custom template to monitor to cloud native applications so the scenario that I'm going to be looking at here is monitoring micro-services in kubernetes and the use case that I've already mentioned is a DevOps use case in part two I'm going to be looking at variables with IOT data Internet of Things data device data where we're gonna be making an IOT monitoring dashboard more interactive by using variables and as I mentioned previously this scenario is going to be about monitoring the live locations of buses in New York City these buses have sensors on them we're going to be updating a dashboard that shows their live locations in order to be more interactive and this use case is IOT monitoring and the third part is about version control and sharing so here I'm going to take you through how to set up version control and share your dashboards with your teammates outside leuphana as well as importing and exporting dashboards for use whether it's other people's dashboards or you want to reuse your own dashboards that you made just to give you a way so that you can make make your work more usable and of other templates that people have created so that's an overview for what we're gonna cover in today's demo let's get into the first part which is about templating and where we're going to look at the scenario of monitoring micro services in kubernetes okay so let me just before we go into like there's two parts of this this first part of the demo two components so the first one where we're going to look at how to do more insightful drawdowns and the second part is going to be dynamic dashboards but before I get into that I just take you through exactly what we're monitoring so that so that you can have a better understanding of what's going on okay so I have this shop in front of me that is basically a good example of the kind of thing that you'd see online this is a shop in this case it's for hipster fashion and style and this shop has a number of components to it you have the products you can buy products and you know I'm just going to take you through an example of stuff that you can do there's a checkout there's also a recommendation service at the end for products that I might like given that I've bought this and here I've checked things out it's given me a confirmation and I can browse other products I have this home page I can convert the currencies that these things are shown in in order to say convert between British pounds and US dollars for example so this shop has a number of different components and I don't just have one shop I've actually got two shots I've got shop number one and then shop number two here which is in this case exactly the same shop but you can imagine that these might be shops in different regions or selling different things but owned by the same company and operated by the same company so this shop does exactly the same thing that I showed you in the previous one you can buy things and it works just like an online shop that you would expect to work it works just like how you'd expect it to work basically okay so now that that's like the context for this I have these two shots and what I want to do is I want to show you what these shops actually consist of so in case as I mentioned before I've actually got these running as micro-services in kubernetes so I'm just going to look at the namespaces that have so these two shops are under different namespaces so I've called them demo one demo and demo 2 and basically these under let's take a look at like what these shops actually consist of so these shots consist of different micro-services should we get pods ok my keyboard is extremely slow today ok so you can see here that like under this demo namespace as I've shown you this shop consists of a bunch of different micro services so we have an ad service we have a cart service we have a checkout service a currency service all the stuff that I just showed you of the shop like you know adding things to your cart changing currency there's different micro services that power all of this and the same thing goes for shop number two that's in a different namespace I have all the different micro services that that consists of these happen to be identical shops but they they could be different and in addition to that what I've got is I've got some monitoring setup in order to monitor what's going on in each of the shop so let me just share that to make it easier to read and what I've got over here is I have these various technologies set up in order to monitor the metrics that are going on in my two shops so I have a graph on ax for visualization these are the two graph on our pods I also have Prometheus which is the most popular open source tool in order to monitor metrics it's a metric space monitoring tool for those of you are not familiar but I'm using Prometheus basically to scrape metrics from all the different pods and all the different micro services and then what I'm using I'm using time scale to store that data for the long terms as a long time story as well as for advanced analysis of that of those metrics so what I've got here is a connector that uses a time scale as a remote read and write for Prometheus metrics so these metrics get written first - so Prometheus scrapes the metrics and then it then writes it to time scale as a remote read and write and then I have my time scale DB which is the database that stores all of these orders data that's coming from my shops ok so that's an overview of like just a general set up a word on like the monitoring as already mentioned I'm scraping metrics of Prometheus and using time scale as a remote write read and write actually and for those of you who are new to time scale welcome to the time scale community it's great - great to have you time scale is a time series database both on Postgres in this case I'm using it because it's a great long-term store for Prometheus metrics and it also allows you to do advanced analytics on your matrix data so that's an overview of why big time scale for this use case another reason might be that I'm employed by time scale and so I think they're a pretty good fit for things like monitoring ok so now that we understand like what exactly is going on let's take a look at these these dashboards that I have set up so I'm opening a graph on a dashboard so I have a couple of dashboards that were automatically created by the the time scale I'm basically using a package called time scale observability that automatically spins up qivana time scale and Prometheus in my kubernetes cluster and I've got these dashboards that were pre-made that's just showing me information about kubernetes and then what I've done over here is created a dashboard that monitors specific metrics about specific services that are running and they're actually monitoring Hag get metrics so in this case what I'm doing is calculating different aggregate metrics in one minute intervals for different micro-services so for example I have one let me just just take a look at the code in this case I have one that's looking at the average completed GRP C's for the service called product catalog and you can see here I've got a sequel query here and I'm calculating the average value of this particular metric which is called product catalog G RPC server completed our pcs long name but basically that's that's what the metric does and I've got different ones like this set up for each one of these metrics that on a monitor so let's take a look at in this case I'm looking at another aggregate in this case the maximum value of the memory used in my radius micro-service so radius of the cache I just want to know what is the average what is the max value used per minute by my radius micro-service micro-services for both the shops now the first thing that we're gonna do going back to the presentation is we're going to focus on we're gonna focus on how to make this dashboard more insightful for someone who wants to drill down into the data and we're gonna do this by making it possible to view aggregate metrics for one or more shops and let me just explain to you what this what this means when we look at this dashboard what it does right now is just computing the average value for a certain metric over both the shops but there's no way that I can like draw down and say oh I want to just know the average let's say Redis max memory used for shop number one versus shop number two see we just got a question from Flavio who says it in flux d be used at all oh it's time scale to be completely replacing it in this demo time scale DB is completely is the only data base that's being used we're using Prometheus to scrape the metrics and then that data is being written to time scale D be in flux DB is not used at all in this demo so thanks for asking that question that just shares things up so x tilde B is actually the data source that's being used to power these visualizations as you can see over here the query I have Prometheus as well but in this case I'm using time scale DB as a data source and so my goal here as I was mentioning is to ensure that I can actually calculate aggregate metrics for one or more shops and I don't have to customize that and I don't have to rewrite the code if I want to do those types of drill downs into the data okay so the way that we do this unsurprisingly is by using variables and templates so step number one in order to make this happen is to create a variable for the namespace of the different shops that I have so what I'm going to do here is go to the dashboard settings and I'm gonna select variables and add a new variable and one thing to notice is that variables are actually on a per dashboard basis in grow fauna so all the panels in a particular dashboard will be able to access as variable once we create it so let's go into the next step of creating a variable which is to just configure the general settings so we need to give it a name in this case I'm gonna name my variable namespace that's how you own namespace okay just double checking and then so this name is basically how you're gonna refer to the variable in things like your query basically like your if I'm going to refer to it I'll just put like a dollar sign before it but that's the that's the name of your variable that's why you're gonna be calling it in the code that you're writing then we want to give it a label which is a human readable name that basically tells you what this variable is so in this case because I'm monitoring shops I'm just gonna call it shop name because that's what it actually stands for someone who doesn't know namespace they might get confused so I'm just gonna give it a name called shop name the type I'm gonna leave it as query because I want to actually populate the values for the namespace by running a query on my database and that's all the general settings that we actually need to configure this as I mentioned is probably the most common type of variable that you'll use a variable type that you'll use and if you want to learn more about any particular type or variable you can go to the data you can go to the information icon it'll tell you you know what exactly you're doing so for example but the query as I've already mentioned it is about fetching the values from a data source query okay so speaking of queries let's actually configure the variable to return the name of just the two shops that we have so in this case I'm going to select my data source as timescale DB because that's where all my metrics data being stored and what I'm going to do is actually write a sequel query to return the kubernetes namespaces related to the shop so in this case what I'm going to do first is show you a query to to return the just all the namespaces that have been created so you can see there's a nice preview of the values at the bottom I've got things like the default the monitoring demo demo to stuff that I've showed you previously but in this case actually when you want the name of the shop so I'm just gonna modify this a little bit by using a where clause in order to filter out only for the only for the namespaces that contain the word demo in it just because that's how my shops are named you'll probably also have similarly consistent gaming and in this case you can see the preview of the values go to just demo1 and demo2 which is what we want at the end of the day then what we're gonna do is under the selection options make multi-value able to be selected and I'm gonna include an all option as well such that I can view matrix for one shop shot number one shop number two or both shops at the same time that just gives me more flexibility in making my dashboard the most insightful possible what I'm going to do is save this so we add at the bottom and then we go back to the dashboard and save it and refresh okay so now we can see at the top the shop name is the human readable name of this variable and it has different values all demo1 and demo2 but if I actually change any of this nothing in my dashboard actually changes and that's because we've not made the attempt the panels to be templates by incorporating variables into it that's the second thing that we need to do so let's get into doing that I'm gonna just pick this first panel right here that's doing G our PC is on the product catalog and what you need to do for time scale if you're if you're writing your queries in sequel is modified the where clause of the sequel in order to include the valuable name so in this case I want to figure out like which column I actually want to float on so what I'm gonna do is just inspect the columns of my database very quickly so what I'm doing right now is I've just hooked up my time scale time scale DB instance or time scale observability into this Postgres week or PG admin and I'm just gonna run a small query on it right now in order to show me the different columns in this series that I've called this is actually the wrong series let me put this let me copy and paste the series in called product catalog service G RPC etc etc so basically I just want to know what are the different columns under this this particular Prometheus this particular time series that I've that are monitored there's two prom series as yeah okay cool that should work okay I promise I practiced this beforehand these are all just areas are making on the fly so you can see that there's different columns that are being returned thing like series ID labels the one that I'm really interested that shows me which namespace a particular metric belongs to is this one called kubernetes namespace so in this case I want to select this kubernetes namespace as something that I want to float on so navigating back to the graph on my dashboard I'm going to just modify this this where Clause in order to include the kubernetes namespace column name and I want to say the value of kubernetes namespace needs to be in the set diff in the set of values that the variable namespace can take and so you can see here this is how I'm referring to my variable namespace and in sequel you want to use this in operator let me just write the syntax there properly to show that it's actually this is not just one value but this is a set of value so it could be in this case like demo1 and demo2 that'll show all of them but if it's just demo one then only the metrics related to demo one will be will be shown okay so that actually gives me that's actually all that's needed for this case and as you can see here now if I actually change the value the the graph actually changes so if I just select demo one you can see the values are slightly lower and if I just select them or two the values are slightly higher and if I select all of them the value is kind of even out because it's obviously the average job of the tube because I'm calculating the average value in this case so that's how you apply variables to make this dashboard more interactive I just want to show you a quick example of how this variable can actually apply to multiple panels and that way your dashboard can be even more interactive such that if you change the variable at the top all of the panels the visualizations shown actually change so this case I'm yeah I'm using the exact same one because I'm filtering for the kubernetes namespace and if I go back I'm gonna save and go back and in this case if I select all you'll notice that both these panels change but if I just select demo one versus demo 2 you'll notice that both the panels change where's these two just stay constant because I haven't actually made them into templates now because I've showed you already how to do this I'm actually not going to make all of these into templates you've seen that these these variables have been applied to both these panels because they both are actually templates where these are not okay so that's a basic idea of how to create templates we've actually succeeded in our mission of being able to query the aggregate values for multiple shops or individual shops as you can see if I just select different shops the values change so I can drill down on the aggregate values for each shop as well as if I want to know the aggregate for all the shops that I have I can see that in this dashboard results so now this dashboard is actually much more not just interactive but also I'm able to get a lot more insight from it quicker without modifying the code saving myself time you know from just rewriting code over and over again so that takes us to the end of this first example that I want to show you so going back to the slide deck the next thing that we're going to do is look at what's called dynamic dashboards so we've just been through this one where we've shown you how to aggregate how to view aggregate metrics for one or more shops and we're gonna go into the second example where I'm gonna show you how to dynamically create multiple panels for the same metric for each shop that I have so you already know about the shop so I'm not gonna go through that again in this case what I want to do is instead of having to choose which shop that I'm monitoring and which aggregate metrics I'm seeing I want to just be able to see for a certain metric all the possible variable values shown in different panels and in order to do this we're gonna use something in refiner called dynamic dashboards okay so let's actually just I'm just gonna duplicate this this dashboard this panel and drag it down to this section yeah just so we can clean things up a bit okay so now we just have one panel that we're using and the step over here is I want to use something called the repeating feature in Griffin ax so this allows graph owner to dynamically create new panels based on the variables that I've selected and it works on multi value or include all value options which is what I've selected in this variable so if we go back to the variable name this one has multi value and include also our variable name will work for what we're trying to do in this case so step one is to create your variable I've already done that I'm not going to repeat that step two is to modify the query to make it a template so in this case we've done half the job we've modified the actual query in order to make it a template but there's more places that you can actually use variables other than just the query definition if you go to in this case the general settings you can actually also use variable in the panel title so in this case I'm gonna use I'm gonna insert the variable into the panel title I'm gonna call it namespace name space Redis max memory use so in this case you can already see all is selected there if I just select demo 1 demo is changed in the name there and I can do the same thing with the description so Max and Amit just make it something different so in this case I'm gonna do the same thing with the description and if I look at the description it says Oh demo Redis max cache memory used but if I select demo 2 then the description actually says demo 2 so this is basically a way such that I can actually have this variable show up in all these different places it also shows you that you can use variables in your title and in your panel description but the feature that we're really interested here I apart from that is this feature called repeating so what I want to select here is I wanna turn on repeating under this visualization options and I'm gonna select this name space variable which is the only variable that I've created so you have a list of variables that you've created so I'm gonna select this name space variable and over here I'm okay with selecting horizontal this basically tells you like whether you want your panels to be one next to each other or one below the previous one and the max per row on this kind of select for just because that's how many I want per row so what we do is we're going to save this dashboard and then I'm going to refresh the page and in this case let's say again ok so now you can see I have under the demo part to roll I've selected demo2 if I select them one then the dashboard for demo 1 appears but if I select all of them then I get not just the dashboard for demo one but I also get the dashboard for demo 2 or the panel rather so every wherever I say dashboard just know that actually mean panel so I can actually compare these side-by-side so in this case not only do I have the ability to look at the aggregate metrics the average for both of them but now I can actually compare this side by side and compare just the metric for that particular namespace for particular shop that I'm that I'm looking for Angra fauna automatically um actually creates these panels on the fly depending on what I have selected in the variable so this actually saves you a ton of time especially if you have not to shops but you have like 20 shops this saves you from copying and pasting code 20 different times one interesting thing to note on this is that when you edit when you want to make a change to panels that are if you want to make a change to various panels that are created automatically by Agrafena dynamically created you need to only edit the first panel that's created so in this case I'm going to edit something small like let's say using points on the line here and making the Kara color orange so I've just edited something small of yes and I've only made it edit on the first panel if I save this and go back and refresh the dashboard you can actually see this changes automatically being applied to the second panel that was done actually created even though I actually only add it to the first one and that's because this panel that comes after the first one are just gonna be clones of this so all the settings and things they inherit and the only thing that's changed is the variable and that obviously affects like you know what what's being displayed but all the other settings and things are actually the same okay so now that's part one of the demo done we've successfully seen how to enable drill downs and how to create dynamic dashboards I see we've got another question that says can you show us about how Prometheus is made oh we have the tables and columns of x quixote beer populates the short answer is I'm actually using something called the time scale Prometheus adapter which automatically creates the schema and the tables so I actually didn't have to configure it you don't have to configure Prometheus to be aware of it the adapter actually takes care of all of that there'll be something in the resources section that will show you more about how to use that and I'll point you to the link if you wanna learn more but that's a short answer in case you wondering in case other people have that question okay so that's the the DevOps part of this this demo done let's actually get into part two which is about IOT so this is for all the people who are monitoring IOT devices and in this part two what I'm going to be showing you is how to make this IOT dashboard more interactive using variables and templates and the visualization that I'm going to show here we actually covered how to make this exact visualization in guy took off on our 101 part one creating awesome visuals so if you want to learn more about how to actually set all this stuff up please I think lacy will post a link to that recap in the chat so that people can can learn and catch up if they want but in this this part of the demo what I'm going to do is just use variables and templates in order to make this more interactive and useful I'm going to show you how to use custom variables and how to use custom variables with human readable names using sequel so let's get into that and I'm gonna navigate to a different graph on a dashboard that I have and as I mentioned this dashboard is basically showing me the live locations of buses in New York City and they're just color-coded by the different sections of New York City that they belong to in New York they're called boroughs so for example we have buses in orange belonging to the B borough buses in blue that belong to the M borough and buses in yellow would that belong to the cube borough and then I have another - another panel over here that's actually showing me all the buses that have a Strayed of their specified routes and the ones that I've strayed are colored in red and the ones that are on their route colored in green so this is a classic IOT case where you want to look at you know show me the state of all my devices and where they are right now and then in this case show me devices that may have gone offline or something is wrong with them what's fulfil some sort of specific case that's all we're doing here but as I mentioned if you want to learn more about how these dashboards work I take a look at what we did in session 1 creating awesome visuals in this case what I just want to do is being able to select to only see buses based on which section they belong to in New York City so based on what we're out there taking so in this case what I have is I have this variable called route ID and in this case the routes ID start with different letters so MB Q and s and so what I want to be able to do is select bus M on bus Q and only see those buses that belong to that route that's the goal that we have in this particular session so let's try and achieve that goal I'm gonna create a new variable the same as I did in the previous example in this case I'm going to call this in this case I'm actually gonna be using a custom variable so that's the biggest difference from the previous time that we've created a variable and I'm going to call this variable route ro u T and I'm going to call this bus route and in parentheses I'm gonna call it I'm just going to put a custom so that I know that this is a custom variable that I'm using and then here when you're using custom variables I've selected the timer's custom you just have to manually define what the values you want the variable to take so for example you can have I'm just going to select them MB Q and s because those are the values that I showed you that these these bus routes start with and when I define them I just define them in a comma separated way so M comma B comma Q comma s it's very simple that's I use a custom variable and notice in this case these are actually constants these things don't change I'm not actually reading from a database if I add another bus route say pass around a comes up in the future I have to go back to my dashboard change this but fortunately in this case it's fine to just define these manually like we're doing right now I'm going to select the multi-value option and the select all options so that I can actually select all of them at once and then we're going to save and refresh dashboard so you can really see I've got this the variable actually shows up in top but again we haven't connected it to anything so let's actually turn our queries into templates so once again you guys have probably got the hang of this now what I'm going to do is modify the where clause in my sequel query in order to butter for the bus route that starts with the variable name so in this case this is not called bus route is called route but what I've done here is I'm just saying okay I have this thing called route ID when the first letter of the route ID happens to be in the set of allowed routes only show me buses that are in that route which is what I'm doing here and then I can select buses for different regions and I can see them show up according to the the selections that I made something else like all all of them are selected if I just want to select buses that are queue I can just see the queue buses this allows me actually to drill down a lot easier into my data and it's the same thing I can apply this to this dashboard right here to this panel rather right here and I just have to modify the where clause and once again make that modification brought hopefully it'll pick up Oh in this case I need to say route start route ID and there we go so in this case I'm seeing all the buses that have route Q that are off their route if I want to see all the buses that have around em that are off they're out I just select em and I can see this so this actually allows me to drill down much more deeply and get a lot more value out of this dashboard then just showing everything all the time of course I can see that if I just select all value here but now I can actually drill down into these different segments all the devices that I have so what I'm gonna do right now is show you a different way of achieving exactly what we did there but making it a bit more human readable and a bit more usable because right now I just have the letters MB Q and s here and I don't actually know what they mean if I'm someone who's just looking at this dashboard I'm like what is M mean what does be me and I don't actually understand this we want to give them a human readable name here so there's a hack that I'm going to show you that I actually learned from a graph on a contributor there was a time scale which is to use a query variable type in order to give you human readable values by defining key value pairs so what I'm gonna show you here is I'm just gonna type in a name called bus route so we're gonna give it a different name and then I'm gonna say bus route query because this is the query type obviously just to differentiate because we already have a drop-down called bus route and under the query options I'm going to select the data source in this case as being MTA bus DB so this is a time scale instance and under the query I'm just gonna copy and paste this query and then I'll explain it because my keyboard seems to be giving me some issues what I'm actually doing is defining some key value pairs instead of defining the just the letters mb qns I'm using a sequel query to define some key value pairs so in this case k as the text and V as the value so in this case I have a bunch of key value pairs for example the human readable name has the key so in this case Manhattan Bronx and Brooklyn Queens and Staten Island these are just the different parts of New York City that I alluded to on the map and then the value is actually what the symbol that represents them for the buses so M the Q and s and then I've just defined at the end that these are key first and then the value and as you can see I'm gonna include multi option and all option as you can see at the bottom we actually get human readable names Manhattan Bronx Brooklyn Queens when were selecting values from the drop-down menu but then when we're actually referring to things in the query when we're actually referring to this variable we actually get these values of M D Q and s such that we basically abstract us away from the user in order to having the user to know or what is the symbol that man hadn't stands for what is a symbol that Queens stand for we just basically make it much more easy for people to navigate this dashboard so I'm going to add that here and you can see you know I have the list of all the variables that I have route and bus route so I'm gonna go back save this and then what I've done is I've just got the same I just got one panel here just cuz I'm gonna show you how it works where I'm going to make this into a template that uses the new variable so just copying and pasting that and in this case you can see already that all the only change that I made here is I'm using the different variable name in this case it's bus underscore route and in this case when I'm selecting things I actually get human readable names up here so in this case I wanna select up the Bronx and Brooklyn ones if I'm select the Queen's once then works just like previous one but the advantages that you have human readable names when you're selecting things from your drop-down menu and of course I can apply it to the other dashboard as well I'm going to save this and that actually brings us to the end of the the second part of today's demos which is making the real-time visualization much more interactive and useful now very quickly for part three a question that we got from the first section that we did on Gro fauna which is goes as follows the person wanted to see an example of how to create a new dashboard based on an existing dashboard and how to customize it without having to recreate all the pots and without disturbing the original dashboard so I felt that this was a very good question and I wanted to show you how to do this in this part three of the demo which is about version control and sharing so in this case showing you how to share and collaborate on dashboards with your teammates and the goal here is just to make it very easy to share and collaborate in your dashboards and there's two things I'm gonna cover exporting and importing dashboards this takes like two minutes to show so what I'm going to show you here is I'm going to first if I just want to clone a dashboard or copy a dashboard I go to dashboard settings I go to save as and then I can select this dashboards name so I'm gonna call it owned dashboard and I'm gonna save it and you can see here my dashboard name is now cloned dashboard and in this case what what you can do if you want to actually export the dashboard is you can save a copy of its JSON code so in Griffin our dashboards actually backed by JSON code if you just go to sorry that was a bit fast if you go to dashboard settings and then JSON model you can actually see the JSON code that composes your dashboard and then all I'm doing here is just selecting all of it copying it then I can paste it in a new file so in this case I've just opened up a new file in my visual studio editor here and then what I'm going to do is actually delete this guy I'm just gonna delete it because I have the code SAVE so say something happens to your dashboards and you lose you lose the actual things in Griffin ah it's good to have the backups of your JSON JSON that actually comprise their dashboards in a git repository for example for this webinar I've created one that shows my dashboards without the variables I've created one that shows my dashboards with the variables so that I have all these different versions saved in JSON so that if something happens to my graph on an instance I can just instantly you know recover them because I have that code safe so going back to this example I'm gonna copy copy the code that I just got from the dashboard that I cloned and then when you want to actually reuse this this code you go to create dashboard and you go to import and then paste the JSON that you have and one thing to know note about here is that you can change the title and change the what's called the UID the unique identifier so often if you have two dashboards that are had the same unique identifier you can't have that so you can modify this here if you want but in this case because I deleted the previous one I'm not actually going to not actually going to do that and then when I press load I magically get the same dashboard and all the same variables and templates that I had on the previous dashboard show up again so that's how you import and export your dashboards and then for version control as I mentioned I've just got these files hooked up to a git repository in this case and then I'm saving them as I make these big changes I'm saving them to a git repository and then whenever I want I can just copy and paste the code for different versions of the dashboard so that's how you would do something like make it very easy for you to version control and share dashboards among your teammates and I'm not going to take you through the gate part because I think most people know how to use git commit and push and stuff like that so but that's basically what you need to know in order to basically do external version control as well as exporting and importing of your dashboards now that brings us to the end of the demo section once again please put in any questions that you have into the Q&A section because we're gonna answer them in this next section before we get into that just want to take you through some key takeaways or things that we've learned today so what do we actually cover today four main things the first one is we learned why templates were important for things like interactivity saving time reusing and sharing secondly we looked at templates in grow fauna so we looked at things like definitions the variables syntax variable constraints and then thirdly we saw how to use graph on our templates for interactivity reusing and sharing using the examples of DevOps and IOT so I showed you how to use interactive and dynamic panels I but you also saw how to use query and custom variable types and you also saw how to import export and version control your dashboards if you want to actually apply the learnings that you've that you've picked up in this in this technical session there's some resources that are put on the screen over here you can actually try out the the principles that I've shown you in our graph on a template thing tutorial so this is at this URL that you can visit or we'll send it to you and in the follow-up email to Flavio's question about how Prometheus is made aware of the tables in time scale DB etc etc you can check out our Prometheus adapt and helm charts which will actually give you more information about exactly how time scale and Prometheus and Griffin are worked together there that's at this github link this also be in the follow up email if you have any questions about time scale DB or about how to use time scale and gravano together you can join the time scale developer slack where you'll find me as well as people like time scales co-founders and at the time scale Gryphon are contributors like time scales very own spin who we'll be able to help you as well as thousands of members of the time scale community who are super passionate and help each other all the time and then lastly if you want to start a if you want to get started with time scale very quickly I encourage you to sign up for time scale cloud where I will give you 300 dollars in cloud credits just start off with and you can actually use those credits to complete the score finite templating tutorial that I mentioned in the first place before I get into the questions just two more things the first one is about sharing your feedback so we always want to make these technical sessions better so please share your feedback with us you can do it at this URL over here she has debated Co forward slash webinar - feedback or you can go to the link that will send you in the follow-up email just drop us some knowledge about how we can make this better and better serve your needs and then just wanted to let you know you the first people to know that we're actually gonna have one last session in our guide to graph on our series that we're having and this one is gonna be on advanced tips and tricks for time series data so while the first three sessions are really about how to get started and how to learn the basics so that you have a solid foundation this session is going to look at three or four more advanced examples of how to work around roadblocks when dealing with time series data and graph honor and you will get an RSVP link in your follow-up email for that so thank you so much for being with us today and for being very captive audience asking questions and putting things in the chat I'm gonna actually get to work in answering your questions thank you so much for joining us today and for being active participants

Channel: Timescale

Views: 10,200

Keywords: time series, data, database, timescale, timescaledb

Id: bArzYvIXe7s

Length: 65min 28sec (3928 seconds)

Published: Thu Jun 18 2020