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

ui/src/components/dataSourceList.tsx

@@ -1,18 +1,17 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Form, Select, Table } from "antd";
-import { DataSourceAttributes, DataSource } from "../models/model";
+import { DataSource } from "../models/model";
 import { fetchDataSources, fetchProjects } from "../api";
 
 const DataSourceList: React.FC = () => {
   const columns = [
     {
       title: <div style={ { userSelect: "none" } }>Name</div>,
-      dataIndex: 'attributes',
       key: 'name',
       align: 'center' as 'center',
       width: 120,
-      render: (row: DataSourceAttributes) => {
-        return row.name;
+      render: (row: DataSource) => {
+        return row.attributes.name;
       },
       onCell: () => {
         return {
@@ -23,13 +22,12 @@ const DataSourceList: React.FC = () => {
       }
     },
     {
-      title: <div style={ { userSelect: "none" } }>QualifiedName</div>,
-      dataIndex: 'attributes',
-      key: 'qualifiedName',
+      title: <div>Type</div>,
+      key: 'type',
       align: 'center' as 'center',
-      width: 120,
-      render: (row: DataSourceAttributes) => {
-        return row.qualifiedName;
+      width: 80,
+      render: (row: DataSource) => {
+        return row.attributes.type;
       },
       onCell: () => {
         return {
@@ -40,13 +38,44 @@ const DataSourceList: React.FC = () => {
       }
     },
     {
-      title: <div style={ { userSelect: "none" } }>Type</div>,
-      dataIndex: 'attributes',
-      key: 'attributes',
+      title: <div>Path</div>,
+      key: 'path',
       align: 'center' as 'center',
-      width: 80,
-      render: (row: DataSourceAttributes) => {
-        return row.type;
+      width: 190,
+      render: (row: DataSource) => {
+        return row.attributes.path;
+      },
+      onCell: () => {
+        return {
+          style: {
+            maxWidth: 120
+          }
+        }
+      }
+    },
+    {
+      title: <div>Pre Processing</div>,
+      key: 'preprocessing',
+      align: 'center' as 'center',
+      width: 190,
+      render: (row: DataSource) => {
+        return row.attributes.preprocessing;
+      },
+      onCell: () => {
+        return {
+          style: {
+            maxWidth: 120
+          }
+        }
+      }
+    },
+    {
+      title: <div>Event Timestamp Column</div>,
+      key: 'eventTimestampColumn',
+      align: 'center' as 'center',
+      width: 190,
+      render: (row: DataSource) => {
+        return row.attributes.eventTimestampColumn;
       },
       onCell: () => {
         return {
@@ -57,13 +86,12 @@ const DataSourceList: React.FC = () => {
       }
     },
     {
-      title: <div style={ { userSelect: "none" } }>Path</div>,
-      dataIndex: 'attributes',
-      key: 'attributes',
+      title: <div>Timestamp Format</div>,
+      key: 'timestampFormat',
       align: 'center' as 'center',
       width: 190,
-      render: (row: DataSourceAttributes) => {
-        return row.path;
+      render: (row: DataSource) => {
+        return row.attributes.timestampFormat;
       },
       onCell: () => {
         return {

ui/src/components/featureList.tsx

@@ -9,15 +9,14 @@ const FeatureList: React.FC = () => {
   const navigate = useNavigate();
   const columns = [
     {
-      title: <div style={ { userSelect: "none" } }>Name</div>,
-      dataIndex: 'displayText',
+      title: <div>Name</div>,
       key: 'name',
       width: 150,
       render: (name: string, row: Feature) => {
         return (
           <Button type="link" onClick={ () => {
             navigate(`/projects/${ project }/features/${ row.guid }`)
-          } }>{ name }</Button>
+          } }>{ row.displayText }</Button>
         )
       },
       onCell: () => {
@@ -29,11 +28,14 @@ const FeatureList: React.FC = () => {
       }
     },
     {
-      title: <div style={ { userSelect: "none" } }>Type</div>,
-      dataIndex: 'typeName',
+      title: <div>Type</div>,
       key: 'type',
-      align: 'center' as 'center',
-      width: 190,
+      width: 120,
+      render: (name: string, row: Feature) => {
+        return (
+          <div>{ row.typeName.replace('feathr_', '').replace('_v1', '')}</div>
+        )
+      },
       onCell: () => {
         return {
           style: {
@@ -43,9 +45,46 @@ const FeatureList: React.FC = () => {
       }
     },
     {
-      title: (<div style={ { userSelect: "none" } }>Action <Tooltip
-        title={ <Link style={ { color: "cyan" } } to="/help">Learn more</Link> }></Tooltip></div>),
-      dataIndex: 'action',
+      title: <div>Transformation</div>,
+      key: 'transformation',
+      width: 190,
+      render: (name: string, row: Feature) => {
+        return (
+          <div>{ row.attributes.transformation.transformExpr ?? row.attributes.transformation.defExpr }</div>
+        )
+      },
+      onCell: () => {
+        return {
+          style: {
+            maxWidth: 120,
+          }
+        }
+      }
+    },
+    {
+      title: <div>Aggregation</div>,
+      key: 'aggregation',
+      width: 150,
+      render: (name: string, row: Feature) => {
+        return (
+          <>
+            <div>{ row.attributes.transformation.aggFunc && `Type: ${ row.attributes.transformation.aggFunc }` }</div>
+            <div>{ row.attributes.transformation.aggFunc && `Window: ${ row.attributes.transformation.window }` }</div>
+            <div>{ row.attributes.transformation.aggFunc && `Key: ${ row.attributes.key[0].keyColumn }` }</div>
+          </>
+        )
+      },
+      onCell: () => {
+        return {
+          style: {
+            maxWidth: 120,
+          }
+        }
+      }
+    },
+    {
+      title: (
+        <div>Action <Tooltip title={ <Link style={ { color: "cyan" } } to="/help">Learn more</Link> }></Tooltip></div>),
       key: 'action',
       align: 'center' as 'center',
       width: 120,

ui/src/models/model.ts

@@ -61,19 +61,20 @@ export interface DataSource {
   attributes: DataSourceAttributes;
   displayText: string;
   guid: string;
-  labels: string[];
-  name: string;
-  qualifiedName: string;
+  lastModifiedTS: string;
   status: string;
   typeName: string;
   version: string;
 }
 
 export interface DataSourceAttributes {
+  eventTimestampColumn: string;
   name: string;
   path: string;
+  preprocessing: string;
   qualifiedName: string;
   tags: string[];
+  timestampFormat: string;
   type: string;
 }