From f07f0ba63ecfa0bd91e57f826a0ecdfd64d6a9c3 Mon Sep 17 00:00:00 2001
From: DongChen Lin <393227948@qq.com>
Date: Wed, 19 Jun 2024 13:31:54 +0800
Subject: [PATCH] add ep info card

---
 gui/src/views/mesh/EndpointDetail.vue | 10 ++++
 gui/src/views/mesh/EndpointInfo.vue   | 77 +++++++++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 gui/src/views/mesh/EndpointInfo.vue

diff --git a/gui/src/views/mesh/EndpointDetail.vue b/gui/src/views/mesh/EndpointDetail.vue
index ad847ae4..058e4aa9 100644
--- a/gui/src/views/mesh/EndpointDetail.vue
+++ b/gui/src/views/mesh/EndpointDetail.vue
@@ -3,6 +3,7 @@ import { ref,onActivated,watch, computed } from "vue";
 import { useRouter } from 'vue-router'
 import PipyProxyService from '@/service/PipyProxyService';
 import MeshSelector from './common/MeshSelector.vue';
+import EndpointInfo from './EndpointInfo.vue';
 import Services from './Services.vue';
 import Ports from './Ports.vue';
 import { useStore } from 'vuex';
@@ -65,6 +66,15 @@ const go = (path) => {
 	</AppHeader>
 	<div class="text-center">
 		<TabView class="" v-model:activeIndex="active">
+			
+			<TabPanel>
+				<template #header>
+					<div>
+						<i class="pi pi-info-circle mr-2" />Info
+					</div>
+				</template>
+				<EndpointInfo :ep="props.ep"/>
+			</TabPanel>
 			<TabPanel>
 				<template #header>
 					<div>
diff --git a/gui/src/views/mesh/EndpointInfo.vue b/gui/src/views/mesh/EndpointInfo.vue
new file mode 100644
index 00000000..3c2cedf4
--- /dev/null
+++ b/gui/src/views/mesh/EndpointInfo.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue';
+
+const props = defineProps(['ep','loading']);
+const windowWidth = computed(() =>  window.innerWidth);
+const isMobile = computed(() => windowWidth.value<=768);
+</script>
+
+<template>
+	<Loading v-if="props.loading" />
+	<div v-else-if="props.ep" class="md:m-3">
+		<BlockViewer containerClass="surface-section px-1 md:px-1 lg:px-1" >
+			<div >
+				<ul class="list-none p-0 m-0">
+					<FormItem label="Name">
+						<Chip class="pl-0 pr-3 mr-2">
+								<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
+									<i class="pi pi-bookmark"/>
+								</span>
+								<span class="ml-2 font-medium">
+									{{props.ep?.name || 'Unknow'}}
+								</span>
+						</Chip>
+					</FormItem>
+					<FormItem label="Username">
+						<Chip class="pl-0 pr-3 mr-2">
+								<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
+									<i class="pi pi-user"/>
+								</span>
+								<span class="ml-2 font-medium">
+									{{props.ep?.username || 'Unknow'}}
+								</span>
+						</Chip>
+					</FormItem>
+					<FormItem label="IP" v-if="props.ep?.ip">
+						<Chip class="pl-0 pr-3 mr-2">
+								<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
+									<i class="pi pi-map-marker"/>
+								</span>
+								<span class="ml-2 font-medium">
+									{{props.ep?.ip || 'Unknow'}}
+								</span>
+						</Chip>
+					</FormItem>
+					<FormItem label="Port" v-if="props.ep?.port">
+						<Chip class="pl-0 pr-3 mr-2">
+								<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
+									<i class="pi pi-sort"/>
+								</span>
+								<span class="ml-2 font-medium">
+									{{props.ep?.port || 'Unknow'}}
+								</span>
+						</Chip>
+					</FormItem>
+				</ul>
+			</div>
+		</BlockViewer>
+	</div>
+	<Empty v-else title="Unknow EP" :error="props.error"/>
+</template>
+
+
+<style scoped lang="scss">
+:deep(.p-breadcrumb){
+	border-radius: 0;
+	border-left: none;
+	border-right: none;
+}
+.bootstrap{
+	:deep(.add-tag-input){
+		width:120px;
+	}
+	:deep(.add-tag-input:hover){
+		width:160px;
+	}
+}
+</style>