Skip to content

Commit b7f184e

Browse files
mariana-furykmariana-furyk
committed
[Artifacts][Models][Datasets] artifacts screen needs to change BE query behavior
1 parent 7e11615 commit b7f184e

File tree

12 files changed

+173
-90
lines changed

12 files changed

+173
-90
lines changed

‎src/api/artifacts-api.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@ import {
2323
DATASET_TYPE,
2424
MODEL_TYPE,
2525
SHOW_ITERATIONS,
26-
TAG_FILTER_ALL_ITEMS
26+
TAG_FILTER_ALL_ITEMS,
27+
TAG_FILTER_LATEST
2728
} from '../constants'
2829

29-
const fetchArtifacts = (project, filters, config = {}) => {
30+
const fetchArtifacts = (project, filters, config = {}, withLatestTag) => {
3031
const params = {}
3132

3233
if (filters?.labels) {
@@ -37,6 +38,10 @@ const fetchArtifacts = (project, filters, config = {}) => {
3738
params['best-iteration'] = true
3839
}
3940

41+
if (filters?.tag && (withLatestTag || filters.tag !== TAG_FILTER_LATEST)) {
42+
params.tag = filters.tag === TAG_FILTER_ALL_ITEMS ? '*' : filters.tag
43+
}
44+
4045
if (filters?.name) {
4146
params.name = `~${filters.name}`
4247
}
@@ -121,7 +126,7 @@ const artifactsApi = {
121126
params: { category: DATASET_TYPE }
122127
}
123128

124-
return fetchArtifacts(project, filters, newConfig)
129+
return fetchArtifacts(project, filters, newConfig, true)
125130
},
126131
getFile: (project, file, iter, tag) => {
127132
return fetchArtifacts(
@@ -143,7 +148,7 @@ const artifactsApi = {
143148
params: { category: ARTIFACT_OTHER_TYPE, format: 'full' }
144149
}
145150

146-
return fetchArtifacts(project, filters, newConfig)
151+
return fetchArtifacts(project, filters, newConfig, true)
147152
},
148153
getModel: (project, model, iter, tag) => {
149154
return fetchArtifacts(
@@ -177,7 +182,7 @@ const artifactsApi = {
177182
params: { category: MODEL_TYPE, format: 'full' }
178183
}
179184

180-
return fetchArtifacts(project, filters, newConfig)
185+
return fetchArtifacts(project, filters, newConfig, true)
181186
},
182187
registerArtifact: (project, data) => {
183188
return mainHttpClientV2.post(`/projects/${project}/artifacts`, data)

‎src/common/FormTagFilter/FormTagFilter.js

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import React, { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffe
2121
import PropTypes from 'prop-types'
2222
import { Field, useField } from 'react-final-form'
2323
import { useSelector } from 'react-redux'
24-
import { isEqual } from 'lodash'
24+
import { isEqual, uniq } from 'lodash'
2525
import classnames from 'classnames'
2626

2727
import { PopUpDialog } from 'igz-controls/components'
@@ -33,7 +33,7 @@ import { ReactComponent as Caret } from 'igz-controls/images/dropdown.svg'
3333

3434
import './formTagFilters.scss'
3535

36-
const FormTagFilter = ({ label, name }) => {
36+
const FormTagFilter = ({ content, label, name }) => {
3737
const { input } = useField(name)
3838
const [isDropDownMenuOpen, setIsDropDownMenuOpen] = useState(false)
3939
const [tagFilter, setTagFilter] = useState(input.value)
@@ -51,26 +51,44 @@ const FormTagFilter = ({ label, name }) => {
5151

5252
const options = useMemo(() => {
5353
let newTagOptions = tagFilterOptions
54+
let pageTagList = []
5455

5556
if (filtersStore.tagOptions?.length > 0) {
5657
const defaultOptionsTags = tagFilterOptions.map(option => option.id)
58+
pageTagList = [...tagFilterOptions]
59+
let contentTagList = []
60+
61+
if (content) {
62+
contentTagList = uniq(content.map(contentItem => contentItem.tag))
63+
}
64+
5765
newTagOptions = [
58-
...tagFilterOptions,
5966
...filtersStore.tagOptions.reduce((acc, tag) => {
6067
if (!defaultOptionsTags.includes(tag)) {
61-
acc.push({
62-
label: tag,
63-
id: tag
64-
})
68+
if (contentTagList.includes(tag)) {
69+
pageTagList.push({
70+
label: tag,
71+
id: tag
72+
})
73+
} else {
74+
acc.push({
75+
label: tag,
76+
id: tag
77+
})
78+
}
6579
}
6680

6781
return acc
6882
}, [])
6983
]
84+
85+
if (pageTagList.length > 2) {
86+
pageTagList[pageTagList.length - 1].className = 'page-tag-list'
87+
}
7088
}
7189

72-
return newTagOptions
73-
}, [filtersStore.tagOptions])
90+
return [...pageTagList, ...newTagOptions]
91+
}, [content, filtersStore.tagOptions])
7492

7593
useEffect(() => {
7694
if (!isEqual(options, filtersStore.tagOptions)) {
@@ -193,7 +211,8 @@ const FormTagFilter = ({ label, name }) => {
193211
'form-tag-filter__dropdown-item',
194212
tagFilter.length !== 0 &&
195213
tagFilter === tag.id &&
196-
'form-tag-filter__dropdown-item_selected'
214+
'form-tag-filter__dropdown-item_selected',
215+
tag.className
197216
)
198217

199218
return (

‎src/common/FormTagFilter/formTagFilters.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,5 +82,9 @@
8282
background-color: $alabaster;
8383
}
8484
}
85+
86+
.page-tag-list {
87+
border-bottom: $dividerBorder;
88+
}
8589
}
8690
}

‎src/components/ArtifactsActionBar/ArtifactsActionBar.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import { ReactComponent as RefreshIcon } from 'igz-controls/images/refresh.svg'
4646

4747
function ArtifactsActionBar({
4848
actionButtons,
49+
artifacts,
4950
cancelRequest,
5051
filterMenuName,
5152
handleRefresh,
@@ -155,7 +156,7 @@ function ArtifactsActionBar({
155156
values={filtersInitialState}
156157
wizardClassName="artifacts-filters__wrapper"
157158
>
158-
<ArtifactsFilters filterMenuName={filterMenuName} page={page} />
159+
<ArtifactsFilters artifacts={artifacts} filterMenuName={filterMenuName} page={page} />
159160
</FilterMenuModal>
160161
</div>
161162
<div className="action-bar__actions">
@@ -199,6 +200,7 @@ ArtifactsActionBar.propTypes = {
199200
variant: PropTypes.string.isRequired
200201
})
201202
),
203+
artifacts: PropTypes.arrayOf(PropTypes.object).isRequired,
202204
cancelRequest: PropTypes.func,
203205
filterMenuName: PropTypes.string.isRequired,
204206
handleRefresh: PropTypes.func.isRequired,

‎src/components/ArtifactsActionBar/ArtifactsFilters.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ such restriction.
2020
import React from 'react'
2121
import { OnChange } from 'react-final-form-listeners'
2222
import { useForm } from 'react-final-form'
23+
import PropTypes from 'prop-types'
2324

2425
import { FormInput, FormCheckBox } from 'igz-controls/components'
2526
import FormTagFilter from '../../common/FormTagFilter/FormTagFilter'
@@ -28,7 +29,7 @@ import { ITERATIONS_FILTER, LABELS_FILTER, SHOW_ITERATIONS, TAG_FILTER } from '.
2829

2930
import './artifactsFilters.scss'
3031

31-
const ArtifactsFilters = () => {
32+
const ArtifactsFilters = ({ artifacts }) => {
3233
const form = useForm()
3334

3435
const handleIter = value => {
@@ -46,7 +47,7 @@ const ArtifactsFilters = () => {
4647
<OnChange name={LABELS_FILTER}>{handleLabelsChange}</OnChange>
4748
</div>
4849
<div className="form-row">
49-
<FormTagFilter label="Version tag" name={TAG_FILTER} />
50+
<FormTagFilter content={artifacts} label="Version tag" name={TAG_FILTER} />
5051
</div>
5152
<div className="form-row">
5253
<FormCheckBox
@@ -60,4 +61,8 @@ const ArtifactsFilters = () => {
6061
)
6162
}
6263

64+
ArtifactsFilters.propTypes = {
65+
artifacts: PropTypes.arrayOf(PropTypes.object).isRequired
66+
}
67+
6368
export default ArtifactsFilters

‎src/components/Datasets/Datasets.js

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ such restriction.
2020
import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react'
2121
import { useDispatch, useSelector } from 'react-redux'
2222
import { useLocation, useNavigate, useParams } from 'react-router-dom'
23-
import { isNil } from 'lodash'
2423

2524
import DatasetsView from './DatasetsView'
2625
import AddArtifactTagPopUp from '../../elements/AddArtifactTagPopUp/AddArtifactTagPopUp'
@@ -34,9 +33,11 @@ import {
3433
GROUP_BY_NAME,
3534
GROUP_BY_NONE,
3635
REQUEST_CANCELED,
36+
SHOW_ITERATIONS,
3737
TAG_FILTER_ALL_ITEMS
3838
} from '../../constants'
3939
import {
40+
fetchArtifactTags,
4041
fetchDataSet,
4142
fetchDataSets,
4243
removeDataSet,
@@ -56,8 +57,7 @@ import { getArtifactIdentifier } from '../../utils/getUniqueIdentifier'
5657
import { getViewMode } from '../../utils/helper'
5758
import { isDetailsTabExists } from '../../utils/isDetailsTabExists'
5859
import { openPopUp } from 'igz-controls/utils/common.util'
59-
import { setArtifactTags } from '../../utils/artifacts.util'
60-
import { setFilters } from '../../reducers/filtersReducer'
60+
import { getFilterTagOptions, setFilters } from '../../reducers/filtersReducer'
6161
import { setNotification } from '../../reducers/notificationReducer'
6262
import { useGetTagOptions } from '../../hooks/useGetTagOptions.hook'
6363
import { useGroupContent } from '../../hooks/groupContent.hook'
@@ -66,12 +66,16 @@ import { useYaml } from '../../hooks/yaml.hook'
6666

6767
const Datasets = () => {
6868
const [datasets, setDatasets] = useState([])
69-
const [allDatasets, setAllDatasets] = useState([])
7069
const [selectedDataset, setSelectedDataset] = useState({})
7170
const [selectedRowData, setSelectedRowData] = useState({})
7271
const [largeRequestErrorMessage, setLargeRequestErrorMessage] = useState('')
7372
const [convertedYaml, toggleConvertedYaml] = useYaml('')
74-
const [urlTagOption] = useGetTagOptions(null, filters, null, DATASETS_FILTERS)
73+
const [urlTagOption] = useGetTagOptions(
74+
fetchArtifactTags,
75+
filters,
76+
DATASET_TYPE,
77+
DATASETS_FILTERS
78+
)
7579
const artifactsStore = useSelector(store => store.artifactsStore)
7680
const filtersStore = useSelector(store => store.filtersStore)
7781
const datasetsRef = useRef(null)
@@ -118,33 +122,33 @@ const Datasets = () => {
118122
})
119123
)
120124
.unwrap()
121-
.then(dataSetsResponse => {
122-
if (dataSetsResponse) {
123-
setArtifactTags(
124-
dataSetsResponse,
125-
setDatasets,
126-
setAllDatasets,
127-
filters,
128-
dispatch,
129-
DATASETS_PAGE
130-
)
131-
132-
return dataSetsResponse
125+
.then(result => {
126+
if (result) {
127+
setDatasets(result)
133128
}
129+
130+
return result
134131
})
135132
},
136133
[dispatch, params.projectName]
137134
)
138135

139136
const handleRefresh = useCallback(
140137
filters => {
138+
dispatch(
139+
getFilterTagOptions({
140+
dispatch,
141+
fetchTags: fetchArtifactTags,
142+
project: params.projectName,
143+
category: DATASET_TYPE
144+
})
145+
)
141146
setSelectedRowData({})
142147
setDatasets([])
143-
setAllDatasets([])
144148

145149
return fetchData(filters)
146150
},
147-
[fetchData]
151+
[dispatch, fetchData, params.projectName]
148152
)
149153

150154
const handleAddTag = useCallback(
@@ -205,11 +209,12 @@ const Datasets = () => {
205209
if ('tag' in changes.data) {
206210
setSelectedRowData({})
207211
setDatasets([])
208-
setAllDatasets([])
209212

210213
if (changes.data.tag.currentFieldValue) {
211214
navigate(
212-
`/projects/${params.projectName}/${DATASETS_PAGE.toLowerCase()}/${params.name}/${changes.data.tag.currentFieldValue}/overview`,
215+
`/projects/${params.projectName}/${DATASETS_PAGE.toLowerCase()}/${params.name}/${
216+
changes.data.tag.currentFieldValue
217+
}/overview`,
213218
{ replace: true }
214219
)
215220
}
@@ -274,7 +279,11 @@ const Datasets = () => {
274279
useSortTable({
275280
headers: tableHeaders,
276281
content: tableContent,
277-
sortConfig: { excludeSortBy: ['labels', 'size'], defaultSortBy: 'updated', defaultDirection: 'desc' }
282+
sortConfig: {
283+
excludeSortBy: ['labels', 'size'],
284+
defaultSortBy: 'updated',
285+
defaultDirection: 'desc'
286+
}
278287
})
279288

280289
useEffect(() => {
@@ -284,10 +293,13 @@ const Datasets = () => {
284293
}, [location, navigate, pageData.details.menu, params.name, params.tab, params.tag])
285294

286295
useEffect(() => {
287-
if (isNil(filtersStore.tagOptions) && urlTagOption) {
288-
fetchData({ ...datasetsFilters, tag: urlTagOption })
296+
if (urlTagOption && datasets.length === 0) {
297+
fetchData({
298+
tag: urlTagOption,
299+
iter: SHOW_ITERATIONS
300+
})
289301
}
290-
}, [datasetsFilters, fetchData, filtersStore, urlTagOption])
302+
}, [datasets.length, fetchData, urlTagOption])
291303

292304
useEffect(() => {
293305
dispatch(setFilters({ groupBy: GROUP_BY_NONE }))
@@ -297,7 +309,7 @@ const Datasets = () => {
297309
checkForSelectedDataset(
298310
params.name,
299311
selectedRowData,
300-
allDatasets,
312+
datasets,
301313
params.tag,
302314
params.iter,
303315
params.uid,
@@ -306,7 +318,7 @@ const Datasets = () => {
306318
navigate
307319
)
308320
}, [
309-
allDatasets,
321+
datasets,
310322
navigate,
311323
params.iter,
312324
params.name,
@@ -319,7 +331,6 @@ const Datasets = () => {
319331
useEffect(() => {
320332
return () => {
321333
setDatasets([])
322-
setAllDatasets([])
323334
dispatch(removeDataSets())
324335
setSelectedDataset({})
325336
abortControllerRef.current.abort(REQUEST_CANCELED)
@@ -335,6 +346,8 @@ const Datasets = () => {
335346
})
336347
}, [handleRefresh, params, datasetsFilters])
337348

349+
useEffect(() => setDatasets([]), [filtersStore.tag])
350+
338351
return (
339352
<DatasetsView
340353
actionsMenu={actionsMenu}

‎src/components/Datasets/DatasetsView.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ const DatasetsView = React.forwardRef(
8787
onClick: handleRegisterDataset
8888
}
8989
]}
90+
artifacts={datasets}
9091
filterMenuName={DATASETS_FILTERS}
9192
handleRefresh={handleRefresh}
9293
page={DATASETS_PAGE}

0 commit comments

Comments
 (0)