This is an automated email from the ASF dual-hosted git repository.
wuzhiguo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/bigtop-manager.git
The following commit(s) were added to refs/heads/main by this push:
new 733a8b98 BIGTOP-4403: Split infra page into service and job tabs (#204)
733a8b98 is described below
commit 733a8b981175e54d5019cc67bbe021fed3c36cf5
Author: Fdefined <[email protected]>
AuthorDate: Thu Apr 10 14:23:13 2025 +0800
BIGTOP-4403: Split infra page into service and job tabs (#204)
---
bigtop-manager-ui/.env.development | 1 +
bigtop-manager-ui/.env.production | 3 +-
bigtop-manager-ui/src/api/service/types.ts | 1 +
.../create-service/components/service-selector.vue | 47 +++-
bigtop-manager-ui/src/components/job/index.vue | 8 +-
.../service-management/components.vue | 0
.../components/capture-snapshot.vue | 0
.../components/snapshot-management.vue | 0
.../service-management/configs.vue | 0
.../service-management/index.vue | 0
.../service-management/overview.vue | 4 +-
bigtop-manager-ui/src/layouts/header.vue | 5 +-
.../pages/cluster-manage/infrastructures/index.vue | 285 +++------------------
.../infrastructures/{index.vue => service.vue} | 57 +----
.../src/router/routes/modules/clusters.ts | 21 +-
15 files changed, 121 insertions(+), 311 deletions(-)
diff --git a/bigtop-manager-ui/.env.development
b/bigtop-manager-ui/.env.development
index 6346532b..c968a936 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -19,3 +19,4 @@ VITE_APP_BASE='/'
VITE_APP_BASE_URL='http://localhost:8080'
VITE_APP_BASE_API='/api'
VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'
+VITE_BIGTOP_MANAGER_DOC_URL='https://github.com/apache/bigtop-manager/tree/main/docs'
diff --git a/bigtop-manager-ui/.env.production
b/bigtop-manager-ui/.env.production
index 90729cf3..e96d4d88 100644
--- a/bigtop-manager-ui/.env.production
+++ b/bigtop-manager-ui/.env.production
@@ -18,4 +18,5 @@ NODE_ENV=production
VITE_APP_BASE='/ui/'
VITE_APP_BASE_URL=''
VITE_APP_BASE_API='/api'
-VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'
\ No newline at end of file
+VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'
+VITE_BIGTOP_MANAGER_DOC_URL='https://github.com/apache/bigtop-manager/tree/main/docs'
diff --git a/bigtop-manager-ui/src/api/service/types.ts
b/bigtop-manager-ui/src/api/service/types.ts
index f244e206..c6d12c9f 100644
--- a/bigtop-manager-ui/src/api/service/types.ts
+++ b/bigtop-manager-ui/src/api/service/types.ts
@@ -44,6 +44,7 @@ export interface ServiceVO {
status: ServiceStatusType
user?: string
version?: string
+ license?: string
isInstalled?: boolean
metrics?: boolean
kerberos?: boolean
diff --git
a/bigtop-manager-ui/src/components/create-service/components/service-selector.vue
b/bigtop-manager-ui/src/components/create-service/components/service-selector.vue
index 464242b6..20060470 100644
---
a/bigtop-manager-ui/src/components/create-service/components/service-selector.vue
+++
b/bigtop-manager-ui/src/components/create-service/components/service-selector.vue
@@ -18,7 +18,7 @@
-->
<script setup lang="ts">
- import { computed, onActivated, reactive, ref, toRefs } from 'vue'
+ import { computed, onActivated, reactive, ref, shallowRef, toRefs } from
'vue'
import { usePngImage } from '@/utils/tools'
import useCreateService from './use-create-service'
import type { ExpandServiceVO } from '@/store/stack'
@@ -31,6 +31,7 @@
}
const searchStr = ref('')
+ const licenseOfConflictService = shallowRef(['AGPL-3.0', 'GPLv2'])
const state = reactive<State>({
isAddableData: [],
selectedData: []
@@ -151,6 +152,7 @@
) => {
const inherentService = inherentServices.filter((v) => v.name ===
routeParams.value.service)[0]
const installedService = {
...installedServiceMap.get(routeParams.value.service)! }
+ installedService.license = inherentService.license
const map = new Map(installedService.components!.map((item) => [item.name,
item]))
inherentService.components!.forEach((item) => {
!map.has(item.name) && map.set(item.name, { ...item, hosts: [],
uninstall: true })
@@ -210,13 +212,18 @@
</template>
<a-list-item-meta>
<template #title>
- <div class="ellipsis item-name" :title="item.displayName">
- <template v-for="(fragment, i) in
splitSearchStr(item.displayName)">
- <mark v-if="fragment.toLowerCase() ===
searchStr.toLowerCase()" :key="i" class="highlight">
- {{ fragment }}
- </mark>
- <template v-else>{{ fragment }}</template>
- </template>
+ <div class="item-name-wrp">
+ <div class="ellipsis item-name" :title="item.displayName">
+ <template v-for="(fragment, i) in
splitSearchStr(item.displayName)">
+ <mark v-if="fragment.toLowerCase() ===
searchStr.toLowerCase()" :key="i" class="highlight">
+ {{ fragment }}
+ </mark>
+ <template v-else>{{ fragment }}</template>
+ </template>
+ </div>
+ <a-tag
:color="licenseOfConflictService.includes(item.license) ? 'error' : 'success'">
+ <span class="item-tag">{{ item.license }}</span>
+ </a-tag>
</div>
</template>
<template #description>
@@ -257,8 +264,13 @@
</template>
<a-list-item-meta>
<template #title>
- <div class="ellipsis item-name"
:data-tooltip="item.displayName">
- {{ item.displayName }}
+ <div class="item-name-wrp">
+ <div class="ellipsis item-name"
:data-tooltip="item.displayName">
+ {{ item.displayName }}
+ </div>
+ <a-tag
:color="licenseOfConflictService.includes(item.license) ? 'error' : 'success'">
+ <span class="item-tag">{{ item.license }}</span>
+ </a-tag>
</div>
</template>
<template #description>
@@ -288,8 +300,19 @@
padding: 0px;
}
- .item-name {
- font-size: 16px;
+ .item-name-wrp {
+ display: flex;
+ gap: 8px;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ .item-name {
+ flex: 1;
+ font-size: 16px;
+ }
+ .item-tag {
+ font-weight: normal;
+ line-height: 22px;
+ }
}
.service-selector {
diff --git a/bigtop-manager-ui/src/components/job/index.vue
b/bigtop-manager-ui/src/components/job/index.vue
index 2bdb7f88..3f2bfe00 100644
--- a/bigtop-manager-ui/src/components/job/index.vue
+++ b/bigtop-manager-ui/src/components/job/index.vue
@@ -18,15 +18,15 @@
-->
<script setup lang="ts">
- import { computed, ComputedRef, onActivated, onDeactivated, reactive, ref,
shallowRef } from 'vue'
+ import { computed, ComputedRef, onActivated, onDeactivated, reactive, ref,
shallowRef, useAttrs } from 'vue'
import { useI18n } from 'vue-i18n'
- import { useRoute } from 'vue-router'
import { TableColumnType, TableProps } from 'ant-design-vue'
import { getJobList, getStageList, getTaskList } from '@/api/job'
import useBaseTable from '@/composables/use-base-table'
import LogsView, { type LogViewProps } from '@/components/log-view/index.vue'
import CustomProgress from './custom-progress.vue'
import type { JobVO, StageVO, StateType, TaskListParams, TaskVO } from
'@/api/job/types'
+ import type { ClusterVO } from '@/api/cluster/types'
interface BreadcrumbItem {
id: string
@@ -34,12 +34,12 @@
}
const POLLING_INTERVAL = 3000
const { t } = useI18n()
- const route = useRoute()
+ const clusterInfo = useAttrs() as ClusterVO
const pollingIntervalId = ref<any>(null)
const breadcrumbs = ref<BreadcrumbItem[]>([
{
name: computed(() => t('job.job_list')),
- id: `clusterId-${route.params.id}`
+ id: `clusterId-${clusterInfo.id}`
}
])
const status = shallowRef<Record<StateType, string>>({
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/components.vue
b/bigtop-manager-ui/src/components/service-management/components.vue
similarity index 100%
rename from
bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/components.vue
rename to bigtop-manager-ui/src/components/service-management/components.vue
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/components/capture-snapshot.vue
b/bigtop-manager-ui/src/components/service-management/components/capture-snapshot.vue
similarity index 100%
rename from
bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/components/capture-snapshot.vue
rename to
bigtop-manager-ui/src/components/service-management/components/capture-snapshot.vue
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/components/snapshot-management.vue
b/bigtop-manager-ui/src/components/service-management/components/snapshot-management.vue
similarity index 100%
rename from
bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/components/snapshot-management.vue
rename to
bigtop-manager-ui/src/components/service-management/components/snapshot-management.vue
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/configs.vue
b/bigtop-manager-ui/src/components/service-management/configs.vue
similarity index 100%
rename from
bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/configs.vue
rename to bigtop-manager-ui/src/components/service-management/configs.vue
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/index.vue
b/bigtop-manager-ui/src/components/service-management/index.vue
similarity index 100%
rename from
bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/index.vue
rename to bigtop-manager-ui/src/components/service-management/index.vue
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/overview.vue
b/bigtop-manager-ui/src/components/service-management/overview.vue
similarity index 98%
rename from
bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/overview.vue
rename to bigtop-manager-ui/src/components/service-management/overview.vue
index ee322efc..9ede9128 100644
---
a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service-management/overview.vue
+++ b/bigtop-manager-ui/src/components/service-management/overview.vue
@@ -21,8 +21,8 @@
import { computed, ref, shallowRef, useAttrs } from 'vue'
import { useI18n } from 'vue-i18n'
import { CommonStatus, CommonStatusTexts } from '@/enums/state'
- import GaugeChart from '../components/gauge-chart.vue'
- import CategoryChart from '../components/category-chart.vue'
+ import GaugeChart from
'@/pages/cluster-manage/cluster/components/gauge-chart.vue'
+ import CategoryChart from
'@/pages/cluster-manage/cluster/components/category-chart.vue'
import type { ServiceVO, ServiceStatusType } from '@/api/service/types'
type TimeRangeText = '1m' | '15m' | '30m' | '1h' | '6h' | '30h'
diff --git a/bigtop-manager-ui/src/layouts/header.vue
b/bigtop-manager-ui/src/layouts/header.vue
index 1ce93fc3..201da620 100644
--- a/bigtop-manager-ui/src/layouts/header.vue
+++ b/bigtop-manager-ui/src/layouts/header.vue
@@ -41,6 +41,7 @@
const { headerSelectedKey, headerMenus } = toRefs(props)
const githubUrl = import.meta.env.VITE_GITHUB_URL
+ const bigtopMangerDocURL = import.meta.env.VITE_BIGTOP_MANAGER_DOC_URL
const spaceSize = ref(16)
const aiAssistantRef = ref<InstanceType<typeof AiAssistant> | null>(null)
@@ -80,7 +81,9 @@
</a>
</div>
<div class="header-item">
- <svg-icon name="book" />
+ <a :href="bigtopMangerDocURL" target="_blank">
+ <svg-icon name="book" />
+ </a>
</div>
</a-space>
</div>
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
index c4f7b4f3..1824c0d0 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
@@ -18,272 +18,65 @@
-->
<script setup lang="ts">
- import { computed, shallowRef, onMounted, toRefs } from 'vue'
- import { usePngImage } from '@/utils/tools'
+ import { computed, ref, shallowRef } from 'vue'
import { useI18n } from 'vue-i18n'
- import { CommonStatus, CommonStatusTexts } from '@/enums/state'
- import { useServiceStore } from '@/store/service'
import { useRouter } from 'vue-router'
- import { useJobProgress } from '@/store/job-progress'
- import { Empty } from 'ant-design-vue'
- import type { ServiceListParams, ServiceStatusType, ServiceVO } from
'@/api/service/types'
- import type { GroupItem } from '@/components/common/button-group/types'
- import type { FilterFormItem } from '@/components/common/filter-form/types'
- import type { Command, CommandRequest } from '@/api/command/types'
+ import Service from './service.vue'
+ import Job from '@/components/job/index.vue'
- type GroupItemActionType = keyof typeof Command | 'More'
+ import type { TabItem } from '@/components/common/main-card/types'
+ import type { GroupItem } from '@/components/common/button-group/types'
+ import type { ClusterVO } from '@/api/cluster/types'
const { t } = useI18n()
const router = useRouter()
- const jobProgressStore = useJobProgress()
- const serviceStore = useServiceStore()
- const { services, loading } = toRefs(serviceStore)
-
- const statusColors = shallowRef<Record<ServiceStatusType, keyof typeof
CommonStatusTexts>>({
- 1: 'healthy',
- 2: 'unhealthy',
- 3: 'unknown'
+ const activeKey = ref('1')
+ const currCluster = shallowRef<ClusterVO>({
+ id: 0,
+ name: '0'
})
- const filterFormItems = computed((): FilterFormItem[] => [
- { type: 'search', key: 'serviceName', label: t('service.name') },
+
+ const tabs = computed((): TabItem[] => [
{
- type: 'status',
- key: 'restartFlag',
- label: t('service.required_restart'),
- options: [
- { label: t('common.required'), value: 1 },
- { label: t('common.not_required'), value: 2 }
- ]
+ key: '1',
+ title: t('common.service')
},
{
- type: 'status',
- key: 'status',
- label: t('common.status'),
- options: [
- { label: t(`common.${statusColors.value[1]}`), value: 1 },
- { label: t(`common.${statusColors.value[2]}`), value: 2 },
- { label: t(`common.${statusColors.value[3]}`), value: 3 }
- ]
+ key: '2',
+ title: t('common.job')
}
])
- const actionGroups = shallowRef<GroupItem<GroupItemActionType>[]>([
- {
- action: 'Start',
- icon: 'start',
- clickEvent: (item, args) => {
- infraAction(item!.action!, args)
- }
- },
- {
- action: 'Stop',
- icon: 'stop',
- clickEvent: (item, args) => {
- infraAction(item!.action!, args)
- }
- },
- {
- action: 'Restart',
- icon: 'restart',
- clickEvent: (item, args) => {
- infraAction(item!.action!, args)
- }
- },
+
+ const actionGroup = computed<GroupItem[]>(() => [
{
- action: 'More',
- icon: 'more_line',
- clickEvent: (item, args) => {
- infraAction(item!.action!, args)
- }
+ shape: 'default',
+ type: 'primary',
+ text: t('common.add', [t('common.service')]),
+ clickEvent: () => addService && addService()
}
])
- const infraAction = async (command: GroupItemActionType, service: ServiceVO)
=> {
- if (command !== 'More') {
- const execCommandParams = {
- command: command,
- clusterId: 0,
- commandLevel: 'service',
- serviceCommands: [{ serviceName: service.name, installed: true }]
- } as CommandRequest
- jobProgressStore.processCommand(execCommandParams, getServices)
- }
- }
-
- const getServices = async (filters?: ServiceListParams) => {
- await serviceStore.getServices(0, filters)
- }
+ const getCompName = computed(() => {
+ const components = [Service, Job]
+ return components[parseInt(activeKey.value) - 1]
+ })
- const viewServiceDetail = (payload: ServiceVO) => {
- router.push({
- name: 'InfraServiceDetail',
- params: { id: 0, service: payload.name, cluster: 0, serviceId:
payload.id }
- })
+ const addService: GroupItem['clickEvent'] = () => {
+ router.push({ name: 'CreateInfraService', params: { id: 0, cluster: 0,
creationMode: 'public' } })
}
-
- onMounted(async () => {
- await getServices()
- })
</script>
<template>
- <a-spin :spinning="loading" class="service">
- <div class="infra-header">
- <div>
- <div class="menu-title">{{ $t('menu.infra') }}</div>
- <div class="menu-info">{{ $t('infra.info') }}</div>
- </div>
- <a-button
- type="primary"
- @click="
- () => $router.push({ name: 'CreateInfraService', params: { id: 0,
cluster: '', creationMode: 'public' } })
- "
- >
- {{ $t('infra.action') }}
- </a-button>
- </div>
- <div class="infra-body">
- <filter-form :filter-items="filterFormItems" @filter="getServices" />
- <a-empty v-if="services.length == 0" style="width: 100%"
:image="Empty.PRESENTED_IMAGE_SIMPLE" />
- <div v-else class="service-item-wrp">
- <a-card
- v-for="item in services"
- :key="item.name"
- :hoverable="true"
- class="service-item"
- @click="viewServiceDetail(item)"
- >
- <div class="header">
- <div class="header-base-wrp">
- <a-avatar v-if="item.name"
:src="usePngImage(item.name.toLowerCase())" :size="42" class="header-icon" />
- <div class="header-base-title">
- <span>{{ `${item.displayName}` }}</span>
- <span class="small-gray">{{ item.version }}</span>
- </div>
- <div class="header-base-status">
- <a-tag :color="CommonStatus[statusColors[item.status]]">
- <div class="header-base-status-inner">
- <status-dot
:color="CommonStatus[statusColors[item.status]]" />
- <span class="small">{{
$t(`common.${statusColors[item.status]}`) }}</span>
- </div>
- </a-tag>
- </div>
- </div>
- <div class="header-restart-status">
- <span class="small-gray">{{ `${$t('common.restart')}` }}</span>
- <status-dot :color="CommonStatus[statusColors[item.status]]" />
- <span class="small">{{ `${item.restartFlag ?
$t('common.required') : $t('common.not_required')}` }}</span>
- </div>
- </div>
- <div class="item-content" @click.stop>
- <button-group :auto="true" :space="0" :payload="item"
:groups="actionGroups">
- <template #icon="{ item: groupItem }">
- <svg-icon :name="groupItem.icon || ''" />
- </template>
- </button-group>
- </div>
- </a-card>
- </div>
- </div>
- </a-spin>
+ <div>
+ <header-card :title="$t('menu.infra')" :show-avatar="false"
:desc="$t('infra.info')" :action-groups="actionGroup" />
+ <main-card v-model:active-key="activeKey" :tabs="tabs">
+ <template #tab-item>
+ <keep-alive>
+ <component :is="getCompName" v-bind="currCluster"></component>
+ </keep-alive>
+ </template>
+ </main-card>
+ </div>
</template>
-<style scoped lang="scss">
- .infra-header {
- padding: 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: #fff;
- .menu-title {
- font-size: 16px;
- font-weight: 500;
- line-height: 24px;
- }
- .menu-info {
- margin-top: 5px;
- color: #00000072;
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
- }
- }
- .small {
- font-size: 12px;
- }
- .small-gray {
- line-height: 12px;
- font-size: 12px;
- color: rgba(0, 0, 0, 0.45);
- }
- .infra-body {
- margin-top: 16px;
- padding: 16px;
- background-color: #fff;
- .service {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
- }
- .service-item {
- width: 280px;
- height: 150px;
- border-radius: 8px;
- @include flexbox($direction: column);
- :deep(.ant-card-body) {
- padding: 0;
- height: 100%;
- @include flexbox($direction: column);
- }
- .header {
- padding: $space-md;
- border-bottom: 1px solid $color-border-secondary;
- &-base-wrp {
- @include flexbox($gap: $space-sm);
- margin-bottom: 10px;
- }
- &-base-title {
- @include flexbox($direction: column);
- }
- &-base-status {
- flex: 1;
- text-align: end;
- &-inner {
- @include flexbox($align: center, $gap: 4px);
- }
- .ant-tag {
- margin-inline-end: 0;
- }
- }
- &-restart-status {
- @include flexbox($align: center, $gap: 6px);
- .dot {
- margin-top: 2px;
- }
- }
- &-icon {
- flex-shrink: 0;
- border-radius: 0;
- }
- :deep(.ant-avatar) {
- img {
- object-fit: contain !important;
- }
- }
- }
- .item-content {
- flex: 1;
- @include flexbox($align: center);
- padding-inline: 8px;
- }
- }
- }
- :deep(.ant-dropdown-link) {
- margin-right: 10px;
- }
-
- .service-item-wrp {
- display: flex;
- flex-wrap: wrap;
- gap: 19px;
- }
-</style>
+<style lang="scss" scoped></style>
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
similarity index 85%
copy from bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
copy to bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
index c4f7b4f3..107b0694 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
@@ -18,7 +18,7 @@
-->
<script setup lang="ts">
- import { computed, shallowRef, onMounted, toRefs } from 'vue'
+ import { computed, onActivated, shallowRef, toRefs, useAttrs } from 'vue'
import { usePngImage } from '@/utils/tools'
import { useI18n } from 'vue-i18n'
import { CommonStatus, CommonStatusTexts } from '@/enums/state'
@@ -38,6 +38,7 @@
const jobProgressStore = useJobProgress()
const serviceStore = useServiceStore()
const { services, loading } = toRefs(serviceStore)
+ const clusterInfo = useAttrs() as { id: number; name: string }
const statusColors = shallowRef<Record<ServiceStatusType, keyof typeof
CommonStatusTexts>>({
1: 'healthy',
@@ -45,14 +46,14 @@
3: 'unknown'
})
const filterFormItems = computed((): FilterFormItem[] => [
- { type: 'search', key: 'serviceName', label: t('service.name') },
+ { type: 'search', key: 'name', label: t('service.name') },
{
type: 'status',
key: 'restartFlag',
label: t('service.required_restart'),
options: [
- { label: t('common.required'), value: 1 },
- { label: t('common.not_required'), value: 2 }
+ { label: t('common.required'), value: true },
+ { label: t('common.not_required'), value: false }
]
},
{
@@ -101,7 +102,7 @@
if (command !== 'More') {
const execCommandParams = {
command: command,
- clusterId: 0,
+ clusterId: clusterInfo.id,
commandLevel: 'service',
serviceCommands: [{ serviceName: service.name, installed: true }]
} as CommandRequest
@@ -110,37 +111,28 @@
}
const getServices = async (filters?: ServiceListParams) => {
- await serviceStore.getServices(0, filters)
+ await serviceStore.getServices(clusterInfo.id, filters)
}
const viewServiceDetail = (payload: ServiceVO) => {
router.push({
name: 'InfraServiceDetail',
- params: { id: 0, service: payload.name, cluster: 0, serviceId:
payload.id }
+ params: {
+ id: clusterInfo.id,
+ service: payload.name,
+ cluster: clusterInfo.name,
+ serviceId: payload.id
+ }
})
}
- onMounted(async () => {
+ onActivated(async () => {
await getServices()
})
</script>
<template>
<a-spin :spinning="loading" class="service">
- <div class="infra-header">
- <div>
- <div class="menu-title">{{ $t('menu.infra') }}</div>
- <div class="menu-info">{{ $t('infra.info') }}</div>
- </div>
- <a-button
- type="primary"
- @click="
- () => $router.push({ name: 'CreateInfraService', params: { id: 0,
cluster: '', creationMode: 'public' } })
- "
- >
- {{ $t('infra.action') }}
- </a-button>
- </div>
<div class="infra-body">
<filter-form :filter-items="filterFormItems" @filter="getServices" />
<a-empty v-if="services.length == 0" style="width: 100%"
:image="Empty.PRESENTED_IMAGE_SIMPLE" />
@@ -188,25 +180,6 @@
</template>
<style scoped lang="scss">
- .infra-header {
- padding: 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: #fff;
- .menu-title {
- font-size: 16px;
- font-weight: 500;
- line-height: 24px;
- }
- .menu-info {
- margin-top: 5px;
- color: #00000072;
- font-size: 14px;
- font-weight: 400;
- line-height: 22px;
- }
- }
.small {
font-size: 12px;
}
@@ -216,8 +189,6 @@
color: rgba(0, 0, 0, 0.45);
}
.infra-body {
- margin-top: 16px;
- padding: 16px;
background-color: #fff;
.service {
display: flex;
diff --git a/bigtop-manager-ui/src/router/routes/modules/clusters.ts
b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
index 45a443e2..c5ab3450 100644
--- a/bigtop-manager-ui/src/router/routes/modules/clusters.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
@@ -74,7 +74,15 @@ const routes: RouteRecordRaw[] = [
{
name: 'ServiceDetail',
path:
`${RouteExceptions.DYNAMIC_ROUTE_MATCH}/service-detail/:service/:serviceId`,
- component: () =>
import('@/pages/cluster-manage/cluster/service-management/index.vue'),
+ component: () =>
import('@/components/service-management/index.vue'),
+ meta: {
+ hidden: true
+ }
+ },
+ {
+ name: 'CreateComponent',
+ path:
`${RouteExceptions.DYNAMIC_ROUTE_MATCH}/create-component/:service/:serviceId/:creationMode?/:type`,
+ component: () => import('@/components/create-service/create.vue'),
meta: {
hidden: true
}
@@ -119,7 +127,16 @@ const routes: RouteRecordRaw[] = [
{
name: 'InfraServiceDetail',
path:
'create-infra-service/service-detail/:id/:cluster/:service/:serviceId',
- component: () =>
import('@/pages/cluster-manage/cluster/service-management/index.vue'),
+ component: () =>
import('@/components/service-management/index.vue'),
+ meta: {
+ hidden: true,
+ activeMenu: '/cluster-manage/infrastructures'
+ }
+ },
+ {
+ name: 'CreateInfraComponent',
+ path:
'/create-infra-service/create-infra-component/:id/:cluster/:service/:serviceId/:creationMode/:type',
+ component: () => import('@/components/create-service/create.vue'),
meta: {
hidden: true,
activeMenu: '/cluster-manage/infrastructures'
