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
01. Introduction
02. Sites
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%
06. Email notifications
07. Downtime notifications
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.
44 episodes•4 hrs 59 mins•2 years ago
Overview
Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects.
This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down.
In this course, you'll learn to:
- Build a real app from scratch with Inertia
- Work with Laravel queues
- Perform actions on models at user-defined intervals
- Work with sub-minute schedules in Laravel
- Send out channel notifications with Laravel
- Use API resources to simplify Inertia data
- Organise apps with events and observers
- Create modals in Vue
- Perform inline editing with Inertia forms
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!