fix(frontend): 修复资源池体验问题 #287

TencentBlueKing · Aug 31, 2023 · bb9549e · bb9549e
1 parent 7307efb
commit bb9549e
Show file tree

Hide file tree

Showing 24 changed files with 169 additions and 98 deletions.
diff --git a/dbm-ui/frontend/package.json b/dbm-ui/frontend/package.json
@@ -18,7 +18,7 @@
     "@blueking/ip-selector": "0.0.1-beta.116",
     "@vueuse/core": "10.2.1",
     "axios": "1.2.1",
-    "bkui-vue": "0.0.2-beta.21",
+    "bkui-vue": "0.0.2-beta.25",
     "date-fns": "2.28.0",
     "dayjs": "1.11.9",
     "html-to-image": "1.11.3",

diff --git a/dbm-ui/frontend/src/components/apply-items/SpecSelector.vue b/dbm-ui/frontend/src/components/apply-items/SpecSelector.vue
@@ -1,65 +1,79 @@
 <template>
-  <BkSelect
-    class="spec-selector"
-    :loading="loading"
-    :model-value="modelValue"
-    @change="handleChange">
-    <BkOption
-      v-for="item in list"
-      :key="item.spec_id"
-      :label="item.spec_name"
-      :value="item.spec_id">
-      <BkPopover
-        :offset="18"
-        placement="right-start"
-        :popover-delay="0"
-        theme="light">
-        <div class="spec-display">
-          <span class="text-overflow">{{ item.spec_name }}</span>
-          <span
-            v-if="typeof item.count === 'number'"
-            class="spec-display-count">{{ item.count }}</span>
-        </div>
-        <template #content>
-          <div class="info-wrapper">
-            <strong class="info-name">{{ item.spec_name }}</strong>
-            <div class="info">
-              <span class="info-title">CPU：</span>
-              <span class="info-value">({{ item.cpu.min }} ~ {{ item.cpu.max }}) {{ $t('核') }}</span>
-            </div>
-            <div class="info">
-              <span class="info-title">{{ $t('内存') }}：</span>
-              <span class="info-value">({{ item.mem.min }} ~ {{ item.mem.max }}) G</span>
-            </div>
-            <div
-              class="info"
-              style="align-items: start;">
-              <span class="info-title">{{ $t('磁盘') }}：</span>
-              <span class="info-value">
-                <DbOriginalTable
-                  :border="['row', 'col', 'outer']"
-                  class="custom-edit-table mt-8"
-                  :columns="columns"
-                  :data="item.storage_spec" />
-              </span>
-            </div>
-            <div
-              v-if="item.instance_num"
-              class="info"
-              style="align-items: start;">
-              <span
-                v-overflow-tips="{
-                  content: $t('每台主机实例数量'),
-                  zIndex: 99999
-                }"
-                class="info-title text-overflow">{{ $t('每台主机实例数量') }}：</span>
-              <span class="info-value">{{ item.instance_num }}</span>
-            </div>
+  <div class="spec-selector-wrapper">
+    <BkSelect
+      class="spec-selector"
+      :loading="loading"
+      :model-value="modelValue"
+      @change="handleChange">
+      <BkOption
+        v-for="item in list"
+        :key="item.spec_id"
+        :label="item.spec_name"
+        :value="item.spec_id">
+        <BkPopover
+          :offset="18"
+          placement="right-start"
+          :popover-delay="0"
+          theme="light">
+          <div class="spec-display">
+            <span class="text-overflow">{{ item.spec_name }}</span>
+            <span
+              v-if="typeof item.count === 'number'"
+              class="spec-display-count">{{ item.count }}</span>
           </div>
-        </template>
-      </BkPopover>
-    </BkOption>
-  </BkSelect>
+          <template #content>
+            <div class="info-wrapper">
+              <strong class="info-name">{{ item.spec_name }}</strong>
+              <div
+                v-if="typeof item.count === 'number'"
+                class="info">
+                <span class="info-title">{{ $t('可用主机数') }}：</span>
+                <span class="info-value">{{ item.count ?? 0 }}</span>
+              </div>
+              <div class="info">
+                <span class="info-title">CPU：</span>
+                <span class="info-value">({{ item.cpu.min }} ~ {{ item.cpu.max }}) {{ $t('核') }}</span>
+              </div>
+              <div class="info">
+                <span class="info-title">{{ $t('内存') }}：</span>
+                <span class="info-value">({{ item.mem.min }} ~ {{ item.mem.max }}) G</span>
+              </div>
+              <div
+                class="info"
+                style="align-items: start;">
+                <span class="info-title">{{ $t('磁盘') }}：</span>
+                <span class="info-value">
+                  <DbOriginalTable
+                    :border="['row', 'col', 'outer']"
+                    class="custom-edit-table mt-8"
+                    :columns="columns"
+                    :data="item.storage_spec" />
+                </span>
+              </div>
+              <div
+                v-if="item.instance_num"
+                class="info"
+                style="align-items: start;">
+                <span
+                  v-overflow-tips="{
+                    content: $t('每台主机实例数量'),
+                    zIndex: 99999
+                  }"
+                  class="info-title text-overflow">{{ $t('每台主机实例数量') }}：</span>
+                <span class="info-value">{{ item.instance_num }}</span>
+              </div>
+            </div>
+          </template>
+        </BkPopover>
+      </BkOption>
+    </BkSelect>
+    <DbIcon
+      v-if="showRefreshIcon"
+      v-bk-tooltips="$t('刷新获取最新资源规格')"
+      class="spec-refresh-icon"
+      type="refresh"
+      @click="getData" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -91,6 +105,7 @@
 
   const { t } = useI18n();
 
