Impl [Artifacts|Datasets|Models] Reduce load on UI on list requests

src/api/artifacts-api.js

@@ -17,6 +17,7 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
+import { isNil } from 'lodash'
 import { mainHttpClient, mainHttpClientV2 } from '../httpClient'
 import {
   ARTIFACT_OTHER_TYPE,
@@ -109,9 +110,10 @@ const artifactsApi = {
         category
       }
     }),
-  getArtifact: (project, artifactName, artifactTag) => {
+  getExpandedArtifact: (project, artifactName, artifactTag) => {
     const params = {
-      name: artifactName
+      name: artifactName,
+      format: 'minimal'
     }
 
     if (artifactTag) {
@@ -120,10 +122,25 @@ const artifactsApi = {
 
     return mainHttpClientV2.get(`/projects/${project}/artifacts`, { params })
   },
+  getArtifact: (projectName, artifactName, tree, tag, iter) => {
+    const newConfig = {
+      params: { tree: tree }
+    }
+
+    if (tag) {
+      newConfig.params.tag = tag
+    }
+
+    if (!isNil(iter)) {
+      newConfig.params.iter = iter
+    }
+
+    return mainHttpClientV2.get(`/projects/${projectName}/artifacts/${artifactName}`, newConfig)
+  },
   getArtifacts: (project, filters, config) => {
     return fetchArtifacts(project, filters, config)
   },
-  getDataSet: (project, dataSet, iter, tag) => {
+  getExpandedDataSet: (project, dataSet, iter, tag) => {
     return fetchArtifacts(
       project,
       {},
@@ -132,20 +149,21 @@ const artifactsApi = {
           category: DATASET_TYPE,
           name: dataSet,
           tag: tag === TAG_FILTER_ALL_ITEMS ? '*' : tag,
-          'best-iteration': Boolean(iter)
+          'best-iteration': Boolean(iter),
+          format: 'minimal'
         }
       }
     )
   },
   getDataSets: (project, filters, config = {}) => {
     const newConfig = {
       ...config,
-      params: { category: DATASET_TYPE }
+      params: { ...config.params, category: DATASET_TYPE }
     }
 
     return fetchArtifacts(project, filters, newConfig, true)
   },
-  getFile: (project, file, iter, tag) => {
+  getExpandedFile: (project, file, iter, tag) => {
     return fetchArtifacts(
       project,
       {},
@@ -154,20 +172,21 @@ const artifactsApi = {
           category: ARTIFACT_OTHER_TYPE,
           name: file,
           tag: tag === TAG_FILTER_ALL_ITEMS ? '*' : tag,
-          'best-iteration': Boolean(iter)
+          'best-iteration': Boolean(iter),
+          format: 'minimal'
         }
       }
     )
   },
   getFiles: (project, filters, config = {}) => {
     const newConfig = {
       ...config,
-      params: { category: ARTIFACT_OTHER_TYPE, format: 'full' }
+      params: { ...config.params, category: ARTIFACT_OTHER_TYPE }
     }
 
     return fetchArtifacts(project, filters, newConfig, true)
   },
-  getModel: (project, model, iter, tag) => {
+  getExpandedModel: (project, model, iter, tag) => {
     return fetchArtifacts(
       project,
       {},
@@ -176,7 +195,8 @@ const artifactsApi = {
           category: MODEL_TYPE,
           name: model,
           tag: tag === TAG_FILTER_ALL_ITEMS ? '*' : tag,
-          'best-iteration': Boolean(iter)
+          'best-iteration': Boolean(iter),
+          format: 'minimal'
         }
       }
     )
@@ -196,7 +216,7 @@ const artifactsApi = {
   getModels: (project, filters, config = {}) => {
     const newConfig = {
       ...config,
-      params: { category: MODEL_TYPE, format: 'full' }
+      params: { ...config.params, category: MODEL_TYPE }
     }
 
     return fetchArtifacts(project, filters, newConfig, true)

src/components/Datasets/Datasets.js

@@ -26,9 +26,10 @@ import AddArtifactTagPopUp from '../../elements/AddArtifactTagPopUp/AddArtifactT
 import RegisterArtifactModal from '../RegisterArtifactModal/RegisterArtifactModal'
 
 import {
-  DATASET_TYPE,
   DATASETS_FILTERS,
   DATASETS_PAGE,
+  DATASETS_TAB,
+  DATASET_TYPE,
   FILTER_MENU_MODAL,
   GROUP_BY_NAME,
   GROUP_BY_NONE,
@@ -38,8 +39,8 @@ import {
 } from '../../constants'
 import {
   fetchArtifactTags,
-  fetchDataSet,
   fetchDataSets,
+  fetchExpandedDataSet,
   removeDataSet,
   removeDataSets
 } from '../../reducers/artifactsReducer'
@@ -58,6 +59,7 @@ import { getFilterTagOptions, setFilters } from '../../reducers/filtersReducer'
 import { getViewMode } from '../../utils/helper'
 import { isDetailsTabExists } from '../../utils/isDetailsTabExists'
 import { openPopUp } from 'igz-controls/utils/common.util'
+import { setFullSelectedArtifact } from '../../utils/artifacts.util'
 import { setNotification } from '../../reducers/notificationReducer'
 import { useGetTagOptions } from '../../hooks/useGetTagOptions.hook'
 import { useGroupContent } from '../../hooks/groupContent.hook'
@@ -71,6 +73,7 @@ import cssVariables from './datasets.scss'
 const Datasets = () => {
   const [datasets, setDatasets] = useState([])
   const [selectedDataset, setSelectedDataset] = useState({})
+  const [selectedDatasetMin, setSelectedDatasetMin] = useState({})
   const [selectedRowData, setSelectedRowData] = useState({})
   const [largeRequestErrorMessage, setLargeRequestErrorMessage] = useState('')
   const [convertedYaml, toggleConvertedYaml] = useYaml('')
@@ -111,6 +114,17 @@ const Datasets = () => {
     [selectedDataset.tag]
   )
 
+  useEffect(() => {
+    setFullSelectedArtifact(
+      DATASETS_TAB,
+      dispatch,
+      navigate,
+      selectedDatasetMin,
+      setSelectedDataset,
+      params.projectName
+    )
+  }, [dispatch, navigate, params.projectName, selectedDatasetMin])
+
   const fetchData = useCallback(
     filters => {
       abortControllerRef.current = new AbortController()
@@ -123,6 +137,9 @@ const Datasets = () => {
             ui: {
               controller: abortControllerRef.current,
               setLargeRequestErrorMessage
+            },
+            params: {
+              format: 'minimal'
             }
           }
         })
@@ -169,7 +186,7 @@ const Datasets = () => {
         artifact,
         onAddTag: () => handleRefresh(datasetsFilters),
         getArtifact: () =>
-          fetchDataSet({
+          fetchExpandedDataSet({
             project: params.projectName,
             dataSet: artifact.db_key,
             iter: true,
@@ -182,17 +199,18 @@ const Datasets = () => {
   )
 
   const actionsMenu = useMemo(
-    () => (dataset, menuPosition) =>
+    () => (datasetMin, menuPosition) =>
       generateActionsMenu(
-        dataset,
+        datasetMin,
         frontendSpec,
         dispatch,
         toggleConvertedYaml,
         handleAddTag,
         params.projectName,
         handleRefresh,
         datasetsFilters,
-        menuPosition
+        menuPosition,
+        selectedDataset
       ),
     [
       datasetsFilters,
@@ -201,6 +219,7 @@ const Datasets = () => {
       handleAddTag,
       handleRefresh,
       params.projectName,
+      selectedDataset,
       toggleConvertedYaml
     ]
   )
@@ -327,7 +346,7 @@ const Datasets = () => {
       params.iter,
       params.uid,
       params.projectName,
-      setSelectedDataset,
+      setSelectedDatasetMin,
       navigate
     )
   }, [
@@ -347,7 +366,7 @@ const Datasets = () => {
     return () => {
       setDatasets([])
       dispatch(removeDataSets())
-      setSelectedDataset({})
+      setSelectedDatasetMin({})
       abortControllerRef.current.abort(REQUEST_CANCELED)
       tagAbortControllerCurrent.abort(REQUEST_CANCELED)
     }
@@ -396,7 +415,7 @@ const Datasets = () => {
       selectedDataset={selectedDataset}
       selectedRowData={selectedRowData}
       setDatasets={setDatasets}
-      setSelectedDataset={setSelectedDataset}
+      setSelectedDatasetMin={setSelectedDatasetMin}
       setSelectedRowData={setSelectedRowData}
       sortProps={{ sortTable, selectedColumnName, getSortingIcon }}
       tableContent={sortedTableContent}

src/components/Datasets/DatasetsView.js

@@ -58,7 +58,7 @@ const DatasetsView = React.forwardRef(
       selectedDataset,
       selectedRowData,
       setDatasets,
-      setSelectedDataset,
+      setSelectedDatasetMin,
       setSelectedRowData,
       sortProps,
       tableContent,
@@ -112,13 +112,13 @@ const DatasetsView = React.forwardRef(
                 />
               ) : (
                 <>
-                  {selectedRowData.loading && <Loader />}
+                  {(selectedRowData.loading || artifactsStore.dataSets.datasetLoading) && <Loader />}
                   <Table
                     actionsMenu={actionsMenu}
                     applyDetailsChanges={applyDetailsChanges}
                     applyDetailsChangesCallback={applyDetailsChangesCallback}
                     detailsFormInitialValues={detailsFormInitialValues}
-                    handleCancel={() => setSelectedDataset({})}
+                    handleCancel={() => setSelectedDatasetMin({})}
                     pageData={pageData}
                     retryRequest={handleRefresh}
                     selectedItem={selectedDataset}
@@ -193,7 +193,7 @@ DatasetsView.propTypes = {
   selectedDataset: PropTypes.object.isRequired,
   selectedRowData: PropTypes.object.isRequired,
   setDatasets: PropTypes.func.isRequired,
-  setSelectedDataset: PropTypes.func.isRequired,
+  setSelectedDatasetMin: PropTypes.func.isRequired,
   setSelectedRowData: PropTypes.func.isRequired,
   sortProps: SORT_PROPS,
   tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,