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

11. Creating the endpoint form

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

The first thing that we need to do to create an endpoint is actually replace the data we're just

00:04

dumping here with an endpoint creation form. So we're going to go ahead and fill that in here and then in the next episode we're going to look at actually storing an endpoint. And remember for this endpoint form that we're going to be creating we also need to iterate through them enum values that we've just added to our endpoint frequency enum. So to get started

00:25

let's actually get rid of this entire thing here we don't really need that and we're going to go ahead and just create out an h2 in here saying new endpoint and then underneath this we can put the form. So let's add some styles to this header very quickly so let's go for a semi-bold font we'll make the text large make the text gray and we'll set the leading to type just so we

00:46

get a little bit of spacing. So there's our header and then of course directly under this we're going to go ahead and add in our form. So let's get rid of the action we're not going to need that I'm going to go ahead and add some styles to this but I'm going to copy and paste these over of course these are available in the course downloads if you want to go ahead and grab

01:05

them or just copy them. Okay so inside the form we're going to go ahead and create our section on the left with the input and the input error and then we're going to create another section just underneath that or next to that which is going to have the select and then down here we're going to have the primary button so we could just go ahead and add that in very quickly now primary

01:28

button we've already looked at pulling that in and in here we're just going to say add so let's just check I don't think we have that component on this page we don't so let's go down or up in this case and go ahead and import that primary button from our component section great so that should now show us the button and now we just need to fill in the rest of the data in here so let's start

01:53

with the easy part that's just going to be the input so let's add in an input label which we'll need to import as well and this is going to be for the location so the actual endpoint that we want to hit set the value here to location and let's capitalize that and once again we're going to set this to have a screen reader only class because we don't want to see it so let's set text input

02:17

in here as well again we've already seen this before and the id for this is going to be location the type of this is just text and let's add some very simple styles in here we'll just say width full give that a height of nine and we'll make the text small placeholder in here is just going to go ahead and give us an idea of what we want to do in here so for example pricing

02:38

and let's go ahead and not introduce our input error just yet we'll do that when we get to actually submitting this through but we do want to go ahead and put in these two components so we actually see something here so this is going to be the input label and this is going to be the input or text input okay so that's looking like that not great at the moment so what we're

03:01

going to do is for this outer class here this one just here or this first class we're going to go ahead and set grow on here we've got flex on this form that means that that's just going to push everything across to fill up the remaining space okay so lastly we're just going to pop the frequencies drop down inside of this div just here so let's go ahead and create a select out

03:24

we'll give a name of this frequency an id of frequency and we can also go ahead and add in an input label for this as well make this hidden frequency and that's going to be frequency as well okay and that should be just about it let's add a couple of fake options in here just to get us started we'll just add one in there and at the moment it looks like that so

03:51

not great at the moment so once again i'm just going to go ahead and grab some pre-made classes for this which you can grab from the course downloads there we go and that's it so that's what it's going to look like but of course what we need to do is actually pass in the values for our frequencies and i'm going to show you two ways that we can do this because we're going to need

04:15

these frequencies in various parts of our application the first thing that we're going to do is pass these down directly to the dashboard and then we're going to create them as an inertia global that we can access from anywhere so let's start with the simple one that's going to be over in the dashboard controller and with the data that we have here we're just going to want to pass down

04:35

these endpoint frequencies like so so how are we going to do this well like the other data that we've created here even though we're dealing with an enum we can still create an api resource to represent these so let's go ahead and make out a resource in here and let's call this endpoint frequencies or frequency that would probably make a bit more sense resource so let's create

04:58

that resource out and go ahead and open this up like so okay so we want to go ahead and pass out enum into this or the cases for this and then we want to obviously represent these like we've done with our standard laravel collection data so let's go over here say endpoint frequency resource we want to go ahead and use a collection again and we want to reference the endpoint frequency enum

05:24

but this time what we want to do is use the cases method on this enum this is all built into php it's nothing to do with laravel cases will return to us an array of all of the enums individually inside of here and when we look at an enum here when we access this this gets represented back to us as an enum so each of these things that we're iterating through are enums in themselves so now

05:49

that we've got that passed in we just need to access the values in here like we normally would so the frequency itself is going to be the just the value of this so let's start with that and then we'll go back to our enum because we're going to need to find a way to grab the labels that we can use inside of the ui so let's just check that this is working first of all we're passing this

06:11

down as endpoint frequencies so let's go over to our dashboard and let's go ahead and accept this into here as an object as we normally would and once again let's just dump these out on the page we'll just do this up on here so endpoint frequencies and let's see what we get so let's give that a refresh and there we go you can see all of our frequencies here represented in seconds

06:33

that of course now we can iterate through and show inside of this input so let's go ahead and do that now and then we'll update this so we can see a nice label so down here inside of these options this is what we want to iterate through so let's not wrap that in a template let's do it directly on the option so we're going to say v4 frequency in endpoint frequencies and remember

06:56

