Expanded list of checks: Build An Uptime Monitor with Inertia

00:05

to see all of the requests that have been made for each endpoint. So we're going to, of course, start over by creating a controller.

00:13

We'll create a component out with some pre-made markup, and then we'll fill everything in so we can see each of these requests. So we're going to go ahead and call this Endpoint Index

00:22

Controller. So let's make a controller called Endpoint Index Controller. And let's go over to our web route

00:29

and register this out first of all. So let's copy this one up. We'll go ahead and set this, of course, to Get. And we'll go ahead and reference that controller

00:38

that we just created, Endpoint Index Controller. Now, really importantly here, because we're using root model binding to go through, over in our controller, we need to make sure we authorize this request so we

00:49

know that the user has access to it. So we'll add a couple of notes here, and we'll do that at the end. The first thing, though, we need to be signed in for this.

00:56

So let's just add in some of our auth middleware. OK, so in Invoke, we're going to get in the request here, which we'll swap out for a form request. And we'll, of course, get the endpoint

01:06

in with root model binding, which we will use to show the data. So here, let's just go ahead and make sure we add an Authorize note.

01:14

And then down here, we know that we want to use inertia to render out a component here. Let's just call that page Endpoint. And we'll go ahead and create that out so we can see it.

01:23

So let's go over to our Resources, JS, and Pages. And let's create our Endpoint.view. And just add in a template here. And we'll just go ahead and put some text in here

01:36

so we can see this working. OK, so let's go over to here. We'll hook this up now, actually. So if we go over to our dashboard

01:44

and we go over to the endpoint itself, so that's under our Endpoint component, then we have that link just down here somewhere. That's the endpoint location here.

01:56

So we can switch this out for an inertia link. And we can bind in the href to go through to endpoints and then forward slash the endpoint. So let's just back tick this.

02:06

And we'll go in here and add in the endpoint ID. That's pretty much all we need to do. Just make sure that we've imported the inertia link here. And it looks like we haven't.

02:16

So let's go ahead and do that now. Comes from in here. And we should be good. So let's head over and click on Pricing.

02:24

And there we go. Goes through to there and we see that text. So let's grab the pre-made markup for this, which is in the course download.

02:31

So let's go over to our endpoint page and paste all of this in. We'll have a look at it really quickly. Just looks like this.

02:36

And at the moment, doesn't look like it's doing anything because we don't have our authenticated layout imported in our script. So let's go ahead and do that first of all.

02:44

We could pretty much just pull that over from one of our other pages. So let's just go down here. Find authenticated layout.

02:52

And let's just go ahead and pull that in. We also need head as well because we want to show a title here. So let's pull both of them in.

02:59

And we should be good. Let's have a look. And yeah, of course we're using script setup here. So let's pull that in.

03:06

And there we go, great. So this is where we're going to show the endpoint name, possibly including the full URL. We also want to show our site selector here as well.

03:14

And we have a back button to go back to the correct dashboard. And then of course we have a table with a list of our checks,

03:20

when it was checked, the response code, and then we're going to show the response body only if it has failed as we've already seen. So let's get started on this

03:29

because we over in the endpoint index control are not passing anything down just yet. We know that to do this, we're going to use a resource. So all we need to do here

03:37

is go ahead and pass the endpoint down, but of course make up a resource for this. So endpoint resource, and we'll say make, and we'll pass the endpoint in to there.

03:48

Now we're not eager loading anything at the moment. We need to go back to this and have a review of everything we've done so far in terms of eager loading,

03:55

because we're iterating through stuff. So we'll put a note there to do that a little bit later, but for now this should be enough just to get this working. So over in our endpoint component here,

04:04

let's go ahead and just switch this endpoint out here to show the full URL. Now, if we come over to our endpoint resource, let's just check if we've got the URL in here,

04:13

and we don't have that in there at the moment. So let's go ahead and output the URL here. That's the method that we created earlier. And then we can just very easily go ahead

04:22

and replace this out with the full URL. And that's going to be data because we're working with a resource. And we also need to make sure, of course,

04:30

that we go ahead and define the data that we're getting down into this component with define props. And that's going to be our endpoint,

