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
12. Storing an endpoint

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 able to enter an endpoint in here,
00:03
choose a frequency, hit add, and have that stored in the database. So of course, the first thing that we need to do is create our controller to handle this. So let's go ahead and make a controller. We're going to call this EndpointStoreController.
00:16
It's just going to have one job. And let's go ahead and open this up, so EndpointStoreController. OK, so let's create our invocable method in here. And let's just die dump on this just to know that it works.
00:27
We've got it hooked up in Inertia properly. Before we do that, we're going to need to, of course, head over to our routes and create a route out for this. So we're posting through to endpoint, so EndpointStoreController.
00:40
And we're done. So we can now post through to here. So if we head over to our dashboard, let's hook this up. And I'm actually going to go ahead and pull this script
00:49
and put it at the bottom here where that belongs. OK, so let's go and hook this form up here. ToSubmitThrough. So Vion, Submit.
01:02
And we're going to prevent the default behavior. And we'll call a StoreEndpoint function. And we can go ahead and implement this down here. So let's create this out.
01:12
And we already know how to use forms because we've done that to create a site. So we're going to go ahead and pull in UseForm from Inertia. And we're going to go ahead and create this form out just up here. It doesn't really matter where we do this.
01:26
So let's go ahead and say EndpointForm. We'll go ahead and use that form. And we know that we just have a location and a frequency. So we're going to set the location to null by default.
01:38
And the frequency here is a little bit different because if we set this to null and then hook it up, it's not quite going to work. So if we come back up to our form here, let's set this V model to EndpointFormFrequency. And let's set the input here to the location, so EndpointFormLocation.
02:01
Now, look what happens to our option here or our overall select. We're getting a null value in there. So that's not quite going to work. So how are we going to figure this out?
02:11
Well, what we can actually do here is either from our props, if we were to define these like this, we could access our props directly through here or through our page where we have our endpoint frequencies. We can just go ahead and grab the first one.
02:25
So page props value, then the endpoint frequencies prop, and then data zero, and then the frequency itself. So that's going to give us either 60, 120, whatever we've chosen. So that gives us a nice default value, which is one minute.
02:44
If we were to choose the second one, of course, that's going to be five minutes and so on and so forth. And so on and so forth. But we're just going to choose the first one in the list for here.
02:52
OK, so once that form gets submitted and we call this store endpoint function, we're going to go ahead and grab the endpoint form. And we're going to post through to slash endpoints. We'll go ahead and fill in the prevent scroll, preserve scroll in here now,
03:07
just so that's in there. And we're pretty much done. What we should see is works. So that's hooked up nicely to our controller.
03:15
And we can now start to actually add this data in. So over to our controller, endpoint store controller, let's figure out what we need to do here. I'm thinking that we probably should inject the site in here.
03:28
So that actually does make sense. So let's change this up to say site slash site and then endpoints. I think that makes a lot more sense because then we have everything in the context of the site. And we don't need to pass it down as a form value.
03:42
OK, so we're going to need to switch this up here. First of all, on the endpoint store controller, as well as bringing the request in, we're also going to need to pull that site in. So we have that.
03:53
And let's just die dump on the site as well. So we know that it's coming through. And then, of course, we're going to need to update our dashboard. Because if we want to post through to slash site slash the site and then endpoints,
04:05
we're going to need to grab the site value in here. And we can do that because we have this defined as a prop. So I'm going to go ahead and assign our props to a value here, which we can use then to access the site.
04:19
So in here, what we want to do is just backtick all of this and then go ahead and add in here props site and then should be data and ID. Let's try it out. So let's go ahead and hit add.
04:33
And there we go. Yeah, so that looks like it's posting through to the right site. Now all that's hooked up properly. All we need to do is go ahead and actually store the site.
04:47
So to do this, we're going to access the site. We're going to access the endpoints relationship. And we're going to create a site based on just the location and the frequency. And then we're going to go ahead and return back.
05:01
That should do it. So let's go over and try this out. So I'm going to just go and say pro one minute frequency and hit add. And yes, so next check does not exist.
05:13
We can actually solve this now pretty quickly with an observer because the next check is always going to be the current date plus the frequency that we've just chosen. That's when we want the next check to happen.
05:24
So what we can actually do is set up a very quick observer for our endpoints. So let's go ahead and create out an observer. So make observer. And of course, we're going to call this endpoint observer.
05:35
We've already looked at observers as well. So we're already familiar with this. Let's open up our endpoint observer. And we're going to go ahead and do this when something is being created.
05:46
So creating. And this is, of course, going to be the endpoint just in here. Now, when this is being created before it's persisted to the database, all we want to do here is set the next check to something.
05:59
Now, that's going to be now, which gives us a carbon instance. And then we can go ahead and add to the seconds the endpoint frequency that we have chosen. That's pretty much it.
06:09
So it's just going to be the current date and time plus one minute, five minutes, an hour, half an hour, or whatever. OK. So we can come over to our event service provider where we registered our site observer.
06:20
And we can just do the same thing for our endpoint. So endpoint observer. And we're done. That should solve the problem that we've just seen.
06:29
So let's go back over and try this again. Just make sure there's nothing in here. And we're going to say pro, one minute, add. And there we go.
06:37
Obviously, we don't see anything. But that's gone ahead and stored that in with a frequency. And sure enough, it's added 60 seconds to the current date and time. OK.
06:46
So just to clear things up here, when we submit the form, we just want to reset it. We've already covered that as well. So over in our dashboard, let's go ahead and say on success, we want to go ahead and for the endpoint form, reset it back to its original state.
07:04
That's pretty much all we need to do. So let's go ahead and add slash as an endpoint. Choose five minutes. Hit add.
07:11
That resets that. Resets the number here as well. And sure enough, over in the database, the correct frequency, location, and next check date have all been stored.

Episode summary

In this episode, we're working on letting users add new endpoints from the UI and having them saved in the database. We start by creating a new controller, EndpointStoreController, which is responsible for handling these new additions. Once that's set up, we also wire up the necessary route to make sure form submissions hit this controller.

On the frontend side, we hook up the add endpoint form to use Inertia's useForm, initialize some default values, and make sure the frequency select input works nicely by defaulting to the first available frequency option. We handle form submission so that when the user adds an endpoint, the form posts the data and doesn't reload or scroll unnecessarily.

A key part here is making sure we're adding the endpoint for the right site, so we update our route and controller to make sure endpoints get associated with the correct site. Then, on the server-side, we set up the logic to save the endpoint with its location and frequency. As part of that, we also realize we need to automatically calculate the "next check" time for this new endpoint, so we set up an Observer to calculate it right before saving.

Finally, after confirming everything works—including default values, posting to the right place, the observer firing, and form resetting—we wrap it all up by making sure submissions reset the form and actually store the new endpoint data in the database. So, by the end of this episode, you can add endpoints, with the right frequency, all saved and ready for checks!

Episode discussion

No comments, yet. Be the first!