Skip to content

Commit

Permalink
[feature](ui) add profile download button in the list page (#22409)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffreys-cat @xiaokang
jeffreys-cat authored and xiaokang committed Jul 31, 2023
1 parent e5359ba commit 0f338a8
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 59 deletions.
51 changes: 51 additions & 0 deletions ui/prettier.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* 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.
*/

/** @type {import('prettier').Config} */
module.exports = {
endOfLine: "lf",
semi: true,
singleQuote: true,
tabWidth: 4,
trailingComma: "es5",
importOrder: [
"^Licensed to the Apache Software Foundation (ASF)",
"^(react/(.*)$)|^(react$)",
"^(next/(.*)$)|^(next$)",
"<THIRD_PARTY_MODULES>",
"",
"^types$",
"^@/types/(.*)$",
"^@/config/(.*)$",
"^@/lib/(.*)$",
"^@/hooks/(.*)$",
"^@/components/ui/(.*)$",
"^@/components/(.*)$",
"^@/styles/(.*)$",
"^@/app/(.*)$",
"",
"^[./]",
],
importOrderSeparation: false,
importOrderSortSpecifiers: true,
importOrderBuiltinModulesToTop: true,
importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
importOrderMergeDuplicateImports: true,
importOrderCombineTypeAndValueImports: true,
}
3 changes: 2 additions & 1 deletion ui/public/locales/en-us.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,6 @@
"executionTime": "Execution Time",
"search":"Search",
"executionFailed":"Execution failed",
"loading":"loading"
"loading":"loading",
"Download": "Download"
}
3 changes: 2 additions & 1 deletion ui/public/locales/zh-cn.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,6 @@
"executionTime": "执行时间",
"search":"查询",
"executionFailed": "执行失败",
"loading":"加载中"
"loading":"加载中",
"Download": "下载"
}
182 changes: 125 additions & 57 deletions ui/src/pages/query-profile/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,45 +17,94 @@
* under the License.
*/

import React, {useEffect, useRef, useState} from 'react';
import {Button, Col, Row, Typography, Space} from 'antd';
import {queryProfile} from 'Src/api/api';
import React, { useEffect, useRef, useState } from 'react';
import { Button, Col, Row, Typography, Space } from 'antd';
import { queryProfile } from 'Src/api/api';
import Table from 'Src/components/table';
import {useHistory} from 'react-router-dom';
import {Result} from '@src/interfaces/http.interface';
import {replaceToTxt} from 'Src/utils/utils';
import { useHistory } from 'react-router-dom';
import { Result } from '@src/interfaces/http.interface';
import { replaceToTxt } from 'Src/utils/utils';
import { useTranslation } from 'react-i18next';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const {Text, Title} = Typography;
const { Text, Title } = Typography;
export default function QueryProfile(params: any) {
// const [parentUrl, setParentUrl] = useState('');
const container = useRef<HTMLDivElement>(null);
const [allTableData, setAllTableData] = useState({column_names: [], rows: []});
let { t } = useTranslation();
const [allTableData, setAllTableData] = useState({
column_names: [],
rows: [],
});
const [profile, setProfile] = useState<any>();
const history = useHistory();
const doQueryProfile = function (ac?: AbortController) {
const param = {
path: getLastPath(),
signal: ac?.signal
signal: ac?.signal,
};
queryProfile(param).then((res: Result<any>) => {
if (res && res.msg === 'success') {
if (!res.data.column_names) {
setProfile(res.data);
if (container.current !== null) {
container.current.innerHTML = res.data;
queryProfile(param)
.then((res: Result<any>) => {
if (res && res.msg === 'success') {
if (!res.data.column_names) {
setProfile(res.data);
if (container.current !== null) {
container.current.innerHTML = res.data;
}
} else {
setProfile('');
res.data.column_names.push('Action');
res.data.rows = res.data.rows.map((row) => {
row['Sql Statement'] = (
<div style={{ maxWidth: 700 }}>
<SyntaxHighlighter
language="sql"
style={docco}
>
{row['Sql Statement']}
</SyntaxHighlighter>
</div>
);
row.Action = (
<Button
size="small"
onClick={() => {
queryProfile<any>({
path: row['Profile ID'],
}).then((profileDetailRes) => {
if (
profileDetailRes &&
profileDetailRes.msg ===
'success'
) {
if (
!profileDetailRes.data
.column_names
) {
download(
profileDetailRes.data
);
}
}
});
}}
>
{t('Download')}
</Button>
);
return row;
});
setAllTableData(res.data);
}
} else {
setProfile('');
setAllTableData(res.data);
setAllTableData({
column_names: [],
rows: [],
});
}
} else {
setAllTableData({
column_names: [],
rows: [],
});
}
}).catch(err => {
});
})
.catch((err) => {});
};
useEffect(() => {
const ac = new AbortController();
Expand All @@ -79,11 +128,11 @@ export default function QueryProfile(params: any) {
function download(profile: string) {
const profileTxt = replaceToTxt(profile);
const blob = new Blob([profileTxt], {
type: "text/plain",
type: 'text/plain',
});
const tagA = document.createElement("a");
const tagA = document.createElement('a');
tagA.download = `profile_${new Date().valueOf()}.txt`;
tagA.style.display = "none";
tagA.style.display = 'none';
tagA.href = URL.createObjectURL(blob);
document.body.appendChild(tagA);
tagA.click();
Expand All @@ -92,7 +141,7 @@ export default function QueryProfile(params: any) {
}
function copyToClipboard(profile: string) {
const profileTxt = replaceToTxt(profile);
const textarea = document.createElement("textarea");
const textarea = document.createElement('textarea');
textarea.value = profileTxt;
document.body.appendChild(textarea);
textarea.select();
Expand All @@ -101,38 +150,57 @@ export default function QueryProfile(params: any) {
}

return (
<Typography style={{padding: '30px'}}>
<Typography style={{ padding: '30px' }}>
<Title>Finished Queries</Title>

<Row style={{paddingBottom: '15px'}}>
<Col span={12}><Text strong={true}>This table lists the latest 100 queries</Text></Col>
<Col span={12} style={{textAlign: 'right'}}>
{profile ? <Space>
<Button type="primary" onClick={goPrev}>back</Button>
<Button onClick={() => {
download(profile)
}}>download</Button>
<Button onClick={() => {
copyToClipboard(profile)
}}>copy profile</Button>
</Space> : ''}
<Row style={{ paddingBottom: '15px' }}>
<Col span={12}>
<Text strong={true}>
This table lists the latest 100 queries
</Text>
</Col>
<Col span={12} style={{ textAlign: 'right' }}>
{profile ? (
<Space>
<Button type="primary" onClick={goPrev}>
Back
</Button>
<Button
onClick={() => {
download(profile);
}}
>
Download
</Button>
<Button
onClick={() => {
copyToClipboard(profile);
}}
>
Copy Profile
</Button>
</Space>
) : (
''
)}
</Col>
</Row>
{
profile
? <div ref={container} style={{background: '#f9f9f9', padding: '20px'}}>
{/* {profile} */}
</div>
: <Table
rowKey={(record) => record['Query ID']}
isSort={true}
isFilter={true}
isInner={'/QueryProfile'}
allTableData={allTableData}
/>
}

{profile ? (
<div
ref={container}
style={{ background: '#f9f9f9', padding: '20px' }}
>
{/* {profile} */}
</div>
) : (
<Table
rowKey={(record) => record['Profile ID']}
isSort={true}
isFilter={true}
isInner={'/QueryProfile'}
allTableData={allTableData}
/>
)}
</Typography>
);
}

0 comments on commit 0f338a8

Please sign in to comment.