Fix [Job Artifacts] Drilling from a run's artifact tab to a specific artifact results is a full query

src/components/ArtifactsActionBar/ArtifactsActionBar.js

@@ -23,7 +23,7 @@ import arrayMutators from 'final-form-arrays'
 import { Form } from 'react-final-form'
 import { useDispatch, useSelector } from 'react-redux'
 import { isEmpty } from 'lodash'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 import { RoundedIcon, Button } from 'igz-controls/components'
@@ -38,7 +38,7 @@ import {
   TAG_FILTER_ALL_ITEMS
 } from '../../constants'
 import detailsActions from '../../actions/details'
-import { removeFilters, setFilters } from '../../reducers/filtersReducer'
+import { removeFilters, setFilters, setModalFiltersValues } from '../../reducers/filtersReducer'
 import { setFieldState } from 'igz-controls/utils/form.util'
 
 import { ReactComponent as RefreshIcon } from 'igz-controls/images/refresh.svg'
@@ -61,6 +61,7 @@ function ArtifactsActionBar({
   const changes = useSelector(store => store.detailsStore.changes)
   const dispatch = useDispatch()
   const params = useParams()
+  let [searchParams] = useSearchParams()
   const navigate = useNavigate()
   const formRef = React.useRef(
     createForm({
@@ -82,6 +83,29 @@ function ArtifactsActionBar({
     }
   }, [params.projectName, page, tab, dispatch])
 
+  useEffect(() => {
+    if (searchParams.get('useUrlParamsAsFilter') === 'true') {
+      if (params.name) {
+        dispatch(
+          setFilters({
+            name: params.name,
+            iter: ''
+          })
+        )
+        dispatch(
+          setModalFiltersValues({
+            name: filterMenuName,
+            value: { iter: '' }
+          })
+        )
+      }
+    }
+  }, [searchParams, params, dispatch, filterMenuName])
+
+  useEffect(() => {
+    formRef.current?.change('name', filtersStore.name)
+  }, [filtersStore.name])
+
   const applyChanges = async (name, filterMenuModal) => {
     const filtersHelperResult = await filtersHelper(changes, dispatch)
 
@@ -209,4 +233,4 @@ ArtifactsActionBar.propTypes = {
   tab: PropTypes.string
 }
 
-export default ArtifactsActionBar
+export default ArtifactsActionBar

src/components/Datasets/Datasets.js

@@ -33,7 +33,6 @@ import {
   GROUP_BY_NAME,
   GROUP_BY_NONE,
   REQUEST_CANCELED,
-  SHOW_ITERATIONS,
   TAG_FILTER_ALL_ITEMS
 } from '../../constants'
 import {
@@ -64,6 +63,7 @@ import { useGroupContent } from '../../hooks/groupContent.hook'
 import { useSortTable } from '../../hooks/useSortTable.hook'
 import { useVirtualization } from '../../hooks/useVirtualization.hook'
 import { useYaml } from '../../hooks/yaml.hook'
+import { useInitialArtifactsFetch } from '../../hooks/artifacts.hook'
 
 import './datasets.scss'
 import cssVariables from './datasets.scss'
@@ -117,7 +117,7 @@ const Datasets = () => {
     filters => {
       abortControllerRef.current = new AbortController()
 
-      dispatch(
+      return dispatch(
         fetchDataSets({
           project: params.projectName,
           filters,
@@ -301,21 +301,20 @@ const Datasets = () => {
       }
     })
 
+  useInitialArtifactsFetch(
+    fetchData,
+    urlTagOption,
+    datasets.length,
+    setSelectedRowData,
+    createDatasetsRowData
+  )
+
   useEffect(() => {
     if (params.name && params.tag && pageData.details.menu.length > 0) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
     }
   }, [location, navigate, pageData.details.menu, params.name, params.tab, params.tag])
 
-  useEffect(() => {
-    if (urlTagOption && datasets.length === 0) {
-      fetchData({
-        tag: urlTagOption,
-        iter: SHOW_ITERATIONS
-      })
-    }
-  }, [datasets.length, fetchData, urlTagOption])
-
   useEffect(() => {
     dispatch(setFilters({ groupBy: GROUP_BY_NONE }))
   }, [dispatch, params.projectName])

src/components/DetailsArtifacts/detailsArtifacts.util.js

@@ -73,10 +73,10 @@ export const generateArtifactsTabContent = (artifacts, params, iteration, showAr
         artifact.db_key || artifact.key
       }/${artifact.tag ? artifact.tag : artifact.tree ?? TAG_FILTER_LATEST}${
         iteration ? `/${iteration}` : ''
-      }/overview`,
+      }/overview?useUrlParamsAsFilter=true`,
       dataset: `/projects/${params.projectName}/${DATASETS_TAB}/${artifact.db_key || artifact.key}/${
         artifact.tag ? artifact.tag : artifact.tree ?? TAG_FILTER_LATEST
-      }${iteration ? `/${iteration}` : ''}/overview`
+      }${iteration ? `/${iteration}` : ''}/overview?useUrlParamsAsFilter=true`
     }
 
     return [
@@ -125,7 +125,7 @@ export const generateArtifactsTabContent = (artifacts, params, iteration, showAr
                   artifactScreenLinks[artifact.kind] ??
                   `/projects/${params.projectName}/files/${artifact.db_key || artifact.key}/${
                     artifact.tag ? artifact.tag : artifact.tree ?? TAG_FILTER_LATEST
-                  }${iteration ? `/${iteration}` : ''}/overview`
+                  }${iteration ? `/${iteration}` : ''}/overview?useUrlParamsAsFilter=true`
                 }
               >
                 <DetailsIcon />

src/components/Files/Files.js

@@ -34,7 +34,6 @@ import {
   GROUP_BY_NAME,
   GROUP_BY_NONE,
   REQUEST_CANCELED,
-  SHOW_ITERATIONS,
   TAG_FILTER_ALL_ITEMS
 } from '../../constants'
 import {
@@ -63,6 +62,7 @@ import { setNotification } from '../../reducers/notificationReducer'
 import { useGetTagOptions } from '../../hooks/useGetTagOptions.hook'
 import { useGroupContent } from '../../hooks/groupContent.hook'
 import { useSortTable } from '../../hooks/useSortTable.hook'
+import { useInitialArtifactsFetch } from '../../hooks/artifacts.hook'
 import { useVirtualization } from '../../hooks/useVirtualization.hook'
 import { useYaml } from '../../hooks/yaml.hook'
 
@@ -113,7 +113,7 @@ const Files = () => {
     filters => {
       abortControllerRef.current = new AbortController()
 
-      dispatch(
+      return dispatch(
         fetchFiles({
           project: params.projectName,
           filters,
@@ -293,18 +293,20 @@ const Files = () => {
     handleRefresh(filesFilters)
   }
 
+  useInitialArtifactsFetch(
+    fetchData,
+    urlTagOption,
+    files.length,
+    setSelectedRowData,
+    createFilesRowData
+  )
+
   useEffect(() => {
     if (params.name && params.tag && pageData.details.menu.length > 0) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
     }
   }, [navigate, location, pageData.details.menu, params.name, params.tag, params.tab])
 
-  useEffect(() => {
-    if (urlTagOption) {
-      fetchData({ tag: urlTagOption, iter: SHOW_ITERATIONS })
-    }
-  }, [fetchData, urlTagOption])
-
   useEffect(() => {
     const tagAbortControllerCurrent = tagAbortControllerRef.current
 

src/components/FilterMenuModal/FilterMenuModal.js

@@ -87,6 +87,16 @@ const FilterMenuModal = ({
     }
   }, [dispatch, filtersData, filterMenuName, values])
 
+  useEffect(() => {
+    if (!isEqual(initialValues, values)) {
+      formRef.current?.batch(() => {
+        for (const filterName in values) {
+          formRef.current?.change(filterName, values[filterName])
+        }
+      })
+    }
+  }, [initialValues, values])
+
   const hideFiltersWizard = useCallback(event => {
     if (
       !event.target.closest('.filters-button') &&

src/components/ModelsPage/Models/Models.js

@@ -49,7 +49,6 @@ import {
   MODELS_FILTERS,
   REQUEST_CANCELED,
   MODEL_TYPE,
-  SHOW_ITERATIONS,
   FUNCTION_TYPE_SERVING
 } from '../../../constants'
 import {
@@ -77,6 +76,7 @@ import { useGetTagOptions } from '../../../hooks/useGetTagOptions.hook'
 import { getViewMode } from '../../../utils/helper'
 import { useMode } from '../../../hooks/mode.hook'
 import { useVirtualization } from '../../../hooks/useVirtualization.hook'
+import { useInitialArtifactsFetch } from '../../../hooks/artifacts.hook'
 
 const Models = ({ fetchModelFeatureVector }) => {
   const [models, setModels] = useState([])
@@ -345,21 +345,20 @@ const Models = ({ fetchModelFeatureVector }) => {
     handleRefresh(modelsFilters)
   }
 
+  useInitialArtifactsFetch(
+    fetchData,
+    urlTagOption,
+    models.length,
+    setSelectedRowData,
+    createModelsRowData
+  )
+
   useEffect(() => {
     if (params.name && params.tag && pageData.details.menu.length > 0) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
     }
   }, [navigate, location, pageData.details.menu, params.name, params.tag, params.tab])
 
-  useEffect(() => {
-    if (urlTagOption) {
-      fetchData({
-        tag: urlTagOption,
-        iter: SHOW_ITERATIONS
-      })
-    }
-  }, [fetchData, urlTagOption])
-
   useEffect(() => {
     const tagAbortControllerCurrent = tagAbortControllerRef.current
 

src/hooks/artifacts.hook.js

@@ -0,0 +1,79 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+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 { useEffect } from 'react'
+import { useParams, useSearchParams } from 'react-router-dom'
+import { useDispatch } from 'react-redux'
+
+import { GROUP_BY_NAME, SHOW_ITERATIONS } from '../constants'
+import { setFilters } from '../reducers/filtersReducer'
+import { sortListByDate } from '../utils'
+
+export const useInitialArtifactsFetch = (
+  fetchData,
+  urlTagOption,
+  artifactsLength,
+  setExpandedRowsData,
+  createArtifactsRowData
+) => {
+  const [searchParams] = useSearchParams()
+  const params = useParams()
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    if (urlTagOption && artifactsLength === 0) {
+      let filtersLocal = { tag: urlTagOption, iter: SHOW_ITERATIONS }
+
+      if (searchParams.get('useUrlParamsAsFilter') === 'true') {
+        filtersLocal = { tag: urlTagOption, iter: '', name: params.name }
+
+        dispatch(
+          setFilters({
+            groupBy: GROUP_BY_NAME
+          })
+        )
+      }
+
+      fetchData(filtersLocal).then(result => {
+        if (filtersLocal.name) {
+          setExpandedRowsData(state => ({
+            ...state,
+            [filtersLocal.name]: {
+              content: sortListByDate(result, 'updated', false).map(artifact =>
+                createArtifactsRowData(artifact, params.projectName)
+              )
+            },
+            error: null,
+            loading: false
+          }))
+        }
+      })
+    }
+  }, [
+    dispatch,
+    fetchData,
+    artifactsLength,
+    params.name,
+    params.projectName,
+    searchParams,
+    urlTagOption,
+    setExpandedRowsData,
+    createArtifactsRowData
+  ])
+}