From ceba8803cf44b2b0bd443aa68b3457cd4a923969 Mon Sep 17 00:00:00 2001 From: Vladimir Klimontovich Date: Thu, 23 Nov 2023 09:32:16 -0500 Subject: [PATCH 1/2] feat: better version of event browser with geo info --- .../components/DataView/EventsBrowser.tsx | 109 ++++++++++++++---- webapps/console/lib/shared/countries.ts | 92 +++++++++++++++ webapps/console/pages/api/s/[...type].ts | 11 +- 3 files changed, 185 insertions(+), 27 deletions(-) create mode 100644 webapps/console/lib/shared/countries.ts diff --git a/webapps/console/components/DataView/EventsBrowser.tsx b/webapps/console/components/DataView/EventsBrowser.tsx index 033a22409..5ddf3fe17 100644 --- a/webapps/console/components/DataView/EventsBrowser.tsx +++ b/webapps/console/components/DataView/EventsBrowser.tsx @@ -13,15 +13,17 @@ import { WLink } from "../Workspace/WLink"; import { DestinationTitle } from "../../pages/[workspaceId]/destinations"; import ExternalLink from "../Icons/ExternalLink"; import { AnalyticsContext, AnalyticsServerEvent } from "@jitsu/protocols/analytics"; -import { GlobalOutlined, LinkOutlined, QuestionCircleOutlined, UserOutlined } from "@ant-design/icons"; +import Icon, { GlobalOutlined, LinkOutlined, QuestionCircleOutlined, UserOutlined } from "@ant-design/icons"; import { getConfigApi, useEventsLogApi } from "../../lib/useApi"; import { FunctionTitle } from "../../pages/[workspaceId]/functions"; import { FunctionConfig } from "../../lib/schema"; import { arrayToMap } from "../../lib/shared/arrays"; -import { BadgeCheck, RefreshCw } from "lucide-react"; +import { Globe, RefreshCw, Server } from "lucide-react"; import { JitsuButton } from "../JitsuButton/JitsuButton"; import { ConnectionTitle } from "../../pages/[workspaceId]/connections"; import { StreamTitle } from "../../pages/[workspaceId]/streams"; +import { trimMiddle } from "../../lib/shared/strings"; +import { countries } from "../../lib/shared/countries"; dayjs.extend(utc); dayjs.extend(relativeTime); @@ -861,6 +863,57 @@ const IncomingEventDrawer = ({ event }: { event: IncomingEvent }) => { ); }; +const Flag: React.FC<{ emoji?: string }> = ({ emoji }) => { + return ( + + {emoji || "๐Ÿ‡บ๐Ÿ‡ธ"} + + ); +}; + +function googleMapsLink(lat: number, lng: number) { + return `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`; +} + +//we should make sure that Geo object is typed in a common module. +//it is typed, but in functions lib only. +export const Geo: React.FC<{ geo: Record }> = ({ geo }) => { + if (geo?.country?.code) { + const flag = countries[geo.country.code]?.flag; + if (!flag) { + return ; + } + return ( + + {[ + `Country: ${countries[geo.country.code]?.name || geo.country.code}`, + geo.region?.code ? `Region: ${geo.region?.code}` : undefined, + geo.city?.name ? `City: ${geo.city.name}` : undefined, + ] + .filter(s => !!s) + .join("\n")} + {"\n\n"} + {geo.location && geo.location.latitude && geo.location.latitude ? ( + <> + Location:{" "} + + {geo.location.latitude}, {geo.location.longitude} + + + ) : undefined} + + } + > + {/* Without the space after the tag below, tooltip doesn't work. Don't delete it! */} + {" "} + + ); + } + return ; +}; + type IncomingEvent = { id: string; date: string; @@ -971,22 +1024,42 @@ const IncomingEventsTable = ({ loadEvents, loading, streamType, entityType, acto }, { title: "Type", - width: "8em", - dataIndex: "type", + width: "12em", + //dataIndex: "type", + render: (d: IncomingEvent) => { + const eventName = d.type === "track" ? d.event?.event || d.type : d.type; + const isDeviceEvent = d.pagePath; + return ( + + (isDeviceEvent ? : )} + /> + } + className={"whitespace-nowrap"} + > + {trimMiddle(eventName || "", 16)} + + + ); + }, }, { title: "Page Path", width: "20em", ellipsis: true, key: "pagePath", - render: (d: IncomingEvent) => ( -
- - {" "} - - {d.pagePath} -
- ), + render: (d: IncomingEvent) => + d.pageURL && ( +
+ + {" "} + + {d.pagePath} +
+ ), }, { title: "Summary", @@ -995,17 +1068,7 @@ const IncomingEventsTable = ({ loadEvents, loading, streamType, entityType, acto render: (d: IncomingEvent) => { return (
- {d.event?.event && ( - - } - className={"whitespace-nowrap"} - > - {d.event?.event} - - - )} + {d.host && ( } className={"whitespace-nowrap"}> diff --git a/webapps/console/lib/shared/countries.ts b/webapps/console/lib/shared/countries.ts new file mode 100644 index 000000000..b271a3a29 --- /dev/null +++ b/webapps/console/lib/shared/countries.ts @@ -0,0 +1,92 @@ +export const countries = { + US: { flag: "๐Ÿ‡บ๐Ÿ‡ธ", name: "United States" }, + GB: { flag: "๐Ÿ‡ฌ๐Ÿ‡ง", name: "United Kingdom" }, + CA: { flag: "๐Ÿ‡จ๐Ÿ‡ฆ", name: "Canada" }, + DE: { flag: "๐Ÿ‡ฉ๐Ÿ‡ช", name: "Germany" }, + FR: { flag: "๐Ÿ‡ซ๐Ÿ‡ท", name: "France" }, + IT: { flag: "๐Ÿ‡ฎ๐Ÿ‡น", name: "Italy" }, + ES: { flag: "๐Ÿ‡ช๐Ÿ‡ธ", name: "Spain" }, + RU: { flag: "๐Ÿ‡ท๐Ÿ‡บ", name: "Russia" }, + CN: { flag: "๐Ÿ‡จ๐Ÿ‡ณ", name: "China" }, + JP: { flag: "๐Ÿ‡ฏ๐Ÿ‡ต", name: "Japan" }, + IN: { flag: "๐Ÿ‡ฎ๐Ÿ‡ณ", name: "India" }, + BR: { flag: "๐Ÿ‡ง๐Ÿ‡ท", name: "Brazil" }, + AU: { flag: "๐Ÿ‡ฆ๐Ÿ‡บ", name: "Australia" }, + ZA: { flag: "๐Ÿ‡ฟ๐Ÿ‡ฆ", name: "South Africa" }, + AR: { flag: "๐Ÿ‡ฆ๐Ÿ‡ท", name: "Argentina" }, + MX: { flag: "๐Ÿ‡ฒ๐Ÿ‡ฝ", name: "Mexico" }, + NL: { flag: "๐Ÿ‡ณ๐Ÿ‡ฑ", name: "Netherlands" }, + SE: { flag: "๐Ÿ‡ธ๐Ÿ‡ช", name: "Sweden" }, + NO: { flag: "๐Ÿ‡ณ๐Ÿ‡ด", name: "Norway" }, + FI: { flag: "๐Ÿ‡ซ๐Ÿ‡ฎ", name: "Finland" }, + DK: { flag: "๐Ÿ‡ฉ๐Ÿ‡ฐ", name: "Denmark" }, + PL: { flag: "๐Ÿ‡ต๐Ÿ‡ฑ", name: "Poland" }, + GR: { flag: "๐Ÿ‡ฌ๐Ÿ‡ท", name: "Greece" }, + IE: { flag: "๐Ÿ‡ฎ๐Ÿ‡ช", name: "Ireland" }, + PT: { flag: "๐Ÿ‡ต๐Ÿ‡น", name: "Portugal" }, + BE: { flag: "๐Ÿ‡ง๐Ÿ‡ช", name: "Belgium" }, + CH: { flag: "๐Ÿ‡จ๐Ÿ‡ญ", name: "Switzerland" }, + AT: { flag: "๐Ÿ‡ฆ๐Ÿ‡น", name: "Austria" }, + TR: { flag: "๐Ÿ‡น๐Ÿ‡ท", name: "Turkey" }, + SA: { flag: "๐Ÿ‡ธ๐Ÿ‡ฆ", name: "Saudi Arabia" }, + AE: { flag: "๐Ÿ‡ฆ๐Ÿ‡ช", name: "United Arab Emirates" }, + IL: { flag: "๐Ÿ‡ฎ๐Ÿ‡ฑ", name: "Israel" }, + EG: { flag: "๐Ÿ‡ช๐Ÿ‡ฌ", name: "Egypt" }, + NG: { flag: "๐Ÿ‡ณ๐Ÿ‡ฌ", name: "Nigeria" }, + KE: { flag: "๐Ÿ‡ฐ๐Ÿ‡ช", name: "Kenya" }, + GH: { flag: "๐Ÿ‡ฌ๐Ÿ‡ญ", name: "Ghana" }, + TZ: { flag: "๐Ÿ‡น๐Ÿ‡ฟ", name: "Tanzania" }, + UG: { flag: "๐Ÿ‡บ๐Ÿ‡ฌ", name: "Uganda" }, + ZW: { flag: "๐Ÿ‡ฟ๐Ÿ‡ผ", name: "Zimbabwe" }, + MZ: { flag: "๐Ÿ‡ฒ๐Ÿ‡ฟ", name: "Mozambique" }, + AO: { flag: "๐Ÿ‡ฆ๐Ÿ‡ด", name: "Angola" }, + CM: { flag: "๐Ÿ‡จ๐Ÿ‡ฒ", name: "Cameroon" }, + BJ: { flag: "๐Ÿ‡ง๐Ÿ‡ฏ", name: "Benin" }, + TG: { flag: "๐Ÿ‡น๐Ÿ‡ฌ", name: "Togo" }, + CI: { flag: "๐Ÿ‡จ๐Ÿ‡ฎ", name: "Ivory Coast" }, + SN: { flag: "๐Ÿ‡ธ๐Ÿ‡ณ", name: "Senegal" }, + ML: { flag: "๐Ÿ‡ฒ๐Ÿ‡ฑ", name: "Mali" }, + BF: { flag: "๐Ÿ‡ง๐Ÿ‡ซ", name: "Burkina Faso" }, + NE: { flag: "๐Ÿ‡ณ๐Ÿ‡ช", name: "Niger" }, + TD: { flag: "๐Ÿ‡น๐Ÿ‡ฉ", name: "Chad" }, + MR: { flag: "๐Ÿ‡ฒ๐Ÿ‡ท", name: "Mauritania" }, + SD: { flag: "๐Ÿ‡ธ๐Ÿ‡ฉ", name: "Sudan" }, + ER: { flag: "๐Ÿ‡ช๐Ÿ‡ท", name: "Eritrea" }, + DJ: { flag: "๐Ÿ‡ฉ๐Ÿ‡ฏ", name: "Djibouti" }, + ET: { flag: "๐Ÿ‡ช๐Ÿ‡น", name: "Ethiopia" }, + SO: { flag: "๐Ÿ‡ธ๐Ÿ‡ด", name: "Somalia" }, + GM: { flag: "๐Ÿ‡ฌ๐Ÿ‡ฒ", name: "Gambia" }, + GW: { flag: "๐Ÿ‡ฌ๐Ÿ‡ผ", name: "Guinea-Bissau" }, + GN: { flag: "๐Ÿ‡ฌ๐Ÿ‡ณ", name: "Guinea" }, + SL: { flag: "๐Ÿ‡ธ๐Ÿ‡ฑ", name: "Sierra Leone" }, + LR: { flag: "๐Ÿ‡ฑ๐Ÿ‡ท", name: "Liberia" }, + CF: { flag: "๐Ÿ‡จ๐Ÿ‡ซ", name: "Central African Republic" }, + GA: { flag: "๐Ÿ‡ฌ๐Ÿ‡ฆ", name: "Gabon" }, + CG: { flag: "๐Ÿ‡จ๐Ÿ‡ฌ", name: "Congo - Brazzaville" }, + CD: { flag: "๐Ÿ‡จ๐Ÿ‡ฉ", name: "Congo - Kinshasa" }, + IO: { flag: "๐Ÿ‡ฎ๐Ÿ‡ด", name: "British Indian Ocean Territory" }, + AC: { flag: "๐Ÿ‡ฆ๐Ÿ‡จ", name: "Ascension Island" }, + CP: { flag: "๐Ÿ‡จ๐Ÿ‡ต", name: "Clipperton Island" }, + EA: { flag: "๐Ÿ‡ช๐Ÿ‡ฆ", name: "Ceuta & Melilla" }, + DG: { flag: "๐Ÿ‡ฉ๐Ÿ‡ฌ", name: "Diego Garcia" }, + IC: { flag: "๐Ÿ‡ฎ๐Ÿ‡จ", name: "Canary Islands" }, + TA: { flag: "๐Ÿ‡น๐Ÿ‡ฆ", name: "Tristan da Cunha" }, + HK: { flag: "๐Ÿ‡ญ๐Ÿ‡ฐ", name: "Hong Kong" }, + UA: { flag: "๐Ÿ‡บ๐Ÿ‡ฆ", name: "Ukraine" }, + BY: { flag: "๐Ÿ‡ง๐Ÿ‡พ", name: "Belarus" }, + MD: { flag: "๐Ÿ‡ฒ๐Ÿ‡ฉ", name: "Moldova" }, + LV: { flag: "๐Ÿ‡ฑ๐Ÿ‡ป", name: "Latvia" }, + LT: { flag: "๐Ÿ‡ฑ๐Ÿ‡น", name: "Lithuania" }, + EE: { flag: "๐Ÿ‡ช๐Ÿ‡ช", name: "Estonia" }, + GE: { flag: "๐Ÿ‡ฌ๐Ÿ‡ช", name: "Georgia" }, + AM: { flag: "๐Ÿ‡ฆ๐Ÿ‡ฒ", name: "Armenia" }, + XK: { flag: "๐Ÿ‡ฝ๐Ÿ‡ฐ", name: "Kosovo" }, + RS: { flag: "๐Ÿ‡ท๐Ÿ‡ธ", name: "Serbia" }, + ME: { flag: "๐Ÿ‡ฒ๐Ÿ‡ช", name: "Montenegro" }, + MK: { flag: "๐Ÿ‡ฒ๐Ÿ‡ฐ", name: "North Macedonia" }, + AL: { flag: "๐Ÿ‡ฆ๐Ÿ‡ฑ", name: "Albania" }, + RO: { flag: "๐Ÿ‡ท๐Ÿ‡ด", name: "Romania" }, + BG: { flag: "๐Ÿ‡ง๐Ÿ‡ฌ", name: "Bulgaria" }, + CY: { flag: "๐Ÿ‡จ๐Ÿ‡พ", name: "Cyprus" }, + MT: { flag: "๐Ÿ‡ฒ๐Ÿ‡น", name: "Malta" }, +}; diff --git a/webapps/console/pages/api/s/[...type].ts b/webapps/console/pages/api/s/[...type].ts index 06fdba3d5..229ba3ef9 100644 --- a/webapps/console/pages/api/s/[...type].ts +++ b/webapps/console/pages/api/s/[...type].ts @@ -224,7 +224,8 @@ export async function sendEventToBulker(req: NextApiRequest, ingestType: IngestT const loc = getDataLocator(req, ingestType, event); const type = event.type; const message: IngestMessage = { - geo: fromHeaders(req.headers), + //getting geo make sense only for browser events, otherwise it will based on ip of a server + geo: ingestType === "browser" ? fromHeaders(req.headers) : {}, connectionId: "", ingestType, @@ -393,8 +394,12 @@ export function patchEvent( event.context = event.context || {}; if (ingestType === "browser") { - //if ip comes from browser, don't trust i + //if ip comes from browser, don't trust it! event.context.ip = event.request_ip; + //get geo from headers, so we can display it in the console + //we do it only for calls fron browser, otherwise it's pointless, the geo + //will contain ip of the server + event.context.geo = fromHeaders(req.headers); } if (context) { event.context = { ...context, ...event.context }; @@ -405,8 +410,6 @@ export function patchEvent( if (!event.context.locale) { event.context.locale = (req.headers["accept-language"] as string | undefined)?.split(",")[0]?.trim() || undefined; } - //get geo from headers, so we can display it in the console - event.context.geo = fromHeaders(req.headers); const nowIsoDate = new Date().toISOString(); event.receivedAt = nowIsoDate; From 5142a441c077fe4126017c3a0f5b454d3c3a2c0c Mon Sep 17 00:00:00 2001 From: Vladimir Klimontovich Date: Thu, 23 Nov 2023 13:20:13 -0500 Subject: [PATCH 2/2] fix: added missing countries to the list --- webapps/console/lib/shared/countries.ts | 66 +++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/webapps/console/lib/shared/countries.ts b/webapps/console/lib/shared/countries.ts index b271a3a29..50f6bb837 100644 --- a/webapps/console/lib/shared/countries.ts +++ b/webapps/console/lib/shared/countries.ts @@ -89,4 +89,70 @@ export const countries = { BG: { flag: "๐Ÿ‡ง๐Ÿ‡ฌ", name: "Bulgaria" }, CY: { flag: "๐Ÿ‡จ๐Ÿ‡พ", name: "Cyprus" }, MT: { flag: "๐Ÿ‡ฒ๐Ÿ‡น", name: "Malta" }, + TH: { flag: "๐Ÿ‡น๐Ÿ‡ญ", name: "Thailand" }, + PK: { flag: "๐Ÿ‡ต๐Ÿ‡ฐ", name: "Pakistan" }, + KR: { flag: "๐Ÿ‡ฐ๐Ÿ‡ท", name: "South Korea" }, + ID: { flag: "๐Ÿ‡ฎ๐Ÿ‡ฉ", name: "Indonesia" }, + MY: { flag: "๐Ÿ‡ฒ๐Ÿ‡พ", name: "Malaysia" }, + PH: { flag: "๐Ÿ‡ต๐Ÿ‡ญ", name: "Philippines" }, + SG: { flag: "๐Ÿ‡ธ๐Ÿ‡ฌ", name: "Singapore" }, + VN: { flag: "๐Ÿ‡ป๐Ÿ‡ณ", name: "Vietnam" }, + NZ: { flag: "๐Ÿ‡ณ๐Ÿ‡ฟ", name: "New Zealand" }, + CL: { flag: "๐Ÿ‡จ๐Ÿ‡ฑ", name: "Chile" }, + CO: { flag: "๐Ÿ‡จ๐Ÿ‡ด", name: "Colombia" }, + PE: { flag: "๐Ÿ‡ต๐Ÿ‡ช", name: "Peru" }, + VE: { flag: "๐Ÿ‡ป๐Ÿ‡ช", name: "Venezuela" }, + IR: { flag: "๐Ÿ‡ฎ๐Ÿ‡ท", name: "Iran" }, + KZ: { flag: "๐Ÿ‡ฐ๐Ÿ‡ฟ", name: "Kazakhstan" }, + UZ: { flag: "๐Ÿ‡บ๐Ÿ‡ฟ", name: "Uzbekistan" }, + BD: { flag: "๐Ÿ‡ง๐Ÿ‡ฉ", name: "Bangladesh" }, + LK: { flag: "๐Ÿ‡ฑ๐Ÿ‡ฐ", name: "Sri Lanka" }, + NP: { flag: "๐Ÿ‡ณ๐Ÿ‡ต", name: "Nepal" }, + BT: { flag: "๐Ÿ‡ง๐Ÿ‡น", name: "Bhutan" }, + MM: { flag: "๐Ÿ‡ฒ๐Ÿ‡ฒ", name: "Myanmar" }, + AF: { flag: "๐Ÿ‡ฆ๐Ÿ‡ซ", name: "Afghanistan" }, + IS: { flag: "๐Ÿ‡ฎ๐Ÿ‡ธ", name: "Iceland" }, + CZ: { flag: "๐Ÿ‡จ๐Ÿ‡ฟ", name: "Czech Republic" }, + HU: { flag: "๐Ÿ‡ญ๐Ÿ‡บ", name: "Hungary" }, + SK: { flag: "๐Ÿ‡ธ๐Ÿ‡ฐ", name: "Slovakia" }, + SI: { flag: "๐Ÿ‡ธ๐Ÿ‡ฎ", name: "Slovenia" }, + HR: { flag: "๐Ÿ‡ญ๐Ÿ‡ท", name: "Croatia" }, + BA: { flag: "๐Ÿ‡ง๐Ÿ‡ฆ", name: "Bosnia and Herzegovina" }, + LU: { flag: "๐Ÿ‡ฑ๐Ÿ‡บ", name: "Luxembourg" }, + MC: { flag: "๐Ÿ‡ฒ๐Ÿ‡จ", name: "Monaco" }, + LI: { flag: "๐Ÿ‡ฑ๐Ÿ‡ฎ", name: "Liechtenstein" }, + SM: { flag: "๐Ÿ‡ธ๐Ÿ‡ฒ", name: "San Marino" }, + VA: { flag: "๐Ÿ‡ป๐Ÿ‡ฆ", name: "Vatican City" }, + AD: { flag: "๐Ÿ‡ฆ๐Ÿ‡ฉ", name: "Andorra" }, + MA: { flag: "๐Ÿ‡ฒ๐Ÿ‡ฆ", name: "Morocco" }, + DZ: { flag: "๐Ÿ‡ฉ๐Ÿ‡ฟ", name: "Algeria" }, + TN: { flag: "๐Ÿ‡น๐Ÿ‡ณ", name: "Tunisia" }, + LY: { flag: "๐Ÿ‡ฑ๐Ÿ‡พ", name: "Libya" }, + TW: { flag: "๐Ÿ‡น๐Ÿ‡ผ", name: "Taiwan" }, + UY: { flag: "๐Ÿ‡บ๐Ÿ‡พ", name: "Uruguay" }, + PY: { flag: "๐Ÿ‡ต๐Ÿ‡พ", name: "Paraguay" }, + BO: { flag: "๐Ÿ‡ง๐Ÿ‡ด", name: "Bolivia" }, + EC: { flag: "๐Ÿ‡ช๐Ÿ‡จ", name: "Ecuador" }, + CR: { flag: "๐Ÿ‡จ๐Ÿ‡ท", name: "Costa Rica" }, + PA: { flag: "๐Ÿ‡ต๐Ÿ‡ฆ", name: "Panama" }, + GT: { flag: "๐Ÿ‡ฌ๐Ÿ‡น", name: "Guatemala" }, + HN: { flag: "๐Ÿ‡ญ๐Ÿ‡ณ", name: "Honduras" }, + SV: { flag: "๐Ÿ‡ธ๐Ÿ‡ป", name: "El Salvador" }, + NI: { flag: "๐Ÿ‡ณ๐Ÿ‡ฎ", name: "Nicaragua" }, + DO: { flag: "๐Ÿ‡ฉ๐Ÿ‡ด", name: "Dominican Republic" }, + HT: { flag: "๐Ÿ‡ญ๐Ÿ‡น", name: "Haiti" }, + JM: { flag: "๐Ÿ‡ฏ๐Ÿ‡ฒ", name: "Jamaica" }, + TT: { flag: "๐Ÿ‡น๐Ÿ‡น", name: "Trinidad and Tobago" }, + BB: { flag: "๐Ÿ‡ง๐Ÿ‡ง", name: "Barbados" }, + BS: { flag: "๐Ÿ‡ง๐Ÿ‡ธ", name: "Bahamas" }, + CU: { flag: "๐Ÿ‡จ๐Ÿ‡บ", name: "Cuba" }, + AG: { flag: "๐Ÿ‡ฆ๐Ÿ‡ฌ", name: "Antigua and Barbuda" }, + AQ: { flag: "๐Ÿ‡ฆ๐Ÿ‡ถ", name: "Antarctica" }, + AS: { flag: "๐Ÿ‡ฆ๐Ÿ‡ธ", name: "American Samoa" }, + AW: { flag: "๐Ÿ‡ฆ๐Ÿ‡ผ", name: "Aruba" }, + AX: { flag: "๐Ÿ‡ฆ๐Ÿ‡ฝ", name: "ร…land Islands" }, + AZ: { flag: "๐Ÿ‡ฆ๐Ÿ‡ฟ", name: "Azerbaijan" }, + BH: { flag: "๐Ÿ‡ง๐Ÿ‡ญ", name: "Bahrain" }, + BI: { flag: "๐Ÿ‡ง๐Ÿ‡ฎ", name: "Burundi" }, + SW: { flag: "๐Ÿ‡ธ๐Ÿ‡ฟ", name: "Eswatini" }, };