data the key here can just be the frequency because these are always going to be unique so let's grab the direct frequency from that frequency in the iteration the value we need to bind in and that's going to be the same thing so it's going to be frequency dot frequency so we can bind that in nicely and just for now let's output the actual frequency inside of here so if

07:17

we come over now you can see we've got all of the frequencies in here in this list really nicely so what we're now going to do is set this up so we can get a label from our enum based on what value we're working with and then we'll move this over to a global inertia value that we can access from anywhere so to be able to get inside of here the label which is what we want to show on the ui we

07:41

want that to look like something like one minute we need to update our enum so let's leave that as one minute for now and go over to our enum so what we can do on here is for every single enum value we can actually call a method on this so let's go ahead and create out a label method make sure we go ahead and define this out returning a string and then we're going to

08:02

go ahead and use match on let's just pull this down this now this refers to either this this this or you guessed it this so not the entire thing so this can be either one minute five minutes 30 minutes one hour or any of the other values that we add in here and what we want to do is go ahead and return for one minute a value of one minute

08:33

and we want to do that for each of these cases five minutes and we want that to show five minutes and these can say anything you want doesn't have to be what i'm writing here and 30 minutes is of course going to be 30 minutes or you could write half an hour and of course one hour is going to say one hour so that is pretty much the label that we can use to access based on the individual

08:59

enum that we're working with so how do we use this well if we come back over to here we access this value which gives us the raw value here but now what we can do is say this label easy as that so if we go over to our dashboard and just dump these values out here again and see what we get we now have a label for every single one which we can update within our form

09:27

so let's go down here and output the label for this and there we go one minute five minutes 30 minutes and one hour and just to demonstrate how powerful this is if we come over to our endpoint frequency enum if we wanted to add two hours here we could easily do that and then we could add in two hours and of course write two hours and then that's it now this once

09:56

we get to use this for validation will mean that we don't need to update any validation rules we don't need to update the ui because we're already iterating through each of the predefined values that's already in there for us and it will be validated once we start to use this enum so let's get rid of two hours for now because we don't too many values in here but that is now

10:15

our enum using to output through and output our ui as well okay so the last thing that we're going to do is on the dashboard controller move the endpoint frequencies over to a global inertia value what that's going to allow us to do is use this value anywhere there are lots of different places on the ui that we're going to need to access endpoint frequencies so it makes sense

10:38

to put it in a global location so we're going to go ahead and get rid of this from here of course that's going to completely break this it's not going to show them values because we don't have them and we're going to come over to the handle inertia requests middleware over in app http and middleware and we're going to come down to this share section here now this already contains a

10:59

few things that we get with the breeze boilerplate but we can just easily add as many as we need to here obviously not too many or it's going to slow things down so i'm just going to go ahead and paste that in there and of course pull in the namespaces for our resource and our enum and that's it so if we head back over to the app you can see that this is working as normal what you can also do though

11:21

is if you come over to dashboard and you get rid of this from your props in your page you might not want to define it there you can also directly access this so now we've got rid of the prop and we give this a refresh it's not going to work but what you can do if you want to is you can access this via page props value and then the endpoint frequencies data now page is going to be a

11:47

composable that is used within inertia so if we come up to here we can go ahead and import and let's just see what else we're using here use page from inertia view three and then down here somewhere we can say page equals use page now i'm going to go ahead and console log out page so you can see what it has in it and if we go over to the console

12:16

we've got all of the props that are being passed down if we go over to value and target you can see we've got all of these in here so that includes the ones that are being globally shared and the ones that are just being passed down to this component they're all lumped together as well as loads of other information you can access from here but that's another way that

12:36

you can do this if you don't want to add that to define props and you want to make it clear that this is coming from a global it's entirely up to you i'll leave this in here because this can be useful anyway okay so our endpoint form is created we're outputting our enum values all that's left to do is hit add and make sure we have the functionality to actually add an endpoint

Episode summary

In this episode, we tackle building the "New Endpoint" form! We start by swapping out the placeholder data for a real endpoint creation form that users will fill out. Along the way, we style the form for a decent look, import needed components like a Primary Button, Input Label, and Text Input, and arrange the layout so it's user-friendly.

We focus on the dropdown for endpoint frequency, which leverages enum values defined earlier. To power this dropdown, we discuss two ways of providing the enum data to the form: either by passing it through props from the Dashboard controller or by exposing it globally via Inertia's shared data for access anywhere in the app. This helps keep our code clean and ensures the frequency values are always in sync everywhere they're needed.

Then we add a method to the enum to generate user-friendly labels (like "One minute"), so the dropdown isn't just a dump of raw values. You'll see how effortless it is to change, add, or remove frequency options just by updating the enum—no more hunting through your codebase!

Finally, you'll learn how to access shared/global data from the Inertia page object, removing the need to pass everything down as props. By the end of this episode, your form's UI is ready to go, wired up with all the right fields and dynamic values, and we're all set up to handle submissions in the next video.

Episode discussion

No comments, yet. Be the first!