feat: remove pwd & input pwd before import data (#61)

app/assets/PrivateRoute.tsx

@@ -7,13 +7,12 @@ import { IRootState } from './store';
 const mapState = (state: IRootState) => ({
  host: state.nebula.host,
  username: state.nebula.username,
- password: state.nebula.password,
 });
 
 const mapDispatch = () => ({});
 
 const PrivateRoute = ({ component: Component, render, ...rest }) => {
- if (rest.host && rest.username && rest.password) {
+ if (rest.host && rest.username) {
  return Component ? (
  <Route {...rest} render={props => <Component {...props} />} />
  ) : (

app/assets/components/ConfigServerForm/index.tsx

@@ -39,7 +39,7 @@ const ConfigServerForm = Form.create<IProps>()((props: IProps) => {
  <FormItem label={intl.get('configServer.host')}>
  {getFieldDecorator('host', {
  rules: hostRulesFn(intl),
- })(<Input />)}
+ })(<Input placeholder="GraphD Host: Port" />)}
  </FormItem>
  <FormItem label={intl.get('configServer.username')}>
  {getFieldDecorator('username', {

app/assets/components/NebulaD3/Links.tsx

@@ -54,6 +54,7 @@ export default class Links extends React.Component<IProps, {}> {
  .append('svg:path')
  .attr('pointer-events', 'visibleStroke')
  .attr('class', 'link')
+ .classed('ring', (d: IPath) => d.source.name === d.target.name)
  .style('fill', 'none')
  .style('stroke', '#595959')
  .style('stroke-width', 2)

app/assets/components/NebulaD3/index.tsx

@@ -151,7 +151,8 @@ class NebulaD3 extends React.Component<IProps> {
  tick = () => {
  this.link.attr('d', (d: any) => {
  if (d.target.name === d.source.name) {
- const dr = 30 / d.linknum;
+ const param = d.size > 1 ? 50 : 30;
+ const dr = param / d.linknum;
  return (
  'M' +
  d.source.x +

app/assets/config/locale/en-US.json

@@ -296,7 +296,8 @@
  "indexNotEmpty": "column index can't be null.",
  "reset": "Reset",
  "fileUploading": "Upload in progress. If you leave this page now, only the uploaded data are stored.",
- "importFinished": "Import task has ended."
+ "importFinished": "Import task has ended.",
+ "enterPassword": "Please enter your nebula account password"
  },
  "schema": {
  "spaceList": "Graph Space List",

app/assets/config/locale/zh-CN.json

@@ -292,7 +292,8 @@
  "indexNotEmpty": "对应列标不能为空",
  "reset": "重置",
  "fileUploading": "正在上传CSV文件，请等待。如果您离开当前页面，只有已上传的部分数据会被保留。",
- "importFinished": "导入任务已结束"
+ "importFinished": "导入任务已结束",
+ "enterPassword": "请输入 nebula 账号密码"
  },
  "schema": {
  "spaceList": "图空间列表",

app/assets/modules/Explore/Control/IndexQuery/IndexMatch.tsx

@@ -337,6 +337,7 @@ class IndexMatch extends React.Component<IProps, IState> {
  : record.type;
  return (
  <Select
+ dropdownMatchSelectWidth={false}
  value={record.operator}
  onChange={value => this.handleSelect(value, 'operator', index)}
  >

app/assets/modules/Import/Tasks/Import.less

@@ -0,0 +1,9 @@
+.password-modal {
+ .btns {
+ margin: 30px 0 0;
+
+ .ant-btn:not(:last-child) {
+ margin-right: 20px;
+ }
+ }
+}

app/assets/modules/Import/Tasks/Import.tsx

@@ -1,15 +1,16 @@
-import { Button, message, Tabs } from 'antd';
+import { Button, Input, message, Tabs } from 'antd';
 import React from 'react';
 import intl from 'react-intl-universal';
 import { connect } from 'react-redux';
 
+import { Modal } from '#assets/components';
 import service from '#assets/config/service';
 import { IDispatch, IRootState } from '#assets/store';
 import { configToJson, getStringByteLength } from '#assets/utils/import';
 import { trackEvent, trackPageView } from '#assets/utils/stat';
 
+import './Import.less';
 import Prev from './Prev';
-
 const { TabPane } = Tabs;
 const mapState = (state: IRootState) => ({
  activeStep: state.importData.activeStep,
@@ -21,7 +22,6 @@ const mapState = (state: IRootState) => ({
  taskId: state.importData.taskId,
  currentSpace: state.nebula.currentSpace,
  username: state.nebula.username,
- password: state.nebula.password,
  host: state.nebula.host,
  spaceVidType: state.nebula.spaceVidType,
 });
@@ -38,36 +38,55 @@ type IProps = ReturnType<typeof mapState> & ReturnType<typeof mapDispatch>;
 
 interface IState {
  activeKey: string;
+ password: string;
  startByte: number;
  endByte: number;
 }
 
+enum ITaskStatus {
+ 'statusFinished' = 'statusFinished',
+ 'statusStoped' = 'statusStoped',
+ 'statusProcessing' = 'statusProcessing',
+ 'statusNotExisted' = 'statusNotExisted',
+ 'statusAborted' = 'statusAborted',
+}
+
 class Import extends React.Component<IProps, IState> {
  ref: HTMLDivElement;
  logTimer: any;
  checkTimer: any;
+ modalHandle;
 
  constructor(props: IProps) {
  super(props);
  this.state = {
  activeKey: 'log',
  startByte: 0,
  endByte: 1000000,
+ password: '',
  };
  }
 
  componentDidMount() {
+ trackPageView('/import/data');
+ }
+
+ componentWillUnmount() {
+ clearTimeout(this.logTimer);
+ }
+
+ createConfigFile = async () => {
  const {
  currentSpace,
  username,
- password,
  host,
  vertexesConfig,
  edgesConfig,
  mountPath,
  activeStep,
  spaceVidType,
  } = this.props;
+ const { password } = this.state;
  const config: any = configToJson({
  currentSpace,
  username,
@@ -79,35 +98,27 @@ class Import extends React.Component<IProps, IState> {
  activeStep,
  spaceVidType,
  });
- service
- .createConfigFile({
- config,
- mountPath,
- })
- .then((result: any) => {
- if (result.code !== 0) {
- message.error(intl.get('import.createConfigError'));
- }
- });
-
- trackPageView('/import/data');
- }
-
- componentWillUnmount() {
- clearTimeout(this.logTimer);
- }
+ const res = await service.createConfigFile({
+ config,
+ mountPath,
+ });
+ if (res.code !== 0) {
+ message.error(intl.get('import.createConfigError'));
+ }
+ };
 
  handleRunImport = async () => {
  const {
  currentSpace,
  username,
- password,
  host,
  vertexesConfig,
  edgesConfig,
  mountPath,
  activeStep,
  } = this.props;
+ const { password } = this.state;
+ this.ref.innerHTML = '';
  const errCode: any = await this.props.importData({
  currentSpace,
  username,
@@ -125,6 +136,18 @@ class Import extends React.Component<IProps, IState> {
  trackEvent('import', 'import_data', 'start');
  };
 
+ handleOpen = () => {
+ if (this.modalHandle) {
+ this.modalHandle.show();
+ this.setState({ password: '' });
+ }
+ };
+ handleClose = () => {
+ if (this.modalHandle) {
+ this.modalHandle.hide();
+ }
+ };
+
  checkIsFinished = async () => {
  const { taskId } = this.props;
  const { code, data, message: errMsg } = await this.props.checkImportStatus({
@@ -137,8 +160,13 @@ class Import extends React.Component<IProps, IState> {
  }
 
  const result = data.results?.[0];
-
- if (result?.taskStatus !== 'statusProcessing') {
+ if (result?.taskStatus !== ITaskStatus.statusProcessing) {
+ if (result.taskMessage) {
+ message.warning(result.taskMessage);
+ }
+ if (result?.taskStatus === ITaskStatus.statusFinished) {
+ message.success(intl.get('import.importFinished'));
+ }
  service.finishImport({ taskId });
  clearTimeout(this.checkTimer);
  } else {
@@ -178,7 +206,6 @@ class Import extends React.Component<IProps, IState> {
  update({
  isImporting: false,
  });
- message.success(intl.get('import.importFinished'));
  clearTimeout(this.logTimer);
  trackEvent('import', 'import_data', 'finish');
  }
@@ -197,6 +224,12 @@ class Import extends React.Component<IProps, IState> {
  this.handleRunImport();
  };
 
+ handleImportStart = async () => {
+ this.handleClose();
+ await this.createConfigFile();
+ await this.handleRunImport();
+ };
+
  render() {
  const {
  isImporting,
@@ -205,13 +238,13 @@ class Import extends React.Component<IProps, IState> {
  mountPath,
  taskId,
  } = this.props;
- const { activeKey } = this.state;
+ const { activeKey, password } = this.state;
  return (
  <div className="import">
  <div className="import-btn">
  <Button
  className="import-again"
- onClick={this.handleRunImport}
+ onClick={this.handleOpen}
  loading={isImporting}
  >
  {intl.get('import.runImport')}
@@ -307,6 +340,28 @@ class Import extends React.Component<IProps, IState> {
  </div>
  </TabPane>
  </Tabs>
+ <Modal
+ title={intl.get('import.enterPassword')}
+ className="password-modal"
+ handlerRef={handle => (this.modalHandle = handle)}
+ footer={false}
+ >
+ <Input.Password
+ onChange={e => this.setState({ password: e.target.value })}
+ />
+ <div className="btns">
+ <Button onClick={this.handleClose}>
+ {intl.get('common.cancel')}
+ </Button>
+ <Button
+ type="primary"
+ disabled={!password}
+ onClick={this.handleImportStart}
+ >
+ {intl.get('common.confirm')}
+ </Button>
+ </div>
+ </Modal>
  </div>
  );
  }

app/assets/modules/Import/Tasks/Next.tsx

@@ -13,7 +13,6 @@ const mapState = (state: IRootState) => ({
  activeStep: state.importData.activeStep,
  currentSpace: state.nebula.currentSpace,
  username: state.nebula.username,
- password: state.nebula.password,
  host: state.nebula.host,
 });
 

app/assets/store/models/import.ts

@@ -285,7 +285,7 @@ export const importData = createModel({
  nebula: { spaceVidType },
  } = rootState;
  const config: any = configToJson({ ...payload, spaceVidType });
- const { code, data, message } = (await service.importData({
+ const { code, data, message: errorMsg } = (await service.importData({
  configBody: config,
  configPath: '',
  })) as any;
@@ -295,7 +295,7 @@ export const importData = createModel({
  isImporting: true,
  });
  } else {
- message.error(message);
+ message.error(errorMsg);
  }
  return code;
  },

app/assets/store/models/nebula.ts

@@ -20,7 +20,6 @@ interface IState {
  edgeTypes: string[];
  host: string;
  username: string;
- password: string;
  tagsFields: any[];
  edgesFields: any[];
  indexes: any[];
@@ -98,7 +97,6 @@ export const nebula = createModel({
  state: {
  username: cookies.get('nu'),
  host: cookies.get('nh'),
- password: cookies.get('np'),
  spaces: [],
  currentSpace: '',
  spaceVidType: '',
@@ -198,23 +196,19 @@ export const nebula = createModel({
  message.success(intl.get('configServer.success'));
  cookies.set('nh', host);
  cookies.set('nu', username);
- cookies.set('np', password);
  this.update({
  host,
  username,
- password,
  });
  return true;
  } else {
  message.error(`${intl.get('configServer.fail')}: ${errorMessage}`);
  this.update({
  host: '',
  username: '',
- password: '',
  });
  cookies.remove('nh');
  cookies.remove('nu');
- cookies.remove('np');
  return false;
  }
  },
@@ -231,13 +225,11 @@ export const nebula = createModel({
  this.update({
  host: '',
  username: '',
- password: '',
  spaces: [],
  currentSpace: '',
  });
  cookies.remove('nh');
  cookies.remove('nu');
- cookies.remove('np');
  sessionStorage.removeItem('currentSpace');
  dispatch({ type: 'RESET_APP' });
  },