Build An Uptime Monitor with Inertia
This episode is for members only

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
26. Showing the last status

Episodes

0%
Your progress
  • Total: 4h 59m
  • Played: 0m
  • Remaining: 4h 59m
Join or sign in to track your progress
01. Introduction
01. Introduction and demo
6m 33s
0%
02. A fresh Inertia project
6m 7s
0%
02. Sites
03. Site and dashboard setup
8m 59s
0%
04. Building the site selector dropdown
12m 22s
0%
05. Making use of API resources
4m 14s
0%
06. Setting the default site
10m 37s
0%
07. Setting up Vue modals
4m 34s
0%
08. Creating a site
18m 18s
0%
03. Endpoints
09. Setting up endpoints
4m 23s
0%
10. Enum endpoint frequencies
3m 50s
0%
11. Creating the endpoint form
12m 58s
0%
12. Storing an endpoint
7m 21s
0%
13. Validating and authorizing endpoint stores
7m 6s
0%
14. Normalizing the endpoint location
6m 4s
0%
15. Displaying endpoints
6m 22s
0%
16. Deleting endpoints
6m 21s
0%
17. Toggling inline editing for endpoints
5m 12s
0%
18. Applying a watcher to the endpoint form
5m 31s
0%
19. Storing endpoint edits
8m 56s
0%
04. Checking endpoints
20. Determining endpoints to check
2m 57s
0%
21. Creating a job to perform a check
3m 21s
0%
22. Making an HTTP request
3m 39s
0%
23. Scheduling checks every second
4m 27s
0%
24. Setting up the check relationship
3m 14s
0%
25. Updating the job
2m 10s
0%
26. Showing the last status
12m 50s
0%
27. Expanded list of checks
14m 10s
0%
28. The response body modal
2m 49s
0%
29. Authorizing the endpoint details
2m 27s
0%
30. Calculating uptime for endpoints
8m 29s
0%
05. Queuing
31. Setting up queues
3m 21s
0%
32. Queuing the endpoint check
7m 26s
0%
06. Email notifications
33. Setting up email in Laravel
5m 8s
0%
34. Site model email notification storage
3m 5s
0%
35. Adding email addresses via the UI
17m 24s
0%
36. Listing and deleting email addresses
7m 14s
0%
07. Downtime notifications
37. Observing when to notify
10m 51s
0%
38. Creating an endpoint down notification
10m 46s
0%
39. Creating an endpoint recovery notification
8m 9s
0%
40. Making the emails a bit friendlier
3m 50s
0%
08. Extras
41. Deleting sites
5m 9s
0%
42. Eager loading
4m 44s
0%
43. Recovery notification bug
2m 31s
0%
44. No sites fix and placeholder
3m 25s
0%

Transcript

