[Feature][Engine UI] add master/workers list page; add overview component test unit

QiaoJ-Chen · QiaoJ-Chen · commit 8683ea830d05 · 2024-09-22T21:09:31.000+08:00
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/layouts/main/header/info/index.tsx b/seatunnel-engine/seatunnel-engine-ui/src/layouts/main/header/info/index.tsx
@@ -17,13 +17,13 @@
 
 import { defineComponent, reactive } from 'vue'
 import { NSpace } from 'naive-ui'
-import { getOverview } from '@/service/overview'
+import { overviewService } from '@/service/overview'
 import type { Overview } from '@/service/overview/types'
 
 const Logo = defineComponent({
   setup() {
     const data = reactive({} as Overview)
-    getOverview().then((res) => Object.assign(data, res))
+    overviewService.getOverview().then((res) => Object.assign(data, res))
     return { data }
   },
   render() {
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/layouts/main/index.tsx b/seatunnel-engine/seatunnel-engine-ui/src/layouts/main/index.tsx
@@ -34,6 +34,7 @@ const Main = defineComponent({
       () => {
         showSide.value = route?.meta?.showSide as boolean
         menuKey.value = route.meta.activeSide as string
+        routeKey.value = route.fullPath
       },
       {
         immediate: true,
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/layouts/main/sidebar/index.tsx b/seatunnel-engine/seatunnel-engine-ui/src/layouts/main/sidebar/index.tsx
@@ -75,13 +75,27 @@ const Sidebar = defineComponent({
             RouterLink,
             {
               to: {
-                path: '/managers'
+                path: '/managers/workers'
               },
               exact: false
             },
-            { default: () => t('menu.managers') }
+            { default: () => t('menu.managers.workers') }
           ),
-        key: 'managers'
+        key: 'workers'
+      },
+      {
+        label: () =>
+          h(
+            RouterLink,
+            {
+              to: {
+                path: '/managers/master'
+              },
+              exact: false
+            },
+            { default: () => t('menu.managers.master') }
+          ),
+        key: 'master'
       }
     ])
 
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/locales/en_US/menu.ts b/seatunnel-engine/seatunnel-engine-ui/src/locales/en_US/menu.ts
@@ -18,6 +18,9 @@
 export default {
   overview: 'Overview',
   jobs: 'Jobs',
-  managers: 'Managers',
-  synchronization_instance: 'Syncing Task Instance',
+  managers: {
+    workers: 'Workers',
+    master: 'Master'
+  },
+  synchronization_instance: 'Syncing Task Instance'
 }
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/router/routes.ts b/seatunnel-engine/seatunnel-engine-ui/src/router/routes.ts
@@ -18,35 +18,44 @@
 import type { RouteRecordRaw } from 'vue-router'
 
 const routes: RouteRecordRaw[] = [
-    {
-        path: '/', name: 'root', redirect: { name: 'overview' }, component: () => import('@/layouts/main'),
-        children: [
-            {
-                path: 'overview',
-                name: 'overview',
-                meta: { title: 'overview', showSide: true, activeSide: 'overview' },
-                component: () => import('@/views/overview')
-            },
-            {
-                path: 'jobs',
-                name: 'jobs',
-                meta: { title: 'jobs', showSide: true, activeSide: 'jobs' },
-                component: () => import('@/views/jobs')
-            },
-            {
-                path: 'jobs/:jobId',
-                name: 'detail',
-                meta: { title: 'detail', showSide: true, activeSide: 'jobs' },
-                component: () => import('@/views/jobs/detail')
-            },
-            {
-                path: 'managers',
-                name: 'managers',
-                meta: { title: 'managers', showSide: true, activeSide: 'managers' },
-                component: () => import('@/views/managers')
-            }
-        ]
-    }
+  {
+    path: '/',
+    name: 'root',
+    redirect: { name: 'overview' },
+    component: () => import('@/layouts/main'),
+    children: [
+      {
+        path: 'overview',
+        name: 'overview',
+        meta: { title: 'overview', showSide: true, activeSide: 'overview' },
+        component: () => import('@/views/overview')
+      },
+      {
+        path: 'jobs',
+        name: 'jobs',
+        meta: { title: 'jobs', showSide: true, activeSide: 'jobs' },
+        component: () => import('@/views/jobs')
+      },
+      {
+        path: 'jobs/:jobId',
+        name: 'detail',
+        meta: { title: 'detail', showSide: true, activeSide: 'jobs' },
+        component: () => import('@/views/jobs/detail')
+      },
+      {
+        path: 'managers/workers',
+        name: 'managers-workers',
+        meta: { title: 'workers', showSide: true, activeSide: 'workers' },
+        component: () => import('@/views/managers')
+      },
+      {
+        path: 'managers/master',
+        name: 'managers-master',
+        meta: { title: 'master', showSide: true, activeSide: 'master' },
+        component: () => import('@/views/managers')
+      }
+    ]
+  }
 ]
 
 export default routes
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/service/manager/index.ts b/seatunnel-engine/seatunnel-engine-ui/src/service/manager/index.ts
@@ -19,3 +19,6 @@ import { get } from '@/service/service'
 import type { Monitor } from './types'
 
 export const getMonitors = () => get<Monitor[]>('/system-monitoring-information')
+export const managerService = {
+  getMonitors
+}
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/service/manager/types.ts b/seatunnel-engine/seatunnel-engine-ui/src/service/manager/types.ts
@@ -16,6 +16,7 @@
  */
 
 export interface Monitor {
+  isMaster: 'true' | 'false'
   processors: string
   'physical.memory.total': string
   'physical.memory.free': string
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/service/overview/index.ts b/seatunnel-engine/seatunnel-engine-ui/src/service/overview/index.ts
@@ -19,3 +19,6 @@ import { get } from '@/service/service'
 import type { Overview } from './types'
 
 export const getOverview = () => get<Overview>('/overview')
+export const overviewService = {
+  getOverview
+}
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/service/service.ts b/seatunnel-engine/seatunnel-engine-ui/src/service/service.ts
@@ -59,7 +59,7 @@ service.interceptors.response.use((res: AxiosResponse) => {
   }
 }, err)
 
-export const get = <R>(url: string, params?: Record<string, string>) => {
+export const get = <R>(url: string, params?: Record<string, any>) => {
   return <Promise<R>>service.get<R>(url, { params })
 }
 export const post = <R>(url: string, data: Record<string, any>) => {
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/tests/jobs.spec.ts b/seatunnel-engine/seatunnel-engine-ui/src/tests/jobs.spec.ts
@@ -33,9 +33,6 @@ describe('jobs', () => {
     app.use(pinia)
     setActivePinia(createPinia())
   })
-  test('test', () => {
-    expect(1).toBe(1)
-  })
   test('Running Jobs component', async () => {
     const mockData = [] as Job[]
 
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/tests/overview.spec.ts b/seatunnel-engine/seatunnel-engine-ui/src/tests/overview.spec.ts
@@ -0,0 +1,62 @@
+/*
+ * 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 { describe, test, expect, vi, beforeEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+// import { createTestingPinia } from '@pinia/testing'
+import { createApp } from 'vue'
+import { createPinia, setActivePinia } from 'pinia'
+import i18n from '@/locales'
+import type { Overview } from '@/service/overview/types'
+import baseInfo from '@/views/overview/baseInfo'
+import { overviewService } from '@/service/overview'
+
+describe('jobs', () => {
+  const app = createApp({})
+  beforeEach(() => {
+    const pinia = createPinia()
+    app.use(pinia)
+    setActivePinia(createPinia())
+  })
+  test('BaseInfo component', async () => {
+    const mockData = {
+      cancelledJobs: '222',
+      failedJobs: '0',
+      finishedJobs: '3',
+      gitCommitAbbrev: '4f812e1',
+      projectVersion: '2.3.8-SNAPSHOT',
+      runningJobs: '0',
+      totalSlot: '111',
+      unassignedSlot: '0',
+      workers: '1'
+    } as Overview
+
+    vi.spyOn(overviewService, 'getOverview').mockResolvedValue(mockData)
+
+    const wrapper = mount(baseInfo, {
+      global: {
+        // plugins: [createTestingPinia({ createSpy: vi.fn() }), i18n]
+        plugins: [i18n]
+      }
+    })
+    expect(overviewService.getOverview).toHaveBeenCalledTimes(1)
+    expect(overviewService.getOverview).toHaveBeenCalledWith()
+    await flushPromises()
+    expect(wrapper.text()).toContain('Total Slot: 111')
+    expect(wrapper.text()).toContain('Cancelled: 222')
+  })
+})
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/tests/service.spec.ts b/seatunnel-engine/seatunnel-engine-ui/src/tests/service.spec.ts
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/views/managers/index.tsx b/seatunnel-engine/seatunnel-engine-ui/src/views/managers/index.tsx
@@ -20,18 +20,26 @@ import { useI18n } from 'vue-i18n'
 import type { DataTableColumns } from 'naive-ui'
 import { NButton } from 'naive-ui'
 import { NSpace, NLayout, NLayoutContent } from 'naive-ui'
-import { getMonitors } from '@/service/manager'
+import { managerService } from '@/service/manager'
 import type { Monitor } from '@/service/manager/types'
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   setup() {
     const { t } = useI18n()
-
+    const route = useRoute()
     const monitors = ref([] as Monitor[])
 
-    getMonitors().then((res) => (monitors.value = res))
+    const fetch = async () => {
+      let res = await managerService.getMonitors()
+      const isMaster = route.path.endsWith('/master')
+      res = res.filter((row) => row.isMaster === String(isMaster)) || []
+      monitors.value = res
+    }
+    fetch()
+
     function createColumns(): DataTableColumns<Monitor> {
-      const view = (job: Monitor) => {}
+      const view = (row: Monitor) => {}
       return [
         {
           title: 'Host',
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/views/overview/baseInfo.tsx b/seatunnel-engine/seatunnel-engine-ui/src/views/overview/baseInfo.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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 { defineComponent, reactive } from 'vue'
+import { NSpace, NCard } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { overviewService } from '@/service/overview'
+import type { Overview } from '@/service/overview/types'
+
+export default defineComponent({
+  setup() {
+    const { t } = useI18n()
+
+    const data = reactive({} as Overview)
+    overviewService.getOverview().then((res) => Object.assign(data, res))
+
+    return () => (
+      <NSpace wrap-item={false}>
+        <NCard title="Availiable Task Slots" hoverable style="flex:1">
+          <span class="text-2xl font-bold">{data.workers}</span>
+          <div class="border border-b-0 mt-3" />
+          <NSpace class="mt-3" size={16}>
+            <span>Total Slot: {data.totalSlot}</span>
+            <span>Unassigned Slot: {data.unassignedSlot}</span>
+          </NSpace>
+        </NCard>
+        <NCard title="Running Jobs" hoverable style="flex:1">
+          <span class="text-2xl font-bold">{data.runningJobs}</span>
+          <div class="border border-b-0 mt-3" />
+          <NSpace class="mt-3" size={16}>
+            <span>Cancelled: {data.cancelledJobs}</span>
+            <span>Failed: {data.failedJobs}</span>
+            <span>Finished: {data.failedJobs}</span>
+          </NSpace>
+        </NCard>
+      </NSpace>
+    )
+  }
+})
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/views/overview/index.tsx b/seatunnel-engine/seatunnel-engine-ui/src/views/overview/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@ const Main = defineComponent({`
`34`	`34`	`() => {`
`35`	`35`	`showSide.value = route?.meta?.showSide as boolean`
`36`	`36`	`menuKey.value = route.meta.activeSide as string`
	`37`	`+ routeKey.value = route.fullPath`
`37`	`38`	`},`
`38`	`39`	`{`
`39`	`40`	`immediate: true,`
Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ service.interceptors.response.use((res: AxiosResponse) => {`
`59`	`59`	`}`
`60`	`60`	`}, err)`
`61`	`61`
`62`		`-export const get = <R>(url: string, params?: Record<string, string>) => {`
	`62`	`+export const get = <R>(url: string, params?: Record<string, any>) => {`
`63`	`63`	`return <Promise<R>>service.get<R>(url, { params })`
`64`	`64`	`}`
`65`	`65`	`export const post = <R>(url: string, data: Record<string, any>) => {`