Merge branch 'master' of https://github.com/ikun-Lg/dubbo-kubernetes
diff --git a/ui-vue3/src/App.vue b/ui-vue3/src/App.vue
index 1387e7e..2853feb 100644
--- a/ui-vue3/src/App.vue
+++ b/ui-vue3/src/App.vue
@@ -68,6 +68,10 @@
</template>
<style lang="less">
+.ant-descriptions-item-content {
+ padding-left: 20px !important;
+}
+
.__global_float_button_question {
right: 24px;
}
diff --git a/ui-vue3/src/api/mock/mockInstance.ts b/ui-vue3/src/api/mock/mockInstance.ts
new file mode 100644
index 0000000..7c723f3
--- /dev/null
+++ b/ui-vue3/src/api/mock/mockInstance.ts
@@ -0,0 +1,103 @@
+/*
+ * 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.
+ */
+
+import Mock from 'mockjs'
+
+Mock.mock('/mock/instance/search', 'get', {
+ code: 200,
+ message: 'laborum qui',
+ data: {
+ total: 66,
+ curPage: 82,
+ pageSize: 31,
+ data: [
+ {
+ ip: '205.216.185.96',
+ name: '用省中际解理',
+ deployState: {
+ label: 'dolor',
+ value: 'in amet',
+ level: 'amet nisi incididunt',
+ tip: '133.16.55.40'
+ },
+ deployCluster: 'veniam elit irure',
+ registerStates: [
+ {
+ label: 'in consequat est',
+ value: 'esse non Lorem',
+ level: 'sit',
+ tip: '122.249.164.252'
+ }
+ ],
+ registerClusters: ['cupidatat'],
+ cpu: 'officia cupidatat reprehenderit magna ex',
+ memory: 'mollit',
+ startTime: '2016-07-31 19:20:31',
+ registerTime: '2014-02-09 04:02:41',
+ labels: ['cupidat']
+ },
+ {
+ ip: '117.23.142.162',
+ name: '之受力即此',
+ deployState: {
+ label: 'sint culpa elit quis id',
+ value: 'amet',
+ level: 'adipisicing do',
+ tip: '112.176.231.68'
+ },
+ deployCluster: 'esse sit',
+ registerStates: [
+ {
+ label: 'ut',
+ value: 'eu sit',
+ level: 'in eiusmod ullamco',
+ tip: '220.153.108.236'
+ }
+ ],
+ registerClusters: ['ea consectetur'],
+ cpu: 'dolor sint deserunt',
+ memory: 'sint eu commodo proident',
+ startTime: '1994-12-22 18:24:57',
+ registerTime: '1986-07-24 03:18:24'
+ },
+ {
+ ip: '41.215.196.61',
+ name: '值青给值',
+ deployState: {
+ label: 'sunt',
+ value: 'consectetur in',
+ level: 'culpa dolore',
+ tip: '142.182.249.124'
+ },
+ deployCluster: 'cupidatat eu nostrud',
+ registerStates: [
+ {
+ label: 'ad quis',
+ value: 'Excepteur esse dolore Ut dolore',
+ level: 'ipsum ad quis',
+ tip: '220.55.203.4'
+ }
+ ],
+ registerClusters: ['Excepteur sit laboris'],
+ cpu: 'fugiat pariatur laborum ut',
+ memory: 'Lorem adipisicing sunt',
+ startTime: '1984-04-25 12:22:51',
+ registerTime: '1976-06-06 19:58:58'
+ }
+ ]
+ }
+})
diff --git a/ui-vue3/src/api/service/instance.ts b/ui-vue3/src/api/service/instance.ts
new file mode 100644
index 0000000..c07ef80
--- /dev/null
+++ b/ui-vue3/src/api/service/instance.ts
@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+import request from '@/base/http/request'
+
+export const searchInstances = (params: any): Promise<any> => {
+ return request({
+ url: '/instance/search',
+ method: 'get',
+ params
+ })
+}
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index bd8dfd2..e3ef791 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -18,6 +18,50 @@
import type { I18nType } from './type.ts'
const words: I18nType = {
+ instanceDomain: {
+ details: 'Detail',
+ monitor: 'Monitor',
+ linkTracking: 'Link Tracking',
+ configuration: 'Configuration',
+ event: 'Event'
+ },
+ appServiceTimeout: 'Adjusting the timeout for application service provision',
+ enableAppInstanceLogs: 'Enable access logs for all instances of this application',
+ appServiceLoadBalance: 'Adjusting the load balancing strategy for application service provision',
+ appServiceRetries: 'Adjusting the number of retries for application provided services',
+ appServiceNegativeClusteringMethod:
+ 'Adjusting the negative clustering method for application service provision',
+ executionLog: 'Execution Log',
+ clusterApproach: 'Cluster Approach',
+ retryCount: 'Retry Count',
+ event: 'Event',
+ configuration: 'Configuration',
+ linkTracking: 'Link Tracking',
+ monitor: 'Monitor',
+ details: 'Details',
+ creationTime_k8s: 'creationTime(k8s)',
+ dubboPort: 'Dubbo Port',
+ whichApplication: 'application',
+ registerTime: 'Register Time',
+ startTime_k8s: 'Start Time(k8s)',
+ registerStates: 'Register States',
+ deployState: 'Deployment Status',
+ owningWorkload_k8s: 'Owning Workload(k8s)',
+ creationTime: 'Creation Time',
+ nodeIP: 'Node IP',
+ healthExamination: 'Health Examination',
+ instanceImage_k8s: 'Image(k8s)',
+ instanceLabel: 'Instance Label',
+ instanceDetail: 'Instance Detail',
+ state: 'State',
+ memory: 'Memory',
+ CPU: 'CPU',
+ node: 'Node',
+ labels: 'Labels',
+ instanceIP: 'Instance IP',
+ instanceName: 'Instance Name',
+ instance: 'Instance',
+ resourceDetails: 'Resource Details',
service: 'Service',
serviceSearch: 'Search Service',
serviceGovernance: 'Routing Rule',
@@ -44,7 +88,6 @@
app: 'Application',
services: 'Services',
application: 'Application',
- instance: 'Instance',
all: 'All',
ip: 'IP',
qps: 'qps',
@@ -56,7 +99,7 @@
appName: 'Application Name',
instanceNum: 'Instance Number',
deployCluster: 'Deploy Cluster',
- registerClusters: 'Register Clusters',
+ registerCluster: 'Register Cluster',
serviceName: 'Service Name',
registrySource: 'Registry Source',
instanceRegistry: 'Instance Registry',
@@ -283,15 +326,11 @@
typeDefault: 'please type '
},
none: 'No Select',
- details: 'Details',
debug: 'Debug',
distribution: 'Distribution',
- monitor: 'Monitor',
tracing: 'Tracing',
- event: 'Event',
provideService: 'Provide Service',
- idx: 'Index',
dependentService: 'Dependent Service'
}
diff --git a/ui-vue3/src/layout/header/layout_header.vue b/ui-vue3/src/layout/header/layout_header.vue
index dc169e3..9c18b5c 100644
--- a/ui-vue3/src/layout/header/layout_header.vue
+++ b/ui-vue3/src/layout/header/layout_header.vue
@@ -173,15 +173,19 @@
.header {
background: v-bind('PRIMARY_COLOR');
padding: 0;
+
.search-group {
display: flex;
align-items: center;
+
.select-type {
width: 120px;
}
+
.input-keywords {
width: calc(100% - 152px);
}
+
.search-icon {
width: 32px;
}
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index a63af5d..d0af19f 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -99,8 +99,61 @@
{
path: '/instances',
name: 'instances',
- component: () => import('../views/resources/instances/index.vue'),
- meta: {}
+ component: LayoutTab,
+ redirect: 'all',
+ meta: {
+ tab_parent: true
+ },
+ children: [
+ {
+ path: '/all',
+ name: 'all',
+ component: () => import('../views/resources/instances/index.vue'),
+ meta: {
+ hidden: true
+ }
+ },
+ {
+ path: '/detail/:instance',
+ name: 'instanceDomain.details',
+ component: () => import('../views/resources/instances/tabs/details.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/monitor/:instance',
+ name: 'instanceDomain.monitor',
+ component: () => import('../views/resources/instances/tabs/monitor.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/linktracking/:instance',
+ name: 'instanceDomain.linkTracking',
+ component: () => import('../views/resources/instances/tabs/linkTracking.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/configuration/:instance',
+ name: 'instanceDomain.configuration',
+ component: () => import('../views/resources/instances/tabs/configuration.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/event/:instance',
+ name: 'instanceDomain.event',
+ component: () => import('../views/resources/instances/tabs/event.vue'),
+ meta: {
+ tab: true
+ }
+ }
+ ]
},
{
path: '/services',
diff --git a/ui-vue3/src/views/resources/instances/index.vue b/ui-vue3/src/views/resources/instances/index.vue
index 6a4db5c..de41bb1 100644
--- a/ui-vue3/src/views/resources/instances/index.vue
+++ b/ui-vue3/src/views/resources/instances/index.vue
@@ -15,8 +15,159 @@
~ limitations under the License.
-->
<template>
- <div class="__container_resources_instance_index">实例</div>
+ <div class="__container_resources_application_index">
+ <search-table :search-domain="searchDomain">
+ <template #bodyCell="{ text, record, index, column }">
+ <template v-if="column.dataIndex === 'deployState'">
+ <a-typography-text type="success">{{ text.label }}</a-typography-text>
+ </template>
+
+ <template v-else-if="column.dataIndex === 'deployCluster'">
+ <a-tag color="success">
+ {{ text }}
+ </a-tag>
+ </template>
+
+ <template v-if="column.dataIndex === 'registerStates'">
+ <a-typography-text type="success" v-for="t in text">{{ t.label }}</a-typography-text>
+ </template>
+
+ <template v-if="column.dataIndex === 'registerClusters'">
+ <a-tag v-for="t in text" color="warning">
+ {{ t }}
+ </a-tag>
+ </template>
+
+ <template v-if="column.dataIndex === 'labels'">
+ <a-tag v-for="t in text" color="warning">
+ {{ t }}
+ </a-tag>
+ </template>
+ <template v-else-if="column.dataIndex === 'name'">
+ <router-link :to="`detail/${record[column.key]}`">{{ text }}</router-link>
+ </template>
+ <template v-else-if="column.dataIndex === 'ip'">
+ <router-link :to="`detail/${record[column.key]}`">{{ text }}</router-link>
+ </template>
+ </template>
+ </search-table>
+ </div>
</template>
-<script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<script setup lang="ts">
+import { onMounted, provide, reactive } from 'vue'
+import { searchInstances } from '@/api/service/instance'
+import SearchTable from '@/components/SearchTable.vue'
+import { SearchDomain, sortString } from '@/utils/SearchUtil'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+
+let columns = [
+ {
+ title: 'instanceIP',
+ key: 'ip',
+ dataIndex: 'ip',
+ sorter: (a: any, b: any) => sortString(a.instanceIP, b.instanceIP),
+ width: 140
+ },
+ {
+ title: 'instanceName',
+ key: 'name',
+ dataIndex: 'name',
+ sorter: (a: any, b: any) => sortString(a.instanceName, b.instanceName),
+ width: 140
+ },
+ {
+ title: 'deployState',
+ key: 'deployState',
+ dataIndex: 'deployState',
+ width: 120,
+ sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+ },
+
+ {
+ title: 'deployCluster',
+ key: 'deployCluster',
+ dataIndex: 'deployCluster',
+ sorter: (a: any, b: any) => sortString(a.deployCluster, b.deployCluster),
+ width: 120
+ },
+ {
+ title: 'registerStates',
+ key: 'registerStates',
+ dataIndex: 'registerStates',
+ sorter: (a: any, b: any) => sortString(a.registerStates, b.registerStates),
+ width: 120
+ },
+ {
+ title: 'registerCluster',
+ key: 'registerClusters',
+ dataIndex: 'registerClusters',
+ sorter: (a: any, b: any) => sortString(a.registerCluster, b.registerCluster),
+ width: 140
+ },
+ {
+ title: 'CPU',
+ key: 'cpu',
+ dataIndex: 'cpu',
+ sorter: (a: any, b: any) => sortString(a.CPU, b.CPU),
+ width: 140
+ },
+ {
+ title: 'memory',
+ key: 'memory',
+ dataIndex: 'memory',
+ sorter: (a: any, b: any) => sortString(a.memory, b.memory),
+ width: 80
+ },
+ {
+ title: 'startTime_k8s',
+ key: 'startTime_k8s',
+ dataIndex: 'startTime',
+ sorter: (a: any, b: any) => sortString(a.startTime_k8s, b.startTime_k8s),
+ width: 200
+ },
+ {
+ title: 'registerTime',
+ key: 'registerTime',
+ dataIndex: 'registerTime',
+ sorter: (a: any, b: any) => sortString(a.registerTime, b.registerTime),
+ width: 200
+ },
+ {
+ title: 'labels',
+ key: 'labels',
+ dataIndex: 'labels',
+ width: 140
+ }
+]
+
+// search
+const searchDomain = reactive(
+ new SearchDomain(
+ [
+ {
+ label: 'appName',
+ param: 'appName',
+ placeholder: 'typeAppName',
+ style: {
+ width: '200px'
+ }
+ }
+ ],
+ searchInstances,
+ columns
+ )
+)
+
+onMounted(() => {
+ searchDomain.onSearch()
+ console.log(searchDomain.result)
+})
+
+provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
+</script>
+<style lang="less" scoped>
+.search-table-container {
+ min-height: 60vh;
+}
+</style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/configuration.vue b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
new file mode 100644
index 0000000..7be4f3d
--- /dev/null
+++ b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
@@ -0,0 +1,115 @@
+<!--
+ ~ 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.
+-->
+
+<template>
+ <a-descriptions title="" layout="vertical" :column="2">
+ <!-- execution log -->
+ <a-descriptions-item>
+ <template v-slot:label>
+ {{ $t('executionLog') }}
+ <a-tooltip placement="topLeft">
+ <template #title> {{ $t('enableAppInstanceLogs') }}(provider.accesslog) </template>
+ <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
+ </a-tooltip>
+ </template>
+
+ <span :class="{ active: !state }" :style="{ color: 'black' }">
+ {{ $t('close') }}
+ </span>
+ <a-switch v-model:checked="state" :loading="loading" />
+ <span :class="{ active: state }" :style="{ color: state ? PRIMARY_COLOR : 'black' }">
+ {{ $t('enabled') }}
+ </span>
+ </a-descriptions-item>
+
+ <!-- retry count -->
+ <a-descriptions-item>
+ <template v-slot:label>
+ {{ $t('retryCount') }}
+ <a-tooltip placement="topLeft">
+ <template #title>{{ $t('appServiceRetries') }}</template>
+ <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
+ </a-tooltip>
+ </template>
+ <a-typography-paragraph editable v-model:content="retryCount"> </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- Load Balance -->
+ <a-descriptions-item>
+ <template v-slot:label>
+ {{ $t('loadBalance') }}
+ <a-tooltip placement="topLeft">
+ <template #title>{{ $t('appServiceLoadBalance') }}(provider.loadbalance)</template>
+ <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
+ </a-tooltip>
+ </template>
+
+ <a-typography-paragraph editable v-model:content="loadBalance"> </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- timeout -->
+ <a-descriptions-item>
+ <template v-slot:label>
+ {{ $t('timeout') }}
+ <a-tooltip placement="topLeft">
+ <template #title> {{ $t('appServiceTimeout') }}(provider.timeout) </template>
+ <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
+ </a-tooltip>
+ </template>
+
+ <a-typography-paragraph editable v-model:content="timeout"> </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- Cluster approach -->
+ <a-descriptions-item>
+ <template v-slot:label>
+ {{ $t('clusterApproach') }}
+ <a-tooltip placement="topLeft">
+ <template #title>{{ $t('appServiceNegativeClusteringMethod') }}</template>
+ <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
+ </a-tooltip>
+ </template>
+
+ <a-typography-paragraph editable v-model:content="clusterApproach"> </a-typography-paragraph>
+ </a-descriptions-item>
+ </a-descriptions>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { Icon } from '@iconify/vue'
+import { PRIMARY_COLOR } from '@/base/constants'
+
+// 执行日志开关
+const state = ref('')
+const loading = ref(false)
+const loadBalance = ref('random')
+const clusterApproach = ref('failover')
+const retryCount = ref('2次')
+const timeout = ref('1000 ms')
+</script>
+
+<style lang="less" scoped>
+.active {
+ font-size: 13px;
+ font-weight: bold;
+}
+
+.iconStyle {
+ font-size: 17px;
+}
+</style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/details.vue b/ui-vue3/src/views/resources/instances/tabs/details.vue
new file mode 100644
index 0000000..a135518
--- /dev/null
+++ b/ui-vue3/src/views/resources/instances/tabs/details.vue
@@ -0,0 +1,144 @@
+<!--
+ ~ 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.
+-->
+
+<template>
+ <a-descriptions title="" layout="vertical" :column="2">
+ <!-- instanceName -->
+ <a-descriptions-item :label="$t('instanceName')">
+ <a-typography-paragraph copyable>
+ {{ instanceName }}
+ </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- Creation time -->
+ <a-descriptions-item :label="$t('creationTime_k8s')">
+ <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- deployState -->
+ <a-descriptions-item :label="$t('deployState')">
+ <a-typography-paragraph type="success"> Running </a-typography-paragraph>
+ <a-typography-paragraph type="danger"> Stop </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- Start time -->
+ <a-descriptions-item :label="$t('startTime_k8s')">
+ <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- registerStates -->
+ <a-descriptions-item :label="$t('registerStates')">
+ <a-typography-paragraph type="success"> Registed </a-typography-paragraph>
+ <a-typography-paragraph type="danger"> UnRegisted </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- Register Time -->
+ <a-descriptions-item :label="$t('registerTime')">
+ <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- instanceIP -->
+ <a-descriptions-item :label="$t('instanceIP')">
+ <a-typography-paragraph copyable> 192.168.0.1 </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- deploy cluster -->
+ <a-descriptions-item :label="$t('deployCluster')">
+ <a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- Dubbo Port -->
+ <a-descriptions-item :label="$t('dubboPort')">
+ <a-typography-paragraph copyable> 2088 </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- Register cluster -->
+ <a-descriptions-item :label="$t('registerCluster')">
+ <a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- whichApplication -->
+ <a-descriptions-item :label="$t('whichApplication')">
+ <a-typography-link @click="checkApplication()"> shop-b </a-typography-link>
+ </a-descriptions-item>
+
+ <!-- Node IP -->
+ <a-descriptions-item :label="$t('nodeIP')">
+ <a-typography-paragraph copyable> 30.33.0.1 </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- Owning workload(k8s) -->
+ <a-descriptions-item :label="$t('owningWorkload_k8s')">
+ <a-typography-paragraph> shop-user-base </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- image -->
+ <a-descriptions-item :label="$t('instanceImage_k8s')">
+ <a-typography-paragraph copyable>
+ apache/org.apahce.dubbo.samples.shop-user:v1
+ </a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- instanceLabel -->
+ <a-descriptions-item :label="$t('instanceLabel')">
+ <div class="tagsBox flexLayoutBox">
+ <a-tag>app=shop-user</a-tag>
+ <a-tag>version=v1</a-tag>
+ <a-tag>region=shenzhen</a-tag>
+ </div>
+ </a-descriptions-item>
+
+ <!-- health examination -->
+ <a-descriptions-item :label="$t('healthExamination')">
+ <div class="healthBox flexLayoutBox">
+ <p class="white_space">启动探针(StartupProbe):关闭</p>
+ <p class="white_space">就绪探针(ReadinessProbe):开启 类型: Http 端口:22222</p>
+ <p class="white_space">存活探针(LivenessProbe):开启 类型: Http 端口:22222</p>
+ </div>
+ </a-descriptions-item>
+ </a-descriptions>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+// instance name
+const instanceName = ref('shop-user-base-7e33f1e')
+
+// Click on the application name to view the application
+const checkApplication = () => {}
+</script>
+
+<style lang="less" scoped>
+.flexLayoutBox {
+ border: 1px solid black;
+ border-radius: 10px;
+ padding: 10px;
+ display: flex;
+}
+
+.tagsBox {
+ align-items: center;
+ justify-content: space-around;
+}
+
+.healthBox {
+ align-items: flex-start;
+ flex-direction: column;
+ justify-content: center;
+}
+</style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/event.vue b/ui-vue3/src/views/resources/instances/tabs/event.vue
new file mode 100644
index 0000000..5f6896e
--- /dev/null
+++ b/ui-vue3/src/views/resources/instances/tabs/event.vue
@@ -0,0 +1,26 @@
+<!--
+ ~ 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.
+-->
+
+<template>
+ <div>event</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/linkTracking.vue b/ui-vue3/src/views/resources/instances/tabs/linkTracking.vue
new file mode 100644
index 0000000..760410b
--- /dev/null
+++ b/ui-vue3/src/views/resources/instances/tabs/linkTracking.vue
@@ -0,0 +1,26 @@
+<!--
+ ~ 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.
+-->
+
+<template>
+ <div>linkTracking</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/monitor.vue b/ui-vue3/src/views/resources/instances/tabs/monitor.vue
new file mode 100644
index 0000000..c1342df
--- /dev/null
+++ b/ui-vue3/src/views/resources/instances/tabs/monitor.vue
@@ -0,0 +1,26 @@
+<!--
+ ~ 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.
+-->
+
+<template>
+ <div>monitor</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="less" scoped></style>