+  const showRefreshIcon = computed(() => Boolean(props.clusterType && props.machineType));
   const list = shallowRef<ResourceSpecData[]>([]);
   const {
     data,
@@ -106,13 +121,17 @@
     },
   });
 
+  const getData = () => {
+    fetchData({
+      limit: -1,
+      spec_cluster_type: props.clusterType,
+      spec_machine_type: props.machineType,
+    });
+  };
+
   watch([() => props.clusterType, () => props.machineType], () => {
     if (props.clusterType && props.machineType) {
-      fetchData({
-        limit: -1,
-        spec_cluster_type: props.clusterType,
-        spec_machine_type: props.machineType,
-      });
+      getData();
     }
   }, { immediate: true });
 
@@ -183,6 +202,20 @@
 </script>
 
 <style lang="less" scoped>
+.spec-selector-wrapper {
+  position: relative;
+  display: inline-block;
+
+  .spec-refresh-icon {
+    position: absolute;
+    top: 50%;
+    right: -24px;
+    color: @primary-color;
+    cursor: pointer;
+    transform: translateY(-50%);
+  }
+}
+
 .spec-selector {
   // width: 435px;
 }

diff --git a/dbm-ui/frontend/src/components/cluster-common/RenderNodeInstance.vue b/dbm-ui/frontend/src/components/cluster-common/RenderNodeInstance.vue
@@ -282,6 +282,10 @@
 .copy-popover {
   padding: 4px 6px !important;
 
+  .bk-pop2-arrow {
+    display: none;
+  }
+
   .copy-trigger {
     display: inline-block;
     padding: 0 4px;

diff --git a/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue b/dbm-ui/frontend/src/components/render-instances/RenderInstances.vue
@@ -325,5 +325,9 @@
 <style lang="less">
 .copy-popover {
   padding: 4px 6px !important;
+
+  .bk-pop2-arrow {
+    display: none;
+  }
 }
 </style>
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -2033,5 +2033,6 @@
   "只允许数字、大小写字母开头和结尾，或%结尾": "只允许数字、大小写字母开头和结尾，或%结尾",
   "不能是系统库": "不能是系统库",
   "请先输入源集群": "请先输入源集群",
+  "刷新获取最新资源规格": "刷新获取最新资源规格",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/views/es-manage/apply/Index.vue b/dbm-ui/frontend/src/views/es-manage/apply/Index.vue
@@ -377,7 +377,7 @@
     remark: '',
     ticket_type: 'ES_APPLY',
     details: {
-      bk_cloud_id: '',
+      bk_cloud_id: 0,
       db_app_abbr: '',
       cluster_name: '',
       cluster_alias: '',

diff --git a/dbm-ui/frontend/src/views/hdfs-manage/apply/Index.vue b/dbm-ui/frontend/src/views/hdfs-manage/apply/Index.vue
@@ -360,7 +360,7 @@
     bk_biz_id: '' as number | '',
     ticket_type: 'HDFS_APPLY',
     details: {
-      bk_cloud_id: '',
+      bk_cloud_id: 0,
       db_app_abbr: '',
       cluster_name: '',
       cluster_alias: '',

diff --git a/dbm-ui/frontend/src/views/influxdb-manage/apply/common/base.ts b/dbm-ui/frontend/src/views/influxdb-manage/apply/common/base.ts
@@ -22,7 +22,7 @@ export const getInitFormdata = () => ({
   ticket_type: 'INFLUXDB_APPLY',
   remark: '',
   details: {
-    bk_cloud_id: '',
+    bk_cloud_id: 0,
     ip_source: 'resource_pool',
     db_app_abbr: '',
     city_code: '',

diff --git a/dbm-ui/frontend/src/views/influxdb-manage/apply/index.vue b/dbm-ui/frontend/src/views/influxdb-manage/apply/index.vue
@@ -103,7 +103,8 @@
                   :biz-id="formdata.bk_biz_id"
                   :cloud-id="formdata.details.bk_cloud_id"
                   cluster-type="influxdb"
-                  machine-type="influxdb" />
+                  machine-type="influxdb"
+                  style="width: 314px;" />
               </BkFormItem>
               <BkFormItem
                 :label="$t('数量')"

diff --git a/dbm-ui/frontend/src/views/influxdb-manage/components/InstanceList.vue b/dbm-ui/frontend/src/views/influxdb-manage/components/InstanceList.vue
@@ -332,6 +332,7 @@
                   : null
               }
             </div>
+            <db-icon class="mt-4" type="copy" v-bk-tooltips={t('复制实例')} onClick={() => copy(data.instance_address)} />
           </div>
         ),
       },
@@ -859,12 +860,12 @@
 
   :deep(.instance-box) {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     padding: 8px 0;
     overflow: hidden;
 
     .instance-name {
-      line-height: 16px;
+      line-height: 20px;
     }
 
     .cluster-tags {
@@ -878,6 +879,21 @@
       margin: 2px;
       flex-shrink: 0;
     }
+
+    .db-icon-copy {
+      display: none;
+      margin-left: 4px;
+      color: @primary-color;
+      cursor: pointer;
+    }
+  }
+
+  :deep(tr) {
+    &:hover {
+      .db-icon-copy {
+        display: inline-block;
+      }
+    }
   }
 
   :deep(.is-offline) {

diff --git a/dbm-ui/frontend/src/views/kafka-manage/apply/Index.vue b/dbm-ui/frontend/src/views/kafka-manage/apply/Index.vue
@@ -328,7 +328,7 @@
     remark: '',
     ticket_type: 'KAFKA_APPLY',
     details: {
-      bk_cloud_id: '',
+      bk_cloud_id: 0,
       db_app_abbr: '',
       cluster_name: '',
       cluster_alias: '',

diff --git a/dbm-ui/frontend/src/views/mysql/apply/hooks/useMysqlData.ts b/dbm-ui/frontend/src/views/mysql/apply/hooks/useMysqlData.ts
@@ -40,7 +40,7 @@ const getFormData = (type: string) => ({
   remark: '',
   ticket_type: type,
   details: {
-    bk_cloud_id: '',
+    bk_cloud_id: 0,
     city_code: '',
     db_app_abbr: '',
     spec: '',

diff --git a/dbm-ui/frontend/src/views/pulsar-manage/apply/common/base.ts b/dbm-ui/frontend/src/views/pulsar-manage/apply/common/base.ts
@@ -26,7 +26,7 @@ export const getInitFormdata = () => ({
     password: '',
     ip_source: 'resource_pool',
     db_version: '',
-    bk_cloud_id: '',
+    bk_cloud_id: 0,
     retention_hours: 1,
     replication_num: 2,
     ack_quorum: 1,

diff --git a/dbm-ui/frontend/src/views/redis/apply/ApplyRedis.vue b/dbm-ui/frontend/src/views/redis/apply/ApplyRedis.vue
@@ -244,7 +244,8 @@
                     :biz-id="state.formdata.bk_biz_id"
                     :cloud-id="state.formdata.details.bk_cloud_id"
                     :cluster-type="typeInfos.cluster_type"
-                    :machine-type="typeInfos.machine_type" />
+                    :machine-type="typeInfos.machine_type"
+                    style="width: 314px;" />
                 </BkFormItem>
                 <BkFormItem
                   :label="$t('数量')"
@@ -441,7 +442,7 @@
       ticket_type: TicketTypes.REDIS_CLUSTER_APPLY,
       remark: '',
       details: {
-        bk_cloud_id: '',
+        bk_cloud_id: 0,
         db_app_abbr: '',
         proxy_port: 50000,
         cluster_name: '',

diff --git a/dbm-ui/frontend/src/views/redis/cluster-manage/list/List.vue b/dbm-ui/frontend/src/views/redis/cluster-manage/list/List.vue
@@ -123,7 +123,7 @@
     type ResourceRedisItem,
   } from '@services/types/clusters';
 
-  import { useDefaultPagination, useInfoWithIcon, useTableSettings, useTicketMessage } from '@hooks';
+  import { useCopy, useDefaultPagination, useInfoWithIcon, useTableSettings, useTicketMessage } from '@hooks';
 
   import { useGlobalBizs } from '@stores';
 
@@ -166,6 +166,7 @@
   const props = defineProps<Props>();
 
   const { t, locale } = useI18n();
+  const copy = useCopy();
   const route = useRoute();
   const router = useRouter();
   const globalBizsStore = useGlobalBizs();
@@ -225,6 +226,7 @@
               : null
           }
         </div>
+        <db-icon class="mt-4" type="copy" v-bk-tooltips={t('复制集群名称')} onClick={() => copy(data.cluster_name)} />
       </div>
     ),
   }, {
@@ -1014,6 +1016,13 @@
     &__table {
       :deep(.cell) {
         line-height: unset !important;
+
+        .db-icon-copy {
+          display: none;
+          margin-left: 4px;
+          color: @primary-color;
+          cursor: pointer;
+        }
       }
 
       :deep(.cluster-name-container) {