+26

apps/dashboard/src/app/(dashboard)/cli/page.tsx

··· 213 213 </Section> 214 214 <Section> 215 215 <SectionHeader> 216 216 + <SectionTitle>GitHub Action</SectionTitle> 217 217 + <SectionDescription> 218 218 + We provide you with a github action in case you'd like to use the 219 219 + CLI within your CI/CD workflows. Check the{" "} 220 220 + <Link 221 221 + href="https://github.com/openstatusHQ/openstatus-github-action" 222 222 + target="_blank" 223 223 + rel="noopener noreferrer" 224 224 + > 225 225 + GitHub integration 226 226 + </Link>{" "} 227 227 + page or our{" "} 228 228 + <Link 229 229 + href="https://docs.openstatus.dev/guides/how-to-run-synthetic-test-github-action/" 230 230 + target="_blank" 231 231 + rel="noopener noreferrer" 232 232 + > 233 233 + guide 234 234 + </Link>{" "} 235 235 + to to run synthetic tests in a GitHub action. 236 236 + </SectionDescription> 237 237 + </SectionHeader> 238 238 + {/* TODO: add code example */} 239 239 + </Section> 240 240 + <Section> 241 241 + <SectionHeader> 216 242 <SectionTitle>Templates</SectionTitle> 217 243 <SectionDescription> 218 244 We have a few templates to help you get started. Check the{" "}

-2

apps/dashboard/src/app/layout.tsx

··· 1 1 import type { Metadata } from "next"; 2 2 import { Geist, Geist_Mono } from "next/font/google"; 3 3 import "./globals.css"; 4 4 - import { DevelopmentIndicator } from "@/components/development-indicator"; 5 4 import { TailwindIndicator } from "@/components/tailwind-indicator"; 6 5 import { ThemeProvider } from "@/components/theme-provider"; 7 6 import { Toaster } from "@/components/ui/sonner"; ··· 61 60 disableTransitionOnChange 62 61 > 63 62 {children} 64 64 - <DevelopmentIndicator /> 65 63 <TailwindIndicator /> 66 64 <Toaster richColors expand /> 67 65 </ThemeProvider>

+1

apps/web/next-env.d.ts

··· 1 1 /// <reference types="next" /> 2 2 /// <reference types="next/image-types/global" /> 3 3 + /// <reference types="next/navigation-types/compat/navigation" /> 3 4 4 5 // NOTE: This file should not be edited 5 6 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/public/assets/posts/new-dashboard-we-are-so-back/dashboard-after.png

This is a binary file and will not be displayed.

apps/web/public/assets/posts/new-dashboard-we-are-so-back/dashboard-before.png

This is a binary file and will not be displayed.

apps/web/public/assets/posts/new-dashboard-we-are-so-back/excalidraw.png

This is a binary file and will not be displayed.

apps/web/public/assets/posts/new-dashboard-we-are-so-back/us.jpg

This is a binary file and will not be displayed.

apps/web/public/assets/posts/new-dashboard-we-are-so-back/we-are-so-back.png

This is a binary file and will not be displayed.

apps/web/public/assets/posts/same-pricing-more-monitors/same-pricing-more-monitors.png

This is a binary file and will not be displayed.

+6 -6

apps/web/src/app/(pages)/(content)/layout.tsx

