In this episode, we work on enhancing our dashboard table by showing the most recent status for each endpoint and color-coding it for clarity—green for up, and red for down. We start by making sure our enum values are all valid, which prevents random errors when displaying frequency values.
Next, we set up a new API resource for our checks so we can easily pull in info about the latest check for each endpoint. This involves including things like the response code, if the check was successful, and making a handy isSuccessful
method for easy color-coding.
We update our component to actually display the status, making sure it falls back gracefully if there's no check yet. Then, to give the status more meaning, we map response codes to their readable status text, like "404 Not Found"—using Laravel's integration with Symfony for a quick win.
For timestamps, we refactor a bit so date and time data is always presented consistently across the app, and you learn how to show that in a human-friendly way (like "10 minutes ago"). By the end, our dashboard can show the latest status for each endpoint, highlighted in red or green, and includes both the status code with readable text, plus the date/time of the last check. Much more useful at a glance!