perf(ui): improve UI queries to reduce load time (#1985)

Signed-off-by: András Jáky <[email protected]>
openclarity · Aug 9, 2024 · 1d2f6c0 · 1d2f6c0
1 parent 9effd72
commit 1d2f6c0
Show file tree

Hide file tree

Showing 16 changed files with 30 additions and 10 deletions.
diff --git a/ui/src/layout/AssetScans/AssetScanDetails.jsx b/ui/src/layout/AssetScans/AssetScanDetails.jsx
@@ -49,7 +49,7 @@ const AssetScanDetails = () => (
   <DetailsPageWrapper
     backTitle="Asset scans"
     url={APIS.ASSET_SCANS}
-    select="id,scan,asset,summary,status,stats,sbom,vulnerabilities,exploits,misconfigurations,secrets,malware,rootkits"
+    select="id,scan,asset,summary,status,stats,sbom/status,vulnerabilities/status,exploits/status,misconfigurations/status,secrets/status,malware/status,rootkits/status"
     expand="scan($select=id,name,startTime,endTime),asset($select=id,assetInfo),status,stats"
     getTitleData={({ scan, asset }) => {
       const { startTime, name } = scan || {};

diff --git a/ui/src/layout/Dashboard/CounterDisplay/index.jsx b/ui/src/layout/Dashboard/CounterDisplay/index.jsx
@@ -12,7 +12,7 @@ export const ScanCounterDisplay = () => {
     queryParams: {
       $count: true,
       $top: 1,
-      $select: "id",
+      $select: "count",
       $filter:
         "status/state eq 'Aborted' or status/state eq 'Failed' or status/state eq 'Done'",
     },

diff --git a/ui/src/layout/Dashboard/index.jsx b/ui/src/layout/Dashboard/index.jsx
@@ -27,7 +27,9 @@ const COUNTERS_CONFIG = [
 ];
 
 const Dashboard = () => {
-  const [{ data, error, loading }] = useFetch(APIS.SCANS);
+  const [{ data, error, loading }] = useFetch(APIS.SCANS, {
+    queryParams: { $count: true, $select: "count" },
+  });
 
   if (loading) {
     return <Loader />;
@@ -37,7 +39,7 @@ const Dashboard = () => {
     return null;
   }
 
-  if (data.length === 0) {
+  if (data.count === 0) {
     return <EmptyScansDisplay />;
   }
 

diff --git a/ui/src/layout/Findings/Exploits/ExploitsTable.jsx b/ui/src/layout/Findings/Exploits/ExploitsTable.jsx
@@ -34,6 +34,7 @@ const ExploitsTable = () => {
   return (
     <FindingsTablePage
       columns={columns}
+      select="id,findingInfo,firstSeen,lastSeen"
       filterType={FILTER_TYPES.FINDINGS_EXPLOITS}
       filtersConfig={[
         {

diff --git a/ui/src/layout/Findings/FindingsDetailsPage.jsx b/ui/src/layout/Findings/FindingsDetailsPage.jsx
@@ -10,7 +10,7 @@ const FindingsDetailsPage = ({
   <DetailsPageWrapper
     backTitle={backTitle}
     url={APIS.FINDINGS}
-    select="id,findingInfo,firstSeen,lastSeen,summary"
+    select="id,findingInfo,firstSeen,lastSeen"
     getTitleData={getTitleData}
     detailsContent={(props) => <DetailsContent {...props} />}
   />

diff --git a/ui/src/layout/Findings/FindingsTablePage.jsx b/ui/src/layout/Findings/FindingsTablePage.jsx
@@ -19,6 +19,7 @@ const FindingsTablePage = ({
   columns,
   filterType,
   filtersConfig,
+  select,
 }) => {
   const filtersDispatch = useFilterDispatch();
   const filtersState = useFilterState();
@@ -73,6 +74,7 @@ const FindingsTablePage = ({
       <TablePage
         columns={columns}
         url={APIS.FINDINGS}
+        select={select}
         tableTitle={tableTitle}
         filterType={filterType}
         filtersConfig={[

diff --git a/ui/src/layout/Findings/Malware/MalwareTable.jsx b/ui/src/layout/Findings/Malware/MalwareTable.jsx
@@ -35,6 +35,7 @@ const MalwareTable = () => {
   return (
     <FindingsTablePage
       columns={columns}
+      select="id,findingInfo,firstSeen,lastSeen"
       filterType={FILTER_TYPES.FINDINGS_MALWARE}
       filtersConfig={[
         {

diff --git a/ui/src/layout/Findings/Misconfigurations/MisconfigurationTable.jsx b/ui/src/layout/Findings/Misconfigurations/MisconfigurationTable.jsx
@@ -43,6 +43,7 @@ const MisconfigurationsTable = () => {
   return (
     <FindingsTablePage
       columns={columns}
+      select="id,findingInfo,firstSeen,lastSeen"
       filterType={FILTER_TYPES.FINDINGS_MISCONFIGURATIONS}
       filtersConfig={[
         {

diff --git a/ui/src/layout/Findings/Packages/PackagesTable.jsx b/ui/src/layout/Findings/Packages/PackagesTable.jsx
@@ -49,6 +49,7 @@ const PackagesTable = () => {
   return (
     <FindingsTablePage
       columns={columns}
+      select="id,findingInfo,firstSeen,lastSeen"
       filterType={FILTER_TYPES.FINDINGS_PACKAGES}
       filtersConfig={[
         {

diff --git a/ui/src/layout/Findings/Rootkits/RootkitsTable.jsx b/ui/src/layout/Findings/Rootkits/RootkitsTable.jsx
@@ -27,6 +27,7 @@ const RootkitsTable = () => {
   return (
     <FindingsTablePage
       columns={columns}
+      select="id,findingInfo,firstSeen,lastSeen"
       filterType={FILTER_TYPES.FINDINGS_ROOTKITS}
       filtersConfig={[
         {

diff --git a/ui/src/layout/Findings/Secrets/SecretsTable.jsx b/ui/src/layout/Findings/Secrets/SecretsTable.jsx
@@ -35,6 +35,7 @@ const SecretsTable = () => {
   return (
     <FindingsTablePage
       columns={columns}
+      select="id,findingInfo,firstSeen,lastSeen"
       filterType={FILTER_TYPES.FINDINGS_SECRETS}
       filtersConfig={[
         {

diff --git a/ui/src/layout/Findings/Vulnerabilities/VulnerabilitiesTable.jsx b/ui/src/layout/Findings/Vulnerabilities/VulnerabilitiesTable.jsx
@@ -73,6 +73,7 @@ const VulnerabilitiesTable = () => {
   return (
     <FindingsTablePage
       columns={columns}
+      select="id,findingInfo,firstSeen,lastSeen"
       filterType={FILTER_TYPES.FINDINGS_VULNERABILITIES}
       filtersConfig={[
         {

diff --git a/ui/src/layout/Scans/Configurations/ConfigurationDetails/TabConfiguration.jsx b/ui/src/layout/Scans/Configurations/ConfigurationDetails/TabConfiguration.jsx
@@ -38,7 +38,7 @@ const ConfigurationScansDisplay = ({ configId, configName }) => {
   };
 
   const [{ loading, data, error }] = useFetch(APIS.SCANS, {
-    queryParams: { $filter: scansFilter, $count: true },
+    queryParams: { $filter: scansFilter, $count: true, $select: "count" },
   });
 
   if (error) {

diff --git a/ui/src/layout/Scans/Scans/ScansTable.jsx b/ui/src/layout/Scans/Scans/ScansTable.jsx
@@ -113,6 +113,7 @@ const ScansTable = () => {
     <TablePage
       columns={columns}
       url={APIS.SCANS}
+      select="id,name,startTime,endTime,scope,status,summary"
       tableTitle={TABLE_TITLE}
       filterType={FILTER_TYPES.SCANS}
       filtersConfig={[

diff --git a/ui/src/layout/Scans/index.jsx b/ui/src/layout/Scans/index.jsx
@@ -47,8 +47,16 @@ const ScansTabbedPage = () => {
   }, [prevOpenConfigForm, openConfigForm, openDisplayModal]);
 
   const [{ data, error, loading }, fetchData] = useMountMultiFetch([
-    { key: "scans", url: APIS.SCANS },
-    { key: "scanConfigs", url: APIS.SCAN_CONFIGS },
+    {
+      key: "scans",
+      url: APIS.SCANS,
+      queryParams: { $count: true, $select: "count" },
+    },
+    {
+      key: "scanConfigs",
+      url: APIS.SCAN_CONFIGS,
+      queryParams: { $count: true, $select: "count" },
+    },
   ]);
 
   if (loading) {
@@ -63,7 +71,7 @@ const ScansTabbedPage = () => {
 
   return (
     <>
-      {scans?.length === 0 && scanConfigs?.total === 0 ? (
+      {scans?.count === 0 && scanConfigs?.count === 0 ? (
         <EmptyDisplay
           message={
             <>

diff --git a/ui/src/layout/detail-displays/AssetDetails/AssetScansDisplay.jsx b/ui/src/layout/detail-displays/AssetDetails/AssetScansDisplay.jsx
@@ -33,7 +33,7 @@ export const AssetScansDisplay = ({ assetName, assetId }) => {
     queryParams: {
       $filter: filter,
       $count: true,
-      $select: "id,asset,summary,scan",
+      $select: "count",
     },
   });