00:00
By the end of this episode we will be showing the latest status with a color-coded either red or green on Our table with our list of our endpoints now at the moment as you can see we've got an error here because 10
00:14
Is not a valid backing value for the enum that we've created the reason that that's happened is over in the endpoints here I set the frequency to 10 I'm gonna switch these back to 300 or we could just switch them to every minute which we know is valid and Of course, that is why we chose to use enum. So we have these strict values in here
00:36
So this is the part I'm talking about the last status We know that we can get that what we need to do now is figure out how best to output this Now we know that for each of the records that we have here. We're using an endpoint Resource so what we could do here is add in a status or the last
00:56
Status whatever we want to call it and create out a resource for our status table now or our checks table so let's go ahead and do that now, let's create out a API resource for our checks. So check resource and Then we can go ahead and fill this in. Okay, so our last check
01:16
Let's just call it last check or latest check that would probably be better We're gonna go ahead and reference that check resource We're gonna make it out and we know that over in the endpoint as well as the checks relationship we also included the Last check so we can very easily now just say this
01:35
Check now, we're not eager loading anything at the moment. We'll go back to that at the end But for now, this should work. So if we go over to our check resource here Let's just output some really basic information here. So let's just output the ID For now and we're gonna head over to our dashboard and we can just dump something out here
01:56
So we know we have endpoints in here. So let's go and just dump the endpoints out and Data and let's head over and there we go So we should have in here our latest check with an ID of 13
02:13
So in our check resource now Let's just go ahead and fill out some other information that we would want to see in here So let's start with the basic ones. Let's say the response code, which we already know. So this response code
02:28
We could output the body as well Or we could have this as a conditional because it might not be ideal to be sending all this data down probably go ahead and refactor that later and Really what we want in here is the status text and also whether it was successful
02:46
So let's go over to our check model and let's just create our method That tells us a true or value whether this was successful that will allow us to color code this either green or red so let's go ahead and create out a function in our method in here called is
03:06
successful and This is pretty straightforward. All we really need to do here is check if the response code Is greater than or equal to 200 and The response code is
03:23
less than 300 so that's going to give us a pretty good indication as to whether this is successful or not So let's go ahead and grab this and add this to our check resource. So we'll just call this is successful and
03:37
We'll just reference this in here. So that's pretty much everything we need now to output the code here under last status and either show it as Red or green and again, like I was saying this is giving back all of this within here So it's not ideal for sending all of this data down, but we can always fix that up later
03:58
Okay, so let's go back over to our dashboard. We know that for each of these endpoints we have an endpoint Component so we're gonna go ahead and open that endpoint component up and then where we have our status We're gonna go ahead and fill this in now Remember, we might not always have a latest check
04:16
So a good thing to do here would be to create our template with a condition So endpoint and latest check, which is that property that we've just added to our resource And then otherwise if we don't have a latest check, we can just add in a dash or something like that So this is the status if we do have a latest check and otherwise we just have a little dash in there now
04:41
let's go over to the ID for say 9 and Let's go ahead and delete all of these. So That will be let's order these and go ahead and just delete all of them and you'll see what I mean So if we come over here
04:58
No checks for this particular endpoint Okay, so for the status itself We're gonna go ahead and create our span in here and I'm just gonna go ahead and pull over some pre-made markup in here Which is in the course resources and in here, this is going to be the status. So for example 200
05:15
So it looks like this at the moment It's got a bit of padding on it And what we can do is control the background in here based on whether this was successful or not So let's go ahead and bind in some classes. We'll start with whether it was successful
05:29
This is going to have a background of say green 100 and we'll set the text here to green as well but we'll bump that up to about 800 and that's going to be if the endpoint latest check and remember is Successful. So let's just check this out and You can see here at the moment. It's not the actual response code that we have in here is pretty easy endpoint
05:54
Latest check and response code and we know that the latest response was a 404 So that should be red now If we go ahead and just fiddle with the data a little bit and we go ahead and order this by created app Let's set that to 200 and get rid of the body
06:12
and if we come over sure enough we get green so we can very easily just fill in the Condition here for this not being successful so we can pretty much grab all of this and go ahead and set these to red and then say if it was
06:28
Not successful now at the moment, of course, it's green But if we just get rid of the latest successful check-in here The last unsuccessful request was a 404 and that is now a background of red now We want to add a little bit more information here
06:43
So rather than just say 404 we want to say something like 404 and not found The only issue is that's gonna take us ages to implement ourselves So if we go looking around we actually have a response class over in symphony Which Laravel does extend now if we have a look in here what this actually contains is a list of all of our?
07:05
Statuses, but also if we just come down here, it will also contain a list of labels as well So if we just come down to here, you can see that we've got these status texts So for 200 we've got okay, and if we come down sure enough and find 404 we've got not found So what we could actually do is we could access this property
07:28
And we could map up the status code that we've stored with the status text that's contained within this response class There might be another way to deal with this. There might be another package You might even want to implement it yourself But since that is there and it contains all the information we need we may as well take advantage of it
07:45
so under check what we're gonna do is create our a status text method in here and We're gonna go ahead and use that. So let's go ahead and use that response class. Remember that is from we come down to Symphony component HTTP foundation and response. We're gonna go ahead and access the status text We're then gonna go ahead and access that because it's an array
08:09
Passing in our response code and then really importantly if it can't be found in there for any reason And there are some that are not included in there Then we're gonna go ahead and just write unknown or you could just include an empty string in here. It doesn't really matter So now that we've got this status text we could go ahead and add that over in our check resource
08:31
so let's go ahead and add in status check in here and That should be status text not status check. So this status text and That's it. So now what we can do is add this status text over in our endpoint component just directly next to this it's the endpoint latest check and
08:51
Status text. So if we come over now, there we go We get 404 not found now while we're here. We may as well implement the last check date and time So we're gonna come over to our check resource again, and there's a couple of ways that we could do this I'm gonna go around a kind of long-winded way of doing this and the reason being is
09:11
Most of the time with created at an updated at and any other dates We like to include lots of different formats here. For example, we might have a date time string which would be this created at and to
09:26
date time String using carbon and we might want a human readable version of this like two minutes ago or two hours ago Depending on the frequency now doing this means that anywhere we want these same formats to be available where we want to keep Consistency, we have to go back and update multiple places
09:47
So a little tip here what I like to do is create out a carbon resource or a date time resource Whatever you want to call it and reference this anywhere I'm using a date and then everywhere in our API or in this case the data that's being passed down to our view components is Always nice and consistent now. This only takes a couple of seconds to do. So let's go ahead and do this now
10:07
so let's go ahead and make out a resource remember resources are not just for Laravel models and Let's call this date time resource thing that makes a little bit more sense So make that resource out and then in here we're gonna go ahead and say date Time
10:23
Resource make and we're gonna pass down the created at date Obviously not a Laravel model, but we can still do this So over in our date time resource what we can do now is we can use that to create a really consistent Date formatting resource that we can use anywhere
10:42
So for example, I could include a human date here and that's going to be this diff for humans on the carbon library and then down here we can go ahead and just say date time and We can say like we did before to date time String so we've now got a created at date
11:02
Which is a resource which gives us them two things and we can reuse this resource wherever else we need to output some dates So let's go over to our endpoint and just dump this out here. So this is now going to be endpoint Latest check and created at and That's not working in the moment probably because we may not have a latest check
11:25
so let's go ahead and just add in our template as we did just below and Here we'll say be else of course There we go. So now what we should see is No last check date, but then we've got all of them values in here, which we can start to use
11:42
So it's up to you how we use these what I'm gonna do is just say Date time, but what you could is you could show the human value of this you could wrap this in a time HTML element and then in here you could add in a date time property with
12:00
The date time and you could bind that in like this and That would show you 19 minutes ago
12:09
but this now contains the actual date time and what you could even do if you wanted to is add in a Title and bind the same value in and what that would mean is when we hover over this You can actually see the date in there. I'm just gonna keep things really simple for now and just output the date time So I'm gonna go ahead and grab this and I'm just gonna put that in there
12:32
And of course, we could wrap that in time as well. That might make sense. But let's just leave that as a string for now So, there we go There's our last check and last status if they are available and that's always gonna keep up to date because we know that our relationship Is only grabbing this data from the last check

Episode summary

In this episode, we work on enhancing our dashboard table by showing the most recent status for each endpoint and color-coding it for clarity—green for up, and red for down. We start by making sure our enum values are all valid, which prevents random errors when displaying frequency values.

Next, we set up a new API resource for our checks so we can easily pull in info about the latest check for each endpoint. This involves including things like the response code, if the check was successful, and making a handy isSuccessful method for easy color-coding.

We update our component to actually display the status, making sure it falls back gracefully if there's no check yet. Then, to give the status more meaning, we map response codes to their readable status text, like "404 Not Found"—using Laravel's integration with Symfony for a quick win.

For timestamps, we refactor a bit so date and time data is always presented consistently across the app, and you learn how to show that in a human-friendly way (like "10 minutes ago"). By the end, our dashboard can show the latest status for each endpoint, highlighted in red or green, and includes both the status code with readable text, plus the date/time of the last check. Much more useful at a glance!

Episode discussion

No comments, yet. Be the first!