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

28. The response body modal

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

setting up the response body for the modal is going to be really simple because we've already pulled in the view final modal package for our site selector when we hit add site so let's just fix this up quickly because i probably forgot to add a v if or v else on there and there we go

00:14

great and let's go ahead and hook this up so i'm actually going to come straight over to the site selector open that up properly and i'm just going to grab the modal that we already had in here so we can just grab the entire thing here that includes all of the styles there are ways to create modals here that you can just inject into but for now we're just keeping this really really

00:33

simple so i'm just going to paste this into here of course we're going to get rid of the entire form inside of here because we're not going to need that we're just showing the response body in here so let's just add response body and we want to go ahead and hook this up to a model in view so we can trigger this so down here let's go ahead and import ref from view and let's define

00:57

this out here and we'll call this show response body modal set that to a ref and of course by default that is going to be false so we can hook that up to there and then of course with our button we can go ahead and say v on click show response body modal and set that to true so if we come over now what we should see if we actually import the view final modal package so again we

01:22

can come over to site selector for that the reason that that is happening is because the component can't be imported and therefore it's just adding in some spacing there when we click on that there we go see our response body so as simple as that now the downside to this is we're basically rendering out a view final modal component for every single one of these checks here so if there

01:44

are a lot we're going to see a lot of these rendered out and hidden in one go not the end of the world we can always fix this up later okay so now that we've got this we just want to output the response body we're going to do this inside of a text area that we can't modify because it's going to make sense for us to be able to select things and scroll a little bit easier so we'll

02:03

go ahead and add some styles to this in fact let's bind in the value of this first so that is just going to be from the check and the response body that's pretty much it so if we just view this there we go we've got the response body in there but of course we can modify this and it's not styled up properly so the first thing we'll do is add in a read only of course and then over in

02:23

our classes let's add in a border and let's set this to rounded just say medium and we'll set the width to full and we'll specifically set the row count on the text area itself so that looks a lot better we can't modify this now but we can scroll down we can still select stuff if we need to grab any of the response we get back from that and for viewing our response body that is pretty much it

Episode summary

In this episode, we focus on setting up a simple modal to display the response body when you click on a certain button (like 'Add Site') in our app. We've already integrated the view-final-modal package earlier for the site selector, so we're building off that foundation for a quick solution.

We start by reusing some modal code we had before, trimming out the unnecessary form fields since all we need now is a way to show the response body. To control when the modal appears, we introduce a new reactive ref in Vue called showResponseBodyModal, and tie this to the open/close state of our modal.

Clicking the button sets this to true, and boom – the modal pops up with our response body. We do note that this current approach means a modal component gets rendered for each response (not super optimal if you have a ton, but it's fine for now).

For displaying the response body itself, we use a textarea. We bind the value from the response, make it readonly (so users can't edit), add some simple Tailwind CSS like borders and rounded corners, set the width to full, and specify the number of rows for a clean look. Now when the modal opens, you see your response in a nice, scrollable, uneditable text area—easy to select and copy from if you need. That's all for viewing the response body in a modal!

Episode discussion

No comments, yet. Be the first!