··· 3 3 import Link from "next/link"; 4 4 import type { ReactNode } from "react"; 5 5 6 6 - const DASHBOARD_V2 = false; 6 6 + const DASHBOARD_V2 = true; 7 7 8 8 export default function ContentLayout({ children }: { children: ReactNode }) { 9 9 return ( ··· 16 16 17 17 function Banner() { 18 18 return ( 19 19 - <div className="border-b bg-muted/50 p-2 backdrop-blur-3xl"> 20 20 - <Link href="/blog"> 19 19 + <div className="border-b bg-muted/50 px-2 py-3 backdrop-blur-3xl"> 20 20 + <Link href="/blog/new-dashboard-we-are-so-back"> 21 21 <div className="group mx-auto flex w-full max-w-4xl flex-row items-center justify-between"> 22 22 - <p> 23 23 - New Dashboard. New Pricing. We are reworking the whole experience. 22 22 + <p className="font-medium"> 23 23 + We Are So Back - New Dashboard. More Monitors. 24 24 </p> 25 25 - <div> 25 25 + <div className="text-nowrap"> 26 26 <span className="mr-1">Read more</span> 27 27 <ArrowRight className="relative mb-px inline h-4 w-0 transition-all group-hover:w-4" /> 28 28 <ChevronRight className="relative mb-px inline h-4 w-4 transition-all group-hover:w-0" />

+1 -1

apps/web/src/app/api/callback/pagerduty/route.ts

··· 1 1 import { redirect } from "next/navigation"; 2 2 3 3 - const DASHBOARD_V2 = false; 3 3 + const DASHBOARD_V2 = true; 4 4 5 5 export async function GET(request: Request) { 6 6 const { searchParams } = new URL(request.url);

+1 -8

apps/web/src/components/layout/login-button.tsx

··· 1 1 "use client"; 2 2 3 3 - import { useSession } from "next-auth/react"; 4 3 import Link from "next/link"; 5 4 6 5 import type { ButtonProps } from "@openstatus/ui/src/components/button"; ··· 9 8 import { cn } from "@/lib/utils"; 10 9 11 10 export function LoginButton({ className, ...props }: ButtonProps) { 12 12 - const session = useSession(); 13 13 - 14 11 return ( 15 12 <Button asChild className={cn("rounded-full", className)} {...props}> 16 16 - {session.status === "authenticated" ? ( 17 17 - <Link href="/app">Dashboard</Link> 18 18 - ) : ( 19 19 - <Link href="/app/login">Sign In</Link> 20 20 - )} 13 13 + <Link href="https://app.openstatus.dev">Dashboard</Link> 21 14 </Button> 22 15 ); 23 16 }

+185

apps/web/src/content/posts/new-dashboard-we-are-so-back.mdx

··· 1 1 + --- 2 2 + title: We Are So Back 3 3 + description: New dashboard - rebuilt for clarity, speed and insights. 4 4 + author: 5 5 + name: Maximilian Kaske 6 6 + url: https://x.com/mxkaske 7 7 + avatar: /assets/authors/max.png 8 8 + publishedAt: 2025-08-03 9 9 + image: /assets/posts/new-dashboard-we-are-so-back/we-are-so-back.png 10 10 + tag: company 11 11 + --- 12 12 + 13 13 + With a few days delay exactly two years ago (30.07.2023), we launched openstatus with Thibault. Today marks the day we sit together for the second time in real life and are launching the new version of the dashboard. _What a blast!_ 14 14 + 15 15 + <Image 16 16 + alt="Us celebratring the launch of the dashboard" 17 17 + src="/assets/posts/new-dashboard-we-are-so-back/us.jpg" 18 18 + width={650} 19 19 + height={575} 20 20 + /> 21 21 + 22 22 + It didn’t start from nowhere. Over the last few months, we’ve collected users feedback, worked on our product strategy and listened to our core heart: monitoring and status pages. 23 23 + 24 24 + Before diving in, if you are new - create an account - or just login with your existing one! 25 25 + 26 26 + https://app.openstatus.dev 27 27 + 28 28 + ## New Dashboard - What has changed? 29 29 + 30 30 + Let's **compare** right away: old (1) vs new (2) dashboard! 31 31 + 32 32 + <figure> 33 33 + <Image 34 34 + alt="View of the old dashboard" 35 35 + src="/assets/posts/new-dashboard-we-are-so-back/dashboard-before.png" 36 36 + width={650} 37 37 + height={575} 38 38 + /> 39 39 + <figcaption>Old Dashboard with top tab navigation</figcaption> 40 40 + </figure> 41 41 + 42 42 + <figure> 43 43 + <Image 44 44 + alt="View of the new dashboard" 45 45 + src="/assets/posts/new-dashboard-we-are-so-back/dashboard-after.png" 46 46 + width={650} 47 47 + height={575} 48 48 + /> 49 49 + <figcaption>New Dashboard with left sidebar navigation</figcaption> 50 50 + </figure> 51 51 + 52 52 + 53 53 + ### Different Layout 54 54 + 55 55 + The new design will look different to what you know from openstatus and might _look more familiar - maybe boring_. From day one, we used shadcn as our design system - back when it had just started as well. It's been in our DNA. We're keeping everything you already know, but with different color templates and the removal of the dotted background. We hope you won't miss it too much. 56 56 + 57 57 + Obviously, the biggest change on first sight is the layout: we are embracing the **sidebar navigation** to share more informations. Every individual status page or monitor will be shown there, making it easier to navigate accross entries and create new ones on the fly. They also include the status of the current entry (e.g. _active_, _error_, _degraded_) - heavily inspired by Tinybird's dashboard sidebar. 58 58 + 59 59 + Since we moved the main navigation to the sidebar, the top header now shows **breadcrumb navigation** and lets you quickly switch between subpages via a select option. 60 60 + 61 61 + We’ve also added a **right-hand sidebar** with additional information about the page you’re viewing. It’s hidden by default to avoid overwhelming you, but can be revealed when you need it – inspired by Axiom. 62 62 + 63 63 + > The products you use, inspire the products you build. 64 64 + 65 65 + We removed the top-level '_Incidents_' navigation. It took too much visual space and had little impact on how users interacted - which is normal, since we hadn’t invested much in it. We don’t want to solve everything related to uptime monitoring. **What we do want to solve, we want to solve well.** That requires focus - otherwise you start over-bloating the dashboard. 66 66 + 67 67 + Instead, each incident now lives within its corresponding monitor’s subpage. We are not competing with on-call or incident response tools. Instead, we’ll build integrations so you can pick your favorite tool. Contact us if you’re missing an integration. 68 68 + 69 69 + ### More Elements 70 70 + 71 71 + We have been collecting data that we never displayed. Sometimes you design something internally but realize users could benefit from it too. That was the case with our Tinybird `audit_logs` table (btw, proud of the implementation on [GitHub](https://github.com/openstatusHQ/openstatus/tree/main/packages/tinybird/src/audit-log)). We track: 72 72 + - From which region your monitor fails 73 73 + - When it’s degraded 74 74 + - When and to which channel we send notifications 75 75 + 76 76 + Until now, this was invisible in the dashboard. We’re adding the **Timeline Table** so you can keep track of internal state changes. 77 77 + 78 78 + But there’s more - three new visual components to help you understand your monitors at a glance: 79 79 + 80 80 + - **Timing Phase Area Chart**: Shows the full breakdown of request timing phases (DNS, transfer, TTFB,...) across all selected regions, making it easy to spot where delays are happening. 81 81 + - **Uptime Bar Chart**: Provides a more granular view of uptime, along with the number of pings we’ve sent to your endpoint and the request status (_success_, _degraded_ or _error_) 82 82 + - **Degraded Overview Card**: Highlights requests that didn’t fail outright but were still degraded, helping you catch subtle performance issues before they escalate. 83 83 + 84 84 + We’ve also reworked the **Response Logs Table**. You can now filter by custom date ranges within the last 14 days. 85 85 + 86 86 + ## New @shadcn template 87 87 + 88 88 + We are dropping a new dashboard template free to use! The [`openstatus-template`](https://github.com/OpenStatusHQ/openstatus-template) is a **full shadcn x Nextjs SPA (so BYO router) starter kit** with some dashboard components ready to use via shadcn CLI. 89 89 + 90 90 + https://template.openstatus.dev 91 91 + 92 92 + Everybody's dashboard requires some high-level components for sections, forms, action cards. That's what makes the component part of react so simple. We've been embracing the CSS pattern to name every component with a `data-slot="name"` so that the siblings, children or parent component change if the component exists. Same belongs to the `data-variant="name"` data states where you can switch between different styles. Once it clicks, you're not going back. 93 93 + 94 94 + For example is our `FormCardContent` using the following tailwind class: 95 95 + 96 96 + ```tsx 97 97 + const formCardContent = "px-4 group-has-data-[slot=card-upgrade]:opacity-50 group-has-data-[slot=card-upgrade]:pointer-events-none" 98 98 + // you should still add <input disable={LOCKED} /> within the form 99 99 + ``` 100 100 + 101 101 + That way, whenever we add the `FormCardUpgrade` component into the mix, it will automatically change the behavior of the content. 102 102 + 103 103 + >Tailwind + shadcn is faster to design as dev than starting with Figma. 104 104 + 105 105 + We are providing them to you via shadcn cli, like: 106 106 + 107 107 + ```bash 108 108 + pnpm dlx shadcn@latest add https://template.openstatus.dev/r/form-card.json 109 109 + ``` 110 110 + 111 111 + The following components are ready to be quick-installed: 112 112 + - `form-card` - inspired by Vercel’s settings cards with clear section separators 113 113 + - `metric-card` - inspired by Checkly's overview cards 114 114 + - `action-card` 115 115 + - `section` 116 116 + - `empty-state` 117 117 + 118 118 + Refer to the [README](https://github.com/openstatusHQ/openstatus-template) for more informations. 119 119 + 120 120 + **Use it, star it, share it!** 121 121 + 122 122 + ## New Dashboard - What was our approach? 123 123 + 124 124 + ### Phase 1: Vision - finding our value 125 125 + 126 126 + We had to first understand our value in this wide ecosystem and what we want to focus on. We can't do everything our users ask for - otherwise we will loose sight of our true goal: empower devs to easily monitor APIs and Websites and connect to their users if something unexpected happened. Should be simple right? 127 127 + 128 128 + Read more about how we worked on our [product strategy](https://openstatus.dev/blog/product-strategy-a-reality-check) with Emily Omier. 129 129 + 130 130 + ### Phase 2: Frontend - experimenting around 131 131 + 132 132 + Everything starts with some sketches: Reassemble all picked components from different platforms. 133 133 + 134 134 + > How big can the canvas be? Yes 135 135 + 136 136 + <figure> 137 137 + <Image 138 138 + alt="Excalidraw sketches from the dashboard" 139 139 + src="/assets/posts/new-dashboard-we-are-so-back/excalidraw.png" 140 140 + width={650} 141 141 + height={575} 142 142 + /> 143 143 + <figcaption>Excalidraw screenshot of the dashboard brainstorming.</figcaption> 144 144 + </figure> 145 145 + 146 146 + 147 147 + We started by only the frontend as full decoupled template, where we've added dummy data to not bother about the rest and fully embrace the UI/UX and iterate quicky on a lightweight nextjs project. It frees your mind from the overbloated (some call it design debt, which just naturally happens over time) vision and is much faster to run. The benefit for you? You have one more template to have fun with! 148 148 + 149 149 + >"If your product evolves fast, you should be paying this design debt every 2-3 years." - [linear.app](https://linear.app/blog/a-design-reset) 150 150 + 151 151 + We didn’t wait to update the marketing page – time is limited and waiting until “everything” is finished means it will never ship. 152 152 + 153 153 + ### Phase 3: Backend - connecting the dots 154 154 + 155 155 + We've taken a new approach, inspired by Midday to prefetch trpc queries on the server and hydrate them on the client. We've also optimized the number of procedure calls and DB calls to get data which makes it overall quicker to navigate. 156 156 + 157 157 + As we had most of the dummy data structure similar to our DB schema, it was easy to update/create trpc calls. 158 158 + 159 159 + --- 160 160 + 161 161 + Big thanks to all early testers that provided incredible feedback and helped us shape the new dashboard. Starting from the template itself to once the dashboard was ready to be used. We really appreciate you. 162 162 + 163 163 + >Ask! Don't be scared to ask - people in the OSS space and beyond are increadibly helpfull and will let you know how they see your product. 164 164 + 165 165 + ## Better CLI 166 166 + 167 167 + You can now `import` your current monitors from the GUI into a YML file and `apply` changes to settings - or `trigger` checks when needed. Devs don't wanna switch context and want to keep track of changes within a version control. Let's enable them! 168 168 + 169 169 + Read more about the latest changes in our newly published [blog post](https://www.openstatus.dev/blog/introducing-openstatus-cli). 170 170 + 171 171 + To push **monitoring as code**, we are not only referring to our CLI docs but also create a dedicated `/cli` page with the most important commands, templates and links. 172 172 + 173 173 + We'd love to here from what your use cases are and how you handle infra/monitoring as code. 174 174 + 175 175 + ## Same Pricing. More Monitors. 176 176 + 177 177 + To better align with the new changes, we've updated our pricing plans. [Read more](https://openstatus.dev/blog/same-pricing-more-monitors). 178 178 + 179 179 + --- 180 180 + 181 181 + That's a wrap! We are back on track and more focused than ever. 182 182 + 183 183 + But first, we’ll enjoy some summer vibes and then come back stronger - with improvements to the status page. 184 184 + 185 185 + Cheers

+25

apps/web/src/content/posts/same-pricing-more-monitors.mdx

··· 1 1 + --- 2 2 + title: Same Pricing. More Monitors. 3 3 + description: We are updating our plans. 4 4 + author: 5 5 + name: Maximilian Kaske 6 6 + url: https://x.com/mxkaske 7 7 + avatar: /assets/authors/max.png 8 8 + publishedAt: 2025-08-02 9 9 + image: /assets/posts/same-pricing-more-monitors/same-pricing-more-monitors.png 10 10 + tag: company 11 11 + --- 12 12 + 13 13 + We’re updating our plans alongside the launch of the new [dashboard](https://openstatus.dev/blog/new-dashboard-we-are-so-back). 14 14 + 15 15 + A lot of users rely on openstatus for uptime checks and don’t really care about monitoring from _all_ 35 regions at once. 16 16 + 17 17 + Until now, our **Starter** plan included just **5 monitors**, each checked from all 35 regions in parallel. Going forward, you’ll get **20 monitors**, with the option to choose **up to 6 regions per monitor** - still from the full list of 35. 18 18 + 19 19 + The **Pro** plan is getting a big upgrade too: we’re going from **15 monitors** to **50(!)** - and you can still monitor from all **35 regions** in parallel if you want. 20 20 + 21 21 + The free **Hobby** users aren’t affected by this change: you’ll still get **1 monitor**, with the ability to choose from 6 regions. 22 22 + 23 23 + One thing is moving behind the paywall: **Response Logs**. We’ve added new high-level info like uptime charts and timeline tables that free users can access, but full response details will now be limited to paid plans - we’re hoping this encourages some upgrades. Paid users? No restrictions. 24 24 + 25 25 + Got questions, relying on response logs as a Hobby user or have been using parallel scheduling on all regions within the Starter plan? Reach out at [ping@openstatus.dev](mailto:ping@openstatus.dev).