Skip to content

Commit fcdd756

Browse files
lindongchenlindongchen
committed
fix gui bug
1 parent b0ee936 commit fcdd756

File tree

5 files changed

+95
-78
lines changed

5 files changed

+95
-78
lines changed

‎gui/src/assets/styles.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -815,6 +815,10 @@ fieldset{
815815
border-radius: 0px;
816816
width: auto !important;
817817
}
818+
.embed-ep-header{
819+
min-height: calc(100vh - 100px) !important;
820+
height: calc(100vh - 100px) !important;
821+
}
818822
.p-inputgroup.search-bar .p-select-dropdown{
819823
color: #fff;
820824
border-radius: 0px;

‎gui/src/views/mesh/Meshes.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,8 @@ const emptyMsg = computed(()=>{
116116
</script>
117117
118118
<template>
119-
<div class="flex flex-row">
120-
<div :class="{'w-22rem':(!!visibleEditor),'w-full':(!visibleEditor),'mobile-hidden':(!!visibleEditor)}">
119+
<div class="flex flex-row min-h-screen">
120+
<div class="relative h-full" :class="{'w-22rem':(!!visibleEditor),'w-full':(!visibleEditor),'mobile-hidden':(!!visibleEditor)}">
121121
<AppHeader :main="true">
122122
<template #center>
123123
<i class="pi pi-star-fill mr-2" style="color: orange;"/>
@@ -129,7 +129,8 @@ const emptyMsg = computed(()=>{
129129
</template>
130130
</AppHeader>
131131
<Loading v-if="loading"/>
132-
<div v-else-if="meshes.length >0" class="text-center px-3">
132+
<ScrollPanel class="w-full absolute" style="top:35px;bottom: 0;" v-else-if="meshes.length >0">
133+
<div class="text-center px-3">
133134
<div class="grid mt-1 text-left" >
134135
<div :class="(!visibleEditor)?'col-12 md:col-6 lg:col-3':'col-12'" v-for="(mesh,hid) in meshes" :key="hid">
135136
<div class="surface-card shadow-2 p-3 border-round">
@@ -150,6 +151,7 @@ const emptyMsg = computed(()=>{
150151
</div>
151152
</div>
152153
</div>
154+
</ScrollPanel>
153155
<Empty v-else :title="emptyMsg"/>
154156
</div>
155157
<div class="flex-item" v-if="!!visibleEditor">

‎gui/src/views/mesh/Ports.vue‎

Lines changed: 76 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -109,81 +109,87 @@ const emptyMsg = computed(()=>{
109109
</script>
110110
111111
<template>
112-
<AppHeader v-if="!props.embed" :main="!isChat" >
113-
<template #center>
114-
<b>Local Ports ({{portsFilter.length}})</b>
115-
</template>
116-
117-
<template #end>
118-
<Button icon="pi pi-refresh" text @click="getPorts" :loading="loader"/>
119-
</template>
120-
</AppHeader>
121-
<Card class="nopd" v-if="!error">
122-
<template #content>
123-
<InputGroup class="search-bar" >
124-
<Button :disabled="!typing" icon="pi pi-search" :label="selectedMesh?.name" />
125-
<Textarea @keyup="watchEnter" v-model="typing" :autoResize="true" class="drak-input bg-gray-900 text-white flex-1" placeholder="Type service | port" rows="1" cols="30" />
126-
</InputGroup>
127-
</template>
128-
</Card>
129-
<Loading v-if="loading"/>
130-
<div v-else-if="portsFilter && portsFilter.length >0" class="text-center">
131-
<div class="mt-1 grid text-left px-3">
132-
<div class="col-12 md:col-6 lg:col-3" v-for="(port,hid) in portsFilter" :key="hid">
133-
<div class="surface-card shadow-2 p-3 border-round">
134-
<div class="flex justify-content-between mb-1">
135-
<div>
136-
<span class="block text-tip font-medium mb-3">
137-
{{port.listen.ip}} | {{port.protocol}}
138-
</span>
139-
140-
<div class="text-900 font-medium text-xl">
141-
<Status :run="port.open" :error="port.error" :text="port.listen.port"/>
142-
</div>
143-
</div>
144-
<div class="flex">
145-
<div v-tooltip="'Delete Port'" @click="deletePort(port)" class="pointer flex align-items-center justify-content-center p-button-secondary border-round mr-2" style="width: 2.5rem; height: 2.5rem">
146-
<i class="pi pi-trash text-tip text-xl"></i>
147-
</div>
112+
<div class="flex flex-row min-h-screen" :class="{'embed-ep-header':props.embed}" >
113+
<div class="relative w-full h-full" >
114+
<AppHeader :main="!isChat" v-if="!props.embed">
115+
<template #center>
116+
<b>Local Ports ({{portsFilter.length}})</b>
117+
</template>
118+
119+
<template #end>
120+
<Button icon="pi pi-refresh" text @click="getPorts" :loading="loader"/>
121+
</template>
122+
</AppHeader>
123+
<Card class="nopd" v-if="!error">
124+
<template #content>
125+
<InputGroup class="search-bar" >
126+
<Button :disabled="!typing" icon="pi pi-search" :label="selectedMesh?.name" />
127+
<Textarea @keyup="watchEnter" v-model="typing" :autoResize="true" class="drak-input bg-gray-900 text-white flex-1" placeholder="Type service | port" rows="1" cols="30" />
128+
</InputGroup>
129+
</template>
130+
</Card>
131+
<Loading v-if="loading"/>
132+
<ScrollPanel class="w-full absolute" style="bottom: 0;" :style="{'top':props.embed?'35px':'75px'}" v-else-if="portsFilter && portsFilter.length >0">
133+
<div class="text-center">
134+
<div class="mt-1 grid text-left px-3">
135+
<div class="col-12" :class="props.embed?'md:col-6 lg:col-4':'md:col-6 lg:col-3'" v-for="(port,hid) in portsFilter" :key="hid">
136+
<div class="surface-card shadow-2 p-3 border-round">
137+
<div class="flex justify-content-between mb-1">
138+
<div>
139+
<span class="block text-tip font-medium mb-3">
140+
{{port.listen.ip}} | {{port.protocol}}
141+
</span>
142+
143+
<div class="text-900 font-medium text-xl">
144+
<Status :run="port.open" :error="port.error" :text="port.listen.port"/>
145+
</div>
146+
</div>
147+
<div class="flex">
148+
<div v-tooltip="'Delete Port'" @click="deletePort(port)" class="pointer flex align-items-center justify-content-center p-button-secondary border-round mr-2" style="width: 2.5rem; height: 2.5rem">
149+
<i class="pi pi-trash text-tip text-xl"></i>
150+
</div>
151+
</div>
148152
</div>
153+
<Fieldset legend="Target" :toggleable="true" >
154+
<div class="mb-2" v-if="port?.mesh">
155+
<Chip class="pl-0 pr-3 mr-2">
156+
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
157+
<i class="pi pi-globe"/>
158+
</span>
159+
<span class="font-medium ml-2">
160+
Mesh: {{decodeURI(port.mesh)}}
161+
</span>
162+
</Chip>
163+
</div>
164+
<div class="mb-2">
165+
<Chip class="pl-0 pr-3 mr-2">
166+
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
167+
<i class="pi pi-server"/>
168+
</span>
169+
<span class="font-medium ml-2">
170+
Service: {{port.target?.service}}
171+
</span>
172+
</Chip>
173+
</div>
174+
<div class="mb-2" v-if="port.target?.endpoint">
175+
<Chip class="pl-0 pr-3 mr-2">
176+
<span style="min-width: 28px;" class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
177+
<i class="pi pi-chart-scatter"/>
178+
</span>
179+
<span class="font-medium ml-2">
180+
EP: {{endpointMap[port.target?.endpoint]?.name||'Unnamed EP' }}
181+
</span>
182+
</Chip>
183+
</div>
184+
</Fieldset>
149185
</div>
150-
<Fieldset legend="Target" :toggleable="true" >
151-
<div class="mb-2" v-if="port?.mesh">
152-
<Chip class="pl-0 pr-3 mr-2">
153-
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
154-
<i class="pi pi-globe"/>
155-
</span>
156-
<span class="font-medium ml-2">
157-
Mesh: {{decodeURI(port.mesh)}}
158-
</span>
159-
</Chip>
160-
</div>
161-
<div class="mb-2">
162-
<Chip class="pl-0 pr-3 mr-2">
163-
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
164-
<i class="pi pi-server"/>
165-
</span>
166-
<span class="font-medium ml-2">
167-
Service: {{port.target?.service}}
168-
</span>
169-
</Chip>
170-
</div>
171-
<div class="mb-2" v-if="port.target?.endpoint">
172-
<Chip class="pl-0 pr-3 mr-2">
173-
<span style="min-width: 28px;" class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
174-
<i class="pi pi-chart-scatter"/>
175-
</span>
176-
<span class="font-medium ml-2">
177-
EP: {{endpointMap[port.target?.endpoint]?.name||'Unnamed EP' }}
178-
</span>
179-
</Chip>
180-
</div>
181-
</Fieldset>
182186
</div>
183-
</div>
187+
</div>
188+
</div>
189+
</ScrollPanel>
190+
<Empty v-else :title="emptyMsg" :error="error"/>
184191
</div>
185192
</div>
186-
<Empty v-else :title="emptyMsg" :error="error"/>
187193
</template>
188194
189195
<style scoped lang="scss">

‎gui/src/views/mesh/ServiceCreate.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ const getEndpoints = () => {
4343
console.log("Endpoints:")
4444
console.log(res)
4545
endpoints.value = res || [];
46+
endpoints.value.forEach((ep)=>{
47+
ep.label = ep.name || ep.username || 'Unknow EP'
48+
})
4649
if(!props.pid){
4750
if(!!res.find((ep)=> ep.id == agentId)){
4851
config.value.ep = agentId;
@@ -184,7 +187,7 @@ const isMobile = computed(() => windowWidth.value<=768);
184187
:disabled="!!props.pid"
185188
v-model="config.ep"
186189
:options="endpoints"
187-
optionLabel="name"
190+
optionLabel="label"
188191
optionValue="id"
189192
placeholder="Endpoint"
190193
class="flex"></Select>

‎gui/src/views/mesh/Services.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -247,9 +247,9 @@ const emptyMsg = computed(()=>{
247247
</script>
248248
249249
<template>
250-
<div class="flex flex-row">
251-
<div :class="{'w-24rem':(!!visibleEditor),'w-full':(!visibleEditor),'mobile-hidden':(!!visibleEditor)}">
252-
<AppHeader v-if="!props.embed" :main="!isChat" >
250+
<div class="flex flex-row min-h-screen" :class="{'embed-ep-header':props.embed}">
251+
<div class="relative h-full" :class="{'w-24rem':(!!visibleEditor),'w-full':(!visibleEditor),'mobile-hidden':(!!visibleEditor)}">
252+
<AppHeader :main="!isChat" v-if="!props.embed">
253253
<template #center>
254254
<b>Services</b>
255255
</template>
@@ -270,7 +270,8 @@ const emptyMsg = computed(()=>{
270270
</template>
271271
</Card>
272272
<Loading v-if="loading"/>
273-
<div v-else-if="servicesLb && servicesLb.length >0" class="text-center">
273+
<ScrollPanel class="w-full absolute" style="bottom: 0;" :style="{'top':props.embed?'35px':'75px'}" v-else-if="servicesLb && servicesLb.length >0">
274+
<div class="text-center">
274275
<DataTable v-if="layout == 'list'" class="nopd-header w-full" v-model:expandedRows="expandedRows" :value="servicesLb" dataKey="id" tableStyle="min-width: 50rem">
275276
<Column expander style="width: 5rem" />
276277
<Column header="Service">
@@ -406,6 +407,7 @@ const emptyMsg = computed(()=>{
406407
</div>
407408
<Menu ref="actionMenu" :model="actions" :popup="true" />
408409
</div>
410+
</ScrollPanel>
409411
<Empty v-else :title="emptyMsg" :error="error"/>
410412
</div>
411413
<div class="flex-item" v-if="!!visibleEditor">

0 commit comments

Comments
 (0)