feat: update ml system UI

datahub-graphql-core/src/main/resources/entity.graphql

@@ -9885,6 +9885,21 @@ type MLModelGroup implements EntityWithRelationships & Entity & BrowsableEntity
     privileges: EntityPrivileges
 }
 
+"""
+Represents lineage information for ML entities.
+"""
+type MLModelLineageInfo {
+   """
+   List of jobs or processes used to train the model.
+   """
+   trainingJobs: [String!]
+
+   """
+   List of jobs or processes that use this model.
+   """
+   downstreamJobs: [String!]
+}
+
 """
 Properties describing a group of related ML models
 """
@@ -9919,6 +9934,11 @@ type MLModelGroupProperties {
     """
     customProperties: [CustomPropertiesEntry!]
 
+    """
+    Information related to lineage to this model group
+    """
+    mlModelLineageInfo: MLModelLineageInfo
+
     """
     Deprecated creation timestamp
     @deprecated Use the 'created' field instead
@@ -10155,6 +10175,11 @@ type MLModelProperties {
     """
     customProperties: [CustomPropertiesEntry!]
 
+    """
+    Information related to lineage to this model
+    """
+    mlModelLineageInfo: MLModelLineageInfo
+
     """
     URL to view this model in external system
     """

datahub-web-react/src/app/entity/EntityPage.tsx

@@ -66,6 +66,7 @@ export const EntityPage = ({ entityType }: Props) => {
         entityType === EntityType.MlfeatureTable ||
         entityType === EntityType.MlmodelGroup ||
         entityType === EntityType.GlossaryTerm ||
+        entityType === EntityType.DataProcessInstance ||
         entityType === EntityType.GlossaryNode;
 
     return (

datahub-web-react/src/app/entity/dataProcessInstance/DataProcessInstanceEntity.tsx

@@ -23,17 +23,10 @@ import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import { capitalizeFirstLetterOnly } from '../../shared/textUtil';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
 import { getDataProduct } from '../shared/utils';
-// import SummaryTab from './profile/DataProcessInstaceSummary';
-
-// const getProcessPlatformName = (data?: DataProcessInstance): string => {
-//     return (
-//         data?.dataPlatformInstance?.platform?.properties?.displayName ||
-//         capitalizeFirstLetterOnly(data?.dataPlatformInstance?.platform?.name) ||
-//         ''
-//     );
-// };
+import SummaryTab from './profile/DataProcessInstanceSummary';
 
 const getParentEntities = (data: DataProcessInstance): GeneratedEntity[] => {
+
     const parentEntity = data?.relationships?.relationships?.find(
         (rel) => rel.type === 'InstanceOf' && rel.entity?.type === EntityType.DataJob,
     );
@@ -105,10 +98,10 @@ export class DataProcessInstanceEntity implements Entity<DataProcessInstance> {
                 //     name: 'Documentation',
                 //     component: DocumentationTab,
                 // },
-                // {
-                //     name: 'Summary',
-                //     component: SummaryTab,
-                // },
+                {
+                    name: 'Summary',
+                    component: SummaryTab,
+                },
                 {
                     name: 'Lineage',
                     component: LineageTab,
@@ -117,14 +110,6 @@ export class DataProcessInstanceEntity implements Entity<DataProcessInstance> {
                     name: 'Properties',
                     component: PropertiesTab,
                 },
-                // {
-                //     name: 'Incidents',
-                //     component: IncidentTab,
-                //     getDynamicName: (_, processInstance) => {
-                //         const activeIncidentCount = processInstance?.dataProcessInstance?.activeIncidents.total;
-                //         return `Incidents${(activeIncidentCount && ` (${activeIncidentCount})`) || ''}`;
-                //     },
-                // },
             ]}
             sidebarSections={this.getSidebarSections()}
         />
@@ -217,9 +202,9 @@ export class DataProcessInstanceEntity implements Entity<DataProcessInstance> {
                 parentContainers={data.parentContainers}
                 parentEntities={parentEntities}
                 container={data.container || undefined}
-                // duration={data?.state?.[0]?.durationMillis}
-                // status={data?.state?.[0]?.result?.resultType}
-                // startTime={data?.state?.[0]?.timestampMillis}
+                duration={data?.state[0]?.durationMillis}
+                status={data?.state[0]?.result?.resultType}
+                startTime={data?.state[0]?.timestampMillis}
                 //                health={data.health}
             />
         );

datahub-web-react/src/app/entity/dataProcessInstance/profile/DataProcessInstanceSummary.tsx

@@ -0,0 +1,107 @@
+import styled from 'styled-components';
+import { Space, Table, Typography } from 'antd';
+import { MlHyperParam, MlMetric, EntityType } from '../../../../types.generated';
+import { useBaseEntity } from '../../shared/EntityContext';
+import { InfoItem } from '../../shared/components/styled/InfoItem';
+import { GetDataProcessInstanceQuery, useGetDataProcessInstanceQuery } from '../../../../graphql/dataProcessInstance.generated';
+import { Pill } from '../../../../alchemy-components/components/Pills';
+import { formatDetailedDuration } from '@src/app/shared/time/timeUtils';
+import { capitalize } from 'lodash';
+
+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 MLModelSummary() {
+    const baseEntity = useBaseEntity<GetDataProcessInstanceQuery>();
+    const dpi = baseEntity?.dataProcessInstance;
+
+    print("dpi TRP", dpi?.mlTrainingRunProperties);
+
+    const formatDate = (timestamp?: number) => {
+        if (!timestamp) return '-';
+        const milliseconds = timestamp < 10000000000 ? timestamp * 1000 : timestamp;
+        return new Date(milliseconds).toISOString().slice(0, 19).replace('T', ' ');
+    };
+
+    const formatStatus = (state) => {
+        if (!state || state.length === 0) return "-";
+        const result = state[0]?.result?.resultType; 
+        const statusColor = result === "SUCCESS" ? "green" : "red";
+        return (
+            <Pill label={capitalize(result)} colorScheme={statusColor}></Pill>
+        );
+    };
+
+    const formatDuration = (state) => {
+        if (!state || state.length === 0) return "-";
+        return formatDetailedDuration(state[0]?.durationMillis);
+    };
+
+    return (
+        <TabContent>
+            <Space direction="vertical" style={{ width: '100%' }} size="large">
+                <Typography.Title level={3}>Details</Typography.Title>
+                <InfoItemContainer justifyContent="left">
+                    <InfoItem title="Created At">
+                        <InfoItemContent>{formatDate(dpi?.properties?.created?.time)}</InfoItemContent>
+                    </InfoItem>
+                    <InfoItem title="Created By">
+                        <InfoItemContent>{dpi?.properties?.created?.actor}</InfoItemContent>
+                    </InfoItem>
+                    <InfoItem title="Status">
+                        <InfoItemContent>{formatStatus(dpi?.state)}</InfoItemContent>
+                    </InfoItem>
+                    <InfoItem title="Duration">
+                        <InfoItemContent>{formatDuration(dpi?.state)}</InfoItemContent> 
+                    </InfoItem>
+                    <InfoItem title="Run ID">
+                        <InfoItemContent>{dpi?.mlTrainingRunProperties?.id}</InfoItemContent>
+                    </InfoItem>
+                </InfoItemContainer>
+                <InfoItemContainer justifyContent="left">
+                    <InfoItem title="Artifacts Location">
+                        <InfoItemContent>{dpi?.mlTrainingRunProperties?.outputUrls}</InfoItemContent>
+                    </InfoItem>
+                </InfoItemContainer>
+                <Typography.Title level={3}>Training Metrics</Typography.Title>
+                <Table
+                    pagination={false}
+                    columns={propertyTableColumns}
+                    dataSource={dpi?.mlTrainingRunProperties?.trainingMetrics as MlMetric[]}
+                />
+                <Typography.Title level={3}>Hyper Parameters</Typography.Title>
+                <Table
+                    pagination={false}
+                    columns={propertyTableColumns}
+                    dataSource={dpi?.mlTrainingRunProperties?.hyperParams as MlHyperParam[]}
+                />
+            </Space>
+        </TabContent>
+    );
+}

datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx

@@ -151,7 +151,7 @@ export class MLModelEntity implements Entity<MlModel> {
     };
 
     displayName = (data: MlModel) => {
-        return data.name || data.urn;
+        return data.properties?.displayName || data.name || data.urn;
     };
 
     getGenericEntityProperties = (mlModel: MlModel) => {

datahub-web-react/src/app/entity/mlModel/profile/MLModelSummary.tsx

@@ -1,18 +1,52 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Space, Table, Typography } from 'antd';
-
-import { MlHyperParam, MlMetric } from '../../../../types.generated';
+import { useEntityRegistry } from '../../../useEntityRegistry';
+import { MlHyperParam, MlMetric, EntityType } from '../../../../types.generated';
 import { useBaseEntity } from '../../shared/EntityContext';
 import { GetMlModelQuery } from '../../../../graphql/mlModel.generated';
+import { InfoItem } from '../../shared/components/styled/InfoItem';
+import { Link } from 'react-router-dom';
 
 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 VersionTagContainer = styled.span`
+    padding: 2px 8px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid #d9d9d9;
+    color: #595959;
+    background: #fafafa;
+    margin-right: 8px;
+    margin-bottom: 4px;
+`;
+
+const JobLink = styled(Link)`
+    color: #1890ff;
+    &:hover {
+        text-decoration: underline;
+    }
+`;
+
 export default function MLModelSummary() {
     const baseEntity = useBaseEntity<GetMlModelQuery>();
     const model = baseEntity?.mlModel;
+    const entityRegistry = useEntityRegistry();
 
     const propertyTableColumns = [
         {
@@ -26,9 +60,63 @@ export default function MLModelSummary() {
         },
     ];
 
+    const formatDate = (timestamp?: number) => {
+        if (!timestamp) return '-';
+        const milliseconds = timestamp < 10000000000 ? timestamp * 1000 : timestamp;
+        return new Date(milliseconds).toISOString().slice(0, 19).replace('T', ' ');
+    };
+
+    const renderTrainingJobs = () => {
+        const lineageTrainingJobs = model?.properties?.mlModelLineageInfo?.trainingJobs || [];
+
+        if (lineageTrainingJobs.length === 0) return '-';
+
+        return lineageTrainingJobs.map((jobUrn, index) => (
+            <div key={jobUrn}>
+                <JobLink to={entityRegistry.getEntityUrl(EntityType.DataProcessInstance, jobUrn)}>
+                    {jobUrn}
+                </JobLink>
+                {index < lineageTrainingJobs.length - 1 && ', '}
+            </div>
+        ));
+    };
+
     return (
         <TabContent>
             <Space direction="vertical" style={{ width: '100%' }} size="large">
+            <Typography.Title level={3}>Model Details</Typography.Title>
+                <InfoItemContainer justifyContent="left">
+                    {/* TODO: should use versionProperties? */}
+                    <InfoItem title="Version">
+                        <InfoItemContent>{model?.properties?.version}</InfoItemContent>
+                    </InfoItem>
+                    <InfoItem title="Registered At">
+                        <InfoItemContent>{formatDate(model?.properties?.created?.time)}</InfoItemContent>
+                    </InfoItem>
+                    <InfoItem title="Last Modified At">
+                        <InfoItemContent>{formatDate(model?.properties?.lastModified?.time)}</InfoItemContent>
+                    </InfoItem>
+                </InfoItemContainer>
+                <InfoItemContainer justifyContent="left">
+                    <InfoItem title="Created By">
+                        <InfoItemContent>{model?.properties?.created?.actor}</InfoItemContent>
+                    </InfoItem>
+                    <InfoItem title="Aliases">
+                        <InfoItemContent>
+                            {/* use versionProperties for aliases */}
+                            {/* {model?.versionProperties?.aliases?.map((alias, index) => (
+                                <VersionTagContainer key={`${alias.version}-${index}`}>
+                                    {alias.version}
+                                </VersionTagContainer>
+                            ))} */}
+                        </InfoItemContent>
+                    </InfoItem>
+                    <InfoItem title="Source Run">
+                        <InfoItemContent>
+                            {renderTrainingJobs()}
+                        </InfoItemContent>
+                    </InfoItem>
+                </InfoItemContainer>
                 <Typography.Title level={3}>Training Metrics</Typography.Title>
                 <Table
                     pagination={false}