FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

UI: Display more columns in DataSource and Feature list page (#440) · feathr-ai/feathr@97eb607 · GitHub

/ feathr Public

Commit 97eb607

Browse files
blrchen
authored
UI: Display more columns in DataSource and Feature list page (#440)
This PR updates Data Source and Feature list page to display more columns for improving discovery experience. In data source list page, Pre-Processing, Event Timestamp Column, Timestamp Format columns are added In feature list page, Transformation, Aggregation columns are added
1 parent 7a1f464 commit 97eb607

3 files changed

Lines changed: 102 additions & 34 deletions

File tree

‎ui/src/components/dataSourceList.tsx‎

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import React, { useCallback, useEffect, useState } from 'react';
22
import { Form, Select, Table } from "antd";
3-
import { DataSourceAttributes, DataSource } from "../models/model";
3+
import { DataSource } from "../models/model";
44
import { fetchDataSources, fetchProjects } from "../api";
55

66
const DataSourceList: React.FC = () => {
77
const columns = [
88
{
99
title: <div style={ { userSelect: "none" } }>Name</div>,
10-
dataIndex: 'attributes',
1110
key: 'name',
1211
align: 'center' as 'center',
1312
width: 120,
14-
render: (row: DataSourceAttributes) => {
15-
return row.name;
13+
render: (row: DataSource) => {
14+
return row.attributes.name;
1615
},
1716
onCell: () => {
1817
return {
@@ -23,13 +22,12 @@ const DataSourceList: React.FC = () => {
2322
}
2423
},
2524
{
26-
title: <div style={ { userSelect: "none" } }>QualifiedName</div>,
27-
dataIndex: 'attributes',
28-
key: 'qualifiedName',
25+
title: <div>Type</div>,
26+
key: 'type',
2927
align: 'center' as 'center',
30-
width: 120,
31-
render: (row: DataSourceAttributes) => {
32-
return row.qualifiedName;
28+
width: 80,
29+
render: (row: DataSource) => {
30+
return row.attributes.type;
3331
},
3432
onCell: () => {
3533
return {
@@ -40,13 +38,44 @@ const DataSourceList: React.FC = () => {
4038
}
4139
},
4240
{
43-
title: <div style={ { userSelect: "none" } }>Type</div>,
44-
dataIndex: 'attributes',
45-
key: 'attributes',
41+
title: <div>Path</div>,
42+
key: 'path',
4643
align: 'center' as 'center',
47-
width: 80,
48-
render: (row: DataSourceAttributes) => {
49-
return row.type;
44+
width: 190,
45+
render: (row: DataSource) => {
46+
return row.attributes.path;
47+
},
48+
onCell: () => {
49+
return {
50+
style: {
51+
maxWidth: 120
52+
}
53+
}
54+
}
55+
},
56+
{
57+
title: <div>Pre Processing</div>,
58+
key: 'preprocessing',
59+
align: 'center' as 'center',
60+
width: 190,
61+
render: (row: DataSource) => {
62+
return row.attributes.preprocessing;
63+
},
64+
onCell: () => {
65+
return {
66+
style: {
67+
maxWidth: 120
68+
}
69+
}
70+
}
71+
},
72+
{
73+
title: <div>Event Timestamp Column</div>,
74+
key: 'eventTimestampColumn',
75+
align: 'center' as 'center',
76+
width: 190,
77+
render: (row: DataSource) => {
78+
return row.attributes.eventTimestampColumn;
5079
},
5180
onCell: () => {
5281
return {
@@ -57,13 +86,12 @@ const DataSourceList: React.FC = () => {
5786
}
5887
},
5988
{
60-
title: <div style={ { userSelect: "none" } }>Path</div>,
61-
dataIndex: 'attributes',
62-
key: 'attributes',
89+
title: <div>Timestamp Format</div>,
90+
key: 'timestampFormat',
6391
align: 'center' as 'center',
6492
width: 190,
65-
render: (row: DataSourceAttributes) => {
66-
return row.path;
93+
render: (row: DataSource) => {
94+
return row.attributes.timestampFormat;
6795
},
6896
onCell: () => {
6997
return {

‎ui/src/components/featureList.tsx‎

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ const FeatureList: React.FC = () => {
99
const navigate = useNavigate();
1010
const columns = [
1111
{
12-
title: <div style={ { userSelect: "none" } }>Name</div>,
13-
dataIndex: 'displayText',
12+
title: <div>Name</div>,
1413
key: 'name',
1514
width: 150,
1615
render: (name: string, row: Feature) => {
1716
return (
1817
<Button type="link" onClick={ () => {
1918
navigate(`/projects/${ project }/features/${ row.guid }`)
20-
} }>{ name }</Button>
19+
} }>{ row.displayText }</Button>
2120
)
2221
},
2322
onCell: () => {
@@ -29,11 +28,14 @@ const FeatureList: React.FC = () => {
2928
}
3029
},
3130
{
32-
title: <div style={ { userSelect: "none" } }>Type</div>,
33-
dataIndex: 'typeName',
31+
title: <div>Type</div>,
3432
key: 'type',
35-
align: 'center' as 'center',
36-
width: 190,
33+
width: 120,
34+
render: (name: string, row: Feature) => {
35+
return (
36+
<div>{ row.typeName.replace('feathr_', '').replace('_v1', '')}</div>
37+
)
38+
},
3739
onCell: () => {
3840
return {
3941
style: {
@@ -43,9 +45,46 @@ const FeatureList: React.FC = () => {
4345
}
4446
},
4547
{
46-
title: (<div style={ { userSelect: "none" } }>Action <Tooltip
47-
title={ <Link style={ { color: "cyan" } } to="/help">Learn more</Link> }></Tooltip></div>),
48-
dataIndex: 'action',
48+
title: <div>Transformation</div>,
49+
key: 'transformation',
50+
width: 190,
51+
render: (name: string, row: Feature) => {
52+
return (
53+
<div>{ row.attributes.transformation.transformExpr ?? row.attributes.transformation.defExpr }</div>
54+
)
55+
},
56+
onCell: () => {
57+
return {
58+
style: {
59+
maxWidth: 120,
60+
}
61+
}
62+
}
63+
},
64+
{
65+
title: <div>Aggregation</div>,
66+
key: 'aggregation',
67+
width: 150,
68+
render: (name: string, row: Feature) => {
69+
return (
70+
<>
71+
<div>{ row.attributes.transformation.aggFunc && `Type: ${ row.attributes.transformation.aggFunc }` }</div>
72+
<div>{ row.attributes.transformation.aggFunc && `Window: ${ row.attributes.transformation.window }` }</div>
73+
<div>{ row.attributes.transformation.aggFunc && `Key: ${ row.attributes.key[0].keyColumn }` }</div>
74+
</>
75+
)
76+
},
77+
onCell: () => {
78+
return {
79+
style: {
80+
maxWidth: 120,
81+
}
82+
}
83+
}
84+
},
85+
{
86+
title: (
87+
<div>Action <Tooltip title={ <Link style={ { color: "cyan" } } to="/help">Learn more</Link> }></Tooltip></div>),
4988
key: 'action',
5089
align: 'center' as 'center',
5190
width: 120,

‎ui/src/models/model.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,19 +61,20 @@ export interface DataSource {
6161
attributes: DataSourceAttributes;
6262
displayText: string;
6363
guid: string;
64-
labels: string[];
65-
name: string;
66-
qualifiedName: string;
64+
lastModifiedTS: string;
6765
status: string;
6866
typeName: string;
6967
version: string;
7068
}
7169

7270
export interface DataSourceAttributes {
71+
eventTimestampColumn: string;
7372
name: string;
7473
path: string;
74+
preprocessing: string;
7575
qualifiedName: string;
7676
tags: string[];
77+
timestampFormat: string;
7778
type: string;
7879
}
7980

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL