Openstatus www.openstatus.dev

feat: add flags to chart and regions dictionary (#477)

authored by

Maximilian Kaske and committed by
GitHub
3173cce9 59a65d5d

+38 -12
+9 -5
apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart-wrapper.tsx
··· 1 1 "use client"; 2 2 3 3 import type { Ping, Region } from "@openstatus/tinybird"; 4 + import { regionsDict } from "@openstatus/utils"; 4 5 5 6 import type { Period } from "../utils"; 6 7 import { Chart } from "./chart"; ··· 23 24 */ 24 25 function groupDataByTimestamp(data: Ping[], period: Period) { 25 26 let currentTimestamp = 0; 26 - const regions: Partial<Record<Region, null>> = {}; 27 + const regions: Record<string, null> = {}; 27 28 const _data = data.reduce( 28 29 (acc, curr) => { 29 30 const { cronTimestamp, latency, region } = curr; 30 - regions[region] = null; // to get the region keys 31 + const { flag, code } = regionsDict[region]; 32 + const fullNameRegion = `${flag} ${code}`; 33 + regions[fullNameRegion] = null; // to get the region keys 31 34 if (cronTimestamp === currentTimestamp) { 32 35 // overwrite last object in acc 33 36 const last = acc.pop(); 34 37 if (last) { 35 38 acc.push({ 36 39 ...last, 37 - [region]: latency, 40 + [fullNameRegion]: latency, 38 41 }); 39 42 } 40 43 } else if (cronTimestamp) { ··· 42 45 // create new object in acc 43 46 acc.push({ 44 47 timestamp: renderTimestamp(cronTimestamp, period), 45 - [region]: latency, 48 + [fullNameRegion]: latency, 46 49 }); 47 50 } 48 51 return acc; 49 52 }, 50 53 [] as (Partial<Record<Region, string>> & { timestamp: string })[], 51 54 ); 52 - return { regions: Object.keys(regions) as Region[], data: _data.reverse() }; 55 + 56 + return { regions: Object.keys(regions), data: _data.reverse() }; 53 57 } 54 58 55 59 /**
+2 -4
apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/_components/chart.tsx
··· 2 2 3 3 import { Card, LineChart, Title } from "@tremor/react"; 4 4 5 - import type { Region } from "@openstatus/tinybird"; 6 - 7 5 const dataFormatter = (number: number) => 8 6 `${Intl.NumberFormat("us").format(number).toString()}ms`; 9 7 10 8 interface ChartProps { 11 - data: (Partial<Record<Region, string>> & { timestamp: string })[]; 12 - regions: Region[]; 9 + data: { timestamp: string; [key: string]: string }[]; 10 + regions: string[]; 13 11 } 14 12 15 13 export function Chart({ data, regions }: ChartProps) {
+27 -3
packages/utils/index.ts
··· 10 10 code: "auto", 11 11 name: "random", 12 12 location: "Random", 13 + flag: "🌍", 13 14 }, 14 15 arn1: { 15 16 code: "arn1", 16 17 name: "eu-north-1", 17 18 location: "Stockholm, Sweden", 19 + flag: "🇸🇪", 18 20 }, 19 21 bom1: { 20 22 code: "bom1", 21 23 name: "ap-south-1", 22 24 location: "Mumbai, India", 25 + flag: "🇮🇳", 23 26 }, 24 27 cdg1: { 25 28 code: "cdg1", 26 29 name: "eu-west-3", 27 30 location: "Paris, France", 31 + flag: "🇫🇷", 28 32 }, 29 33 cle1: { 30 34 code: "cle1", 31 35 name: "us-east-2", 32 36 location: "Cleveland, USA", 37 + flag: "🇺🇸", 33 38 }, 34 39 cpt1: { 35 40 code: "cpt1", 36 41 name: "af-south-1", 37 42 location: "Cape Town, South Africa", 43 + flag: "🇿🇦", 38 44 }, 39 45 dub1: { 40 46 code: "dub1", 41 47 name: "eu-west-1", 42 48 location: "Dublin, Ireland", 49 + flag: "🇮🇪", 43 50 }, 44 51 fra1: { 45 52 code: "fra1", 46 53 name: "eu-central-1", 47 54 location: "Frankfurt, Germany", 55 + flag: "🇩🇪", 48 56 }, 49 57 gru1: { 50 58 code: "gru1", 51 59 name: "sa-east-1", 52 60 location: "São Paulo, Brazil", 61 + flag: "🇧🇷", 53 62 }, 54 63 hkg1: { 55 64 code: "hkg1", 56 65 name: "ap-east-1", 57 66 location: "Hong Kong", 67 + flag: "🇭🇰", 58 68 }, 59 69 hnd1: { 60 70 code: "hnd1", 61 71 name: "ap-northeast-1", 62 72 location: "Tokyo, Japan", 73 + flag: "🇯🇵", 63 74 }, 64 75 iad1: { 65 76 code: "iad1", 66 77 name: "us-east-1", 67 78 location: "Washington, D.C., USA", 79 + flag: "🇺🇸", 68 80 }, 69 81 icn1: { 70 82 code: "icn1", 71 83 name: "ap-northeast-2", 72 84 location: "Seoul, South Korea", 85 + flag: "🇰🇷", 73 86 }, 74 87 kix1: { 75 88 code: "kix1", 76 89 name: "ap-northeast-3", 77 90 location: "Osaka, Japan", 91 + flag: "🇯🇵", 78 92 }, 79 93 lhr1: { 80 94 code: "lhr1", 81 95 name: "eu-west-2", 82 96 location: "London, United Kingdom", 97 + flag: "🇬🇧", 83 98 }, 84 99 pdx1: { 85 100 code: "pdx1", 86 101 name: "us-west-2", 87 102 location: "Portland, USA", 103 + flag: "🇺🇸", 88 104 }, 89 105 sfo1: { 90 106 code: "sfo1", 91 107 name: "us-west-1", 92 108 location: "San Francisco, USA", 109 + flag: "🇺🇸", 93 110 }, 94 111 sin1: { 95 112 code: "sin1", 96 113 name: "ap-southeast-1", 97 114 location: "Singapore", 115 + flag: "🇸🇬", 98 116 }, 99 117 syd1: { 100 118 code: "syd1", 101 119 name: "ap-southeast-2", 102 120 location: "Sydney, Australia", 121 + flag: "🇦🇺", 103 122 }, 104 123 } as const; 105 124 106 125 export const flyRegionsDict = { 107 126 ams: { 108 127 code: "ams", 109 - name: "ap-southeast-2", 128 + name: "", 110 129 location: "Amsterdam, Netherlands", 130 + flag: "🇳🇱", 111 131 }, 112 132 iad: { 113 133 code: "iad", 114 134 name: "us-east-1", 115 135 location: "Ashburn, Virginia, USA", 136 + flag: "🇺🇸", 116 137 }, 117 138 jnb: { 118 139 code: "jnb", 119 140 name: "", 120 141 location: "Johannesburg, South Africa", 142 + flag: "🇿🇦", 121 143 }, 122 144 hkg: { 123 145 code: "hkg", 124 146 name: "", 125 147 location: "Hong Kong, Hong Kong", 148 + flag: "🇭🇰", 126 149 }, 127 150 gru: { 128 151 code: "gru", 129 152 name: "", 130 153 location: "Sao Paulo, Brazil", 154 + flag: "🇧🇷", 131 155 }, 132 - 133 156 syd: { 134 157 code: "syd", 135 - name: "ap-southeast-2", 158 + name: "", 136 159 location: "Sydney, Australia", 160 + flag: "🇦🇺", 137 161 }, 138 162 } as const; 139 163