Fix [Artifacts] Change filters to use new component (#2879)

mlrun · Nov 18, 2024 · 9dfbc42 · 9dfbc42
1 parent 194a0f4
commit 9dfbc42
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 196 deletions.
diff --git a/src/components/Datasets/Datasets.js b/src/components/Datasets/Datasets.js
@@ -26,11 +26,9 @@ import AddArtifactTagPopUp from '../../elements/AddArtifactTagPopUp/AddArtifactT
 import RegisterArtifactModal from '../RegisterArtifactModal/RegisterArtifactModal'
 
 import {
-  DATASETS_FILTERS,
   DATASETS_PAGE,
   DATASETS_TAB,
   DATASET_TYPE,
-  FILTER_MENU_MODAL,
   GROUP_BY_NAME,
   GROUP_BY_NONE,
   REQUEST_CANCELED
@@ -82,18 +80,14 @@ const Datasets = () => {
   const location = useLocation()
   const navigate = useNavigate()
   const params = useParams()
-
+  const [datasetsFilters, datasetsModalFilters] = useSelector(state => [
+    state.filtersStore.filterMenu[DATASETS_PAGE],
+    state.filtersStore.filterMenuModal[DATASETS_PAGE]
+  ])
   const abortControllerRef = useRef(new AbortController())
   const tagAbortControllerRef = useRef(new AbortController())
   const datasetsRef = useRef(null)
 
-  const datasetsFilters = useMemo(
-    () => ({
-      name: filtersStore.name,
-      ...filtersStore[FILTER_MENU_MODAL][DATASETS_FILTERS].values
-    }),
-    [filtersStore]
-  )
   const pageData = useMemo(
     () => generatePageData(selectedDataset, viewMode, params),
     [selectedDataset, viewMode, params]
@@ -185,11 +179,12 @@ const Datasets = () => {
     artifact => {
       openPopUp(AddArtifactTagPopUp, {
         artifact,
-        onAddTag: () => handleRefresh(datasetsFilters),
+        onAddTag: () =>
+          handleRefresh({ ...datasetsFilters.values, ...datasetsModalFilters.values }),
         projectName: params.projectName
       })
     },
-    [handleRefresh, params.projectName, datasetsFilters]
+    [params.projectName, handleRefresh, datasetsFilters.values, datasetsModalFilters.values]
   )
 
   const actionsMenu = useMemo(
@@ -202,12 +197,13 @@ const Datasets = () => {
         handleAddTag,
         params.projectName,
         handleRefresh,
-        datasetsFilters,
+        { ...datasetsFilters.values, ...datasetsModalFilters.values },
         menuPosition,
         selectedDataset
       ),
     [
-      datasetsFilters,
+      datasetsFilters.values,
+      datasetsModalFilters.values,
       dispatch,
       frontendSpec,
       handleAddTag,
@@ -246,7 +242,7 @@ const Datasets = () => {
       }
     }
 
-    handleRefresh(datasetsFilters)
+    handleRefresh({ ...datasetsFilters.values, ...datasetsModalFilters.values })
   }
 
   const handleExpand = useCallback(
@@ -257,8 +253,8 @@ const Datasets = () => {
         return {
           ...state,
           [dataSetIdentifier]: {
-            content: sortListByDate(content[dataset.db_key ?? dataset.key], 'updated', false).map(contentItem =>
-              createDatasetsRowData(contentItem, params.projectName, false)
+            content: sortListByDate(content[dataset.db_key ?? dataset.key], 'updated', false).map(
+              contentItem => createDatasetsRowData(contentItem, params.projectName, false)
             ),
             error: null,
             loading: false
@@ -297,11 +293,11 @@ const Datasets = () => {
   const tableContent = useMemo(() => {
     return filtersStore.groupBy === GROUP_BY_NAME
       ? latestItems.map(contentItem => {
-        return createDatasetsRowData(contentItem, params.projectName, frontendSpec, true)
-      })
+          return createDatasetsRowData(contentItem, params.projectName, frontendSpec, true)
+        })
       : datasets.map(contentItem =>
-        createDatasetsRowData(contentItem, params.projectName, frontendSpec)
-      )
+          createDatasetsRowData(contentItem, params.projectName, frontendSpec)
+        )
   }, [datasets, filtersStore.groupBy, frontendSpec, latestItems, params.projectName])
 
   const tableHeaders = useMemo(() => tableContent[0]?.content ?? [], [tableContent])
@@ -321,8 +317,8 @@ const Datasets = () => {
     createRowData: rowItem => createDatasetsRowData(rowItem, params.projectName, frontendSpec),
     fetchData,
     fetchTags,
-    filterModalName: DATASETS_FILTERS,
-    filters: datasetsFilters,
+    filterModalName: DATASETS_PAGE,
+    filters: { ...datasetsFilters.values, ...datasetsModalFilters.values },
     setExpandedRowsData: setSelectedRowData,
     sortExpandedRowsDataBy: 'updated'
   })
@@ -377,10 +373,10 @@ const Datasets = () => {
     openPopUp(RegisterArtifactModal, {
       artifactKind: DATASET_TYPE,
       params,
-      refresh: () => handleRefresh(datasetsFilters),
+      refresh: () => handleRefresh({ ...datasetsFilters.values, ...datasetsModalFilters.values }),
       title: registerDatasetTitle
     })
-  }, [handleRefresh, params, datasetsFilters])
+  }, [params, handleRefresh, datasetsFilters.values, datasetsModalFilters.values])
 
   useEffect(() => setDatasets([]), [filtersStore.tag])
 

diff --git a/src/components/Datasets/DatasetsView.js b/src/components/Datasets/DatasetsView.js
@@ -27,15 +27,15 @@ import Table from '../Table/Table'
 import ArtifactsTableRow from '../../elements/ArtifactsTableRow/ArtifactsTableRow'
 import YamlModal from '../../common/YamlModal/YamlModal'
 import Loader from '../../common/Loader/Loader'
-import ArtifactsActionBar from '../ArtifactsActionBar/ArtifactsActionBar'
 import NoData from '../../common/NoData/NoData'
 import Details from '../Details/Details'
 import WarningMessage from '../../common/WarningMessage/WarningMessage'
+import ActionBar from '../ActionBar/ActionBar'
+import ArtifactsFilters from '../ArtifactsActionBar/ArtifactsFilters'
 
-import { DATASETS_FILTERS, DATASETS_PAGE, FULL_VIEW_MODE } from '../../constants'
+import { DATASETS_PAGE, FULL_VIEW_MODE } from '../../constants'
 import { getNoDataMessage } from '../../utils/getNoDataMessage'
-import { registerDatasetTitle, filters } from './datasets.util'
-import { removeDataSet } from '../../reducers/artifactsReducer'
+import { registerDatasetTitle, filtersConfig } from './datasets.util'
 import { ACTIONS_MENU, VIRTUALIZATION_CONFIG } from '../../types'
 import { SECONDARY_BUTTON } from 'igz-controls/constants'
 import { SORT_PROPS } from 'igz-controls/types'
@@ -84,7 +84,7 @@ const DatasetsView = React.forwardRef(
             {artifactsStore.loading && <Loader />}
             <div className="table-container">
               <div className="content__action-bar-wrapper">
-                <ArtifactsActionBar
+                <ActionBar
                   actionButtons={[
                     {
                       variant: SECONDARY_BUTTON,
@@ -93,29 +93,32 @@ const DatasetsView = React.forwardRef(
                       onClick: handleRegisterDataset
                     }
                   ]}
-                  artifacts={datasets}
-                  filterMenuName={DATASETS_FILTERS}
+                  filterMenuName={DATASETS_PAGE}
+                  filtersConfig={filtersConfig}
                   handleRefresh={handleRefresh}
                   page={DATASETS_PAGE}
-                  removeSelectedItem={removeDataSet}
-                  setContent={setDatasets}
-                  setSelectedRowData={setSelectedRowData}
-                />
+                  withRefreshButton
+                  withoutExpandButton
+                >
+                  <ArtifactsFilters artifacts={datasets} />
+                </ActionBar>
               </div>
               {artifactsStore.loading ? null : datasets.length === 0 ? (
                 <NoData
                   message={getNoDataMessage(
                     filtersStore,
-                    filters,
+                    filtersConfig,
                     requestErrorMessage,
                     DATASETS_PAGE,
                     null,
-                    DATASETS_FILTERS
+                    DATASETS_PAGE
                   )}
                 />
               ) : (
                 <>
-                  {(selectedRowData.loading || artifactsStore.dataSets.datasetLoading) && <Loader />}
+                  {(selectedRowData.loading || artifactsStore.dataSets.datasetLoading) && (
+                    <Loader />
+                  )}
                   {maxArtifactsErrorIsShown && (
                     <WarningMessage
                       message="The query response displays up to 1000 items. Use filters to narrow down the results."

diff --git a/src/components/Datasets/datasets.util.js b/src/components/Datasets/datasets.util.js
@@ -31,10 +31,7 @@ import {
   DATASETS_PAGE,
   DATASETS_TAB,
   FULL_VIEW_MODE,
-  ITERATIONS_FILTER,
-  LABELS_FILTER,
-  NAME_FILTER,
-  TAG_FILTER
+  NAME_FILTER
 } from '../../constants'
 import { PRIMARY_BUTTON } from 'igz-controls/constants'
 import { applyTagChanges, chooseOrFetchArtifact } from '../../utils/artifacts.util'
@@ -72,12 +69,9 @@ export const infoHeaders = [
   { label: 'Labels', id: 'labels' }
 ]
 
-export const filters = [
-  { type: TAG_FILTER, label: 'Version tag:' },
-  { type: NAME_FILTER, label: 'Name:' },
-  { type: LABELS_FILTER, label: 'Labels:' },
-  { type: ITERATIONS_FILTER, label: 'Show best iteration only:' }
-]
+export const filtersConfig = {
+  [NAME_FILTER]: { label: 'Name:' }
+}
 
 export const registerDatasetTitle = 'Register dataset'
 
@@ -190,7 +184,8 @@ export const generateActionsMenu = (
   selectedDataset
 ) => {
   const isTargetPathValid = getIsTargetPathValid(datasetMin ?? {}, frontendSpec)
-  const datasetDataCouldBeDeleted = datasetMin?.target_path?.endsWith('.pq') || datasetMin?.target_path?.endsWith('.parquet')
+  const datasetDataCouldBeDeleted =
+    datasetMin?.target_path?.endsWith('.pq') || datasetMin?.target_path?.endsWith('.parquet')
 
   const getFullDataset = datasetMin => {
     return chooseOrFetchArtifact(dispatch, DATASETS_TAB, selectedDataset, datasetMin)
@@ -207,7 +202,10 @@ export const generateActionsMenu = (
       {
         label: 'Download',
         hidden: menuPosition === ACTION_MENU_PARENT_ROW_EXPANDED,
-        disabled: !isTargetPathValid || datasetMin.size > (frontendSpec.artifact_limits.max_download_size ?? ARTIFACT_MAX_DOWNLOAD_SIZE),
+        disabled:
+          !isTargetPathValid ||
+          datasetMin.size >
+            (frontendSpec.artifact_limits.max_download_size ?? ARTIFACT_MAX_DOWNLOAD_SIZE),
         icon: <DownloadIcon />,
         onClick: datasetMin => {
           getFullDataset(datasetMin).then(dataset => {
@@ -244,29 +242,29 @@ export const generateActionsMenu = (
         hidden: [ACTION_MENU_PARENT_ROW, ACTION_MENU_PARENT_ROW_EXPANDED].includes(menuPosition),
         className: 'danger',
         onClick: () =>
-          datasetDataCouldBeDeleted ?
-            openPopUp(DeleteArtifactPopUp, {
-              artifact: datasetMin,
-              artifactType: DATASET_TYPE,
-              category: DATASET_TYPE,
-              filters: datasetsFilters,
-              handleRefresh
-            })
+          datasetDataCouldBeDeleted
+            ? openPopUp(DeleteArtifactPopUp, {
+                artifact: datasetMin,
+                artifactType: DATASET_TYPE,
+                category: DATASET_TYPE,
+                filters: datasetsFilters,
+                handleRefresh
+              })
             : openDeleteConfirmPopUp(
-              'Delete dataset?',
-              `Do you want to delete the dataset "${datasetMin.db_key}"? Deleted datasets can not be restored.`,
-              () => {
-                handleDeleteArtifact(
-                  dispatch,
-                  projectName,
-                  datasetMin.db_key,
-                  datasetMin.uid,
-                  handleRefresh,
-                  datasetsFilters,
-                  DATASET_TYPE
-                )
-              }
-            )
+                'Delete dataset?',
+                `Do you want to delete the dataset "${datasetMin.db_key}"? Deleted datasets can not be restored.`,
+                () => {
+                  handleDeleteArtifact(
+                    dispatch,
+                    projectName,
+                    datasetMin.db_key,
+                    datasetMin.uid,
+                    handleRefresh,
+                    datasetsFilters,
+                    DATASET_TYPE
+                  )
+                }
+              )
       },
       {
         label: 'Delete all',