Impl [Model Endpoints] UI changes for change in MM data-layout

src/api/modelEndpoints-api.js

@@ -20,8 +20,10 @@ such restriction.
 import { mainHttpClient } from '../httpClient'
 
 const modelEndpointsApi = {
-  getModelEndpoint: (project, uid) =>
-    mainHttpClient.get(`/projects/${project}/model-endpoints/${uid}?feature_analysis=true`),
+  getModelEndpoint: (project, name, uid) =>
+    mainHttpClient.get(
+      `/projects/${project}/model-endpoints/${name}?endpoint_id=${uid}&feature_analysis=true`
+    ),
   getModelEndpoints: (project, filters, config = {}, params = {}) => {
     const newConfig = {
       ...config,

src/components/Details/DetailsHeader/DetailsHeader.js

@@ -177,11 +177,9 @@ const DetailsHeader = ({
                 )
               : selectedItem?.updated
                 ? formatDatetime(selectedItem?.updated, 'N/A')
-                : selectedItem?.spec?.model.includes(':') // 'model-key:model-tag'
-                  ? selectedItem.spec.model.replace(/^.*:/, '') // remove key
-                  : selectedItem?.spec?.model
-                    ? selectedItem?.metadata?.uid
-                    : ''}
+                : selectedItem?.status?.last_request
+                  ? formatDatetime(selectedItem.status.last_request, 'N/A')
+                  : ''}
           </span>
           {stateValue && stateLabel && (
             <Tooltip className="state" template={<TextTooltipTemplate text={stateLabel} />}>

src/components/Details/details.util.js

@@ -41,7 +41,7 @@ import { openPopUp } from 'igz-controls/utils/common.util'
 
 export const generateArtifactsContent = (detailsType, selectedItem, projectName) => {
   if (detailsType === MODEL_ENDPOINTS_TAB) {
-    const monitoringFeatureSetUri = selectedItem?.status?.monitoring_feature_set_uri ?? ''
+    const monitoringFeatureSetUri = selectedItem?.spec?.monitoring_feature_set_uri ?? ''
     const featureSetParsedUri = parseUri(monitoringFeatureSetUri)
 
     return {
@@ -51,9 +51,6 @@ export const generateArtifactsContent = (detailsType, selectedItem, projectName)
       model_class: {
         value: selectedItem?.spec?.model_class ?? '-'
       },
-      stream_path: {
-        value: selectedItem?.spec?.stream_path ?? '-'
-      },
       model_artifact: {
         value: selectedItem?.spec?.model_uri?.replace(/^store:\/\/artifacts\//, ''),
         shouldPopUp: !isEmpty(selectedItem?.spec?.model_uri),
@@ -90,9 +87,6 @@ export const generateArtifactsContent = (detailsType, selectedItem, projectName)
       },
       error_count: {
         value: selectedItem?.status?.error_count ?? '-'
-      },
-      accuracy: {
-        value: selectedItem?.status?.accuracy ?? '-'
       }
     }
   } else {

src/components/DetailsFeaturesAnalysis/detailsFeaturesAnalysis.util.js

@@ -25,7 +25,7 @@ import { ReactComponent as LabelColumn } from 'igz-controls/images/ic_target-wit
 export const generateFeaturesAnalysis = (modelEndpoint = {}) => {
   const currentStats = modelEndpoint?.status?.current_stats ?? {}
   const driftMeasures = modelEndpoint?.status?.drift_measures ?? {}
-  const featureStats = modelEndpoint?.status?.feature_stats ?? {}
+  const featureStats = modelEndpoint?.spec?.feature_stats ?? {}
   const labelNames = modelEndpoint?.spec?.label_names ?? []
 
   const tableHeaders = [

src/components/DetailsInfo/detailsInfo.util.js

@@ -40,9 +40,6 @@ import { roundFloats } from '../../utils/roundFloats'
 import { generateFunctionPriorityLabel } from '../../utils/generateFunctionPriorityLabel'
 import { openPopUp } from 'igz-controls/utils/common.util'
 
-const DRIFT_DETECTED_THRESHOLD = 0.7
-const POSSIBLE_DRIFT_THRESHOLD = 0.5
-
 export const generateArtifactsInfoContent = (page, pageTab, selectedItem) => {
   if (pageTab === MODEL_ENDPOINTS_TAB) {
     const { name, tag } =
@@ -153,20 +150,6 @@ const generateModelEndpointDriftContent = modelEndpoint => {
               2
             )
           : '-'
-    },
-    {
-      id: 'drift_detected_threshold',
-      label: 'Drift Detected Threshold',
-      value:
-        roundFloats(modelEndpoint.spec?.monitor_configuration?.drift_detected_threshold, 2) ??
-        DRIFT_DETECTED_THRESHOLD
-    },
-    {
-      id: 'possible_drift_threshold',
-      label: 'Possible Drift Threshold',
-      value:
-        roundFloats(modelEndpoint.spec?.monitor_configuration?.possible_drift_threshold, 2) ??
-        POSSIBLE_DRIFT_THRESHOLD
     }
   ]
 }

src/components/ModelsPage/ModelEndpoints/ModelEndpoints.js

@@ -38,11 +38,7 @@ import {
 } from '../../../constants'
 import { createModelEndpointsRowData } from '../../../utils/createArtifactsContent'
 import { fetchModelEndpoints, removeModelEndpoints } from '../../../reducers/artifactsReducer'
-import {
-  chooseOrFetchModelEndpoint,
-  filtersConfig,
-  generatePageData
-} from './modelEndpoints.util'
+import { chooseOrFetchModelEndpoint, filtersConfig, generatePageData } from './modelEndpoints.util'
 import { getNoDataMessage } from '../../../utils/getNoDataMessage'
 import { isDetailsTabExists } from '../../../utils/link-helper.util'
 import { setFilters } from '../../../reducers/filtersReducer'
@@ -131,7 +127,7 @@ const ModelEndpoints = () => {
             }
           },
           params: {
-            start: 'now-10m'
+            latest_only: 'True'
           }
         })
       )
@@ -174,7 +170,7 @@ const ModelEndpoints = () => {
     [dispatch, fetchData]
   )
 
-  useInitialTableFetch({fetchData: fetchInitialData, filters })
+  useInitialTableFetch({ fetchData: fetchInitialData, filters })
 
   useEffect(() => {
     return () => {

src/components/ModelsPage/ModelEndpoints/modelEndpoints.util.js

@@ -38,9 +38,7 @@ const infoHeaders = [
   { label: 'Function Tag', id: 'function_tag' },
   { label: 'Feature set', id: 'monitoring_feature_set_uri' },
   { label: 'Last prediction', id: 'last_prediction' },
-  { label: 'Error count', id: 'error_count' },
-  { label: 'Accuracy', id: 'accuracy' },
-  { label: 'Stream path', id: 'stream_path' }
+  { label: 'Error count', id: 'error_count' }
 ]
 
 const detailsMenu = [
@@ -99,6 +97,7 @@ export const chooseOrFetchModelEndpoint = (dispatch, selectedModelEndpoint, mode
   return dispatch(
     fetchModelEndpoint({
       project: modelEndpointMin.metadata.project,
+      name: modelEndpointMin.name,
       uid: modelEndpointMin.metadata.uid
     })
   )

src/elements/TableLinkCell/TableLinkCell.js

@@ -117,6 +117,9 @@ const TableLinkCell = ({
               )}
             </div>
           )}
+          {data.additionalInfo && Object.values(selectedItem).length !== 0 && (
+            <span className="link-subtext">{data.additionalInfo}</span>
+          )}
         </Link>
       )}
       {showExpandButton && (

src/reducers/artifactsReducer.js

@@ -245,11 +245,14 @@ export const fetchArtifactsFunction = createAsyncThunk(
     })
   }
 )
-export const fetchModelEndpoint = createAsyncThunk('fetchModelEndpoint', ({ project, uid }) => {
-  return modelEndpointsApi.getModelEndpoint(project, uid).then(({ data: endpoint }) => {
-    return parseModelEndpoints([endpoint])?.[0]
-  })
-})
+export const fetchModelEndpoint = createAsyncThunk(
+  'fetchModelEndpoint',
+  ({ project, name, uid }) => {
+    return modelEndpointsApi.getModelEndpoint(project, name, uid).then(({ data: endpoint }) => {
+      return parseModelEndpoints([endpoint])?.[0]
+    })
+  }
+)
 export const fetchModelEndpoints = createAsyncThunk(
   'fetchModelEndpoints',
   ({ project, filters, config, params }, thunkAPI) => {

src/utils/createArtifactsContent.js

@@ -421,13 +421,10 @@ const getDriftStatusData = driftStatus => {
 }
 
 export const createModelEndpointsRowData = (artifact, project) => {
-  const { name, tag = '-' } =
-    (artifact.spec?.model ?? '').match(/^(?<name>.*?)(:(?<tag>.*))?$/)?.groups ?? {}
   const functionUri = artifact.spec?.function_uri
     ? `store://functions/${artifact.spec.function_uri}`
     : ''
   const { key: functionName } = parseUri(functionUri)
-  const isEndpointTypeRouter = artifact?.status?.endpoint_type === 2
 
   return {
     data: {
@@ -438,21 +435,24 @@ export const createModelEndpointsRowData = (artifact, project) => {
         id: `key.${artifact.ui.identifierUnique}`,
         headerId: 'name',
         headerLabel: 'Name',
-        value: name,
+        value: artifact.name,
         className: 'table-cell-name',
         getLink: tab =>
-          validateArguments(artifact.metadata?.uid, name)
+          validateArguments(artifact.metadata?.uid, artifact.name)
             ? generateLinkToDetailsPanel(
                 project,
                 MODELS_TAB,
                 MODEL_ENDPOINTS_TAB,
-                name,
+                artifact.name,
                 artifact.metadata?.uid,
                 tab
               )
             : '',
         showStatus: true,
-        tooltip: artifact.spec?.model_uri ? `${name} - ${artifact.spec?.model_uri}` : name
+        tooltip: artifact.spec?.model_uri
+          ? `${artifact.name} - ${artifact.spec?.model_uri}`
+          : artifact.name,
+        additionalInfo: `${artifact.spec.function_name}:${artifact.spec.function_tag}`
       },
       {
         id: `functionName.${artifact.ui.identifierUnique}`,
@@ -475,10 +475,10 @@ export const createModelEndpointsRowData = (artifact, project) => {
         type: 'hidden'
       },
       {
-        id: `version.${artifact.ui.identifierUnique}`,
-        headerId: 'version',
-        headerLabel: 'Version',
-        value: isEndpointTypeRouter ? '' : artifact?.status?.children?.length > 0 ? 'Router' : tag,
+        id: `functionTag.${artifact.ui.identifierUnique}`,
+        headerId: 'functionTag',
+        headerLabel: 'Function Tag',
+        value: artifact.spec?.function_tag,
         className: 'table-cell-small'
       },
       {

src/utils/parseModelEndpoints.js

@@ -23,7 +23,7 @@ import { getArtifactIdentifier } from './getUniqueIdentifier'
 export const parseModelEndpoints = endpoints =>
   endpoints.map(endpoint => ({
     ...endpoint,
-    name: endpoint.spec.model.split(':')[0],
+    name: endpoint.metadata.name,
     state: getState(endpoint.status.state),
     ui: {
       originalContent: endpoint,