Build An Uptime Monitor with Inertia

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

16. Deleting endpoints

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

02. A fresh Inertia project

02. Sites

03. Site and dashboard setup

04. Building the site selector dropdown

05. Making use of API resources

06. Setting the default site

07. Setting up Vue modals

08. Creating a site

03. Endpoints

09. Setting up endpoints

10. Enum endpoint frequencies

11. Creating the endpoint form

12. Storing an endpoint

13. Validating and authorizing endpoint stores

14. Normalizing the endpoint location

15. Displaying endpoints

16. Deleting endpoints

17. Toggling inline editing for endpoints

18. Applying a watcher to the endpoint form

19. Storing endpoint edits

04. Checking endpoints

20. Determining endpoints to check

21. Creating a job to perform a check

22. Making an HTTP request

23. Scheduling checks every second

24. Setting up the check relationship

25. Updating the job

26. Showing the last status

27. Expanded list of checks

28. The response body modal

29. Authorizing the endpoint details

30. Calculating uptime for endpoints

05. Queuing

31. Setting up queues

32. Queuing the endpoint check

06. Email notifications

33. Setting up email in Laravel

34. Site model email notification storage

35. Adding email addresses via the UI

36. Listing and deleting email addresses

07. Downtime notifications

37. Observing when to notify

38. Creating an endpoint down notification

39. Creating an endpoint recovery notification

40. Making the emails a bit friendlier

08. Extras

41. Deleting sites

42. Eager loading

43. Recovery notification bug

44. No sites fix and placeholder

Transcript

00:00

While we're here, let's go ahead and implement the ability to delete endpoints. This is where we're going to see inertia shine because, of course, we don't have any page refreshes.

00:07

The data is just going to come back and we're going to see, obviously, fewer endpoints as we delete them. Before we do that, I've just noticed that we didn't fill in how many endpoints we're currently monitoring. So let's head over to our dashboard really quickly and we'll just find that X and we'll go ahead and fill this in. We know this data, if we scroll down here, comes from endpoints.data.

00:29

So if we go back to here, we just need to fill this in. So let's say endpoints.data and .length. Let's come over. There we go. We've got two. Okay, so how are we going to get this to delete to work?

00:42

Well, if we come over to our endpoint component that we created, we've got this delete button here. What we want to do is click on this, send a request through to our backend, to Laravel, and then go ahead and just delete that resource. Inertia will take care of updating the UI for us.

00:58

So first things first, let's go ahead and create our a controller to handle this. So we're going to create an endpoint destroy controller and let's head over to our web routes and register this out. So if we come up here, let's go and create this out. We can do this just under endpoints.

01:16

So we don't necessarily need to go ahead and tie this down to a site, although you could do if you wanted to, and we're going to choose the endpoint here that we want to delete. So let's go and hook this up to our endpoint destroy controller, and we can head over to this now and start to fill it in.

01:35

So first things first, let's create our constructor and go ahead and create some middleware in here because we know that we need to be signed in to get this working. And down in our invoke, let's go ahead and bring our request in, which we're going to swap over later for a form request and the endpoint here that we'd like to delete.

01:53

Okay, so to test this is working, we're just going to die dump on the endpoint. So when we get this hooked up in the client, we'll just see the endpoint that we want to delete dumped out. And we can now start to hook this up over an inertia. So what we'd really want to do is when we click on this, we just want to go ahead and invoke a method.

02:12

Let's call this delete endpoint. And we'll grab this and go down here and create our function to handle this. There we go. So previously, we've been working with forms where we go ahead and use the use form composable.

02:26

So we do something like delete form, but we don't really need to do this here. There's not much point doing this because we just want to send a request to inertia. So the other way to do this would be to import inertia and pull that directly, of course, from the inertia package. Now that we've done that, we can still send a request down.

02:48

We're just going to say inertia.delete. That's the request type. And then go ahead and choose the URL for this. So that will be endpoints slash.

02:57

And then we want to grab out the endpoint ID. So to do that, we're just going to assign the define props here to a props variable. So we can go ahead and extract this out. So this is going to be props endpoint ID.

03:10

Okay, let's try this out. So let's go over. And yeah, I think I probably registered this wrong. Yeah, so this, of course, needs to be delete.

03:18

Because destroy is not an HTTP verb. Okay, so I'm going to go ahead and click on this. And there we go. We get the endpoint that we want to delete.

03:24

That's pro. And let's look at this one. And yeah, that's just forward slash. So that's working nicely.

03:30

Now, if we come back over to our endpoint, let's just add a really basic JavaScript confirmation here. So let's wrap this in an if statement. And we're just going to say window.confirm. Of course, we could do something fancy here.

03:43

But let's just say, are you sure? Or you sure? And let's go over. When we click this, we can click cancel.

03:51

Or we can click okay. And, of course, see that dumped. Now, dumping this out is not what we want to do. We actually just want to delete the endpoint.

03:58

So we're just going to go ahead and delete this and return back. That's pretty much all we need to do. So let's go ahead and try and delete this pro endpoint. And there we go.

04:07

It's gone very quickly. Inertia has refreshed the props, sent them down. And because we are obviously accessing all of our endpoints as props, they are just re-rendered and we only see one. So let's add pro back in here really quickly.

04:20

And we can go ahead and now look at authorizing this. Really, really important. So we're going to swap this form request over to a destroy form request. So let's make out a request in here and call this endpoint destroy request.

04:37

And let's go and switch this out for our endpoint destroy request. And let's open this up and authorize this. So we already know how to authorize. So let's go over to our endpoint policy, which we don't actually have at the moment because we only created one for our site.

04:58

So let's go ahead and make our policy for this because we're going to need a couple of other policy methods in here. So policy endpoint policy. And let's go ahead and first of all, before we forget, over in auth service provider, hook this up. So that's now endpoint.

05:18

And of course, this is our endpoint policy. Great. So over in our endpoint policy, we want to know, if we just get rid of this constructor, if we can destroy a site. And we'll work out the rule for that.

05:33

So let's pull the current user in. Let's pull the endpoint that we're trying to destroy in. And let's go ahead and compare. So in our case, a user needs to match or own the site that the endpoint belongs to.

05:45

So over in our endpoint model, we know that we've got the site relationship here. So if the user ID equals the site's user ID, then we can go ahead and destroy this. So let's go ahead and access the site on the endpoint and check that the ID matches the currently authenticated user. That's pretty much it.

06:01

So if we head now over to authorize, we can go ahead and say this user can destroy. And we already know that because we're within a request, we've got root model binding. So we can just pass in the endpoint. That's it.

06:15

So let's go over and just try this out. I'm going to hit delete. Okay. And we're good to go.

Episode summary

In this episode, we add the ability to delete endpoints from our app. We kick things off with a quick housekeeping fix—displaying the current number of endpoints on the dashboard, just by counting our endpoint data. Then, the main event: setting up a delete flow for endpoints using Inertia.js, so everything happens smoothly with no page reloads.

We walk through adding a delete endpoint button, hooking it up to send a delete request to our Laravel backend, and seeing how Inertia automatically updates the UI. Along the way, we toss in a quick JavaScript confirm dialog to prevent accidental deletes—super basic but effective!

Once the flow works and endpoints disappear from the UI just like magic, it's time to secure things. We set up a proper form request for deleting endpoints and add the necessary authorization by creating a new policy. This ensures only the user who owns an endpoint's site can actually delete it. With everything in place, we test it out to confirm the delete and authorization logic works as expected.

By the end of this one, deleting endpoints is seamless, secure, and instant—no page reloads required!

Episode discussion

No comments, yet. Be the first!