fix(ui): calculate completed scans count correctly (#898)

* fix(scans-count): completed scans count * refactor(scans-count): create separate displays * refactor(scans-count): remove default export * refactor(scans-count): simplify logic * refactor(scans-count): simplify logic
openclarity · Nov 3, 2023 · 7cbbc42 · 7cbbc42
1 parent d479053
commit 7cbbc42
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/ui/src/layout/Dashboard/CounterDisplay/index.js b/ui/src/layout/Dashboard/CounterDisplay/index.js
@@ -1,19 +1,47 @@
-import React from 'react';
-import { useFetch } from 'hooks';
-import { formatNumber } from 'utils/utils';
+import React, {useMemo} from 'react';
+import {useFetch} from 'hooks';
+import {formatNumber} from 'utils/utils';
+
+import COLORS from "../../../utils/scss_variables.module.scss";
+import {APIS} from "../../../utils/systemConsts";
 
 import './counter-display.scss';
 
-const CounterDisplay = ({url, title, background}) => {
+export const ScanCounterDisplay = () => {
+    const [{data, error, loading}] = useFetch(
+        APIS.SCANS,
+        {
+            queryParams: {
+                "$count": true,
+                "$top": 1,
+                "$select": "id",
+                "$filter": "state eq 'Aborted' or state eq 'Failed' or state eq 'Done'",
+            }
+        }
+    );
+
+    return (
+        <div className="dashboard-counter" style={{background: COLORS["color-gradient-green"]}}>
+            {loading || error ? "" :
+                <div className="dashboard-counter-content">
+                    <div className="dashboard-counter-count">{formatNumber(data.count)}</div>
+                    Completed scans
+                </div>
+            }
+        </div>
+    )
+}
+
+export const CounterDisplay = ({url, title, background}) => {
     const [{data, error, loading}] = useFetch(url, {queryParams: {"$count": true, "$top": 1, "$select": "id"}});
-    
+
     return (
         <div className="dashboard-counter" style={{background}}>
-            {loading || error ? "" : 
-                <div className="dashboard-counter-content"><div className="dashboard-counter-count">{formatNumber(data.count)}</div>{` ${title}`}</div>
+            {loading || error ? "" :
+                <div className="dashboard-counter-content">
+                    <div className="dashboard-counter-count">{formatNumber(data.count)}</div>
+                    {` ${title}`}</div>
             }
         </div>
     )
 }
-
-export default CounterDisplay;
diff --git a/ui/src/layout/Dashboard/index.js b/ui/src/layout/Dashboard/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useFetch } from 'hooks';
 import Loader from 'components/Loader';
 import { APIS } from 'utils/systemConsts';
-import CounterDisplay from './CounterDisplay';
+import { CounterDisplay, ScanCounterDisplay } from './CounterDisplay';
 import FindingsTrendsWidget from './FindingsTrendsWidget';
 import RiskiestRegionsWidget from './RiskiestRegionsWidget';
 import RiskiestAssetsWidget from './RiskiestAssetsWidget';
@@ -14,9 +14,8 @@ import COLORS from 'utils/scss_variables.module.scss';
 import './dashboard.scss';
 
 const COUNTERS_CONFIG = [
-    {url: APIS.SCANS, title: "Completed scans", background: COLORS["color-gradient-green"]},
     {url: APIS.ASSETS, title: "Assets", background: COLORS["color-gradient-blue"]},
-    {url: APIS.FINDINGS, title: "Risky findings", background: COLORS["color-gradient-yellow"]}
+    {url: APIS.FINDINGS, title: "Findings", background: COLORS["color-gradient-yellow"]}
 ];
 
 const Dashboard = () => {
@@ -36,6 +35,7 @@ const Dashboard = () => {
 
     return (
         <div className="dashboard-page-wrapper">
+            <ScanCounterDisplay />
             {
                 COUNTERS_CONFIG.map(({url, title, background}, index) => (
                     <CounterDisplay key={index} url={url} title={title} background={background} />