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

06. Setting the default site

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

Before we move on to our modal functionality here, let's take a look at our dashboard when we just hit it without an id. Well at the moment we're just getting through

00:10

a empty model here because we're not passing through a site so our resource is showing us an id of null and a domain of null which is not good. We want to show the default site here with the name that we have and the default site as we added to our database just here is going to be the site that we last accessed. So over in our dashboard controller we want a

00:33

little bit of logic to first of all go ahead and set the default site to true whenever we switch over to it and second of all grab the site that we should be showing in the template. So the first thing that we want to do is whenever a site is accessed we want to go ahead and update this site and set default to true. So let's go ahead and do that now and let's take a look at

00:54

how this works. So if we just come over here to dashboard slash one and we go over to the database sure enough that's been set to true and of course as you would imagine if we set the id to two that switches the default here to true as well. Now the only issue with this as I'm sure you can see is that both are now set to true. That's not what we want to happen. What we want to happen

01:15

is the site that isn't selected as default to be set back to false. We'll handle that in a second but for now what we want to do is pick the site that we want to show. So the first thing that we want to do is check if we have a site that we've passed in that doesn't exist. Now what do I mean by this? Before we do the if statement let's just die dump on the site. Now if we head over to site

01:39

two you can see that under the properties here exists if we can find it is true. Now if we go over to one that is also true. I've lost it again. There we go. But if we head over to dashboard without an id exists is false. So effectively what we want to check is has an id been actually passed into here. Now there's a load of different ways that we can do this but I just think this is

02:06

a little bit of an easy way to check this. So if the site doesn't exist that means we have not actually chosen a site. So we need to add something in here to pick a site based on where the default is true. So then what we do is we overwrite the model that's been passed in and we go ahead and from the authenticated users sites which we haven't set up yet we want to say

02:34

where default is true. Now we need to modify this slightly in a minute but really the first thing we want to do is head over to our user model and just set up a relationship here because we know that a user has many sites. So let's go ahead and say has many and site like so. Okay let's just test this out by just dying and dumping here on the site and of course what we're going to see now

02:58

when we head over to the dashboard is if we just go ahead and say first will be a site. Now both of them are set to true at the moment in terms of the default values that we have here so this isn't really reliable at the moment but at least now when we're heading over to our dashboard without specifying an id we actually get a site that we can display so this is a massive improvement over

03:24

what we had before. Now what we want to do is add a sort of fail safe to this because if for example at some point for some reason both of these are set to false it's probably not going to happen but if that is the case then we're actually going to see a null value in here which isn't going to work we're not going to be able to construct a resource from that null value. So what we want to

03:46

do is if that fails for any reason what we want to do is just grab the first site for the user so that just is a kind of sensible fallback for if this check here fails. So if we go over and give that a refresh now both of these are set to false but we actually get something back in here which is really helpful. Okay so now that we've done this let's get rid of the die dump and let's head

04:09

over to our dashboard you can see that this is just picking out cocourse.com as the first site for the user and if we head over to one that's going to set the default of cocourse to true or if we were to have the default as alex.gs and we didn't provide an id that's going to pick out alex.gs because our logic is picking out where default is true. Now the only issue we have is

04:34

this is set to true but if we navigate over to cocourse that's also now set to true. So what we want to do is have some way of determining when a site is updated set all of the other sites to have a default of false so we're always switching this over and we only ever have a default of true on one of the sites that we have. Now to do this we can head over to the site model and we can set

05:02

up an eloquent observer to check when a site is updated we want to set all the others to false. Now we'll do this over in the model first of all and then we're going to switch this over to an observer. We'll make use of observers just because they're a little bit cleaner and they're away from the model. Now to do this within the model we're going to set up a static function in here called

05:23

booted that's when the model has been booted and we're ready to start listening. So we're going to say static updating so when a particular site is being updated we're going to do something with this site so the logic for this is is the site being updated to set default to true that's what we want to figure out if that's the case what we then want to do is grab all sites where the id

05:54

