apache · morningman · Nov 5, 2020 · Nov 2, 2020
diff --git a/fe/fe-core/src/main/java/org/apache/doris/httpv2/controller/BaseController.java b/fe/fe-core/src/main/java/org/apache/doris/httpv2/controller/BaseController.java
@@ -106,6 +106,7 @@ protected void addSession(HttpServletRequest request, HttpServletResponse respon
         Cookie cookie = new Cookie(PALO_SESSION_ID, key);
         cookie.setMaxAge(PALO_SESSION_EXPIRED_TIME);
         cookie.setPath("/");
+        cookie.setHttpOnly(true);
         response.addCookie(cookie);
         LOG.debug("add session cookie: {} {}", PALO_SESSION_ID, key);
         HttpAuthManager.getInstance().addSessionValue(key, value);
@@ -170,6 +171,7 @@ public void updateCookieAge(HttpServletRequest request, String cookieName, int a
         for (Cookie cookie : cookies) {
             if (cookie.getName() != null && cookie.getName().equals(cookieName)) {
                 cookie.setMaxAge(age);
+                cookie.setPath("/");
                 response.addCookie(cookie);
                 LOG.debug("get update cookie: {} {}", cookie.getName(), cookie.getValue());
             }

diff --git a/ui/public/locales/en-us.json b/ui/public/locales/en-us.json
@@ -47,5 +47,7 @@
     "tips":"Tips",
     "fileSizeWarning": "File size cannot exceed 100M",
     "selectWarning": "Please select a table",
-    "executionTime": "Execution Time"
+    "executionTime": "Execution Time",
+    "search":"Search",
+    "executionFailed":"Execution failed"
 }
diff --git a/ui/public/locales/zh-cn.json b/ui/public/locales/zh-cn.json
@@ -47,5 +47,7 @@
     "tips": "提示",
     "fileSizeWarning": "文件大小不能超过100m",
     "selectWarning": "请选择表",
-    "executionTime": "执行时间"
+    "executionTime": "执行时间",
+    "search":"查询",
+    "executionFailed": "执行失败"
 }
diff --git a/ui/src/components/table/index.tsx b/ui/src/components/table/index.tsx
@@ -50,7 +50,6 @@ export default function SortFilterTable(props: any) {
                 <FilterFilled/>
             </Popover>:''}
             <Table
-                rowKey={allTableData?.column_names?.[0]}
                 columns={localColumns}
                 dataSource={tableData}
                 scroll={{x:true}}

diff --git a/ui/src/components/table/table.utils.tsx b/ui/src/components/table/table.utils.tsx
@@ -30,18 +30,19 @@ function getLinkItem(text, record, index, isInner, item, hrefColumn, path){
         if (record.__hrefPaths[hrefColumn.indexOf(item)].includes('http')) {
             return <a href={record.__hrefPaths[hrefColumn.indexOf(item)]} target="_blank">{text}</a>;
         }
-        return <Link  to={path+location.search+'/'+text}>{text}</Link>;
+        return <Link  to={path+(location.search?location.search:isInner)+'/'+text}>{text}</Link>;
     }
     return text === '\\N' ? '-' : text;
 }
 export function getColumns(params: string[], isSort: boolean, isInner, hrefColumn, path) {
     if(!params||params.length === 0){return [];}
-    let arr = params.map(item=> {
+    let arr = params.map((item,idx)=> {
         if (isSort) {
             return {
                 title: item,
                 dataIndex: item,
                 className: 'pr-25',
+                key: item+idx,
                 sorter: (a,b)=>sortItems(a, b, item),
                 render:(text, record, index)=>getLinkItem(text,record, index, isInner, item, hrefColumn, path),
             };
@@ -50,6 +51,7 @@ export function getColumns(params: string[], isSort: boolean, isInner, hrefColum
             title: item,
             dataIndex: item,
             className: 'pr-25',
+            key: item+idx,
             render:(text, record, index)=>getLinkItem(text, record, index, isInner, item, hrefColumn, path),
         };
     });

diff --git a/ui/src/pages/layout/index.tsx b/ui/src/pages/layout/index.tsx
@@ -91,7 +91,7 @@ function Layouts(props: any) {
     );
     return (
         <Layout>
-            <Header style={{position: 'fixed', zIndex: 1, width: '100%'}}>
+            <Header style={{position: 'fixed', zIndex: 99, width: '100%'}}>
                 <div className={styles['logo']} onClick={()=>{history.replace('/home');setCurrent('')}}></div>
                 <span className='userSet'>
                     <Button style={{'color':'#000'}} type="text" size='small' onClick={changeLanguage}>{localStorage.getItem('I18N_LANGUAGE') === 'zh-CN' ? 'English' : '中文'}</Button>

diff --git a/ui/src/pages/playground/content/components/data-prev.tsx b/ui/src/pages/playground/content/components/data-prev.tsx
@@ -20,26 +20,68 @@
 import React,{useState,useEffect} from 'react';
 import {AdHocAPI} from 'Src/api/api';
 import {getDbName} from 'Utils/utils';
-import {Row, Empty} from 'antd';
+import {Row, Empty, notification, Table} from 'antd';
 import {FlatBtn} from 'Components/flatbtn';
 import {useTranslation} from 'react-i18next';
 export function DataPrev(props: any) {
     let { t } = useTranslation();
     const {db_name,tbl_name} = getDbName();
     const [tableData,setTableData] = useState([]);
+    const [columns,setColumns] = useState([]);
     function toQuery(): void {
+        if (!tbl_name){
+            notification.error({message: t('selectWarning')});
+            return;
+        }
         AdHocAPI.doQuery({
             db_name,
             body:{stmt:`SELECT * FROM ${db_name}.${tbl_name} LIMIT 10`},
         }).then(res=>{
             if (res && res.msg === 'success') {
-                setTableData(res.data);
+                console.log(getColumns(res.data?.meta),2222)
+                setColumns(getColumns(res.data?.meta))
+                setTableData(getTabledata(res.data));
             }
         })
         .catch(()=>{
             setTableData([]);
         });
     }
+    function getColumns(params: string[]) {
+        console.log(params,2222)
+        if(!params||params.length === 0){return [];}
+
+        let arr = params.map(item=> {
+            return {
+                title: item.name,
+                dataIndex: item.name,
+                key: item.name,
+                width: 150,
+                render:(text, record, index)=>{return text === '\\N' ? '-' : text}
+            };
+        });
+        return arr;
+    }
+    function getTabledata(data){
+        let meta  = data.meta;
+        let source = data.data;
+        let res = [];
+        if(!source||source.length === 0){return [];}
+        let metaArr = meta.map(item=>item.name)
+        for (let i=0;i<source.length;i++) {
+            let node = source[i];
+            if(node.length !== meta.length){
+                return {}
+            }
+            let obj = {}
+            metaArr.map((item,idx)=>{
+                obj[item] = node[idx]
+            })
+            obj['key'] = i
+            res.push(obj)
+        }
+        return res;
+    }
     useEffect(()=>{
         toQuery();
     },[location.pathname]);
@@ -58,42 +100,16 @@ export function DataPrev(props: any) {
                     {t('refresh')}
                 </FlatBtn>
             </Row>
-            <div
-                className="ant-table ant-table-small ant-table-bordered"
-                style={{marginTop: 10}}
-            >
-                {tableData?.meta?.length
-                    ?<div className="ant-table-container" >
-                        <div className='ant-table-content'>
-                            <table style={{width: '100%'}}>
-                                <thead className="ant-table-thead">
-                                    <tr>
-                                        {tableData?.meta?.map(item => (
-                                            <th className="ant-table-cell" key={item.name}>
-                                                {item.name}
-                                            </th>
-                                        ))}
-                                    </tr>
-                                </thead>
-                                <tbody className="ant-table-tbody">
-                                    {tableData.data?.map((item,index) => (
-                                        <tr className="ant-table-row" key={index}>
-                                            {item.map((tdData,index) => (
-                                                <td
-                                                    className="ant-table-cell"
-                                                    key={tdData+index}
-                                                >
-                                                    {tdData == '\\N'?'-':tdData}
-                                                </td>
-                                            ))}
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>}
-            </div>
-        </div>
+            <Table
+                bordered
+                columns={columns}
+                style={{maxWidth:' calc(100vw - 350px)'}}
+                // scroll={{ x:'500', y: '36vh'}}
+                scroll={{ x: 1500, y: 300 }}
+                dataSource={tableData}
+                size="small"
+            />
+           </div>
     );
 }
 

diff --git a/ui/src/pages/playground/content/content-result.tsx b/ui/src/pages/playground/content/content-result.tsx
@@ -123,7 +123,7 @@ export function AdhocContentResult(props) {
                     ) : (
                         <TextWithIcon
                             icon={<CloseCircleFilled/>}
-                            text={"执行失败: "+runningQueryInfo.msg +' '+ runningQueryInfo.data}
+                            text={`${t('executionFailed')}: `+runningQueryInfo.msg +' '+ runningQueryInfo.data}
                             color="red"
                             style={{
                                 marginBottom: 10,
@@ -141,7 +141,7 @@ export function AdhocContentResult(props) {
                         </Row> */}
                         <Row justify="start">
                             <Col span={3}>{t('executionTime')}:</Col>
-                            <Col>{runningQueryInfo.data?.time + ' ms'}</Col>
+                            <Col>{(runningQueryInfo.data?.time?runningQueryInfo.data?.time:0) + ' ms'}</Col>
                         </Row>
                         {/* <Row justify="start">
                             <Col span={3}>{t('endTime')}:</Col>

diff --git a/ui/src/pages/playground/content/content-structure.tsx b/ui/src/pages/playground/content/content-structure.tsx
@@ -86,6 +86,7 @@ export function ContentStructure(props: any) {
                     bordered
                     rowKey='Field'
                     columns={columns}
+                    scroll={{ y: '36vh' }}
                     loading={{
                         spinning: getTableInfoRequest.loading,
                         delay: TABLE_DELAY,

diff --git a/ui/src/pages/playground/content/index.less b/ui/src/pages/playground/content/index.less
@@ -23,6 +23,7 @@ under the License. */
     &-operator {
         margin-top: 10px;
     }
+    width: calc(100vw - 350px);
 }
 
 .adhoc-content-favorite {

diff --git a/ui/src/pages/playground/content/index.tsx b/ui/src/pages/playground/content/index.tsx
@@ -206,7 +206,7 @@ export function AdHocContent(props: any) {
                 <Route
                     path={`${match.path}/${AdhocContentRouteKeyEnum.Structure}/:table`}
                     render={props => (
-                        <div style={{display:'flex',height:'300px'}}>
+                        <div style={{display:'flex',height:'53vh'}}>
                             <div style={{flex:3}}>
                                 <ContentStructure
                                     queryTable={tableName =>

diff --git a/ui/src/pages/playground/page-side/index.less b/ui/src/pages/playground/page-side/index.less
@@ -19,5 +19,5 @@ under the License. */
     flex: 0 0 300px;
     height: 100%;
     background: #fff;
-    min-height: calc(100vh - 60px);
+    min-height: calc(100vh - 64px);
 }
diff --git a/ui/src/pages/playground/page-side/index.tsx b/ui/src/pages/playground/page-side/index.tsx
@@ -34,7 +34,8 @@ export function PageSide(props: any) {
         <div className={styles['side']} >
             <ResizableBox
                 width={sideBoxWidth}
-                height={800}
+                height={Infinity}
+                style={{'minHeight':'calc(100vh - 64px)','overflow':'hidden'}}
                 resizeHandles={['e']}
                 onResizeStart={onResize}
                 minConstraints={[300, 300]}

diff --git a/ui/src/pages/playground/tree/index.css b/ui/src/pages/playground/tree/index.css
@@ -0,0 +1,3 @@
+.site-tree-search-value {
+    color: #f50;
+}