[Fix][UI Next][V1.0.0-Alpha] Monitoring Center does not support multiple (#9207)

* fixSupportMultipleMaster

* clear

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-@mixin base {
+ @mixin base {
   font-size: 100px;
   display: flex;
   justify-content: center;
@@ -23,29 +23,6 @@
   min-height: 400px;
 }
 
-.header-card {
-  margin-bottom: 8px;
-
-  .content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .left {
-      margin-right: 20px;
-    }
-  }
-
-  .link-btn {
-    color: #579cd8;
-    cursor: pointer;
-
-    &:hover {
-      color: #80bef7;
-    }
-  }
-}
-
 .card {
   @include base;
 }
@@ -54,3 +31,12 @@
   @include base;
   color: dodgerblue;
 }
+
+.link-btn {
+  color: #579cd8;
+  cursor: pointer;
+
+  &:hover {
+    color: #80bef7;
+  }
+}

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

@@ -15,120 +15,138 @@
  * 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 { useMaster } from './use-master'
 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 { MasterNode } from '@/service/modules/monitor/types'
+import MasterModal from './master-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 { MasterNode } from '@/service/modules/monitor/types'
 
 const master = defineComponent({
   name: 'master',
   setup() {
     const showModalRef = ref(false)
     const { t } = useI18n()
-    const { getMaster } = useMaster()
-    const masterRef: Ref<Array<MasterNode>> = ref(getMaster())
-    const columnsRef: TableColumns<any> = [
-      { title: '#', key: 'index' },
-      { title: t('monitor.master.directory'), key: 'directory' }
-    ]
+    const { variables, getTableMaster } = useMaster()
+    const zkDirectoryRef: Ref<Array<RowData>> = ref([])
 
-    return { t, masterRef, showModalRef, columnsRef }
+    const clickDetails = (zkDirectories: string) => {
+      zkDirectoryRef.value = [{ directory: zkDirectories, index: 1 }]
+      showModalRef.value = true
+    }
+
+    const onConfirmModal = () => {
+      showModalRef.value = false
+    }
+
+    onMounted(() => {
+      getTableMaster()
+    })
+
+    return {
+      t,
+      ...toRefs(variables),
+      clickDetails,
+      onConfirmModal,
+      showModalRef,
+      zkDirectoryRef
+    }
   },
   render() {
-    const { t, masterRef, 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.master.host')}: ${
-                masterRef[0] ? masterRef[0].host : ' - '
-              }`}</span>
-              <span
-                class={styles['link-btn']}
-                onClick={() => (this.showModalRef = true)}
-              >
-                {t('monitor.master.directory_detail')}
-              </span>
-            </p>
-            <p>
-              <span class={styles.left}>{`${t('monitor.master.create_time')}: ${
-                masterRef[0] ? masterRef[0].createTime : ' - '
-              }`}</span>
-              <span>{`${t('monitor.master.last_heartbeat_time')}: ${
-                masterRef[0] ? masterRef[0].lastHeartbeatTime : ' - '
-              }`}</span>
-            </p>
-          </div>
-        </NCard>
-        <NGrid x-gap='12' cols='3'>
-          <NGi>
-            <Card title={t('monitor.master.cpu_usage')}>
-              <div class={styles.card}>
-                {masterRef[0] && (
-                  <Gauge
-                    data={(
-                      JSON.parse(masterRef[0].resInfo).cpuUsage * 100
-                    ).toFixed(2)}
-                  />
-                )}
-              </div>
-            </Card>
-          </NGi>
-          <NGi>
-            <Card title={t('monitor.master.memory_usage')}>
-              <div class={styles.card}>
-                {masterRef[0] && (
-                  <Gauge
-                    data={(
-                      JSON.parse(masterRef[0].resInfo).memoryUsage * 100
-                    ).toFixed(2)}
-                  />
-                )}
-              </div>
-            </Card>
-          </NGi>
-          <NGi>
-            <Card title={t('monitor.master.load_average')}>
-              <div class={[styles.card, styles['load-average']]}>
-                {masterRef[0] && (
-                  <NNumberAnimation
-                    precision={2}
-                    from={0}
-                    to={JSON.parse(masterRef[0].resInfo).loadAverage}
-                  />
-                )}
-              </div>
-            </Card>
-          </NGi>
-        </NGrid>
-        <Modal
-          title={t('monitor.master.directory_detail')}
-          show={this.showModalRef}
-          cancelShow={false}
-          onConfirm={() => (this.showModalRef = false)}
-        >
-          {{
-            default: () =>
-              masterRef[0] && (
-                <NDataTable
-                  columns={columnsRef}
-                  data={[{ index: 1, directory: masterRef[0].zkDirectory }]}
-                  striped
-                  size={'small'}
-                />
-              )
-          }}
-        </Modal>
-      </div>
+      <>
+        <NSpace vertical size={25}>
+          {this.data.map((item: MasterNode) => {
+            return (
+              <NSpace vertical>
+                <NCard>
+                  <NSpace justify='space-between'>
+                    <NSpace>
+                      <span>{`${t('monitor.master.host')}: ${
+                        item ? item.host : ' - '
+                      }`}</span>
+                      <span
+                        class={styles['link-btn']}
+                        onClick={() => clickDetails(item.zkDirectory)}
+                      >
+                        {t('monitor.master.directory_detail')}
+                      </span>
+                    </NSpace>
+                    <NSpace>
+                      <span>{`${t('monitor.master.create_time')}: ${
+                        item ? item.createTime : ' - '
+                      }`}</span>
+                      <span>{`${t('monitor.master.last_heartbeat_time')}: ${
+                        item ? item.lastHeartbeatTime : ' - '
+                      }`}</span>
+                    </NSpace>
+                  </NSpace>
+                </NCard>
+                <NGrid x-gap='12' cols='3'>
+                  <NGi>
+                    <Card title={t('monitor.master.cpu_usage')}>
+                      <div class={styles.card}>
+                        {item && (
+                          <Gauge
+                            data={(
+                              JSON.parse(item.resInfo).cpuUsage * 100
+                            ).toFixed(2)}
+                          />
+                        )}
+                      </div>
+                    </Card>
+                  </NGi>
+                  <NGi>
+                    <Card title={t('monitor.master.memory_usage')}>
+                      <div class={styles.card}>
+                        {item && (
+                          <Gauge
+                            data={(
+                              JSON.parse(item.resInfo).memoryUsage * 100
+                            ).toFixed(2)}
+                          />
+                        )}
+                      </div>
+                    </Card>
+                  </NGi>
+                  <NGi>
+                    <Card title={t('monitor.master.load_average')}>
+                      <div class={[styles.card, styles['load-average']]}>
+                        {item && (
+                          <NNumberAnimation
+                            precision={2}
+                            from={0}
+                            to={JSON.parse(item.resInfo).loadAverage}
+                          />
+                        )}
+                      </div>
+                    </Card>
+                  </NGi>
+                </NGrid>
+              </NSpace>
+            )
+          })}
+        </NSpace>
+        <MasterModal
+          showModal={showModalRef}
+          data={zkDirectoryRef}
+          onConfirmModal={onConfirmModal}
+        ></MasterModal>
+      </>
     )
   }
 })

dolphinscheduler-ui-next/src/views/monitor/servers/master/master-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 MasterModal = 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.master.directory'), key: 'directory' }
+    ]
+
+    const onConfirm = () => {
+      ctx.emit('confirmModal')
+    }
+
+    return { t, columnsRef, onConfirm }
+  },
+  render() {
+    const { t, columnsRef, onConfirm } = this
+
+    return (
+      <Modal
+        title={t('monitor.master.directory_detail')}
+        show={this.showModal}
+        cancelShow={false}
+        onConfirm={onConfirm}
+      >
+        {{
+          default: () => (
+            <NDataTable
+              columns={columnsRef}
+              data={this.data}
+              striped
+              size={'small'}
+            />
+          )
+        }}
+      </Modal>
+    )
+  }
+})
+
+export default MasterModal

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

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