Build An Uptime Monitor with Inertia
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
04. Building the site selector dropdown

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
6m 33s
0%
02. A fresh Inertia project
6m 7s
0%
02. Sites
03. Site and dashboard setup
8m 59s
0%
04. Building the site selector dropdown
12m 22s
0%
05. Making use of API resources
4m 14s
0%
06. Setting the default site
10m 37s
0%
07. Setting up Vue modals
4m 34s
0%
08. Creating a site
18m 18s
0%
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%
05. Queuing
31. Setting up queues
3m 21s
0%
32. Queuing the endpoint check
7m 26s
0%
06. Email notifications
33. Setting up email in Laravel
5m 8s
0%
34. Site model email notification storage
3m 5s
0%
35. Adding email addresses via the UI
17m 24s
0%
36. Listing and deleting email addresses
7m 14s
0%
07. Downtime notifications
37. Observing when to notify
10m 51s
0%
38. Creating an endpoint down notification
10m 46s
0%
39. Creating an endpoint recovery notification
8m 9s
0%
40. Making the emails a bit friendlier
3m 50s
0%
08. Extras
41. Deleting sites
5m 9s
0%
42. Eager loading
4m 44s
0%
43. Recovery notification bug
2m 31s
0%
44. No sites fix and placeholder
3m 25s
0%

Transcript

