Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minor UI style improvements #427

Merged
merged 2 commits into from
Jul 4, 2022
Merged

Minor UI style improvements #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1020a22
UI style improvements
blrchen Jul 3, 2022
83c2c6d
Append project name in lineage page title
blrchen Jul 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion ui/src/components/dataSourceList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/featureList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
45 changes: 25 additions & 20 deletions ui/src/components/graph/graphNodeDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -44,38 +46,41 @@ const GraphNodeDetails: React.FC = () => {
: (<div style={ { margin: "2%" } }>
{ !feature && <p>Click on node to show metadata and metric details</p> }
{ feature?.attributes.transformation &&
<Card title="Transformation">
<Card>
<Title level={4}>Transformation</Title>
{ feature.attributes.transformation.transform_expr &&
<p>transform_expr: { feature.attributes.transformation.transform_expr }</p> }
<p>Expression: { feature.attributes.transformation.transform_expr }</p> }
{ feature.attributes.transformation.filter &&
<p>filter: { feature.attributes.transformation.filter }</p> }
<p>Filter { feature.attributes.transformation.filter }</p> }
{ feature.attributes.transformation.agg_func &&
<p>agg_func: { feature.attributes.transformation.agg_func }</p> }
<p>Aggregation: { feature.attributes.transformation.agg_func }</p> }
{ feature.attributes.transformation.limit &&
<p>limit: { feature.attributes.transformation.limit }</p> }
<p>Limit: { feature.attributes.transformation.limit }</p> }
{ feature.attributes.transformation.group_by &&
<p>group_by: { feature.attributes.transformation.group_by }</p> }
<p>Group By: { feature.attributes.transformation.group_by }</p> }
{ feature.attributes.transformation.window &&
<p>window: { feature.attributes.transformation.window }</p> }
<p>Window: { feature.attributes.transformation.window }</p> }
{ feature.attributes.transformation.def_expr &&
<p>def_expr: { feature.attributes.transformation.def_expr }</p> }
<p>Expression: { feature.attributes.transformation.def_expr }</p> }
</Card>
}
{ feature?.attributes.key && feature.attributes.key.length > 0 &&
<Card title="Key">
<p>full_name: { feature.attributes.key[0].full_name }</p>
<p>key_column: { feature.attributes.key[0].key_column }</p>
<p>description: { feature.attributes.key[0].description }</p>
<p>key_column_alias: { feature.attributes.key[0].key_column_alias }</p>
<p>key_column_type: { feature.attributes.key[0].key_column_type }</p>
<Card>
<Title level={4}>Key</Title>
<p>Full name: { feature.attributes.key[0].full_name }</p>
<p>Description: { feature.attributes.key[0].description }</p>
<p>Key column: { feature.attributes.key[0].key_column }</p>
<p>Key column alias: { feature.attributes.key[0].key_column_alias }</p>
<p>Key column type: { feature.attributes.key[0].key_column_type }</p>
</Card>
}
{ feature?.attributes.type &&
<Card title="Type">
<p>dimension_type: { feature.attributes.type.dimension_type }</p>
<p>tensor_category: { feature.attributes.type.tensor_category }</p>
<p>type: { feature.attributes.type.type }</p>
<p>val_type: { feature.attributes.type.val_type }</p>
<Card>
<Title level={4}>Type</Title>
<p>Dimension Type: { feature.attributes.type.dimensionType }</p>
<p>Tensor Category: { feature.attributes.type.tensorCategory }</p>
<p>Type: { feature.attributes.type.type }</p>
<p>Value Type: { feature.attributes.type.valType }</p>
</Card>
}
</div>)
Expand Down
3 changes: 1 addition & 2 deletions ui/src/components/header/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import { useAccount, useMsal } from "@azure/msal-react";
import './header.css';
import HeaderWidget from "./headerWidget";

type Props = {};
const Header: React.FC<Props> = () => {
const Header: React.FC = () => {
const { accounts } = useMsal();
const account = useAccount(accounts[0] || {});
return (
Expand Down
20 changes: 10 additions & 10 deletions ui/src/components/sidemenu/siteMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Sider>
<div style={ { fontSize: 'medium', color: 'white', margin: '10px', paddingLeft: '15px' } }>
Feathr Web UI
</div>
<Sider theme="dark">
<Title level={1} style={ { fontSize: '36px', color: 'white', margin: '10px', paddingLeft: '35px'} }>Feathr</Title>
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={ ['/'] }
defaultOpenKeys={ ['/'] }
>
<Menu.Item key="/dataSources" icon={ <DatabaseOutlined /> }>
<Menu.Item key="/dataSources" icon={ <DatabaseOutlined style={{fontSize: '20px', color: '#13a8a8'}}/> }>
<Link to="/dataSources">Data Sources</Link>
</Menu.Item>
<Menu.Item key="/features" icon={ <CopyOutlined /> }>
<Menu.Item key="/features" icon={ <CopyOutlined style={{fontSize: '20px', color: '#d89614'}}/> }>
<Link to="/features">Features</Link>
</Menu.Item>
<Menu.Item key="/jobs" icon={ <RocketOutlined /> }>
<Menu.Item key="/jobs" icon={ <RocketOutlined style={{fontSize: '20px', color: '#642ab5'}}/> }>
<Link to="/jobs">Jobs</Link>
</Menu.Item>
<Menu.Item key="/monitoring" icon={ <EyeOutlined /> }>
<Menu.Item key="/monitoring" icon={ <EyeOutlined style={{fontSize: '20px', color: '#e84749'}}/> }>
<Link to="/monitoring">Monitoring</Link>
</Menu.Item>
</Menu>
Expand Down
6 changes: 3 additions & 3 deletions ui/src/models/model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
19 changes: 9 additions & 10 deletions ui/src/pages/dataSource/dataSources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<Props> = () => {
const DataSources: React.FC = () => {
return (
<>
<div className="home" style={ { margin: "2%" } }>
<Card style={ { minWidth: '1000px' } }>
<DataSourceList />
</Card>
</div>
</>
<div className="page" >
<Card>
<Title level={3}>Data Sources</Title>
<DataSourceList />
</Card>
</div>
);
};

Expand Down
Loading