Merge pull request #44 from arangoml/test

Completed Query Page
arangoml · Oct 3, 2019 · 8cfe6c2 · 8cfe6c2
2 parents 3d97a6c + 96da360
commit 8cfe6c2
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 127 deletions.
diff --git a/arangopipe/arangopipe_frontend/app/src/actions/auth/index.js b/arangopipe/arangopipe_frontend/app/src/actions/auth/index.js
@@ -13,7 +13,19 @@ export const signin = (obj) => {
     return API(data).then(res => {
       localStorage.setItem('token', res.data.jwt);
 
-      return dispatch({ type: USER.SIGNED_IN, payload: res.data.username })
+      let get_dbs = {
+        method: 'GET',
+        url: '_api/database/user?_='+Date.now()
+      }
+
+      const username = res.data.user
+
+      return AUTHAPI(get_dbs).then(res => {
+        return dispatch({ 
+          type: USER.SIGNED_IN, 
+          payload: { name: username, isAdmin: res.data.result.includes('_system') }})
+      })
+
     }).catch(err => {
       message.error('Wrong ID or Password!');
       throw err
@@ -24,15 +36,27 @@ export const signin = (obj) => {
 
 export const currentUser = () => {
   return (dispatch) => {
-    let data = {
+    let get_token = {
       method: 'GET',
       url: '_admin/aardvark/whoAmI?_='+Date.now()
     }
-    return AUTHAPI(data).then(res => {
-      console.log('success')
-      return dispatch({ type: USER.SIGNED_IN, payload: res.data.user })
+
+    return AUTHAPI(get_token).then(res => {
+
+      let get_dbs = {
+        method: 'GET',
+        url: '_api/database/user?_='+Date.now()
+      }
+
+      const username = res.data.user
+
+      return AUTHAPI(get_dbs).then(res => {
+        return dispatch({ 
+          type: USER.SIGNED_IN, 
+          payload: { name: username, isAdmin: res.data.result.includes('_system') }})
+      })
+
     }).catch(err => {
-      console.log(err)
       localStorage.removeItem('token');
       return dispatch({ type: USER.SIGNED_OUT })
     })

diff --git a/arangopipe/arangopipe_frontend/app/src/actions/counter.js b/arangopipe/arangopipe_frontend/app/src/actions/counter.js
diff --git a/arangopipe/arangopipe_frontend/app/src/actions/document/index.js b/arangopipe/arangopipe_frontend/app/src/actions/document/index.js
@@ -1,4 +1,4 @@
-import { DOCUMENT, GRAPH } from '../../reducers/type'
+import { DOCUMENT } from '../../reducers/type'
 import AUTHAPI from '../AUTHAPI'
 import moment from 'moment';
 import { message } from 'antd'

diff --git a/arangopipe/arangopipe_frontend/app/src/actions/query/index.js b/arangopipe/arangopipe_frontend/app/src/actions/query/index.js
@@ -1,7 +1,5 @@
 import { QUERY } from '../../reducers/type'
 import AUTHAPI from '../AUTHAPI'
-import moment from 'moment';
-import { message } from 'antd'
 
 
 //Get Default Query

diff --git a/arangopipe/arangopipe_frontend/app/src/components/Form/MetaSearchForm.jsx b/arangopipe/arangopipe_frontend/app/src/components/Form/MetaSearchForm.jsx
@@ -7,7 +7,7 @@ import {
 } from '../../actions/document'
 
 
-import { Form, Icon, Input, Button, Select } from 'antd';
+import { Form, Input, Button, Select } from 'antd';
 import { FIND_OPTIONS, WITH_OPTIONS, DEPLOY_QUERY } from "../../constants/searchOptions";
 
 const { Option } = Select;

diff --git a/arangopipe/arangopipe_frontend/app/src/components/Modal/TreeGraph.jsx b/arangopipe/arangopipe_frontend/app/src/components/Modal/TreeGraph.jsx
@@ -13,8 +13,11 @@ const { Option } = Select;
 
 
 class TreeGraphForm extends React.Component {
+
   state = {
     graph: null,
+    engine: 'dot',
+    format: 'svg',
     visible: 'hidden'
   }
 
@@ -168,7 +171,7 @@ class TreeGraphForm extends React.Component {
       renderGraph();
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const d_tag = this.props.deploymentTag.trim()
     const queries = []
 
@@ -185,7 +188,7 @@ class TreeGraphForm extends React.Component {
     this.props.getGraphData(queries)
   }
 
-  componentWillReceiveProps(props, state){
+  componentWillReceiveProps(props){
 
     if (this.props != props) {
       let gdata = Object.assign([], props.gdata)
@@ -212,28 +215,35 @@ class TreeGraphForm extends React.Component {
             }`
 
           this.setState({
-            graph: tree
+            graph: tree,
+            visible: 'visible'
           })
+
       }
 
     }
   }
 
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.form.validateFields((err, values) => {
-      if (!err) {
-        this.setState({
-          visible: 'visible'
-        })
-        this.drawGraph(values.engine, values.format, this.state.graph)
-      }
-    });
+
+  handleEngineChange = value => {
+    this.setState({
+      engine: value
+    })
   };
 
+  handleFormatChange = value => {
+    this.setState({
+      format: value
+    })
+  };
+
+
   render() {
     const { getFieldDecorator } = this.props.form;
 
+    if(this.state.graph != null)
+      this.drawGraph(this.state.engine, this.state.format, this.state.graph)
+
     return (
       <div className="graph">
         <Modal
@@ -245,13 +255,13 @@ class TreeGraphForm extends React.Component {
           style={{ top: 20 }}
           footer={[]}
         >
-            <Form layout="inline" onSubmit={this.handleSubmit} style={{textAlign:'center'}}>
+            <Form layout="inline" style={{textAlign:'center'}}>
               <Form.Item label='Engine'>
                 {getFieldDecorator('engine', {
                     initialValue: 'dot', 
                     rules: [{ required: true, message: 'Please input your Password!' }],
                   })(
-                    <Select style={{ width: 250 }}>
+                    <Select style={{ width: 250 }} onChange={this.handleEngineChange}>
                       <Option value="circo">circo</Option>
                       <Option value="dot">dot</Option>
                       <Option value="fdp">fdp</Option>
@@ -266,7 +276,7 @@ class TreeGraphForm extends React.Component {
                     initialValue: 'svg', 
                     rules: [{ required: true, message: 'Please input your Password!' }],
                   })(
-                    <Select style={{ width: 250 }}>
+                    <Select style={{ width: 250 }} onChange={this.handleFormatChange}>
                       <Option value="svg">svg</Option>
                       <Option value="png-image-element">png-image-element</Option>
                       <Option value="json">json</Option>
@@ -277,11 +287,7 @@ class TreeGraphForm extends React.Component {
                   )}
               </Form.Item>
 
-              <Form.Item>
-                <Button type="primary" htmlType="submit" icon='line-chart'>
-                  Generate
-                </Button>
-              </Form.Item>
+
             </Form>
             <Divider style={{marginTop: 10}}/>
             <div id="review" style={{visibility: this.state.visible}}>

diff --git a/arangopipe/arangopipe_frontend/app/src/components/Sidebar.jsx b/arangopipe/arangopipe_frontend/app/src/components/Sidebar.jsx
@@ -33,24 +33,31 @@ class Sidebar extends React.Component{
                   <span>Home</span>
                 </Link>
               </Menu.Item>
-              <Menu.Item key="user">
-                <Link to="/user">
-                  <Icon type="user" />
-                  <span>User</span>
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="deployment">
-                <Link to="/deployment">
-                  <Icon type="desktop" />
-                  <span>Deployment</span>
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="project">
-                <Link to="/project">
-                  <Icon type="pie-chart" />
-                  <span>Project</span>
-                </Link>
-              </Menu.Item>
+              {this.props.isAdmin && 
+                <Menu.Item key="user">
+                  <Link to="/user">
+                    <Icon type="user" />
+                    <span>User</span>
+                    </Link>
+                </Menu.Item>
+              }
+
+              {this.props.isAdmin && 
+                <Menu.Item key="deployment">
+                  <Link to="/deployment">
+                    <Icon type="desktop" />
+                    <span>Deployment</span>
+                  </Link>
+                </Menu.Item>
+              }
+              {this.props.isAdmin && 
+                <Menu.Item key="project">
+                  <Link to="/project">
+                    <Icon type="pie-chart" />
+                    <span>Project</span>
+                  </Link>
+                </Menu.Item>
+              }
               <Menu.Item key="query">
                 <Link to="/query">
                   <Icon type="fire" />

diff --git a/arangopipe/arangopipe_frontend/app/src/components/Table/QueryResult.jsx b/arangopipe/arangopipe_frontend/app/src/components/Table/QueryResult.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, Button } from 'antd';
+import { Table } from 'antd';
 
 const capitalizeFLetter = (str) => {
     return str[0].toUpperCase() +  

diff --git a/arangopipe/arangopipe_frontend/app/src/containers/App/App.jsx b/arangopipe/arangopipe_frontend/app/src/containers/App/App.jsx
@@ -16,10 +16,9 @@ import Project from '../Project/Project';
 import Query from '../Query/Query';
 
 import './App.css'
-import config from '../../utils/config'
 
-import { Layout, Menu, Avatar, Affix, Drawer, Button, Icon, Breadcrumb, Input } from 'antd';
-const { Header, Content, Footer, Sider } = Layout;
+import { Layout, Menu, Avatar, Affix, Drawer, Button, Icon, Input } from 'antd';
+const { Header, Content, Footer } = Layout;
 const { SubMenu } = Menu;
 const { Search } = Input;
 
@@ -50,7 +49,7 @@ class App extends React.Component{
     await this.props.currentUser()
   }
 
-  componentWillMount(){
+  componentDidMount(){
      if(!this.props.auth.is_authed){
        window.location = '/login'
      } else {
@@ -60,13 +59,14 @@ class App extends React.Component{
 
   render() {
     const username = this.props.auth.user || '';
+    const isAdmin = this.props.auth.isAdmin || false;
     const avatarPath = require('../../assets/avatar.jpeg')
 
     const currentPage = this.props.location.pathname.split('/')[1]
 
     return (
         <Layout style={{ minHeight: '100vh' }}>
-          <Sidebar collapsed={this.state.collapsed} currentPage={currentPage}/>
+          <Sidebar collapsed={this.state.collapsed} currentPage={currentPage} isAdmin={isAdmin}/>
           <Layout>
 
             <Header className="header">

diff --git a/arangopipe/arangopipe_frontend/app/src/containers/Home/Home.jsx b/arangopipe/arangopipe_frontend/app/src/containers/Home/Home.jsx
@@ -1,14 +1,6 @@
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-import {
-  getUploadedDocuments,
-  processDocument,
-  deleteDocument,
-  saveToCSV,
-  clearDB
-} from '../../actions/document'
 
 import { Table, Input, Button, Icon, Row, Col, Card, Divider, Modal } from 'antd';
 import Highlighter from 'react-highlight-words';

diff --git a/arangopipe/arangopipe_frontend/app/src/containers/Query/Query.jsx b/arangopipe/arangopipe_frontend/app/src/containers/Query/Query.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
+
 
 import brace from 'brace';
 import AceEditor from 'react-ace';
@@ -20,9 +20,8 @@ import {
   explainQuery
 } from '../../actions/query'
 
-import { Table, Input, Button, Icon, Row, Col, Popconfirm, Alert,
-          Tag, Divider, Card, Menu, Tooltip, notification, Switch } from 'antd';
-import Highlighter from 'react-highlight-words';
+import { Button, Icon, Row, Col, Popconfirm, Alert,
+          Tag, Card, Menu, Tooltip, notification, Switch } from 'antd';
 
 
 class Query extends React.Component {