completeInstancePage
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 7dd7685..e1d99af 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -18,6 +18,13 @@
import type { I18nType } from './type.ts'
const words: I18nType = {
+ instanceDomain: {
+ details: 'Detail',
+ monitor: 'Monitor',
+ linkTracking: 'Link Tracking',
+ configuration: 'Configuration',
+ event: 'Event'
+ },
adjusting_the_timeout_for_application_service_provision:
'Adjusting the timeout for application service provision',
enable_access_logs_for_all_instances_of_this_application:
@@ -87,7 +94,6 @@
app: 'Application',
services: 'Services',
application: 'Application',
- instance: 'Instance',
all: 'All',
ip: 'IP',
qps: 'qps',
@@ -98,8 +104,6 @@
serialization: 'serialization',
appName: 'Application Name',
instanceNum: 'Instance Number',
- deployCluster: 'Deploy Cluster',
- registerCluster: 'Register Cluster',
serviceName: 'Service Name',
registrySource: 'Registry Source',
instanceRegistry: 'Instance Registry',
@@ -326,12 +330,9 @@
typeDefault: 'please type '
},
none: 'No Select',
- details: 'Details',
debug: 'Debug',
distribution: 'Distribution',
- monitor: 'Monitor',
tracing: 'Tracing',
- event: 'Event',
provideService: 'Provide Service',
dependentService: 'Dependent Service'
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index 90d5c92..4b19828 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -18,6 +18,13 @@
import type { I18nType } from './type.ts'
const words: I18nType = {
+ instanceDomain: {
+ details: '详情',
+ monitor: '监控',
+ linkTracking: '链路追踪',
+ configuration: '配置',
+ event: '事件'
+ },
adjusting_the_timeout_for_application_service_provision: '调整应用提供服务的超时时间',
enable_access_logs_for_all_instances_of_this_application: '开启该应用所有实例的访问日志',
adjust_the_load_balancing_strategy_for_application_services: '调整应用提供服务的负载均衡策略',
@@ -39,7 +46,6 @@
startTime_k8s: '启动时间(k8s)',
registerStates: '注册状态',
deployState: '部署状态',
- deployCluster: '部署集群',
registerCluster: '注册集群',
owningWorkload_k8s: '所属工作负载(k8s)',
creationTime: '创建时间',
@@ -76,7 +82,6 @@
providers: '提供者',
consumers: '消费者',
application: '应用',
- instance: '实例',
all: '全部',
common: '通用',
@@ -315,19 +320,14 @@
backHome: '回到首页',
noPageTip: '抱歉，你访问的页面不存在',
globalSearchTip: '搜索ip，应用，实例，服务',
-
- globalSearchTip: '搜索ip，应用，实例，服务',
placeholder: {
typeAppName: '请输入应用名，支持前缀搜索',
typeDefault: '请输入'
},
none: '无',
- details: '详情',
debug: '调试',
distribution: '分布',
- monitor: '监控',
tracing: '链路追踪',
- event: '事件',
provideService: '提供服务',
dependentService: '依赖服务'
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index 5e7f86d..3bb6460 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -106,46 +106,41 @@
}
},
{
- path: '/details/:pathId',
- name: 'details',
- component: () =>
- import('../views/resources/instances/instanceDetail/tabs/details.vue'),
+ path: '/detail/:instance',
+ name: 'instanceDomain.details',
+ component: () => import('../views/resources/instances/tabs/details.vue'),
meta: {
tab: true
}
},
{
- path: '/monitor/:pathId',
- name: 'monitor',
- component: () =>
- import('../views/resources/instances/instanceDetail/tabs/monitor.vue'),
+ path: '/monitor/:instance',
+ name: 'instanceDomain.monitor',
+ component: () => import('../views/resources/instances/tabs/monitor.vue'),
meta: {
tab: true
}
},
{
- path: '/linktracking/:pathId',
- name: 'linkTracking',
- component: () =>
- import('../views/resources/instances/instanceDetail//tabs/linkTracking.vue'),
+ path: '/linktracking/:instance',
+ name: 'instanceDomain.linkTracking',
+ component: () => import('../views/resources/instances/tabs/linkTracking.vue'),
meta: {
tab: true
}
},
{
- path: '/configuration/:pathId',
- name: 'configuration',
- component: () =>
- import('../views/resources/instances/instanceDetail/tabs/configuration.vue'),
+ path: '/configuration/:instance',
+ name: 'instanceDomain.configuration',
+ component: () => import('../views/resources/instances/tabs/configuration.vue'),
meta: {
tab: true
}
},
{
- path: '/event/:pathId',
- name: 'event',
- component: () =>
- import('../views/resources/instances/instanceDetail/tabs/event.vue'),
+ path: '/event/:instance',
+ name: 'instanceDomain.event',
+ component: () => import('../views/resources/instances/tabs/event.vue'),
meta: {
tab: true
}
diff --git a/ui-vue3/src/views/resources/instances/index.vue b/ui-vue3/src/views/resources/instances/index.vue
index 6791f14..5ed8431 100644
--- a/ui-vue3/src/views/resources/instances/index.vue
+++ b/ui-vue3/src/views/resources/instances/index.vue
@@ -14,276 +14,162 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Icon } from '@iconify/vue'
-import type { SelectProps } from 'ant-design-vue'
-import { useRouter, RouterLink } from 'vue-router'
-import type { TableColumnType, TableProps } from 'ant-design-vue'
-
-const Router = useRouter()
-
-// Search Options
-const searchOptions = ref<SelectProps['options']>([
- {
- value: 'IP',
- label: 'IP'
- },
- {
- value: '名称',
- label: '名称'
- }
-])
-// Select search options
-const searchOption = ref('IP')
-
-// search keywords
-const keyword = ref('')
-
-// Search instances
-const onSearch = () => {}
-
-// defined types
-type TableDataType = {
- instanceIP: string
- instanceName: string
- deployState: object
- CPU: string
- node: string
- labels: Array<string>
- memory: string
- registerStates: object
- registerCluster: string
- startTime: string
- registerTime: string
-}
-
-// Configure instance list header
-const columns: TableColumnType<TableDataType>[] = [
- {
- title: '实例ip',
- dataIndex: 'instanceIP',
- key: 'instanceIP'
- },
- {
- title: '实例名称',
- dataIndex: 'instanceName',
- key: 'instanceName'
- },
- {
- title: '部署状态',
- dataIndex: 'deployState',
- key: 'deployState',
- defaultSortOrder: 'descend'
- },
- {
- title: '注册状态',
- dataIndex: 'registerStates',
- key: 'registerStates',
- defaultSortOrder: 'descend'
- },
- {
- title: '注册集群',
- dataIndex: 'registerCluster',
- key: 'registerCluster',
- defaultSortOrder: 'descend'
- },
- {
- title: 'CPU',
- dataIndex: 'CPU',
- key: 'CPU',
- defaultSortOrder: 'descend',
- sorter: (a: TableDataType, b: TableDataType) => parseFloat(a.CPU) - parseFloat(b.CPU)
- },
- {
- title: '内存',
- dataIndex: 'memory',
- key: 'memory',
- defaultSortOrder: 'descend',
- sorter: (a: TableDataType, b: TableDataType) => parseFloat(a.memory) - parseFloat(b.memory)
- },
- {
- title: '启动时间(k8s)',
- dataIndex: 'startTime',
- key: 'startTime',
- defaultSortOrder: 'descend',
- sorter: (a: TableDataType, b: TableDataType) => parseFloat(a.memory) - parseFloat(b.memory)
- },
- {
- title: '注册时间',
- dataIndex: 'registerTime',
- key: 'registerTime'
- },
- {
- title: '标签',
- dataIndex: 'labels',
- key: 'labels'
- }
-]
-
-// Instance List Data
-const instanceList: TableDataType[] = [
- {
- deployState: {
- label: 'Running',
- value: 'Running',
- level: 'healthy'
- },
- registerStates: {
- label: 'Unregisted',
- value: 'Unregisted',
- level: 'warn'
- },
- CPU: '1.0',
- memory: '1022',
- instanceIP: '45.7.37.227',
- instanceName: 'shop-user',
- labels: ['app=shop-user', 'version=v1', 'region=beijing'],
- startTime: '2023/12/19 22:12:34',
- registerTime: '2023/12/19 22:16:56',
- registerCluster: 'sz-ali-zk-f8otyo4r',
- node: '30.33.0.1'
- },
- {
- deployState: {
- label: 'Running',
- value: 'Running',
- level: 'healthy'
- },
- registerStates: {
- label: 'Unregisted',
- value: 'Unregisted',
- level: 'warn'
- },
- CPU: '1.0',
- memory: '1022',
- instanceIP: '45.7.37.227',
- instanceName: 'shop-user',
- labels: ['app=shop-user', 'version=v1', 'region=beijing'],
- startTime: '2023/12/19 22:12:34',
- registerTime: '2023/12/19 22:16:56',
- registerCluster: 'sz-ali-zk-f8otyo4r',
- node: '30.33.0.1'
- },
- {
- deployState: {
- label: 'Running',
- value: 'Running',
- level: 'healthy'
- },
- registerStates: {
- label: 'Unregisted',
- value: 'Unregisted',
- level: 'warn'
- },
- CPU: '1.0',
- memory: '1022',
- instanceIP: '45.7.37.227',
- instanceName: 'shop-user',
- labels: ['app=shop-user', 'version=v1', 'region=beijing'],
- startTime: '2023/12/19 22:12:34',
- registerTime: '2023/12/19 22:16:56',
- registerCluster: 'sz-ali-zk-f8otyo4r',
- node: '30.33.0.1'
- }
-]
-
-// Page Sorter Data
-const current = ref<number>(1)
-
-const onChangePageNum = (pageNumber: number) => {
- console.log('Page: ', pageNumber)
-}
-
-// View instance details
-const checkDetail = (instanceName: string) => {
- Router.push({
- path: 'details/' + instanceName
- })
-}
-</script>
-
<template>
- <div class="__container_home_index">
- <a-card :title="$t('instance')" style="width: 100%">
- <template #extra>
- <a-space align="start">
- <a-select
- ref="select"
- v-model:value="searchOption"
- style="width: 120px"
- :options="searchOptions"
- >
- </a-select>
+ <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>
- <a-input-search
- v-model:value="keyword"
- placeholder="input search text"
- enter-button
- @search="onSearch"
- />
- </a-space>
+ <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>
-
- <!-- Instance List -->
- <a-table
- :dataSource="instanceList"
- :columns="columns"
- :pagination="false"
- :scroll="{ x: 1500 }"
- >
- <!-- Table Header -->
-
- <template #headerCell="{ column }">
- {{ $t(column.dataIndex) }}
- </template>
-
- <!-- body -->
- <template #bodyCell="{ column, text }">
- <!-- The instance name can be clicked to jump to -->
- <template v-if="column.key === 'instanceName'">
- <router-link :to="`details/${text}`"> {{ text }} </router-link>
- </template>
-
- <!-- deployState -->
- <template v-if="column.key === 'deployState'">
- {{ text.label }}
- </template>
-
- <!-- registerStates -->
- <template v-if="column.key === 'registerStates'">
- {{ text.label }}
- </template>
-
- <!-- Used Memory -->
- <template v-else-if="column.key === 'memory'"> {{ text }}MB </template>
- <!-- Instance label -->
- <template v-else-if="column.key === 'labels'">
- <a-tag v-for="tag in text">{{ tag }}</a-tag>
- </template>
- </template>
- </a-table>
- <!-- pager -->
- <a-space
- style="
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 10px;
- "
- >
- <a-pagination
- v-model:current="current"
- show-quick-jumper
- show-less-items
- :total="500"
- @change="onChangePageNum"
- />
- </a-space>
- </a-card>
+ </search-table>
</div>
</template>
-<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;
+ // overflow-x: scroll;
+ //max-height: 70vh; //overflow: auto;
+}
+</style>
diff --git a/ui-vue3/src/views/resources/instances/instanceDetail/index.vue b/ui-vue3/src/views/resources/instances/instanceDetail/index.vue
deleted file mode 100644
index 97d36a5..0000000
--- a/ui-vue3/src/views/resources/instances/instanceDetail/index.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<!--
- ~ 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.
--->
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-
-import { useRouter } from 'vue-router'
-
-const Router = useRouter()
-
-// instance name
-const instanceName = ref('shop-user-base-7e33f1e')
-
-// Current tab index
-const activeKey = ref('details')
-
-// Tab pane configuration item
-const tabPanesOption = [
- {
- key: 'details',
- tab: '详情'
- },
- {
- key: 'monitor',
- tab: '监控'
- },
- {
- key: 'linkTracking',
- tab: '链路追踪'
- },
- {
- key: 'configuration',
- tab: '配置'
- },
- {
- key: 'event',
- tab: '事件'
- }
-]
-
-// Switch tab pages
-const changeTab = (activeKey: string) => {
- console.log(activeKey)
-
- Router.push({
- name: activeKey,
- query: {
- instanceName: 'name'
- }
- })
-}
-</script>
-
-<template>
- <div class="__container_home_index">
- <a-card :title="instanceName" style="width: 100%">
- <template #extra> </template>
- <a-tabs v-model:activeKey="activeKey" @change="changeTab">
- <a-tab-pane :key="tab.key" :tab="$t(tab.key)" v-for="tab in tabPanesOption"> </a-tab-pane>
- </a-tabs>
- </a-card>
- </div>
-</template>
-
-<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/details.vue b/ui-vue3/src/views/resources/instances/instanceDetail/tabs/details.vue
deleted file mode 100644
index a2c122d..0000000
--- a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/details.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<!--
- ~ 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.
--->
-
-<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>
-
-<template>
- <!-- detail -->
- <div class="detailBox">
- <!-- left-->
- <a-typography>
- <!-- instanceName -->
- <a-typography-title :level="5"> {{ $t('instanceName') }}: </a-typography-title>
- <a-typography-paragraph copyable>
- {{ instanceName }}
- </a-typography-paragraph>
-
- <!-- deployState -->
- <a-typography-title :level="5"> {{ $t('deployState') }}: </a-typography-title>
- <a-typography-paragraph type="success"> Running </a-typography-paragraph>
- <a-typography-paragraph type="danger"> Stop </a-typography-paragraph>
-
- <!-- registerStates -->
- <a-typography-title :level="5"> {{ $t('registerStates') }}: </a-typography-title>
- <a-typography-paragraph type="success"> Registed </a-typography-paragraph>
- <a-typography-paragraph type="danger"> UnRegisted </a-typography-paragraph>
-
- <!-- instanceIP -->
- <a-typography-title :level="5"> {{ $t('instanceIP') }}: </a-typography-title>
- <a-typography-paragraph copyable> 192.168.0.1 </a-typography-paragraph>
-
- <!-- Dubbo Port -->
- <a-typography-title :level="5"> {{ $t('dubboPort') }}: </a-typography-title>
- <a-typography-paragraph copyable> 2088 </a-typography-paragraph>
-
- <!-- whichApplication -->
- <a-typography-title :level="5"> {{ $t('whichApplication') }}: </a-typography-title>
- <a-typography-link @click="checkApplication()"> shop-b </a-typography-link>
-
- <!-- Owning workload(k8s) -->
- <a-typography-title :level="5"> {{ $t('owningWorkload_k8s') }}: </a-typography-title>
- <a-typography-paragraph> shop-user-base </a-typography-paragraph>
-
- <!-- instanceLabel -->
- <a-typography-title :level="5"> {{ $t('instanceLabel') }}: </a-typography-title>
- <div class="tagsBox">
- <a-tag>app=shop-user</a-tag>
- <a-tag>version=v1</a-tag>
- <a-tag>region=shenzhen</a-tag>
- </div>
- </a-typography>
-
- <!-- right -->
- <a-typography>
- <!-- Creation time -->
- <a-typography-title :level="5"> {{ $t('creationTime_k8s') }}: </a-typography-title>
- <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
-
- <!-- Start time -->
- <a-typography-title :level="5"> {{ $t('startTime_k8s') }}: </a-typography-title>
- <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
-
- <!-- Register Time -->
- <a-typography-title :level="5"> {{ $t('registerTime') }}: </a-typography-title>
- <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
-
- <!-- deploy cluster -->
- <a-typography-title :level="5"> {{ $t('deployCluster') }}: </a-typography-title>
- <a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
-
- <!-- Register cluster -->
- <a-typography-title :level="5"> {{ $t('registerCluster') }}: </a-typography-title>
- <a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
-
- <!-- Node IP -->
- <a-typography-title :level="5"> {{ $t('nodeIP') }}: </a-typography-title>
- <a-typography-paragraph copyable> 30.33.0.1 </a-typography-paragraph>
-
- <!-- image -->
- <a-typography-title :level="5"> {{ $t('instanceImage_k8s') }}: </a-typography-title>
- <a-typography-paragraph copyable>
- apache/org.apahce.dubbo.samples.shop-user:v1
- </a-typography-paragraph>
-
- <!-- health examination -->
- <a-typography-title :level="5"> {{ $t('healthExamination') }}: </a-typography-title>
- <div class="healthBox">
- <p class="white_space">启动探针（StartupProbe）：关闭</p>
- <p class="white_space">就绪探针（ReadinessProbe）：开启 类型: Http 端口：22222</p>
- <p class="white_space">存活探针（LivenessProbe）：开启 类型: Http 端口：22222</p>
- </div>
- </a-typography>
- </div>
-</template>
-
-<style lang="less" scoped>
-.white_space {
- white-space: pre;
-}
-
-.detailBox {
- margin: 0 auto;
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
-
- .tagsBox {
- border: 1px solid black;
- border-radius: 10px;
- padding: 10px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- }
-
- .healthBox {
- border: 1px solid black;
- border-radius: 10px;
- padding: 10px;
- display: flex;
- align-items: flex-start;
- flex-direction: column;
- justify-content: center;
- }
-}
-</style>
diff --git a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/configuration.vue b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
similarity index 69%
rename from ui-vue3/src/views/resources/instances/instanceDetail/tabs/configuration.vue
rename to ui-vue3/src/views/resources/instances/tabs/configuration.vue
index 5e0519f..cac322f 100644
--- a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/configuration.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
@@ -15,6 +15,92 @@
~ 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('enable_access_logs_for_all_instances_of_this_application') }}(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('adjusting_the_number_of_retries_for_application_provided_services')
+ }}</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('adjust_the_load_balancing_strategy_for_application_services')
+ }}(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('adjusting_the_timeout_for_application_service_provision') }}(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('adjusting_the_negative_clustering_method_for_application_service_provision')
+ }}</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'
@@ -29,101 +115,13 @@
const timeout = ref('1000 ms')
</script>
-<template>
- <!-- configuration -->
- <div class="configBox">
- <!-- left -->
- <a-typography>
- <!-- execution log -->
- <a-typography-title :level="5">
- {{ $t('executionLog') }}
- <a-tooltip placement="topLeft">
- <template #title
- >{{
- $t('enable_access_logs_for_all_instances_of_this_application')
- }}(provider.accesslog)</template
- >
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
- </a-typography-title>
- <a-typography-paragraph>
- <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-typography-paragraph>
-
- <!-- Load Balance -->
- <a-typography-title :level="5">
- {{ $t('loadBalance') }}
- <a-tooltip placement="topLeft">
- <template #title
- >{{
- $t('adjust_the_load_balancing_strategy_for_application_services')
- }}(provider.loadbalance)</template
- >
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
- </a-typography-title>
- <a-typography-paragraph editable v-model:content="loadBalance"> </a-typography-paragraph>
-
- <!-- Cluster approach -->
- <a-typography-title :level="5">
- {{ $t('clusterApproach') }}
- <a-tooltip placement="topLeft">
- <template #title>{{
- $t('adjusting_the_negative_clustering_method_for_application_service_provision')
- }}</template>
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
- </a-typography-title>
- <a-typography-paragraph editable v-model:content="clusterApproach"> </a-typography-paragraph>
- </a-typography>
-
- <!-- right -->
- <a-typography>
- <!-- retry count -->
- <a-typography-title :level="5">
- {{ $t('retryCount') }}
- <a-tooltip placement="topLeft">
- <template #title>{{
- $t('adjusting_the_number_of_retries_for_application_provided_services')
- }}</template>
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
- </a-typography-title>
- <a-typography-paragraph editable v-model:content="retryCount"> </a-typography-paragraph>
-
- <!-- timeout -->
- <a-typography-title :level="5">
- {{ $t('timeout') }}
- <a-tooltip placement="topLeft">
- <template #title>
- {{ $t('adjusting_the_timeout_for_application_service_provision') }}(provider.timeout)
- </template>
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
- </a-typography-title>
- <a-typography-paragraph editable v-model:content="timeout"> </a-typography-paragraph>
- </a-typography>
- </div>
-</template>
-
<style lang="less" scoped>
-.configBox {
- margin: 0 auto;
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
+.active {
+ font-size: 13px;
+ font-weight: bold;
+}
- .iconStyle {
- font-size: 17px;
- }
-
- .active {
- font-size: 15px;
- 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..98a0dcc
--- /dev/null
+++ b/ui-vue3/src/views/resources/instances/tabs/details.vue
@@ -0,0 +1,149 @@
+<!--
+ ~ 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">
+ <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">
+ <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">
+.ant-descriptions-item-content {
+ padding-left: 20px !important;
+}
+
+.tagsBox {
+ border: 1px solid black;
+ border-radius: 10px;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.healthBox {
+ border: 1px solid black;
+ border-radius: 10px;
+ padding: 10px;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ justify-content: center;
+}
+</style>
diff --git a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/event.vue b/ui-vue3/src/views/resources/instances/tabs/event.vue
similarity index 99%
rename from ui-vue3/src/views/resources/instances/instanceDetail/tabs/event.vue
rename to ui-vue3/src/views/resources/instances/tabs/event.vue
index 6404cfb..ddd4b4f 100644
--- a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/event.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/event.vue
@@ -15,12 +15,12 @@
~ limitations under the License.
-->
-<script lang="ts" setup>
-import { ref } from 'vue'
-</script>
-
<template>
<div>event</div>
</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+</script>
+
<style lang="scss" scoped></style>
diff --git a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/linkTracking.vue b/ui-vue3/src/views/resources/instances/tabs/linkTracking.vue
similarity index 99%
rename from ui-vue3/src/views/resources/instances/instanceDetail/tabs/linkTracking.vue
rename to ui-vue3/src/views/resources/instances/tabs/linkTracking.vue
index 14e637e..760410b 100644
--- a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/linkTracking.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/linkTracking.vue
@@ -15,12 +15,12 @@
~ limitations under the License.
-->
-<script lang="ts" setup>
-import { ref } from 'vue'
-</script>
-
<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/instanceDetail/tabs/monitor.vue b/ui-vue3/src/views/resources/instances/tabs/monitor.vue
similarity index 99%
rename from ui-vue3/src/views/resources/instances/instanceDetail/tabs/monitor.vue
rename to ui-vue3/src/views/resources/instances/tabs/monitor.vue
index 9893427..c1342df 100644
--- a/ui-vue3/src/views/resources/instances/instanceDetail/tabs/monitor.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/monitor.vue
@@ -15,12 +15,12 @@
~ limitations under the License.
-->
-<script lang="ts" setup>
-import { ref } from 'vue'
-</script>
-
<template>
<div>monitor</div>
</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+</script>
+
<style lang="less" scoped></style>
