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
15. Displaying endpoints
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
The goal in this episode is to just output our endpoints just underneath this form. So we're going to go underneath this form here and we're going to go ahead and create out a div
00:11
which will just have a margin top of 8 just to space things out. So this is where the endpoint list is going to sit. So we have some pre-made markup here for the table. Let's just start with the header though.
00:26
So we're going to say currently monitoring and in here we're going to say x and just add the number of endpoints that we're currently monitoring. We don't have them out in our props just yet but we'll do that in a minute. So for this let's just add some simple styles to this.
00:44
Pretty much the same styles that we've added to every other header. Text gray 800 and we'll set the leading to tight. So if you grab the markup for the table in the course downloads, go ahead and paste this into here and let's just go ahead and make sure we indent this.
01:03
It's basically just a standard table that we've styled up here and there we go that should be looking good. Great! Okay so if we head over that is what it looks like.
01:13
So we've just got the headers at the moment and what we're going to do is we're going to fill in for every single endpoint a separate component. The reason that we're adding the data in every single row as a separate component is because each of these will be editable.
01:29
We'll be able to delete them and it's going to be much easier to do that from an isolated component. So we'll go ahead and create the component out now, add the markup to that and then we'll start to access our endpoints and iterate through them. So we're going to go ahead and create the endpoint here inside of our components directory
01:50
and of course go ahead and create a template out. And once again let's go ahead and just add some pre-made markup to here which is available in the course downloads. So let's just fix that up and we'll go ahead and add this component over here.
02:03
Of course not iterating through anything just yet but we'll go ahead and see all of these listed when we get to that point. So let's go ahead and pull in this endpoint component and we should see a bit of data within our table.
02:18
So of course we've got the location which is going to click through to the more detailed view of the location, the frequency, the last check, the status, the uptime percentage, and we have our action buttons just here.
02:30
So of course what we want to do now is head over to our dashboard controller and actually pass down the endpoints. Once again we are also going to need an endpoint resource for this so we can transform the data nicely.
02:45
So let's create that out first. So we'll go ahead and say phpArtisan make resource endpoint resource. We've done this a couple of times already. Let's open up that endpoint resource so we have it
03:01
and let's head back over here and output all of the endpoints under that resource. So endpoint resource. This of course is going to be a collection of multiple endpoints and we're just going to go ahead and say site endpoints.
03:15
That's pretty much it. So we can head over to our endpoint resource and just start to output some data about this. So let's just start with the id
03:23
and then we'll fill in the rest of the stuff as we need it. Okay so over in our dashboard template now we want to accept the endpoints in and remember that's going to be an object and then if we come up to our endpoint here
03:40
we can say v4 endpoint in endpoints.data we can key this by the id and we can pass through the endpoint as a prop to this component and that should be endpoint.id
03:55
Great. Okay so if we open up the endpoint here let's go down to the bottom add in our script in here and let's define the props that we want to accept through to this
04:06
which is just going to be the endpoint and because we're iterating through this and we're getting an individual endpoint for each one that's just going to be an object.
04:16
Okay so let's go and just output the id of the endpoint here just so we can see that working and if we come across there we go. So we've got six and seven under this site
04:27
and of course if we switch over to another site we don't have any endpoints for this just yet. Okay so we're going to go back over to our endpoint resource and just think about some of the easy stuff
04:38
that we can just start to extract out of here to make this look a little bit better. The first one really really easy is the location it's just plain text.
04:47
What we also want is the frequency label and we want the frequency value eventually so we can put this into a form to edit. Let's just start with the frequency label.
04:58
Now remember this comes from an enum. We want to take the value that's stored in the frequency in the database here and transfer transform it back into a label that we can output in the UI.
05:11
Now to do this we use the endpoint frequency enum and we use from so that's going to take it from one of the individual values. If we just open up the endpoint frequency
05:25
we want to take this value grab the enum that represents this value and then call label on it. So we want to say from this frequency and then from there grab the label.
05:41
Now in terms of the rest of the things that we want to output here we don't quite have all that yet. We don't have any checks so we can't calculate the uptime.
05:50
We don't have the last check information just yet because we don't have any checks and we don't have a last status either. So let's just output the location properly
05:59
in the frequency and we should be good. So if we come over to the endpoint the location is now going to be the endpoint location and the frequency is going to be
06:09
the endpoint frequency label. Let's come over and there we go. Sure enough we've got our location and frequency nicely outputted.
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!