+1 -1

apps/web/src/app/api/checker/test/route.ts

··· 3 3 4 4 import { monitorFlyRegionSchema } from "@openstatus/db/src/schema"; 5 5 6 6 - import { checkRegion } from "@/app/play/checker/[id]/utils"; // TODO: move into a shared package 6 6 + import { checkRegion } from "@/components/ping-response-analysis/utils"; 7 7 import { payloadSchema } from "../schema"; 8 8 import { isAnInvalidTestUrl } from "../utils"; 9 9

+1 -1

apps/web/src/app/api/og/checker/route.tsx

··· 4 4 getCheckerDataById, 5 5 regionFormatter, 6 6 timestampFormatter, 7 7 - } from "@/app/play/checker/[id]/utils"; 7 7 + } from "@/components/ping-response-analysis/utils"; 8 8 import { cn } from "@/lib/utils"; 9 9 import { BasicLayout } from "../_components/basic-layout"; 10 10 import {

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/button-reset.tsx apps/web/src/components/monitor-dashboard/button-reset.tsx

+2 -2

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/date-picker-preset.tsx apps/web/src/components/monitor-dashboard/date-picker-preset.tsx

··· 2 2 3 3 import * as React from "react"; 4 4 5 5 - import { periodFormatter } from "../utils"; 6 6 - import type { Period } from "../utils"; 5 5 + import { periodFormatter } from "@/lib/monitor/utils"; 6 6 + import type { Period } from "@/lib/monitor/utils"; 7 7 import { SearchParamsPreset } from "./search-params-preset"; 8 8 9 9 export function DatePickerPreset({

+2 -2

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/interval-preset.tsx apps/web/src/components/monitor-dashboard/interval-preset.tsx

··· 11 11 Separator, 12 12 } from "@openstatus/ui"; 13 13 14 14 - import { intervals } from "../utils"; 15 15 - import type { Interval } from "../utils"; 14 14 + import { intervals } from "@/lib/monitor/utils"; 15 15 + import type { Interval } from "@/lib/monitor/utils"; 16 16 import { SearchParamsPreset } from "./search-params-preset"; 17 17 18 18 export function IntervalPreset({ interval }: { interval: Interval }) {

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/metrics-card.tsx apps/web/src/components/monitor-dashboard/metrics-card.tsx

+2 -2

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/metrics.tsx apps/web/src/components/monitor-dashboard/metrics.tsx

··· 3 3 4 4 import type { LatencyMetric, ResponseTimeMetrics } from "@openstatus/tinybird"; 5 5 6 6 - import { periodFormatter } from "../utils"; 7 7 - import type { Period } from "../utils"; 6 6 + import { periodFormatter } from "@/lib/monitor/utils"; 7 7 + import type { Period } from "@/lib/monitor/utils"; 8 8 import { MetricsCard } from "./metrics-card"; 9 9 10 10 const metricsOrder = [

-42

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/monitor-informations.tsx

··· 1 1 - import type { MonitorPeriodicity } from "@openstatus/db/src/schema"; 2 2 - 3 3 - import { MetricsCard } from "./metrics-card"; 4 4 - 5 5 - export function MonitorInformations({ 6 6 - periodicity, 7 7 - }: { 8 8 - periodicity: MonitorPeriodicity; 9 9 - }) { 10 10 - return <div className="flex flex-wrap gap-4 md:gap-6"></div>; 11 11 - } 12 12 - 13 13 - const periodicityDict = { 14 14 - "30s": { 15 15 - value: 30, 16 16 - unit: "seconds", 17 17 - }, 18 18 - "1m": { 19 19 - value: 1, 20 20 - unit: "minute", 21 21 - }, 22 22 - "5m": { 23 23 - value: 5, 24 24 - unit: "minutes", 25 25 - }, 26 26 - "10m": { 27 27 - value: 10, 28 28 - unit: "minutes", 29 29 - }, 30 30 - "30m": { 31 31 - value: 30, 32 32 - unit: "minutes", 33 33 - }, 34 34 - "1h": { 35 35 - value: 1, 36 36 - unit: "hour", 37 37 - }, 38 38 - other: { 39 39 - value: 0, 40 40 - unit: "", 41 41 - }, 42 42 - } satisfies Record<MonitorPeriodicity, { value: number; unit: string }>;

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/pause-button.tsx apps/web/src/components/monitor-dashboard/pause-button.tsx

+2 -3

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/quantile-preset.tsx apps/web/src/components/monitor-dashboard/quantile-preset.tsx

··· 1 1 "use client"; 2 2 3 3 import * as React from "react"; 4 4 - import { usePathname, useRouter } from "next/navigation"; 5 4 import { HelpCircle } from "lucide-react"; 6 5 7 6 import { ··· 12 11 Separator, 13 12 } from "@openstatus/ui"; 14 13 15 15 - import { quantiles } from "../utils"; 16 16 - import type { Quantile } from "../utils"; 14 14 + import { quantiles } from "@/lib/monitor/utils"; 15 15 + import type { Quantile } from "@/lib/monitor/utils"; 17 16 import { SearchParamsPreset } from "./search-params-preset"; 18 17 19 18 export function QuantilePreset({

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/region-preset.tsx apps/web/src/components/monitor-dashboard/region-preset.tsx

+5 -3

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/response-details.tsx apps/web/src/components/monitor-dashboard/response-details.tsx

··· 1 1 + // TODO: move to `ping-response-analysis` 2 2 + 1 3 import { OSTinybird } from "@openstatus/tinybird"; 2 4 import type { ResponseDetailsParams } from "@openstatus/tinybird"; 3 5 4 4 - import { RegionInfo } from "@/app/play/checker/[id]/_components/region-info"; 5 5 - import { ResponseHeaderTable } from "@/app/play/checker/[id]/_components/response-header-table"; 6 6 - import { ResponseTimingTable } from "@/app/play/checker/[id]/_components/response-timing-table"; 7 6 import { 8 7 Tabs, 9 8 TabsContent, 10 9 TabsList, 11 10 TabsTrigger, 12 11 } from "@/components/dashboard/tabs"; 12 12 + import { RegionInfo } from "@/components/ping-response-analysis/region-info"; 13 13 + import { ResponseHeaderTable } from "@/components/ping-response-analysis/response-header-table"; 14 14 + import { ResponseTimingTable } from "@/components/ping-response-analysis/response-timing-table"; 13 15 import { env } from "@/env"; 14 16 15 17 const tb = new OSTinybird({ token: env.TINY_BIRD_API_KEY });

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/search-params-preset.tsx apps/web/src/components/monitor-dashboard/search-params-preset.tsx

+1 -1

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/_components/data-table-wrapper.tsx

··· 13 13 import * as assertions from "@openstatus/assertions"; 14 14 import type { OSTinybird } from "@openstatus/tinybird"; 15 15 16 16 - import { ResponseDetailTabs } from "@/app/play/checker/[id]/_components/response-detail-tabs"; 17 16 import { CopyToClipboardButton } from "@/components/dashboard/copy-to-clipboard-button"; 18 17 import { columns } from "@/components/data-table/columns"; 19 18 import { DataTable } from "@/components/data-table/data-table"; 20 19 import { LoadingAnimation } from "@/components/loading-animation"; 20 20 + import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs"; 21 21 import { api } from "@/trpc/client"; 22 22 23 23 // EXAMPLE: get the type of the response of the endpoint

+2 -3

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/page.tsx

··· 1 1 import * as React from "react"; 2 2 import { notFound } from "next/navigation"; 3 3 - import { format } from "date-fns"; 4 3 import * as z from "zod"; 5 4 6 5 import { OSTinybird } from "@openstatus/tinybird"; 7 6 7 7 + import { DatePickerPreset } from "@/components/monitor-dashboard/date-picker-preset"; 8 8 import { env } from "@/env"; 9 9 + import { periods } from "@/lib/monitor/utils"; 9 10 import { api } from "@/trpc/server"; 10 10 - import { DatePickerPreset } from "../_components/date-picker-preset"; 11 11 - import { periods } from "../utils"; 12 11 import { DataTableWrapper } from "./_components/data-table-wrapper"; 13 12 import { DownloadCSVButton } from "./_components/download-csv-button"; 14 13

+1 -1

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/details/page.tsx

··· 5 5 import { flyRegions } from "@openstatus/utils"; 6 6 7 7 import { EmptyState } from "@/components/dashboard/empty-state"; 8 8 + import { ResponseDetails } from "@/components/monitor-dashboard/response-details"; 8 9 import { api } from "@/trpc/server"; 9 9 - import { ResponseDetails } from "../_components/response-details"; 10 10 11 11 // 12 12

+1 -1

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/chart-wrapper.tsx apps/web/src/components/monitor-charts/chart-wrapper.tsx

··· 1 1 import type { ResponseGraph } from "@openstatus/tinybird"; 2 2 3 3 - import type { Period, Quantile } from "../../utils"; 3 3 + import type { Period, Quantile } from "@/lib/monitor/utils"; 4 4 import { Chart } from "./chart"; 5 5 import { groupDataByTimestamp } from "./utils"; 6 6

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/chart.tsx apps/web/src/components/monitor-charts/chart.tsx

+4 -4

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/combined-chart-wrapper.tsx apps/web/src/components/monitor-charts/combined-chart-wrapper.tsx

··· 11 11 } from "@openstatus/tinybird"; 12 12 import { Toggle } from "@openstatus/ui"; 13 13 14 14 + import { IntervalPreset } from "@/components/monitor-dashboard/interval-preset"; 15 15 + import { QuantilePreset } from "@/components/monitor-dashboard/quantile-preset"; 16 16 + import { RegionsPreset } from "@/components/monitor-dashboard/region-preset"; 17 17 + import type { Interval, Period, Quantile } from "@/lib/monitor/utils"; 14 18 import { usePreferredSettings } from "@/lib/preferred-settings/client"; 15 19 import type { PreferredSettings } from "@/lib/preferred-settings/server"; 16 16 - import { IntervalPreset } from "../../_components/interval-preset"; 17 17 - import { QuantilePreset } from "../../_components/quantile-preset"; 18 18 - import { RegionsPreset } from "../../_components/region-preset"; 19 19 - import type { Interval, Period, Quantile } from "../../utils"; 20 20 import { Chart } from "./chart"; 21 21 import { RegionTable } from "./region-table"; 22 22 import { groupDataByTimestamp } from "./utils";

+1 -1

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/region-table.tsx apps/web/src/components/monitor-charts/region-table.tsx

··· 10 10 } from "@openstatus/ui"; 11 11 import { flyRegionsDict } from "@openstatus/utils"; 12 12 13 13 - import { formatNumber } from "../../_components/metrics-card"; 13 13 + import { formatNumber } from "@/components/monitor-dashboard/metrics-card"; 14 14 import { SimpleChart } from "./simple-chart"; 15 15 16 16 export interface RegionTableProps {

+1 -1

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/simple-chart-wrapper.tsx apps/web/src/components/monitor-charts/simple-chart-wrapper.tsx

··· 1 1 import type { Region, ResponseGraph } from "@openstatus/tinybird"; 2 2 3 3 - import type { Period, Quantile } from "../../utils"; 3 3 + import type { Period, Quantile } from "@/lib/monitor/utils"; 4 4 import { SimpleChart } from "./simple-chart"; 5 5 import { groupDataByTimestamp } from "./utils"; 6 6

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/simple-chart.tsx apps/web/src/components/monitor-charts/simple-chart.tsx

+1 -2

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/utils.tsx apps/web/src/components/monitor-charts/utils.tsx

··· 3 3 import type { Region, ResponseGraph } from "@openstatus/tinybird"; 4 4 import { regionsDict } from "@openstatus/utils"; 5 5 6 6 - import type { Period, Quantile } from "../../utils"; 6 6 + import type { Period, Quantile } from "@/lib/monitor/utils"; 7 7 8 8 /** 9 9 * ··· 65 65 * @returns 66 66 */ 67 67 export function renderTimestamp(timestamp: number, period: Period) { 68 68 - const isInDay = ["1h", "1d"].includes(period); 69 68 const date = new Date(timestamp); 70 69 return format(date, "MMM d, HH:mm"); 71 70 }

+10 -7

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/page.tsx

··· 7 7 import { OSTinybird } from "@openstatus/tinybird"; 8 8 import { Separator } from "@openstatus/ui"; 9 9 10 10 + import { CombinedChartWrapper } from "@/components/monitor-charts/combined-chart-wrapper"; 11 11 + import { ButtonReset } from "@/components/monitor-dashboard/button-reset"; 12 12 + import { DatePickerPreset } from "@/components/monitor-dashboard/date-picker-preset"; 13 13 + import { Metrics } from "@/components/monitor-dashboard/metrics"; 10 14 import { env } from "@/env"; 15 15 + import { 16 16 + getMinutesByInterval, 17 17 + intervals, 18 18 + periods, 19 19 + quantiles, 20 20 + } from "@/lib/monitor/utils"; 11 21 import { getPreferredSettings } from "@/lib/preferred-settings/server"; 12 22 import { api } from "@/trpc/server"; 13 13 - import { ButtonReset } from "../_components/button-reset"; 14 14 - import { DatePickerPreset } from "../_components/date-picker-preset"; 15 15 - import { Metrics } from "../_components/metrics"; 16 16 - import { getMinutesByInterval, intervals, periods, quantiles } from "../utils"; 17 17 - import { CombinedChartWrapper } from "./_components/combined-chart-wrapper"; 18 18 - 19 19 - // import { groupDataByTimestamp } from "./_components/utils"; 20 23 21 24 const tb = new OSTinybird({ token: env.TINY_BIRD_API_KEY }); 22 25

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/utils.ts apps/web/src/lib/monitor/utils.ts

apps/web/src/app/play/checker/[id]/_components/copy-link-button.tsx apps/web/src/components/ping-response-analysis/copy-link-button.tsx

apps/web/src/app/play/checker/[id]/_components/copy-to-clipboard-button.tsx apps/web/src/components/ping-response-analysis/copy-to-clipboard-button.tsx

+2 -2

apps/web/src/app/play/checker/[id]/_components/multi-region-chart.tsx apps/web/src/components/ping-response-analysis/multi-region-chart.tsx

··· 2 2 3 3 import { BarChart } from "@tremor/react"; 4 4 5 5 - import type { RegionChecker } from "../utils"; 6 6 - import { getTimingPhases, latencyFormatter, regionFormatter } from "../utils"; 5 5 + import type { RegionChecker } from "./utils"; 6 6 + import { getTimingPhases, latencyFormatter, regionFormatter } from "./utils"; 7 7 8 8 export function MultiRegionChart({ regions }: { regions: RegionChecker[] }) { 9 9 const data = regions.map((item) => {

+2 -2

apps/web/src/app/play/checker/[id]/_components/multi-region-table.tsx apps/web/src/components/ping-response-analysis/multi-region-table.tsx

··· 9 9 } from "@openstatus/ui"; 10 10 11 11 import { StatusCodeBadge } from "@/components/monitor/status-code-badge"; 12 12 - import type { RegionChecker } from "../utils"; 13 12 import { 14 13 getTimingPhases, 15 14 getTotalLatency, 16 15 latencyFormatter, 17 16 regionFormatter, 18 18 - } from "../utils"; 17 17 + } from "./utils"; 18 18 + import type { RegionChecker } from "./utils"; 19 19 20 20 // TBD: add the popover infos about timing details 21 21

+1 -1

apps/web/src/app/play/checker/[id]/_components/multi-region-tabs.tsx apps/web/src/components/ping-response-analysis/multi-region-tabs.tsx

··· 1 1 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@openstatus/ui"; 2 2 3 3 - import type { RegionChecker } from "../utils"; 4 3 import { MultiRegionChart } from "./multi-region-chart"; 5 4 import { MultiRegionTable } from "./multi-region-table"; 5 5 + import type { RegionChecker } from "./utils"; 6 6 7 7 export function MultiRegionTabs({ regions }: { regions: RegionChecker[] }) { 8 8 return (

+2 -6

apps/web/src/app/play/checker/[id]/_components/region-info.tsx apps/web/src/components/ping-response-analysis/region-info.tsx

··· 1 1 import { StatusCodeBadge } from "@/components/monitor/status-code-badge"; 2 2 - import { 3 3 - latencyFormatter, 4 4 - regionFormatter, 5 5 - timestampFormatter, 6 6 - } from "../utils"; 7 7 - import type { RegionChecker } from "../utils"; 2 2 + import { latencyFormatter, regionFormatter, timestampFormatter } from "./utils"; 3 3 + import type { RegionChecker } from "./utils"; 8 4 9 5 export function RegionInfo({ 10 6 check,

apps/web/src/app/play/checker/[id]/_components/response-assertion.tsx apps/web/src/components/ping-response-analysis/response-assertion.tsx

+1 -1

apps/web/src/app/play/checker/[id]/_components/response-detail-tabs.tsx apps/web/src/components/ping-response-analysis/response-detail-tabs.tsx

··· 6 6 TabsList, 7 7 TabsTrigger, 8 8 } from "@/components/dashboard/tabs"; 9 9 - import type { Timing } from "../utils"; 10 9 import { ResponseAssertion } from "./response-assertion"; 11 10 import { ResponseHeaderTable } from "./response-header-table"; 12 11 import { ResponseTimingTable } from "./response-timing-table"; 12 12 + import type { Timing } from "./utils"; 13 13 14 14 export async function ResponseDetailTabs({ 15 15 timing,

apps/web/src/app/play/checker/[id]/_components/response-header-table.tsx apps/web/src/components/ping-response-analysis/response-header-table.tsx

+3 -3

apps/web/src/app/play/checker/[id]/_components/response-timing-table.tsx apps/web/src/components/ping-response-analysis/response-timing-table.tsx

··· 13 13 TableRow, 14 14 } from "@openstatus/ui"; 15 15 16 16 - import { timingDict } from "../config"; 17 17 - import type { Timing } from "../utils"; 18 18 - import { getTimingPhases, getTotalLatency } from "../utils"; 16 16 + import { timingDict } from "./config"; 17 17 + import type { Timing } from "./utils"; 18 18 + import { getTimingPhases, getTotalLatency } from "./utils"; 19 19 20 20 export function ResponseTimingTable({ 21 21 timing,

+1 -1

apps/web/src/app/play/checker/[id]/_components/select-region.tsx apps/web/src/components/ping-response-analysis/select-region.tsx

··· 14 14 } from "@openstatus/ui"; 15 15 16 16 import useUpdateSearchParams from "@/hooks/use-update-search-params"; 17 17 - import { regionFormatter } from "../utils"; 17 17 + import { regionFormatter } from "./utils"; 18 18 19 19 export function SelectRegion({ 20 20 defaultValue,

apps/web/src/app/play/checker/[id]/config.ts apps/web/src/components/ping-response-analysis/config.ts

+9 -6

apps/web/src/app/play/checker/[id]/page.tsx

··· 13 13 } from "@/app/shared-metadata"; 14 14 import { Shell } from "@/components/dashboard/shell"; 15 15 import { BackButton } from "@/components/layout/back-button"; 16 16 - import { CopyLinkButton } from "./_components/copy-link-button"; 17 17 - import { MultiRegionTabs } from "./_components/multi-region-tabs"; 18 18 - import { RegionInfo } from "./_components/region-info"; 19 19 - import { ResponseDetailTabs } from "./_components/response-detail-tabs"; 20 20 - import { SelectRegion } from "./_components/select-region"; 21 21 - import { getCheckerDataById, timestampFormatter } from "./utils"; 16 16 + import { CopyLinkButton } from "@/components/ping-response-analysis/copy-link-button"; 17 17 + import { MultiRegionTabs } from "@/components/ping-response-analysis/multi-region-tabs"; 18 18 + import { RegionInfo } from "@/components/ping-response-analysis/region-info"; 19 19 + import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs"; 20 20 + import { SelectRegion } from "@/components/ping-response-analysis/select-region"; 21 21 + import { 22 22 + getCheckerDataById, 23 23 + timestampFormatter, 24 24 + } from "@/components/ping-response-analysis/utils"; 22 25 23 26 /** 24 27 * allowed URL search params

apps/web/src/app/play/checker/[id]/utils.ts apps/web/src/components/ping-response-analysis/utils.ts

+1 -1

apps/web/src/app/play/checker/api/route.ts

··· 1 1 - import { setCheckerData } from "../[id]/utils"; 1 1 + import { setCheckerData } from "@/components/ping-response-analysis/utils"; 2 2 3 3 export const runtime = "edge"; 4 4

+2 -2

apps/web/src/components/content/mdx-components.tsx

··· 15 15 TableRow, 16 16 } from "@openstatus/ui"; 17 17 18 18 - import { MetricsCard } from "@/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/metrics-card"; 19 19 - import type { MetricsCardProps } from "@/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/_components/metrics-card"; 18 18 + import type { MetricsCardProps } from "../monitor-dashboard/metrics-card"; 19 19 + import { MetricsCard } from "../monitor-dashboard/metrics-card"; 20 20 import type { SimpleChartProps } from "./simple-chart"; 21 21 import { SimpleChart } from "./simple-chart"; 22 22

+2 -2

apps/web/src/components/content/simple-chart.tsx

··· 2 2 3 3 import { useEffect, useState } from "react"; 4 4 5 5 - import type { RegionTableProps } from "@/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/region-table"; 6 6 - import { RegionTable } from "@/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/_components/region-table"; 5 5 + import type { RegionTableProps } from "@/components/monitor-charts/region-table"; 6 6 + import { RegionTable } from "@/components/monitor-charts/region-table"; 7 7 8 8 export interface SimpleChartProps { 9 9 staticFile: string;

+1 -1

apps/web/src/components/data-table/monitor/data-table-row-actions.tsx

··· 26 26 DropdownMenuTrigger, 27 27 } from "@openstatus/ui"; 28 28 29 29 - import type { RegionChecker } from "@/app/play/checker/[id]/utils"; 30 29 import { LoadingAnimation } from "@/components/loading-animation"; 30 30 + import type { RegionChecker } from "@/components/ping-response-analysis/utils"; 31 31 import { toastAction } from "@/lib/toast"; 32 32 import { api } from "@/trpc/client"; 33 33

+1 -1

apps/web/src/components/forms/monitor-form.tsx

··· 62 62 } from "@openstatus/ui"; 63 63 import { flyRegionsDict } from "@openstatus/utils"; 64 64 65 65 - import type { RegionChecker } from "@/app/play/checker/[id]/utils"; 66 65 import { LoadingAnimation } from "@/components/loading-animation"; 67 66 import { FailedPingAlertConfirmation } from "@/components/modals/failed-ping-alert-confirmation"; 67 67 + import type { RegionChecker } from "@/components/ping-response-analysis/utils"; 68 68 import useUpdateSearchParams from "@/hooks/use-update-search-params"; 69 69 import { toastAction } from "@/lib/toast"; 70 70 import { cn } from "@/lib/utils";

+1 -1

apps/web/src/components/forms/monitor/form.tsx

··· 17 17 import { flyRegions, insertMonitorSchema } from "@openstatus/db/src/schema"; 18 18 import { Badge, Form } from "@openstatus/ui"; 19 19 20 20 - import type { RegionChecker } from "@/app/play/checker/[id]/utils"; 21 20 import { 22 21 Tabs, 23 22 TabsContent, ··· 25 24 TabsTrigger, 26 25 } from "@/components/dashboard/tabs"; 27 26 import { FailedPingAlertConfirmation } from "@/components/modals/failed-ping-alert-confirmation"; 27 27 + import type { RegionChecker } from "@/components/ping-response-analysis/utils"; 28 28 import { toast, toastAction } from "@/lib/toast"; 29 29 import { formatDuration } from "@/lib/utils"; 30 30 import { api } from "@/trpc/client";

+3 -3

apps/web/src/components/forms/monitor/request-test-button.tsx

··· 25 25 } from "@openstatus/ui"; 26 26 import { flyRegions, flyRegionsDict } from "@openstatus/utils"; 27 27 28 28 - import { RegionInfo } from "@/app/play/checker/[id]/_components/region-info"; 29 29 - import { ResponseDetailTabs } from "@/app/play/checker/[id]/_components/response-detail-tabs"; 30 30 - import type { RegionChecker } from "@/app/play/checker/[id]/utils"; 31 28 import { LoadingAnimation } from "@/components/loading-animation"; 29 29 + import { RegionInfo } from "@/components/ping-response-analysis/region-info"; 30 30 + import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs"; 31 31 + import type { RegionChecker } from "@/components/ping-response-analysis/utils"; 32 32 import { toast, toastAction } from "@/lib/toast"; 33 33 34 34 interface Props {

+32 -2

apps/web/src/components/layout/header/app-header.tsx

··· 2 2 3 3 import Link from "next/link"; 4 4 import { UserButton, useUser } from "@clerk/nextjs"; 5 5 + import { allChangelogs } from "contentlayer/generated"; 5 6 import { ArrowUpRight } from "lucide-react"; 6 7 7 8 import { Button, Skeleton } from "@openstatus/ui"; 8 9 9 10 import { Shell } from "@/components/dashboard/shell"; 10 10 - import { ChangelogViewedButton } from "@/components/workspace/changelog-viewed-button"; 11 11 + import { useCookieState } from "@/hooks/use-cookie-state"; 11 12 import { AppTabs } from "./app-tabs"; 12 13 import { Breadcrumbs } from "./breadcrumbs"; 13 14 15 15 + const lastChangelog = allChangelogs 16 16 + .sort( 17 17 + (a, b) => 18 18 + new Date(a.publishedAt).getTime() - new Date(b.publishedAt).getTime(), 19 19 + ) 20 20 + .pop(); 21 21 + 14 22 export function AppHeader() { 15 23 const { isLoaded, isSignedIn } = useUser(); 24 24 + const [lastViewed, setLastViewed] = useCookieState( 25 25 + "last-viewed-changelog", 26 26 + new Date(0).toISOString(), 27 27 + ); 28 28 + 29 29 + const show = 30 30 + lastChangelog && lastViewed 31 31 + ? new Date(lastViewed) < new Date(lastChangelog.publishedAt) 32 32 + : false; 33 33 + 16 34 return ( 17 35 // TODO: discuss amount of top-3 and top-6 18 36 <header className="border-border sticky top-2 z-50 w-full"> ··· 23 41 <div className="flex items-center gap-1"> 24 42 <ul className="hidden gap-1 sm:flex"> 25 43 <li className="w-full"> 26 26 - <ChangelogViewedButton /> 44 44 + <Button variant="link" asChild> 45 45 + <Link 46 46 + href="/changelog" 47 47 + target="_blank" 48 48 + onClick={() => setLastViewed(new Date().toISOString())} 49 49 + className="relative" 50 50 + > 51 51 + Changelog 52 52 + {show ? ( 53 53 + <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-green-500" /> 54 54 + ) : null} 55 55 + </Link> 56 56 + </Button> 27 57 </li> 28 58 <li className="w-full"> 29 59 <Button variant="link" asChild>

-2

apps/web/src/components/layout/marketing-header.tsx

··· 2 2 3 3 import Link from "next/link"; 4 4 import { usePathname } from "next/navigation"; 5 5 - import { useUser } from "@clerk/nextjs"; 6 5 7 6 import { Button } from "@openstatus/ui"; 8 7 ··· 17 16 } 18 17 19 18 export function MarketingHeader({ className }: Props) { 20 20 - const { isSignedIn } = useUser(); 21 19 const pathname = usePathname(); 22 20 23 21 return (

-57

apps/web/src/components/workspace/changelog-viewed-button.tsx

··· 1 1 - import { useEffect, useState } from "react"; 2 2 - import Link from "next/link"; 3 3 - import { allChangelogs } from "contentlayer/generated"; 4 4 - 5 5 - import { Button } from "@openstatus/ui"; 6 6 - 7 7 - const lastChangelog = allChangelogs 8 8 - .sort( 9 9 - (a, b) => 10 10 - new Date(a.publishedAt).getTime() - new Date(b.publishedAt).getTime(), 11 11 - ) 12 12 - .pop(); 13 13 - 14 14 - export function ChangelogViewedButton() { 15 15 - const [show, setShow] = useState(false); 16 16 - 17 17 - function onClick() { 18 18 - if (document) { 19 19 - const date = new Date().toISOString(); 20 20 - // store the last viewed changelog date in a cookie 21 21 - document.cookie = `last-viewed-changelog=${date}; path=/`; 22 22 - } 23 23 - setShow(false); 24 24 - } 25 25 - 26 26 - useEffect(() => { 27 27 - if (document) { 28 28 - const cookie = document.cookie 29 29 - .split("; ") 30 30 - .find((row) => row.startsWith("last-viewed-changelog")); 31 31 - if (!cookie) { 32 32 - setShow(true); 33 33 - return; 34 34 - } 35 35 - const lastViewed = new Date(cookie.split("=")[1]); 36 36 - if (lastChangelog && lastViewed < new Date(lastChangelog.publishedAt)) { 37 37 - setShow(true); 38 38 - } 39 39 - } 40 40 - }, []); 41 41 - 42 42 - return ( 43 43 - <Button variant="link" asChild> 44 44 - <Link 45 45 - href="/changelog" 46 46 - target="_blank" 47 47 - onClick={onClick} 48 48 - className="relative" 49 49 - > 50 50 - Changelog 51 51 - {show ? ( 52 52 - <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-green-500" /> 53 53 - ) : null} 54 54 - </Link> 55 55 - </Button> 56 56 - ); 57 57 - }

+32

apps/web/src/hooks/use-cookie-state.ts

··· 1 1 + "use client"; 2 2 + 3 3 + import { useCallback, useEffect, useState } from "react"; 4 4 + 5 5 + export function useCookieState(name: string, defaultValue?: string) { 6 6 + const [state, setState] = useState<string>(); 7 7 + 8 8 + const handleChange = useCallback( 9 9 + (value: string) => { 10 10 + if (document) { 11 11 + document.cookie = `${name}=${value}; path=/`; 12 12 + setState(value); 13 13 + } 14 14 + }, 15 15 + [name], 16 16 + ); 17 17 + 18 18 + useEffect(() => { 19 19 + if (document) { 20 20 + const cookie = document.cookie 21 21 + .split("; ") 22 22 + .find((row) => row.startsWith(name)); 23 23 + if (!cookie) { 24 24 + setState(defaultValue); 25 25 + return; 26 26 + } 27 27 + setState(cookie.split("=")[1]); 28 28 + } 29 29 + }, []); 30 30 + 31 31 + return [state, handleChange] as const; 32 32 + }