diff --git a/communicate/dashboards/configuration.mdx b/communicate/dashboards/configuration.mdx index 2fab4ee..016020f 100644 --- a/communicate/dashboards/configuration.mdx +++ b/communicate/dashboards/configuration.mdx @@ -1,6 +1,6 @@ --- title: 'Dashboard Configuration' -description: 'Configure your dashboard to display your checks and metrics.' +description: "Add checks to your dashboard, control who has access, and customize your dashboard's look and feel." sidebarTitle: 'Configuration' --- @@ -20,78 +20,150 @@ sidebarTitle: 'Configuration' ## Setting Up Your Dashboard - -Add relevant tags to the checks you want to display on your dashboard + +Add relevant tags to all the checks and monitors that you'd like to display on your dashboard. + -Set up a new dashboard and configure basic settings +Create a new dashboard and configure basic settings. - -Specify which tags should determine dashboard content + +Add tags to your dashboard to specify which checks to show. - -Configure branding, colors, and layout options + +Customize your dashboard's look and feel using custom CSS rules. - -Optionally configure a custom domain for professional branding + +Optionally configure a custom domain for professional branding. - -Verify dashboard functionality and share with intended audience + +Once your dashboard is ready, you can share it with anyone using its URL. +## Basic Settings -## Dashboard Privacy and Access Control +- **Title:** Add a title like "ACME status dash". This is separate from your Checkly URL or custom domain. +- **Description:** Add a clarifying text to explain to visitors what they are looking at. +- **Checks:** Specify the tags of the checks you want to show on the dashboard. By default we show all checks. + You can also choose to hide the tags from the dashboard. -By default, Checkly dashboards are public and accessible to anyone with the URL. You can restrict access by enabling password protection or Checkly account authentication. +## Checkly URL -> **Plan Requirements**: Private dashboards are available on Team and Enterprise plans. Checkly account login is exclusive to Enterprise customers. +Every dashboard comes with a configurable custom subdomain under the `checkly-dashboards.com` domain. By default, +we generate a random ID. You can change this subdomain to anything you like as long as it is unique among all Checkly users. +Typically, a company name works best, e.g. `acme.checkly-dashboards.com` -### Setting Up Password Protection + + Light mode interface + Dark mode interface + - - -Go to the dashboard you want to protect and access its settings - +## Custom Domain - -Toggle on password protection and click "Save" to apply changes - +You can host your dashboard under your own domain. To make this work, you need to do two things: - -Click the "Generate Password" button that appears after saving - +1. Add a valid custom domain to your dashboard setting. - -Copy the password from the modal - **this is the only time you'll see it in plaintext** - - + + Light mode interface + Dark mode interface + + +2. Create a CNAME record in your DNS that points to **checkly-dashboards.com** + +Any DNS provider will have the option to easily add CNAME records. For example, on AWS Route 53 this looks as follows. - -**Important**: We don't store passwords in plaintext. If lost, you'll need to generate a new password and update all users with the new credentials. - + + Light mode interface + Dark mode interface + + +In some cases, our provider will ask you to verify you are the owner of the domain by adding another `TXT` record to +your DNS. You will see a notice similar to the one below. + + + Light mode interface + Dark mode interface + + +## Access Control -### Accessing Protected Dashboards +By default, Checkly dashboards are public and visible to anyone who knows the URL. You can set a dashboard to private, limiting access to users with a password or Checkly account. -Protected dashboards work with both access methods: +### Enabling Authentication -**Password Authentication** (Team and Enterprise plans) -- Available on custom domains and default `https://[dashboardId].checkly-dashboards.com` URLs -- Use the generated password to access the dashboard + +Private dashboards are only available on certain plans. For more details, see our [Pricing page](https://www.checklyhq.com/pricing). + -**Checkly Account Login** (Enterprise only) -- Available only on default `https://[dashboardId].checkly-dashboards.com` URLs -- Click "Login with Checkly" and sign in with your existing account -- Supports all authentication methods (Google, GitHub, username/password) +To enable authentication on a dashboard: +1. Navigate to the settings of the dashboard you wish to modify. +2. Toggle on the "Password Protection" setting. +3. Click "Save" to apply the changes. +4. Next, the "Generate Password" button will appear, click this. It will open a modal which shows you your new private dashboard password. -Remember that dashboards are public by default. Always review which checks and data you're exposing before sharing dashboard URLs with external audiences. +Be careful, **this is the only time you will see this password in plaintext**. We do not store the password in plaintext, so if it is ever lost, you will need to regenerate a new one and inform any users of the new credentials. +### Accessing Private Dashboards + +After enabling password protection for your dashboard, you can continue to visit it via any custom domain you may have enabled, as well as the default `https://[dashboardId].checkly-dashboards.com` domain. The password authentication will work via both channels. + + +Checkly account login is only available to Enterprise customers. + + +If visiting via the `https://[dashboardId].checkly-dashboards.com` domain, you can also select "Login with Checkly" and sign in with your existing Checkly account via any of the supported methods (i.e. Google, Github, Username and Password). This is an Enterprise-only feature. + +## Look and Feel + +- **Logo:** Display your company logo (or any image) on the top left side of your dashboard. +- **Logo link:** Add a clickable destination URL for your logo. When visitors click the logo, they’ll be redirected to your specified website (typically your company homepage). +- **Favicon:** Set a custom favicon for browser tabs and bookmarks. +- **Auto paginate:** Automatically switch between dashboard pages when you have multiple pages of checks. +- **Auto refresh:** Set how often the dashboard refreshes—choose between 1, 5, or 10 minutes. +- **Show header:** Toggle visibility of the dashboard’s title and description. +- **Show check run links:** Adds a clickable link to each check result so team members can inspect them. Off by default. +- **Show and hide P-stats:** Toggle the visibility of the performance stats for all checks on the dashboard. +Next to the preset tweaks you can do to your dashboard, you can also apply [custom CSS styles](/communicate/dashboards/custom-css). \ No newline at end of file diff --git a/communicate/dashboards/custom-css.mdx b/communicate/dashboards/custom-css.mdx new file mode 100644 index 0000000..794ea60 --- /dev/null +++ b/communicate/dashboards/custom-css.mdx @@ -0,0 +1,405 @@ +--- +title: 'Customizing Your Dashboard with CSS' +sidebarTitle: 'Custom CSS' +--- + +You can completely customize the look & feel of your dashboard using custom CSS rules so the dashboard fits your company's +branding guidelines. You can find the CSS editor at the bottom of the Look & Feel section. + + + Light mode interface + Dark mode interface + + +Editing works like this. + +- Start by opening your dashboards in a separate browser tab. +- Generate some boilerplate CSS code by hitting the **Generate boilerplate** button. +- Open the **hints** tab so see all the classes available for you to target. +- Make some edits, hit **Save dashboard** and reload your dashboard. + + +Custom CSS is only available on certain plans. For more details, see our [Pricing page](https://www.checklyhq.com/pricing). + + +### CSS Classes + +The following table lists the CSS classes available for customizing your dashboard appearance: + +| Name | Class name | +|------|------------| +| Dashboard header | `.header` | +| Logo | `.logo` | +| Status summary | `.status-summary` | +| Status passing | `.status-summary--passing` | +| Status failing | `.status-summary--failing` | +| Main content | `.main` | +| Incidents summary | `.incidents-summary` | +| Check | `.check` | +| Check result | `.check__result` | +| Passing check | `.check__result--passing` | +| Failing check | `.check__result--failure` | +| Degraded check | `.check__result--degraded` | +| Check metrics | `.check__metrics` | +| Check list | `.check-list` | +| Empty check list | `.check-list--empty` | +| Time range | `.period` | +| Active time range | `.period--active` | +| Time range selector | `.period-selector` | +| Pagination | `.pagination` | +| Incident | `.incident` | +| Incidents page | `.incidents-page` | +| Incidents detail page | `.incidents-detail-page` | +| Incident list | `.incident-list` | +| Incident list date | `.incident-list__date` | +| Active incident list | `.active-incident-list` | +| Active incident card | `.active-incident` | +| Major incident | `.active-incident--major` | +| Minor incident | `.active-incident--minor` | +| Incident header | `.active-incident__header` | +| Metric | `.metric` | +| Metric improved | `.metric--improved` | +| Metric worsened | `.metric--worsened` | +| Metric badge | `.metric__badge` | +| Dashboard footer | `.footer` | +| Error 500 | `.error-500` | +| Error 400 | `.error-400` | +| Login background | `.login-background` | +| Login box | `.login-box` | +| Login input | `.login-input` | +| Login button | `.login-button` | +| Login social button | `.login-social-button` | +| Logout button | `.logout-button` | +| Logout icon | `.logout-button__icon` | + +## Styling examples + +We created some examples of how you can style your dashboard using the brand colors from well known brands. This should +help you explore the possibilities you have available. + +### Amazon Web Services style + +In this example we aim to replicate the brand style of [Amazon Web Services (AWS)](https://aws.amazon.com/). + + + Light mode interface + Dark mode interface + + +Note the following: + +- We set a dark `background` for the header with light `color` text. We also tweak the status and incident summary. +- We set the link `color` to the orange brand color. +- We remove the `border-radius` on the check cards and add a `box-shadow`. + +```css +.header { + background: #232e3e; +} + +.header .logo a { + color: #fca311; +} + +.header h1 { + color: #FFFFFF; +} + +.header h2 { + color: #FFFFFF; +} + +.status-summary--passing { + color: #70ab4a; +} + +.status-summary--passing svg { + fill: #70ab4a; +} + +.incidents-summary { + color: #f95a53; +} + +.main { + color: #1f3d5c; + background: #FFFFFF; + font-family: Helvetica; +} + +.check { + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%), 0 0 0 1px rgb(0 0 0 / 4%); + border-width: 0; + border-radius: 0; +} + +.active-incident article { + border-radius: 0 !important; +} + +.period-selector a { + color: #fca311; +} + +.period-selector .period--active { + background-color: #fca311; + color: #FFFFFF; +} + +.metric { + color: #1f3d5c; +} + +.incident-list a { + color: #0972d3; +} + +.footer { + background: #232e3e; +} + +.footer .logo a { + color: #e47911; +} + +.footer h1 { + color: #FFFFFF; +} + +.footer h2 { + color: #FFFFFF; +} + +``` + +### Linear style + +In this example we aim to replicate the dark style of [Linear](https://linear.app/). + + + Light mode interface + Dark mode interface + + +Note the following: + +- We set a dark `background` for both the header and main sections. +- We set a lighter `color` for a range of text elements to contract with the dark background +- We set a new color pattern for the big red incident alert at the top of the page. +- We tweak the brand "red" and "green" colors to better match the palette. + +```css +.header { + background: #080808; + border-bottom-color: #313035; + font-family: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif; +} + +.header .logo a { + color: #f7f8f8; +} + +.header h1 { + color: #f7f8f8; +} + +.header h2 { + color: #8a8f98; +} + +.status-summary--passing { + color: #68b487; +} + +.status-summary--passing svg { + fill: #68b487; +} + +.incidents-summary { + color: #db615f; +} + +.main { + color: #1f3d5c; + background: #080808; + font-family: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif; +} + +.check { + color: #f7f8f8; + background-color: #222326; + border: 1px solid #313035; +} + +.check > div > div span { + color: #8a8f98; +} + +.active-incident--major article { + background-color: #db615f!important; + color: #fff5f9; + border-width: 0; +} + +.active-incident--major article > .active-incident__header div { + background-color: #db615f; + color: #fff5f9; +} + +.active-incident--major article p { + color: #fff5f9; +} + +.period-selector a { + color: #5E6AD2; +} + +.period-selector .period--active { + background-color: #5E6AD2; + color: #f7f8f8; +} + +.checks-stat.metric > div { + color: #8a8f98; +} + +.checks-stat.metric > div > div { + color: #f7f8f8; +} + +.checks-stat.metric span { + color: #8a8f98; +} + +.metric__badge { + color: #f7f8f8 !important; +} + +.check__result--passing::before { + background-color: #68b487; +} + +.check__result--failure::before { + background-color: #db615f; +} + +.incidents-list-date { + color: #f7f8f8; + border-bottom-color: #313035; +} + +.incident-list p { + color: #8a8f98; +} + +.footer { + background: #080808; +} + +.footer .logo a { + color: #f7f8f8; +} + +.footer h1 { + color: #f7f8f8; +} + +.footer h2 { + color: #f7f8f8; +} +``` + +### Hello Kitty style + +"Why so serious?" you might ask. No reason, you can go crazy with styling, adding repeating backgrounds and images. + + + Light mode interface + Dark mode interface + + +```css +.main { + background: url("https://media.istockphoto.com/id/973856976/vector/simple-seamless-pattern-with-irregular-polka-dot-endless-print.jpg?s=612x612&w=0&k=20&c=ieek3r4Th_CyV73WsfoCYUhpz7-INHqWRZ6ZpRmASrs="); +} + +.header { + background: red; + border-bottom: 3px solid black; +} + +.status-summary { + color: white; +} + +.status-summary--passing { + color: white; +} + +.status-summary--failing { + color: white; +} + +.incidents-summary { + color: white; +} + +.footer { + background: red; + border-top: 3px solid black; +} + +.footer span { + color: white; +} + +.period { + color: black; +} + +.period--active { + background: red; +} + +.incident-list { + background: white; + padding: 0px 30px; + border: 2px solid black; +} + +.check { + border: 2px red solid; +} +``` \ No newline at end of file diff --git a/communicate/dashboards/customization.mdx b/communicate/dashboards/customization.mdx deleted file mode 100644 index 039db66..0000000 --- a/communicate/dashboards/customization.mdx +++ /dev/null @@ -1,357 +0,0 @@ ---- -title: 'Dashboard Customization' -description: 'Comprehensive guide to customizing dashboard appearance, branding, domains, and layout options for professional status communication.' -sidebarTitle: 'Customization' ---- - -Dashboard customization allows you to create professional, branded status displays that align with your organization's visual identity and communication needs. - -## URL and Domain Configuration - -### Default Dashboard URLs -Every dashboard starts with a unique, randomly generated URL: - -```text -# Example -https://a1b2c3d4-e5f6-7890-abcd-ef1234567890.checkly-dashboards.com -``` - -You can also use a custom subdomain to make your dashboard more recognizable. - - - Light mode interface - Dark mode interface - - - -Custom subdomains must be unique across all Checkly users. Choose something specific to your organization to avoid conflicts. - - -### Full Custom Domain Configuration -Use your own domain for maximum branding control and professional appearance: - - - Light mode interface - Dark mode interface - - - -Add your custom domain in the dashboard settings - - - -Create the required DNS records at your domain provider - - - -Complete domain verification if required by Checkly - - - -Automatic SSL certificate provisioning and renewal - - - -Dashboard becomes accessible at your custom domain - - - -#### Required DNS Records - -```text -# CNAME Record (required) -Type: CNAME -Name: status (or your chosen subdomain) -Value: checkly-dashboards.com -TTL: 3600 (or your domain provider's default) - -# TXT Record (if domain verification required) -Type: TXT -Name: _checkly-domain-verification.status -Value: [Verification code provided by Checkly] -TTL: 3600 (or your domain provider's default) -``` - - -DNS changes can take up to 24-48 hours to propagate globally. Plan custom domain setup accordingly if you have time-sensitive launch requirements. - - -## Look and Feel - - Light mode interface - Dark mode interface - -### Logo -Upload your brand logo to personalize the dashboard header. The logo image supports PNG, JPG, and SVG formats with a maximum size of 1024px×1024px. - -### Logo Link -Add a clickable destination URL for your logo. When visitors click the logo, they'll be redirected to your specified website (typically your company homepage). - -### Favicon -Set a custom favicon for browser tabs and bookmarks. The favicon should be 64px×64px and in PNG, ICO, or SVG format for optimal display across browsers. - -### Auto Paginate -Automatically switch between dashboard pages when you have multiple pages of checks. Configure the timing interval (1 minute default) and number of checks displayed per page (15 default). - -### Auto Refresh -Set automatic dashboard refresh intervals to keep status information current. Choose from 1 minute, 5 minutes, or 10 minutes based on your monitoring needs. - -### Show Header -Control whether the dashboard displays the header section containing your title, description, and logo. Useful for clean, minimal status displays. - -### Show Check Run Links -Enable or disable clickable links on check results that allow viewers to see detailed check run information and logs. - -### Metrics -Display performance metrics on your dashboard: -- **Show p99**: Display 99th percentile response time metrics -- **Show p95**: Display 95th percentile response time metrics - -## Advanced CSS Customization - - - Light mode interface - Dark mode interface - -### CSS Editor and Tools -For Team and Enterprise plans, unlock complete design control: - - - -Navigate to the Look & Feel section and open the CSS editor - - - -Modify CSS in the editor to achieve desired appearance - - - -Save changes and reload dashboard to preview styling - - - - - -### CSS Classes - - -The following table lists the CSS classes available for customizing your dashboard appearance: - -| Name | Description | Class Name | -|------|-------------|------------| -| Dashboard header | Main header container with logo and title | `.header` | -| Logo | Company logo display area | `.logo` | -| Status summary | Overall status overview section | `.status-summary` | -| Status passing | Green status indicator styling | `.status-summary--passing` | -| Status failing | Red status indicator styling | `.status-summary--failing` | -| Main content | Primary dashboard content area | `.main` | -| Incidents summary | Incident overview section | `.incidents-summary` | -| Check | Individual check card container | `.check` | -| Check result | Check status result display | `.check__result` | -| Passing check | Green check status styling | `.check__result--passing` | -| Failing check | Red check status styling | `.check__result--failure` | -| Degraded check | Yellow/orange degraded status styling | `.check__result--degraded` | -| Check metrics | Performance metrics display area | `.check__metrics` | -| Check list | Container for all check cards | `.check-list` | -| Empty check list | Styling for when no checks are present | `.check-list--empty` | -| Time range | Time period selector container | `.period` | -| Active time range | Currently selected time period | `.period--active` | -| Time range selector | Time period dropdown/selector | `.period-selector` | -| Pagination | Page navigation controls | `.pagination` | -| Incident | Individual incident display | `.incident` | -| Incidents page | Full incidents listing page | `.incidents-page` | -| Incidents detail page | Detailed incident information page | `.incidents-detail-page` | -| Incident list | Container for incident listings | `.incident-list` | -| Incident list date | Date headers in incident lists | `.incident-list__date` | -| Active incident list | Currently active incidents container | `.active-incident-list` | -| Active incident card | Individual active incident display | `.active-incident` | -| Major incident | High priority incident styling | `.active-incident--major` | -| Minor incident | Low priority incident styling | `.active-incident--minor` | -| Incident header | Incident title and metadata area | `.active-incident__header` | -| Metric | Performance metric display | `.metric` | -| Metric improved | Positive metric change styling | `.metric--improved` | -| Metric worsened | Negative metric change styling | `.metric--worsened` | -| Metric badge | Metric value indicator | `.metric__badge` | -| Dashboard footer | Footer area with links and branding | `.footer` | -| Error 500 | Server error page styling | `.error-500` | -| Error 400 | Client error page styling | `.error-400` | -| Login background | Login page background area | `.login-background` | -| Login box | Login form container | `.login-box` | -| Login input | Login form input fields | `.login-input` | -| Login button | Primary login button | `.login-button` | -| Login social button | Social login option buttons | `.login-social-button` | -| Logout button | User logout button | `.logout-button` | -| Logout icon | Logout button icon | `.logout-button__icon` | - - -### Responsive Design Considerations - -Ensure your dashboard works well across different screen sizes and devices: - -```css -/* Responsive design example */ -/* Mobile optimization */ -@media (max-width: 768px) { - .dashboard-header { - padding: 1rem; - text-align: center; - } - - .check-card { - margin-bottom: 0.5rem; - padding: 1rem; - } - - .dashboard-main { - padding: 1rem; - } -} - -/* Tablet optimization */ -@media (min-width: 769px) and (max-width: 1024px) { - .check-card { - flex: 1 1 calc(50% - 1rem); - } -} - -/* Desktop optimization */ -@media (min-width: 1025px) { - .check-card { - flex: 1 1 calc(33.333% - 1rem); - } -} - -/* Large display optimization */ -@media (min-width: 1440px) { - .dashboard-container { - max-width: 1400px; - margin: 0 auto; - } -} -``` - - - -Extensive CSS customization can sometimes interfere with dashboard functionality. Test thoroughly after making styling changes, especially for interactive elements and responsive behavior. - - -## Custom Theme Examples - -### Professional Corporate Theme -Clean, corporate styling for business environments: - -```css -/* Corporate theme example */ -.dashboard-header { - background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); - color: white; - padding: 2rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -.dashboard-main { - background: #f8fafc; - padding: 2rem; -} - -.check-card { - background: white; - border: 1px solid #e2e8f0; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); - margin-bottom: 1rem; - padding: 1.5rem; - transition: all 0.3s ease; -} - -.check-card:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - transform: translateY(-2px); -} - -.status-operational { - background: linear-gradient(135deg, #10b981 0%, #059669 100%); - color: white; - border-radius: 6px; - padding: 0.5rem 1rem; -} -``` - -### Modern Dark Theme -Sleek, modern styling for technology-focused organizations: - -```css -/* Modern dark theme example */ -.dashboard-container { - background: #0f172a; - color: #f1f5f9; - font-family: 'Inter', system-ui, sans-serif; -} - -.dashboard-header { - background: linear-gradient(135deg, #1e293b 0%, #334155 100%); - border-bottom: 1px solid #334155; - padding: 2rem; -} - -.check-card { - background: linear-gradient(135deg, #1e293b 0%, #334155 100%); - border: 1px solid #475569; - border-radius: 12px; - padding: 1.5rem; - margin-bottom: 1rem; - transition: all 0.3s ease; -} - -.check-card:hover { - border-color: #64748b; - transform: scale(1.02); -} - -.status-operational { - background: linear-gradient(135deg, #059669 0%, #047857 100%); - box-shadow: 0 0 20px rgba(5, 150, 105, 0.3); -} - -.status-failing { - background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); - box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); -} -``` - - - -Start with the CSS boilerplate generator to understand the dashboard's structure, then gradually customize elements to match your brand. Test changes frequently to ensure responsive behavior. - diff --git a/communicate/dashboards/incidents.mdx b/communicate/dashboards/incidents.mdx index fd215ba..46c0038 100644 --- a/communicate/dashboards/incidents.mdx +++ b/communicate/dashboards/incidents.mdx @@ -1,7 +1,6 @@ --- -title: Incident & Maintenance messages -sidebarTitle: Incidents - +title: 'Incident & Maintenance messages' +sidebarTitle: 'Incidents' --- Using **Incidents** you can communicate outages and planned maintenance to your audience — customers, co-workers, partners — @@ -14,7 +13,9 @@ different custom domains). Use cases are: 2. You have multiple internal teams, managing different services in your stack. 3. You have a staging and production environment you want to keep tabs on. -> Incidents are available on the Team and Enterprise plans. + +Incidents are only available on certain plans. For more details, see our [Pricing page](https://www.checklyhq.com/pricing). + ## Creating incidents diff --git a/communicate/dashboards/overview.mdx b/communicate/dashboards/overview.mdx index 4bb1e6c..013cd99 100644 --- a/communicate/dashboards/overview.mdx +++ b/communicate/dashboards/overview.mdx @@ -1,6 +1,6 @@ --- title: 'Dashboards Overview' -description: 'Create internal dashboards to instantly communicate health and performance to your team.' +description: 'Use dashboards to instantly communicate the health and performance of your checks.' sidebarTitle: 'Overview' --- @@ -8,20 +8,20 @@ sidebarTitle: 'Overview' **Monitoring as Code**: Learn more about [the Dashboard construct](/constructs/dashboard). -Dashboards provide a detailed way to communicate the status and performance of your monitoring checks and services to internal and external audiences. Create professional, branded status displays for customers, internal teams, or specific stakeholders. +Dashboards provide a detailed way to communicate the status of your checks and monitors to internal and external audiences. Create professional, branded status displays for customers, internal teams, or specific stakeholders. - Light mode interface - Dark mode interface - + Light mode interface + Dark mode interface + Dashboards allow you to do the following: @@ -32,17 +32,13 @@ Dashboards allow you to do the following: You can create multiple, distinct dashboards based on your plan. Edit your dashboard by clicking on the **Dashboards** button on the Checkly dashboard page. - *Check out our [Checkly Production Dashboard](https://status.checkly-dashboards.com) for a live example* +## Available metrics +Dashboards show the following metrics for each check or monitor: - -## Metrics To Display -Comprehensive performance data for transparency and accountability: - -| Metric | Time Period | Description | Use Case | -|--------|-------------|-------------|----------| -| **Availability** | 24h, 7d, 30d | Percentage of successful checks | SLA reporting | -| **P95 Response Time** | 24h, 7d, 30d | 95th percentile response time | Performance baseline | -| **P99 Response Time** | 24h, 7d, 30d | 99th percentile response time | Performance outliers | -| **Uptime Statistics** | Historical | Long-term reliability data | Trust building | +| Metric | Time Period | Description | +|--------|-------------|-------------| +| **Availability** | 24h, 7d, 30d | Percentage of successful run results | +| **P95** | 24h, 7d, 30d | 95th percentile response time | +| **P99** | 24h, 7d, 30d | 99th percentile response time | diff --git a/docs.json b/docs.json index abcb3d0..dbb1a7c 100644 --- a/docs.json +++ b/docs.json @@ -272,7 +272,8 @@ "pages": [ "communicate/dashboards/overview", "communicate/dashboards/configuration", - "communicate/dashboards/customization" + "communicate/dashboards/custom-css", + "communicate/dashboards/incidents" ] }, "communicate/maintenance-windows/overview" diff --git a/images/next/dashboard-checkly.png b/images/next/dashboard-checkly.png index d9bfebd..7f50f25 100644 Binary files a/images/next/dashboard-checkly.png and b/images/next/dashboard-checkly.png differ diff --git a/images/next/dashboard-dark.png b/images/next/dashboard-dark.png index 634073c..7f5bf35 100644 Binary files a/images/next/dashboard-dark.png and b/images/next/dashboard-dark.png differ diff --git a/images/next/dashboard-light.png b/images/next/dashboard-light.png index 16b5d72..ada7492 100644 Binary files a/images/next/dashboard-light.png and b/images/next/dashboard-light.png differ diff --git a/sitemap-crawl.md b/sitemap-crawl.md index de97a82..4a011d1 100644 --- a/sitemap-crawl.md +++ b/sitemap-crawl.md @@ -149,7 +149,8 @@ This file contains all valid URLs extracted from docs.json organized by director ### Communicate - Dashboards - /communicate/dashboards/overview - /communicate/dashboards/configuration -- /communicate/dashboards/customization +- /communicate/dashboards/custom-css +- /communicate/dashboards/incidents ### Communicate - Maintenance Windows - /communicate/maintenance-windows/overview