04:37

and that's going to be an object. So pretty much everything we've already seen, we're just repeating ourselves. Okay, there we go.

04:43

So you could choose to show just the location of this or the full URL. It's entirely up to you. So the next thing that we're going to do

04:49

is pull in our site selector. Now, if we head over to our dashboard, of course, we could combine this template so we're only accessing it once.

04:57

But let's just take a look at what we did here with the site selector. So if we search for this on the page, we grab the sites from a prop

05:05

that we're passing down to this component just here. We know that over on our dashboard controller, we're passing the sites down here. Now, we're going to need these in multiple locations.

05:16

So once again, this is something that's a really good candidate to use a global for. So I'm actually going to cut this out of here, and I'm going to go back over to handle inertia requests,

05:26

and I'm going to put this in here. Now, the only problem with doing it this way is of course, when we grab all sites for every single user that's logged in now,

05:36

that's going to show all sites, which is not what we want because then every single user is going to see every single site that's been added to the database. And that would have been the case for this anyway.

05:46

So now it's time to change this up. So instead, what we're going to do is grab this from the user. That makes more sense.

05:53

And we're going to grab from the sites relationship, scope this by the latest and just grab all of them sites. And we'll do have to do some eager loading in here as well a bit later.

06:02

So request, we have passed into this share method so we can do that very easily. So let's get this working. And then we're going to look at an issue

06:10

because we need the user to be signed in to share this. So we're going to need a conditional in here. Now, if we come back over to just say our dashboard and give this a refresh,

06:18

you can see when we click select site, it still actually works. The reason for that is as we saw earlier, our globals are merged in with every single other prop

06:28

that we're passing down to this page. So we can leave it like this, or of course we can change this over to use page. I brought up use page earlier to access props just as a tip,

06:39

but we'll go ahead and leave this in here now because I think it's a little bit more convenient. Okay, so if we're signed out, this isn't going to work. So what we want to do is have a little conditional in here

06:48

to say, well, if the user is signed in, sure enough show or pass down the site resource. Otherwise we'll just pass down null because there's no point in listing out things

06:58

if the user doesn't exist. For our endpoint frequencies, that's fine because they just come from our ENA. Okay, so now that we've done that

07:06

and we've shared that globally, that now means that over in our endpoint, we can add in our site selector in here. So let's add in our site selector

07:15

and let's make sure we import this, which I've just done here. If we head up to our dashboard, you can see that for the site selector,

07:22

we search for that. We're just passing down sites as a prop. So all we now need to do over on our endpoint is accept these sites in here as a prop

07:33

and then over in our site selector itself, just go ahead and pass them down as we did before. So now when we head over to here, we've got our site selector with our sites

07:43

and they are just our sites now. Okay, so let's figure out the rest of this. We'll just create a really quick back link to this. That's gonna go back to the site

07:51

that we were on for this particular endpoint. So first things first, let's just change this over to a link component and let's look at our endpoint resource

08:02

because at the moment there's no way to work out what site this came from. There's a couple of ways that you could handle this. You could just add in a site ID.

08:10

That's probably the fastest way to do this. But if you needed any more data about this, it might be better to include in the actual site itself. It's a little bit of a downside to that

08:20

that we're gonna have to eagle out this in, but we'll deal with that later. So over in the endpoint resource, we're gonna hook up a relationship to the site itself.

08:28

So if we ever access an endpoint on its own, we can go ahead and grab any of the site data. So let's go ahead and make out a new site resource for this and then we're under here gonna say this and site.

08:40

Now later up we're gonna change this to this when loaded so we force ourselves to eagle out this in or this won't show or if we just wanted the endpoint without site data.

08:50

But let's just keep it super simple for now and just do this and then we're gonna go back and look at eagle outing a little bit later. Okay, so now that we've got the site in there,

08:57

what we can do with this is we can go back to dashboard, slash and then the site ID. So again, let's just back tick this and let's go to endpoint, data, site and ID.

09:09

That should work. So yeah, it's not. So I don't think we have the link component in here. So let's import link from inertia view three

09:20

