refactor(ui): Use back-end queries for ORT run statistics cards

As the endpoint `...runs/${runId}/statistics` now returns, not only item counts, but also their distribution (across severities, ecosystems, and vulnerability ratings), switch to using the API endpoint for the statistics cards, to render the ORT run main page faster. Note that as the run statistics endpoint uses different data structures for the item distributions (ecosystems is an array, while the others are maps), data must be mapped differently for each statistics card. Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
eclipse-apoapsis · Dec 23, 2024 · d9a9328 · d9a9328
1 parent 88373a0
commit d9a9328
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 66 deletions.
diff --git a/...cts/$productId/repositories/$repoId/runs/$runIndex/-components/issues-statistics-card.tsx b/...cts/$productId/repositories/$repoId/runs/$runIndex/-components/issues-statistics-card.tsx
@@ -19,17 +19,15 @@
 
 import { Bug } from 'lucide-react';
 
-import { useIssuesServiceGetIssuesByRunId } from '@/api/queries';
-import { JobStatus } from '@/api/requests';
+import { useRunsServiceGetOrtRunStatistics } from '@/api/queries';
+import { JobStatus, Severity } from '@/api/requests';
 import { LoadingIndicator } from '@/components/loading-indicator';
 import { StatisticsCard } from '@/components/statistics-card';
 import { ToastError } from '@/components/toast-error';
 import {
   getIssueSeverityBackgroundColor,
   getStatusFontColor,
 } from '@/helpers/get-status-class';
