Skip to content

Commit 0ed6d1c

Browse files
ikun-LgCopilot
ikun-Lg
and
Copilot
authored
refactor: 🎨 Optimize UI styles and search functionality (#1379)
* feat: enhance error handling for unauthorized access and improve toast messages * feat: enhance error handling for unauthorized access and improve toast messages * fix: correct syntax error in response interceptor for redirect handling * Update ui-vue3/src/base/http/request.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * feat: add YAML and XML editor components, update index references, and enhance error logging - Introduced new JavaScript files for YAML and XML syntax highlighting and editing capabilities. - Added a new component for updating YAML configurations with a structured editor interface. - Updated the index.html to reference the new JavaScript bundle for improved functionality. - Enhanced the HTTP request module to log errors during redirection on 401 responses for better debugging. * docs: Only supports exact matching; remove the "prefix search" function from the placeholder (background word) * docs: All sorting indicators for lists are initially hidden, including but not limited to the list pages for applications, instances, services, and traffic management * refactor: 🎨 Optimize the styles of some tables and adapt to backend changes * docs: api baseurl --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 4330280 commit 0ed6d1c

File tree

16 files changed

+233
-423
lines changed

16 files changed

+233
-423
lines changed

‎ui-vue3/src/Login.vue‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ function loginHandle() {
4444
updateAuthState(true, userinfo.username)
4545
const { data } = await meshesSearch()
4646
// if mesh is not set or old mesh is expired
47-
if (!meshStore.mesh || !data.some((x: any) => x.name === meshStore.mesh)) {
48-
meshStore.mesh = data[0]?.name
47+
if (!meshStore.mesh || !data.some((x: any) => x.id === meshStore.mesh)) {
48+
meshStore.mesh = data[0]?.id
4949
}
5050
router.replace(redirect)
5151
})
@@ -63,25 +63,14 @@ function loginHandle() {
6363
</a-row>
6464
<a-row>
6565
<a-form layout="vertical" :model="userinfo" ref="login-form-ref">
66-
<a-form-item
67-
class="item"
68-
:label="$t('loginDomain.username')"
69-
name="username"
70-
:rules="[{ required: true }]"
71-
>
66+
<a-form-item class="item" :label="$t('loginDomain.username')" name="username" :rules="[{ required: true }]">
7267
<a-input type="" v-model:value="userinfo.username"></a-input>
7368
</a-form-item>
74-
<a-form-item
75-
class="item"
76-
:label="$t('loginDomain.password')"
77-
name="password"
78-
:rules="[{ required: true }]"
79-
>
69+
<a-form-item class="item" :label="$t('loginDomain.password')" name="password" :rules="[{ required: true }]">
8070
<a-input type="password" v-model:value="userinfo.password"></a-input>
8171
</a-form-item>
8272
<a-form-item class="item" label="">
83-
<a-button @click="loginHandle" size="large" type="primary" class="login-btn"
84-
>{{ $t('loginDomain.login') }}
73+
<a-button @click="loginHandle" size="large" type="primary" class="login-btn">{{ $t('loginDomain.login') }}
8574
</a-button>
8675
</a-form-item>
8776
</a-form>

‎ui-vue3/src/base/i18n/en.ts‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,12 @@ const words: I18nType = {
158158
opened: 'Opened',
159159
paramRoute: 'Param Route'
160160
},
161+
servicesDomain: {
162+
appName: 'Application Name',
163+
instanceCount: 'Instance Count',
164+
deployClusters: 'Deploy Clusters',
165+
registryClusters: 'Registry Clusters'
166+
},
161167
appServiceTimeout: 'Adjusting the timeout for application service provision',
162168
enableAppInstanceLogs: 'Enable access logs for all instances of this application',
163169
appServiceLoadBalance: 'Adjusting the load balancing strategy for application service provision',
@@ -198,6 +204,8 @@ const words: I18nType = {
198204
service: 'Service',
199205
versionGroup: 'Version & Group',
200206
avgQPS: 'last 1min QPS',
207+
provider: 'Provider',
208+
subset: 'Group',
201209
avgRT: 'last 1min RT',
202210
requestTotal: 'last 1min request total',
203211
serviceSearch: 'Search Service',
@@ -368,6 +376,13 @@ const words: I18nType = {
368376
placeholders: {
369377
searchService: 'Search by service name'
370378
},
379+
placeholder: {
380+
searchService: 'Search by service name',
381+
typeAppName: 'Enter application name',
382+
typeDefault: 'Please enter',
383+
typeRoutingRules: 'Search routing rules',
384+
searchAppNameOrIP: 'Search application, IP'
385+
},
371386
methods: 'Methods',
372387
testModule: {
373388
searchServiceHint:
@@ -490,10 +505,6 @@ const words: I18nType = {
490505
backHome: 'Back Home',
491506
noPageTip: 'Sorry, the page you visited does not exist.',
492507
globalSearchTip: 'Search ip, application, instance, service',
493-
placeholder: {
494-
typeAppName: 'please type appName, support for prefix',
495-
typeDefault: 'please type '
496-
},
497508
none: 'No Select',
498509
debug: 'Debug',
499510
distribution: 'Distribution',

‎ui-vue3/src/base/i18n/zh.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,17 @@ const words: I18nType = {
175175
opened: '开启',
176176
paramRoute: '参数路由'
177177
},
178+
servicesDomain: {
179+
appName: '应用名',
180+
instanceCount: '实例数量',
181+
deployClusters: '部署集群',
182+
registryClusters: '注册集群'
183+
},
178184
service: '服务',
179185
versionGroup: '版本&分组',
180186
avgQPS: 'QPS',
187+
provider: '提供者',
188+
subset: '分组',
181189
avgRT: 'RT',
182190
requestTotal: '近1min请求总量',
183191
serviceSearch: '服务查询',
@@ -478,9 +486,10 @@ const words: I18nType = {
478486
globalSearchTip: '搜索ip，应用，实例，服务',
479487

480488
placeholder: {
481-
typeAppName: '请输入应用名，支持前缀搜索',
489+
typeAppName: '请输入应用名',
482490
typeDefault: '请输入',
483-
typeRoutingRules: '搜索路由规则，支持前缀过滤'
491+
typeRoutingRules: '搜索路由规则',
492+
searchAppNameOrIP: '搜索应用，ip'
484493
},
485494
none: '无',
486495
details: '详情',

‎ui-vue3/src/layout/header/layout_header.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
:options="
5757
meshes.map((x: any) => {
5858
return {
59-
value: x.name,
59+
value: x.id,
6060
label: x.name
6161
}
6262
})

‎ui-vue3/src/utils/SearchUtil.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,10 @@ export class SearchDomain {
9898

9999
this.searchApi(queryParams)
100100
.then((res: any) => {
101+
101102
const {
102-
data: { list, pageInfo }
103-
} = res
103+
data: { list = [], pageInfo }
104+
} = res || {}
104105
this.result = handleResult ? handleResult(list) : list
105106

106107
if (!this.noPaged) {

‎ui-vue3/src/views/resources/applications/index.vue‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,7 @@
3030
</a-tag>
3131
</template>
3232
<template v-else-if="column.dataIndex === 'appName'">
33-
<span
34-
class="app-link"
35-
@click="router.push(`/resources/applications/detail/${record[column.key]}`)"
36-
>
33+
<span class="app-link" @click="router.push(`/resources/applications/detail/${record[column.key]}`)">
3734
<b>
3835
<Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
3936
{{ text }}
@@ -70,7 +67,7 @@ let columns = [
7067
title: 'appName',
7168
key: 'appName',
7269
dataIndex: 'appName',
73-
sorter: (a: any, b: any) => sortString(a.appName, b.appName),
70+
// sorter: (a: any, b: any) => sortString(a.appName, b.appName),
7471
width: 140,
7572
ellipsis: true
7673
},
@@ -79,9 +76,8 @@ let columns = [
7976
key: 'instanceCount',
8077
dataIndex: 'instanceCount',
8178
width: 100,
82-
sorter: (a: any, b: any) => sortString(a.instanceCount, b.instanceCount)
79+
// sorter: (a: any, b: any) => sortString(a.instanceCount, b.instanceCount)
8380
},
84-
8581
{
8682
title: 'applicationDomain.deployClusters',
8783
key: 'deployClusters',
@@ -131,11 +127,13 @@ watch(route, (a, b) => {
131127
<style lang="less" scoped>
132128
.search-table-container {
133129
min-height: 60vh;
130+
134131
//max-height: 70vh; //overflow: auto;
135132
.app-link {
136133
padding: 4px 10px 4px 4px;
137134
border-radius: 4px;
138135
color: v-bind('PRIMARY_COLOR');
136+
139137
&:hover {
140138
cursor: pointer;
141139
background: rgba(133, 131, 131, 0.13);

‎ui-vue3/src/views/resources/applications/tabs/instance.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -113,64 +113,64 @@ const columns = [
113113
title: 'instanceDomain.ip',
114114
dataIndex: 'ip',
115115
key: 'ip',
116-
sorter: true,
116+
// sorter: true,
117117
width: 150,
118118
fixed: 'left'
119119
},
120120
{
121121
title: 'instanceDomain.name',
122122
dataIndex: 'name',
123123
key: 'name',
124-
sorter: true,
124+
// sorter: true,
125125
width: 180
126126
},
127127
{
128128
title: 'instanceDomain.deployState',
129129
dataIndex: 'deployState',
130130
key: 'deployState',
131-
sorter: true,
131+
// sorter: true,
132132
width: 150
133133
},
134134
{
135135
title: 'instanceDomain.deployCluster',
136136
dataIndex: 'deployClusters',
137137
key: 'deployClusters',
138-
sorter: true,
138+
// sorter: true,
139139
width: 180
140140
},
141141
{
142142
title: 'instanceDomain.registerState',
143143
dataIndex: 'registerState',
144144
key: 'registerState',
145-
sorter: true,
145+
// sorter: true,
146146
width: 150
147147
},
148148
{
149149
title: 'instanceDomain.registerClusters',
150150
dataIndex: 'registerCluster',
151151
key: 'registerCluster',
152-
sorter: true,
152+
// sorter: true,
153153
width: 200
154154
},
155155
{
156156
title: 'instanceDomain.cpu',
157157
dataIndex: 'cpu',
158158
key: 'cpu',
159-
sorter: true,
159+
// sorter: true,
160160
width: 120
161161
},
162162
{
163163
title: 'instanceDomain.memory',
164164
dataIndex: 'memory',
165165
key: 'memory',
166-
sorter: true,
166+
// sorter: true,
167167
width: 120
168168
},
169169
{
170170
title: 'instanceDomain.startTime',
171171
dataIndex: 'startTime',
172172
key: 'startTime',
173-
sorter: true,
173+
// sorter: true,
174174
width: 150
175175
}
176176
// {

‎ui-vue3/src/views/resources/applications/tabs/service.vue‎

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,6 @@
3636
<template v-if="column.dataIndex === 'serviceName'">
3737
<a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
3838
</template>
39-
<template v-else-if="column.dataIndex === 'versionGroupSelect'">
40-
<a-select :value="text?.versionGroupValue" :bordered="false" style="width: 80%">
41-
<a-select-option
42-
v-for="(item, index) in text?.versionGroupArr"
43-
:value="item"
44-
:key="index"
45-
>
46-
{{ item }}
47-
</a-select-option>
48-
</a-select>
49-
</template>
5039
</template>
5140
</search-table>
5241
</div>
@@ -108,37 +97,40 @@ const columns = [
10897
{
10998
title: 'provideServiceName',
11099
key: 'service',
111-
dataIndex: 'serviceName',
112-
sorter: true,
113-
width: '30%'
114-
},
115-
{
116-
title: 'versionGroup',
117-
key: 'versionGroup',
118-
dataIndex: 'versionGroupSelect',
119-
width: '25%'
100+
dataIndex: 'serviceName'
101+
// sorter: true,
120102
},
121103
{
122-
title: 'avgQPS',
123-
key: 'avgQPS',
124-
dataIndex: 'avgQPS',
125-
sorter: true,
126-
width: '15%'
104+
title: 'version',
105+
key: 'version',
106+
dataIndex: 'version'
127107
},
128108
{
129-
title: 'avgRT',
130-
key: 'avgRT',
131-
dataIndex: 'avgRT',
132-
sorter: true,
133-
width: '15%'
134-
},
135-
{
136-
title: 'requestTotal',
137-
key: 'requestTotal',
138-
dataIndex: 'requestTotal',
139-
sorter: true,
140-
width: '15%'
109+
title: 'subset',
110+
key: 'group',
111+
dataIndex: 'group'
141112
}
113+
// {
114+
// title: 'avgQPS',
115+
// key: 'avgQPS',
116+
// dataIndex: 'avgQPS',
117+
// // sorter: true,
118+
// width: '15%'
119+
// },
120+
// {
121+
// title: 'avgRT',
122+
// key: 'avgRT',
123+
// dataIndex: 'avgRT',
124+
// // sorter: true,
125+
// width: '15%'
126+
// },
127+
// {
128+
// title: 'requestTotal',
129+
// key: 'requestTotal',
130+
// dataIndex: 'requestTotal',
131+
// // sorter: true,
132+
// width: '15%'
133+
// }
142134
]
143135
144136
const appName = computed(() => {
@@ -213,6 +205,7 @@ provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
213205
.statistic {
214206
width: 8vw;
215207
}
208+
216209
:deep(.ant-card-body) {
217210
padding: 12px;
218211
}

0 commit comments

Comments
 (0)