Skip to content

Commit da8c2a4

Browse files
hai-tianYangyang96
hai-tian
and
Yangyang96
authored
perf: runs logs pretty (#1385)
* perf: runs logs pretty * fix: module form URL field auto-filling --------- Co-authored-by: Yang Yang <[email protected]>
1 parent f9275bb commit da8c2a4

File tree

13 files changed

+455
-140
lines changed

13 files changed

+455
-140
lines changed

‎ui/src/components/kusionTabs/index.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react'
2+
import { CloseOutlined, PlusOutlined } from '@ant-design/icons'
3+
import classNames from 'classnames'
4+
import { Tooltip } from 'antd'
5+
6+
import styles from './styles.module.less'
7+
8+
export const KusionTabs = ({
9+
items,
10+
addIsDiasble,
11+
activeKey,
12+
handleClickItem,
13+
onEdit,
14+
disabledAdd,
15+
}) => {
16+
function handleActionIcon(event, id) {
17+
event.preventDefault()
18+
event.stopPropagation()
19+
onEdit('edit', id)
20+
}
21+
function handleAdd() {
22+
if (disabledAdd) return
23+
onEdit('add')
24+
}
25+
function handleChangeTab(key) {
26+
if (activeKey === key) return
27+
handleClickItem(key)
28+
}
29+
return (
30+
<div className={styles.tabs_wrapper}>
31+
<div className={styles.tabs_container}>
32+
<div className={styles.tabs}>
33+
{items?.map(item => {
34+
return (
35+
<div
36+
key={item?.id}
37+
className={classNames(styles.tab, {
38+
[styles.active_tab]: item?.id === activeKey,
39+
})}
40+
onClick={() => handleChangeTab(item?.id)}
41+
>
42+
<div className={styles.label}>{item?.label}</div>
43+
<div
44+
className={styles.edit_icon}
45+
onClick={event => handleActionIcon(event, item?.id)}
46+
>
47+
<CloseOutlined />
48+
</div>
49+
</div>
50+
)
51+
})}
52+
</div>
53+
<div className={styles.add_box} onClick={handleAdd}>
54+
<PlusOutlined
55+
style={{ fontSize: 14, color: '#fff', marginRight: 10 }}
56+
/>New Stack
57+
</div>
58+
</div>
59+
</div>
60+
)
61+
}

‎ui/src/components/kusionTabs/styles.module.less

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.tabs_wrapper {
2+
width: 100%;
3+
margin-bottom: 10px;
4+
5+
.tabs_container {
6+
display: flex;
7+
align-items: center;
8+
overflow: auto;
9+
10+
.tabs {
11+
display: flex;
12+
13+
.tab {
14+
display: flex;
15+
padding: 10px 16px;
16+
margin-right: 2px;
17+
font-size: 14px;
18+
font-weight: 500;
19+
cursor: pointer;
20+
background-color: rgb(0 0 0 / 2%);
21+
color: #646566;
22+
border: 1px solid #f1f1f1;
23+
border-radius: 8px 8px 0 0;
24+
25+
&.active_tab {
26+
z-index: 1000;
27+
color: #1778ff;
28+
background: #1677ff14;
29+
border: 1px solid #f1f1f1;
30+
}
31+
32+
.edit_icon {
33+
padding: 0 6px;
34+
margin-right: -4px;
35+
margin-left: 8px;
36+
font-size: 14px;
37+
color: #8a8a8a;
38+
39+
&:hover {
40+
color: #f14c4c;
41+
transform: scale(1.05);
42+
43+
:global(.anticon) {
44+
transform: rotate(180deg) scale(1.1);
45+
}
46+
}
47+
}
48+
}
49+
}
50+
51+
.add_box {
52+
background: #1778ff;
53+
color: #fff;
54+
padding: 9px 16px 10px;
55+
cursor: pointer;
56+
border: 1px solid #1778ff;
57+
border-radius: 8px 8px 0 0;
58+
font-size: 14px;
59+
}
60+
}
61+
62+
.tabs_container::-webkit-scrollbar {
63+
display: none;
64+
}
65+
}

‎ui/src/pages/modules/component/moduleForm/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const ModuleForm = ({
2323
form.setFieldsValue({
2424
...formData,
2525
url: `${url?.Scheme}://${url?.Host}${url?.Path}`,
26-
doc: `${docUrl?.Scheme}://${docUrl?.Host}${docUrl?.Path}`,
26+
doc: (!docUrl?.Scheme && (!docUrl?.Host && !docUrl?.Path)) ? '' : `${docUrl?.Scheme}://${docUrl?.Host}${docUrl?.Path}`,
2727
})
2828
}
2929
}, [formData, form])

‎ui/src/pages/modules/index.tsx

+56-23
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React, { useEffect, useRef, useState } from 'react'
2+
import queryString from 'query-string'
3+
import { useLocation, useNavigate } from 'react-router-dom'
24
import { Button, Form, Input, message, Popconfirm, Space, Table, Select } from 'antd'
35
import type { TableColumnsType } from 'antd';
46
import { PlusOutlined } from '@ant-design/icons'
@@ -11,18 +13,34 @@ import styles from './styles.module.less'
1113

1214

