feat(frontend): 集群列表展示优化 #6834

# Reviewed, transaction id: 19213
TencentBlueKing · Sep 24, 2024 · ab87add · ab87add
1 parent d66054d
commit ab87add
Show file tree

Hide file tree

Showing 25 changed files with 1,372 additions and 1,295 deletions.
diff --git a/dbm-ui/frontend/src/components/cluster-capacity-usage-rate/Index.vue b/dbm-ui/frontend/src/components/cluster-capacity-usage-rate/Index.vue
@@ -48,7 +48,7 @@
     }
 
     let color = '#2DCB56';
-    const { used, total, in_use: inUse } = props.clusterStats;
+    const { used = 0, total = 0, in_use: inUse = 0 } = props.clusterStats;
 
     if (inUse >= 90) {
       color = '#EA3636';
@@ -71,8 +71,8 @@
     align-items: center;
 
     .usage-rate {
-      color: #63656e;
       font-weight: 700;
+      color: #63656e;
     }
 
     .usage-text {

diff --git a/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue b/dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
@@ -12,12 +12,19 @@
 -->
 
 <template>
+  <DbIcon
+    v-bk-tooltips="t('查看域名/IP对应关系')"
+    type="visible1"
+    @click="() => (isShow = true)" />
   <BkDialog
+    class="entry-config-dialog"
+    draggable
     :is-show="isShow"
     :quick-close="false"
-    :title="t('修改入口配置')"
+    :show-mask="false"
+    :title="t('查看域名/IP对应关系')"
     :width="640"
-    @closed="handleClose">
+    @closed="() => (isShow = false)">
     <BkLoading :loading="isLoading">
       <BkTable
         ref="tableRef"
@@ -27,57 +34,21 @@
         :columns="columns"
         :data="tableData" />
     </BkLoading>
-    <template #footer>
-      <BkButton
-        class="mr-8"
-        style="width: 64px"
-        theme="primary"
-        @click="handleConfirm">
-        {{ t('保存') }}
-      </BkButton>
-      <BkButton
-        style="width: 64px"
-        @click="handleClose">
-        {{ t('取消') }}
-      </BkButton>
-    </template>
   </BkDialog>
 </template>
 
-<script
-  setup
-  lang="tsx"
-  generic="
-    T extends
-      | RedisModel
-      | SpiderModel
-      | EsModel
-      | HdfsModel
-      | KafkaModel
-      | PulsarModel
-      | SqlServerHaClusterDetailModel
-      | SqlServerSingleClusterDetailModel
-  ">
+<script setup lang="tsx">
+  import type { JSX } from 'vue/jsx-runtime';
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import EsModel from '@services/model/es/es';
-  import HdfsModel from '@services/model/hdfs/hdfs';
-  import KafkaModel from '@services/model/kafka/kafka';
-  import PulsarModel from '@services/model/pulsar/pulsar';
-  import RedisModel from '@services/model/redis/redis';
-  import SpiderModel from '@services/model/spider/spider';
-  import SqlServerHaClusterDetailModel from '@services/model/sqlserver/sqlserver-ha-cluster-detail';
-  import SqlServerSingleClusterDetailModel from '@services/model/sqlserver/sqlserver-single-cluster-detail';
-  import { updateClusterEntryConfig } from '@services/source/clusterEntry';
+  import type { DBTypes } from '@common/const';
 
-  import { messageError, messageSuccess } from '@utils';
-
-  import MultipleInput, { checkIp } from './MultipleInput.vue';
+  import RenderBindIps from './RenderBindIps.vue';
 
   export interface RowData {
     type: string,
     entry: string,
+    role: string,
     ips: string,
     port: number,
   }
@@ -88,12 +59,28 @@
 
   interface Props {
     id?: number
-    getDetailInfo: (params: any) => Promise<T>
+    resource: DBTypes;
+    permission: boolean;
+    renderEntry?: (data: RowData) => JSX.Element | string;
+    getDetailInfo: (params: any) => Promise<{
+      cluster_entry_details: {
+        cluster_entry_type: string,
+        entry: string,
+        role: string,
+        target_details: {
+          ip: string,
+          port: number
+        }[]
+      }[]
+    }>;
+    sort?: (data: RowData[]) => RowData[];
   }
 
-  type UpdateClusterEntryConfigParams = ServiceParameters<typeof updateClusterEntryConfig>;
-
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    id: 0,
+    renderEntry: (data: RowData) => data.entry,
+    sort: (data: RowData[]) => data,
+  });
 
   const emits = defineEmits<Emits>();
 
