@@ -72,6 +121,7 @@ const ArtifactsFilters = ({ artifacts, isAllVersions }) => {
ArtifactsFilters.propTypes = {
artifacts: PropTypes.arrayOf(PropTypes.object).isRequired,
+ filtersConfig: PropTypes.object.isRequired,
isAllVersions: PropTypes.bool.isRequired
}
diff --git a/src/components/ArtifactsPreview/ArtifactsPreview.jsx b/src/components/ArtifactsPreview/ArtifactsPreview.jsx
index 2ad5abc0f4..28c9f1bf9a 100644
--- a/src/components/ArtifactsPreview/ArtifactsPreview.jsx
+++ b/src/components/ArtifactsPreview/ArtifactsPreview.jsx
@@ -22,8 +22,8 @@ import PropTypes from 'prop-types'
import classnames from 'classnames'
import ArtifactsPreviewView from './ArtifactsPreviewView'
-import Loader from '../../common/Loader/Loader'
import NoData from '../../common/NoData/NoData'
+import { Loader } from 'igz-controls/components'
const ArtifactsPreview = ({ className = '', noData, preview }) => {
const [showErrorBody, setShowErrorBody] = useState(false)
diff --git a/src/components/ArtifactsPreview/ArtifactsPreviewView.jsx b/src/components/ArtifactsPreview/ArtifactsPreviewView.jsx
index 3b9b2fcb4a..85a61ba9ec 100644
--- a/src/components/ArtifactsPreview/ArtifactsPreviewView.jsx
+++ b/src/components/ArtifactsPreview/ArtifactsPreviewView.jsx
@@ -26,7 +26,7 @@ import PreviewError from './PreviewError/PreviewError'
import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
import WarningMessage from '../../common/WarningMessage/WarningMessage'
-import { ARTIFACT_PREVIEW_TABLE_ROW_LIMIT, ERROR_STATE } from '../../constants'
+import { ARTIFACT_PREVIEW_TABLE_ROW_LIMIT, ERROR_STATE, UNKNOWN_STATE } from '../../constants'
import './artifactsPreview.scss'
@@ -145,7 +145,7 @@ const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorB
alt="preview"
/>
)}
- {preview?.type === 'unknown' && (
+ {preview?.type === UNKNOWN_STATE && (
{preview?.data?.content ? preview?.data.content : 'No preview'}
diff --git a/src/components/ArtifactsPreview/artifactsPreview.scss b/src/components/ArtifactsPreview/artifactsPreview.scss
index 9c8feb71c2..bbcc290cba 100644
--- a/src/components/ArtifactsPreview/artifactsPreview.scss
+++ b/src/components/ArtifactsPreview/artifactsPreview.scss
@@ -20,7 +20,7 @@
&-title {
display: flex;
align-items: center;
- margin: 0 0 15px 0;
+ margin: 0 0 15px;
color: colors.$topaz;
font-weight: 500;
font-size: 20px;
diff --git a/src/components/ArtifactsPreview/artifactsPreviewController.scss b/src/components/ArtifactsPreview/artifactsPreviewController.scss
index 9a9f12a7f3..94573d135a 100644
--- a/src/components/ArtifactsPreview/artifactsPreviewController.scss
+++ b/src/components/ArtifactsPreview/artifactsPreviewController.scss
@@ -10,11 +10,11 @@
}
.icon-popout {
- text-align: end;
- cursor: pointer;
- min-height: 40px;
width: 100%;
height: auto;
- padding: 0;
+ min-height: 40px;
margin-bottom: 10px;
+ padding: 0;
+ text-align: end;
+ cursor: pointer;
}
diff --git a/src/components/ConsumerGroup/ConsumerGroup.jsx b/src/components/ConsumerGroup/ConsumerGroup.jsx
index 43156676f8..be29d755ba 100644
--- a/src/components/ConsumerGroup/ConsumerGroup.jsx
+++ b/src/components/ConsumerGroup/ConsumerGroup.jsx
@@ -22,13 +22,12 @@ import { useDispatch, useSelector } from 'react-redux'
import { isEmpty } from 'lodash'
import { useParams } from 'react-router-dom'
-import Loader from '../../common/Loader/Loader'
+import ConsumerGroupShardLagTableRow from '../../elements/ConsumerGroupShardLagTableRow/ConsumerGroupShardLagTableRow'
import NoData from '../../common/NoData/NoData'
import PageHeader from '../../elements/PageHeader/PageHeader'
-import Table from '../Table/Table'
-import { RoundedIcon } from 'igz-controls/components'
-import ConsumerGroupShardLagTableRow from '../../elements/ConsumerGroupShardLagTableRow/ConsumerGroupShardLagTableRow'
import Search from '../../common/Search/Search'
+import Table from '../Table/Table'
+import { RoundedIcon, Loader } from 'igz-controls/components'
import {
CONSUMER_GROUP_PAGE,
@@ -38,7 +37,7 @@ import createConsumerGroupContent from '../../utils/createConsumerGroupContent'
import { fetchNuclioV3ioStreamShardLags, resetV3ioStreamShardLagsError } from '../../reducers/nuclioReducer.js'
import { generatePageData } from './consumerGroup.util.js'
import { getNoDataMessage } from '../../utils/getNoDataMessage'
-import { showErrorNotification } from '../../utils/notifications.util'
+import { showErrorNotification } from 'igz-controls/utils/notification.util'
import RefreshIcon from 'igz-controls/images/refresh.svg?react'
diff --git a/src/components/ConsumerGroups/ConsumerGroups.jsx b/src/components/ConsumerGroups/ConsumerGroups.jsx
index 5f86492ffd..099c79b4a9 100644
--- a/src/components/ConsumerGroups/ConsumerGroups.jsx
+++ b/src/components/ConsumerGroups/ConsumerGroups.jsx
@@ -21,12 +21,12 @@ import React, { useEffect, useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams, useOutletContext } from 'react-router-dom'
-import Loader from '../../common/Loader/Loader'
import NoData from '../../common/NoData/NoData'
import PageHeader from '../../elements/PageHeader/PageHeader'
import Search from '../../common/Search/Search'
import Table from '../Table/Table'
import ConsumerGroupTableRow from '../../elements/ConsumerGroupTableRow/ConsumerGroupTableRow'
+import { Loader } from 'igz-controls/components'
import createConsumerGroupsContent from '../../utils/createConsumerGroupsContent'
import { CONSUMER_GROUPS_PAGE, GROUP_BY_NONE, NAME_FILTER } from '../../constants'
diff --git a/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx b/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
index e43c882ced..42957a1e37 100644
--- a/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
+++ b/src/components/ConsumerGroupsWrapper/ConsumerGroupsWrapper.jsx
@@ -22,14 +22,14 @@ import { useNavigate, useParams, Outlet } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { isEmpty } from 'lodash'
+import { Loader } from 'igz-controls/components'
import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
-import Loader from '../../common/Loader/Loader'
import { GROUP_BY_NONE } from '../../constants'
import { areNuclioStreamsEnabled } from '../../utils/helper'
import { fetchNuclioV3ioStreams, resetV3ioStreamsError } from '../../reducers/nuclioReducer'
import { setFilters } from '../../reducers/filtersReducer'
-import { showErrorNotification } from '../../utils/notifications.util'
+import { showErrorNotification } from 'igz-controls/utils/notification.util'
const ConsumerGroupsWrapper = () => {
const [requestErrorMessage, setRequestErrorMessage] = useState('')
diff --git a/src/components/Datasets/datasets.util.jsx b/src/components/Datasets/datasets.util.jsx
index 7ce396d648..cc2319809b 100644
--- a/src/components/Datasets/datasets.util.jsx
+++ b/src/components/Datasets/datasets.util.jsx
@@ -22,21 +22,23 @@ import React from 'react'
import JobWizard from '../JobWizard/JobWizard'
import DeleteArtifactPopUp from '../../elements/DeleteArtifactPopUp/DeleteArtifactPopUp'
+import { ARTIFACT_MAX_DOWNLOAD_SIZE, DATASET_TYPE, DATASETS_PAGE } from '../../constants'
+import { PRIMARY_BUTTON, FULL_VIEW_MODE } from 'igz-controls/constants'
import {
- ARTIFACT_MAX_DOWNLOAD_SIZE,
- DATASET_TYPE,
- DATASETS_PAGE,
- FULL_VIEW_MODE
-} from '../../constants'
-import { PRIMARY_BUTTON } from 'igz-controls/constants'
-import { applyTagChanges, chooseOrFetchArtifact } from '../../utils/artifacts.util'
-import { copyToClipboard } from '../../utils/copyToClipboard'
+ applyTagChanges,
+ chooseOrFetchArtifact,
+ processActionAfterTagUniquesValidation
+} from '../../utils/artifacts.util'
import { getIsTargetPathValid } from '../../utils/createArtifactsContent'
import { showArtifactsPreview } from '../../reducers/artifactsReducer'
import { generateUri } from '../../utils/resources'
import { handleDeleteArtifact } from '../../utils/handleDeleteArtifact'
-import { openPopUp, openDeleteConfirmPopUp } from 'igz-controls/utils/common.util'
+import { openPopUp, openDeleteConfirmPopUp, copyToClipboard } from 'igz-controls/utils/common.util'
import { setDownloadItem, setShowDownloadsList } from '../../reducers/downloadReducer'
+import {
+ decreaseDetailsLoadingCounter,
+ increaseDetailsLoadingCounter
+} from '../../reducers/detailsReducer'
import TagIcon from 'igz-controls/images/tag-icon.svg?react'
import YamlIcon from 'igz-controls/images/yaml.svg?react'
@@ -65,7 +67,7 @@ export const infoHeaders = [
export const registerDatasetTitle = 'Register dataset'
-export const generateDataSetsDetailsMenu = (selectedItem, isDemoMode) => [
+export const generateDataSetsDetailsMenu = selectedItem => [
{
label: 'overview',
id: 'overview'
@@ -82,21 +84,15 @@ export const generateDataSetsDetailsMenu = (selectedItem, isDemoMode) => [
{
label: 'analysis',
id: 'analysis',
- hidden: !isDemoMode || !selectedItem?.extra_data
+ hidden: !selectedItem?.extra_data
}
]
-export const generatePageData = (
- viewMode,
- selectedItem,
- params,
- isDetailsPopUp = false,
- isDemoMode
-) => {
+export const generatePageData = (viewMode, isDetailsPopUp = false, selectedItem, params) => {
return {
page: DATASETS_PAGE,
details: {
- menu: generateDataSetsDetailsMenu(selectedItem, isDemoMode),
+ menu: generateDataSetsDetailsMenu(selectedItem),
infoHeaders,
type: DATASETS_PAGE,
hideBackBtn: viewMode === FULL_VIEW_MODE && !isDetailsPopUp,
@@ -129,7 +125,17 @@ export const handleApplyDetailsChanges = (
setNotification,
dispatch
) => {
- return applyTagChanges(changes, selectedItem, projectName, dispatch, setNotification)
+ return processActionAfterTagUniquesValidation({
+ tag: changes?.data?.tag?.currentFieldValue,
+ artifact: selectedItem,
+ projectName,
+ dispatch,
+ actionCallback: () =>
+ applyTagChanges(changes, selectedItem, projectName, dispatch, setNotification),
+ throwError: true,
+ showLoader: () => dispatch(increaseDetailsLoadingCounter()),
+ hideLoader: () => dispatch(decreaseDetailsLoadingCounter())
+ })
}
export const generateActionsMenu = (
diff --git a/src/components/Details/Details.jsx b/src/components/Details/Details.jsx
index b99e4bfb04..10617d5f5e 100644
--- a/src/components/Details/Details.jsx
+++ b/src/components/Details/Details.jsx
@@ -17,23 +17,12 @@ 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 React, { useEffect, useCallback, useRef, useMemo, useState } from 'react'
+import React, { useEffect, useCallback } from 'react'
import PropTypes from 'prop-types'
-import { useLocation, useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
-import { createForm } from 'final-form'
-import arrayMutators from 'final-form-arrays'
-import { Form } from 'react-final-form'
-import { cloneDeep, isEqual, pickBy } from 'lodash'
-import classnames from 'classnames'
-import { ConfirmDialog } from 'igz-controls/components'
-import ErrorMessage from '../../common/ErrorMessage/ErrorMessage'
-import DetailsTabsContent from './DetailsTabsContent/DetailsTabsContent'
import DetailsHeader from './DetailsHeader/DetailsHeader'
-import Loader from '../../common/Loader/Loader'
-import TabsSlider from '../../common/TabsSlider/TabsSlider'
-import BlockerSpy from '../../common/BlockerSpy/BlockerSpy'
+import DetailsTabsContent from './DetailsTabsContent/DetailsTabsContent'
import {
ALERTS_PAGE,
@@ -47,8 +36,7 @@ import {
JOBS_PAGE,
LLM_PROMPTS_PAGE,
MODEL_ENDPOINTS_TAB,
- MODELS_TAB,
- VIEW_SEARCH_PARAMETER
+ MODELS_TAB
} from '../../constants'
import {
generateAlertsContent,
@@ -57,24 +45,13 @@ import {
generateFunctionsContent,
generateJobsContent
} from './details.util'
-import {
- removeDetailsPopUpInfoContent,
- removeInfoContent,
- removeModelFeatureVector,
- resetChanges,
- setDetailsPopUpInfoContent,
- setEditMode,
- setFiltersWasHandled,
- setInfoContent,
- showWarning
-} from '../../reducers/detailsReducer'
-import { ACTIONS_MENU } from '../../types'
-import { TERTIARY_BUTTON, PRIMARY_BUTTON } from 'igz-controls/constants'
+import { DETAILS_MENU, ACTIONS_MENU } from 'igz-controls/types'
import { isEveryObjectValueEmpty } from '../../utils/isEveryObjectValueEmpty'
-import { setFieldState } from 'igz-controls/utils/form.util'
+import { removeModelFeatureVector } from '../../reducers/detailsReducer'
import { showArtifactsPreview } from '../../reducers/artifactsReducer'
+import { useDetails } from 'igz-controls/hooks/useDetails.hook'
-import './details.scss'
+import 'igz-controls/scss/details.scss'
const Details = ({
actionsMenu,
@@ -94,37 +71,36 @@ const Details = ({
tab = '',
withActionMenu = true
}) => {
- const [blocker, setBlocker] = useState({})
- const applyChangesRef = useRef()
- const dispatch = useDispatch()
- const detailsRef = useRef()
- const params = useParams()
+ const {
+ DetailsContainer,
+ applyChanges,
+ applyChangesRef,
+ blocker,
+ cancelChanges,
+ detailsPanelClassNames,
+ detailsRef,
+ commonDetailsStore,
+ doNotLeavePage,
+ form,
+ handleShowWarning,
+ leavePage,
+ location,
+ params,
+ removeDetailsInfo,
+ setBlocker,
+ setDetailsInfo,
+ shouldDetailsBlock
+ } = useDetails({
+ applyDetailsChanges,
+ applyDetailsChangesCallback,
+ formInitialValues,
+ isDetailsPopUp,
+ isDetailsScreen,
+ selectedItem
+ })
const detailsStore = useSelector(store => store.detailsStore)
const frontendSpec = useSelector(store => store.appStore.frontendSpec)
- const location = useLocation()
- const [setDetailsInfo, removeDetailsInfo] = useMemo(() => {
- return isDetailsPopUp
- ? [setDetailsPopUpInfoContent, removeDetailsPopUpInfoContent]
- : [setInfoContent, removeInfoContent]
- }, [isDetailsPopUp])
- const previousPathnameRef = useRef(
- location.pathname.substring(0, location.pathname.lastIndexOf(params.tab))
- )
-
- const detailsPanelClassNames = classnames(
- 'table__item',
- detailsStore.showWarning && 'pop-up-dialog-opened',
- isDetailsScreen && 'table__item_big',
- isDetailsPopUp && 'table__item-popup'
- )
-
- const formRef = useRef(
- createForm({
- initialValues: formInitialValues,
- mutators: { ...arrayMutators, setFieldState },
- onSubmit: () => {}
- })
- )
+ const dispatch = useDispatch()
const handlePreview = useCallback(() => {
dispatch(
@@ -135,14 +111,6 @@ const Details = ({
)
}, [dispatch, selectedItem])
- useEffect(() => {
- return () => {
- if (!isDetailsPopUp) {
- dispatch(resetChanges())
- }
- }
- }, [dispatch, isDetailsPopUp])
-
useEffect(() => {
if (!isEveryObjectValueEmpty(selectedItem)) {
if (pageData.details.type === JOBS_PAGE) {
@@ -200,189 +168,54 @@ const Details = ({
}
}, [dispatch, pageData.details.type, removeDetailsInfo, selectedItem])
- const handleShowWarning = useCallback(
- show => {
- dispatch(showWarning(show))
- },
- [dispatch]
- )
-
- const handleRefreshClick = useCallback(
- event => {
- if (
- detailsStore.changes.counter > 0 &&
- document.getElementById('refresh')?.contains(event.target)
- ) {
- handleShowWarning(true)
- dispatch(setFiltersWasHandled(true))
- }
- },
- [detailsStore.changes.counter, dispatch, handleShowWarning]
- )
-
- useEffect(() => {
- window.addEventListener('click', handleRefreshClick)
-
- return () => {
- window.removeEventListener('click', handleRefreshClick)
- }
- }, [handleRefreshClick])
-
- const shouldDetailsBlock = useCallback(
- ({ currentLocation, nextLocation }) => {
- const currentDetailsView = currentLocation.search.split(`${VIEW_SEARCH_PARAMETER}=`)?.[1]
- const nextDetailsView = nextLocation.search.split(`${VIEW_SEARCH_PARAMETER}=`)?.[1]
- const currentLocationPathname = currentLocation.pathname.split('/')
- const nextLocationPathname = nextLocation.pathname.split('/')
- currentLocationPathname.pop()
- nextLocationPathname.pop()
-
- return (
- detailsStore.changes.counter > 0 &&
- (currentLocationPathname.join('/') !== nextLocationPathname.join('/') ||
- currentDetailsView !== nextDetailsView)
- )
- },
- [detailsStore.changes.counter]
- )
-
- useEffect(() => {
- if (
- formRef.current &&
- detailsStore.changes.counter === 0 &&
- !isEqual(pickBy(formInitialValues), pickBy(formRef.current.getState()?.values)) &&
- !formRef.current.getState()?.active
- ) {
- formRef.current.restart(formInitialValues)
- }
- }, [formInitialValues, detailsStore.changes.counter])
-
- useEffect(() => {
- const currentPathname = location.pathname.substring(
- 0,
- location.pathname.lastIndexOf(params.tab)
- )
-
- if (previousPathnameRef.current !== currentPathname && !isDetailsPopUp) {
- formRef.current.restart(formInitialValues)
- dispatch(setEditMode(false))
- previousPathnameRef.current = currentPathname
- }
- }, [dispatch, formInitialValues, isDetailsPopUp, location.pathname, params.tab])
-
- const applyChanges = useCallback(() => {
- applyDetailsChanges(detailsStore.changes).then(() => {
- dispatch(resetChanges())
-
- const changes = cloneDeep(detailsStore.changes)
-
- // todo [redux-toolkit] rework it after redux-toolkit will be added to the details store. Need to remove setTimeout and use a Promise that resolves after the state is updated.
- setTimeout(() => {
- applyDetailsChangesCallback(changes, selectedItem)
- })
- })
- }, [
- applyDetailsChanges,
- applyDetailsChangesCallback,
- detailsStore.changes,
- dispatch,
- selectedItem
- ])
-
- const cancelChanges = useCallback(() => {
- if (detailsStore.changes.counter > 0) {
- dispatch(resetChanges())
- formRef.current.reset(formInitialValues)
- }
- }, [detailsStore.changes.counter, dispatch, formInitialValues])
-
- const leavePage = useCallback(() => {
- cancelChanges()
- handleShowWarning(false)
-
- if (detailsStore.filtersWasHandled) {
- dispatch(setFiltersWasHandled(false))
- } else {
- blocker.proceed?.()
- }
-
- window.dispatchEvent(new CustomEvent('discardChanges'))
- }, [blocker, cancelChanges, detailsStore.filtersWasHandled, dispatch, handleShowWarning])
-
- const doNotLeavePage = useCallback(() => {
- blocker.reset?.()
- dispatch(showWarning(false))
- window.dispatchEvent(new CustomEvent('cancelLeave'))
- }, [blocker, dispatch])
-
return (
-
+ setBlocker={setBlocker}
+ shouldDetailsBlock={shouldDetailsBlock}
+ withActionMenu={withActionMenu}
+ />
)
}
@@ -390,13 +223,7 @@ Details.propTypes = {
actionsMenu: ACTIONS_MENU.isRequired,
applyDetailsChanges: PropTypes.func,
applyDetailsChangesCallback: PropTypes.func,
- detailsMenu: PropTypes.arrayOf(
- PropTypes.shape({
- id: PropTypes.string.isRequired,
- label: PropTypes.string.isRequired,
- hidden: PropTypes.bool
- })
- ).isRequired,
+ detailsMenu: DETAILS_MENU.isRequired,
detailsPopUpSelectedTab: PropTypes.string,
formInitialValues: PropTypes.object,
getCloseDetailsLink: PropTypes.func,
diff --git a/src/components/Details/DetailsGenerationConfiguration/DetailsGenerationConfiguration.jsx b/src/components/Details/DetailsGenerationConfiguration/DetailsGenerationConfiguration.jsx
new file mode 100644
index 0000000000..a95293080a
--- /dev/null
+++ b/src/components/Details/DetailsGenerationConfiguration/DetailsGenerationConfiguration.jsx
@@ -0,0 +1,58 @@
+/*
+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 React from 'react'
+import PropTypes from 'prop-types'
+import { isEmpty } from 'lodash'
+
+import './detailsGenerationConfiguration.scss'
+
+const DetailsGenerationConfiguration = ({ selectedItem }) => {
+ return (
+
+ {!isEmpty(selectedItem.invocation_config) && (
+ <>
+
+ {Object.entries(selectedItem.invocation_config || {}).length} modifications made to
+ the default configuration:
+
+
+ {Object.entries(selectedItem.invocation_config || {}).map(([key, value]) => {
+ return (
+
+ )
+ })}
+
+ )}
+ {isEmpty(selectedItem.invocation_config) &&
Default configuration is used. }
+
+ )
+}
+
+DetailsGenerationConfiguration.propTypes = {
+ selectedItem: PropTypes.object.isRequired
+}
+
+export default DetailsGenerationConfiguration
diff --git a/src/components/Details/DetailsGenerationConfiguration/detailsGenerationConfiguration.scss b/src/components/Details/DetailsGenerationConfiguration/detailsGenerationConfiguration.scss
new file mode 100644
index 0000000000..7794ba4e90
--- /dev/null
+++ b/src/components/Details/DetailsGenerationConfiguration/detailsGenerationConfiguration.scss
@@ -0,0 +1,27 @@
+@use 'igz-controls/scss/borders';
+@use 'igz-controls/scss/colors';
+
+.generation-configuration-tab {
+ margin-top: 15px;
+
+ &__counter {
+ margin-bottom: 20px;
+ }
+
+ &__table-header {
+ font-weight: 500;
+ }
+
+ &__row {
+ display: flex;
+ padding: 10px 0;
+ font-size: 15px;
+ line-height: 20px;
+ border-bottom: borders.$secondaryBorder;
+
+ &-key,
+ &-value {
+ width: 50%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/Details/DetailsHeader/DetailsHeader.jsx b/src/components/Details/DetailsHeader/DetailsHeader.jsx
index 1b49000623..e65244c818 100644
--- a/src/components/Details/DetailsHeader/DetailsHeader.jsx
+++ b/src/components/Details/DetailsHeader/DetailsHeader.jsx
@@ -17,40 +17,29 @@ 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 React, { useCallback, useRef, useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
import PropTypes from 'prop-types'
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
-import { isEmpty } from 'lodash'
import { useDispatch, useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { isEmpty } from 'lodash'
-import { Button, Tooltip, TextTooltipTemplate, RoundedIcon } from 'igz-controls/components'
-import LoadButton from '../../../common/LoadButton/LoadButton'
import Select from '../../../common/Select/Select'
-import ActionsMenu from '../../../common/ActionsMenu/ActionsMenu'
+import { Tooltip, TextTooltipTemplate, RoundedIcon } from 'igz-controls/components'
+import { ACTIONS_MENU } from 'igz-controls/types'
import {
+ ABORTED_STATE,
DETAILS_ARTIFACTS_TAB,
- FULL_VIEW_MODE,
- JOBS_PAGE,
- VIEW_SEARCH_PARAMETER
+ DETAILS_LOGS_TAB,
+ JOBS_PAGE
} from '../../../constants'
-import { formatDatetime } from '../../../utils'
-import { TERTIARY_BUTTON } from 'igz-controls/constants'
-import { ACTIONS_MENU } from '../../../types'
-import { getViewMode } from '../../../utils/helper'
-import {
- generateUrlFromRouterPath,
- getDefaultCloseDetailsLink
-} from '../../../utils/link-helper.util'
-import { getFilteredSearchParams } from '../../../utils/filter.util'
-import { setIteration } from '../../../reducers/detailsReducer'
+import { formatDatetime } from 'igz-controls/utils/datetime.util'
+import { generateUrlFromRouterPath } from 'igz-controls/utils/common.util'
+import { getDefaultCloseDetailsLink } from '../../../utils/link-helper.util'
+import { setIteration, setRunAttempt } from '../../../reducers/detailsReducer'
+import { useDetailsHeader } from 'igz-controls/hooks/useDetailsHeader.hook'
-import Close from 'igz-controls/images/close.svg?react'
import Back from 'igz-controls/images/back-arrow.svg?react'
-import Refresh from 'igz-controls/images/refresh.svg?react'
-import EnlargeIcon from 'igz-controls/images/ml-enlarge.svg?react'
-import MinimizeIcon from 'igz-controls/images/ml-minimize.svg?react'
-import HistoryIcon from 'igz-controls/images/history.svg?react'
import InfoIcon from 'igz-controls/images/info-fill.svg?react'
const DetailsHeader = ({
@@ -60,22 +49,37 @@ const DetailsHeader = ({
cancelChanges,
getCloseDetailsLink = null,
handleCancel = null,
- handleRefresh,
+ handleRefresh = null,
handleShowWarning,
- isDetailsScreen,
isDetailsPopUp = false,
+ isDetailsScreen,
pageData,
selectedItem,
- tab,
+ tab = '',
withActionMenu = true
}) => {
+ const {
+ DetailsHeaderContainer,
+ actionButton,
+ commonDetailsStore,
+ handleActionClick,
+ handleBackClick,
+ handleCancelClick,
+ headerRef,
+ location,
+ navigate,
+ params,
+ showAllVersions,
+ viewMode,
+ withToggleViewBtn
+ } = useDetailsHeader({
+ handleCancel,
+ handleShowWarning,
+ isDetailsPopUp,
+ pageData
+ })
+
const detailsStore = useSelector(store => store.detailsStore)
- const params = useParams()
- const navigate = useNavigate()
- const viewMode = getViewMode(window.location.search)
- const { actionButton, withToggleViewBtn, showAllVersions } = pageData.details
- const headerRef = useRef()
- const location = useLocation()
const dispatch = useDispatch()
const errorMessage = useMemo(
@@ -92,253 +96,215 @@ const DetailsHeader = ({
return isDetailsPopUp ? detailsStore.detailsJobPods : detailsStore.pods
}, [detailsStore.detailsJobPods, detailsStore.pods, isDetailsPopUp])
- const {
- value: stateValue,
- label: stateLabel,
- className: stateClassName
- } = selectedItem.state || {}
+ const state = useMemo(() => {
+ const selectedItemState = selectedItem.state || {}
- const handleBackClick = useCallback(() => {
- if (detailsStore.changes.counter > 0) {
- handleShowWarning(true)
- } else {
- handleCancel()
+ return {
+ value: selectedItemState.value,
+ label: selectedItemState.label,
+ className: selectedItemState.className
}
- }, [detailsStore.changes.counter, handleCancel, handleShowWarning])
+ }, [selectedItem.state])
- const handleCancelClick = useCallback(() => {
- if (detailsStore.changes.counter === 0 || isDetailsPopUp) {
- handleCancel()
- }
- }, [detailsStore.changes.counter, handleCancel, isDetailsPopUp])
-
- return (
-
-
-
- {isDetailsScreen && !pageData.details.hideBackBtn && !isDetailsPopUp && (
-
-
-
- )}
-
-
- {/*In the Workflow page we display both Jobs and Functions items. The function contains `updated` property.
+
+
+
+ )}
+
}>
+ {selectedItem.name || selectedItem.db_key}
+
+
+ )
+ }, [
+ isDetailsScreen,
+ pageData.details.hideBackBtn,
+ isDetailsPopUp,
+ getCloseDetailsLink,
+ selectedItem.name,
+ handleBackClick,
+ selectedItem.db_key
+ ])
+
+ const renderStatus = useCallback(() => {
+ return (
+ <>
+ {/*In the Workflow page we display both Jobs and Functions items. The function contains `updated` property.
The job contains startTime property.*/}
-
-
- {Object.keys(selectedItem).length > 0 &&
- pageData.page === JOBS_PAGE &&
- !selectedItem?.updated
- ? formatDatetime(
- selectedItem?.startTime,
- stateValue === 'aborted' ? 'N/A' : 'Not yet started'
- )
- : selectedItem?.updated
- ? formatDatetime(selectedItem?.updated, 'N/A')
- : pageData.details.additionalHeaderInfo || ''}
-
- {stateValue && stateLabel && (
-
-
- {selectedItem.ui?.customError?.title && selectedItem.ui?.customError?.message && (
-
- {`${podsData.podsPending.length} of ${podsData.podsList.length} pods are pending`}
-
- )}
- {detailsStore.pods.error && (
- Failed to load pods
- )}
-
- {selectedItem.ui?.infoMessage && (
-
-
-
-
+
+
+ {Object.keys(selectedItem).length > 0 &&
+ pageData.page === JOBS_PAGE &&
+ !selectedItem?.updated
+ ? formatDatetime(
+ selectedItem?.startTime,
+ state.value === ABORTED_STATE ? 'N/A' : 'Not yet started'
+ )
+ : selectedItem?.updated
+ ? formatDatetime(selectedItem?.updated, 'N/A')
+ : pageData.details.additionalHeaderInfo || ''}
+
+ {state.value && state.label && (
+
-
-
- {params.tab === DETAILS_ARTIFACTS_TAB && detailsStore.iteration && !isDetailsPopUp && (
- {
- dispatch(setIteration(option))
- }}
- options={detailsStore.iterationOptions}
- selectedId={detailsStore.iteration}
- />
- )}
-
-
- {detailsStore.changes.counter > 0 && !isDetailsPopUp && (
- <>
-
+
+ {selectedItem.ui?.customError?.title && selectedItem.ui?.customError?.message && (
}
>
-
+ {selectedItem.ui.customError.title} {selectedItem.ui.customError.message}
-
- )}
- {actionButton && !actionButton.hidden && (
-
- )}
- {showAllVersions && (
-
showAllVersions()}
- tooltipText="Show all versions"
- >
-
- )}
- {isDetailsScreen && (
-
handleRefresh(selectedItem)}
- tooltipText="Refresh"
- >
-
- )}
- {withActionMenu &&
}
-
- {withToggleViewBtn && !isDetailsPopUp && (
- <>
- {viewMode !== FULL_VIEW_MODE && (
-
{
- navigate(
- `${location.pathname}${window.location.search}${window.location.search ? '&' : '?'}${VIEW_SEARCH_PARAMETER}=full`
- )
- }}
- id="full-view"
- tooltipText="Full view"
- >
-
- )}
- {viewMode === FULL_VIEW_MODE && (
-
{
- navigate(
- `${location.pathname}${getFilteredSearchParams(window.location.search, [VIEW_SEARCH_PARAMETER])}`
- )
- }}
- id="table-view"
- tooltipText="Table view"
- >
-
- )}
-
)}
- {!pageData.details.hideBackBtn &&
- (isDetailsPopUp ? (
-
-
-
-
- ) : (
-
-
-
-
- ))}
+ {errorMessage && (
+
}
+ >
+ {errorMessage}
+
+ )}
+ {!isEmpty(podsData?.podsPending) && (
+
+ {`${podsData.podsPending.length} of ${podsData.podsList.length} pods are pending`}
+
+ )}
+ {detailsStore.pods.error && (
+
Failed to load pods
+ )}
-
-
+ {selectedItem.ui?.infoMessage && (
+
+
+
+
+ )}
+
+ )
+ }, [
+ selectedItem,
+ pageData.page,
+ pageData.details.additionalHeaderInfo,
+ errorMessage,
+ podsData.podsPending,
+ podsData.podsList.length,
+ detailsStore.pods.error,
+ state.value,
+ state.label,
+ state.className
+ ])
+
+ const renderCustomElements = useCallback(() => {
+ switch (params.tab) {
+ case DETAILS_ARTIFACTS_TAB: {
+ return (
+ detailsStore.iteration &&
+ detailsStore.iterationOptions &&
+ !isDetailsPopUp && (
+
{
+ dispatch(setIteration(option))
+ }}
+ options={detailsStore.iterationOptions}
+ selectedId={detailsStore.iteration}
+ />
+ )
+ )
+ }
+ case DETAILS_LOGS_TAB: {
+ return (
+ detailsStore.runAttempt &&
+ !isEmpty(detailsStore.runAttemptOptions) &&
+ !isDetailsPopUp && (
+ {
+ dispatch(setRunAttempt(option))
+ }}
+ options={detailsStore.runAttemptOptions}
+ selectedId={detailsStore.runAttempt}
+ />
+ )
+ )
+ }
+ default:
+ return null
+ }
+ }, [
+ params.tab,
+ detailsStore.iteration,
+ detailsStore.iterationOptions,
+ detailsStore.runAttempt,
+ detailsStore.runAttemptOptions,
+ isDetailsPopUp,
+ dispatch
+ ])
+
+ return (
+
+
+
+ {Object.values(selectedItem.prompt_legend ?? {}).map(legend => {
+ const rowClassNames = classNames(
+ 'arguments-tab__row',
+ selectedArgument.field + selectedArgument.description ===
+ legend.field + legend.description && 'arguments-tab__row_selected'
+ )
+
+ return (
+
+
+
+
{legend.description}
+
+ )
+ })}
+ {isEmpty(selectedItem.prompt_legend) &&
}
+
+ {selectedTab === PROMPT_TAB ? (
+
+ ) : (
+
+ )}
+
{
+ setSelectedArgument(currentArgument)
+ setSelectedTab(ARGUMENTS_TAB)
+ }}
+ >
+ {`{${argName}}`}
+
+
+ )
+ }
+
+ return (
+
+ {`{${argName}}`}
+
+ )
+ }
+
+ return part
+ })
+
+ return (
+
+
{capitalize(item.role)}
+
+ {parts}
+
+
+
+ setForceExpandAll(Boolean(value))}
+ />
+
+
+ {showError ? (
+
+ ) : loading ? (
+
+ ) : (
+ <>
+
+
+ {searchResult || promptTemplate}
+
+
+ )}
+
+
- {isAlertsPage && detailsStore.loadingCounter === 0 && (
-
-
- )}
-
{generatedMetrics.length === 0 ? (
!detailsStore.loadingCounter ? (
requestErrorMessage ? (
@@ -167,10 +151,25 @@ const DetailsAlertsMetrics = ({ selectedItem, filters, isAlertsPage = true }) =>
)
) : null
) : (
-
+
{generatedMetrics.map(([applicationName, applicationMetrics]) => (
- {isAlertsPage && {applicationName}
}
+ {isAlertsPage && detailsStore.loadingCounter === 0 && (
+
+ {applicationName}
+
+ )}
{applicationMetrics.map(metric =>
!metric.data || isEmpty(metric.points) ? (
{
const table = generateFeaturesAnalysis(selectedItem)
const amethystColor = useMemo(() => getScssVariableValue('--amethystColor'), [])
- const chartConfig = useMemo(getHistogramChartConfig, [])
+ const chartConfig = useMemo(() => getHistogramChartConfig, [])
return (
diff --git a/src/components/DetailsFeaturesAnalysis/detailsFeaturesAnalysis.util.jsx b/src/components/DetailsFeaturesAnalysis/detailsFeaturesAnalysis.util.jsx
index 535be4ef25..de49bcbf2a 100644
--- a/src/components/DetailsFeaturesAnalysis/detailsFeaturesAnalysis.util.jsx
+++ b/src/components/DetailsFeaturesAnalysis/detailsFeaturesAnalysis.util.jsx
@@ -17,7 +17,7 @@ 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 { roundFloats } from '../../utils/roundFloats'
+import { roundFloats } from 'igz-controls/utils/common.util'
import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
import LabelColumn from 'igz-controls/images/ic_target-with-dart.svg?react'
diff --git a/src/components/DetailsInfo/DetailsInfo.jsx b/src/components/DetailsInfo/DetailsInfo.jsx
index 8a69b35f36..b02974e666 100644
--- a/src/components/DetailsInfo/DetailsInfo.jsx
+++ b/src/components/DetailsInfo/DetailsInfo.jsx
@@ -35,10 +35,10 @@ import {
import { detailsInfoActions, detailsInfoReducer, initialState } from './detailsInfoReducer'
import { handleFinishEdit } from '../Details/details.util'
import { isEveryObjectValueEmpty } from '../../utils/isEveryObjectValueEmpty'
-import { setEditMode } from '../../reducers/detailsReducer'
+import { setEditMode } from 'igz-controls/reducers/commonDetailsReducer'
const DetailsInfo = React.forwardRef(
- ({ detailsStore, formState, isDetailsPopUp, pageData, selectedItem }, applyChangesRef) => {
+ ({ commonDetailsStore, formState, isDetailsPopUp, pageData, selectedItem }, applyChangesRef) => {
const location = useLocation()
const [detailsInfoState, detailsInfoDispatch] = useReducer(detailsInfoReducer, initialState)
const params = useParams()
@@ -128,7 +128,7 @@ const DetailsInfo = React.forwardRef(
dispatch(setEditMode(false))
return handleFinishEdit(
- detailsStore.changes,
+ commonDetailsStore.changes,
detailsInfoActions,
detailsInfoDispatch,
currentField,
@@ -136,7 +136,7 @@ const DetailsInfo = React.forwardRef(
dispatch
)
},
- [detailsStore.changes, dispatch, formState]
+ [commonDetailsStore.changes, dispatch, formState]
)
return (
@@ -144,7 +144,7 @@ const DetailsInfo = React.forwardRef(
additionalInfo={{ alerts, configuration, document_loader, drift, producer, sources }}
detailsInfoDispatch={detailsInfoDispatch}
detailsInfoState={detailsInfoState}
- detailsStore={detailsStore}
+ commonDetailsStore={commonDetailsStore}
formState={formState}
handleDiscardChanges={handleDiscardChanges}
handleFinishEdit={finishEdit}
@@ -162,7 +162,7 @@ const DetailsInfo = React.forwardRef(
DetailsInfo.displayName = 'DetailsInfo'
DetailsInfo.propTypes = {
- detailsStore: PropTypes.object.isRequired,
+ commonDetailsStore: PropTypes.object.isRequired,
formState: PropTypes.object.isRequired,
isDetailsPopUp: PropTypes.bool.isRequired,
pageData: PropTypes.object.isRequired,
diff --git a/src/components/DetailsInfo/DetailsInfoView.jsx b/src/components/DetailsInfo/DetailsInfoView.jsx
index 50075014d9..205b775a84 100644
--- a/src/components/DetailsInfo/DetailsInfoView.jsx
+++ b/src/components/DetailsInfo/DetailsInfoView.jsx
@@ -37,10 +37,11 @@ import {
FILES_PAGE,
FUNCTIONS_PAGE,
JOBS_PAGE,
+ LLM_PROMPTS_PAGE,
MODELS_PAGE
} from '../../constants'
import { parseKeyValues } from '../../utils'
-import { getChipOptions } from '../../utils/getChipOptions'
+import { getChipOptions } from 'igz-controls/utils/chips.util'
import RightArrow from 'igz-controls/images/ic_arrow-right.svg?react'
@@ -57,7 +58,7 @@ const DetailsInfoView = React.forwardRef(
},
detailsInfoDispatch,
detailsInfoState,
- detailsStore,
+ commonDetailsStore,
formState,
handleDiscardChanges,
handleFinishEdit,
@@ -70,8 +71,8 @@ const DetailsInfoView = React.forwardRef(
ref
) => {
const infoContent = useMemo(
- () => (isDetailsPopUp ? detailsStore.detailsPopUpInfoContent : detailsStore.infoContent),
- [detailsStore.infoContent, detailsStore.detailsPopUpInfoContent, isDetailsPopUp]
+ () => (isDetailsPopUp ? commonDetailsStore.detailsPopUpInfoContent : commonDetailsStore.infoContent),
+ [commonDetailsStore.infoContent, commonDetailsStore.detailsPopUpInfoContent, isDetailsPopUp]
)
const wrapperClassNames = classnames(
!isEveryObjectValueEmpty(additionalInfo)
@@ -90,7 +91,8 @@ const DetailsInfoView = React.forwardRef(
pageData.page === FUNCTIONS_PAGE ||
pageData.page === MODELS_PAGE ||
pageData.page === FEATURE_STORE_PAGE ||
- pageData.page === DOCUMENTS_PAGE) &&
+ pageData.page === DOCUMENTS_PAGE ||
+ pageData.page === LLM_PROMPTS_PAGE) &&
params.pageTab !== FEATURE_SETS_TAB &&
General }
{pageData.details.infoHeaders?.map(header => {
@@ -139,7 +141,8 @@ const DetailsInfoView = React.forwardRef(
pageData.page === FILES_PAGE ||
pageData.page === MODELS_PAGE ||
pageData.page === FEATURE_STORE_PAGE ||
- pageData.page === DOCUMENTS_PAGE
+ pageData.page === DOCUMENTS_PAGE ||
+ pageData.page === LLM_PROMPTS_PAGE
) {
if (header.id === 'labels') {
chipsData.validationRules = infoContent[header.id]?.validationRules
@@ -157,8 +160,8 @@ const DetailsInfoView = React.forwardRef(
chipsData.delimiter = Histogram Data Drift Application
+ Histogram data drift application
)}
@@ -266,7 +269,7 @@ DetailsInfoView.propTypes = {
}),
detailsInfoDispatch: PropTypes.func.isRequired,
detailsInfoState: PropTypes.object.isRequired,
- detailsStore: PropTypes.object.isRequired,
+ commonDetailsStore: PropTypes.object.isRequired,
formState: PropTypes.object,
handleDiscardChanges: PropTypes.func.isRequired,
handleFinishEdit: PropTypes.func.isRequired,
diff --git a/src/components/DetailsInfo/detailsInfo.scss b/src/components/DetailsInfo/detailsInfo.scss
index fc4741f8e8..cfc2613c68 100644
--- a/src/components/DetailsInfo/detailsInfo.scss
+++ b/src/components/DetailsInfo/detailsInfo.scss
@@ -26,13 +26,13 @@ $itemInfoWithoutPadding: item-info-without-padding;
&__header {
margin: 0;
- padding: 10px 0 7.5px 0;
+ padding: 10px 0 7.5px;
font-size: 18px;
}
&__details {
margin: 0 0 21px;
- padding: 0 0 0 0;
+ padding: 0;
list-style-type: none;
&-wrapper {
diff --git a/src/components/DetailsInfo/detailsInfo.util.jsx b/src/components/DetailsInfo/detailsInfo.util.jsx
index 3c1c749fab..042835dd41 100644
--- a/src/components/DetailsInfo/detailsInfo.util.jsx
+++ b/src/components/DetailsInfo/detailsInfo.util.jsx
@@ -34,14 +34,15 @@ import {
MODEL_ENDPOINTS_TAB,
MLRUN_STORAGE_INPUT_PATH_SCHEME
} from '../../constants'
-import { formatDatetime, parseKeyValues, parseUri } from '../../utils'
+import { parseKeyValues, parseUri } from '../../utils'
import { getTriggerCriticalTimePeriod } from '../../utils/createAlertsContent'
-import { getChipOptions } from '../../utils/getChipOptions'
+import { getChipOptions } from 'igz-controls/utils/chips.util'
import { getLimitsGpuType } from '../../elements/FormResourcesUnits/formResourcesUnits.util'
import { isEveryObjectValueEmpty } from '../../utils/isEveryObjectValueEmpty'
-import { roundFloats } from '../../utils/roundFloats'
+import { roundFloats } from 'igz-controls/utils/common.util'
import { generateFunctionPriorityLabel } from '../../utils/generateFunctionPriorityLabel'
import { openPopUp } from 'igz-controls/utils/common.util'
+import { formatDatetime } from 'igz-controls/utils/datetime.util'
export const generateTriggerInfoContent = criteria => {
if (criteria) {
@@ -90,7 +91,7 @@ const generateFunctionConfigurationContent = selectedFunction => {
return [
{
id: 'runOnSpotNodes',
- label: 'Run on Spot nodes',
+ label: 'Run on spot nodes',
value: capitalize(selectedFunction.preemption_mode)
},
{
@@ -135,7 +136,7 @@ const generateFunctionConfigurationContent = selectedFunction => {
},
{
id: 'nodeSelectors',
- label: 'Node Selectors',
+ label: 'Node selectors',
value: selectedFunction.node_selector,
chipVariant: 'results'
}
@@ -151,7 +152,7 @@ const generateModelEndpointDriftContent = modelEndpoint => {
},
{
id: 'hellinger_mean',
- label: 'Mean Hellinger',
+ label: 'Mean hellinger',
value: roundFloats(modelEndpoint.status?.drift_measures?.hellinger_mean, 2) ?? '-'
},
{
@@ -161,7 +162,7 @@ const generateModelEndpointDriftContent = modelEndpoint => {
},
{
id: 'drift_value',
- label: 'Drift Actual Value',
+ label: 'Drift actual value',
value:
isNumber(modelEndpoint.status?.drift_measures?.hellinger_mean) &&
isNumber(modelEndpoint.status?.drift_measures?.tvd_mean)
diff --git a/src/components/DetailsInputs/DetailsInputs.jsx b/src/components/DetailsInputs/DetailsInputs.jsx
index 6b5efbc228..178dc7004e 100644
--- a/src/components/DetailsInputs/DetailsInputs.jsx
+++ b/src/components/DetailsInputs/DetailsInputs.jsx
@@ -25,9 +25,8 @@ import PropTypes from 'prop-types'
import classnames from 'classnames'
import ArtifactsPreviewController from '../ArtifactsPreview/ArtifactsPreviewController'
-import Loader from '../../common/Loader/Loader'
import NoData from '../../common/NoData/NoData'
-import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
+import { Tooltip, TextTooltipTemplate, Loader } from 'igz-controls/components'
import {
ARTIFACT_OTHER_TYPE,
diff --git a/src/components/DetailsInputs/detailsInputs.util.jsx b/src/components/DetailsInputs/detailsInputs.util.jsx
index f83167b95d..cf29606217 100644
--- a/src/components/DetailsInputs/detailsInputs.util.jsx
+++ b/src/components/DetailsInputs/detailsInputs.util.jsx
@@ -20,8 +20,7 @@ such restriction.
import React from 'react'
import classnames from 'classnames'
-import CopyToClipboard from '../../common/CopyToClipboard/CopyToClipboard'
-import { RoundedIcon, TextTooltipTemplate, Tooltip } from 'igz-controls/components'
+import { RoundedIcon, TextTooltipTemplate, Tooltip, CopyToClipboard } from 'igz-controls/components'
import ArtifactPopUp from '../../elements/DetailsPopUp/ArtifactPopUp/ArtifactPopUp'
import FeatureVectorPopUp from '../../elements/DetailsPopUp/FeatureVectorPopUp/FeatureVectorPopUp'
diff --git a/src/components/DetailsLogs/DetailsLogs.jsx b/src/components/DetailsLogs/DetailsLogs.jsx
index d6d64d5bae..0bdc161063 100644
--- a/src/components/DetailsLogs/DetailsLogs.jsx
+++ b/src/components/DetailsLogs/DetailsLogs.jsx
@@ -17,11 +17,13 @@ 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 React, { useEffect, useMemo, useRef, useState } from 'react'
-import { useSelector } from 'react-redux'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import PropTypes from 'prop-types'
import Logs from './Logs'
+import { setRunAttempt, setRunAttemptOptions } from '../../reducers/detailsReducer'
+import { REQUEST_CANCELED } from '../../constants'
const DetailsLogs = ({
additionalLogsTitle = '',
@@ -40,24 +42,45 @@ const DetailsLogs = ({
const streamAdditionalLogsRef = useRef()
const functionsStore = useSelector(store => store.functionsStore)
const jobsStore = useSelector(store => store.jobsStore)
+ const runAttempt = useSelector(store => store.detailsStore.runAttempt)
+ const dispatch = useDispatch()
+ const refreshLogsAbortControllerRef = useRef(new AbortController())
const mainLogsAreLoading = useMemo(() => {
- return functionsStore.logs.loading || jobsStore.logs.loading
- }, [functionsStore.logs.loading, jobsStore.logs.loading])
+ return functionsStore.logs.loading || jobsStore.logs.loadingCounter > 0
+ }, [functionsStore.logs.loading, jobsStore.logs.loadingCounter])
const additionalLogsAreLoading = useMemo(() => {
return functionsStore.nuclioLogs.loading
}, [functionsStore.nuclioLogs.loading])
+ const refreshLogsHandler = useCallback(
+ (item, project, setDetailsLogs, streamLogsRef, runAttempt) => {
+ refreshLogsAbortControllerRef.current?.abort?.(REQUEST_CANCELED)
+ streamLogsRef.current = null
+ refreshLogsAbortControllerRef.current = new AbortController()
+
+ return refreshLogs(
+ item,
+ project,
+ setDetailsLogs,
+ streamLogsRef,
+ runAttempt,
+ refreshLogsAbortControllerRef.current?.signal
+ )
+ },
+ [refreshLogs]
+ )
+
useEffect(() => {
if (refreshLogs) {
- refreshLogs(item, item.project, setDetailsLogs, streamLogsRef)
+ refreshLogsHandler(item, item.project, setDetailsLogs, streamLogsRef, runAttempt)
return () => {
setDetailsLogs('')
removeLogs()
}
}
- }, [item, refreshLogs, removeLogs, withLogsRefreshBtn])
+ }, [item, refreshLogs, removeLogs, withLogsRefreshBtn, runAttempt, refreshLogsHandler])
useEffect(() => {
refreshAdditionalLogs &&
@@ -69,12 +92,37 @@ const DetailsLogs = ({
}
}, [item, withLogsRefreshBtn, refreshAdditionalLogs, removeAdditionalLogs])
+ useEffect(() => {
+ if (item?.retryCount > 0) {
+ const attemptsList = Array.from({ length: item.retryCount + 1 }, (_, index) => ({
+ id: `${index + 1}`,
+ label: `${index + 1}`
+ }))
+
+ attemptsList[attemptsList.length - 1].id = '0'
+
+ dispatch(setRunAttemptOptions(attemptsList))
+
+ return () => {
+ dispatch(setRunAttemptOptions([]))
+ dispatch(setRunAttempt('0'))
+ refreshLogsAbortControllerRef.current?.abort?.(REQUEST_CANCELED)
+ }
+ } else {
+ return () => {
+ refreshLogsAbortControllerRef.current?.abort?.(REQUEST_CANCELED)
+ }
+ }
+ }, [dispatch, item])
+
return (
{logsTitle &&
{logsTitle} }
refreshLogs(item, item.project, setDetailsLogs, streamLogsRef)}
+ refreshLogs={() =>
+ refreshLogsHandler(item, item.project, setDetailsLogs, streamLogsRef, runAttempt)
+ }
ref={streamLogsRef}
withLogsRefreshBtn={withLogsRefreshBtn}
detailsLogs={detailsLogs}
diff --git a/src/components/DetailsLogs/Logs.jsx b/src/components/DetailsLogs/Logs.jsx
index b9ee49f02c..3d5110b9f1 100644
--- a/src/components/DetailsLogs/Logs.jsx
+++ b/src/components/DetailsLogs/Logs.jsx
@@ -20,8 +20,7 @@ such restriction.
import React from 'react'
import PropTypes from 'prop-types'
-import { Button } from 'igz-controls/components'
-import Loader from '../../common/Loader/Loader'
+import { Button, Loader } from 'igz-controls/components'
import NoData from '../../common/NoData/NoData'
import RefreshIcon from 'igz-controls/images/refresh.svg?react'
diff --git a/src/components/DetailsMetadata/DetailsMetadata.jsx b/src/components/DetailsMetadata/DetailsMetadata.jsx
index 124eaba663..3e25ce7878 100644
--- a/src/components/DetailsMetadata/DetailsMetadata.jsx
+++ b/src/components/DetailsMetadata/DetailsMetadata.jsx
@@ -21,9 +21,8 @@ import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
-import ChipCell from '../../common/ChipCell/ChipCell'
import NoData from '../../common/NoData/NoData'
-import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
+import { Tooltip, TextTooltipTemplate, ChipCell } from 'igz-controls/components'
import { generateMetadata } from './detailsMetadata.util'
diff --git a/src/components/DetailsMetrics/DetailsMetrics.jsx b/src/components/DetailsMetrics/DetailsMetrics.jsx
index 1d2ac8f42a..8f76078faa 100644
--- a/src/components/DetailsMetrics/DetailsMetrics.jsx
+++ b/src/components/DetailsMetrics/DetailsMetrics.jsx
@@ -22,12 +22,12 @@ import PropTypes from 'prop-types'
import { useDispatch, useSelector } from 'react-redux'
import { isEmpty } from 'lodash'
-import ApplicationMetricCard from './MetricsCards/ApplicationMetricCard'
+import ApplicationMetricCard from './MetricsCards/ApplicationMetricCard/ApplicationMetricCard'
import DatePicker from '../../common/DatePicker/DatePicker'
-import InvocationsMetricCard from './MetricsCards/InvocationsMetricCard'
+import InvocationsMetricCard from './MetricsCards/InvocationsMetricCard/InvocationsMetricCard'
import MetricsSelector from '../../elements/MetricsSelector/MetricsSelector'
import NoData from '../../common/NoData/NoData'
-import NoMetricData from './MetricsCards/NoMetricData'
+import NoMetricData from './MetricsCards/NoMetricData/NoMetricData'
import StatsCard from '../../common/StatsCard/StatsCard'
import {
@@ -42,6 +42,7 @@ import {
TIME_FRAME_LIMITS
} from '../../utils/datePicker.util'
import {
+ clearMetricsOptions,
fetchModelEndpointMetrics,
fetchModelEndpointMetricsValues,
setDetailsDates,
@@ -54,7 +55,12 @@ import MetricsIcon from 'igz-controls/images/metrics-icon.svg?react'
import './DetailsMetrics.scss'
-const DetailsMetrics = ({ selectedItem }) => {
+const DetailsMetrics = ({
+ applicationNameProp = '',
+ selectedItem,
+ renderTitle = null,
+ isDetailsPopUp = false
+}) => {
const [metrics, setMetrics] = useState([])
const [selectedDate, setSelectedDate] = useState('')
const [previousTotalInvocation, setPreviousTotalInvocation] = useState(0)
@@ -118,18 +124,21 @@ const DetailsMetrics = ({ selectedItem }) => {
dispatch(
fetchModelEndpointMetrics({
project: selectedItem.metadata.project,
- uid: selectedItem.metadata.uid
+ uid: selectedItem.metadata.uid,
+ applicationName: applicationNameProp
})
)
.unwrap()
.then(() => setMetricOptionsAreLoaded(true))
- }, [dispatch, selectedItem.metadata.project, selectedItem.metadata.uid])
+ }, [applicationNameProp, dispatch, selectedItem.metadata.project, selectedItem.metadata.uid])
useEffect(() => {
const selectedDate = detailsStore.dates.selectedOptionId
if (!selectedDate || !(selectedDate in timeRangeMapping)) return
- setSelectedDate(timeRangeMapping[selectedDate])
+ queueMicrotask(() => {
+ setSelectedDate(timeRangeMapping[selectedDate])
+ })
}, [detailsStore.dates.selectedOptionId])
const fetchData = useCallback(
@@ -213,7 +222,9 @@ const DetailsMetrics = ({ selectedItem }) => {
selectedItem.metadata.uid
)
} else {
- setMetrics([])
+ queueMicrotask(() => {
+ setMetrics([])
+ })
}
return () => {
@@ -232,34 +243,46 @@ const DetailsMetrics = ({ selectedItem }) => {
metricsValuesAbortController
])
+ useEffect(() => {
+ if (isDetailsPopUp) {
+ return () => {
+ dispatch(clearMetricsOptions())
+ }
+ }
+ }, [dispatch, isDetailsPopUp])
+
return (
-
-
- dispatch(
- setSelectedMetricsOptions({
- endpointUid: selectedItem.metadata.uid,
- metrics
- })
- )
- }
- preselectedMetrics={detailsStore.metricsOptions.preselected}
- />
-
+ {renderTitle &&
{renderTitle()} }
+
+
+ dispatch(
+ setSelectedMetricsOptions({
+ endpointUid: selectedItem.metadata.uid,
+ metrics
+ })
+ )
+ }
+ preselectedMetrics={detailsStore.metricsOptions.preselected}
+ />
+
- {applicationName === ML_RUN_INFRA ? '' : applicationName}
+ {applicationName === ML_RUN_INFRA || applicationNameProp ? '' : applicationName}
{applicationMetrics.map(metric => {
if (applicationName === ML_RUN_INFRA) {
@@ -326,7 +349,10 @@ const DetailsMetrics = ({ selectedItem }) => {
}
DetailsMetrics.propTypes = {
- selectedItem: PropTypes.object,
+ applicationNameProp: PropTypes.string,
+ selectedItem: PropTypes.object.isRequired,
+ renderTitle: PropTypes.func,
+ isDetailsPopUp: PropTypes.bool
}
export default React.memo(DetailsMetrics)
diff --git a/src/components/DetailsMetrics/DetailsMetrics.scss b/src/components/DetailsMetrics/DetailsMetrics.scss
index c0fcd57790..f8d9158357 100644
--- a/src/components/DetailsMetrics/DetailsMetrics.scss
+++ b/src/components/DetailsMetrics/DetailsMetrics.scss
@@ -4,22 +4,38 @@
$stickyHeaderHeight: 55px;
.metrics-wrapper {
- &__custom-filters {
+ &__header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: flex-end;
+ justify-content: space-between;
background-color: colors.$white;
- > * {
- margin: 0 0 15px 0;
+ &__custom-filters {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-end;
+ width: 100%;
+ background-color: colors.$white;
+
+ > * {
+ margin: 0 0 15px;
+ }
+
+ .details-date-picker {
+ margin-left: 15px;
+ }
}
- .details-date-picker {
- margin-left: 15px;
+ &__title {
+ max-width: 350px;
+ font-size: 24px;
+
+ a:hover {
+ text-decoration: underline;
+ }
}
}
@@ -37,363 +53,12 @@ $stickyHeaderHeight: 55px;
font-size: 20px;
}
- &__card {
- width: 100%;
- padding-bottom: 35px;
- border: borders.$primaryBorder;
- box-shadow: none;
-
- &.metrics__card-metric {
- .metrics__card-body {
- min-height: 130px;
- aspect-ratio: 7;
- }
- }
-
- &.metrics__card-invocation {
- .metrics__card-body {
- aspect-ratio: 5;
- }
- }
-
- .metrics__card-row {
- display: flex;
- flex: 1 0 100%;
- }
-
- &-invocation {
- position: relative;
- z-index: 1;
- width: 100%;
-
- &__toggle-icon {
- position: absolute;
- right: 5px;
- bottom: 5px;
- align-self: flex-start;
- visibility: hidden;
- opacity: 0;
- transition: all 0.2s ease-in-out;
- }
-
- &:hover {
- .metrics__card-invocation__toggle-icon {
- visibility: visible;
- opacity: 1;
-
- .round-icon-cp__circle {
- &::before {
- opacity: 0.4;
- }
-
- &:hover::before {
- opacity: 1;
- }
- }
- }
- }
-
- &-header {
- display: flex;
- flex: 1;
- align-items: baseline;
- justify-content: end;
- height: 40px;
- color: colors.$primary;
- font-weight: 500;
- font-size: 14px;
-
- &__drift-icon-container {
- align-self: stretch;
- margin-right: 2px;
-
- svg {
- box-sizing: content-box;
- width: 17px;
- height: 17px;
- padding-top: 9px;
- }
- }
-
- &__drift_up {
- color: colors.$brightTurquoise;
- }
-
- &__drift_down {
- color: colors.$ceriseRed;
- }
-
- &__selected-date {
- margin-left: 4px;
- color: colors.$topaz;
- }
-
- &__total-title {
- margin: 0 6px 0 12px;
- font-weight: 700;
- }
-
- &__total-score {
- font-weight: 700;
- font-size: 24px;
- }
- }
-
- &-content {
- flex: 0 0 0;
- flex-wrap: wrap;
- align-content: center;
- align-items: baseline;
- justify-content: center;
- width: 0;
- font-weight: 700;
- font-size: 18px;
- visibility: hidden;
- opacity: 0;
- transition: flex 0.2s;
-
- &-visible {
- display: flex;
- flex: 0 1 auto;
- width: fit-content;
- margin-right: 15px;
- visibility: visible;
- opacity: 1;
- transition:
- flex 0.2s,
- visibility 0s,
- opacity 1s;
- }
-
- &-title {
- margin-right: 24px;
- color: colors.$primary;
- font-size: 18px;
- text-align: center;
- }
-
- &-container {
- display: flex;
- gap: 2px;
- align-items: baseline;
- font-weight: 700;
- font-size: 14px;
-
- &__drift-icon {
- align-self: stretch;
-
- svg {
- box-sizing: content-box;
- width: 17px;
- height: 17px;
- margin-top: -1px;
- }
- }
-
- &__drift_up {
- margin-right: 4px;
- color: colors.$brightTurquoise;
- }
-
- &__drift_down {
- margin-right: 4px;
- color: colors.$ceriseRed;
- }
- }
-
- &-data {
- display: flex;
- align-items: baseline;
- margin-left: 15px;
-
- &__total-title {
- margin-right: 7px;
- font-weight: 700;
- font-size: 14px;
- }
-
- &__total-score {
- font-weight: 700;
- font-size: 24px;
- }
- }
- }
-
- .metrics__card {
- padding-top: 12px;
- padding-bottom: 0;
- }
-
- &_collapsed .stats-card__row {
- height: 0;
- min-height: 0 !important;
- margin-bottom: 0 !important;
- opacity: 0;
- transition: all 0.2s ease-in-out;
- }
-
- &_expanded .stats-card__row {
- height: 40px;
- opacity: 1;
- transition: all 0.2s ease-in-out;
- }
- }
-
- &-drift-status {
- display: inline-block;
- width: 10px;
- height: 10px;
- margin-left: 8px;
- border-radius: 50%;
- }
-
- &-drift-status-possible_drift {
- background-color: colors.$grandis;
- }
-
- &-drift-status-drift_detected {
- background-color: colors.$ceriseRed;
- }
-
- &-drift-status-no_drift {
- background-color: colors.$brightTurquoise;
- }
-
- &-drift-no_status {
- background-color: colors.$doveGray;
- }
-
- &-header {
- position: relative;
- top: -5px;
- display: flex;
- flex-direction: row;
- gap: 8px;
- align-items: center;
- justify-content: space-between;
- padding-left: 5px;
- font-weight: 500;
- transition: all 0.2s linear;
-
- &-result-kind {
- display: flex;
- gap: 4px;
- align-self: center;
- justify-content: center;
- width: max-content;
- overflow: hidden;
- color: colors.$topaz;
- font-weight: 500;
- font-size: 14px;
- font-family: Roboto, sans-serif;
- font-style: normal;
- line-height: normal;
- text-overflow: ellipsis;
- }
-
- &-data {
- color: colors.$topaz;
- font-weight: 700;
- font-size: 18px;
- text-align: center;
- leading-trim: both;
- text-edge: cap;
- }
-
- &-label {
- font-size: 14px;
- }
- }
-
- &-body {
- position: relative;
- display: flex;
- flex: 1;
- align-self: stretch;
- box-sizing: border-box;
- width: 100%;
-
- &-collapsed {
- height: 80px;
- }
-
- .chart-item {
- flex: 1;
-
- canvas {
- width: 100%;
- height: 100%;
- }
- }
-
- &-bar {
- flex: 0 1 25%;
- min-width: 210px;
- margin-right: 15px;
-
- canvas {
- width: 100%;
- height: 100%;
- }
-
- canvas.hidden-canvas {
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- }
- }
-
- &-line {
- flex: 1 1 0;
- margin-top: 3px;
-
- canvas {
- width: 100% !important;
- height: 100% !important;
- }
-
- canvas.hidden-canvas {
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- }
- }
-
- &-invocation {
- flex: 1;
- border: 1px solid transparent;
-
- canvas {
- width: 100% !important;
- height: 100% !important;
- }
-
- canvas.hidden-canvas {
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- }
- }
- }
- }
-
&-wrapper {
display: flex;
flex-flow: column nowrap;
height: 100%;
}
- &__empty-card {
- display: flex;
- gap: 25px;
- align-items: center;
- justify-content: center;
- width: 100%;
- }
-
&__empty-select {
display: flex;
flex-direction: column;
@@ -406,9 +71,3 @@ $stickyHeaderHeight: 55px;
}
}
}
-
-.empty-invocation-card {
- z-index: 1;
- padding-bottom: 1em;
- box-shadow: 0 -10px 0 0 colors.$white;
-}
diff --git a/src/components/DetailsMetrics/MetricsCards/ApplicationMetricCard.jsx b/src/components/DetailsMetrics/MetricsCards/ApplicationMetricCard/ApplicationMetricCard.jsx
similarity index 91%
rename from src/components/DetailsMetrics/MetricsCards/ApplicationMetricCard.jsx
rename to src/components/DetailsMetrics/MetricsCards/ApplicationMetricCard/ApplicationMetricCard.jsx
index d14447ea37..75eb7aa0ee 100644
--- a/src/components/DetailsMetrics/MetricsCards/ApplicationMetricCard.jsx
+++ b/src/components/DetailsMetrics/MetricsCards/ApplicationMetricCard/ApplicationMetricCard.jsx
@@ -19,17 +19,17 @@ such restriction.
*/
import React, { useMemo, memo } from 'react'
-import MetricChart from '../../../common/MlChart/MetricChart/MetricChart'
-import StatsCard from '../../../common/StatsCard/StatsCard'
+import MetricChart from '../../../../common/MlChart/MetricChart/MetricChart'
+import StatsCard from '../../../../common/StatsCard/StatsCard'
import { TextTooltipTemplate, Tooltip } from 'igz-controls/components'
-import { CHART_TYPE_LINE, CHART_TYPE_BAR } from '../../../constants'
-import { METRIC_DATA } from '../../../types'
-import { calculateHistogram, METRIC_COMPUTED_AVG_POINTS } from '../detailsMetrics.util'
-import { getMetricChartConfig } from '../../../utils/getChartConfig'
+import { CHART_TYPE_LINE, CHART_TYPE_BAR } from '../../../../constants'
+import { METRIC_DATA } from '../../../../types'
+import { calculateHistogram, METRIC_COMPUTED_AVG_POINTS } from '../../detailsMetrics.util'
+import { getMetricChartConfig } from '../../../../utils/getChartConfig'
import { getScssVariableValue } from 'igz-controls/utils/common.util'
-import '../DetailsMetrics.scss'
+import '../MetricsCards.scss'
const ApplicationMetricCard = ({ metric }) => {
const javaColor = useMemo(() => getScssVariableValue('--javaColor'), [])
diff --git a/src/components/DetailsMetrics/MetricsCards/InvocationsMetricCard.jsx b/src/components/DetailsMetrics/MetricsCards/InvocationsMetricCard/InvocationsMetricCard.jsx
similarity index 94%
rename from src/components/DetailsMetrics/MetricsCards/InvocationsMetricCard.jsx
rename to src/components/DetailsMetrics/MetricsCards/InvocationsMetricCard/InvocationsMetricCard.jsx
index d33f5e8386..4cac6a9065 100644
--- a/src/components/DetailsMetrics/MetricsCards/InvocationsMetricCard.jsx
+++ b/src/components/DetailsMetrics/MetricsCards/InvocationsMetricCard/InvocationsMetricCard.jsx
@@ -21,22 +21,25 @@ import { forwardRef, useMemo } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import MetricChart from '../../../common/MlChart/MetricChart/MetricChart'
-import StatsCard from '../../../common/StatsCard/StatsCard'
+import MetricChart from '../../../../common/MlChart/MetricChart/MetricChart'
+import StatsCard from '../../../../common/StatsCard/StatsCard'
import { RoundedIcon, Tip } from 'igz-controls/components'
import {
calculatePercentageDrift,
METRIC_COMPUTED_TOTAL_POINTS,
METRIC_RAW_TOTAL_POINTS
-} from '../detailsMetrics.util'
-import { CHART_TYPE_LINE, CHART_TYPE_GRADIENT_LINE } from '../../../constants'
-import { getMetricChartConfig } from '../../../utils/getChartConfig'
+} from '../../detailsMetrics.util'
+import { CHART_TYPE_LINE, CHART_TYPE_GRADIENT_LINE } from '../../../../constants'
+import { getMetricChartConfig } from '../../../../utils/getChartConfig'
import { getScssVariableValue } from 'igz-controls/utils/common.util'
import EnlargeIcon from 'igz-controls/images/expand.svg?react'
import MinimizeIcon from 'igz-controls/images/collapse.svg?react'
+import '../MetricsCards.scss'
+import './InvocationsMetricCard.scss'
+
const InvocationsMetricCard = forwardRef(
(
{
@@ -167,6 +170,7 @@ const InvocationsMetricCard = forwardRef(
-
+
{message}
diff --git a/src/components/DetailsMetrics/MetricsCards/NoMetricData/NoMetricData.scss b/src/components/DetailsMetrics/MetricsCards/NoMetricData/NoMetricData.scss
new file mode 100644
index 0000000000..53d9dff89c
--- /dev/null
+++ b/src/components/DetailsMetrics/MetricsCards/NoMetricData/NoMetricData.scss
@@ -0,0 +1,19 @@
+@use 'igz-controls/scss/colors';
+
+.metrics__empty-card {
+ display: flex;
+ gap: 25px;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+
+ img {
+ width: 41px;
+ }
+}
+
+.empty-invocation-card {
+ z-index: 1;
+ padding-bottom: 1em;
+ box-shadow: 0 -10px 0 0 colors.$white;
+}
diff --git a/src/components/DetailsMetrics/detailsMetrics.util.jsx b/src/components/DetailsMetrics/detailsMetrics.util.jsx
index 6d45323988..aa3ed4ed5b 100644
--- a/src/components/DetailsMetrics/detailsMetrics.util.jsx
+++ b/src/components/DetailsMetrics/detailsMetrics.util.jsx
@@ -166,8 +166,9 @@ const generateResultMessage = (driftStatus, resultKind) => {
return `${capitalize(resultKindMessage)} ${text.toLowerCase().replace('drift', '').trim()}`
}
-export const generateMetricsItems = metrics => {
+export const generateMetricsItems = (metrics, applicationName) => {
return chain(metrics)
+ .filter(metric => !applicationName || metric.app === applicationName || metric.app === ML_RUN_INFRA) // todo remove filter when API will support app param
.sortBy(metric => metric.label)
.map(metric => {
return {
diff --git a/src/components/DetailsPods/DetailsPods.jsx b/src/components/DetailsPods/DetailsPods.jsx
index 003bcd448c..70c76c036c 100644
--- a/src/components/DetailsPods/DetailsPods.jsx
+++ b/src/components/DetailsPods/DetailsPods.jsx
@@ -23,16 +23,16 @@ import { useSelector } from 'react-redux'
import Prism from 'prismjs'
import classnames from 'classnames'
import { useParams } from 'react-router-dom'
-import Loader from '../../common/Loader/Loader'
import NoData from '../../common/NoData/NoData'
-import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
+import { Tooltip, TextTooltipTemplate, Loader } from 'igz-controls/components'
import { generatePods } from './detailsPods.util'
import './detailsPods.scss'
+import { PENDING_STATE } from '../../constants'
-const DetailsPods = ({ isDetailsPopUp = false, noDataMessage = ''}) => {
+const DetailsPods = ({ isDetailsPopUp = false, noDataMessage = '' }) => {
const [selectedPod, setSelectedPod] = useState(null)
const [table, setTable] = useState([])
const params = useParams()
@@ -43,7 +43,9 @@ const DetailsPods = ({ isDetailsPopUp = false, noDataMessage = ''}) => {
}, [detailsStore.detailsJobPods, detailsStore.pods, isDetailsPopUp])
useEffect(() => {
- setTable(generatePods(podsData))
+ queueMicrotask(() => {
+ setTable(generatePods(podsData))
+ })
return () => {
setSelectedPod(null)
@@ -52,7 +54,9 @@ const DetailsPods = ({ isDetailsPopUp = false, noDataMessage = ''}) => {
useEffect(() => {
if (!selectedPod) {
- setSelectedPod(table[0])
+ queueMicrotask(() => {
+ setSelectedPod(table[0])
+ })
}
}, [selectedPod, table])
@@ -72,7 +76,7 @@ const DetailsPods = ({ isDetailsPopUp = false, noDataMessage = ''}) => {
selectedPod?.value === row.value && 'row_active'
)
const podStatus =
- row.status?.phase?.toLowerCase() === 'pending'
+ row.status?.phase?.toLowerCase() === PENDING_STATE
? 'pending...'
: (row.status?.phase?.toLowerCase() ?? '')
diff --git a/src/components/DetailsRequestedFeatures/DetailsRequestedFeatures.jsx b/src/components/DetailsRequestedFeatures/DetailsRequestedFeatures.jsx
index 0c15405821..7c195c2563 100644
--- a/src/components/DetailsRequestedFeatures/DetailsRequestedFeatures.jsx
+++ b/src/components/DetailsRequestedFeatures/DetailsRequestedFeatures.jsx
@@ -24,8 +24,12 @@ import { useDispatch } from 'react-redux'
import DetailsRequestedFeaturesView from './DetailsRequestedFeaturesView'
+import {
+ setChanges,
+ setChangesCounter,
+ setChangesData
+} from 'igz-controls/reducers/commonDetailsReducer'
import { countChanges } from '../Details/details.util'
-import { setChanges, setChangesCounter, setChangesData } from '../../reducers/detailsReducer'
const DetailsRequestedFeatures = ({ changes, formState, isDetailsPopUp = false, selectedItem }) => {
const [confirmDialogData, setConfirmDialogData] = useState({
diff --git a/src/components/DetailsRequestedFeatures/detailsRequestedFeatures.scss b/src/components/DetailsRequestedFeatures/detailsRequestedFeatures.scss
index fc59156a0b..bcd718a217 100644
--- a/src/components/DetailsRequestedFeatures/detailsRequestedFeatures.scss
+++ b/src/components/DetailsRequestedFeatures/detailsRequestedFeatures.scss
@@ -10,6 +10,7 @@
&-header {
position: sticky;
top: 0;
+ z-index: 3;
display: flex;
flex-direction: row;
align-items: center;
@@ -20,7 +21,6 @@
line-height: 24px;
background-color: colors.$white;
border-bottom: borders.$secondaryBorder;
- z-index: 3;
}
&-cell {
diff --git a/src/components/DetailsResults/DetailsResults.jsx b/src/components/DetailsResults/DetailsResults.jsx
index 35b2f94956..2f404e92c7 100644
--- a/src/components/DetailsResults/DetailsResults.jsx
+++ b/src/components/DetailsResults/DetailsResults.jsx
@@ -25,7 +25,7 @@ import classNames from 'classnames'
import NoData from '../../common/NoData/NoData'
import { Tip, Tooltip, TextTooltipTemplate } from 'igz-controls/components'
-import { roundFloats } from '../../utils/roundFloats'
+import { roundFloats } from 'igz-controls/utils/common.util'
import { generateResultsContent } from '../../utils/resultsTable'
import { useSortTable } from '../../hooks/useSortTable.hook'
import { ALLOW_SORT_BY, DEFAULT_SORT_BY, EXCLUDE_SORT_BY } from 'igz-controls/types'
diff --git a/src/components/DetailsResults/detailsResults.scss b/src/components/DetailsResults/detailsResults.scss
index 1b5d47ebf3..3f74e999a7 100644
--- a/src/components/DetailsResults/detailsResults.scss
+++ b/src/components/DetailsResults/detailsResults.scss
@@ -3,8 +3,8 @@
@use 'igz-controls/scss/mixins';
.table__item-results {
- display: flex;
position: relative;
+ display: flex;
.table {
i {
diff --git a/src/components/DetailsStatistics/DetailsStatistics.jsx b/src/components/DetailsStatistics/DetailsStatistics.jsx
index e764adc51d..aebfee8431 100644
--- a/src/components/DetailsStatistics/DetailsStatistics.jsx
+++ b/src/components/DetailsStatistics/DetailsStatistics.jsx
@@ -58,7 +58,7 @@ const DetailsStatistics = ({ selectedItem }) => {
}),
[detailsStatisticsHeaderRowHeight, detailsStatisticsRowHeight]
)
- const chartConfig = useMemo(getHistogramChartConfig, [])
+ const chartConfig = useMemo(() => getHistogramChartConfig, [])
const headers = useMemo(
() =>
Object.entries(statistics[0]).map(([label, value]) => ({
diff --git a/src/components/DetailsStatistics/DetailsStatisticsTableRow.jsx b/src/components/DetailsStatistics/DetailsStatisticsTableRow.jsx
index c7edce2eed..1d496a454d 100644
--- a/src/components/DetailsStatistics/DetailsStatisticsTableRow.jsx
+++ b/src/components/DetailsStatistics/DetailsStatisticsTableRow.jsx
@@ -17,7 +17,7 @@ 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 React, { memo, useMemo } from 'react'
+import React, { memo, useId, useMemo } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
@@ -30,6 +30,7 @@ import './detailsStatistics.scss'
const DetailsStatisticsTableRow = ({ statisticsItem, headers, chartConfig }) => {
const amethystColor = useMemo(() => getScssVariableValue('--amethystColor'), [])
+ const id = useId()
return (
@@ -79,7 +80,7 @@ const DetailsStatisticsTableRow = ({ statisticsItem, headers, chartConfig }) =>
}
return (
-
+
{statisticsValue.type.match(/icon/) && !statisticsValue.hidden && statisticsValue.value}
{statisticsValue.type === 'chart' && statisticsValue.value[1]?.length > 0 && (
-
Class Name
+
Class name
}
diff --git a/src/components/DetailsTransformations/DetailsTransformations.jsx b/src/components/DetailsTransformations/DetailsTransformations.jsx
index 3918c4febd..99feec393d 100644
--- a/src/components/DetailsTransformations/DetailsTransformations.jsx
+++ b/src/components/DetailsTransformations/DetailsTransformations.jsx
@@ -155,34 +155,40 @@ const DetailsTransformations = ({ selectedItem }) => {
}, [states, targets, selectedStep])
useEffect(() => {
- setStates(cloneDeep(selectedItem.graph?.steps))
- setTargets(cloneDeep(selectedItem.targets))
+ queueMicrotask(() => {
+ setStates(cloneDeep(selectedItem.graph?.steps))
+ setTargets(cloneDeep(selectedItem.targets))
+ })
}, [selectedItem.graph, selectedItem.targets])
useEffect(() => {
- let stepsList = reject(steps, ['id', selectedStep])
+ queueMicrotask(() => {
+ let stepsList = reject(steps, ['id', selectedStep])
- setErrorSteps(reject(stepsList, ['id', 'Source']))
- stepsList.unshift({
- id: 'Source',
- label: 'Source'
- })
+ setErrorSteps(reject(stepsList, ['id', 'Source']))
+ stepsList.unshift({
+ id: 'Source',
+ label: 'Source'
+ })
- setAfterSteps(stepsList)
+ setAfterSteps(stepsList)
+ })
}, [steps, selectedStep])
useEffect(() => {
- setNodes(nodes => {
- return map(nodes, node => {
- return {
- ...node,
- className:
- node.id === selectedStep
- ? node.className
- ? (node.className += ' selected')
- : 'selected'
- : node.className?.replace('selected', '')
- }
+ queueMicrotask(() => {
+ setNodes(nodes => {
+ return map(nodes, node => {
+ return {
+ ...node,
+ className:
+ node.id === selectedStep
+ ? node.className
+ ? (node.className += ' selected')
+ : 'selected'
+ : node.className?.replace('selected', '')
+ }
+ })
})
})
}, [selectedStep])
@@ -193,7 +199,9 @@ const DetailsTransformations = ({ selectedItem }) => {
useEffect(() => {
if (selectedItem.uid !== selectedItemUid) {
- setSelectedItemUid(selectedItem.uid)
+ queueMicrotask(() => {
+ setSelectedItemUid(selectedItem.uid)
+ })
}
}, [selectedItem, selectedItemUid])
@@ -203,23 +211,25 @@ const DetailsTransformations = ({ selectedItem }) => {
-
Configuration
-
-
-
-
+
+
Configuration
+
+
+
+
+
)
diff --git a/src/components/DetailsTransformations/detailsTransformations.scss b/src/components/DetailsTransformations/detailsTransformations.scss
index 3d93fd430d..03a7bd3b7b 100644
--- a/src/components/DetailsTransformations/detailsTransformations.scss
+++ b/src/components/DetailsTransformations/detailsTransformations.scss
@@ -4,6 +4,7 @@
.transformations-tab {
display: flex;
flex: 1 1;
+ height: 100%;
.graph-pane {
.config-item {
diff --git a/src/components/Documents/Documents.jsx b/src/components/Documents/Documents.jsx
index ee749e6d9b..524209128d 100644
--- a/src/components/Documents/Documents.jsx
+++ b/src/components/Documents/Documents.jsx
@@ -52,7 +52,7 @@ const Documents = ({ isAllVersions = false }) => {
isAllVersions={isAllVersions}
page={DOCUMENTS_PAGE}
removeArtifacts={removeDocuments}
- storeArtifactTypeLoading={artifactsStore.documents.modelLoading}
+ storeArtifactTypeLoading={artifactsStore.documents.documentLoading}
/>
)
}
diff --git a/src/components/Documents/documents.util.jsx b/src/components/Documents/documents.util.jsx
index 1fa571f1c9..4354cbc3bf 100644
--- a/src/components/Documents/documents.util.jsx
+++ b/src/components/Documents/documents.util.jsx
@@ -20,24 +20,23 @@ such restriction.
import React from 'react'
import { cloneDeep, isEmpty, omit } from 'lodash'
+import { ARTIFACT_MAX_DOWNLOAD_SIZE, DOCUMENT_TYPE, DOCUMENTS_PAGE } from '../../constants'
import {
- ARTIFACT_MAX_DOWNLOAD_SIZE,
- DOCUMENT_TYPE,
- DOCUMENTS_PAGE,
- FULL_VIEW_MODE
-} from '../../constants'
+ openDeleteConfirmPopUp,
+ openPopUp,
+ getErrorMsg,
+ copyToClipboard
+} from 'igz-controls/utils/common.util'
import { getIsTargetPathValid } from '../../utils/createArtifactsContent'
import { applyTagChanges, chooseOrFetchArtifact } from '../../utils/artifacts.util'
import { setDownloadItem, setShowDownloadsList } from '../../reducers/downloadReducer'
-import { copyToClipboard } from '../../utils/copyToClipboard'
import { generateUri } from '../../utils/resources'
import DeleteArtifactPopUp from '../../elements/DeleteArtifactPopUp/DeleteArtifactPopUp'
import { handleDeleteArtifact } from '../../utils/handleDeleteArtifact'
-import { openDeleteConfirmPopUp, openPopUp, getErrorMsg } from 'igz-controls/utils/common.util'
-import { FORBIDDEN_ERROR_STATUS_CODE } from 'igz-controls/constants'
+import { FORBIDDEN_ERROR_STATUS_CODE, FULL_VIEW_MODE } from 'igz-controls/constants'
import { convertChipsData } from '../../utils/convertChipsData'
import { updateArtifact } from '../../reducers/artifactsReducer'
-import { showErrorNotification } from '../../utils/notifications.util'
+import { showErrorNotification } from 'igz-controls/utils/notification.util'
import TagIcon from 'igz-controls/images/tag-icon.svg?react'
import YamlIcon from 'igz-controls/images/yaml.svg?react'
@@ -74,14 +73,14 @@ export const infoHeaders = [
{ label: 'Labels', id: 'labels' }
]
-export const generatePageData = viewMode => {
+export const generatePageData = (viewMode, isDetailsPopUp = false) => {
return {
page: DOCUMENTS_PAGE,
details: {
type: DOCUMENTS_PAGE,
menu: detailsMenu,
infoHeaders,
- hideBackBtn: viewMode === FULL_VIEW_MODE,
+ hideBackBtn: viewMode === FULL_VIEW_MODE && !isDetailsPopUp,
withToggleViewBtn: true
}
}
diff --git a/src/components/FeatureSetsPanel/FeatureSetsPanel.jsx b/src/components/FeatureSetsPanel/FeatureSetsPanel.jsx
index 63ad5ad080..dbbed3bcee 100644
--- a/src/components/FeatureSetsPanel/FeatureSetsPanel.jsx
+++ b/src/components/FeatureSetsPanel/FeatureSetsPanel.jsx
@@ -29,7 +29,7 @@ import arrayMutators from 'final-form-arrays'
import FeatureSetsPanelView from './FeatureSetsPanelView'
import { FEATURE_SETS_TAB, TAG_FILTER_LATEST } from '../../constants'
-import { setNotification } from '../../reducers/notificationReducer'
+import { setNotification } from 'igz-controls/reducers/notificationReducer'
import { checkValidation } from './featureSetPanel.util'
import { setFieldState } from 'igz-controls/utils/form.util'
import {
@@ -73,13 +73,13 @@ const FeatureSetsPanel = ({ closePanel, createFeatureSetSuccess, project }) => {
const [accessKeyRequired, setAccessKeyRequired] = useState(false)
const navigate = useNavigate()
const dispatch = useDispatch()
- const formRef = React.useRef(
- createForm({
+ const [form] = useState(() => {
+ return createForm({
initialValues: { labels: [] },
mutators: { ...arrayMutators, setFieldState },
onSubmit: () => {}
})
- )
+ })
const handleSave = () => {
let data = {
@@ -87,7 +87,7 @@ const FeatureSetsPanel = ({ closePanel, createFeatureSetSuccess, project }) => {
...featureStore.newFeatureSet,
metadata: {
...featureStore.newFeatureSet.metadata,
- labels: convertChipsData(formRef.current.getFieldState('labels')?.value),
+ labels: convertChipsData(form.getFieldState('labels')?.value),
tag: featureStore.newFeatureSet.metadata.tag || TAG_FILTER_LATEST
}
}
@@ -171,7 +171,7 @@ const FeatureSetsPanel = ({ closePanel, createFeatureSetSuccess, project }) => {
}
return createPortal(
-