Skip to content

Commit 5940d5d

Browse files
mariana-furykmariana-furyk
authored
Impl [Models] Metrics new look and feel in the table (#2062)
1 parent 9523dc8 commit 5940d5d

33 files changed

+528
-383
lines changed

‎src/common/Download/DownloadItem.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const DownloadItem = ({ downloadItem }) => {
9999

100100
timeoutRef.current = setTimeout(() => {
101101
dispatch(removeDownloadItem(downloadItem.id))
102-
}, 1000)
102+
}, 5000)
103103
})
104104
}
105105
}, [

‎src/common/Download/downloadContainer.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
right: 24px;
77
bottom: -115px;
88
opacity: 0;
9-
z-index: 1000;
9+
z-index: 9;
1010
width: 220px;
1111
min-height: 90px;
1212
max-height: 200px;

‎src/components/ArtifactsPreview/ArtifactsPreviewView.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorB
6767
<tr className="table-row">
6868
{preview.data.headers.map((header, index) => {
6969
return (
70-
<th key={`${header}${index}`} className="table-header-item">
70+
<th key={`${header}${index}`} className="table-header__cell">
7171
<Tooltip template={<TextTooltipTemplate text={header} />}>
7272
{header}
7373
</Tooltip>

‎src/components/Datasets/Datasets.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ import { getViewMode } from '../../utils/helper'
6565
import { copyToClipboard } from '../../utils/copyToClipboard'
6666
import { generateUri } from '../../utils/resources'
6767
import { setDownloadItem, setShowDownloadsList } from '../../reducers/downloadReducer'
68+
import { useSortTable } from '../../hooks/useSortTable.hook'
6869

6970
import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
7071
import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
@@ -291,6 +292,15 @@ const Datasets = () => {
291292
)
292293
}, [datasets, filtersStore.groupBy, frontendSpec, latestItems, params.projectName])
293294

295+
const tableHeaders = useMemo(() => tableContent[0]?.content ?? [], [tableContent])
296+
297+
const { sortTable, selectedColumnName, getSortingIcon, sortedTableContent, sortedTableHeaders } =
298+
useSortTable({
299+
headers: tableHeaders,
300+
content: tableContent,
301+
sortConfig: { excludeSortBy: 'labels', defaultSortBy: 'updated', defaultDirection: 'desc' }
302+
})
303+
294304
useEffect(() => {
295305
if (params.name && params.tag && pageData.details.menu.length > 0) {
296306
isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
@@ -369,7 +379,9 @@ const Datasets = () => {
369379
setDatasets={setDatasets}
370380
setSelectedDataset={setSelectedDataset}
371381
setSelectedRowData={setSelectedRowData}
372-
tableContent={tableContent}
382+
sortProps={{ sortTable, selectedColumnName, getSortingIcon }}
383+
tableContent={sortedTableContent}
384+
tableHeaders={sortedTableHeaders}
373385
toggleConvertedYaml={toggleConvertedYaml}
374386
viewMode={viewMode}
375387
urlTagOption={urlTagOption}

‎src/components/Datasets/DatasetsView.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { registerDatasetTitle, filters } from './datasets.util'
3636
import { removeDataSet } from '../../reducers/artifactsReducer'
3737
import { ACTIONS_MENU } from '../../types'
3838
import { SECONDARY_BUTTON } from 'igz-controls/constants'
39+
import { SORT_PROPS } from 'igz-controls/types'
3940

4041
const DatasetsView = React.forwardRef(
4142
(
@@ -57,7 +58,9 @@ const DatasetsView = React.forwardRef(
5758
setDatasets,
5859
setSelectedDataset,
5960
setSelectedRowData,
61+
sortProps,
6062
tableContent,
63+
tableHeaders,
6164
toggleConvertedYaml,
6265
viewMode,
6366
urlTagOption
@@ -115,7 +118,8 @@ const DatasetsView = React.forwardRef(
115118
pageData={pageData}
116119
retryRequest={handleRefresh}
117120
selectedItem={selectedDataset}
118-
tableHeaders={tableContent[0]?.content ?? []}
121+
sortProps={sortProps}
122+
tableHeaders={tableHeaders ?? []}
119123
>
120124
{tableContent.map((tableItem, index) => (
121125
<ArtifactsTableRow
@@ -181,7 +185,9 @@ DatasetsView.propTypes = {
181185
setDatasets: PropTypes.func.isRequired,
182186
setSelectedDataset: PropTypes.func.isRequired,
183187
setSelectedRowData: PropTypes.func.isRequired,
188+
sortProps: SORT_PROPS,
184189
tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,
190+
tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,
185191
toggleConvertedYaml: PropTypes.func.isRequired,
186192
viewMode: PropTypes.string,
187193
urlTagOption: PropTypes.string

‎src/components/DetailsArtifacts/DetailsArtifacts.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,12 @@ const DetailsArtifacts = ({
124124
<div className="item-artifacts">
125125
<div className="table">
126126
<div className="table-header">
127-
<div className="table-row">
127+
<div className="table-row table-header-row">
128128
{artifactsTabContent[0].map(({ headerId, headerLabel, className }) => (
129-
<div key={headerId} className={classnames('table-header-item', className && className)}>
129+
<div
130+
key={headerId}
131+
className={classnames('table-header__cell', className && className)}
132+
>
130133
{headerLabel}
131134
</div>
132135
))}

‎src/components/DetailsInputs/DetailsInputs.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,9 +128,9 @@ const DetailsInputs = ({ inputs }) => {
128128
<div className="item-inputs">
129129
<div className="table">
130130
<div className="table-header">
131-
<div className="table-row">
131+
<div className="table-row table-header-row">
132132
{inputsTabContent[0].map(({ headerId, headerLabel, className }) => (
133-
<div key={headerId} className={classnames('table-header-item', className)}>
133+
<div key={headerId} className={classnames('table-header__cell', className)}>
134134
{headerLabel}
135135
</div>
136136
))}

‎src/components/DetailsResults/DetailsResults.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@ const DetailsResults = ({ allowSortBy, defaultSortBy, defaultDirection, excludeS
4848

4949
const getHeaderCellClasses = (headerId, isSortable) =>
5050
classNames(
51-
'table-header-item',
51+
'table-header__cell',
5252
isSortable && 'sortable-header-cell',
5353
isSortable && selectedColumnName === headerId && 'sortable-header-cell_active'
5454
)
5555

5656
const getHeaderTemplate = () => {
5757
return (
5858
<thead className="table-header">
59-
<tr className="table-row">
59+
<tr className="table-row table-header-row">
6060
{sortedTableHeaders.map(({ headerLabel, headerId, isSortable, ...tableItem }) => {
6161
return (
6262
<th

‎src/components/Files/Files.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ import { getViewMode } from '../../utils/helper'
6565
import { copyToClipboard } from '../../utils/copyToClipboard'
6666
import { generateUri } from '../../utils/resources'
6767
import { setDownloadItem, setShowDownloadsList } from '../../reducers/downloadReducer'
68+
import { useSortTable } from '../../hooks/useSortTable.hook'
6869

6970
import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
7071
import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
@@ -249,6 +250,15 @@ const Files = () => {
249250
: files.map(contentItem => createFilesRowData(contentItem, params.projectName, frontendSpec))
250251
}, [files, filtersStore.groupBy, frontendSpec, latestItems, params.projectName])
251252

253+
const tableHeaders = useMemo(() => tableContent[0]?.content ?? [], [tableContent])
254+
255+
const { sortTable, selectedColumnName, getSortingIcon, sortedTableContent, sortedTableHeaders } =
256+
useSortTable({
257+
headers: tableHeaders,
258+
content: tableContent,
259+
sortConfig: { excludeSortBy: 'labels', defaultSortBy: 'updated', defaultDirection: 'desc' }
260+
})
261+
252262
const applyDetailsChanges = useCallback(
253263
changes => {
254264
return handleApplyDetailsChanges(
@@ -357,7 +367,9 @@ const Files = () => {
357367
setFiles={setFiles}
358368
setSelectedFile={setSelectedFile}
359369
setSelectedRowData={setSelectedRowData}
360-
tableContent={tableContent}
370+
sortProps={{ sortTable, selectedColumnName, getSortingIcon }}
371+
tableContent={sortedTableContent}
372+
tableHeaders={sortedTableHeaders}
361373
toggleConvertedYaml={toggleConvertedYaml}
362374
viewMode={viewMode}
363375
urlTagOption={urlTagOption}

‎src/components/Files/FilesView.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { registerArtifactTitle, filters } from './files.util'
3636
import { removeFile } from '../../reducers/artifactsReducer'
3737
import { ACTIONS_MENU } from '../../types'
3838
import { SECONDARY_BUTTON } from 'igz-controls/constants'
39+
import { SORT_PROPS } from 'igz-controls/types'
3940

4041
const FilesView = React.forwardRef(
4142
(
@@ -57,7 +58,9 @@ const FilesView = React.forwardRef(
5758
setFiles,
5859
setSelectedFile,
5960
setSelectedRowData,
61+
sortProps,
6062
tableContent,
63+
tableHeaders,
6164
toggleConvertedYaml,
6265
viewMode,
6366
urlTagOption
@@ -109,7 +112,8 @@ const FilesView = React.forwardRef(
109112
pageData={pageData}
110113
retryRequest={handleRefresh}
111114
selectedItem={selectedFile}
112-
tableHeaders={tableContent[0]?.content ?? []}
115+
sortProps={sortProps}
116+
tableHeaders={tableHeaders ?? []}
113117
>
114118
{tableContent.map((tableItem, index) => (
115119
<ArtifactsTableRow
@@ -173,7 +177,9 @@ FilesView.propTypes = {
173177
selectedFile: PropTypes.object.isRequired,
174178
selectedRowData: PropTypes.object.isRequired,
175179
setSelectedFile: PropTypes.func.isRequired,
180+
sortProps: SORT_PROPS,
176181
tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,
182+
tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,
177183
toggleConvertedYaml: PropTypes.func.isRequired,
178184
viewMode: PropTypes.string,
179185
urlTagOption: PropTypes.string

‎src/components/ModelsPage/Models/Models.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,14 @@ import { generateUri } from '../../../utils/resources'
7070
import { copyToClipboard } from '../../../utils/copyToClipboard'
7171
import { setDownloadItem, setShowDownloadsList } from '../../../reducers/downloadReducer'
7272
import { setArtifactTags } from '../../../utils/artifacts.util'
73+
import { useMode } from '../../../hooks/mode.hook'
7374

7475
import { ReactComponent as DeployIcon } from 'igz-controls/images/deploy-icon.svg'
7576
import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
7677
import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
7778
import { ReactComponent as ArtifactView } from 'igz-controls/images/eye-icon.svg'
7879
import { ReactComponent as Copy } from 'igz-controls/images/copy-to-clipboard-icon.svg'
7980
import { ReactComponent as DownloadIcon } from 'igz-controls/images/download.svg'
80-
import { useMode } from '../../../hooks/mode.hook'
8181

8282
const Models = ({ fetchModelFeatureVector }) => {
8383
const [models, setModels] = useState([])
@@ -275,11 +275,14 @@ const Models = ({ fetchModelFeatureVector }) => {
275275
)
276276
}, [filtersStore.groupBy, frontendSpec, latestItems, models, params.projectName])
277277

278-
const { sortTable, selectedColumnName, getSortingIcon, sortedTableContent } = useSortTable({
279-
headers: tableContent[0]?.content,
280-
content: tableContent,
281-
sortConfig: { defaultSortBy: 'updated', defaultDirection: 'desc' }
282-
})
278+
const tableHeaders = useMemo(() => tableContent[0]?.content ?? [], [tableContent])
279+
280+
const { sortTable, selectedColumnName, getSortingIcon, sortedTableContent, sortedTableHeaders } =
281+
useSortTable({
282+
headers: tableHeaders,
283+
content: tableContent,
284+
sortConfig: { excludeSortBy: 'labels', defaultSortBy: 'updated', defaultDirection: 'desc' }
285+
})
283286

284287
const applyDetailsChanges = useCallback(
285288
changes => {
@@ -412,6 +415,7 @@ const Models = ({ fetchModelFeatureVector }) => {
412415
setSelectedRowData={setSelectedRowData}
413416
sortProps={{ sortTable, selectedColumnName, getSortingIcon }}
414417
tableContent={sortedTableContent}
418+
tableHeaders={sortedTableHeaders}
415419
viewMode={viewMode}
416420
urlTagOption={urlTagOption}
417421
/>

‎src/components/ModelsPage/Models/ModelsView.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const ModelsView = React.forwardRef(
5959
setSelectedRowData,
6060
sortProps,
6161
tableContent,
62+
tableHeaders,
6263
viewMode,
6364
urlTagOption
6465
},
@@ -122,7 +123,7 @@ const ModelsView = React.forwardRef(
122123
selectedItem={selectedModel}
123124
sortProps={sortProps}
124125
tab={MODELS_TAB}
125-
tableHeaders={tableContent[0]?.content ?? []}
126+
tableHeaders={tableHeaders ?? []}
126127
>
127128
{tableContent.map((tableItem, index) => {
128129
return (
@@ -188,6 +189,7 @@ ModelsView.propTypes = {
188189
setSelectedRowData: PropTypes.func.isRequired,
189190
sortProps: SORT_PROPS,
190191
tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,
192+
tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,
191193
viewMode: PropTypes.string,
192194
urlTagOption: PropTypes.string
193195
}

‎src/components/ModelsPage/modelsPage.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '~igz-controls/scss/colors';
2+
13
.models {
24
display: flex;
35
flex-direction: column;
@@ -6,4 +8,12 @@
68
.filters {
79
justify-content: flex-end;
810
}
11+
12+
.metrics-cell {
13+
font-weight: bold;
14+
15+
&_with-border {
16+
border-left: 1px solid $titanWhite;
17+
}
18+
}
919
}

‎src/components/Table/TableHead.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,35 @@ import { SORT_PROPS } from 'igz-controls/types'
2828

2929
const TableHead = React.forwardRef(
3030
({ content, hideActionsMenu, mainRowItemsCount, selectedItem, sortProps }, ref) => {
31-
const getHeaderCellClasses = (headerId, isSortable, tableItemClass, index) =>
31+
const getHeaderCellClasses = (
32+
headerId,
33+
isSortable,
34+
tableItemClassName,
35+
headerCellClassName,
36+
index
37+
) =>
3238
classNames(
33-
'table-header-item',
34-
tableItemClass,
39+
'table-header__cell',
40+
tableItemClassName,
41+
headerCellClassName,
3542
isSortable && 'sortable-header-cell',
3643
isSortable && sortProps?.selectedColumnName === headerId && 'sortable-header-cell_active',
3744
!isEmpty(selectedItem) && index >= mainRowItemsCount && 'table-body__cell_hidden'
3845
)
3946

4047
return (
4148
<thead className="table-header">
42-
<tr className="table-row table-row_header" ref={ref}>
49+
<tr className="table-row table-header-row" ref={ref}>
4350
{content.map(({ headerLabel, headerId, isSortable, ...tableItem }, index) => {
4451
return tableItem.type !== 'hidden' && !tableItem.hidden ? (
4552
<th
46-
className={getHeaderCellClasses(headerId, isSortable, tableItem.class, index)}
53+
className={getHeaderCellClasses(
54+
headerId,
55+
isSortable,
56+
tableItem.className,
57+
tableItem.headerCellClassName,
58+
index
59+
)}
4760
key={`${headerId}`}
4861
onClick={isSortable ? () => sortProps.sortTable(headerId) : null}
4962
>
@@ -58,7 +71,7 @@ const TableHead = React.forwardRef(
5871
</th>
5972
) : null
6073
})}
61-
{!hideActionsMenu && <th className="table-header-item table-cell-icon" />}
74+
{!hideActionsMenu && <th className="table-header__cell table-cell-icon" />}
6275
</tr>
6376
</thead>
6477
)

0 commit comments

Comments
 (0)