diff --git a/ui/src/components/dataSourceList.tsx b/ui/src/components/dataSourceList.tsx index f395fee73..a191e266d 100644 --- a/ui/src/components/dataSourceList.tsx +++ b/ui/src/components/dataSourceList.tsx @@ -1,5 +1,4 @@ import React, { useCallback, useEffect, useState } from 'react'; -import { LoadingOutlined } from "@ant-design/icons"; import { Form, Select, Table } from "antd"; import { DataSourceAttributes, DataSource } from "../models/model"; import { fetchDataSources, fetchProjects } from "../api"; diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx index a0c7f78ef..d71cd9fef 100644 --- a/ui/src/components/featureList.tsx +++ b/ui/src/components/featureList.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react'; import { Link, useNavigate } from "react-router-dom"; -import { DownOutlined, LoadingOutlined } from '@ant-design/icons'; +import { DownOutlined} from '@ant-design/icons'; import { Button, Dropdown, Input, Menu, Select, Tooltip, Form, Table } from 'antd'; import { Feature } from "../models/model"; import { fetchProjects, fetchFeatures } from "../api"; diff --git a/ui/src/components/graph/graphNodeDetails.tsx b/ui/src/components/graph/graphNodeDetails.tsx index 922c4b85f..b2da43195 100644 --- a/ui/src/components/graph/graphNodeDetails.tsx +++ b/ui/src/components/graph/graphNodeDetails.tsx @@ -3,7 +3,9 @@ import { useParams, useSearchParams } from "react-router-dom"; import { fetchFeature } from '../../api'; import { Feature } from "../../models/model"; import { LoadingOutlined } from "@ant-design/icons"; -import { Card, Spin } from "antd"; +import { Card, Spin, Typography } from "antd"; + +const { Title } = Typography; type Params = { project: string; @@ -44,38 +46,41 @@ const GraphNodeDetails: React.FC = () => { : (
{ !feature &&

Click on node to show metadata and metric details

} { feature?.attributes.transformation && - + + Codestin Search App { feature.attributes.transformation.transform_expr && -

transform_expr: { feature.attributes.transformation.transform_expr }

} +

Expression: { feature.attributes.transformation.transform_expr }

} { feature.attributes.transformation.filter && -

filter: { feature.attributes.transformation.filter }

} +

Filter { feature.attributes.transformation.filter }

} { feature.attributes.transformation.agg_func && -

agg_func: { feature.attributes.transformation.agg_func }

} +

Aggregation: { feature.attributes.transformation.agg_func }

} { feature.attributes.transformation.limit && -

limit: { feature.attributes.transformation.limit }

} +

Limit: { feature.attributes.transformation.limit }

} { feature.attributes.transformation.group_by && -

group_by: { feature.attributes.transformation.group_by }

} +

Group By: { feature.attributes.transformation.group_by }

} { feature.attributes.transformation.window && -

window: { feature.attributes.transformation.window }

} +

Window: { feature.attributes.transformation.window }

} { feature.attributes.transformation.def_expr && -

def_expr: { feature.attributes.transformation.def_expr }

} +

