Skip to content

Commit 8683ea8

Browse files
QiaoJ-ChenQiaoJ-Chen
committed
[Feature][Engine UI] add master/workers list page; add overview component test unit
1 parent a86aca8 commit 8683ea8

File tree

15 files changed

+202
-111
lines changed

15 files changed

+202
-111
lines changed

‎seatunnel-engine/seatunnel-engine-ui/src/layouts/main/header/info/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717

1818
import { defineComponent, reactive } from 'vue'
1919
import { NSpace } from 'naive-ui'
20-
import { getOverview } from '@/service/overview'
20+
import { overviewService } from '@/service/overview'
2121
import type { Overview } from '@/service/overview/types'
2222

2323
const Logo = defineComponent({
2424
setup() {
2525
const data = reactive({} as Overview)
26-
getOverview().then((res) => Object.assign(data, res))
26+
overviewService.getOverview().then((res) => Object.assign(data, res))
2727
return { data }
2828
},
2929
render() {

‎seatunnel-engine/seatunnel-engine-ui/src/layouts/main/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const Main = defineComponent({
3434
() => {
3535
showSide.value = route?.meta?.showSide as boolean
3636
menuKey.value = route.meta.activeSide as string
37+
routeKey.value = route.fullPath
3738
},
3839
{
3940
immediate: true,

‎seatunnel-engine/seatunnel-engine-ui/src/layouts/main/sidebar/index.tsx

+17-3
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,27 @@ const Sidebar = defineComponent({
7575
RouterLink,
7676
{
7777
to: {
78-
path: '/managers'
78+
path: '/managers/workers'
7979
},
8080
exact: false
8181
},
82-
{ default: () => t('menu.managers') }
82+
{ default: () => t('menu.managers.workers') }
8383
),
84-
key: 'managers'
84+
key: 'workers'
85+
},
86+
{
87+
label: () =>
88+
h(
89+
RouterLink,
90+
{
91+
to: {
92+
path: '/managers/master'
93+
},
94+
exact: false
95+
},
96+
{ default: () => t('menu.managers.master') }
97+
),
98+
key: 'master'
8599
}
86100
])
87101

‎seatunnel-engine/seatunnel-engine-ui/src/locales/en_US/menu.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
export default {
1919
overview: 'Overview',
2020
jobs: 'Jobs',
21-
managers: 'Managers',
22-
synchronization_instance: 'Syncing Task Instance',
21+
managers: {
22+
workers: 'Workers',
23+
master: 'Master'
24+
},
25+
synchronization_instance: 'Syncing Task Instance'
2326
}

‎seatunnel-engine/seatunnel-engine-ui/src/router/routes.ts

+38-29
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,44 @@
1818
import type { RouteRecordRaw } from 'vue-router'
1919

2020
const routes: RouteRecordRaw[] = [
21-
{
22-
path: '/', name: 'root', redirect: { name: 'overview' }, component: () => import('@/layouts/main'),
23-
children: [
24-
{
25-
path: 'overview',
26-
name: 'overview',
27-
meta: { title: 'overview', showSide: true, activeSide: 'overview' },
28-
component: () => import('@/views/overview')
29-
},
30-
{
31-
path: 'jobs',
32-
name: 'jobs',
33-
meta: { title: 'jobs', showSide: true, activeSide: 'jobs' },
34-
component: () => import('@/views/jobs')
35-
},
36-
{
37-
path: 'jobs/:jobId',
38-
name: 'detail',
39-
meta: { title: 'detail', showSide: true, activeSide: 'jobs' },
40-
component: () => import('@/views/jobs/detail')
41-
},
42-
{
43-
path: 'managers',
44-
name: 'managers',
45-
meta: { title: 'managers', showSide: true, activeSide: 'managers' },
46-
component: () => import('@/views/managers')
47-
}
48-
]
49-
}
21+
{
22+
path: '/',
23+
name: 'root',
24+
redirect: { name: 'overview' },
25+
component: () => import('@/layouts/main'),
26+
children: [
27+
{
28+
path: 'overview',
29+
name: 'overview',
30+
meta: { title: 'overview', showSide: true, activeSide: 'overview' },
31+
component: () => import('@/views/overview')
32+
},
33+
{
34+
path: 'jobs',
35+
name: 'jobs',
36+
meta: { title: 'jobs', showSide: true, activeSide: 'jobs' },
37+
component: () => import('@/views/jobs')
38+
},
39+
{
40+
path: 'jobs/:jobId',
41+
name: 'detail',
42+
meta: { title: 'detail', showSide: true, activeSide: 'jobs' },
43+
component: () => import('@/views/jobs/detail')
44+
},
45+
{
46+
path: 'managers/workers',
47+
name: 'managers-workers',
48+
meta: { title: 'workers', showSide: true, activeSide: 'workers' },
49+
component: () => import('@/views/managers')
50+
},
51+
{
52+
path: 'managers/master',
53+
name: 'managers-master',
54+
meta: { title: 'master', showSide: true, activeSide: 'master' },
55+
component: () => import('@/views/managers')
56+
}
57+
]
58+
}
5059
]
5160

5261
export default routes

‎seatunnel-engine/seatunnel-engine-ui/src/service/manager/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,6 @@ import { get } from '@/service/service'
1919
import type { Monitor } from './types'
2020

2121
export const getMonitors = () => get<Monitor[]>('/system-monitoring-information')
22+
export const managerService = {
23+
getMonitors
24+
}

‎seatunnel-engine/seatunnel-engine-ui/src/service/manager/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
*/
1717

1818
export interface Monitor {
19+
isMaster: 'true' | 'false'
1920
processors: string
2021
'physical.memory.total': string
2122
'physical.memory.free': string

‎seatunnel-engine/seatunnel-engine-ui/src/service/overview/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,6 @@ import { get } from '@/service/service'
1919
import type { Overview } from './types'
2020

2121
export const getOverview = () => get<Overview>('/overview')
22+
export const overviewService = {
23+
getOverview
24+
}

‎seatunnel-engine/seatunnel-engine-ui/src/service/service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ service.interceptors.response.use((res: AxiosResponse) => {
5959
}
6060
}, err)
6161

62-
export const get = <R>(url: string, params?: Record<string, string>) => {
62+
export const get = <R>(url: string, params?: Record<string, any>) => {
6363
return <Promise<R>>service.get<R>(url, { params })
6464
}
6565
export const post = <R>(url: string, data: Record<string, any>) => {

‎seatunnel-engine/seatunnel-engine-ui/src/tests/jobs.spec.ts

-3
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@ describe('jobs', () => {
3333
app.use(pinia)
3434
setActivePinia(createPinia())
3535
})
36-
test('test', () => {
37-
expect(1).toBe(1)
38-
})
3936
test('Running Jobs component', async () => {
4037
const mockData = [] as Job[]
4138

‎seatunnel-engine/seatunnel-engine-ui/src/tests/overview.spec.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
import { describe, test, expect, vi, beforeEach } from 'vitest'
19+
import { flushPromises, mount } from '@vue/test-utils'
20+
// import { createTestingPinia } from '@pinia/testing'
21+
import { createApp } from 'vue'
22+
import { createPinia, setActivePinia } from 'pinia'
23+
import i18n from '@/locales'
24+
import type { Overview } from '@/service/overview/types'
25+
import baseInfo from '@/views/overview/baseInfo'
26+
import { overviewService } from '@/service/overview'
27+
28+
describe('jobs', () => {
29+
const app = createApp({})
30+
beforeEach(() => {
31+
const pinia = createPinia()
32+
app.use(pinia)
33+
setActivePinia(createPinia())
34+
})
35+
test('BaseInfo component', async () => {
36+
const mockData = {
37+
cancelledJobs: '222',
38+
failedJobs: '0',
39+
finishedJobs: '3',
40+
gitCommitAbbrev: '4f812e1',
41+
projectVersion: '2.3.8-SNAPSHOT',
42+
runningJobs: '0',
43+
totalSlot: '111',
44+
unassignedSlot: '0',
45+
workers: '1'
46+
} as Overview
47+
48+
vi.spyOn(overviewService, 'getOverview').mockResolvedValue(mockData)
49+
50+
const wrapper = mount(baseInfo, {
51+
global: {
52+
// plugins: [createTestingPinia({ createSpy: vi.fn() }), i18n]
53+
plugins: [i18n]
54+
}
55+
})
56+
expect(overviewService.getOverview).toHaveBeenCalledTimes(1)
57+
expect(overviewService.getOverview).toHaveBeenCalledWith()
58+
await flushPromises()
59+
expect(wrapper.text()).toContain('Total Slot: 111')
60+
expect(wrapper.text()).toContain('Cancelled: 222')
61+
})
62+
})

‎seatunnel-engine/seatunnel-engine-ui/src/tests/service.spec.ts

-38
This file was deleted.

‎seatunnel-engine/seatunnel-engine-ui/src/views/managers/index.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,26 @@ import { useI18n } from 'vue-i18n'
2020
import type { DataTableColumns } from 'naive-ui'
2121
import { NButton } from 'naive-ui'
2222
import { NSpace, NLayout, NLayoutContent } from 'naive-ui'
23-
import { getMonitors } from '@/service/manager'
23+
import { managerService } from '@/service/manager'
2424
import type { Monitor } from '@/service/manager/types'
25+
import { useRoute } from 'vue-router'
2526

2627
export default defineComponent({
2728
setup() {
2829
const { t } = useI18n()
29-
30+
const route = useRoute()
3031
const monitors = ref([] as Monitor[])
3132

32-
getMonitors().then((res) => (monitors.value = res))
33+
const fetch = async () => {
34+
let res = await managerService.getMonitors()
35+
const isMaster = route.path.endsWith('/master')
36+
res = res.filter((row) => row.isMaster === String(isMaster)) || []
37+
monitors.value = res
38+
}
39+
fetch()
40+
3341
function createColumns(): DataTableColumns<Monitor> {
34-
const view = (job: Monitor) => {}
42+
const view = (row: Monitor) => {}
3543
return [
3644
{
3745
title: 'Host',

‎seatunnel-engine/seatunnel-engine-ui/src/views/overview/baseInfo.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
import { defineComponent, reactive } from 'vue'
19+
import { NSpace, NCard } from 'naive-ui'
20+
import { useI18n } from 'vue-i18n'
21+
import { overviewService } from '@/service/overview'
22+
import type { Overview } from '@/service/overview/types'
23+
24+
export default defineComponent({
25+
setup() {
26+
const { t } = useI18n()
27+
28+
const data = reactive({} as Overview)
29+
overviewService.getOverview().then((res) => Object.assign(data, res))
30+
31+
return () => (
32+
<NSpace wrap-item={false}>
33+
<NCard title="Availiable Task Slots" hoverable style="flex:1">
34+
<span class="text-2xl font-bold">{data.workers}</span>
35+
<div class="border border-b-0 mt-3" />
36+
<NSpace class="mt-3" size={16}>
37+
<span>Total Slot: {data.totalSlot}</span>
38+
<span>Unassigned Slot: {data.unassignedSlot}</span>
39+
</NSpace>
40+
</NCard>
41+
<NCard title="Running Jobs" hoverable style="flex:1">
42+
<span class="text-2xl font-bold">{data.runningJobs}</span>
43+
<div class="border border-b-0 mt-3" />
44+
<NSpace class="mt-3" size={16}>
45+
<span>Cancelled: {data.cancelledJobs}</span>
46+
<span>Failed: {data.failedJobs}</span>
47+
<span>Finished: {data.failedJobs}</span>
48+
</NSpace>
49+
</NCard>
50+
</NSpace>
51+
)
52+
}
53+
})

0 commit comments

Comments
 (0)