[Fix][UI Next][V1.0.0-Alpha] Fix the monitoring center does not support multiple worker. (#9061)

dolphinscheduler-ui-next/src/service/modules/monitor/types.ts

@@ -25,7 +25,7 @@ interface DatabaseRes {
   date: string
 }
 
-interface MasterRes {
+interface MasterNode {
   id: number
   host: string
   port: number
@@ -35,14 +35,14 @@ interface MasterRes {
   lastHeartbeatTime: string
 }
 
-interface WorkerRes {
+interface WorkerNode {
   id: number
   host: string
   port: number
-  zkDirectories: string[]
+  zkDirectories: Array<string>
   resInfo: string
   createTime: string
   lastHeartbeatTime: string
 }
 
-export { DatabaseRes, MasterRes, WorkerRes }
+export { DatabaseRes, MasterNode, WorkerNode }

dolphinscheduler-ui-next/src/views/monitor/servers/master/index.tsx

@@ -23,7 +23,7 @@ import styles from './index.module.scss'
 import Card from '@/components/card'
 import Gauge from '@/components/chart/modules/Gauge'
 import Modal from '@/components/modal'
-import type { MasterRes } from '@/service/modules/monitor/types'
+import type { MasterNode } from '@/service/modules/monitor/types'
 import type { Ref } from 'vue'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 
@@ -33,7 +33,7 @@ const master = defineComponent({
     const showModalRef = ref(false)
     const { t } = useI18n()
     const { getMaster } = useMaster()
-    const masterRef: Ref<Array<MasterRes>> = ref(getMaster())
+    const masterRef: Ref<Array<MasterNode>> = ref(getMaster())
     const columnsRef: TableColumns<any> = [
       { title: '#', key: 'index' },
       { title: t('monitor.master.directory'), key: 'directory' }

dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.module.scss

@@ -23,17 +23,13 @@
   min-height: 400px;
 }
 
-.header-card {
-  margin-bottom: 8px;
-
-  .content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .left {
-      margin-right: 20px;
+.card {
+  @include base;
 }
+
+.load-average {
+  @include base;
+  color: dodgerblue;
 }
 
 .link-btn {
@@ -44,13 +40,3 @@
     color: #80bef7;
   }
 }
-}
-
-.card {
-  @include base;
-}
-
-.load-average {
-  @include base;
-  color: dodgerblue;
-}

dolphinscheduler-ui-next/src/views/monitor/servers/worker/index.tsx

@@ -15,68 +15,93 @@
  * limitations under the License.
  */
 
-import { defineComponent, ref } from 'vue'
-import { NGrid, NGi, NCard, NNumberAnimation, NDataTable } from 'naive-ui'
+import { defineComponent, onMounted, ref, toRefs } from 'vue'
+import { NGrid, NGi, NCard, NNumberAnimation, NSpace } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useWorker } from './use-worker'
 import styles from './index.module.scss'
 import Card from '@/components/card'
 import Gauge from '@/components/chart/modules/Gauge'
-import Modal from '@/components/modal'
-import type { WorkerRes } from '@/service/modules/monitor/types'
+import WorkerModal from './worker-modal'
 import type { Ref } from 'vue'
-import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
+import type { RowData } from 'naive-ui/es/data-table/src/interface'
+import type { WorkerNode } from '@/service/modules/monitor/types'
 
 const master = defineComponent({
   name: 'master',
   setup() {
     const showModalRef = ref(false)
     const { t } = useI18n()
-    const { getWorker } = useWorker()
-    const workerRef: Ref<Array<WorkerRes>> = ref(getWorker())
-    const columnsRef: TableColumns<any> = [
-      { title: '#', key: 'index', render: (row, index) => index + 1 },
-      { title: t('monitor.worker.directory'), key: 'directory' }
-    ]
+    const { variables, getTableWorker } = useWorker()
+    const zkDirectoryRef: Ref<Array<RowData>> = ref([])
 
-    return { t, workerRef, showModalRef, columnsRef }
+    const clickDetails = (zkDirectories: Array<string>) => {
+      zkDirectoryRef.value = zkDirectories.map((zkItem) => {
+        return {
+          directory: zkItem
+        }
+      })
+      showModalRef.value = true
+    }
+
+    const onConfirmModal = () => {
+      showModalRef.value = false
+    }
+
+    onMounted(() => {
+      getTableWorker()
+    })
+
+    return {
+      t,
+      ...toRefs(variables),
+      clickDetails,
+      onConfirmModal,
+      showModalRef,
+      zkDirectoryRef
+    }
   },
   render() {
-    const { t, workerRef, columnsRef } = this
+    const { t, clickDetails, onConfirmModal, showModalRef, zkDirectoryRef } =
+      this
 
     return (
-      <div>
-        <NCard class={styles['header-card']}>
-          <div class={styles['content']}>
-            <p>
-              <span class={styles.left}>{`${t('monitor.worker.host')}: ${
-                workerRef[0] ? workerRef[0].host : ' - '
+      <>
+        <NSpace vertical size={25}>
+          {this.data.map((item: WorkerNode) => {
+            return (
+              <NSpace vertical>
+                <NCard>
+                  <NSpace justify='space-between'>
+                    <NSpace>
+                      <span>{`${t('monitor.worker.host')}: ${
+                        item ? item.host : ' - '
                       }`}</span>
                       <span
                         class={styles['link-btn']}
-                onClick={() => (this.showModalRef = true)}
+                        onClick={() => clickDetails(item.zkDirectories)}
                       >
                         {t('monitor.worker.directory_detail')}
                       </span>
-            </p>
-            <p>
-              <span class={styles.left}>{`${t('monitor.worker.create_time')}: ${
-                workerRef[0] ? workerRef[0].createTime : ' - '
+                    </NSpace>
+                    <NSpace>
+                      <span>{`${t('monitor.worker.create_time')}: ${
+                        item ? item.createTime : ' - '
                       }`}</span>
                       <span>{`${t('monitor.worker.last_heartbeat_time')}: ${
-                workerRef[0] ? workerRef[0].lastHeartbeatTime : ' - '
+                        item ? item.lastHeartbeatTime : ' - '
                       }`}</span>
-            </p>
-          </div>
+                    </NSpace>
+                  </NSpace>
                 </NCard>
                 <NGrid x-gap='12' cols='3'>
                   <NGi>
                     <Card title={t('monitor.worker.cpu_usage')}>
                       <div class={styles.card}>
-                {workerRef[0] && (
+                        {item && (
                           <Gauge
                             data={(
-                      JSON.parse(workerRef[0].resInfo).cpuUsage * 100
+                              JSON.parse(item.resInfo).cpuUsage * 100
                             ).toFixed(2)}
                           />
                         )}
@@ -86,10 +111,10 @@ const master = defineComponent({
                   <NGi>
                     <Card title={t('monitor.worker.memory_usage')}>
                       <div class={styles.card}>
-                {workerRef[0] && (
+                        {item && (
                           <Gauge
                             data={(
-                      JSON.parse(workerRef[0].resInfo).memoryUsage * 100
+                              JSON.parse(item.resInfo).memoryUsage * 100
                             ).toFixed(2)}
                           />
                         )}
@@ -99,38 +124,27 @@ const master = defineComponent({
                   <NGi>
                     <Card title={t('monitor.worker.load_average')}>
                       <div class={[styles.card, styles['load-average']]}>
-                {workerRef[0] && (
+                        {item && (
                           <NNumberAnimation
                             precision={2}
                             from={0}
-                    to={JSON.parse(workerRef[0].resInfo).loadAverage}
+                            to={JSON.parse(item.resInfo).loadAverage}
                           />
                         )}
                       </div>
                     </Card>
                   </NGi>
                 </NGrid>
-        <Modal
-          title={t('monitor.worker.directory_detail')}
-          show={this.showModalRef}
-          cancelShow={false}
-          onConfirm={() => (this.showModalRef = false)}
-        >
-          {{
-            default: () =>
-              workerRef[0] && (
-                <NDataTable
-                  columns={columnsRef}
-                  data={workerRef[0].zkDirectories.map((item, unused) => {
-                    return { directory: item }
+              </NSpace>
+            )
           })}
-                  striped
-                  size={'small'}
+        </NSpace>
+        <WorkerModal
+          showModal={showModalRef}
+          data={zkDirectoryRef}
+          onConfirmModal={onConfirmModal}
         />
-              )
-          }}
-        </Modal>
-      </div>
+      </>
     )
   }
 })

dolphinscheduler-ui-next/src/views/monitor/servers/worker/use-worker.ts

@@ -15,14 +15,26 @@
  * limitations under the License.
  */
 
+import { reactive } from 'vue'
 import { useAsyncState } from '@vueuse/core'
 import { listWorker } from '@/service/modules/monitor'
+import type { WorkerNode } from '@/service/modules/monitor/types'
 
 export function useWorker() {
-  const getWorker = () => {
-    const { state } = useAsyncState(listWorker(), [])
+  const variables = reactive({
+    data: []
+  })
+
+  const getTableWorker = () => {
+    const { state } = useAsyncState(
+      listWorker().then((res: Array<WorkerNode>) => {
+        variables.data = res as any
+      }),
+      []
+    )
+
     return state
   }
 
-  return { getWorker }
+  return { variables, getTableWorker }
 }

dolphinscheduler-ui-next/src/views/monitor/servers/worker/worker-modal.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { NDataTable } from 'naive-ui'
+import Modal from '@/components/modal'
+import type { PropType } from 'vue'
+import type {
+  RowData,
+  TableColumns
+} from 'naive-ui/es/data-table/src/interface'
+
+const props = {
+  showModal: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  data: {
+    type: Array as PropType<Array<RowData>>,
+    default: () => []
+  }
+}
+
+const WorkerModal = defineComponent({
+  props,
+  emits: ['confirmModal'],
+  setup(props, ctx) {
+    const { t } = useI18n()
+    const columnsRef: TableColumns<any> = [
+      { title: '#', key: 'index', render: (row, index) => index + 1 },
+      { title: t('monitor.worker.directory'), key: 'directory' }
+    ]
+
+    const onConfirm = () => {
+      ctx.emit('confirmModal')
+    }
+
+    return { t, columnsRef, onConfirm }
+  },
+  render() {
+    const { t, columnsRef, onConfirm } = this
+
+    return (
+      <Modal
+        title={t('monitor.worker.directory_detail')}
+        show={this.showModal}
+        cancelShow={false}
+        onConfirm={onConfirm}
+      >
+        {{
+          default: () => (
+            <NDataTable
+              columns={columnsRef}
+              data={this.data}
+              striped
+              size={'small'}
+            />
+          )
+        }}
+      </Modal>
+    )
+  }
+})
+
+export default WorkerModal

dolphinscheduler-ui-next/src/views/resource/task-group/option/components/form-modal.tsx

@@ -128,8 +128,7 @@ const FormModal = defineComponent({
                 )}
               />
             </NFormItem>
-            )
-          }
+          )}
           <NFormItem
             label={t('resource.task_group_option.resource_pool_size')}
             path='groupSize'