Expression: { feature.attributes.transformation.def_expr }

} } { feature?.attributes.key && feature.attributes.key.length > 0 && - -

full_name: { feature.attributes.key[0].full_name }

-

key_column: { feature.attributes.key[0].key_column }

-

description: { feature.attributes.key[0].description }

-

key_column_alias: { feature.attributes.key[0].key_column_alias }

-

key_column_type: { feature.attributes.key[0].key_column_type }

+ + Codestin Search App +

Full name: { feature.attributes.key[0].full_name }

+

Description: { feature.attributes.key[0].description }

+

Key column: { feature.attributes.key[0].key_column }

+

Key column alias: { feature.attributes.key[0].key_column_alias }

+

Key column type: { feature.attributes.key[0].key_column_type }

 } { feature?.attributes.type && - -

dimension_type: { feature.attributes.type.dimension_type }

-

tensor_category: { feature.attributes.type.tensor_category }

-

type: { feature.attributes.type.type }

-

val_type: { feature.attributes.type.val_type }

+ + Codestin Search App +

Dimension Type: { feature.attributes.type.dimensionType }

+

Tensor Category: { feature.attributes.type.tensorCategory }

+

Type: { feature.attributes.type.type }

+

Value Type: { feature.attributes.type.valType }

 }
) diff --git a/ui/src/components/header/header.tsx b/ui/src/components/header/header.tsx index 9ff1e7b03..1d6063053 100644 --- a/ui/src/components/header/header.tsx +++ b/ui/src/components/header/header.tsx @@ -4,8 +4,7 @@ import { useAccount, useMsal } from "@azure/msal-react"; import './header.css'; import HeaderWidget from "./headerWidget"; -type Props = {}; -const Header: React.FC = () => { +const Header: React.FC = () => { const { accounts } = useMsal(); const account = useAccount(accounts[0] || {}); return ( diff --git a/ui/src/components/sidemenu/siteMenu.tsx b/ui/src/components/sidemenu/siteMenu.tsx index d99638756..3f829ebf7 100644 --- a/ui/src/components/sidemenu/siteMenu.tsx +++ b/ui/src/components/sidemenu/siteMenu.tsx @@ -1,30 +1,30 @@ -import { Layout, Menu } from 'antd'; -import { CopyOutlined, DatabaseOutlined, EyeOutlined, RocketOutlined} from '@ant-design/icons'; +import { Layout, Menu, Typography } from 'antd'; +import { CopyOutlined, DatabaseOutlined, EyeOutlined, RocketOutlined } from '@ant-design/icons'; import { Link } from 'react-router-dom'; +const { Title} = Typography; const { Sider } = Layout; + const SideMenu = () => { return ( - -
- Feathr Web UI -
+ + Codestin Search App - }> + }> Data Sources - }> + }> Features - }> + }> Jobs - }> + }> Monitoring diff --git a/ui/src/models/model.ts b/ui/src/models/model.ts index 71937ad73..f2c984df6 100644 --- a/ui/src/models/model.ts +++ b/ui/src/models/model.ts @@ -19,10 +19,10 @@ export interface FeatureAttributes { } export interface FeatureType { + dimensionType: string[], + tensorCategory: string, type: string, - tensor_category: string, - dimension_type: string[], - val_type: string + valType: string } export interface FeatureTransformation { transform_expr: string, diff --git a/ui/src/pages/dataSource/dataSources.tsx b/ui/src/pages/dataSource/dataSources.tsx index 9203fefc2..ba89462c8 100644 --- a/ui/src/pages/dataSource/dataSources.tsx +++ b/ui/src/pages/dataSource/dataSources.tsx @@ -1,18 +1,17 @@ import React from 'react'; -import { Card } from 'antd'; +import { Card, Typography } from 'antd'; import DataSourceList from "../../components/dataSourceList"; -type Props = {}; +const { Title } = Typography; -const DataSources: React.FC = () => { +const DataSources: React.FC = () => { return ( - <> -
- - - -
- +
+ + Codestin Search App + + +
); }; diff --git a/ui/src/pages/feature/featureDetails.tsx b/ui/src/pages/feature/featureDetails.tsx index 919ede463..b6322a821 100644 --- a/ui/src/pages/feature/featureDetails.tsx +++ b/ui/src/pages/feature/featureDetails.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Alert, Button, Card, Col, Row, Space, Spin } from 'antd'; +import { Alert, Button, Card, Col, Row, Space, Spin, Typography } from 'antd'; import { LoadingOutlined } from '@ant-design/icons'; import { useNavigate, useParams } from "react-router-dom"; import { QueryStatus, useQuery } from "react-query"; @@ -7,11 +7,121 @@ import { AxiosError } from 'axios'; import { fetchFeature } from '../../api'; import { Feature } from "../../models/model"; +const { Title } = Typography; + +function FeatureKey(props: { feature: Feature }) { + return <> + { props.feature.attributes.key && props.feature.attributes.key.length > 0 && + + + Codestin Search App +

Full name: { props.feature.attributes.key[0].full_name }

+

Key column: { props.feature.attributes.key[0].key_column }

+

Description: { props.feature.attributes.key[0].description }

+

Key column alias: { props.feature.attributes.key[0].key_column_alias }

+

key column type: { props.feature.attributes.key[0].key_column_type }

+ + + } + ; +} + +function FeatureType(props: { feature: Feature }) { + return <> + { props.feature.attributes.type && + + + Codestin Search App +

Dimension Type: { props.feature.attributes.type.dimensionType }

+

Tensor Category: { props.feature.attributes.type.tensorCategory }

+

Type: { props.feature.attributes.type.type }

+

Value Type: { props.feature.attributes.type.valType }

+ + + } + ; +} + +function FeatureTransformation(props: { feature: Feature }) { + return <> + { props.feature.attributes.transformation && + + + Codestin Search App + { props.feature.attributes.transformation.transform_expr && +

Expression: { props.feature.attributes.transformation.transform_expr }

} + { props.feature.attributes.transformation.filter && +

Filter: { props.feature.attributes.transformation.filter }

} + { props.feature.attributes.transformation.agg_func && +

Aggregation: { props.feature.attributes.transformation.agg_func }

} + { props.feature.attributes.transformation.limit && +

Limit: { props.feature.attributes.transformation.limit }

} + { props.feature.attributes.transformation.group_by && +

Group By: { props.feature.attributes.transformation.group_by }

} + { props.feature.attributes.transformation.window && +

Window: { props.feature.attributes.transformation.window }

} + { props.feature.attributes.transformation.def_expr && +

Expression: { props.feature.attributes.transformation.def_expr }

} + + + } + ; +} + +function InputAnchorFeatures(props: { project: string, feature: Feature }) { + const navigate = useNavigate(); + return <> + { props.feature.attributes._input_anchor_features && props.feature.attributes._input_anchor_features.length > 0 && + + + Codestin Search App + { + props.feature.attributes._input_anchor_features.map((input_feature) => + ) + } + + + } + ; +} + +function InputDerivedFeatures(props: { project: string, feature: Feature }) { + const navigate = useNavigate(); + return <> + { props.feature.attributes._input_derived_features && props.feature.attributes._input_derived_features.length > 0 && + + + Codestin Search App + { + props.feature.attributes._input_derived_features.map((input_feature) => + ) + } + + + } + ; +} + type Params = { project: string; featureId: string; } - const FeatureDetails: React.FC = () => { const { project, featureId } = useParams() as Params; const navigate = useNavigate(); @@ -27,89 +137,6 @@ const FeatureDetails: React.FC = () => { navigate(lineageUrl); } - const renderCommandButtons = () => { - return ( -
- - - -
- ) - } - - const renderFeature = (feature: Feature): JSX.Element => { - return ( -
- - { feature.attributes.key && feature.attributes.key.length > 0 && - - -

full_name: { feature.attributes.key[0].full_name }

-

key_column: { feature.attributes.key[0].key_column }

-

description: { feature.attributes.key[0].description }

-

key_column_alias: { feature.attributes.key[0].key_column_alias }

-

key_column_type: { feature.attributes.key[0].key_column_type }

- - - } - { feature.attributes.type && - - -

dimension_type: { feature.attributes.type.dimension_type }

-

tensor_category: { feature.attributes.type.tensor_category }

-

type: { feature.attributes.type.type }

-

val_type: { feature.attributes.type.val_type }

- - - } - { feature.attributes.transformation && - - -

transform_expr: { feature.attributes.transformation.transform_expr ?? "N/A" }

-

filter: { feature.attributes.transformation.filter ?? "N/A" }

-

agg_func: { feature.attributes.transformation.agg_func ?? "N/A" }

-

limit: { feature.attributes.transformation.limit ?? "N/A" }

-

group_by: { feature.attributes.transformation.group_by ?? "N/A" }

-

window: { feature.attributes.transformation.window ?? "N/A" }

-

def_expr: { feature.attributes.transformation.def_expr ?? "N/A" }

- - - } - - - { feature.attributes._input_anchor_features && feature.attributes._input_anchor_features.length > 0 && - - - { - feature.attributes._input_anchor_features.map((feature) => - ) - } - - - } - - - { feature.attributes._input_derived_features && feature.attributes._input_derived_features.length > 0 && - - - { - feature.attributes._input_derived_features.map((feature) => - ) - } - - - } - -
- ) - } - const render = (status: QueryStatus): JSX.Element => { switch (status) { case "error": @@ -149,17 +176,34 @@ const FeatureDetails: React.FC = () => { ); } else { return ( - - { renderCommandButtons() } - { renderFeature(data) } - + <> + + Codestin Search App +
+ + + +
+
+ + + + + + + +
+ + ); } } } return ( -
+
{ render(status) }
); diff --git a/ui/src/pages/feature/features.tsx b/ui/src/pages/feature/features.tsx index 15d011832..ff5d2522f 100644 --- a/ui/src/pages/feature/features.tsx +++ b/ui/src/pages/feature/features.tsx @@ -1,30 +1,29 @@ import React from 'react'; -import { Button, Card, Space } from 'antd'; +import { Button, Card, Space, Typography } from 'antd'; import { useNavigate } from "react-router-dom"; import FeatureList from "../../components/featureList"; -type Props = {}; +const { Title } = Typography; -const Features: React.FC = () => { +const Features: React.FC = () => { const navigate = useNavigate(); const onCreateFeatureClick = () => { navigate('/new-feature'); }; return ( - <> -
- - - - - - -
- +
+ + Codestin Search App + + + + + +
); }; diff --git a/ui/src/pages/feature/lineageGraph.tsx b/ui/src/pages/feature/lineageGraph.tsx index 5035a7fa9..0ba733550 100644 --- a/ui/src/pages/feature/lineageGraph.tsx +++ b/ui/src/pages/feature/lineageGraph.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Card, Col, Radio, Row, Spin } from 'antd'; +import { Card, Col, Radio, Row, Spin, Tabs, Typography } from 'antd'; import { useParams, useSearchParams } from "react-router-dom"; import { Elements } from 'react-flow-renderer'; import Graph from "../../components/graph/graph"; @@ -9,6 +9,9 @@ import { FeatureLineage } from "../../models/model"; import { LoadingOutlined } from "@ant-design/icons"; import GraphNodeDetails from "../../components/graph/graphNodeDetails"; +const { Title } = Typography; +const { TabPane } = Tabs; + type Params = { project: string; } @@ -96,33 +99,46 @@ const LineageGraph: React.FC = () => { }; return ( - -
- toggleFeatureType(e.target.value) }> - All Features - Source - Anchor - Anchor Feature - Derived Feature - -
-
- { - loading - ? ( } />) - : ( - - - - - - - - - ) - } -
- +
+ + Codestin Search App +
+ toggleFeatureType(e.target.value) }> + All Features + Source + Anchor + Anchor Feature + Derived Feature + +
+
+ { + loading + ? ( } />) + : ( + + + + + + + + + + +

Under construction

+ + +

Under construction

+ + + + + ) + } +
+ +
); } diff --git a/ui/src/pages/feature/newFeature.tsx b/ui/src/pages/feature/newFeature.tsx index 5499cefdd..fe69c3ad0 100644 --- a/ui/src/pages/feature/newFeature.tsx +++ b/ui/src/pages/feature/newFeature.tsx @@ -1,13 +1,14 @@ import React from 'react'; -import { Card } from 'antd'; +import { Card, Typography } from 'antd'; import FeatureForm from '../../components/featureForm'; -type Props = {}; +const { Title } = Typography; -const NewFeature: React.FC = () => { +const NewFeature: React.FC = () => { return ( -
- +
+ + Codestin Search App
diff --git a/ui/src/pages/jobs/jobs.tsx b/ui/src/pages/jobs/jobs.tsx index 99c4117d7..117663191 100644 --- a/ui/src/pages/jobs/jobs.tsx +++ b/ui/src/pages/jobs/jobs.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { Card} from 'antd'; +import { Card, Typography } from 'antd'; -type Props = {}; +const { Title } = Typography; -const Jobs: React.FC = () => { +const Jobs: React.FC = () => { return ( -
+
+ Codestin Search App Under construction
diff --git a/ui/src/pages/management/management.tsx b/ui/src/pages/management/management.tsx index 3788fd84c..1fed4d0d9 100644 --- a/ui/src/pages/management/management.tsx +++ b/ui/src/pages/management/management.tsx @@ -1,18 +1,17 @@ import React from 'react'; -import { Card } from 'antd'; +import { Card, Typography } from 'antd'; import UserRoles from '../../components/userRoles'; -type Props = {}; +const { Title } = Typography; -const Management: React.FC = () => { +const Management: React.FC = () => { return ( - <> -
- - - -
- +
+ + Codestin Search App + + +
); }; diff --git a/ui/src/pages/management/roleManagement.tsx b/ui/src/pages/management/roleManagement.tsx index a2261c0b2..5abb0ff1a 100644 --- a/ui/src/pages/management/roleManagement.tsx +++ b/ui/src/pages/management/roleManagement.tsx @@ -1,17 +1,18 @@ import React from 'react'; -import { Card } from 'antd'; +import { Card, Typography } from 'antd'; import RoleManagementForm from '../../components/roleManagementForm'; -type Props = {}; +const { Title } = Typography; -const RoleManagement: React.FC = () => { +const RoleManagement: React.FC = () => { return ( -
- +
+ + Codestin Search App
); }; -export default RoleManagement; \ No newline at end of file +export default RoleManagement; diff --git a/ui/src/pages/monitoring/monitoring.tsx b/ui/src/pages/monitoring/monitoring.tsx index 1f8bc2047..1cce8abd1 100644 --- a/ui/src/pages/monitoring/monitoring.tsx +++ b/ui/src/pages/monitoring/monitoring.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { Card} from 'antd'; +import { Card, Typography } from 'antd'; -type Props = {}; +const { Title } = Typography; -const Monitoring: React.FC = () => { +const Monitoring: React.FC = () => { return ( -
- +
+ + Codestin Search App Under construction
diff --git a/ui/src/site.css b/ui/src/site.css index 0882a413b..ef24f0420 100644 --- a/ui/src/site.css +++ b/ui/src/site.css @@ -1,3 +1,15 @@ +.page { + margin: 1%; +} + +.card { + margin-top: 15px; + margin-right: 15px; + min-width: 1000px; + box-shadow: 5px 8px 15px 5px rgba(208, 216, 243, 0.6); + border-radius: 8px; +} + .lineage-graph { margin-top: 1.5rem; }