|
|
@@ -15,270 +15,270 @@ const { Header, Content, Sider } = Layout;
|
|
|
|
|
|
|
|
|
class App extends Component {
|
|
|
- constructor() {
|
|
|
- super();
|
|
|
- this.state = {
|
|
|
- current: 'schema',
|
|
|
- menuLevel1:"cloud-function",
|
|
|
- menuLevel2:"schema",
|
|
|
- sideBar:"trial-case",
|
|
|
- userID: '',
|
|
|
- hasLogin: false,
|
|
|
- user: {
|
|
|
- nickname: '',
|
|
|
- avatar: ''
|
|
|
- },
|
|
|
- collapsed: false,
|
|
|
- };
|
|
|
- }
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+ this.state = {
|
|
|
+ current: 'schema',
|
|
|
+ menuLevel1:"cloud-function",
|
|
|
+ menuLevel2:"schema",
|
|
|
+ sideBar:"trial-case",
|
|
|
+ userID: '',
|
|
|
+ hasLogin: false,
|
|
|
+ user: {
|
|
|
+ nickname: '',
|
|
|
+ avatar: ''
|
|
|
+ },
|
|
|
+ collapsed: false,
|
|
|
+ };
|
|
|
+ }
|
|
|
onCollapse = (collapsed) => {
|
|
|
console.log(collapsed);
|
|
|
this.setState({ collapsed });
|
|
|
};
|
|
|
|
|
|
- switchPage = (e) => {
|
|
|
- this.setState({
|
|
|
- current: e.key,
|
|
|
- });
|
|
|
- };
|
|
|
+ switchPage = (e) => {
|
|
|
+ this.setState({
|
|
|
+ current: e.key,
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
switchMenu = (menuName,e) => {
|
|
|
- console.log('menuName',menuName,'e',e);
|
|
|
+ console.log('menuName',menuName,'e',e);
|
|
|
this.setState({
|
|
|
[menuName]: e.key,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- login = (id) => {
|
|
|
- const GET_USER = gql`
|
|
|
- query USER($id: ID!) {
|
|
|
- user_by_id(id: $id) {
|
|
|
- avatar,
|
|
|
- nickname
|
|
|
- }
|
|
|
- }
|
|
|
- `;
|
|
|
- return (
|
|
|
- <Query query={GET_USER} variables={{id}}>
|
|
|
- {
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return <Spin style={{marginLeft: 3}}/>
|
|
|
- }
|
|
|
- if (error) {
|
|
|
- return 'error!';
|
|
|
- }
|
|
|
-
|
|
|
- if (data.user_by_id === null)
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <span style={{marginRight: '10px'}}>no such person</span>
|
|
|
- <Button onClick={() => {
|
|
|
- this.setState({hasLogin: false})
|
|
|
- }}>relogin</Button>
|
|
|
- </div>
|
|
|
- );
|
|
|
- else {
|
|
|
- // 不可使用 this.setState, 会报错。
|
|
|
- // Warning: Cannot update during an existing state transition (such as within `render`).
|
|
|
- // Render methods should be a pure function of props and state.
|
|
|
- this.state.user = {
|
|
|
- avatar: data.user_by_id.avatar,
|
|
|
- nickname: data.user_by_id.nickname
|
|
|
- };
|
|
|
- console.log(data);
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <span style={{marginRight: '10px'}}>welcome, {data.user_by_id.nickname}</span>
|
|
|
- <Button onClick={() => {
|
|
|
- this.setState({hasLogin: false})
|
|
|
- }}>exit</Button>
|
|
|
- </div>
|
|
|
- );
|
|
|
+ login = (id) => {
|
|
|
+ const GET_USER = gql`
|
|
|
+ query USER($id: ID!) {
|
|
|
+ user_by_id(id: $id) {
|
|
|
+ avatar,
|
|
|
+ nickname
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- </Query>
|
|
|
- )
|
|
|
- };
|
|
|
-
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <Layout style={{ minHeight: '100vh' }}>
|
|
|
- <Header className="header" style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
|
|
|
- <div className="logo" />
|
|
|
- <Menu
|
|
|
- theme="dark"
|
|
|
- mode="horizontal"
|
|
|
- defaultSelectedKeys={['Cloud Function']}
|
|
|
- style={{ lineHeight: '64px' }}
|
|
|
- onClick={(e)=>this.switchMenu('menuLevel1',e)}
|
|
|
- >
|
|
|
- <Menu.Item key="cloud-function">Cloud Function</Menu.Item>
|
|
|
- <Menu.Item key="data-storage">Data Storage</Menu.Item>
|
|
|
- <Menu.Item key="data-analysis">Data Analysis</Menu.Item>
|
|
|
- <Menu.Item key="monitor-notification">Monitor Notification</Menu.Item>
|
|
|
- </Menu>
|
|
|
- <div className='login'>
|
|
|
+ `;
|
|
|
+ return (
|
|
|
+ <Query query={GET_USER} variables={{id}}>
|
|
|
{
|
|
|
- this.state.hasLogin ?
|
|
|
- this.login(this.state.userID)
|
|
|
- :
|
|
|
- <div>
|
|
|
- <span style={{marginRight: 20}}>login:</span>
|
|
|
- <Input
|
|
|
- placeholder="id, eg: 'xy_1'"
|
|
|
- onChange={(e) => {
|
|
|
- // antd 获取不到 target，百度来的下面这句代码
|
|
|
- e.persist();
|
|
|
- this.setState({userID: e.target.value});
|
|
|
- }}
|
|
|
- onPressEnter={() => {
|
|
|
- this.setState({hasLogin: true})
|
|
|
- }}
|
|
|
- style={{width: 200}}
|
|
|
- />
|
|
|
- </div>
|
|
|
- }
|
|
|
- </div>
|
|
|
- </Header>
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return <Spin style={{marginLeft: 3}}/>
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!';
|
|
|
+ }
|
|
|
|
|
|
- <Layout>
|
|
|
- <Sider
|
|
|
- width={200}
|
|
|
- style={{ background: '#fff',marginTop:'64px'}}
|
|
|
- collapsible
|
|
|
- collapsed={this.state.collapsed}
|
|
|
- onCollapse={this.onCollapse}
|
|
|
- >
|
|
|
- <Menu
|
|
|
- theme="dark"
|
|
|
- mode="inline"
|
|
|
- defaultSelectedKeys={['1']}
|
|
|
- defaultOpenKeys={['sub1']}
|
|
|
- onClick={(e)=>this.switchMenu('sideBar',e)}
|
|
|
- selectedKeys={[this.state.sideBar]}
|
|
|
- style={{ borderRight: 0,overflow: 'auto',
|
|
|
- height: '100vh',
|
|
|
- left: '0',
|
|
|
- width: '200px',
|
|
|
- position: 'fixed'}}
|
|
|
- >
|
|
|
- <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone" /><span>Trial Case</span></span>}>
|
|
|
- <Menu.Item key="1">e-commerce</Menu.Item>
|
|
|
- <Menu.Item key="2">keep accounts</Menu.Item>
|
|
|
- <Menu.Item key="3">appointment</Menu.Item>
|
|
|
- </SubMenu>
|
|
|
- {(() => {
|
|
|
- switch (this.state.menuLevel1) {
|
|
|
- case 'cloud-function':
|
|
|
- return (
|
|
|
- <SubMenu
|
|
|
- key="cloud-function"
|
|
|
- title={<span><Icon type="cloud" theme="twoTone" /><span>Cloud Function</span></span>}>
|
|
|
- <Menu.Item key="wechat-service">wechat-service</Menu.Item>
|
|
|
- <Menu.Item key="graphql-service">graphql-service</Menu.Item>
|
|
|
- <Menu.Item key="quantization-service">quantization-service</Menu.Item>
|
|
|
- </SubMenu>
|
|
|
- );
|
|
|
- case 'data-storage':
|
|
|
- return (
|
|
|
- <SubMenu
|
|
|
- key="data-storage"
|
|
|
- title={<span><Icon type="database" theme="twoTone" /><span>Data Storage</span></span>}>
|
|
|
- <Menu.Item key="snbl-mongo">snbl-mongo</Menu.Item>
|
|
|
- </SubMenu>
|
|
|
- );
|
|
|
- case 'data-analysis':
|
|
|
- return (
|
|
|
- <SubMenu
|
|
|
- key="data-analysis"
|
|
|
- title={<span><Icon type="fund" theme="twoTone" /><span>data Analysis</span></span>}>
|
|
|
- <Menu.Item key="metabase">metabase</Menu.Item>
|
|
|
- </SubMenu>
|
|
|
- );
|
|
|
- case 'monitor-notification':
|
|
|
- return (
|
|
|
- <SubMenu
|
|
|
- key="monitor-notification"
|
|
|
- title={<span><Icon type="alert" theme="twoTone" /><span>Monitor Notification</span></span>}>
|
|
|
- <Menu.Item key="monitor">monitor</Menu.Item>
|
|
|
- <Menu.Item key="graphql-events">graphql-events</Menu.Item>
|
|
|
- <Menu.Item key="stock-signal">stock-signal</Menu.Item>
|
|
|
- </SubMenu>
|
|
|
- );
|
|
|
- default:
|
|
|
- return (
|
|
|
- <SubMenu
|
|
|
- key="cloud-function"
|
|
|
- title={<span><Icon type="cloud" theme="twoTone" /><span>Cloud Function</span></span>}>
|
|
|
- <Menu.Item key="wechat-service">wechat-service</Menu.Item>
|
|
|
- <Menu.Item key="graphql-service">graphql-service</Menu.Item>
|
|
|
- <Menu.Item key="quantization-service">quantization-service</Menu.Item>
|
|
|
- </SubMenu>
|
|
|
- );
|
|
|
- }
|
|
|
- })()}
|
|
|
- <SubMenu key="my-create" title={<span><Icon type="user" theme="outlined" /><span>My Create</span></span>}>
|
|
|
- <Menu.Item key="8">option9</Menu.Item>
|
|
|
- <Menu.Item key="9">option10</Menu.Item>
|
|
|
- <Menu.Item key="10">option11</Menu.Item>
|
|
|
- <Menu.Item key="11">option12</Menu.Item>
|
|
|
- </SubMenu>
|
|
|
- </Menu>
|
|
|
- </Sider>
|
|
|
+ if (data.user_by_id === null)
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <span style={{marginRight: '10px'}}>no such person</span>
|
|
|
+ <Button onClick={() => {
|
|
|
+ this.setState({hasLogin: false})
|
|
|
+ }}>relogin</Button>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ else {
|
|
|
+ // 不可使用 this.setState, 会报错。
|
|
|
+ // Warning: Cannot update during an existing state transition (such as within `render`).
|
|
|
+ // Render methods should be a pure function of props and state.
|
|
|
+ this.state.user = {
|
|
|
+ avatar: data.user_by_id.avatar,
|
|
|
+ nickname: data.user_by_id.nickname
|
|
|
+ };
|
|
|
+ console.log(data);
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <span style={{marginRight: '10px'}}>welcome, {data.user_by_id.nickname}</span>
|
|
|
+ <Button onClick={() => {
|
|
|
+ this.setState({hasLogin: false})
|
|
|
+ }}>exit</Button>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ )
|
|
|
+ };
|
|
|
|
|
|
- <Layout style={{marginTop: '64px' }}>
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <Layout style={{ minHeight: '100vh' }}>
|
|
|
+ <Header className="header" style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
|
|
|
+ <div className="logo" />
|
|
|
<Menu
|
|
|
+ theme="dark"
|
|
|
mode="horizontal"
|
|
|
- defaultSelectedKeys={['1']}
|
|
|
- style={{padding: '0 24px',position: 'fixed', width: '100%', zIndex: '1' }}
|
|
|
- onClick={this.switchPage}
|
|
|
- selectedKeys={[this.state.current]}
|
|
|
+ defaultSelectedKeys={['Cloud Function']}
|
|
|
+ style={{ lineHeight: '64px' }}
|
|
|
+ onClick={(e)=>this.switchMenu('menuLevel1',e)}
|
|
|
>
|
|
|
- <Menu.Item key="schema">schema</Menu.Item>
|
|
|
- <Menu.Item key="deploy">deploy</Menu.Item>
|
|
|
- <Menu.Item key="graphql">graphql</Menu.Item>
|
|
|
- <Menu.Item key="graphiql">graphiql</Menu.Item>
|
|
|
- <Menu.Item key="metabase">metabase</Menu.Item>
|
|
|
- <Menu.Item key="notification">notification</Menu.Item>
|
|
|
+ <Menu.Item key="cloud-function">Cloud Function</Menu.Item>
|
|
|
+ <Menu.Item key="data-storage">Data Storage</Menu.Item>
|
|
|
+ <Menu.Item key="data-analysis">Data Analysis</Menu.Item>
|
|
|
+ <Menu.Item key="monitor-notification">Monitor Notification</Menu.Item>
|
|
|
</Menu>
|
|
|
+ <div className='login'>
|
|
|
+ {
|
|
|
+ this.state.hasLogin ?
|
|
|
+ this.login(this.state.userID)
|
|
|
+ :
|
|
|
+ <div>
|
|
|
+ <span style={{marginRight: 20}}>login:</span>
|
|
|
+ <Input
|
|
|
+ placeholder="id, eg: 'xy_1'"
|
|
|
+ onChange={(e) => {
|
|
|
+ // antd 获取不到 target，百度来的下面这句代码
|
|
|
+ e.persist();
|
|
|
+ this.setState({userID: e.target.value});
|
|
|
+ }}
|
|
|
+ onPressEnter={() => {
|
|
|
+ this.setState({hasLogin: true})
|
|
|
+ }}
|
|
|
+ style={{width: 200}}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </Header>
|
|
|
|
|
|
- <Layout style={{ padding: '24px 24px'}}>
|
|
|
- {/*<Sider width={200} style={{ background: '#fff' }}>*/}
|
|
|
- {/*<Menu*/}
|
|
|
- {/*mode="inline"*/}
|
|
|
- {/*defaultSelectedKeys={['1']}*/}
|
|
|
- {/*defaultOpenKeys={['sub1']}*/}
|
|
|
- {/*style={{ height: '100%' }}*/}
|
|
|
- {/*>*/}
|
|
|
+ <Layout>
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{ background: '#fff',marginTop:'64px'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.state.collapsed}
|
|
|
+ onCollapse={this.onCollapse}
|
|
|
+ >
|
|
|
+ <Menu
|
|
|
+ theme="dark"
|
|
|
+ mode="inline"
|
|
|
+ defaultSelectedKeys={['1']}
|
|
|
+ defaultOpenKeys={['sub1']}
|
|
|
+ onClick={(e)=>this.switchMenu('sideBar',e)}
|
|
|
+ selectedKeys={[this.state.sideBar]}
|
|
|
+ style={{ borderRight: 0,overflow: 'auto',
|
|
|
+ height: '100vh',
|
|
|
+ left: '0',
|
|
|
+ width: '200px',
|
|
|
+ position: 'fixed'}}
|
|
|
+ >
|
|
|
+ <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone" /><span>Trial Case</span></span>}>
|
|
|
+ <Menu.Item key="1">e-commerce</Menu.Item>
|
|
|
+ <Menu.Item key="2">keep accounts</Menu.Item>
|
|
|
+ <Menu.Item key="3">appointment</Menu.Item>
|
|
|
+ </SubMenu>
|
|
|
+ {(() => {
|
|
|
+ switch (this.state.menuLevel1) {
|
|
|
+ case 'cloud-function':
|
|
|
+ return (
|
|
|
+ <SubMenu
|
|
|
+ key="cloud-function"
|
|
|
+ title={<span><Icon type="cloud" theme="twoTone" /><span>Cloud Function</span></span>}>
|
|
|
+ <Menu.Item key="wechat-service">wechat-service</Menu.Item>
|
|
|
+ <Menu.Item key="graphql-service">graphql-service</Menu.Item>
|
|
|
+ <Menu.Item key="quantization-service">quantization-service</Menu.Item>
|
|
|
+ </SubMenu>
|
|
|
+ );
|
|
|
+ case 'data-storage':
|
|
|
+ return (
|
|
|
+ <SubMenu
|
|
|
+ key="data-storage"
|
|
|
+ title={<span><Icon type="database" theme="twoTone" /><span>Data Storage</span></span>}>
|
|
|
+ <Menu.Item key="snbl-mongo">snbl-mongo</Menu.Item>
|
|
|
+ </SubMenu>
|
|
|
+ );
|
|
|
+ case 'data-analysis':
|
|
|
+ return (
|
|
|
+ <SubMenu
|
|
|
+ key="data-analysis"
|
|
|
+ title={<span><Icon type="fund" theme="twoTone" /><span>data Analysis</span></span>}>
|
|
|
+ <Menu.Item key="metabase">metabase</Menu.Item>
|
|
|
+ </SubMenu>
|
|
|
+ );
|
|
|
+ case 'monitor-notification':
|
|
|
+ return (
|
|
|
+ <SubMenu
|
|
|
+ key="monitor-notification"
|
|
|
+ title={<span><Icon type="alert" theme="twoTone" /><span>Monitor Notification</span></span>}>
|
|
|
+ <Menu.Item key="monitor">monitor</Menu.Item>
|
|
|
+ <Menu.Item key="graphql-events">graphql-events</Menu.Item>
|
|
|
+ <Menu.Item key="stock-signal">stock-signal</Menu.Item>
|
|
|
+ </SubMenu>
|
|
|
+ );
|
|
|
+ default:
|
|
|
+ return (
|
|
|
+ <SubMenu
|
|
|
+ key="cloud-function"
|
|
|
+ title={<span><Icon type="cloud" theme="twoTone" /><span>Cloud Function</span></span>}>
|
|
|
+ <Menu.Item key="wechat-service">wechat-service</Menu.Item>
|
|
|
+ <Menu.Item key="graphql-service">graphql-service</Menu.Item>
|
|
|
+ <Menu.Item key="quantization-service">quantization-service</Menu.Item>
|
|
|
+ </SubMenu>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })()}
|
|
|
+ <SubMenu key="my-create" title={<span><Icon type="user" theme="outlined" /><span>My Create</span></span>}>
|
|
|
+ <Menu.Item key="8">option9</Menu.Item>
|
|
|
+ <Menu.Item key="9">option10</Menu.Item>
|
|
|
+ <Menu.Item key="10">option11</Menu.Item>
|
|
|
+ <Menu.Item key="11">option12</Menu.Item>
|
|
|
+ </SubMenu>
|
|
|
+ </Menu>
|
|
|
+ </Sider>
|
|
|
+
|
|
|
+ <Layout style={{marginTop: '64px' }}>
|
|
|
+ <Menu
|
|
|
+ mode="horizontal"
|
|
|
+ defaultSelectedKeys={['1']}
|
|
|
+ style={{padding: '0 24px',position: 'fixed', width: '100%', zIndex: '1' }}
|
|
|
+ onClick={this.switchPage}
|
|
|
+ selectedKeys={[this.state.current]}
|
|
|
+ >
|
|
|
+ <Menu.Item key="schema">schema</Menu.Item>
|
|
|
+ <Menu.Item key="deploy">deploy</Menu.Item>
|
|
|
+ <Menu.Item key="graphql">graphql</Menu.Item>
|
|
|
+ <Menu.Item key="graphiql">graphiql</Menu.Item>
|
|
|
+ <Menu.Item key="metabase">metabase</Menu.Item>
|
|
|
+ <Menu.Item key="notification">notification</Menu.Item>
|
|
|
+ </Menu>
|
|
|
+
|
|
|
+ <Layout style={{ padding: '24px', zIndex: '0'}}>
|
|
|
+ {/*<Sider width={200} style={{ background: '#fff' }}>*/}
|
|
|
+ {/*<Menu*/}
|
|
|
+ {/*mode="inline"*/}
|
|
|
+ {/*defaultSelectedKeys={['1']}*/}
|
|
|
+ {/*defaultOpenKeys={['sub1']}*/}
|
|
|
+ {/*style={{ height: '100%' }}*/}
|
|
|
+ {/*>*/}
|
|
|
{/*<Menu.Item key="1">Query</Menu.Item>*/}
|
|
|
{/*<Menu.Item key="2">Mutation</Menu.Item>*/}
|
|
|
- {/*</Menu>*/}
|
|
|
- {/*</Sider>*/}
|
|
|
- <Content style={{ padding: '24px 24px', minHeight: 280, background: '#fff',marginTop: '48px' }}>
|
|
|
- <div>
|
|
|
- {(() => {
|
|
|
- switch (this.state.current) {
|
|
|
- case 'schema':
|
|
|
- return <Schema userID={this.state.userID}/>;
|
|
|
- case 'deploy':
|
|
|
- return <Deploy />;
|
|
|
- case 'graphiql':
|
|
|
- return <Graphql />;
|
|
|
- default:
|
|
|
- return <Graphql />
|
|
|
- }
|
|
|
- })()}
|
|
|
- </div>
|
|
|
- </Content>
|
|
|
- </Layout>
|
|
|
+ {/*</Menu>*/}
|
|
|
+ {/*</Sider>*/}
|
|
|
+ <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px' }}>
|
|
|
+ <div>
|
|
|
+ {(() => {
|
|
|
+ switch (this.state.current) {
|
|
|
+ case 'schema':
|
|
|
+ return <Schema userID={this.state.userID}/>;
|
|
|
+ case 'deploy':
|
|
|
+ return <Deploy />;
|
|
|
+ case 'graphiql':
|
|
|
+ return <Graphql />;
|
|
|
+ default:
|
|
|
+ return <Graphql />
|
|
|
+ }
|
|
|
+ })()}
|
|
|
+ </div>
|
|
|
+ </Content>
|
|
|
+ </Layout>
|
|
|
|
|
|
+ </Layout>
|
|
|
+ </Layout>
|
|
|
</Layout>
|
|
|
- </Layout>
|
|
|
- </Layout>
|
|
|
- );
|
|
|
- }
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export default App;
|
Csy817