prettier-format
diff --git a/ui-vue3/src/api/mock/mockApp.ts b/ui-vue3/src/api/mock/mockApp.ts
index 3c9b614..a79658f 100644
--- a/ui-vue3/src/api/mock/mockApp.ts
+++ b/ui-vue3/src/api/mock/mockApp.ts
@@ -16,135 +16,107 @@
*/
import Mock from 'mockjs'
-import devTool from "@/utils/DevToolUtil";
+import devTool from '@/utils/DevToolUtil'
Mock.mock('/mock/application/search', 'get', () => {
- let total = Mock.mock('@integer(8, 1000)')
- let list = []
- for (let i = 0; i < total; i++) {
- list.push({
- appName: 'app_' + Mock.mock('@string(2,10)'),
- instanceNum: Mock.mock('@integer(80, 200)'),
- deployCluster: 'cluster_' + Mock.mock('@string(5)'),
- 'registerClusters|1-3': ['cluster_' + Mock.mock('@string(5)')]
- })
- }
- return {
- code: 200,
- message: 'success',
- data: Mock.mock({
- total: total,
- curPage: 1,
- pageSize: 10,
- data: list
- })
- }
+ let total = Mock.mock('@integer(8, 1000)')
+ let list = []
+ for (let i = 0; i < total; i++) {
+ list.push({
+ appName: 'app_' + Mock.mock('@string(2,10)'),
+ instanceNum: Mock.mock('@integer(80, 200)'),
+ deployCluster: 'cluster_' + Mock.mock('@string(5)'),
+ 'registerClusters|1-3': ['cluster_' + Mock.mock('@string(5)')]
+ })
+ }
+ return {
+ code: 200,
+ message: 'success',
+ data: Mock.mock({
+ total: total,
+ curPage: 1,
+ pageSize: 10,
+ data: list
+ })
+ }
})
Mock.mock('/mock/application/instance/statistics', 'get', () => {
- return {
- "code": 1000,
- "message": "success",
- "data": {
- "instanceTotal": 43,
- "versionTotal": 4,
- "cpuTotal": "56c",
- "memoryTotal": "108.2GB"
- }
+ return {
+ code: 1000,
+ message: 'success',
+ data: {
+ instanceTotal: 43,
+ versionTotal: 4,
+ cpuTotal: '56c',
+ memoryTotal: '108.2GB'
}
+ }
})
Mock.mock(devTool.mockUrl('/mock/application/instance/info'), 'get', () => {
-
- let total = Mock.mock('@integer(8, 1000)')
- let list = []
- for (let i = 0; i < total; i++) {
- list.push(
- {
- "ip": "121.90.211.162",
- "name": "shop-user",
- "deployState": Mock.Random.pick(['Running','Pending', 'Terminating', 'Crashing']),
- "deployCluster": "tx-shanghai-1",
- "registerStates": [
- {
- "label": "Registed",
- "value": "Registed",
- "level": "healthy"
- }
- ],
- "registerClusters": [
- "ali-hangzhou-1",
- "ali-hangzhou-2"
- ],
- "cpu": "1.2c",
- "memory": "2349MB",
- "startTime": "2023-06-09 03:47:10",
- "registerTime": "2023-06-09 03:48:20",
- "labels": {
- "region": "beijing",
- "version": "v1"
- }
- }
- )
- }
- return {
- code: 200,
- message: 'success',
- data: Mock.mock({
- total: total,
- curPage: 1,
- pageSize: 10,
- data: list
- })
- }
+ let total = Mock.mock('@integer(8, 1000)')
+ let list = []
+ for (let i = 0; i < total; i++) {
+ list.push({
+ ip: '121.90.211.162',
+ name: 'shop-user',
+ deployState: Mock.Random.pick(['Running', 'Pending', 'Terminating', 'Crashing']),
+ deployCluster: 'tx-shanghai-1',
+ registerStates: [
+ {
+ label: 'Registed',
+ value: 'Registed',
+ level: 'healthy'
+ }
+ ],
+ registerClusters: ['ali-hangzhou-1', 'ali-hangzhou-2'],
+ cpu: '1.2c',
+ memory: '2349MB',
+ startTime: '2023-06-09 03:47:10',
+ registerTime: '2023-06-09 03:48:20',
+ labels: {
+ region: 'beijing',
+ version: 'v1'
+ }
+ })
+ }
+ return {
+ code: 200,
+ message: 'success',
+ data: Mock.mock({
+ total: total,
+ curPage: 1,
+ pageSize: 10,
+ data: list
+ })
+ }
})
Mock.mock('/mock/application/detail', 'get', () => {
- return {
- "code": 200,
- "message": "success",
- "data": {
- "appName": [
- "shop-user"
- ],
- "rpcProtocols": [
- "dubbo 2.0.2"
- ],
- "dubboVersions": [
- "Dubbo 3.2.10",
- "Dubbo 2.7.4.1"
- ],
- "dubboPorts": [
- "20880"
- ],
- "serialProtocols": [
- "fastjson2"
- ],
- "appTypes": [
- "无状态"
- ],
- "images": [
- "harbor.apche.org/dubbo-samples-shop-user:v1.0",
- "harbor.apche.org/dubbo-samples-shop-user:v1.1",
- "harbor.apche.org/dubbo-samples-shop-user:v1.2",
- ],
- "workloads": [
- "dubbo-samples-shop-user-base",
- "dubbo-samples-shop-user-gray",
- "dubbo-samples-shop-user-gray",
- "dubbo-samples-shop-user-gray",
- ],
- "deployCluster": [
- "ali-shanghai-1",
- "tx-shanghai-2"
- ],
- "registerCluster": [
- "nacos-cluster-1",
- "nacos-cluster-2"
- ],
- "registerMode": [
- "应用级",
- "接口级"
- ]
- }
+ return {
+ code: 200,
+ message: 'success',
+ data: {
+ appName: ['shop-user'],
+ rpcProtocols: ['dubbo 2.0.2'],
+ dubboVersions: ['Dubbo 3.2.10', 'Dubbo 2.7.4.1'],
+ dubboPorts: ['20880'],
+ serialProtocols: ['fastjson2'],
+ appTypes: ['无状态'],
+ images: [
+ 'harbor.apche.org/dubbo-samples-shop-user:v1.0',
+ 'harbor.apche.org/dubbo-samples-shop-user:v1.1',
+ 'harbor.apche.org/dubbo-samples-shop-user:v1.2'
+ ],
+ workloads: [
+ 'dubbo-samples-shop-user-base',
+ 'dubbo-samples-shop-user-gray',
+ 'dubbo-samples-shop-user-gray',
+ 'dubbo-samples-shop-user-gray'
+ ],
+ deployCluster: ['ali-shanghai-1', 'tx-shanghai-2'],
+ registerCluster: ['nacos-cluster-1', 'nacos-cluster-2'],
+ registerMode: ['应用级', '接口级']
}
+ }
})
diff --git a/ui-vue3/src/api/mock/mockService.ts b/ui-vue3/src/api/mock/mockService.ts
index d6962b1..c10e0cd 100644
--- a/ui-vue3/src/api/mock/mockService.ts
+++ b/ui-vue3/src/api/mock/mockService.ts
@@ -16,7 +16,7 @@
*/
import Mock from 'mockjs'
-import devTool from "@/utils/DevToolUtil";
+import devTool from '@/utils/DevToolUtil'
Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
code: 200,
diff --git a/ui-vue3/src/api/service/app.ts b/ui-vue3/src/api/service/app.ts
index a908e18..15e99c2 100644
--- a/ui-vue3/src/api/service/app.ts
+++ b/ui-vue3/src/api/service/app.ts
@@ -25,7 +25,6 @@
})
}
-
export const getApplicationDetail = (params: any): Promise<any> => {
return request({
url: '/application/detail',
@@ -48,5 +47,3 @@
params
})
}
-
-
diff --git a/ui-vue3/src/base/constants.ts b/ui-vue3/src/base/constants.ts
index 4b68a57..0b063b8 100644
--- a/ui-vue3/src/base/constants.ts
+++ b/ui-vue3/src/base/constants.ts
@@ -26,18 +26,16 @@
export const PRIMARY_COLOR = ref(item || PRIMARY_COLOR_DEFAULT)
-
-
-export const INSTANCE_REGISTER_COLOR:{ [key: string]: string } = {
- HEALTHY: 'green'
+export const INSTANCE_REGISTER_COLOR: { [key: string]: string } = {
+ HEALTHY: 'green'
}
/**
* 'Running','Pending', 'Terminating', 'Crashing'
*/
-export const INSTANCE_DEPLOY_COLOR:{ [key: string]: string } = {
- RUNNING: 'green',
- PENDING: 'yellow',
- TERMINATING: 'red',
- CRASHING: 'darkRed',
-}
\ No newline at end of file
+export const INSTANCE_DEPLOY_COLOR: { [key: string]: string } = {
+ RUNNING: 'green',
+ PENDING: 'yellow',
+ TERMINATING: 'red',
+ CRASHING: 'darkRed'
+}
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index 38670e6..6fd0c80 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -19,20 +19,22 @@
const words: I18nType = {
instanceDomain: {
- enableAppInstanceLogs:"Enable access logs for all instances of this application",
- appServiceRetries:"Adjust the number of retries for the service provided by this application",
- appServiceLoadBalance:"Adjusting the load balancing strategy for application service provision",
- appServiceNegativeClusteringMethod:"Adjusting the clustering approach for application service provision",
- appServiceTimeout:"Adjusting the timeout for application service provision",
- close:"Close",
- enable:"Enable",
- executionLog:"ExecutionLog",
- loadBalance:"LoadBalance",
+ enableAppInstanceLogs: 'Enable access logs for all instances of this application',
+ appServiceRetries: 'Adjust the number of retries for the service provided by this application',
+ appServiceLoadBalance:
+ 'Adjusting the load balancing strategy for application service provision',
+ appServiceNegativeClusteringMethod:
+ 'Adjusting the clustering approach for application service provision',
+ appServiceTimeout: 'Adjusting the timeout for application service provision',
+ close: 'Close',
+ enable: 'Enable',
+ executionLog: 'ExecutionLog',
+ loadBalance: 'LoadBalance',
instanceIP: 'InstanceIP',
- clusterApproach:"ClusterApproach",
+ clusterApproach: 'ClusterApproach',
details: 'Detail',
- retryCount:"RetryCount",
- timeout_ms:"Timeout(ms)",
+ retryCount: 'RetryCount',
+ timeout_ms: 'Timeout(ms)',
monitor: 'Monitor',
linkTracking: 'LinkTracking',
configuration: 'Configuration',
@@ -45,16 +47,16 @@
registerStates: 'RegisterState',
registerCluster: 'RegisterCluster',
CPU: 'CPU',
- node:"Node",
+ node: 'Node',
memory: 'Memory',
- owningWorkload_k8s:"OwningWorkload(k8s)",
- creationTime_k8s:"CreationTime(k8s)",
+ owningWorkload_k8s: 'OwningWorkload(k8s)',
+ creationTime_k8s: 'CreationTime(k8s)',
startTime: 'StartTime',
- dubboPort:"DubboPort",
- instanceImage_k8s:"Image(k8s)",
- instanceLabel:"InstanceLabel",
- whichApplication:"OwningApplication",
- healthExamination_k8s:"HealthExamination(k8s)",
+ dubboPort: 'DubboPort',
+ instanceImage_k8s: 'Image(k8s)',
+ instanceLabel: 'InstanceLabel',
+ whichApplication: 'OwningApplication',
+ healthExamination_k8s: 'HealthExamination(k8s)',
registerTime: 'RegisterTime',
labels: 'Labels',
startTime_k8s: 'StartTime(k8s)'
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index 8bc987f..77e5a24 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -19,20 +19,20 @@
const words: I18nType = {
instanceDomain: {
- CPU:"CPU",
- enableAppInstanceLogs:"开启该应用所有实例的访问日志",
- appServiceLoadBalance:"调整应用提供服务的负载均衡策略",
- appServiceNegativeClusteringMethod:"调整应用提供服务的的集群方式",
- appServiceRetries:"调整该应用提供服务的重试次数",
- appServiceTimeout:"调整应用提供服务的超时时间",
- close:"关闭",
- enable:"开启",
+ CPU: 'CPU',
+ enableAppInstanceLogs: '开启该应用所有实例的访问日志',
+ appServiceLoadBalance: '调整应用提供服务的负载均衡策略',
+ appServiceNegativeClusteringMethod: '调整应用提供服务的的集群方式',
+ appServiceRetries: '调整该应用提供服务的重试次数',
+ appServiceTimeout: '调整应用提供服务的超时时间',
+ close: '关闭',
+ enable: '开启',
executionLog: '执行日志',
retryCount: '重试次数',
- clusterApproach:"集群方式",
- timeout_ms:"超时时间(ms)",
+ clusterApproach: '集群方式',
+ timeout_ms: '超时时间(ms)',
details: '详情',
- loadBalance:"负载均衡",
+ loadBalance: '负载均衡',
monitor: '监控',
linkTracking: '链路追踪',
configuration: '配置',
diff --git a/ui-vue3/src/components/SearchTable.vue b/ui-vue3/src/components/SearchTable.vue
index 3d8338d..2064938 100644
--- a/ui-vue3/src/components/SearchTable.vue
+++ b/ui-vue3/src/components/SearchTable.vue
@@ -20,29 +20,25 @@
<a-flex wrap="wrap" gap="large">
<template v-for="q in searchDomain.params">
<a-form-item :label="$t(q.label)">
- <template
- v-if="q.dict && q.dict.length > 0"
- >
+ <template v-if="q.dict && q.dict.length > 0">
<a-radio-group
- button-style="solid"
- v-model:value="searchDomain.queryForm[q.param]"
- v-if="q.dictType==='BUTTON'"
+ button-style="solid"
+ v-model:value="searchDomain.queryForm[q.param]"
+ v-if="q.dictType === 'BUTTON'"
>
- <a-radio-button
- v-for="item in q.dict"
- :value="item.value">
+ <a-radio-button v-for="item in q.dict" :value="item.value">
{{ $t(item.label) }}
</a-radio-button>
</a-radio-group>
<a-select
- v-else
- class="select-type"
- :style="q.style"
- v-model:value="searchDomain.queryForm[q.param]"
+ v-else
+ class="select-type"
+ :style="q.style"
+ v-model:value="searchDomain.queryForm[q.param]"
>
<a-select-option
- :value="item.value"
- v-for="item in [...q.dict, { label: 'none', value: '' }]"
+ :value="item.value"
+ v-for="item in [...q.dict, { label: 'none', value: '' }]"
>
{{ $t(item.label) }}
</a-select-option>
@@ -50,18 +46,18 @@
</template>
<a-input
- v-else
- :style="q.style"
- :placeholder="$t('placeholder.' + (q.placeholder || `typeDefault`))"
- v-model:value="searchDomain.queryForm[q.param]"
+ v-else
+ :style="q.style"
+ :placeholder="$t('placeholder.' + (q.placeholder || `typeDefault`))"
+ v-model:value="searchDomain.queryForm[q.param]"
></a-input>
</a-form-item>
</template>
<a-form-item :label="''">
<a-button type="primary" @click="searchDomain.onSearch()">
<Icon
- style="margin-bottom: -2px; font-size: 1.3rem"
- icon="ic:outline-manage-search"
+ style="margin-bottom: -2px; font-size: 1.3rem"
+ icon="ic:outline-manage-search"
></Icon>
</a-button>
</a-form-item>
@@ -70,25 +66,26 @@
<div class="search-table-container">
<a-table
- :loading="searchDomain.table.loading"
- :pagination="pagination"
- :scroll="{
- scrollToFirstRowOnChange: true,
- y: searchDomain.tableStyle?.scrollY || '55vh',
- x: searchDomain.tableStyle?.scrollX||'' }"
- :columns="searchDomain?.table.columns"
- :data-source="searchDomain?.result"
- @change="handleTableChange"
+ :loading="searchDomain.table.loading"
+ :pagination="pagination"
+ :scroll="{
+ scrollToFirstRowOnChange: true,
+ y: searchDomain.tableStyle?.scrollY || '55vh',
+ x: searchDomain.tableStyle?.scrollX || ''
+ }"
+ :columns="searchDomain?.table.columns"
+ :data-source="searchDomain?.result"
+ @change="handleTableChange"
>
<template #bodyCell="{ text, record, index, column }">
<span v-if="column.key === 'idx'">{{ index + 1 }}</span>
<slot
- name="bodyCell"
- :text="text"
- :record="record"
- :index="index"
- :column="column"
- v-else
+ name="bodyCell"
+ :text="text"
+ :record="record"
+ :index="index"
+ :column="column"
+ v-else
>
</slot>
</template>
@@ -98,16 +95,16 @@
</template>
<script setup lang="ts">
-import type {ComponentInternalInstance} from 'vue'
-import {computed, getCurrentInstance, inject} from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import { computed, getCurrentInstance, inject } from 'vue'
-import {PROVIDE_INJECT_KEY} from '@/base/enums/ProvideInject'
-import type {SearchDomain} from '@/utils/SearchUtil'
-import {Icon} from '@iconify/vue'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import type { SearchDomain } from '@/utils/SearchUtil'
+import { Icon } from '@iconify/vue'
const {
appContext: {
- config: {globalProperties}
+ config: { globalProperties }
}
} = <ComponentInternalInstance>getCurrentInstance()
@@ -124,21 +121,23 @@
pageSize: searchDomain.paged.pageSize,
current: searchDomain.paged.curPage,
showTotal: (v: any) =>
- globalProperties.$t('searchDomain.total') +
- ': ' +
- v +
- ' ' +
- globalProperties.$t('searchDomain.unit')
+ globalProperties.$t('searchDomain.total') +
+ ': ' +
+ v +
+ ' ' +
+ globalProperties.$t('searchDomain.unit')
}
})
-const handleTableChange = (pag: { pageSize: number; current: number },
- filters: any,
- sorter: any) => {
+const handleTableChange = (
+ pag: { pageSize: number; current: number },
+ filters: any,
+ sorter: any
+) => {
searchDomain.paged.pageSize = pag.pageSize
searchDomain.paged.curPage = pag.current
searchDomain.onSearch()
- return;
+ return
}
</script>
<style lang="less" scoped>
diff --git a/ui-vue3/src/layout/index.vue b/ui-vue3/src/layout/index.vue
index 453c0aa..2c9a671 100644
--- a/ui-vue3/src/layout/index.vue
+++ b/ui-vue3/src/layout/index.vue
@@ -40,9 +40,7 @@
</transition>
</router-view>
</a-layout-content>
- <a-layout-footer
- class="layout-footer"
- >todo</a-layout-footer>
+ <a-layout-footer class="layout-footer">todo</a-layout-footer>
</a-layout>
</a-layout>
</div>
@@ -100,7 +98,7 @@
overflow-y: auto;
max-height: 88vh;
}
- .layout-footer{
+ .layout-footer {
height: 40px;
}
}
diff --git a/ui-vue3/src/layout/menu/layout_menu.vue b/ui-vue3/src/layout/menu/layout_menu.vue
index 8496a1a..970e446 100644
--- a/ui-vue3/src/layout/menu/layout_menu.vue
+++ b/ui-vue3/src/layout/menu/layout_menu.vue
@@ -49,7 +49,7 @@
const nowRoute = useRoute()
// load active menu
-let selectedKeys = computed(()=>[getLoadSelectedKeys(nowRoute.meta)])
+let selectedKeys = computed(() => [getLoadSelectedKeys(nowRoute.meta)])
let openKeys: any = reactive([])
function getLoadSelectedKeys(meta: RouterMeta): string {
return meta.tab || meta.hidden ? getLoadSelectedKeys(meta.parent?.meta!) : meta._router_key!
diff --git a/ui-vue3/src/layout/tab/layout_tab.vue b/ui-vue3/src/layout/tab/layout_tab.vue
index b5be875..0d68b4b 100644
--- a/ui-vue3/src/layout/tab/layout_tab.vue
+++ b/ui-vue3/src/layout/tab/layout_tab.vue
@@ -18,30 +18,30 @@
<div class="__container_router_tab_index">
<div :key="key">
<a-tabs
- v-if="tabRoute.meta.tab"
- @change="router.push({ name: activeKey || '' })"
- v-model:activeKey="activeKey"
+ v-if="tabRoute.meta.tab"
+ @change="router.push({ name: activeKey || '' })"
+ v-model:activeKey="activeKey"
>
<a-tab-pane :key="v.name" v-for="v in tabRouters">
<template #tab>
- <span>
- <Icon style="margin-bottom: -2px" :icon="v.meta.icon"></Icon>
- {{ $t(v.name) }}
- </span>
+ <span>
+ <Icon style="margin-bottom: -2px" :icon="v.meta.icon"></Icon>
+ {{ $t(v.name) }}
+ </span>
</template>
</a-tab-pane>
</a-tabs>
<a-spin class="tab-spin" :spinning="transitionFlag">
- <router-view v-show="!transitionFlag"/>
+ <router-view v-show="!transitionFlag" />
</a-spin>
</div>
</div>
</template>
<script setup lang="ts">
-import {computed, ref} from 'vue'
-import {Icon} from '@iconify/vue'
-import {useRoute, useRouter} from 'vue-router'
+import { computed, ref } from 'vue'
+import { Icon } from '@iconify/vue'
+import { useRoute, useRouter } from 'vue-router'
import _ from 'lodash'
const router = useRouter()
@@ -66,9 +66,8 @@
</script>
<style lang="less" scoped>
.__container_router_tab_index {
- :deep(.tab-spin){
+ :deep(.tab-spin) {
margin-top: 20vh;
}
}
-
</style>
diff --git a/ui-vue3/src/utils/DevToolUtil.ts b/ui-vue3/src/utils/DevToolUtil.ts
index fbcd7b1..ac13f61 100644
--- a/ui-vue3/src/utils/DevToolUtil.ts
+++ b/ui-vue3/src/utils/DevToolUtil.ts
@@ -15,25 +15,25 @@
* limitations under the License.
*/
-import {notification} from 'ant-design-vue'
+import { notification } from 'ant-design-vue'
/**
* get function invoke stack
* @param more Offset relative to the default stack number
*/
function getCurrentFunctionLocation(more = 0): string {
- try {
- throw new Error()
- } catch (error: any) {
- // error.stack
- const stackLines = error.stack.split('\n')
- // The forth line typically contains information about the calling location.
- const offset = 2 + more
- if (offset >= 0 && stackLines.length >= offset) {
- return stackLines[offset].trim()
- }
- return 'wrong location'
+ try {
+ throw new Error()
+ } catch (error: any) {
+ // error.stack
+ const stackLines = error.stack.split('\n')
+ // The forth line typically contains information about the calling location.
+ const offset = 2 + more
+ if (offset >= 0 && stackLines.length >= offset) {
+ return stackLines[offset].trim()
}
+ return 'wrong location'
+ }
}
/**
@@ -42,20 +42,19 @@
* @param todoDetail
*/
const todo = (todoDetail: string) => {
- notification.warn({
- message: `TODO: ${todoDetail} =>: ${devTool.getCurrentFunctionLocation(1)}`
- })
+ notification.warn({
+ message: `TODO: ${todoDetail} =>: ${devTool.getCurrentFunctionLocation(1)}`
+ })
}
const mockUrl = (raw: string) => {
- return RegExp(raw + ".*")
+ return RegExp(raw + '.*')
}
const devTool = {
- getCurrentFunctionLocation,
- todo,
- mockUrl,
+ getCurrentFunctionLocation,
+ todo,
+ mockUrl
}
-
export default devTool
diff --git a/ui-vue3/src/utils/SearchUtil.ts b/ui-vue3/src/utils/SearchUtil.ts
index 3a0c079..31e4980 100644
--- a/ui-vue3/src/utils/SearchUtil.ts
+++ b/ui-vue3/src/utils/SearchUtil.ts
@@ -18,11 +18,7 @@
import type { TableColumnsType } from 'ant-design-vue'
import { reactive } from 'vue'
-export type DICT_TYPE =
- 'SELECT'|
- 'BUTTON'|
- 'RADIO'
- ;
+export type DICT_TYPE = 'SELECT' | 'BUTTON' | 'RADIO'
export class SearchDomain {
// form of search
@@ -38,7 +34,7 @@
label: string
value: string
}
- ],
+ ]
dictType: DICT_TYPE
}
]
@@ -46,7 +42,7 @@
result: any
tableStyle: any
table: {
- loading?: boolean,
+ loading?: boolean
columns: TableColumnsType
} = { columns: [] }
paged = {
@@ -55,31 +51,36 @@
pageSize: 10
}
- constructor(query: any, searchApi: any, columns: TableColumnsType|any, paged?: any|undefined) {
+ constructor(
+ query: any,
+ searchApi: any,
+ columns: TableColumnsType | any,
+ paged?: any | undefined
+ ) {
this.params = query
this.queryForm = reactive({})
this.table.columns = columns
- query.forEach((c:any)=>{
- if(c.defaultValue) {
+ query.forEach((c: any) => {
+ if (c.defaultValue) {
this.queryForm[c.param] = c.defaultValue
}
})
- if(paged) {
- this.paged = {...this.paged, ...paged}
+ if (paged) {
+ this.paged = { ...this.paged, ...paged }
}
this.searchApi = searchApi
this.onSearch()
}
async onSearch() {
- this.table.loading = true;
- setTimeout(()=>{
- this.table.loading = false;
+ this.table.loading = true
+ setTimeout(() => {
+ this.table.loading = false
}, 5000)
let res = (await this.searchApi(this.queryForm || {})).data
this.result = res.data
this.paged.total = res.total
- this.table.loading = false;
+ this.table.loading = false
}
}
diff --git a/ui-vue3/src/views/resources/applications/index.vue b/ui-vue3/src/views/resources/applications/index.vue
index a003ebe..b8328e3 100644
--- a/ui-vue3/src/views/resources/applications/index.vue
+++ b/ui-vue3/src/views/resources/applications/index.vue
@@ -97,7 +97,7 @@
onMounted(() => {
searchDomain.tableStyle = {
- scrollY: '40vh',
+ scrollY: '40vh'
}
searchDomain.onSearch()
})
diff --git a/ui-vue3/src/views/resources/applications/tabs/config.vue b/ui-vue3/src/views/resources/applications/tabs/config.vue
index 081aa05..6bdd89e 100644
--- a/ui-vue3/src/views/resources/applications/tabs/config.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/config.vue
@@ -19,11 +19,10 @@
</template>
<script setup lang="ts">
-import {onMounted} from "vue";
+import { onMounted } from 'vue'
-onMounted(()=>{
+onMounted(() => {
console.log(333)
})
-
</script>
<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/applications/tabs/detail.vue b/ui-vue3/src/views/resources/applications/tabs/detail.vue
index 9a31f60..c24fc63 100644
--- a/ui-vue3/src/views/resources/applications/tabs/detail.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/detail.vue
@@ -15,50 +15,41 @@
~ limitations under the License.
-->
<template>
-
-<div class="__container_app_detail">
- <a-flex>
- <a-descriptions
- class="description-column" :column="2" layout="vertical">
- <a-descriptions-item
- v-for=" (v, key, idx) in apiData.detail?.data"
+ <div class="__container_app_detail">
+ <a-flex>
+ <a-descriptions class="description-column" :column="2" layout="vertical">
+ <a-descriptions-item
+ v-for="(v, key, idx) in apiData.detail?.data"
v-show="!!v"
- :labelStyle="{fontWeight: 'bold'}"
- :label="$t('applicationDomain.' + key)">
- <template #title>
- 111
- </template>
- <template v-if="v.length<3">
- <p v-for="item in v" class="description-item-content no-card" >
- {{ item }}
- </p>
- </template>
+ :labelStyle="{ fontWeight: 'bold' }"
+ :label="$t('applicationDomain.' + key)"
+ >
+ <template #title> 111 </template>
+ <template v-if="v.length < 3">
+ <p v-for="item in v" class="description-item-content no-card">
+ {{ item }}
+ </p>
+ </template>
- <a-card
- class="description-item-card"
- v-else>
- <p v-for="item in v"
- @click="copyIt(item)"
- class="description-item-content with-card" >
- {{ item }} <CopyOutlined />
- </p>
- </a-card>
- </a-descriptions-item>
- </a-descriptions>
- </a-flex>
-</div>
+ <a-card class="description-item-card" v-else>
+ <p v-for="item in v" @click="copyIt(item)" class="description-item-content with-card">
+ {{ item }} <CopyOutlined />
+ </p>
+ </a-card>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-flex>
+ </div>
</template>
<script setup lang="ts">
-import {
- PRIMARY_COLOR,
-} from '@/base/constants'
-import {getApplicationDetail} from "@/api/service/app";
-import {computed, onMounted, reactive, getCurrentInstance} from "vue";
-import {CopyOutlined} from "@ant-design/icons-vue"
+import { PRIMARY_COLOR } from '@/base/constants'
+import { getApplicationDetail } from '@/api/service/app'
+import { computed, onMounted, reactive, getCurrentInstance } from 'vue'
+import { CopyOutlined } from '@ant-design/icons-vue'
import useClipboard from 'vue-clipboard3'
-import {message} from "ant-design-vue";
-import type {ComponentInternalInstance} from "vue"
+import { message } from 'ant-design-vue'
+import type { ComponentInternalInstance } from 'vue'
const apiData: any = reactive({})
const {
appContext: {
@@ -66,33 +57,29 @@
}
} = <ComponentInternalInstance>getCurrentInstance()
-let __ = PRIMARY_COLOR;
+let __ = PRIMARY_COLOR
onMounted(async () => {
apiData.detail = await getApplicationDetail({})
})
-const toClipboard = useClipboard().toClipboard;
+const toClipboard = useClipboard().toClipboard
-
-function copyIt(v:string) {
- message.success(globalProperties.$t("messageDomain.success.copy"));
+function copyIt(v: string) {
+ message.success(globalProperties.$t('messageDomain.success.copy'))
toClipboard(v)
}
</script>
<style lang="less" scoped>
-
-.__container_app_detail{
- .description-item-content{
-
- &.no-card{
- padding-left: 20px;
- }
- &.with-card:hover{
+.__container_app_detail {
+ .description-item-content {
+ &.no-card {
+ padding-left: 20px;
+ }
+ &.with-card:hover {
color: v-bind('PRIMARY_COLOR');
}
}
- .description-item-card{
+ .description-item-card {
width: 80%;
}
-
}
</style>
diff --git a/ui-vue3/src/views/resources/applications/tabs/event.vue b/ui-vue3/src/views/resources/applications/tabs/event.vue
index a3b5c81..f584d4a 100644
--- a/ui-vue3/src/views/resources/applications/tabs/event.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/event.vue
@@ -19,11 +19,10 @@
</template>
<script setup lang="ts">
-import {onMounted} from "vue";
+import { onMounted } from 'vue'
-onMounted(()=>{
+onMounted(() => {
console.log(333)
})
-
</script>
<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/applications/tabs/instance.vue b/ui-vue3/src/views/resources/applications/tabs/instance.vue
index ac5f7da..53a010a 100644
--- a/ui-vue3/src/views/resources/applications/tabs/instance.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/instance.vue
@@ -37,21 +37,18 @@
<a-button type="link" @click="viewDetail(text)">{{ text }}</a-button>
</template>
<template v-if="column.dataIndex === 'deployState'">
- <a-tag
- :color="INSTANCE_DEPLOY_COLOR[text.toUpperCase()]"
- >{{text}}</a-tag>
+ <a-tag :color="INSTANCE_DEPLOY_COLOR[text.toUpperCase()]">{{ text }}</a-tag>
</template>
<template v-if="column.dataIndex === 'registerStates'">
- <a-tag
- :color="INSTANCE_REGISTER_COLOR[t.level.toUpperCase()]"
- v-for="t in text">{{t.label}}</a-tag>
+ <a-tag :color="INSTANCE_REGISTER_COLOR[t.level.toUpperCase()]" v-for="t in text">{{
+ t.label
+ }}</a-tag>
</template>
<template v-if="column.dataIndex === 'registerClusters'">
- <a-tag
- v-for="t in text">{{t}}</a-tag>
+ <a-tag v-for="t in text">{{ t }}</a-tag>
</template>
<template v-if="column.dataIndex === 'labels'">
- <a-tag :color="PRIMARY_COLOR" v-for="t in text">{{t}}</a-tag>
+ <a-tag :color="PRIMARY_COLOR" v-for="t in text">{{ t }}</a-tag>
</template>
</template>
</search-table>
@@ -59,18 +56,18 @@
</template>
<script setup lang="ts">
-import {onMounted, provide, reactive} from "vue";
-import {getClusterInfo} from "@/api/service/clusterInfo";
-import {getMetricsMetadata} from "@/api/service/serverInfo";
-import {Chart} from "@antv/g2";
-import {INSTANCE_DEPLOY_COLOR, INSTANCE_REGISTER_COLOR, PRIMARY_COLOR} from "@/base/constants";
-import {Icon} from "@iconify/vue";
-import SearchTable from "@/components/SearchTable.vue";
-import {SearchDomain} from "@/utils/SearchUtil";
-import {searchService} from "@/api/service/service";
-import {PROVIDE_INJECT_KEY} from "@/base/enums/ProvideInject";
-import {useRoute, useRouter} from "vue-router";
-import {getApplicationInstanceInfo, getApplicationInstanceStatistics} from "@/api/service/app";
+import { onMounted, provide, reactive } from 'vue'
+import { getClusterInfo } from '@/api/service/clusterInfo'
+import { getMetricsMetadata } from '@/api/service/serverInfo'
+import { Chart } from '@antv/g2'
+import { INSTANCE_DEPLOY_COLOR, INSTANCE_REGISTER_COLOR, PRIMARY_COLOR } from '@/base/constants'
+import { Icon } from '@iconify/vue'
+import SearchTable from '@/components/SearchTable.vue'
+import { SearchDomain } from '@/utils/SearchUtil'
+import { searchService } from '@/api/service/service'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import { useRoute, useRouter } from 'vue-router'
+import { getApplicationInstanceInfo, getApplicationInstanceStatistics } from '@/api/service/app'
let __null = PRIMARY_COLOR
let statisticsInfo = reactive({
@@ -78,8 +75,6 @@
report: <{ [key: string]: { value: string; icon: string } }>{}
})
-
-
onMounted(async () => {
let statistics = (await getApplicationInstanceStatistics({})).data
statisticsInfo.info = <{ [key: string]: string }>statistics
@@ -99,11 +94,10 @@
memory: {
icon: 'mdi:merge',
value: statisticsInfo.info.memoryTotal
- },
+ }
}
})
-
const columns = [
{
title: 'idx',
@@ -124,63 +118,63 @@
dataIndex: 'name',
key: 'name',
sorter: true,
- width: 200,
+ width: 200
},
{
title: 'instanceDomain.deployState',
dataIndex: 'deployState',
key: 'deployState',
sorter: true,
- width: 200,
+ width: 200
},
{
title: 'instanceDomain.deployCluster',
dataIndex: 'deployCluster',
key: 'deployCluster',
sorter: true,
- width: 200,
+ width: 200
},
{
title: 'instanceDomain.registerStates',
dataIndex: 'registerStates',
key: 'registerStates',
sorter: true,
- width: 200,
+ width: 200
},
{
title: 'instanceDomain.registerClusters',
dataIndex: 'registerClusters',
key: 'registerClusters',
sorter: true,
- width: 200,
+ width: 200
},
{
title: 'instanceDomain.cpu',
dataIndex: 'cpu',
key: 'cpu',
sorter: true,
- width: 150,
+ width: 150
},
{
title: 'instanceDomain.memory',
dataIndex: 'memory',
key: 'memory',
sorter: true,
- width: 150,
+ width: 150
},
{
title: 'instanceDomain.startTime',
dataIndex: 'startTime',
key: 'startTime',
sorter: true,
- width: 150,
+ width: 150
},
{
title: 'instanceDomain.registerTime',
dataIndex: 'registerTime',
key: 'registerTime',
sorter: true,
- width: 150,
+ width: 150
},
{
title: 'instanceDomain.labels',
@@ -188,43 +182,43 @@
key: 'labels',
sorter: true,
fixed: 'right',
- width: 200,
- },
+ width: 200
+ }
]
const searchDomain = reactive(
- new SearchDomain(
- [
- {
- label: '',
- param: 'type',
- defaultValue: 1,
- dict: [
- {label: 'ip', value: 1},
- {label: 'name', value: 2},
- {label: 'label', value: 3}
- ],
- style: {
- width: '100px',
- }
- },
- {
- label: '',
- param: 'search',
- style: {
- width: '300px',
- }
- },
+ new SearchDomain(
+ [
+ {
+ label: '',
+ param: 'type',
+ defaultValue: 1,
+ dict: [
+ { label: 'ip', value: 1 },
+ { label: 'name', value: 2 },
+ { label: 'label', value: 3 }
],
- getApplicationInstanceInfo,
- columns,
- {pageSize: 4}
- )
+ style: {
+ width: '100px'
+ }
+ },
+ {
+ label: '',
+ param: 'search',
+ style: {
+ width: '300px'
+ }
+ }
+ ],
+ getApplicationInstanceInfo,
+ columns,
+ { pageSize: 4 }
+ )
)
-onMounted(()=>{
+onMounted(() => {
searchDomain.tableStyle = {
- scrollX: '100',
+ scrollX: '100'
}
searchDomain.onSearch()
})
@@ -236,10 +230,8 @@
}
provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
-
</script>
<style lang="less" scoped>
-
.__container_app_instance {
.statistic {
width: 8vw;
diff --git a/ui-vue3/src/views/resources/applications/tabs/monitor.vue b/ui-vue3/src/views/resources/applications/tabs/monitor.vue
index 9d496cb..33615d6 100644
--- a/ui-vue3/src/views/resources/applications/tabs/monitor.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/monitor.vue
@@ -19,11 +19,10 @@
</template>
<script setup lang="ts">
-import {onMounted} from "vue";
+import { onMounted } from 'vue'
-onMounted(()=>{
+onMounted(() => {
console.log(333)
})
-
</script>
<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/applications/tabs/service.vue b/ui-vue3/src/views/resources/applications/tabs/service.vue
index 8ea7002..7dbd356 100644
--- a/ui-vue3/src/views/resources/applications/tabs/service.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/service.vue
@@ -42,19 +42,19 @@
</template>
<script setup lang="ts">
-import {computed, onMounted, reactive} from "vue";
-import ServiceList from "@/views/resources/services/search.vue"
-import {getClusterInfo} from "@/api/service/clusterInfo";
-import {getMetricsMetadata} from "@/api/service/serverInfo";
-import {Chart} from "@antv/g2";
-import {PRIMARY_COLOR} from "@/base/constants";
-import {Icon} from "@iconify/vue";
-import SearchTable from "@/components/SearchTable.vue";
-import {SearchDomain} from "@/utils/SearchUtil";
-import {searchService} from "@/api/service/service";
-import {provide} from "vue";
-import {PROVIDE_INJECT_KEY} from "@/base/enums/ProvideInject";
-import {useRoute, useRouter} from "vue-router";
+import { computed, onMounted, reactive } from 'vue'
+import ServiceList from '@/views/resources/services/search.vue'
+import { getClusterInfo } from '@/api/service/clusterInfo'
+import { getMetricsMetadata } from '@/api/service/serverInfo'
+import { Chart } from '@antv/g2'
+import { PRIMARY_COLOR } from '@/base/constants'
+import { Icon } from '@iconify/vue'
+import SearchTable from '@/components/SearchTable.vue'
+import { SearchDomain } from '@/utils/SearchUtil'
+import { searchService } from '@/api/service/service'
+import { provide } from 'vue'
+import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import { useRoute, useRouter } from 'vue-router'
let __null = PRIMARY_COLOR
let clusterInfo = reactive({
@@ -80,14 +80,12 @@
value: clusterInfo.info.consumers
}
}
-
})
-
const columns = [
{
title: 'idx',
- key: 'idx',
+ key: 'idx'
},
{
title: '服务',
@@ -127,28 +125,27 @@
]
const searchDomain = reactive(
- new SearchDomain(
- [
-
- {
- label: '',
- param: 'type',
- defaultValue: 1,
- dict: [
- {label: 'providers', value: 1},
- {label: 'consumers', value: 2}
- ],
- dictType: 'BUTTON'
- },
- {
- label: 'serviceName',
- param: 'serviceName',
- },
+ new SearchDomain(
+ [
+ {
+ label: '',
+ param: 'type',
+ defaultValue: 1,
+ dict: [
+ { label: 'providers', value: 1 },
+ { label: 'consumers', value: 2 }
],
- searchService,
- columns,
- {pageSize: 4}
- )
+ dictType: 'BUTTON'
+ },
+ {
+ label: 'serviceName',
+ param: 'serviceName'
+ }
+ ],
+ searchService,
+ columns,
+ { pageSize: 4 }
+ )
)
searchDomain.onSearch()
const route = useRoute()
@@ -159,16 +156,14 @@
}
provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
-
</script>
<style lang="less" scoped>
-
.__container_app_service {
.statistic {
width: 8vw;
}
:deep(.ant-card-body) {
- padding: 12px;
+ padding: 12px;
}
.statistic-card {
diff --git a/ui-vue3/src/views/resources/applications/tabs/tracing.vue b/ui-vue3/src/views/resources/applications/tabs/tracing.vue
index 798cc4b..75e8783 100644
--- a/ui-vue3/src/views/resources/applications/tabs/tracing.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/tracing.vue
@@ -15,15 +15,14 @@
~ limitations under the License.
-->
<template>
- <div class="__container_app_tracing">tracing todo </div>
+ <div class="__container_app_tracing">tracing todo</div>
</template>
<script setup lang="ts">
-import {onMounted} from "vue";
+import { onMounted } from 'vue'
-onMounted(()=>{
+onMounted(() => {
console.log(333)
})
-
</script>
<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/configuration.vue b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
index b571c72..26e4c98 100644
--- a/ui-vue3/src/views/resources/instances/tabs/configuration.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
@@ -22,7 +22,9 @@
<template v-slot:label>
{{ $t('instanceDomain.executionLog') }}
<a-tooltip placement="topLeft">
- <template #title> {{ $t('instanceDomain.enableAppInstanceLogs') }}(provider.accesslog) </template>
+ <template #title>
+ {{ $t('instanceDomain.enableAppInstanceLogs') }}(provider.accesslog)
+ </template>
<Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
</a-tooltip>
</template>
@@ -38,7 +40,6 @@
<!-- retry count -->
<a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-
<template v-slot:label>
{{ $t('instanceDomain.retryCount') }}
<a-tooltip placement="topLeft">
@@ -51,11 +52,12 @@
<!-- Load Balance -->
<a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-
<template v-slot:label>
{{ $t('instanceDomain.loadBalance') }}
<a-tooltip placement="topLeft">
- <template #title>{{ $t('instanceDomain.appServiceLoadBalance') }}(provider.loadbalance)</template>
+ <template #title
+ >{{ $t('instanceDomain.appServiceLoadBalance') }}(provider.loadbalance)</template
+ >
<Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
</a-tooltip>
</template>
@@ -64,11 +66,12 @@
<!-- timeout -->
<a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-
<template v-slot:label>
{{ $t('instanceDomain.timeout_ms') }}
<a-tooltip placement="topLeft">
- <template #title> {{ $t('instanceDomain.appServiceTimeout') }}(provider.timeout) </template>
+ <template #title>
+ {{ $t('instanceDomain.appServiceTimeout') }}(provider.timeout)
+ </template>
<Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
</a-tooltip>
</template>
@@ -78,7 +81,6 @@
<!-- Cluster approach -->
<a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
-
<template v-slot:label>
{{ $t('instanceDomain.clusterApproach') }}
<a-tooltip placement="topLeft">
diff --git a/ui-vue3/src/views/resources/instances/tabs/details.vue b/ui-vue3/src/views/resources/instances/tabs/details.vue
index 6bb6aca..dbac10f 100644
--- a/ui-vue3/src/views/resources/instances/tabs/details.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/details.vue
@@ -18,96 +18,143 @@
<template>
<div class="__container_app_detail">
<a-flex>
-
<a-descriptions title="" layout="vertical" :column="2">
<!-- instanceName -->
- <a-descriptions-item :label="$t('instanceDomain.instanceName')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.instanceName')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph copyable>
{{ instanceName }}
</a-typography-paragraph>
</a-descriptions-item>
<!-- Creation time -->
- <a-descriptions-item :label="$t('instanceDomain.creationTime_k8s')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.creationTime_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
</a-descriptions-item>
<!-- deployState -->
- <a-descriptions-item :label="$t('instanceDomain.deployState')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.deployState')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<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('instanceDomain.startTime_k8s')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.startTime_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
</a-descriptions-item>
<!-- registerStates -->
- <a-descriptions-item :label="$t('instanceDomain.registerStates')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.registerStates')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<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('instanceDomain.registerTime')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.registerTime')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
</a-descriptions-item>
<!-- instanceIP -->
- <a-descriptions-item :label="$t('instanceDomain.instanceIP')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.instanceIP')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph copyable> 192.168.0.1 </a-typography-paragraph>
</a-descriptions-item>
<!-- deploy cluster -->
- <a-descriptions-item :label="$t('instanceDomain.deployCluster')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.deployCluster')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
</a-descriptions-item>
<!-- Dubbo Port -->
- <a-descriptions-item :label="$t('instanceDomain.dubboPort')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.dubboPort')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph copyable> 2088 </a-typography-paragraph>
</a-descriptions-item>
<!-- Register cluster -->
- <a-descriptions-item :label="$t('instanceDomain.registerCluster')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.registerCluster')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
</a-descriptions-item>
<!-- whichApplication -->
- <a-descriptions-item :label="$t('instanceDomain.whichApplication')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.whichApplication')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-link @click="checkApplication()"> shop-b </a-typography-link>
</a-descriptions-item>
<!-- Node IP -->
- <a-descriptions-item :label="$t('instanceDomain.node')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.node')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph copyable> 30.33.0.1 </a-typography-paragraph>
</a-descriptions-item>
<!-- Owning workload(k8s) -->
- <a-descriptions-item :label="$t('instanceDomain.owningWorkload_k8s')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.owningWorkload_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph> shop-user-base </a-typography-paragraph>
</a-descriptions-item>
<!-- image -->
- <a-descriptions-item :label="$t('instanceDomain.instanceImage_k8s')" :labelStyle="{ fontWeight: 'bold' }">
+ <a-descriptions-item
+ :label="$t('instanceDomain.instanceImage_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
<a-typography-paragraph copyable>
apache/org.apahce.dubbo.samples.shop-user:v1
</a-typography-paragraph>
</a-descriptions-item>
<!-- instanceLabel -->
- <a-descriptions-item :label="$t('instanceDomain.instanceLabel')" :labelStyle="{ fontWeight: 'bold' }">
- <a-card class="description-item-card">
+ <a-descriptions-item
+ :label="$t('instanceDomain.instanceLabel')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-card class="description-item-card">
<a-tag>app=shop-user</a-tag>
<a-tag>version=v1</a-tag>
<a-tag>region=shenzhen</a-tag>
- </a-card>
+ </a-card>
</a-descriptions-item>
<!-- health examination -->
- <a-descriptions-item :label="$t('instanceDomain.healthExamination_k8s')" :labelStyle="{ fontWeight: 'bold' }">
- <a-card class="description-item-card">
+ <a-descriptions-item
+ :label="$t('instanceDomain.healthExamination_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-card class="description-item-card">
<p class="white_space">启动探针(StartupProbe):关闭</p>
<p class="white_space">就绪探针(ReadinessProbe):开启 类型: Http 端口:22222</p>
<p class="white_space">存活探针(LivenessProbe):开启 类型: Http 端口:22222</p>
@@ -116,7 +163,6 @@
</a-descriptions>
</a-flex>
</div>
-
</template>
<script lang="ts" setup>
@@ -126,8 +172,7 @@
const instanceName = ref('shop-user-base-7e33f1e')
// Click on the application name to view the application
-const checkApplication = () => { }
+const checkApplication = () => {}
</script>
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
index e022898..6e67003 100644
--- a/ui-vue3/src/views/resources/services/tabs/debug.vue
+++ b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -61,9 +61,8 @@
</template>
<script setup lang="ts">
-import {reactive, ref} from 'vue'
-import MonacoEditor from '@/components/editor/MonacoEditor.vue';
-
+import { reactive, ref } from 'vue'
+import MonacoEditor from '@/components/editor/MonacoEditor.vue'
const methodTabs = reactive([
'login',