and we've already got the head in here. So let's just combine them two, that makes sense. Okay, let's head over and click back. Yeah, there we go.

09:27

We're going back to the right side. If we were on Alex GS and we clicked on an endpoint, we'd go back to the correct site here as well. Okay, so we can click on any of these now.

09:35

All we now need to do is just go ahead and output all of the checks for that particular endpoint. So once again, over on our endpoint resource, we're gonna need to output all of the checks

09:46

that have been performed on here. Again, we need to be careful with eager loading, making sure we're not passing too much data down, but we can go ahead and output this for now.

09:54

So check resource, this is gonna be a collection because there are multiple and we're gonna go ahead and say this and checks. Again, we're gonna switch this up later to when loaded

10:03

so it doesn't output this if we haven't eager loaded this data. Okay, so over in our endpoint page, let's now go down to our table

10:14

and this is where we're gonna output each of the checks. Now, thinking a little bit ahead here, we're gonna create a component for the check itself. The reason for this is we're gonna implement a modal

10:25

which is gonna live inside of that component, which will show us the response body if this wasn't successful. There are lots of different ways to do this,

10:32

but let's go ahead and create out this component now and I'm just gonna call that check.view and I'm gonna paste in again some pre-made markup here. It's just each of the table rows

10:42

with created status and view. So we can iterate through these in here. So let's go ahead and say check and we wanna go ahead and say v4 check in

10:51

and remember we're on that endpoint data checks and that should be good. So let's key this by a unique ID and that's just gonna be check ID

11:02

and we should be good. Let's just check our check resource just to make sure we have the ID in there and we do and that should be good.

11:08

So let's just go ahead and import the check component and we should start to see this roll in. So that's gonna come from components and check, great. Okay, let's go over and just give this a refresh

11:19

and there we go. We have a few checks that we've already created. Of course, we just need to fill in the data now and then we'll go over to the next episode

11:25

where we're gonna look at the modal. So over in check, what are we gonna do here? Well, we get a check passed into each of these. So if we head over and make sure

11:35

we actually pass the check in as a prop. Over in here, we can now go ahead and accept this in. So let's define our props out in here and we're gonna get a check in for each of these.

11:49

That's gonna be an object and then we can just start outputting data as we've already seen. So created is just gonna be the date.

11:56

So check created at, and remember we have that resource in there. So we wanna access the date time version of that and we see it in there.

12:04

And then we want the status, which is pretty much the same as what we saw on each of our endpoints. So if we head over to this component here

12:12

and go up to where we created out the check just here. Now we don't need this if statement around it anymore because of course we know that for each of these checks, they already do exist.

12:22

We just need this span in here, which goes ahead and shows us the response code, the status text, and then colors the background to red or green

12:30

based on the success of this. So we can just paste this in here. We could even move that over to a component to avoid duplication,

12:37

but we can always do that later. Okay, so if we come over and give this a refresh, we should see if we just make sure this is check is successful.

12:47

So obviously we need to change these over. So check is successful and this is going to be check response code and check status text.

12:56

So that should now be good. Great. So we've got all of our checks just in here. Now the response body is slightly different

13:03

because we want a view link to open up a modal if this was successful. So what we're going to do in here is just create out a quick if statement

13:13

and say, well, if we have a response body for this, then we want to show a link in here. So this is actually going to be a button because it's going to launch a modal.

13:22

So we'll say view, and that should be if, of course, and then otherwise we just want to show a hyphen. Let's have a look.

13:33

So there we go. For all of these 404s now, we have a response body in here. So we'll be able to click on this

13:38

and launch the modal to inspect the response body for this unsuccessful request. Okay, so that is pretty much it. Now we can go back

13:45

and we can click on any of these end points to see the checks. Of course, there's a little bit of UI stuff we could do here to show that there aren't any checks,

13:52

but we've pretty much wrapped this up. We've got a list of all of our checks that we can inspect now. We know that the latest was 404 not found.

13:59

You could even order these in the opposite way, but all the latest are going to be at the bottom. And we just need to figure out this modal now. So we're going to go over and do that in the next episode.

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

Episodes

Transcript

Episode summary

Episode discussion