chore: ui tweaks, improve event filtering

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

data/countries.txt

@@ -154,7 +154,7 @@ Myanmar=MM
 Namibia=NA
 Nauru=NR
 Nepal=NP
-Netherlands, Kingdom of the=NL
+Netherlands=NL
 New Caledonia=NC
 New Zealand=NZ
 Nicaragua=NI
@@ -181,7 +181,7 @@ Puerto Rico=PR
 Qatar=QA
 Réunion=RE
 Romania=RO
-Russian Federation=RU
+Russia=RU
 Rwanda=RW
 Saint Barthélemy=BL
 Saint Helena=SH

src/utils/referrer.rs

@@ -51,6 +51,13 @@ pub fn process_referer(referer: Option<&str>) -> Referrer {
     match referer.map(poem::http::Uri::from_str) {
         // valid referer are stripped to the FQDN
         Some(Ok(referer_uri)) => {
+            // ignore localhost / IP addresses
+            if referer_uri.host().map_or(false, |host| {
+                host == "localhost" || host.ends_with(".localhost") || host.parse::<std::net::IpAddr>().is_ok()
+            }) {
+                return Referrer::Unknown(None);
+            }
+
             let referer_fqn = referer_uri.host().unwrap_or_default();
             if is_spammer(referer_fqn) {
                 return Referrer::Spammer;
@@ -83,6 +90,12 @@ mod test {
             "Should return an error for a referer identified as a spammer"
         );
 
+        assert_eq!(process_referer(Some("google.com")), Referrer::Fqdn("google.com".to_string()));
+        assert_eq!(process_referer(Some("127.0.0.1")), Referrer::Unknown(None));
+        assert_eq!(process_referer(Some("1.1.1.1")), Referrer::Unknown(None));
+        assert_eq!(process_referer(Some("localhost")), Referrer::Unknown(None));
+        assert_eq!(process_referer(Some("asdf.localhost")), Referrer::Unknown(None));
+
         assert_eq!(
             process_referer(Some("invalid referrer")),
             Referrer::Unknown(Some("invalid referrer".to_string())),

src/utils/useragent.rs

@@ -16,7 +16,7 @@ pub fn parse(header: &str) -> Client {
 }
 
 pub fn is_bot(client: &Client) -> bool {
-    client.device.family == "Spider"
+    client.device.family == "Spider" || client.user_agent.family == "HeadlessChrome"
 }
 
 static MOBILE_OS: [&str; 2] = ["iOS", "Android"]; // good enough for 99% of cases

src/web/routes/event.rs

@@ -49,7 +49,9 @@ impl EventApi {
             Referrer::Unknown(r) => r,
             Referrer::Spammer => return EmptyResponse::ok(),
         };
-        let referrer = referrer.filter(|r| !r.is_empty());
+
+        let referrer = referrer.map(|r| r.trim_start_matches("www.").to_string()); // remove www. prefix
+        let referrer = referrer.filter(|r| r.trim().len() > 3); // ignore empty or short referrers
 
         if !EXISTING_ENTITIES.with(|cache| cache.borrow_mut().cache_get(&event.entity_id).is_some()) {
             if !app.entities.exists(&event.entity_id).http_status(StatusCode::INTERNAL_SERVER_ERROR)? {

web/src/components/project.module.css

@@ -10,7 +10,7 @@
   align-items: center;
   gap: 1rem;
   width: 100%;
-  padding-bottom: .5rem;
+  padding-bottom: 0.5rem;
 
   a {
     cursor: pointer;
@@ -24,8 +24,13 @@
 }
 
 div.graph {
-  height: 18rem;
-  margin-bottom: 1rem;
+  height: 20rem;
+
+  border-radius: var(--pico-border-radius);
+  box-shadow: var(--pico-card-box-shadow);
+  background-color: var(--card-background);
+  padding: 2rem 0 1rem 0;
+  margin: 0 -0.4rem;
 }
 
 .tables {
@@ -60,7 +65,7 @@ div.graph {
       content: "";
       position: absolute;
       --direction: right;
-      background:  linear-gradient(
+      background: linear-gradient(
         to var(--direction),
         hsla(var(--card-background-base) / 0) 0%,
         hsla(var(--card-background-base) / 0.018) 9.5%,
@@ -79,7 +84,7 @@ div.graph {
         hsla(var(--card-background-base) / 0.988) 92%,
         hsl(var(--card-background-base)) 100%
       );
- 
+
       right: 0;
       top: 0;
       bottom: 0;

web/src/components/projects.module.css

@@ -46,6 +46,25 @@
   }
 }
 
+.projectCard {
+  border-radius: var(--pico-border-radius);
+  box-shadow: var(--pico-card-box-shadow);
+  background-color: var(--card-background);
+  padding: 1rem;
+  margin: 0 -0.4rem;
+  margin-bottom: 1rem;
+
+  > div {
+    --card-background: var(--pico-form-element-border-color);
+  }
+
+  .projectsGraph {
+    padding: 0;
+    margin: 0;
+    margin: 0 -1rem;
+  }
+}
+
 details.selectRange {
   width: 10rem;
 
@@ -116,6 +135,9 @@ details.selectRange {
 .stats {
   align-items: center;
   > div {
+    position: relative;
+    z-index: 1;
+
     display: flex;
     gap: 0.7rem;
     @media (max-width: 768px) {
@@ -157,11 +179,7 @@ details.selectRange {
 }
 
 .graph {
-  height: 12rem;
-  margin-top: -0.5rem;
-  margin-left: -1.9rem;
-  margin-right: -2rem;
-  margin-bottom: 3rem;
+  height: 14rem;
 }
 
 button.stat {
@@ -170,15 +188,34 @@ button.stat {
   margin: 0;
   font-size: 0.8rem;
   min-width: 7.5rem;
-  padding: 0.4rem 0.6rem 0.3rem 0.6rem;
+  padding: 0.5rem 0.6rem 0.3rem 0.6rem;
   margin-left: -0.5rem;
   transition: background-color 0.2s ease;
   border-radius: var(--pico-border-radius);
   user-select: none;
+  position: relative;
 
-  &[data-active="true"] {
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--pico-border-radius);
     background-color: var(--card-background);
-    box-shadow: var(--pico-card-box-shadow);
+    opacity: 0;
+    transform: scale(0.95);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  &[data-active="true"] {
+    &::before {
+      box-shadow: var(--pico-card-box-shadow);
+      opacity: 1;
+      transform: scale(1);
+    }
 
     h2,
     h2,
@@ -187,6 +224,12 @@ button.stat {
     }
   }
 
+  &:hover:not([data-active="true"]) {
+    &::before {
+      opacity: 0.5;
+    }
+  }
+
   h3 {
     margin: 0;
     font-size: 1.2rem;

web/src/components/projects.tsx

@@ -95,6 +95,8 @@ export const Projects = () => {
 							metric={metric}
 							setMetric={setMetric}
 							rangeName={dateRange}
+							className={styles.projectCard}
+							graphClassName={styles.projectsGraph}
 							detailsElement={() => (
 								<a href={`/p/${project.id}`} aria-label="View project details">
 									<ChevronRightIcon size={25} strokeWidth={4} color="var(--pico-h1-color)" />
@@ -139,6 +141,7 @@ export const ProjectOverview = ({
 	setMetric,
 	rangeName,
 	detailsElement,
+	className,
 	graphClassName = "",
 	renderHeader = defaultHeader,
 }: {
@@ -147,6 +150,7 @@ export const ProjectOverview = ({
 	setMetric: (value: Metric) => void;
 	rangeName: RangeName;
 	detailsElement?: () => JSX.Element;
+	className?: string;
 	graphClassName?: string;
 	renderHeader?: (props: { stats?: StatsResponse; project: ProjectResponse; className?: string }) => JSX.Element;
 }) => {
@@ -191,7 +195,10 @@ export const ProjectOverview = ({
 	const chartData = graph?.data ? toDataPoints(graph.data, range, metric) : [];
 
 	return (
-		<div className={styles.project} data-loading={isLoadingStats || isLoadingGraph || isErrorStats || isErrorGraph}>
+		<div
+			className={cls(styles.project, className)}
+			data-loading={isLoadingStats || isLoadingGraph || isErrorStats || isErrorGraph}
+		>
 			{(isErrorStats || isErrorGraph) && <h1 className={styles.error}>Failed to load data</h1>}
 			<div className={styles.statsContainer}>
 				<div className={styles.stats}>

web/src/global.css

@@ -6,17 +6,19 @@
   --pico-background-color: #f7f8ff;
   --card-background-base: 0deg 0% 100%;
   --card-background: hsl(var(--card-background-base));
+  --pico-card-box-shadow: 0px 0px 24px #15233610;
 }
 
 :root[data-theme="dark"] {
   --pico-background-color: #0a0c10;
-  --card-background-base: 200deg 18.37% 9.6%;
+  --card-background-base: 218.8 23.9% 13.9%;
+  /* --pico-card-box-shadow: 0 0 0.5rem 0.1rem hsla(0, 0%, 0%, 0.1); */
 }
 
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --pico-background-color: #0a0c10;
-    --card-background-base: 200deg 18.37% 9.6%;
+    --card-background-base: 218.8 23.9% 13.9%;
   }
 }