-import { calcIssueSeverityCounts } from '@/helpers/item-counts';
-import { ALL_ITEMS } from '@/lib/constants';
 import { toast } from '@/lib/toast';
 
 type IssuesStatisticsCardProps = {
@@ -43,10 +41,11 @@ export const IssuesStatisticsCard = ({
   status,
   runId,
 }: IssuesStatisticsCardProps) => {
-  const { data, isPending, isError, error } = useIssuesServiceGetIssuesByRunId({
-    runId: runId,
-    limit: ALL_ITEMS,
-  });
+  const { data, isPending, isError, error } = useRunsServiceGetOrtRunStatistics(
+    {
+      runId: runId,
+    }
+  );
 
   if (isPending) {
     return (
@@ -71,7 +70,8 @@ export const IssuesStatisticsCard = ({
     return;
   }
 
-  const total = data.pagination.totalCount;
+  const total = data.issuesCount;
+  const counts = data.issuesCountBySeverity;
 
   const jobIsScheduled = status !== undefined;
   const jobIsFinished =
@@ -92,11 +92,11 @@ export const IssuesStatisticsCard = ({
       value={value}
       description={description}
       counts={
-        total
-          ? calcIssueSeverityCounts(data.data).map(({ severity, count }) => ({
+        counts
+          ? Object.entries(counts).map(([severity, count]) => ({
               key: severity,
-              count,
-              color: getIssueSeverityBackgroundColor(severity),
+              count: count,
+              color: getIssueSeverityBackgroundColor(severity as Severity),
             }))
           : []
       }

diff --git a/...s/$productId/repositories/$repoId/runs/$runIndex/-components/packages-statistics-card.tsx b/...s/$productId/repositories/$repoId/runs/$runIndex/-components/packages-statistics-card.tsx
@@ -19,7 +19,7 @@
 
 import { ListTree } from 'lucide-react';
 
-import { usePackagesServiceGetPackagesByRunId } from '@/api/queries';
+import { useRunsServiceGetOrtRunStatistics } from '@/api/queries';
 import { JobStatus } from '@/api/requests';
 import { LoadingIndicator } from '@/components/loading-indicator';
 import { StatisticsCard } from '@/components/statistics-card';
@@ -28,8 +28,6 @@ import {
   getEcosystemBackgroundColor,
   getStatusFontColor,
 } from '@/helpers/get-status-class';
-import { calcPackageEcosystemCounts } from '@/helpers/item-counts';
-import { ALL_ITEMS } from '@/lib/constants';
 import { toast } from '@/lib/toast';
 
 type PackagesStatisticsCardProps = {
@@ -43,11 +41,11 @@ export const PackagesStatisticsCard = ({
   status,
   runId,
 }: PackagesStatisticsCardProps) => {
-  const { data, isPending, isError, error } =
-    usePackagesServiceGetPackagesByRunId({
+  const { data, isPending, isError, error } = useRunsServiceGetOrtRunStatistics(
+    {
       runId: runId,
-      limit: ALL_ITEMS,
-    });
+    }
+  );
 
   if (isPending) {
     return (
@@ -74,7 +72,8 @@ export const PackagesStatisticsCard = ({
     return;
   }
 
-  const total = data.pagination.totalCount;
+  const total = data.packagesCount;
+  const counts = data.ecosystems;
 
   const jobIsScheduled = status !== undefined;
   const jobIsFinished =
@@ -96,17 +95,11 @@ export const PackagesStatisticsCard = ({
       )}
       value={value}
       description={description}
-      counts={
-        total
-          ? calcPackageEcosystemCounts(data.data).map(
-              ({ ecosystem, count }) => ({
-                key: ecosystem,
-                count,
-                color: getEcosystemBackgroundColor(ecosystem),
-              })
-            )
-          : []
-      }
+      counts={counts?.map(({ name, count }) => ({
+        key: name,
+        count: count,
+        color: getEcosystemBackgroundColor(name),
+      }))}
       className='h-full hover:bg-muted/50'
     />
   );

diff --git a/...uctId/repositories/$repoId/runs/$runIndex/-components/rule-violations-statistics-card.tsx b/...uctId/repositories/$repoId/runs/$runIndex/-components/rule-violations-statistics-card.tsx
@@ -19,17 +19,15 @@
 
 import { Scale } from 'lucide-react';
 
-import { useRuleViolationsServiceGetRuleViolationsByRunId } from '@/api/queries';
-import { JobStatus } from '@/api/requests';
+import { useRunsServiceGetOrtRunStatistics } from '@/api/queries';
+import { JobStatus, Severity } from '@/api/requests';
 import { LoadingIndicator } from '@/components/loading-indicator';
 import { StatisticsCard } from '@/components/statistics-card';
 import { ToastError } from '@/components/toast-error';
 import {
   getRuleViolationSeverityBackgroundColor,
   getStatusFontColor,
 } from '@/helpers/get-status-class';
-import { calcRuleViolationSeverityCounts } from '@/helpers/item-counts';
-import { ALL_ITEMS } from '@/lib/constants';
 import { toast } from '@/lib/toast';
 
 type RuleViolationsStatisticsCardProps = {
@@ -43,11 +41,11 @@ export const RuleViolationsStatisticsCard = ({
   status,
   runId,
 }: RuleViolationsStatisticsCardProps) => {
-  const { data, isPending, isError, error } =
-    useRuleViolationsServiceGetRuleViolationsByRunId({
+  const { data, isPending, isError, error } = useRunsServiceGetOrtRunStatistics(
+    {
       runId: runId,
-      limit: ALL_ITEMS,
-    });
+    }
+  );
 
   if (isPending) {
     return (
@@ -74,7 +72,8 @@ export const RuleViolationsStatisticsCard = ({
     return;
   }
 
-  const total = data.pagination.totalCount;
+  const total = data.ruleViolationsCount;
+  const counts = data.ruleViolationsCountBySeverity;
 
   const jobIsScheduled = status !== undefined;
   const jobIsFinished =
@@ -95,14 +94,14 @@ export const RuleViolationsStatisticsCard = ({
       value={value}
       description={description}
       counts={
-        total
-          ? calcRuleViolationSeverityCounts(data.data).map(
-              ({ severity, count }) => ({
-                key: severity,
-                count,
-                color: getRuleViolationSeverityBackgroundColor(severity),
-              })
-            )
+        counts
+          ? Object.entries(counts).map(([severity, count]) => ({
+              key: severity,
+              count: count,
+              color: getRuleViolationSeverityBackgroundColor(
+                severity as Severity
+              ),
+            }))
           : []
       }
       className='h-full hover:bg-muted/50'

diff --git a/...uctId/repositories/$repoId/runs/$runIndex/-components/vulnerabilities-statistics-card.tsx b/...uctId/repositories/$repoId/runs/$runIndex/-components/vulnerabilities-statistics-card.tsx
@@ -19,17 +19,15 @@
 
 import { ShieldQuestion } from 'lucide-react';
 
-import { useVulnerabilitiesServiceGetVulnerabilitiesByRunId } from '@/api/queries';
-import { JobStatus } from '@/api/requests';
+import { useRunsServiceGetOrtRunStatistics } from '@/api/queries';
+import { JobStatus, VulnerabilityRating } from '@/api/requests';
 import { LoadingIndicator } from '@/components/loading-indicator';
 import { StatisticsCard } from '@/components/statistics-card';
 import { ToastError } from '@/components/toast-error';
 import {
   getStatusFontColor,
   getVulnerabilityRatingBackgroundColor,
 } from '@/helpers/get-status-class';
-import { calcVulnerabilityRatingCounts } from '@/helpers/item-counts';
-import { ALL_ITEMS } from '@/lib/constants';
 import { toast } from '@/lib/toast';
 
 type VulnerabilitiesStatisticsCardProps = {
@@ -43,11 +41,11 @@ export const VulnerabilitiesStatisticsCard = ({
   status,
   runId,
 }: VulnerabilitiesStatisticsCardProps) => {
-  const { data, isPending, isError, error } =
-    useVulnerabilitiesServiceGetVulnerabilitiesByRunId({
+  const { data, isPending, isError, error } = useRunsServiceGetOrtRunStatistics(
+    {
       runId: runId,
-      limit: ALL_ITEMS,
-    });
+    }
+  );
 
   if (isPending) {
     return (
@@ -74,7 +72,8 @@ export const VulnerabilitiesStatisticsCard = ({
     return;
   }
 
-  const total = data.pagination.totalCount;
+  const total = data.vulnerabilitiesCount;
+  const counts = data.vulnerabilitiesCountByRating;
 
   const jobIsScheduled = status !== undefined;
   const jobIsFinished =
@@ -97,14 +96,14 @@ export const VulnerabilitiesStatisticsCard = ({
       value={value}
       description={description}
       counts={
-        total
-          ? calcVulnerabilityRatingCounts(data.data).map(
-              ({ rating, count }) => ({
-                key: rating,
-                count,
-                color: getVulnerabilityRatingBackgroundColor(rating),
-              })
-            )
+        counts
+          ? Object.entries(counts).map(([rating, count]) => ({
+              key: rating,
+              count: count,
+              color: getVulnerabilityRatingBackgroundColor(
+                rating as VulnerabilityRating
+              ),
+            }))
           : []
       }
       className='h-full hover:bg-muted/50'