Impl [Models] Metrics new look and feel in the table

src/common/Download/DownloadItem.js

@@ -99,7 +99,7 @@ const DownloadItem = ({ downloadItem }) => {
 
           timeoutRef.current = setTimeout(() => {
             dispatch(removeDownloadItem(downloadItem.id))
-          }, 1000)
+          }, 2000)
         })
     }
   }, [

src/common/Download/downloadContainer.scss

@@ -6,7 +6,7 @@
   right: 24px;
   bottom: -115px;
   opacity: 0;
-  z-index: 1000;
+  z-index: 9;
   width: 220px;
   min-height: 90px;
   max-height: 200px;

src/components/Datasets/Datasets.js

@@ -65,6 +65,8 @@ import { getViewMode } from '../../utils/helper'
 import { copyToClipboard } from '../../utils/copyToClipboard'
 import { generateUri } from '../../utils/resources'
 import { setDownloadItem, setShowDownloadsList } from '../../reducers/downloadReducer'
+import { useSortTable } from '../../hooks/useSortTable.hook'
+import { generateTableHeaders } from '../../utils/generateTableHeaders'
 
 import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
 import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
@@ -291,6 +293,17 @@ const Datasets = () => {
         )
   }, [datasets, filtersStore.groupBy, frontendSpec, latestItems, params.projectName])
 
