diff --git a/datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx b/datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx index 5e75b4680e427..b5ebbd39621cb 100644 --- a/datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx +++ b/datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx @@ -143,7 +143,8 @@ export class MLModelEntity implements Entity { getLineageVizConfig = (entity: MlModel) => { return { urn: entity.urn, - name: entity.name, + // eslint-disable-next-line @typescript-eslint/dot-notation + name: entity.properties?.['propertiesName'] || entity.name, type: EntityType.Mlmodel, icon: entity.platform?.properties?.logoUrl || undefined, platform: entity.platform, diff --git a/datahub-web-react/src/app/entity/mlModel/profile/MLModelGroupsTab.tsx b/datahub-web-react/src/app/entity/mlModel/profile/MLModelGroupsTab.tsx index f8e90f3b32a8c..bea8e144e56f9 100644 --- a/datahub-web-react/src/app/entity/mlModel/profile/MLModelGroupsTab.tsx +++ b/datahub-web-react/src/app/entity/mlModel/profile/MLModelGroupsTab.tsx @@ -24,7 +24,11 @@ export default function MLModelGroupsTab() { title: 'Group', dataIndex: 'name', render: (name, record) => { - return {name}; + return ( + + {record.properties?.name || name} + + ); }, }, { diff --git a/datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx b/datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx index 1217200ea46f8..cba24c0e38345 100644 --- a/datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx +++ b/datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx @@ -131,7 +131,8 @@ export class MLModelGroupEntity implements Entity { getLineageVizConfig = (entity: MlModelGroup) => { return { urn: entity.urn, - name: entity.name, + // eslint-disable-next-line @typescript-eslint/dot-notation + name: entity.properties?.['propertiesName'] || entity.name, type: EntityType.MlmodelGroup, icon: entity.platform?.properties?.logoUrl || undefined, platform: entity.platform, diff --git a/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx b/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx index 09301b101b259..4cd58f7847549 100644 --- a/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx @@ -1,4 +1,5 @@ import { GenericEntityProperties } from '@app/entity/shared/types'; +import { Entity as GraphQLEntity } from '@types'; import { globalEntityRegistryV2 } from '@app/EntityRegistryProvider'; import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from '@app/entityV2/Entity'; import { EntityProfile } from '@app/entityV2/shared/containers/profile/EntityProfile'; @@ -11,24 +12,21 @@ import { getDataProduct } from '@app/entityV2/shared/utils'; import { GetDataProcessInstanceQuery, useGetDataProcessInstanceQuery } from '@graphql/dataProcessInstance.generated'; import { ArrowsClockwise } from 'phosphor-react'; import React from 'react'; -import { DataProcessInstance, Entity as GeneratedEntity, EntityType, SearchResult } from '../../../types.generated'; +import { DataProcessInstance, EntityType, SearchResult } from '../../../types.generated'; import Preview from './preview/Preview'; +import DataProcessInstanceSummary from './profile/DataProcessInstanceSummary'; -const getParentEntities = (data: DataProcessInstance): GeneratedEntity[] => { +const getParentEntities = (data: DataProcessInstance): GraphQLEntity[] => { const parentEntity = data?.relationships?.relationships?.find( (rel) => rel.type === 'InstanceOf' && rel.entity?.type === EntityType.DataJob, ); - if (!parentEntity?.entity) return []; + if (!parentEntity || !parentEntity.entity) { + return []; + } - // Convert to GeneratedEntity - return [ - { - type: parentEntity.entity.type, - urn: (parentEntity.entity as any).urn, // Make sure urn exists - relationships: (parentEntity.entity as any).relationships, - }, - ]; + // First cast to unknown, then to Entity with proper type + return [parentEntity.entity]; }; /** @@ -85,6 +83,10 @@ export class DataProcessInstanceEntity implements Entity { new Set([EntityMenuItems.UPDATE_DEPRECATION, EntityMenuItems.RAISE_INCIDENT, EntityMenuItems.SHARE]) } tabs={[ + { + name: 'Summary', + component: DataProcessInstanceSummary, + }, { name: 'Lineage', component: LineageTab, diff --git a/datahub-web-react/src/app/entityV2/dataProcessInstance/profile/DataProcessInstanceSummary.tsx b/datahub-web-react/src/app/entityV2/dataProcessInstance/profile/DataProcessInstanceSummary.tsx new file mode 100644 index 0000000000000..98e2909175e31 --- /dev/null +++ b/datahub-web-react/src/app/entityV2/dataProcessInstance/profile/DataProcessInstanceSummary.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Space, Table, Typography } from 'antd'; +import { formatDetailedDuration } from '@src/app/shared/time/timeUtils'; +import { capitalize } from 'lodash'; +import moment from 'moment'; +import { MlHyperParam, MlMetric, DataProcessInstanceRunResultType } from '../../../../types.generated'; +import { useBaseEntity } from '../../../entity/shared/EntityContext'; +import { InfoItem } from '../../shared/components/styled/InfoItem'; +import { GetDataProcessInstanceQuery } from '../../../../graphql/dataProcessInstance.generated'; +import { Pill } from '../../../../alchemy-components/components/Pills'; + +const TabContent = styled.div` + padding: 16px; +`; + +const InfoItemContainer = styled.div<{ justifyContent }>` + display: flex; + position: relative; + justify-content: ${(props) => props.justifyContent}; + padding: 0px 2px; +`; + +const InfoItemContent = styled.div` + padding-top: 8px; + width: 100px; +`; + +const propertyTableColumns = [ + { + title: 'Name', + dataIndex: 'name', + width: 450, + }, + { + title: 'Value', + dataIndex: 'value', + }, +]; + +export default function DataProcessInstanceSummary() { + const baseEntity = useBaseEntity(); + const dpi = baseEntity?.dataProcessInstance; + + const formatStatus = (state) => { + if (!state || state.length === 0) return '-'; + const result = state[0]?.result?.resultType; + const statusColor = result === DataProcessInstanceRunResultType.Success ? 'green' : 'red'; + return ; + }; + + const formatDuration = (state) => { + if (!state || state.length === 0) return '-'; + return formatDetailedDuration(state[0]?.durationMillis); + }; + + return ( + + + Details + + + + {dpi?.properties?.created?.time + ? moment(dpi.properties.created.time).format('YYYY-MM-DD HH:mm:ss') + : '-'} + + + + {formatStatus(dpi?.state)} + + + {formatDuration(dpi?.state)} + + + {dpi?.mlTrainingRunProperties?.id} + + + {dpi?.properties?.created?.actor} + + + + + {dpi?.mlTrainingRunProperties?.outputUrls} + + + Training Metrics + + Hyper Parameters +
+ + + ); +} diff --git a/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx b/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx index e0839929b9f55..7527d0133d62e 100644 --- a/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx +++ b/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx @@ -192,7 +192,8 @@ export class MLModelEntity implements Entity { getLineageVizConfig = (entity: MlModel) => { return { urn: entity.urn, - name: entity.name, + // eslint-disable-next-line @typescript-eslint/dot-notation + name: entity.properties?.['propertiesName'] || entity.name, type: EntityType.Mlmodel, icon: entity.platform?.properties?.logoUrl || undefined, platform: entity.platform, @@ -201,7 +202,7 @@ export class MLModelEntity implements Entity { }; displayName = (data: MlModel) => { - return data.name || data.urn; + return data.properties?.name || data.name || data.urn; }; getGenericEntityProperties = (mlModel: MlModel) => { diff --git a/datahub-web-react/src/app/entityV2/mlModel/preview/Preview.tsx b/datahub-web-react/src/app/entityV2/mlModel/preview/Preview.tsx index 89529a9087cc8..24e635f7661ca 100644 --- a/datahub-web-react/src/app/entityV2/mlModel/preview/Preview.tsx +++ b/datahub-web-react/src/app/entityV2/mlModel/preview/Preview.tsx @@ -31,7 +31,8 @@ export const Preview = ({ return ( { - return {name}; + return ( + + {record.properties?.name || name} + + ); }, }, { diff --git a/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx b/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx index 0a2f99e02dd76..2371920c45808 100644 --- a/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx +++ b/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx @@ -175,7 +175,8 @@ export class MLModelGroupEntity implements Entity { getLineageVizConfig = (entity: MlModelGroup) => { return { urn: entity.urn, - name: entity.name, + // eslint-disable-next-line @typescript-eslint/dot-notation + name: entity.properties?.['propertiesName'] || entity.name, type: EntityType.MlmodelGroup, icon: entity.platform?.properties?.logoUrl || undefined, platform: entity.platform, @@ -184,7 +185,7 @@ export class MLModelGroupEntity implements Entity { }; displayName = (data: MlModelGroup) => { - return data.name || data.urn; + return data.properties?.name || data.name || data.urn; }; getGenericEntityProperties = (mlModelGroup: MlModelGroup) => { diff --git a/datahub-web-react/src/app/entityV2/mlModelGroup/preview/Preview.tsx b/datahub-web-react/src/app/entityV2/mlModelGroup/preview/Preview.tsx index 31abd228e4466..0451cea9cebd1 100644 --- a/datahub-web-react/src/app/entityV2/mlModelGroup/preview/Preview.tsx +++ b/datahub-web-react/src/app/entityV2/mlModelGroup/preview/Preview.tsx @@ -30,7 +30,8 @@ export const Preview = ({ return (