1315
const ModulePage = () => {
16+
const navigate = useNavigate();
17+
const location = useLocation();
1418
const [form] = Form.useForm();
1519
const [open, setOpen] = useState(false)
1620
const [actionType, setActionType] = useState('ADD')
1721
const [formData, setFormData] = useState()
22+
const { pageSize = 10, page = 1, total = 0, moduleName } = queryString.parse(location?.search);
1823
const [searchParams, setSearchParams] = useState({
19-
pageSize: 10,
20-
page: 1,
21-
query: undefined,
22-
total: undefined,
23-
})
24-
24+
pageSize,
25+
page,
26+
query: {
27+
moduleName
28+
},
29+
total,
30+
});
2531
const [dataSource, setDataSource] = useState([])
32+
const searchParamsRef = useRef<any>();
33+
34+
useEffect(() => {
35+
const newParams = queryString.stringify({
36+
moduleName,
37+
...(searchParamsRef.current?.query || {}),
38+
page: searchParamsRef.current?.page,
39+
pageSize: searchParamsRef.current?.pageSize,
40+
})
41+
navigate(`?${newParams}`)
42+
// eslint-disable-next-line react-hooks/exhaustive-deps
43+
}, [searchParams, navigate])
2644

2745
async function getModuleList(params) {
2846
try {
@@ -35,12 +53,14 @@ const ModulePage = () => {
3553
});
3654
if (response?.data?.success) {
3755
setDataSource(response?.data?.data?.modules);
38-
setSearchParams({
56+
const newParams = {
3957
query: params?.query,
4058
pageSize: response?.data?.data?.pageSize,
4159
page: response?.data?.data?.currentPage,
4260
total: response?.data?.data?.total,
43-
})
61+
}
62+
setSearchParams(newParams)
63+
searchParamsRef.current = newParams;
4464
} else {
4565
message.error(response?.data?.message)
4666
}
@@ -50,15 +70,20 @@ const ModulePage = () => {
5070
}
5171

5272
useEffect(() => {
53-
getModuleList({})
73+
getModuleList(searchParams)
74+
// eslint-disable-next-line react-hooks/exhaustive-deps
5475
}, [])
5576

5677
function handleReset() {
5778
form.resetFields();
58-
setSearchParams({
79+
const newParams = {
5980
...searchParams,
60-
query: undefined
61-
})
81+
query: {
82+
moduleName: undefined
83+
}
84+
}
85+
setSearchParams(newParams)
86+
searchParamsRef.current = newParams;
6287
getModuleList({
6388
page: 1,
6489
pageSize: 10,
@@ -67,10 +92,12 @@ const ModulePage = () => {
6792
}
6893
function handleSearch() {
6994
const values = form.getFieldsValue()
70-
setSearchParams({
95+
const newParams = {
7196
...searchParams,
7297
query: values
73-
})
98+
}
99+
setSearchParams(newParams)
100+
searchParamsRef.current = newParams;
74101
getModuleList({
75102
page: 1,
76103
pageSize: 10,
@@ -114,15 +141,15 @@ const ModulePage = () => {
114141
{
115142
title: 'Registry',
116143
dataIndex: 'registry',
117-
144+
118145
render: (_, record) => {
119146
return `${record?.url?.Scheme}://${record?.url?.Host}${record?.url?.Path}`;
120147
}
121148
},
122149
{
123150
title: 'Description',
124151
dataIndex: 'description',
125-
152+
126153
render: (desc) => {
127154
return <DescriptionWithTooltip desc={desc} width={400} />
128155
}
@@ -135,7 +162,7 @@ const ModulePage = () => {
135162
render: (_, record) => {
136163
return (
137164
<Space>
138-
{record?.doc?.Host && record?.doc?.Path ? (
165+
{record?.doc?.Host ? (
139166
<Button style={{ padding: '0px' }} type='link' href={`${record?.doc?.Scheme}://${record?.doc?.Host}${record?.doc?.Path}`} target='_blank'>doc</Button>
140167
) : (
141168
<Button style={{ padding: '0px' }} type='link' disabled>doc</Button>
@@ -159,6 +186,12 @@ const ModulePage = () => {
159186
]
160187

161188

189+
useEffect(() => {
190+
form.setFieldsValue({
191+
moduleName: searchParams?.query?.moduleName
192+
})
193+
}, [searchParams?.query, form])
194+
162195

163196
async function handleSubmit(values, callback) {
164197
let response: any
@@ -190,7 +223,7 @@ const ModulePage = () => {
190223
setOpen(false)
191224
}
192225

193-
function handleChangePage(page: number, pageSize: number) {
226+
function handleChangePage(page: number, pageSize: any) {
194227
getModuleList({
195228
...searchParams,
196229
page,
@@ -239,9 +272,9 @@ const ModulePage = () => {
239272
scroll={{ x: 1300 }}
240273
dataSource={dataSource}
241274
pagination={{
242-
total: searchParams?.total,
243-
current: searchParams?.page,
244-
pageSize: searchParams?.pageSize,
275+
total: Number(searchParams?.total),
276+
current: Number(searchParams?.page),
277+
pageSize: Number(searchParams?.pageSize),
245278
showTotal: (total, range) => (
246279
<div style={{
247280
fontSize: '12px',
@@ -254,7 +287,7 @@ const ModulePage = () => {
254287
value={searchParams?.pageSize}
255288
size="small"
256289
style={{
257-
width: 55,
290+
width: 60,
258291
margin: '0 4px',
259292
fontSize: '12px'
260293
}}

‎ui/src/pages/projects/components/runs/generateDetail/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const GenerateDetail = ({ open, currentRecord, handleClose }) => {
1818

1919
useEffect(() => {
2020
if (logRef && logRef.current) {
21+
console.log(currentRecord?.logs?.includes('\n'), "======>>")
2122
const logHtml = ansi_up.ansi_to_html(currentRecord?.logs);
2223
logRef.current.innerHTML = logHtml;
2324
}

0 commit comments

Comments
 (0)