doesn't equal the site that we're updating and then we want to set the default to false so basically set the default to false for all of the sites we're not updating now just to demonstrate this let's die dump updating just so we can see that this is actually working if we head over to site two that's not actually working so let's have a look at why that might be okay it's probably just

06:22

because these are both set to true so let's go ahead and set these both to false so if we head over to here yeah there we go we get updating so we know that that eloquent observer is being triggered now what we want to do is check if we have a default being set to true so what we do here is a little if statement and we're going to say in array default and we're going to find out

06:50

if that is within the keys of the dirty version of this model so i'll explain this a little bit more in a second so we're going to say get dirty now let's just take a look at get dirty on its own and just dump this out so you can see what this is actually doing so if we head over to site one there we go so these are the sort of dirty values that haven't yet been persisted to the

07:16

database that have been changed and we know that default is being changed in this case because we're doing that within the controller so we basically want to check is default being changed that's pretty much all this if statement is doing well if that's the case then what we want to do is from the site grab the user grab all the user sites sort of backwards so we're going back to

07:39

the user then grabbing all of the user sites and we want to say where the id isn't this current site so basically grab all other sites except this one that's being updated then what we want to do to all of them other sites is update them to set the default to false so basically grab all the sites where the id isn't this current one and set the default to false so we've pretty much done

08:04

everything we set out to do in here okay so let's go over to our code course site and let's head over to the database that's true and that's false let's head over to an id of two and there we go they practically switched around and now alex.gs is default and of course code course isn't if we had say 10 other sites in here all of the others will be set to false as well so we're basically

08:28

just switching these around now now if we head over to our dashboard that's going to pick up the default site so that's going to be alex.gs so let's go back over to here and sure enough we have it here and that's not being affected because we've not actually passed a site in okay so the last thing that we're going to do is just switch this over to use an observer rather than do this directly

08:51

within the model how do we do that this is completely optional but we're going to go ahead and just make sure we are writing this out so we're nice and tidy so we're going to go ahead and make an observer and we're of course going to call this site observer now we can either pass a model into this to scaffold it for us but i'm not going to do that i'm just going to manually add

09:09

the methods in here just because otherwise we have to delete a load of code so we're going to go and just grab everything we did in here we're going to get rid of this booted method and we're going to go over to the site observer now the site observer on its own just looks like a class but what we can do here is create out instead of that static check we're going to go ahead and

09:31

create an updating method and accept the site directly into here and really all we need to do is just pull in the site model we can paste in what we've got in here and that's pretty much that switched over to an observer now to register this observer we're going to go over to our event service provider and we're going to come down to this boot method we're going to go ahead and say

09:53

site and we're going to say observe and we're going to pass in our site observer into here and we're done let's just make sure that we pull in the namespace for the site model and that's it so rather than doing that directly within the model now we've moved it outside of the model okay let's just check this is all working so i'm going to go ahead and head over to

10:14

id of one that should have switched course over to true and alex.gs over to false so now what we can do is either land on our dashboard and get the latest site that we accessed we can switch over to any of the sites that we have in here and of course they will always be kept up to date in here with the default that we last accessed

Episode summary

In this episode, we focus on improving the user experience for our dashboard by making sure there's always a default site selected and displayed—so that when you load the dashboard without specifying a site, you see something sensible, not just a blank or broken page.

We start by noticing that if you hit the dashboard with no site id, you just get empty/null values. That's not helpful! So, we build logic to automatically show the default site for the user. We make sure that when you access a site, it's set as the default. BUT, we also catch a potential bug: more than one site could end up as default. To fix this, we ensure that when a site is set as default, all other sites for the user get their default flag set to false—so only one default at a time.

We also add a sensible fallback—if, for any weird reason, none of the sites is set as default, we just grab the first site for that user. This keeps things working smoothly no matter what.

Then, to tidy up our code, we wrap this default-switching logic into an Eloquent observer instead of putting it all in the model. That makes our codebase more organized and easier to manage.

By the end of this episode, no matter how you load the dashboard or switch between sites, you always have a single default site picked and displayed properly. Plus, all the code to ensure this is neat and reusable. Handy!

Episode discussion

No comments, yet. Be the first!