feat(frontend): add detailed filters to crash + anr overview pages

closes #1241
measure-sh · Sep 16, 2024 · 7f071a5 · 7f071a5
1 parent e167dcf
commit 7f071a5
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 26 deletions.
diff --git a/backend/api/measure/app.go b/backend/api/measure/app.go
@@ -262,6 +262,42 @@ func (a App) GetExceptionGroupsWithFilter(ctx context.Context, af *filter.AppFil
 			eventDataStmt.Where("attribute.app_build").In(af.VersionCodes)
 		}
 
+		if len(af.OsNames) > 0 {
+			eventDataStmt.Where("attribute.os_name").In(af.OsNames)
+		}
+
+		if len(af.OsVersions) > 0 {
+			eventDataStmt.Where("attribute.os_version").In(af.OsVersions)
+		}
+
+		if len(af.Countries) > 0 {
+			eventDataStmt.Where("inet.country_code").In(af.Countries)
+		}
+
+		if len(af.DeviceNames) > 0 {
+			eventDataStmt.Where("attribute.device_name").In(af.DeviceNames)
+		}
+
+		if len(af.DeviceManufacturers) > 0 {
+			eventDataStmt.Where("attribute.device_manufacturer").In(af.DeviceManufacturers)
+		}
+
+		if len(af.Locales) > 0 {
+			eventDataStmt.Where("attribute.device_locale").In(af.Locales)
+		}
+
+		if len(af.NetworkProviders) > 0 {
+			eventDataStmt.Where("attribute.network_provider").In(af.NetworkProviders)
+		}
+
+		if len(af.NetworkTypes) > 0 {
+			eventDataStmt.Where("attribute.network_type").In(af.NetworkTypes)
+		}
+
+		if len(af.NetworkGenerations) > 0 {
+			eventDataStmt.Where("attribute.network_generation").In(af.NetworkGenerations)
+		}
+
 		if af.HasTimeRange() {
 			eventDataStmt.Where("timestamp >= ? and timestamp <= ?", af.From, af.To)
 		}
@@ -466,6 +502,42 @@ func (a App) GetANRGroupsWithFilter(ctx context.Context, af *filter.AppFilter) (
 			eventDataStmt.Where("attribute.app_build").In(af.VersionCodes)
 		}
 
+		if len(af.OsNames) > 0 {
+			eventDataStmt.Where("attribute.os_name").In(af.OsNames)
+		}
+
+		if len(af.OsVersions) > 0 {
+			eventDataStmt.Where("attribute.os_version").In(af.OsVersions)
+		}
+
+		if len(af.Countries) > 0 {
+			eventDataStmt.Where("inet.country_code").In(af.Countries)
+		}
+
+		if len(af.DeviceNames) > 0 {
+			eventDataStmt.Where("attribute.device_name").In(af.DeviceNames)
+		}
+
+		if len(af.DeviceManufacturers) > 0 {
+			eventDataStmt.Where("attribute.device_manufacturer").In(af.DeviceManufacturers)
+		}
+
+		if len(af.Locales) > 0 {
+			eventDataStmt.Where("attribute.device_locale").In(af.Locales)
+		}
+
+		if len(af.NetworkProviders) > 0 {
+			eventDataStmt.Where("attribute.network_provider").In(af.NetworkProviders)
+		}
+
+		if len(af.NetworkTypes) > 0 {
+			eventDataStmt.Where("attribute.network_type").In(af.NetworkTypes)
+		}
+
+		if len(af.NetworkGenerations) > 0 {
+			eventDataStmt.Where("attribute.network_generation").In(af.NetworkGenerations)
+		}
+
 		if af.HasTimeRange() {
 			eventDataStmt.Where("timestamp >= ? and timestamp <= ?", af.From, af.To)
 		}

