Skip to content
Permalink
Browse files
[feature] Init sql editor (#11)
* [feature] init sql editor
  • Loading branch information
colordove committed Mar 23, 2022
1 parent 4857d60 commit a3245418e2af30f3266941c8e4c199bed7cc443f
Showing 33 changed files with 1,813 additions and 1 deletion.
@@ -19,10 +19,12 @@
"@ant-design/pro-list": "^1.17.7",
"@ant-design/pro-table": "^2.56.7",
"@babel/core": "^7.12.10",
"@monaco-editor/react": "^4.3.1",
"ahooks": "^3.1.10",
"antd": "^4.16.11",
"axios": "^0.24.0",
"babel-loader": "^8.2.2",
"bignumber.js": "^9.0.2",
"buffer": "^6.0.3",
"cross-env": "^7.0.3",
"crypto-browserify": "^3.12.0",
@@ -32,6 +34,7 @@
"highlight.js": "^11.0.1",
"i18next": "^20.4.0",
"i18next-browser-languagedetector": "^6.1.2",
"immer": "^9.0.12",
"js-cookie": "^3.0.1",
"lodash-es": "^4.17.21",
"password-generator": "^2.3.2",
@@ -45,13 +48,15 @@
"react-i18next": "^11.11.4",
"react-router-cache-route": "^1.12.1",
"react-router-dom": "^5.2.0",
"react-spring": "^9.4.4",
"recoil": "^0.5.0",
"stream-browserify": "^3.0.0",
"sweetalert2": "^11.1.9",
"sweetalert2-react-content": "^4.1.1",
"swr": "^0.5.6",
"ttag": "1.7.15",
"typescript": "^4.3.5",
"use-immer": "^0.6.0",
"webpack": "^5.11.0",
"webpack-merge": "^5.7.3"
},
@@ -93,7 +98,7 @@
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.1.1",
"postcss-normalize": "^10.0.0",
"postcss-preset-env": "^6.7.0",
"postcss-preset-env": "^7.4.3",
"prettier": "^2.3.2",
"react-router-config": "^5.1.1",
"style-loader": "^2.0.0",
@@ -37,6 +37,7 @@ import { QueryDetails } from './query/query-details';
import { Cluster } from './cluster/cluster';
import { UserSetting } from './user-setting';
import { useUserInfo } from '@src/hooks/use-userinfo.hooks';
import VisualQuery from './visual-query/visual-query';
export function Container(props: any) {
const [userInfo] = useUserInfo();
const history = useHistory();
@@ -62,6 +63,7 @@ export function Container(props: any) {
<Route path="/query" component={Query} />
<Route path="/details/:queryId" component={QueryDetails} />
<Route path="/user-setting" component={UserSetting} />
<Route path="/visual-query" component={VisualQuery} />
<Redirect to="/cluster" />
</Switch>
</div>
@@ -0,0 +1,28 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

import React, { PropsWithChildren } from 'react';
import ScreenLoading from './screen-loading';

interface LoadingLayoutProps {
loading: boolean;
}

export default function LoadingLayout(props: PropsWithChildren<LoadingLayoutProps>) {
const { loading, children } = props;
return <>{loading ? <ScreenLoading /> : children}</>;
}
@@ -0,0 +1,28 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

import React from 'react';
import { Spin } from 'antd';
import styles from './style.module.less';

export default function ScreenLoading() {
return (
<div className={styles.loadingWrapper}>
<Spin />
</div>
);
}
@@ -0,0 +1,27 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

.loadingWrapper {
position: fixed;
display: flex;
top: 65px;
left: 0;
width: 100%;
height: 80%;
align-items: center;
justify-content: center;
}
@@ -0,0 +1,20 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

.cascaderInput {
width: 100%;
}
@@ -0,0 +1,75 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';
import { Modal, Form, Cascader } from 'antd';
import styles from './index.module.less';
import LoadingLayout from '@src/components/loading-layout';
import { CascaderItem } from '../../types';
import { processCollections } from '../../utils';
import { fetchChildOfCollectionAPI } from '../../visual-query.api';

interface SaveDashboardModalProps {
visible: boolean;
loading?: boolean;
collections: CascaderItem[];
setSaveDashboardModalVisible: (v: boolean) => void;
}

export default function SaveDashboardModal(props: SaveDashboardModalProps) {
const { visible, loading = false, collections: defaultCollections, setSaveDashboardModalVisible } = props;
const [collections, setCollections] = useImmer([...processCollections(defaultCollections)]);

useEffect(() => {
setCollections([...processCollections(defaultCollections)]);
}, [defaultCollections]);

const [form] = Form.useForm();

const handleCancel = () => {
setSaveDashboardModalVisible(false);
};

const loadData = (path: any[]) => {
const currentCollection = path[path.length - 1];
currentCollection.loading = true;
fetchChildOfCollectionAPI({
collectionId: currentCollection.id,
model: 'dashboard',
}).then(res => {
// Todo
});
};

return (
<Modal visible={visible} onCancel={handleCancel} title="把查询添加到仪表盘">
<LoadingLayout loading={loading} wrapperStyle={{ textAlign: 'center' }}>
<Form form={form} autoComplete="off" labelCol={{ span: 5 }} wrapperCol={{ span: 17 }}>
<Form.Item
name="dashboard"
label="仪表盘"
required
rules={[{ required: true, message: '请选择仪表盘' }]}
>
<Cascader options={collections} fieldNames={{ value: 'id' }} loadData={loadData} />
</Form.Item>
</Form>
</LoadingLayout>
</Modal>
);
}

0 comments on commit a324541

Please sign in to comment.