diff --git a/ui/src/pages/layout/index.tsx b/ui/src/pages/layout/index.tsx index 0ea4ba6257a063..5feeb45a080494 100644 --- a/ui/src/pages/layout/index.tsx +++ b/ui/src/pages/layout/index.tsx @@ -6,9 +6,9 @@ * 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 @@ -16,23 +16,23 @@ * specific language governing permissions and limitations * under the License. */ - + /** * @file test cron * @author lpx * @since 2020/08/19 */ -import React, {useState} from 'react'; -import {Layout, Menu, Dropdown, notification, Button} from 'antd'; -import { CaretDownOutlined, LogoutOutlined} from '@ant-design/icons'; -import {renderRoutes} from 'react-router-config'; -import {useHistory} from 'react-router-dom'; -import {useTranslation} from 'react-i18next'; +import React, { useState } from 'react'; +import { Layout, Menu, Dropdown, notification, Button } from 'antd'; +import { CaretDownOutlined, LogoutOutlined } from '@ant-design/icons'; +import { renderRoutes } from 'react-router-config'; +import { useHistory } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; import routes from 'Src/router'; -import {logOut} from 'Src/api/api'; +import { logOut } from 'Src/api/api'; import './index.css'; import styles from './index.less'; -const {Header, Content, Footer} = Layout; +const { Header, Content, Footer } = Layout; function Layouts(props: any) { let { t } = useTranslation(); const [route, setRoute] = useState(props.route.routes); @@ -48,7 +48,7 @@ function Layouts(props: any) { if (location.pathname === e.key) { location.reload(); } - if(location.pathname.includes('Playground')){ + if (location.pathname.includes('Playground')) { history.push(e.key); location.reload(); } @@ -59,52 +59,74 @@ function Layouts(props: any) { } function clearAllCookie() { var keys = document.cookie.match(/[^ =;]+(?=\=)/g); - if(keys) { - for(var i = keys.length; i--;) - document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString() + if (keys) { + for (var i = keys.length; i--; ) + document.cookie = + keys[i] + '=0;expires=' + new Date(0).toUTCString(); } } - function onLogout(){ - logOut().then((res)=>{ - localStorage.setItem('username',''); + function onLogout() { + logOut().then((res) => { + localStorage.removeItem('username'); clearAllCookie(); - notification.success({message: t('exitSuccessfully')}) + notification.success({ message: t('exitSuccessfully') }); history.push('/login'); - }) + }); } - function changeLanguage(){ - if (localStorage.getItem('I18N_LANGUAGE') === 'zh-CN'){ - localStorage.setItem('I18N_LANGUAGE','en'); - location.reload() + function changeLanguage() { + if (localStorage.getItem('I18N_LANGUAGE') === 'zh-CN') { + localStorage.setItem('I18N_LANGUAGE', 'en'); + location.reload(); } else { - localStorage.setItem('I18N_LANGUAGE','zh-CN'); - location.reload() + localStorage.setItem('I18N_LANGUAGE', 'zh-CN'); + location.reload(); } } const menu = ( - + {t('signOut')} ); return ( -
-
{history.replace('/home');setCurrent('')}}>
- - +
+
{ + history.replace('/home'); + setCurrent(''); + }} + >
+ + {/* */} - {localStorage.getItem('username')} + {localStorage.getItem('username')}{' '} + - - {routes?.routes[1]?.routes?.map(item => { - if (item.title !== 'Login'&&item.title !== 'Home') { + + {routes?.routes[1]?.routes?.map((item) => { + if (item.title !== 'Login' && item.title !== 'Home') { return ( {item.title} @@ -115,19 +137,22 @@ function Layouts(props: any) {
- -
+ +
{renderRoutes(route)}
{/*
xxx
*/} - ); } -export default Layouts;/** +export default Layouts; +/** * 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 @@ -135,9 +160,9 @@ export default Layouts;/** * 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 @@ -145,4 +170,3 @@ export default Layouts;/** * specific language governing permissions and limitations * under the License. */ - diff --git a/ui/src/pages/playground/tree/index.tsx b/ui/src/pages/playground/tree/index.tsx index e3f56f98e793c6..72ccd9852dcedb 100644 --- a/ui/src/pages/playground/tree/index.tsx +++ b/ui/src/pages/playground/tree/index.tsx @@ -16,15 +16,15 @@ * specific language governing permissions and limitations * under the License. */ -import React, {useEffect, useState} from 'react'; -import {Input, Spin, Tree} from 'antd'; -import {HddOutlined, ReloadOutlined, TableOutlined} from '@ant-design/icons'; -import {AdHocAPI} from 'Src/api/api'; -import {useTranslation} from 'react-i18next'; -import {AdhocContentRouteKeyEnum,} from '../adhoc.data'; +import React, { useEffect, useState } from 'react'; +import { Input, Spin, Tree } from 'antd'; +import { HddOutlined, ReloadOutlined, TableOutlined } from '@ant-design/icons'; +import { AdHocAPI } from 'Src/api/api'; +import { useTranslation } from 'react-i18next'; +import { AdhocContentRouteKeyEnum } from '../adhoc.data'; import './index.css'; -const {Search} = Input; +const { Search } = Input; interface DataNode { title: string; @@ -36,7 +36,7 @@ interface DataNode { const initTreeDate: DataNode[] = []; function updateTreeData(list: DataNode[], key, children) { - return list.map(node => { + return list.map((node) => { if (node.key === key) { return { ...node, @@ -48,7 +48,7 @@ function updateTreeData(list: DataNode[], key, children) { } export function AdHocTree(props: any) { - let {t} = useTranslation(); + let { t } = useTranslation(); const [treeData, setTreeData] = useState(initTreeDate); const [realTree, setRealTree] = useState(initTreeDate); const [loading, setLoading] = useState(true); @@ -62,38 +62,41 @@ export function AdHocTree(props: any) { }, []); function initTreeData(ac?: AbortController) { - AdHocAPI.getDatabaseList({signal: ac?.signal}).then(res => { - if (res.msg === 'success' && Array.isArray(res.data)) { - const num = Math.random() - const treeData = res.data.map((item, index) => { - return { - title: item, - key: `${num}-1-${index}-${item}`, - icon: , - }; - }); - setTreeData(treeData); - getRealTree(treeData); - } - setLoading(false); - }).catch(err => { - }); + AdHocAPI.getDatabaseList({ signal: ac?.signal }) + .then((res) => { + if (res.msg === 'success' && Array.isArray(res.data)) { + const num = Math.random(); + const treeData = res.data.map((item, index) => { + return { + title: item, + keys: [item], + key: `${num}-1-${index}-${item}`, + icon: , + }; + }); + setTreeData(treeData); + getRealTree(treeData); + } + setLoading(false); + }) + .catch((err) => {}); } - function onLoadData({key, children}) { + function onLoadData({ key, children }) { const [, storey, , db_name] = key.split('-'); const param = { db_name, // tbl_name, }; - return AdHocAPI.getDatabaseList(param).then(res => { + return AdHocAPI.getDatabaseList(param).then((res) => { if (res.msg == 'success' && Array.isArray(res.data)) { const children = res.data.map((item, index) => { if (storey === '1') { return { title: item, + keys: [param.db_name, item], key: `2-${index}-${param.db_name}-${item}`, - icon: , + icon: , isLeaf: true, }; } @@ -108,23 +111,24 @@ export function AdHocTree(props: any) { function handleTreeSelect( keys: React.ReactText[], info: any, - path: AdhocContentRouteKeyEnum = AdhocContentRouteKeyEnum.Result, + path: AdhocContentRouteKeyEnum = AdhocContentRouteKeyEnum.Result ) { - if (keys.length > 0) { - props.history.push(`/Playground/${path}/${keys[0].split(':')[1]}`); + console.log(info); + const tablePath = info.node.keys.join('-'); + if (info.node.keys.length > 0) { + props.history.push(`/Playground/${path}/${tablePath}`); } } function onSearch(e) { - const {value} = e.target; - const expandedKeys: any[] = treeData - .map((item, index) => { - if (getParentKey(value, treeData[index].children, index)) { - return item.key - } else { - return null; - } - }) + const { value } = e.target; + const expandedKeys: any[] = treeData.map((item, index) => { + if (getParentKey(value, treeData[index].children, index)) { + return item.key; + } else { + return null; + } + }); setExpandedKeys(expandedKeys); setAutoExpandParent(true); getRealTree(treeData, value); @@ -142,9 +146,11 @@ export function AdHocTree(props: any) { for (let i = 0; i < tree.length; i++) { const node = tree[i]; if (node.title.includes(key)) { - return true + return true; } else { - treeData[idx].children ? treeData[idx].children[i].title = node.title : '' + treeData[idx].children + ? (treeData[idx].children[i].title = node.title) + : ''; } } return false; @@ -154,7 +160,7 @@ export function AdHocTree(props: any) { const realTree = inner(treeData); function inner(treeData) { - return treeData.map(item => { + return treeData.map((item) => { const search = value || ''; const index = item.title.indexOf(search); const beforeStr = item.title.substr(0, index); @@ -162,19 +168,21 @@ export function AdHocTree(props: any) { const title = index > -1 ? ( - {beforeStr} - {search} + {beforeStr} + + {search} + {afterStr} - + ) : ( item.title ); if (item.children) { - return {...item, title, children: inner(item.children)}; + return { ...item, title, children: inner(item.children) }; } return { ...item, - title + title, }; }); } @@ -185,29 +193,35 @@ export function AdHocTree(props: any) { function debounce(fn, wait) { let timer = null; return function () { - let context = this - let args = arguments + let context = this; + let args = arguments; if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function () { - fn.apply(context, args) - }, wait) - } + fn.apply(context, args); + }, wait); + }; } return ( <> - +
} + enterButton={} onSearch={initTreeData} - onChange={onSearch}/> + onChange={onSearch} + />
handleTreeSelect( selectedKeys, info, - AdhocContentRouteKeyEnum.Structure) + AdhocContentRouteKeyEnum.Structure + ) } /> ); - } - diff --git a/ui/src/router/renderRouter.tsx b/ui/src/router/renderRouter.tsx index 58a3c422789eda..f80096dc016a80 100644 --- a/ui/src/router/renderRouter.tsx +++ b/ui/src/router/renderRouter.tsx @@ -6,9 +6,9 @@ * 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 @@ -16,15 +16,15 @@ * specific language governing permissions and limitations * under the License. */ - + import React from 'react'; import { Route, Redirect, Switch } from 'react-router-dom'; -import {getBasePath} from 'Src/utils/utils'; +import { checkLogin, getBasePath } from 'Src/utils/utils'; -let isLogin = document.cookie; +let isLogin = checkLogin(); const renderRoutes = (routes, authPath = '/login') => { let basepath = getBasePath(); - if(routes){ + if (routes) { return ( {routes.map((route, i) => ( @@ -33,28 +33,27 @@ const renderRoutes = (routes, authPath = '/login') => { path={route.path} exact={route.exact} strict={route.strict} - render= { props =>{ - if(props.location.pathname === basepath+'/'){ - return ; + render={(props) => { + if (props.location.pathname === basepath + '/') { + return ; } if (isLogin) { return route.render ? ( - route.render({ ...props, route: route }) - ) : ( - - ) + route.render({ ...props, route: route }) + ) : ( + + ); } else { isLogin = '1'; return ; - }} - } + } + }} /> ))} - ) + ); } - return null -} + return null; +}; export default renderRoutes; - diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts index 770987f2743a40..05b64700c6ff2e 100644 --- a/ui/src/utils/utils.ts +++ b/ui/src/utils/utils.ts @@ -92,4 +92,12 @@ function replaceToTxt(str: string) { return strNoBr; } -export {isSuccess, getDbName, getTimeNow, getBasePath, replaceToTxt}; +function checkLogin() { + const username = localStorage.getItem('username'); + if (username) { + return true; + } + return false; +} + +export {isSuccess, getDbName, getTimeNow, getBasePath, replaceToTxt, checkLogin};