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

refactor: refactor antd component #314

Merged
merged 2 commits into from
Oct 14, 2022
Merged

refactor: refactor antd component #314

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
84e84f1
refactor: refactor antd component
hetao92 Oct 14, 2022
bb6f573
mod: code review
hetao92 Oct 14, 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
22 changes: 11 additions & 11 deletions app/pages/Console/OutputBox/ForceGraph/DisplayPanel/ExpandForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import intl from 'react-intl-universal';
import { LinkObject, NodeObject } from '@vesoft-inc/force-graph';
import ExpandItem from '../ExpandItem';
import styles from './index.module.less';
const TabPane = Tabs.TabPane;

interface IProps {
data: {
Expand Down Expand Up @@ -80,18 +79,19 @@ const DisplayComponent = (props: IProps) => {
return _data;
});
};
const items = [
{
label: intl.get('import.vertexText') + `(${nodes.length})`,
key: 'nodes'
},
{
label: intl.get('import.edgeText') + `(${links.length})`,
key: 'links'
},
]
return (
<div className={styles.displayExpand}>
<Tabs className={styles.headerTab} onChange={setTab} defaultActiveKey={tab}>
<TabPane
tab={intl.get('import.vertexText') + `(${nodes.length})`}
key="nodes"
/>
<TabPane
tab={intl.get('import.edgeText') + `(${links.length})`}
key="links"
/>
</Tabs>
<Tabs className={styles.headerTab} onChange={setTab} defaultActiveKey={tab} items={items} />
<div className={styles.content}>
{list[tab].length > 0 && list[tab].map((item: NodeObject | LinkObject, index) => (
<ExpandItem
Expand Down
116 changes: 49 additions & 67 deletions app/pages/Console/OutputBox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, Table, Tabs, Tooltip, Popover } from 'antd';
import { BigNumber } from 'bignumber.js';
import React, { useCallback, useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import intl from 'react-intl-universal';
import { observer } from 'mobx-react-lite';
import { useStore } from '@app/stores';
Expand Down Expand Up @@ -221,10 +221,53 @@ const OutputBox = (props: IProps) => {
edges
});
};

const resultSuccess = useMemo(() => code === 0, [code]);
const items = [
resultSuccess && {
key: 'table',
label: <>
<Icon type="icon-studio-console-table" />
{intl.get('common.table')}
</>,
children: <Table
bordered={true}
columns={columns}
dataSource={dataSource}
pagination={{
showTotal: () =>
`${intl.get('common.total')} ${dataSource.length}`,
}}
rowKey={() => uuidv4()}
/>
},
resultSuccess && data.headers[0] === 'format' && {
key: 'graphViz',
label: <>
<Icon type="icon-studio-console-graphviz" />
{intl.get('console.graphviz')}
</>,
children: <Graphviz graph={dataSource[0]?.format} index={index} />
},
showGraph && {
key: 'graph',
label: <>
<Icon type="icon-studio-console-graph" />
{intl.get('common.graph')}
</>,
children: <ForceGraph data={dataSource} spaceVidType={spaceVidType} onGraphInit={setGraph} />
},
!resultSuccess && {
key: 'log',
label: <>
<Icon type="icon-studio-console-logs" />
{intl.get('common.log')}
</>,
children: <div className={styles.errContainer}>{message}</div>
}
].filter(Boolean)
return <div className={styles.outputBox}>
<div className={styles.outputHeader}>
<p className={cls(styles.gql, { [styles.errorInfo]: code !== 0 })} onClick={() => onHistoryItem(gql)}>
<p className={cls(styles.gql, { [styles.errorInfo]: !resultSuccess })} onClick={() => onHistoryItem(gql)}>
<span className={styles.gqlValue}>$ {gql}</span>
</p>
<div className={styles.outputOperations}>
Expand Down Expand Up @@ -272,71 +315,10 @@ const OutputBox = (props: IProps) => {
size={'large'}
tabPosition={'left'}
onChange={handleTabChange}
>
{code === 0 && (
<Tabs.TabPane
tab={
<>
<Icon type="icon-studio-console-table" />
{intl.get('common.table')}
</>
}
key="table"
>
<Table
bordered={true}
columns={columns}
dataSource={dataSource}
pagination={{
showTotal: () =>
`${intl.get('common.total')} ${dataSource.length}`,
}}
rowKey={() => uuidv4()}
/>
</Tabs.TabPane>
)}
{code === 0 && data.headers[0] === 'format' && (
<Tabs.TabPane
tab={
<>
<Icon type="icon-studio-console-graphviz" />
{intl.get('console.graphviz')}
</>
}
key="graph"
>
{<Graphviz graph={dataSource[0]?.format} index={index} />}
</Tabs.TabPane>
)}
{showGraph && (
<Tabs.TabPane
tab={
<>
<Icon type="icon-studio-console-graph" />
{intl.get('common.graph')}
</>
}
key="graph"
>
<ForceGraph data={dataSource} spaceVidType={spaceVidType} onGraphInit={setGraph} />
</Tabs.TabPane>
)}
{code !== 0 && (
<Tabs.TabPane
tab={
<>
<Icon type="icon-studio-console-logs" />
{intl.get('common.log')}
</>
}
key="log"
>
<div className={styles.errContainer}>{message}</div>
</Tabs.TabPane>
)}
</Tabs>
items={items}
/>
</div>
{code === 0 && data.timeCost !== undefined && (
{resultSuccess && data.timeCost !== undefined && (
<div className={styles.outputFooter}>
<span>
{`${intl.get('console.execTime')} ${data.timeCost /
Expand Down
7 changes: 7 additions & 0 deletions app/pages/Schema/index.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,4 +88,11 @@

.active {
animation: blinkFadeOut ease-in-out 3s;
}

.clonePopover {
:global(.ant-popover-content) {
position: relative;
top: -100px;
}
}
87 changes: 44 additions & 43 deletions app/pages/Schema/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Icon from '@app/components/Icon';
import { trackPageView } from '@app/utils/stat';
import { observer } from 'mobx-react-lite';
import { useStore } from '@app/stores';
import { NebulaVersion } from '@app/stores/types.d';
import cls from 'classnames';
import { Link, useHistory } from 'react-router-dom';
import styles from './index.module.less';
Expand All @@ -15,62 +14,64 @@ interface IOperations {
space: string;
onClone: (name: string, oldSpace: string) => void
onDelete: (name: string) => void;
version: NebulaVersion
}

const Operations = (props: IOperations) => {
const { space, onClone, onDelete, version } = props;
const { space, onClone, onDelete } = props;
const [visible, setVisible] = useState(false);
const handleClone = (values) => {
const { name } = values;
onClone(name, space);
setVisible(false);
};
return <Menu className={styles.operationsSpace}>
<Menu.Item key="delete">
<Popconfirm
onConfirm={() => onDelete(space)}
title={intl.get('common.ask')}
okText={intl.get('common.ok')}
cancelText={intl.get('common.cancel')}
>
<Button type="link" danger>
{intl.get('schema.deleteSpace')}
</Button>
</Popconfirm>
</Menu.Item>
{version !== NebulaVersion.V2_5 && <Menu.Item key="clone">
<Popover
destroyTooltipOnHide={true}
placement="leftTop"
open={visible}
trigger="click"
onOpenChange={visible => setVisible(visible)}
content={<Form onFinish={handleClone} layout="inline">
<Form.Item label={intl.get('schema.spaceName')} name="name" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item>
<Button htmlType="submit" type="primary">
{intl.get('common.confirm')}
</Button>
</Form.Item>
</Form>}
>
<Button type="link" onClick={() => setVisible(true)}>
{intl.get('schema.cloneSpace')}
</Button>
</Popover>
</Menu.Item>}
</Menu>;
const items = [
{
key: 'delete',
label: <Popconfirm
onConfirm={() => onDelete(space)}
title={intl.get('common.ask')}
okText={intl.get('common.ok')}
cancelText={intl.get('common.cancel')}
>
<Button type="link" danger>
{intl.get('schema.deleteSpace')}
</Button>
</Popconfirm>
},
{
key: 'clone',
label: <Popover
overlayClassName={styles.clonePopover}
destroyTooltipOnHide={true}
placement="leftTop"
open={visible}
trigger="click"
onOpenChange={visible => setVisible(visible)}
content={<Form onFinish={handleClone} layout="inline">
<Form.Item label={intl.get('schema.spaceName')} name="name" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item>
<Button htmlType="submit" type="primary">
{intl.get('common.confirm')}
</Button>
</Form.Item>
</Form>}
>
<Button type="link" onClick={() => setVisible(true)}>
{intl.get('schema.cloneSpace')}
</Button>
</Popover>
}
]
return <Menu className={styles.operationsSpace} items={items} />
};

const Schema = () => {
const { schema, global } = useStore();
const { schema } = useStore();
const [loading, setLoading] = useState(false);
const [searchVal, setSearchVal] = useState('');
const history = useHistory();
const { nebulaVersion } = global;
const { currentSpace, switchSpace, getSpacesList, deleteSpace, spaceList, cloneSpace } = schema;
const activeSpace = location.hash.slice(1);
useEffect(() => {
Expand Down Expand Up @@ -196,7 +197,7 @@ const Schema = () => {
>
{intl.get('common.schema')}
</Button>
<Dropdown overlay={<Operations version={nebulaVersion} space={space.Name} onDelete={handleDeleteSpace} onClone={handleCloneSpace} />} placement="bottomLeft">
<Dropdown overlay={<Operations space={space.Name} onDelete={handleDeleteSpace} onClone={handleCloneSpace} />} placement="bottomLeft">
<Icon className={styles.btnMore} type="icon-studio-more" />
</Dropdown>
</div>
Expand Down