Merge remote-tracking branch 'origin/newjitsu' into newjitsu

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 (
+    <span className={`px-2 ${emoji ? "border-transparent" : "border-textDisabled"}`}>
+      <span className={`${emoji ? "visible" : "invisible"}`}>{emoji || "🇺🇸"}</span>
+    </span>
+  );
+};
+
+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<string, any> }> = ({ geo }) => {
+  if (geo?.country?.code) {
+    const flag = countries[geo.country.code]?.flag;
+    if (!flag) {
+      return <Flag />;
+    }
+    return (
+      <Tooltip
+        title={
+          <div className="whitespace-pre">
+            {[
+              `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:{" "}
+                <a target="_blank" href={googleMapsLink(geo.location.latitude, geo.location.longitude)}>
+                  {geo.location.latitude}, {geo.location.longitude}
+                </a>
+              </>
+            ) : undefined}
+          </div>
+        }
+      >
+        {/* Without the space after the tag below, tooltip doesn't work. Don't delete it! */}
+        <Flag emoji={flag} />{" "}
+      </Tooltip>
+    );
+  }
+  return <Flag />;
+};
+
 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 (
+          <Tooltip title={eventName}>
+            <Tag
+              color={isDeviceEvent ? "geekblue" : "purple"}
+              icon={
+                <Icon
+                  component={() => (isDeviceEvent ? <Globe className="w-3 h-3" /> : <Server className="w-3 h-3" />)}
+                />
+              }
+              className={"whitespace-nowrap"}
+            >
+              {trimMiddle(eventName || "", 16)}
+            </Tag>
+          </Tooltip>
+        );
+      },
     },
     {
       title: "Page Path",
       width: "20em",
       ellipsis: true,
       key: "pagePath",
-      render: (d: IncomingEvent) => (
-        <div className={"whitespace-nowrap"}>
-          <a href={d.pageURL} target={"_blank"} rel={"noreferrer noopener"}>
-            <ExternalLink className={"w-3.5 h-3.5"} />{" "}
-          </a>
-          {d.pagePath}
-        </div>
-      ),
+      render: (d: IncomingEvent) =>
+        d.pageURL && (
+          <div className={"whitespace-nowrap"}>
+            <a href={d.pageURL} target={"_blank"} rel={"noreferrer noopener"}>
+              <ExternalLink className={"w-3.5 h-3.5"} />{" "}
+            </a>
+            {d.pagePath}
+          </div>
+        ),
     },
     {
       title: "Summary",
@@ -995,17 +1068,7 @@ const IncomingEventsTable = ({ loadEvents, loading, streamType, entityType, acto
       render: (d: IncomingEvent) => {
         return (
           <div className={"flex flex-row"}>
-            {d.event?.event && (
-              <Tooltip title={"Track Event Name"}>
-                <Tag
-                  color={"cyan"}
-                  icon={<BadgeCheck className={"anticon"} style={{ width: 13, height: 13 }} />}
-                  className={"whitespace-nowrap"}
-                >
-                  {d.event?.event}
-                </Tag>
-              </Tooltip>
-            )}
+            <Geo geo={d.context?.geo} />
             {d.host && (
               <Tooltip title={"Host"}>
                 <Tag color={"geekblue"} icon={<GlobalOutlined />} className={"whitespace-nowrap"}>

webapps/console/lib/shared/countries.ts

@@ -0,0 +1,158 @@
+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" },
+  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" },
+};

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;