feat(#238):
Issue about incorporating custom components within a tab layout.
diff --git a/ui-vue3/src/base/constants.ts b/ui-vue3/src/base/constants.ts
index 08aa943..5fbe6ff 100644
--- a/ui-vue3/src/base/constants.ts
+++ b/ui-vue3/src/base/constants.ts
@@ -15,8 +15,12 @@
* limitations under the License.
*/
+import type { Component } from 'vue'
import { computed, h, reactive, ref } from 'vue'
+import type { RouteRecordType } from '@/router/defaultRoutes'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+// 2aacb8
export const PRIMARY_COLOR_DEFAULT = '#17b392'
export const LOCAL_STORAGE_LOCALE = 'LOCAL_STORAGE_LOCALE'
@@ -31,13 +35,17 @@
HEALTHY: 'green'
}
-export const TAB_HEADER_TITLE_VNODE = reactive({
- vnode: h('div', 'something')
-})
-export const TAB_HEADER_TITLE = {
+export const TAB_HEADER_TITLE: Component = {
functional: true,
- render: () => {
- return TAB_HEADER_TITLE_VNODE.vnode
+ props: ['route'],
+ render: (
+ a: any,
+ b: any,
+ c: { [key: string]: RouteRecordType & RouteLocationNormalizedLoaded }
+ ) => {
+ let route = c.route
+ let header: any = route.meta?.slots?.header
+ return h(header) || h('div', route.params?.pathId)
// console.log(h)
// return h("div", "foo")
}
diff --git a/ui-vue3/src/components/SearchTable.vue b/ui-vue3/src/components/SearchTable.vue
index db40551..1474754 100644
--- a/ui-vue3/src/components/SearchTable.vue
+++ b/ui-vue3/src/components/SearchTable.vue
@@ -151,7 +151,6 @@
}
})
const pagination = computed(() => {
- console.log(pagination)
return {
pageSize: searchDomain.paged.pageSize,
current: searchDomain.paged.curPage,
diff --git a/ui-vue3/src/layout/index.vue b/ui-vue3/src/layout/index.vue
index 06f9199..82be705 100644
--- a/ui-vue3/src/layout/index.vue
+++ b/ui-vue3/src/layout/index.vue
@@ -70,10 +70,12 @@
transitionFlag.value = true
}, 500)
})
-TAB_HEADER_TITLE_VNODE.vnode = h('div', route.params?.pathId)
</script>
<style lang="less" scoped>
.__container_layout_index {
+ :deep(.ant-layout-content) {
+ padding: 16px !important;
+ }
.logo {
height: 40px;
width: auto;
diff --git a/ui-vue3/src/layout/tab/layout_tab.vue b/ui-vue3/src/layout/tab/layout_tab.vue
index 45f5e11..33bc6c0 100644
--- a/ui-vue3/src/layout/tab/layout_tab.vue
+++ b/ui-vue3/src/layout/tab/layout_tab.vue
@@ -95,7 +95,7 @@
}
.back {
- font-size: 20px;
+ font-size: 24px;
margin-bottom: -2px;
color: v-bind('PRIMARY_COLOR');
}
diff --git a/ui-vue3/src/router/RouterMeta.ts b/ui-vue3/src/router/RouterMeta.ts
index f3a407b..0950b87 100644
--- a/ui-vue3/src/router/RouterMeta.ts
+++ b/ui-vue3/src/router/RouterMeta.ts
@@ -16,6 +16,7 @@
*/
import type { RouteMeta } from 'vue-router'
import type { RouteRecordType } from '@/router/defaultRoutes'
+import type { Component } from 'vue'
export interface RouterMeta extends RouteMeta {
icon?: string
@@ -25,4 +26,5 @@
tab?: boolean
_router_key?: string
parent?: RouteRecordType
+ slots?: { [key: string]: Component }
}
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index 361d7ef..dd5b97d 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -19,6 +19,7 @@
import type { RouteRecordRaw } from 'vue-router'
import LayoutTab from '../layout/tab/layout_tab.vue'
import _ from 'lodash'
+import AppTabHeaderSlot from '@/views/resources/applications/slots/AppTabHeaderSlot.vue'
export declare type RouteRecordType = RouteRecordRaw & {
key?: string
@@ -58,7 +59,10 @@
component: LayoutTab,
redirect: 'index',
meta: {
- tab_parent: true
+ tab_parent: true,
+ slots: {
+ header: AppTabHeaderSlot
+ }
},
children: [
{
diff --git a/ui-vue3/src/views/home/index.vue b/ui-vue3/src/views/home/index.vue
index 54d0a23..1898610 100644
--- a/ui-vue3/src/views/home/index.vue
+++ b/ui-vue3/src/views/home/index.vue
@@ -32,37 +32,43 @@
</a-flex>
</a-card>
</a-flex>
- <a-descriptions
- title=" "
- bordered
- :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
- layout="horizontal"
- >
- <a-descriptions-item label="versions">
- <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.versions">{{ v }}</a-tag>
- </a-descriptions-item>
- <a-descriptions-item label="protocols">
- <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.protocols">{{ v }}</a-tag>
- </a-descriptions-item>
- <a-descriptions-item label="configCenter">{{
- metricsMetadata.info.configCenter
- }}</a-descriptions-item>
- <a-descriptions-item label="registry">{{
- metricsMetadata.info.registry
- }}</a-descriptions-item>
- <a-descriptions-item label="metadataCenter">{{
- metricsMetadata.info.metadataCenter
- }}</a-descriptions-item>
- <a-descriptions-item label="grafana">{{ metricsMetadata.info.grafana }}</a-descriptions-item>
- <a-descriptions-item label="prometheus">{{
- metricsMetadata.info.prometheus
- }}</a-descriptions-item>
- <a-descriptions-item label="Remark">empty</a-descriptions-item>
- <a-descriptions-item label="rules">
- <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.rules">{{ v }}</a-tag>
- </a-descriptions-item>
- </a-descriptions>
- <div id="report_container"></div>
+ <a-card class="card">
+ <a-descriptions
+ title=" "
+ bordered
+ :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
+ layout="horizontal"
+ >
+ <a-descriptions-item label="versions">
+ <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.versions">{{ v }}</a-tag>
+ </a-descriptions-item>
+ <a-descriptions-item label="protocols">
+ <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.protocols">{{ v }}</a-tag>
+ </a-descriptions-item>
+ <a-descriptions-item label="configCenter">{{
+ metricsMetadata.info.configCenter
+ }}</a-descriptions-item>
+ <a-descriptions-item label="registry">{{
+ metricsMetadata.info.registry
+ }}</a-descriptions-item>
+ <a-descriptions-item label="metadataCenter">{{
+ metricsMetadata.info.metadataCenter
+ }}</a-descriptions-item>
+ <a-descriptions-item label="grafana">{{
+ metricsMetadata.info.grafana
+ }}</a-descriptions-item>
+ <a-descriptions-item label="prometheus">{{
+ metricsMetadata.info.prometheus
+ }}</a-descriptions-item>
+ <a-descriptions-item label="Remark">empty</a-descriptions-item>
+ <a-descriptions-item label="rules">
+ <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.rules">{{ v }}</a-tag>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-card>
+ <a-card class="card">
+ <div id="report_container"></div>
+ </a-card>
</div>
</template>
@@ -165,5 +171,8 @@
font-size: 20px;
color: white;
}
+ .card {
+ margin-top: 10px;
+ }
}
</style>
diff --git a/ui-vue3/src/views/resources/applications/index.vue b/ui-vue3/src/views/resources/applications/index.vue
index a0f3808..e23b0d9 100644
--- a/ui-vue3/src/views/resources/applications/index.vue
+++ b/ui-vue3/src/views/resources/applications/index.vue
@@ -19,7 +19,7 @@
<search-table :search-domain="searchDomain">
<template #bodyCell="{ text, record, index, column }">
<template v-if="column.dataIndex === 'registerClusters'">
- <a-tag v-for="t in text" color="grey">
+ <a-tag v-for="t in text">
{{ t }}
</a-tag>
</template>
diff --git a/ui-vue3/src/views/resources/applications/slots/AppTabHeaderSlot.vue b/ui-vue3/src/views/resources/applications/slots/AppTabHeaderSlot.vue
new file mode 100644
index 0000000..8c92eeb
--- /dev/null
+++ b/ui-vue3/src/views/resources/applications/slots/AppTabHeaderSlot.vue
@@ -0,0 +1,44 @@
+<!--
+ ~ 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>
+ <!-- example like blow-->
+ <div class="__container_AppTabHeaderSlot">
+ <a-row>
+ <a-col :span="12">
+ <span class="header-desc"
+ >{{ $t('applicationDomain.name') }}: {{ route.params?.pathId }}</span
+ >
+ </a-col>
+ <!-- <a-col :span="12">-->
+ <!-- <a-button>custom function</a-button>-->
+ <!-- </a-col>-->
+ </a-row>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+const route = useRoute()
+</script>
+<style lang="less" scoped>
+.__container_AppTabHeaderSlot {
+ .header-desc {
+ line-height: 30px;
+ vertical-align: center;
+ }
+}
+</style>