00:00
Before we look at switching sites, let's build the nice little drop down here, which gives us a list of our sites and also the link to create a new site.
00:09
Now we're going to do this using the floating view package. Of course, because we're working in view means we can pull in pretty much any plugin or package that we want to use. So this is what we're going to be using. Let's head over to the quick start here and go over to installation.
00:23
And let's go ahead and use npm to install floating view. So let's go ahead and pull that in. And what we're going to do is, once that's finished, head over to app.js in resources and JS. We haven't looked at this yet, but if you are new to Inertia,
00:39
this is pretty much where everything is set up here. You can see we're passing in or pulling in create Inertia app. It's going ahead and creating that for us, grabbing the current page that we want to see. That's how that's working with the connection between Laravel and view.
00:54
And it's going ahead and creating a view app here using the plugin for Inertia. And it's going ahead mounting that to the page so we can see everything. Now, in between here, what we can do is just use different plugins. So now that we have pulled in floating view, we're going to go ahead and, first of all,
01:14
import the styles. So let's go into floating view dist and styles. Let's find this style.css. And we're also going to go ahead and pull in that package as well. So import floating view. And that is from, as we would guess, floating view. So we've now got this in here. And what we can do is just use it as a plugin within view.
01:40
That's going to register all of the components for this dropdown that we can output to the page. So let's do that first of all. Now, we're going to head over to our dashboard component here. And we're going to go over to our header.
01:52
We want this to be on the right side of the screen just over here. So what we can do in here is just wrap everything within a div. And then we're going to go ahead and set a class on here to flex item center. We're using Tailwind CSS here as well.
02:09
And we're going to say justify between. Just an easy way to separate out two things, left and right. So if we head over, you can see that we've got that potential site selector on the right hand side. So this is where the site selector is going to go.
02:25
Because we're going to be using this on multiple pages, probably be a good idea to add it to our component section. Now, I'm not going to categorize these. I'm just going to pop it straight in here.
02:33
But feel free to categorize this as you need. So again, because we're working with view, we can just very easily create out a new component in here. And I'm just going to write site selector in here.
02:45
We're going to head back over to our dashboard. And we're going to go ahead and add that site selector in. And then we can go ahead and import this. So if we just go up to the top here, let's go ahead and import site selector.
02:58
And we're going to pull that in from at, which is the root. And then we're going to go into components. And then we're going to put in the site selector here. So just like you would do in a normal view app.
03:09
So if we head over now, we've got that site selector component in there, which we can reuse on other pages if we need to. OK. So now that we've done that, let's go ahead and build out the
03:19
base markup for this site selector just so we can see it working. So for this, we want to go ahead and define out our script section just down here. Because we need to import the component for the dropdown itself. And this comes from that floating view package.
03:35
In fact, we don't even need to import it because the plugin has registered these. But we'll keep our script section there anyway, because we're going to need that a little bit later on. So this component or this element here is now going to become VDropdown.
03:48
That's the name of the component that we want to use. And if you check out the docs for this, we can set lots of different things here, like the distance from the element that the dropdown appears at. Now, the main component that we want in here will be the button that we use to activate this.
04:04
So I'm just going to write open in here for now. And we're going to go ahead and just give this some style. So I'm going to say flex item center. Because we're going to have a little icon in here as well.
04:14
We're going to say space x2 to separate out the icon from the text. And we're going to set the text to small. Now, it's not going to have too much effect at the moment. It just looks like this.
04:23
Now, when I click on this, nothing's happening. Because we haven't defined out within here the content of the dropdown itself, or the popper itself. So for this, this is just a slot.
04:33
So we're going to go ahead and add in a template in here. And we're going to say popper. That's pretty much it. So this is the dropdown.
04:42
So we've got our button to open it. And this is the content of the dropdown. So now, let's click on this. And there we go.
04:49
Just looks like a standard popper that you would see anywhere. Now, of course, what we want to do is just fill this in with everything that we'd want to see. So let's style out our open button a little bit more. So we've got our button in here.
05:03
What I'm going to do is add in a span here with select a site. And let's go ahead and add in some styles for this as well. So let's say text gray 500. And when we hover over this, let's say text gray 700.
05:16
And then we're going to add an icon just down in here. Now, I'm going to grab this. But I'll leave these in the course resources for you. So you can grab this and paste it over.
05:25
It's just an SVG from a SVG icon collection called hero icons. So if we head over now, we have this. And that is the little chevron down to select the site. And there we go.
05:37
That's pretty much all we need for the button. Now, for the popper itself, we want an unordered list of items here. So let's start by creating out an unordered list. And we'll give this a class of space y1 or minus space y1.
05:51
We'll see why in just a second. So we're going to add in a list item in here. And let's just hard code these in for now just so we can style them out and see how they look before we actually output our list of sites.
06:01
So I'm going to have a list item here with Cocos.com and Alex.gs. Now, inside of here, these are going to be links because we want to link these through to dashboard. This is going to go through to dashboard one.
06:12
This is going to potentially go through to dashboard two with the ID of the site that we want to select. So these are actually going to be links. But how do we define links within Inertia?
06:22
Obviously, in blade templates, we would just go ahead and add in an href, an a with an href, so an anchor in here as we normally would. But within Inertia, we use the link component. So we use link.
06:34
And then we go ahead and define the href in here like this. So let's fill this in with Cocos.com. And the href is going to be dashboard slash. And then the ID here of the site that we want to go through to.
06:48
So in this case, what we want to do is not do that for now because we don't have any kind of dynamic data. We'll just leave this styled like this as it is or set up like it is. And let's hard code this as dashboard two.
07:00
We'll switch that over when we pass our list of sites in. Now, where does this link component come from? Well, if we just come down to our script section here, we can go ahead and import link. And this is going to come from Inertia.
07:14
We just get rid of that. So autocomplete. And it will be the Inertia view three package. So what we'll see here in our dropdown are just two links that both go through to the
07:25
dashboard that we've seen. One of them is going to 404 because the ID of two doesn't exist. So that just errors. But of course, that's going to be fixed up when we actually have a site with that ID
07:35
in there. Now, with these, we can just style them in any way that we want to. So once again, let's just go ahead and add some styles in here. Let's say a padding x of four and a padding y of two just so we can separate these out
07:47
a little bit. And we'll also go ahead and set an hover here to set the background to a gray 100 just so we can see what we're hovering over. I'm going to set these as blocks, text as small, and we'll set the text to gray 500.
08:01
And once again, let's when we hover just to keep some consistencies, set the text gray to 700. So we're actually going to copy this down here, switch this over to two, and change this over to alex.js.
08:14
Of course, we're not going to have this duplication when we actually pull in a list of sites. So there we go. That is our list of sites that we have. Now, just going back to why we did minus space y1, if I get rid of this, it kind of looks
08:28
like it's a little bit too spaced out. You can see that just here. It looks like there's a little bit of odd spacing between here. When we pull this in, the spacing between these two sort of overlaps.
08:38
So it creates more of like a unified padding. So just a little UI tip there if you wanted to do that. Okay. So we've got our dropdown with our sites in that we've hard-coded just at the moment.
08:50
Before we pass them in, let's just finally create out a button here, which is eventually going to add that modal where we can create a site. So let's go ahead and just say add a site. And we'll just really quickly add some styling to this.
09:04
So let's say block with a width of full. We'll set the text to left because the button by default will send to this text. And we'll set a padding on the x-axis of four, padding on the y-axis of two just to keep some consistency with the links above.
09:20
A background of gray 100 when we hover. And we'll set the text to an indigo, which kind of matches the theme of the standard Laravel install with Breeze. We'll set the font to bold and the text to small.
09:33
And we should pretty much be done. Let's just check this out. And yeah, there we go. So this looks pretty much exactly like these two options, just a bit bolder and with a
09:42
color. OK, so last and most important step is to actually pass down a list of the sites that we have so we can output them into here. Now, over in our dashboard, what we're going to do is we're going to pass down a list of
09:56
the sites to our dashboard. And then we're going to pass these into the site selector as a prop. So first things first, if we head over to our dashboard controller, we're going to go ahead and pass down a list of our sites.
10:08
So we'll keep that site in there. But we're going to pass down all of our sites in here like this. Now, we're going to refactor this to use an API resource. We're not going to leave it like this, as I mentioned a couple of parts ago.
10:21
But let's just play around with this for now to see what we can do. So we pass down a prop, technically, to this component. Over in our dashboard now, what we would need to do is set sites here and as array because that's going to be an array of items based on a Laravel collection.
10:38
And then we're going to pass the site into this site selector as a prop. And then, of course, over in the site selector, what we're then going to do is also define the props that we want to pass down into here or that we are going to accept into here. So that's going to be an array of sites.
10:53
So now what we can do is we can iterate through instead of duplicating this list item. So we're going to go ahead and add a v4 onto this list item. And that's going to be site in sites. Then we're going to add a key, which is going to be the site ID because when we iterate
11:11
in view, we require some sort of unique item for this. And to be honest, that should just about do it. What we should now just see is one option in here. Now, for the sake of just testing this out, I'm going to go ahead and duplicate this down
11:24
and I'm going to add Alex GS in here. Hit save. And if we come over and give this a refresh, we've got two items. Now, of course, we're just hard coding code course in here.
11:33
But changing this up is just as easy as referencing the site and then the domain. And then here we want to switch out the ID. So now what we're going to do is actually bind in a string. And then we're going to replace out in here with the site ID.
11:47
So that means, of course, when we click that, it's going to go through to the correct site. So if I click CodeCourse.com, sure enough, we're on dashboard slash one. If I click Alex.gs, sure enough, we're on dashboard two. And of course, all of the information is just updated with the site that we have now selected,
12:04
which, of course, we're going to show up here and show the endpoints for the site and everything else. OK, so now that we have the ability to switch between sites here, we now want to look at API resources and how they're going to make handling this kind of data a lot cleaner.