+  const tableHeaders = useMemo(() => {
+    return generateTableHeaders(tableContent[0]?.content ?? [])
+  }, [tableContent])
+
+  const { sortTable, selectedColumnName, getSortingIcon, sortedTableContent, sortedTableHeaders } =
+    useSortTable({
+      headers: tableHeaders,
+      content: tableContent,
+      sortConfig: { excludeSortBy: 'labels', defaultSortBy: 'updated', defaultDirection: 'desc' }
+    })
+
   useEffect(() => {
     if (params.name && params.tag && pageData.details.menu.length > 0) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
@@ -369,7 +382,9 @@ const Datasets = () => {
       setDatasets={setDatasets}
       setSelectedDataset={setSelectedDataset}
       setSelectedRowData={setSelectedRowData}
-      tableContent={tableContent}
+      sortProps={{ sortTable, selectedColumnName, getSortingIcon }}
+      tableContent={sortedTableContent}
+      tableHeaders={sortedTableHeaders}
       toggleConvertedYaml={toggleConvertedYaml}
       viewMode={viewMode}
       urlTagOption={urlTagOption}

src/components/Datasets/DatasetsView.js

@@ -36,6 +36,7 @@ import { registerDatasetTitle, filters } from './datasets.util'
 import { removeDataSet } from '../../reducers/artifactsReducer'
 import { ACTIONS_MENU } from '../../types'
 import { SECONDARY_BUTTON } from 'igz-controls/constants'
+import { SORT_PROPS } from 'igz-controls/types'
 
 const DatasetsView = React.forwardRef(
   (
@@ -57,7 +58,9 @@ const DatasetsView = React.forwardRef(
       setDatasets,
       setSelectedDataset,
       setSelectedRowData,
+      sortProps,
       tableContent,
+      tableHeaders,
       toggleConvertedYaml,
       viewMode,
       urlTagOption
@@ -113,7 +116,8 @@ const DatasetsView = React.forwardRef(
                     pageData={pageData}
                     retryRequest={handleRefresh}
                     selectedItem={selectedDataset}
-                    tableHeaders={tableContent[0]?.content ?? []}
+                    sortProps={sortProps}
+                    tableHeaders={tableHeaders ?? []}
                   >
                     {tableContent.map((tableItem, index) => (
                       <ArtifactsTableRow
@@ -179,7 +183,9 @@ DatasetsView.propTypes = {
   setDatasets: PropTypes.func.isRequired,
   setSelectedDataset: PropTypes.func.isRequired,
   setSelectedRowData: PropTypes.func.isRequired,
+  sortProps: SORT_PROPS,
   tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,
   toggleConvertedYaml: PropTypes.func.isRequired,
   viewMode: PropTypes.string,
   urlTagOption: PropTypes.string

src/components/DetailsResults/DetailsResults.js

@@ -52,7 +52,7 @@ const DetailsResults = ({ allowSortBy, defaultSortBy, defaultDirection, excludeS
 
   const getHeaderCellClasses = (headerId, isSortable) =>
     classNames(
-      'table-header-item',
+      'table-header__cell',
       isSortable && 'sortable-header-cell',
       isSortable && selectedColumnName === headerId && 'sortable-header-cell_active'
     )

src/components/Files/Files.js

@@ -65,6 +65,8 @@ import { getViewMode } from '../../utils/helper'
 import { copyToClipboard } from '../../utils/copyToClipboard'
 import { generateUri } from '../../utils/resources'
 import { setDownloadItem, setShowDownloadsList } from '../../reducers/downloadReducer'
+import { useSortTable } from '../../hooks/useSortTable.hook'
+import { generateTableHeaders } from '../../utils/generateTableHeaders'
 
 import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
 import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
@@ -249,6 +251,17 @@ const Files = () => {
       : files.map(contentItem => createFilesRowData(contentItem, params.projectName, frontendSpec))
   }, [files, filtersStore.groupBy, frontendSpec, latestItems, params.projectName])
 
+  const tableHeaders = useMemo(() => {
+    return generateTableHeaders(tableContent[0]?.content ?? [])
+  }, [tableContent])
+
+  const { sortTable, selectedColumnName, getSortingIcon, sortedTableContent, sortedTableHeaders } =
+    useSortTable({
+      headers: tableHeaders,
+      content: tableContent,
+      sortConfig: { excludeSortBy: 'labels', defaultSortBy: 'updated', defaultDirection: 'desc' }
+    })
+
   const applyDetailsChanges = useCallback(
     changes => {
       return handleApplyDetailsChanges(
@@ -357,7 +370,9 @@ const Files = () => {
       setFiles={setFiles}
       setSelectedFile={setSelectedFile}
       setSelectedRowData={setSelectedRowData}
-      tableContent={tableContent}
+      sortProps={{ sortTable, selectedColumnName, getSortingIcon }}
+      tableContent={sortedTableContent}
+      tableHeaders={sortedTableHeaders}
       toggleConvertedYaml={toggleConvertedYaml}
       viewMode={viewMode}
       urlTagOption={urlTagOption}

src/components/Files/FilesView.js

@@ -36,6 +36,7 @@ import { registerArtifactTitle, filters } from './files.util'
 import { removeFile } from '../../reducers/artifactsReducer'
 import { ACTIONS_MENU } from '../../types'
 import { SECONDARY_BUTTON } from 'igz-controls/constants'
+import { SORT_PROPS } from 'igz-controls/types'
 
 const FilesView = React.forwardRef(
   (
@@ -57,7 +58,9 @@ const FilesView = React.forwardRef(
       setFiles,
       setSelectedFile,
       setSelectedRowData,
+      sortProps,
       tableContent,
+      tableHeaders,
       toggleConvertedYaml,
       viewMode,
       urlTagOption
@@ -106,8 +109,8 @@ const FilesView = React.forwardRef(
                     handleCancel={() => setSelectedFile({})}
                     pageData={pageData}
                     retryRequest={handleRefresh}
-                    selectedItem={selectedFile}
-                    tableHeaders={tableContent[0]?.content ?? []}
+                    sortProps={sortProps}
+                    tableHeaders={tableHeaders ?? []}
                   >
                     {tableContent.map((tableItem, index) => (
                       <ArtifactsTableRow
@@ -171,7 +174,9 @@ FilesView.propTypes = {
   selectedFile: PropTypes.object.isRequired,
   selectedRowData: PropTypes.object.isRequired,
   setSelectedFile: PropTypes.func.isRequired,
+  sortProps: SORT_PROPS,
   tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,
   toggleConvertedYaml: PropTypes.func.isRequired,
   viewMode: PropTypes.string,
   urlTagOption: PropTypes.string

src/components/ModelsPage/Models/Models.js

@@ -69,14 +69,15 @@ import { generateUri } from '../../../utils/resources'
 import { copyToClipboard } from '../../../utils/copyToClipboard'
 import { setDownloadItem, setShowDownloadsList } from '../../../reducers/downloadReducer'
 import { setArtifactTags } from '../../../utils/artifacts.util'
+import { useMode } from '../../../hooks/mode.hook'
+import { generateTableHeaders } from '../../../utils/generateTableHeaders'
 
 import { ReactComponent as DeployIcon } from 'igz-controls/images/deploy-icon.svg'
 import { ReactComponent as TagIcon } from 'igz-controls/images/tag-icon.svg'
 import { ReactComponent as YamlIcon } from 'igz-controls/images/yaml.svg'
 import { ReactComponent as ArtifactView } from 'igz-controls/images/eye-icon.svg'
 import { ReactComponent as Copy } from 'igz-controls/images/copy-to-clipboard-icon.svg'
 import { ReactComponent as DownloadIcon } from 'igz-controls/images/download.svg'
-import { useMode } from '../../../hooks/mode.hook'
 
 const Models = ({ fetchModelFeatureVector }) => {
   const [models, setModels] = useState([])
@@ -274,11 +275,16 @@ const Models = ({ fetchModelFeatureVector }) => {
         )
   }, [filtersStore.groupBy, frontendSpec, latestItems, models, params.projectName])
 
-  const { sortTable, selectedColumnName, getSortingIcon, sortedTableContent } = useSortTable({
-    headers: tableContent[0]?.content,
-    content: tableContent,
-    sortConfig: { defaultSortBy: 'updated', defaultDirection: 'desc' }
-  })
+  const tableHeaders = useMemo(() => {
+    return generateTableHeaders(tableContent[0]?.content ?? [])
+  }, [tableContent])
+
+  const { sortTable, selectedColumnName, getSortingIcon, sortedTableContent, sortedTableHeaders } =
+    useSortTable({
+      headers: tableHeaders,
+      content: tableContent,
+      sortConfig: { excludeSortBy: 'labels', defaultSortBy: 'updated', defaultDirection: 'desc' }
+    })
 
   const applyDetailsChanges = useCallback(
     changes => {
@@ -402,6 +408,7 @@ const Models = ({ fetchModelFeatureVector }) => {
       setSelectedRowData={setSelectedRowData}
       sortProps={{ sortTable, selectedColumnName, getSortingIcon }}
       tableContent={sortedTableContent}
+      tableHeaders={sortedTableHeaders}
       viewMode={viewMode}
       urlTagOption={urlTagOption}
     />

src/components/ModelsPage/Models/ModelsView.js

@@ -58,6 +58,7 @@ const ModelsView = React.forwardRef(
       setSelectedRowData,
       sortProps,
       tableContent,
+      tableHeaders,
       viewMode,
       urlTagOption
     },
@@ -113,7 +114,7 @@ const ModelsView = React.forwardRef(
                   selectedItem={selectedModel}
                   sortProps={sortProps}
                   tab={MODELS_TAB}
-                  tableHeaders={tableContent[0]?.content ?? []}
+                  tableHeaders={tableHeaders ?? []}
                 >
                   {tableContent.map((tableItem, index) => {
                     return (
@@ -178,6 +179,7 @@ ModelsView.propTypes = {
   setSelectedRowData: PropTypes.func.isRequired,
   sortProps: SORT_PROPS,
   tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,
   viewMode: PropTypes.string,
   urlTagOption: PropTypes.string
 }

src/components/Table/TableHead.js

@@ -28,22 +28,35 @@ import { SORT_PROPS } from 'igz-controls/types'
 
 const TableHead = React.forwardRef(
   ({ content, hideActionsMenu, mainRowItemsCount, selectedItem, sortProps }, ref) => {
-    const getHeaderCellClasses = (headerId, isSortable, tableItemClass, index) =>
+    const getHeaderCellClasses = (
+      headerId,
+      isSortable,
+      tableItemClassName,
+      headerCellClassName,
+      index
+    ) =>
       classNames(
-        'table-header-item',
-        tableItemClass,
+        'table-header__cell',
+        tableItemClassName,
+        headerCellClassName,
         isSortable && 'sortable-header-cell',
         isSortable && sortProps?.selectedColumnName === headerId && 'sortable-header-cell_active',
         !isEmpty(selectedItem) && index >= mainRowItemsCount && 'table-body__cell_hidden'
       )
 
     return (
       <thead className="table-header">
-        <tr className="table-row table-row_header" ref={ref}>
+        <tr className="table-row table-header-row" ref={ref}>
           {content.map(({ headerLabel, headerId, isSortable, ...tableItem }, index) => {
             return tableItem.type !== 'hidden' && !tableItem.hidden ? (
               <th
-                className={getHeaderCellClasses(headerId, isSortable, tableItem.class, index)}
+                className={getHeaderCellClasses(
+                  headerId,
+                  isSortable,
+                  tableItem.className,
+                  tableItem.headerCellClassName,
+                  index
+                )}
                 key={`${headerId}`}
                 onClick={isSortable ? () => sortProps.sortTable(headerId) : null}
               >
@@ -58,7 +71,7 @@ const TableHead = React.forwardRef(
               </th>
             ) : null
           })}
-          {!hideActionsMenu && <th className="table-header-item table-cell-icon" />}
+          {!hideActionsMenu && <th className="table-header__cell table-cell-icon" />}
         </tr>
       </thead>
     )

src/components/Table/TableView.js

@@ -20,6 +20,7 @@ such restriction.
 import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from 'lodash'
+import classnames from 'classnames'
 
 import ArtifactsTableRow from '../../elements/ArtifactsTableRow/ArtifactsTableRow'
 import ConsumerGroupShardLagTableRow from '../../elements/ConsumerGroupShardLagTableRow/ConsumerGroupShardLagTableRow'
@@ -85,11 +86,15 @@ const TableView = ({
               <>
                 <thead className="table-header">
                   <tr className="table-row">
-                    {pageData.tableHeaders?.map(
-                      (item, index) =>
+                    {pageData.tableHeaders?.map((item, index) => {
+                      const headerClassNames = classnames(
+                        `table-header__cell ${item.className} ${item.headerCellClassName}`
+                      )
+
+                      return (
                         !item.hidden && (
                           <th
-                            className={`table-header-item ${item.class}`}
+                            className={headerClassNames}
                             key={`${item.headerLabel}${index}`}
                             ref={tableHeadRef}
                           >
@@ -98,7 +103,8 @@ const TableView = ({
                             </Tooltip>
                           </th>
                         )
-                    )}
+                      )
+                    })}
                   </tr>
                 </thead>
                 <tbody className="table-body">

src/components/Table/table.scss

@@ -95,7 +95,7 @@
         }
       }
 
-      .parent-row-expanded {
+      .parent-row_expanded {
         .row_grouped-by {
           .table-cell-name {
             border-right: none;
@@ -144,7 +144,7 @@
 
   .table {
     &-header {
-      &-item {
+      &__cell {
         &.buttonPopout,
         &.buttonDownload {
           @include tableColumnFlex(0.5, 80px);

src/components/Workflow/JobsFunctionsTableRow/JobsFunctionsTableRow.js

@@ -32,7 +32,7 @@ const JobsFunctionsTableRow = ({ handleSelectItem, rowItem, selectedItem }) => {
   const rowClassNames = classnames(
     'table-row',
     'parent-row',
-    isWorkflowJobSelected(rowItem.data, selectedItem) && 'row_active'
+    isWorkflowJobSelected(rowItem.data, selectedItem) && 'table-row_active'
   )
 
   return (

src/elements/ArtifactsTableRow/ArtifactsTableRow.js

@@ -51,19 +51,19 @@ const ArtifactsTableRow = ({
     'parent-row',
     (selectedItem.db_key || selectedItem?.spec?.model) &&
       getArtifactIdentifier(selectedItem, true) === rowItem.data.ui.identifierUnique &&
-      !parent.current?.classList.value.includes('parent-row-expanded') &&
-      'row_active',
-    parent.current?.classList.value.includes('parent-row-expanded') && 'parent-row-expanded'
+      !parent.current?.classList.value.includes('parent-row_expanded') &&
+      'table-row_active',
+    parent.current?.classList.value.includes('parent-row_expanded') && 'parent-row_expanded'
   )
 
   return (
     <tr className={rowClassNames} ref={parent}>
-      {parent.current?.classList.contains('parent-row-expanded') ? (
+      {parent.current?.classList.contains('parent-row_expanded') ? (
         <>
           <td
             data-testid={generateTableRowTestId(rowIndex)}
             className={`table-body__cell
-              ${parent.current?.classList.contains('parent-row-expanded') && 'row_grouped-by'}`}
+              ${parent.current?.classList.contains('parent-row_expanded') && 'row_grouped-by'}`}
           >
             <table cellPadding="0" cellSpacing="0" className="table">
               <tbody className="table-body">
@@ -102,7 +102,7 @@ const ArtifactsTableRow = ({
                 selectedItem.key &&
                   tableContentItem.data.ui.identifierUnique ===
                     getArtifactIdentifier(selectedItem, true) &&
-                  'row_active'
+                  'table-row_active'
               )
 
               return (