diff --git a/backend/api/measure/event.go b/backend/api/measure/event.go
@@ -1267,15 +1267,54 @@ func GetExceptionPlotInstances(ctx context.Context, af *filter.AppFilter) (issue
 		Select("attribute.app_build").
 		Select("timestamp").
 		Select("exception.handled").
-		Where("app_id = ?", af.AppID).
-		Where("timestamp >= ? and timestamp <= ?", af.From, af.To)
+		Where("app_id = ?", af.AppID)
 
 	if len(af.Versions) > 0 {
-		base = base.Where("attribute.app_version in ?", af.Versions)
+		base.Where("attribute.app_version in ?", af.Versions)
 	}
 
 	if len(af.VersionCodes) > 0 {
-		base = base.Where("attribute.app_build in ?", af.VersionCodes)
+		base.Where("attribute.app_build in ?", af.VersionCodes)
+	}
+
+	if len(af.OsNames) > 0 {
+		base.Where("attribute.os_name").In(af.OsNames)
+	}
+
+	if len(af.OsVersions) > 0 {
+		base.Where("attribute.os_version").In(af.OsVersions)
+	}
+
+	if len(af.Countries) > 0 {
+		base.Where("inet.country_code").In(af.Countries)
+	}
+
+	if len(af.DeviceNames) > 0 {
+		base.Where("attribute.device_name").In(af.DeviceNames)
+	}
+
+	if len(af.DeviceManufacturers) > 0 {
+		base.Where("attribute.device_manufacturer").In(af.DeviceManufacturers)
+	}
+
+	if len(af.Locales) > 0 {
+		base.Where("attribute.device_locale").In(af.Locales)
+	}
+
+	if len(af.NetworkProviders) > 0 {
+		base.Where("attribute.network_provider").In(af.NetworkProviders)
+	}
+
+	if len(af.NetworkTypes) > 0 {
+		base.Where("attribute.network_type").In(af.NetworkTypes)
+	}
+
+	if len(af.NetworkGenerations) > 0 {
+		base.Where("attribute.network_generation").In(af.NetworkGenerations)
+	}
+
+	if af.HasTimeRange() {
+		base.Where("timestamp >= ? and timestamp <= ?", af.From, af.To)
 	}
 
 	stmt := sqlf.
@@ -1661,15 +1700,54 @@ func GetANRPlotInstances(ctx context.Context, af *filter.AppFilter) (issueInstan
 		Select("attribute.app_version").
 		Select("attribute.app_build").
 		Select("timestamp").
-		Where("app_id = ?", af.AppID).
-		Where("timestamp >= ? and timestamp <= ?", af.From, af.To)
+		Where("app_id = ?", af.AppID)
 
 	if len(af.Versions) > 0 {
-		base = base.Where("attribute.app_version in ?", af.Versions)
+		base.Where("attribute.app_version in ?", af.Versions)
 	}
 
 	if len(af.VersionCodes) > 0 {
-		base = base.Where("attribute.app_build in ?", af.VersionCodes)
+		base.Where("attribute.app_build in ?", af.VersionCodes)
+	}
+
+	if len(af.OsNames) > 0 {
+		base.Where("attribute.os_name").In(af.OsNames)
+	}
+
+	if len(af.OsVersions) > 0 {
+		base.Where("attribute.os_version").In(af.OsVersions)
+	}
+
+	if len(af.Countries) > 0 {
+		base.Where("inet.country_code").In(af.Countries)
+	}
+
+	if len(af.DeviceNames) > 0 {
+		base.Where("attribute.device_name").In(af.DeviceNames)
+	}
+
+	if len(af.DeviceManufacturers) > 0 {
+		base.Where("attribute.device_manufacturer").In(af.DeviceManufacturers)
+	}
+
+	if len(af.Locales) > 0 {
+		base.Where("attribute.device_locale").In(af.Locales)
+	}
+
+	if len(af.NetworkProviders) > 0 {
+		base.Where("attribute.network_provider").In(af.NetworkProviders)
+	}
+
+	if len(af.NetworkTypes) > 0 {
+		base.Where("attribute.network_type").In(af.NetworkTypes)
+	}
+
+	if len(af.NetworkGenerations) > 0 {
+		base.Where("attribute.network_generation").In(af.NetworkGenerations)
+	}
+
+	if af.HasTimeRange() {
+		base.Where("timestamp >= ? and timestamp <= ?", af.From, af.To)
 	}
 
 	stmt := sqlf.

diff --git a/frontend/dashboard/app/components/exceptions_details.tsx b/frontend/dashboard/app/components/exceptions_details.tsx
@@ -26,7 +26,7 @@ export const ExceptionsDetails: React.FC<ExceptionsDetailsProps> = ({ exceptions
 
   const [exceptionsDetailsApiStatus, setExceptionsDetailsApiStatus] = useState(ExceptionsDetailsApiStatus.Loading);
 
-  const [selectedFilters, setSelectedFilters] = useState(defaultFilters);
+  const [filters, setFilters] = useState(defaultFilters);
 
   const [exceptionsDetails, setExceptionsDetails] = useState(exceptionsType === ExceptionsType.Crash ? emptyCrashExceptionsDetailsResponse : emptyAnrExceptionsDetailsResponse)
   const [paginationIndex, setPaginationIndex] = useState(0)
@@ -49,7 +49,7 @@ export const ExceptionsDetails: React.FC<ExceptionsDetailsProps> = ({ exceptions
       limit = - limit
     }
 
-    const result = await fetchExceptionsDetailsFromServer(exceptionsType, exceptionsGroupId, selectedFilters, keyId, keyTimestamp, limit, router)
+    const result = await fetchExceptionsDetailsFromServer(exceptionsType, exceptionsGroupId, filters, keyId, keyTimestamp, limit, router)
 
     switch (result.status) {
       case ExceptionsDetailsApiStatus.Error:
@@ -65,17 +65,17 @@ export const ExceptionsDetails: React.FC<ExceptionsDetailsProps> = ({ exceptions
   }
 
   useEffect(() => {
-    if (!selectedFilters.ready) {
+    if (!filters.ready) {
       return
     }
 
     getExceptionsDetails()
-  }, [paginationIndex, selectedFilters]);
+  }, [paginationIndex, filters]);
 
   return (
     <div className="flex flex-col selection:bg-yellow-200/75 items-start p-24 pt-8">
       <div className="py-4" />
-      <p className="font-display font-normal text-4xl max-w-6xl text-center">{selectedFilters.app.name}</p>
+      <p className="font-display font-normal text-4xl max-w-6xl text-center">{filters.app.name}</p>
       <div className="py-1" />
       <p className="font-display font-light text-3xl max-w-6xl text-center">{decodeURIComponent(exceptionsGroupName)}</p>
       <div className="py-4" />
@@ -98,26 +98,26 @@ export const ExceptionsDetails: React.FC<ExceptionsDetailsProps> = ({ exceptions
         showDeviceManufacturers={true}
         showDeviceNames={true}
         showFreeText={false}
-        onFiltersChanged={(updatedFilters) => setSelectedFilters(updatedFilters)} />
+        onFiltersChanged={(updatedFilters) => setFilters(updatedFilters)} />
 
       <div className="py-4" />
 
-      {selectedFilters.ready &&
+      {filters.ready &&
         <div className='w-full'>
           <div className="py-6" />
           <div className="flex flex-col md:flex-row w-full">
             <ExceptionspDetailsPlot
               exceptionsType={exceptionsType}
               exceptionsGroupId={exceptionsGroupId}
-              filters={selectedFilters} />
+              filters={filters} />
             <div className="p-2" />
             <div className="w-full h-[32rem]">
               <Journey
                 teamId={teamId}
                 bidirectional={false}
                 journeyType={exceptionsType === ExceptionsType.Crash ? JourneyType.CrashDetails : JourneyType.AnrDetails}
                 exceptionsGroupId={exceptionsGroupId}
-                filters={selectedFilters} />
+                filters={filters} />
             </div>
           </div>
           <div className="py-4" />
@@ -170,7 +170,7 @@ export const ExceptionsDetails: React.FC<ExceptionsDetailsProps> = ({ exceptions
               <div className='flex flex-row items-center'>
                 <Link key={exceptionsDetails.results[0].id} href={`/${teamId}/sessions/${appId}/${exceptionsDetails.results[0].session_id}`} className="outline-none justify-center w-fit hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black rounded-md font-display transition-colors duration-100 py-2 px-4">View Session</Link>
                 <div className='px-2' />
-                <CopyAiContext appName={selectedFilters.app.name} exceptionsType={exceptionsType} exceptionsDetails={exceptionsDetails} />
+                <CopyAiContext appName={filters.app.name} exceptionsType={exceptionsType} exceptionsDetails={exceptionsDetails} />
               </div>
               <div className="py-2" />
               {exceptionsType === ExceptionsType.Crash &&

diff --git a/frontend/dashboard/app/components/exceptions_overview.tsx b/frontend/dashboard/app/components/exceptions_overview.tsx
@@ -92,14 +92,14 @@ export const ExceptionsOverview: React.FC<ExceptionsOverviewProps> = ({ exceptio
         showAppVersions={true}
         showDates={true}
         showSessionType={false}
-        showOsVersions={false}
-        showCountries={false}
-        showNetworkTypes={false}
-        showNetworkProviders={false}
-        showNetworkGenerations={false}
-        showLocales={false}
-        showDeviceManufacturers={false}
-        showDeviceNames={false}
+        showOsVersions={true}
+        showCountries={true}
+        showNetworkTypes={true}
+        showNetworkProviders={true}
+        showNetworkGenerations={true}
+        showLocales={true}
+        showDeviceManufacturers={true}
+        showDeviceNames={true}
         showFreeText={false}
         onFiltersChanged={(updatedFilters) => setFilters(updatedFilters)} />
       <div className="py-4" />