Episode summary

In this episode, we focus on building a site selector dropdown in our dashboard, which will let users easily switch between their different sites or add a new one. We start by integrating the floating-vue package to give us a slick dropdown experience, and walk through how to install and set it up in our Vue (with Inertia) project.

We work right inside the app's JavaScript entry points and components, showing you where to import the plugin and its styles, and then wire it up as a Vue plugin. Then, we create a reusable SiteSelector component, making it super easy to drop the site selector wherever we want in our app.

After that, we build out the markup for the dropdown button and its menu, using Tailwind classes for styling and pulling in some SVG icons for that polished feeling. We initially hardcode a couple of sites in the dropdown to get the structure and styling just right, including making the links Inertia-friendly using their Link component.

We also add a button at the bottom to "Add a Site" — this is where users will eventually open a modal to create a new site. Don’t worry, we only make things look and feel right for now.

Next, we wire things up to the backend: we pass the real list of sites to the Vue component as a prop, iterate over it, and make sure each site in the dropdown links to the right dashboard page. We show you how to tweak the URLs, use site IDs, and update the UI instantly.

By the end of the episode, you’ll have a fully working site selector dropdown that’s flexible, reusable, and looks great. Next, we’ll look at how API resources can help keep your data clean and manageable!

Episode discussion

No comments, yet. Be the first!