@@ -111,47 +98,45 @@
     {
       label: t('访问入口'),
       field: 'entry',
+      width: 263,
       showOverflowTooltip: true,
+      render: ({ data }: { data: RowData }) => props.renderEntry(data),
     },
     {
       label: 'Bind IP',
       field: 'ips',
-      render: ({ data }: {data: RowData}) => <MultipleInput v-model={data.ips} disabled={data.type !== 'dns'} />,
+      width: 263,
+      render: ({ data }: {data: RowData}) => (
+        <RenderBindIps
+          v-model={props.id}
+          data={data}
+          permission={props.permission}
+          resource={props.resource}
+          onSuccess={handleSuccess} />
+      )
     },
   ];
 
-  const { run: runUpdateClusterEntryConfig } = useRequest(updateClusterEntryConfig, {
-    manual: true,
-    onSuccess: () => {
-      messageSuccess(t('修改成功'));
-      emits('success');
-      handleClose();
-    },
-    onError: () => {
-      messageError(t('修改失败'));
-    },
-  });
-
-  watch(() => props.id, (id) => {
-    if (id) {
+  watch(isShow, () => {
+    if (isShow.value && props.id !== 0) {
       fetchResources();
     }
-  }, {
-    immediate: true,
   });
 
   const fetchResources = () => {
     isLoading.value = true;
     props.getDetailInfo({
       id: props.id,
     })
-      .then((res: T) => {
-        tableData.value = res.cluster_entry_details.map(item => ({
+      .then((res) => {
+        const data = res.cluster_entry_details.map(item => ({
           type: item.cluster_entry_type,
           entry: item.entry,
+          role: item.role,
           ips: item.target_details.map(row => row.ip).join('\n'),
           port: item.target_details[0].port,
         }));
+        tableData.value = props.sort(data);
       })
       .catch(() => {
         tableData.value = [];
@@ -163,33 +148,9 @@
 
   const generateCellClass = (cell: { field: string}) => (cell.field === 'ips' ? 'entry-config-ips-column' : '');
 
-  const handleClose = () => {
-    isShow.value = false;
-  };
-
-  const handleConfirm = () => {
-    if (!props.id) {
-      return;
-    }
-    const dnsData = tableData.value.filter(item => item.type === 'dns');
-    const isChecked = dnsData.every(item => item.ips.split('\n').every(ip => checkIp(ip)));
-    if (isChecked) {
-      const details = dnsData.reduce((results, item) => {
-        const obj = {
-          cluster_entry_type: item.type,
-          domain_name: item.entry,
-          target_instances: item.ips.split('\n').map(row => `${row}#${item.port}`),
-        };
-        results.push(obj);
-        return results;
-      }, [] as UpdateClusterEntryConfigParams['cluster_entry_details']);
-      const params = {
-        cluster_id: props.id,
-        cluster_entry_details: details,
-      };
-      runUpdateClusterEntryConfig(params);
-    }
-  };
+  const handleSuccess = () => {
+    emits('success');
+  }
 </script>
 
 <style lang="less" scoped>
@@ -204,4 +165,10 @@
       line-height: normal !important;
     }
   }
+
+  .entry-config-dialog {
+    .bk-modal-footer {
+      display: none;
+    }
+  }
 </style>
diff --git a/dbm-ui/frontend/src/components/cluster-entry-config/MultipleInput.vue b/dbm-ui/frontend/src/components/cluster-entry-config/MultipleInput.vue