feat(frontend): 资源池统计视图 #6519

# Reviewed, transaction id: 19621

dbm-ui/frontend/src/services/model/db-resource/summary.ts

@@ -48,11 +48,11 @@ export default class Summary {
     this.sub_zone_detail = payload.sub_zone_detail;
   }
 
-  get device_display() {
+  get deviceDisplay() {
     return `${this.device_class} (${this.disk_summary})`;
   }
 
-  get spec_type_display() {
+  get specTypeDisplay() {
     if (!this.spec_cluster_type || !this.spec_machine_type) {
       return '--';
     }
@@ -61,7 +61,7 @@ export default class Summary {
     return matchMachine ? `${name} - ${matchMachine.name}` : '--';
   }
 
-  get sub_zone_detail_display() {
+  get subzoneDetailDisplay() {
     return `${Object.entries(this.sub_zone_detail)
       .map(([zone, count]) => `${zone}: ${count}`)
       .join(', ')};`;

dbm-ui/frontend/src/services/source/dbresourceResource.ts

@@ -204,7 +204,7 @@ export function getSummaryList(params: {
     spec_id_list?: number[];
   };
 }) {
-  return http.post<SummaryModel[]>(`${path}/resource_summary/`, params).then((data) => ({
+  return http.get<SummaryModel[]>(`${path}/resource_summary/`, params).then((data) => ({
     count: data.length || 0,
     results: data.map((item) => new SummaryModel(item)),
   }));

dbm-ui/frontend/src/views/resource-manage/pool/Index.vue

@@ -13,7 +13,7 @@
 
 <template>
   <BkTab
-    v-model:active="active"
+    v-model:active="activeTab"
     class="pool-tab"
     type="unborder-card"
     @change="handleChange">
@@ -39,6 +39,7 @@
   import SummaryView from './summary-view/Index.vue';
 
   const { t } = useI18n();
+  const router = useRouter();
   const route = useRoute();
 
   const panels = [
@@ -54,27 +55,32 @@
 
   const comRef = ref();
 
-  const active = useDebouncedRef((route.query.tab as string) || 'summary-view');
+  const activeTab = useDebouncedRef('summary-view');
 
   const renderComponentMap = {
     'summary-view': SummaryView,
     'host-list': HostList,
   };
 
-  const renderComponent = computed(() => renderComponentMap[active.value as keyof typeof renderComponentMap]);
+  const renderComponent = computed(() => renderComponentMap[activeTab.value as keyof typeof renderComponentMap]);
 
   watch(
-    () => route.query,
-    () => {
-      active.value = (route.query.tab as string) || 'summary-view';
+    () => route.params,
+    (value) => {
+      activeTab.value = value.page as string;
+    },
+    {
+      immediate: true,
     },
   );
 
   const handleChange = (value: string) => {
-    active.value = value;
-    if (comRef.value.clearSearch) {
-      comRef.value.clearSearch();
-    }
+    router.replace({
+      params: {
+        page: value,
+      },
+      query: {},
+    });
   };
 </script>
 

dbm-ui/frontend/src/views/resource-manage/pool/host-list/Index.vue

@@ -112,10 +112,6 @@
   import SearchBox from './components/search-box/Index.vue';
   import useTableSetting from './hooks/useTableSetting';
 
-  interface Exposes {
-    clearSearch: () => void;
-  }
-
   const { t } = useI18n();
   const router = useRouter();
 
@@ -332,10 +328,6 @@
   const handleClearSearch = () => {
     searchBoxRef.value.clearValue();
   };
-
-  defineExpose<Exposes>({
-    clearSearch: handleClearSearch,
-  });
 </script>
 <style lang="less">
   .resource-pool-list-page {

dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/Index.vue

@@ -58,68 +58,52 @@
 
   const renderCom = computed(() => comMap[renderStatus.value]);
 
-  // url 解析器
-  const urlParamsAnaly = (field: string, type?: string) => {
-    const value = urlSearchParams[field];
-    if (!value) {
-      return;
-    }
-    if (type === 'array') {
-      return value.split(',');
-    }
-    if (type === 'rang') {
-      return value.split('-');
-    }
-    if (type === 'number') {
-      return Number(value);
-    }
-    return value;
-  };
-
   // 解析 url 上面附带的查询参数
   Object.keys(urlSearchParams).forEach((fieldName) => {
     const config = fieldConfig[fieldName];
-    if (!config) {
-      return;
+    const value = urlSearchParams[fieldName];
+
+    if (config && value) {
+      switch (config.type) {
+        case 'array':
+          searchParams.value[fieldName] = value.split(',');
+          break;
+        case 'rang':
+          searchParams.value[fieldName] = value.split('-');
+          break;
+        case 'number':
+          searchParams.value[fieldName] = Number(value);
+          break;
+        default:
+          searchParams.value[fieldName] = value;
+      }
     }
-    searchParams.value[fieldName] = urlParamsAnaly(fieldName, config.type);
   });
 
   // 切换搜索展示样式
   const handleToggle = () => {
     renderStatus.value = renderStatus.value === 'input' ? 'tag' : 'input';
   };
 
-  // 转换成 url 上面附带的查询参数
-  const formatValue = (field: string, type?: string) => {
-    const value = searchParams.value[field];
-    if (isValueEmpty(value)) {
-      return {};
-    }
-    if (type === 'array' && value.length > 0) {
-      return {
-        [field]: value.join(','),
-      };
-    }
-    if (type === 'rang' && value.length > 0) {
-      return {
-        [field]: `${value[0]}-${value[1]}`,
-      };
-    }
-    return {
-      [field]: value,
-    };
-  };
-
   // 提交搜索
   const handleSubmit = () => {
-    const params = Object.entries(fieldConfig).reduce<Record<string, any>>(
-      (acc, [fieldName, config]) => ({
-        ...acc,
-        ...formatValue(fieldName, config.type),
-      }),
-      {},
-    );
+    const params = Object.entries(fieldConfig).reduce<Record<string, any>>((acc, [fieldName, config]) => {
+      const value = searchParams.value[fieldName];
+
+      if (isValueEmpty(value)) {
+        return acc;
+      }
+
+      if (config.type === 'array' && value.length > 0) {
+        acc[fieldName] = value.join(',');
+      } else if (config.type === 'rang' && value.length > 0) {
+        acc[fieldName] = `${value[0]}-${value[1]}`;
+      } else {
+        acc[fieldName] = value;
+      }
+
+      return acc;
+    }, {});
     emits('change', params);
   };
 

dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/com-factory/components/CitySubzones.vue

@@ -16,7 +16,7 @@
     <BkSelect
       v-model="cityCode"
       clearable
-      style="width: 150px"
+      style="width: 100px"
       @change="handleCityChange">
       <BkOption
         v-for="item in citiyList"
@@ -32,7 +32,6 @@
       multiple
       multiple-mode="tag"
       show-select-all
-      style="width: 300px"
       @change="handleChange">
       <BkOption
         v-for="item in filterSubzoneList"

dbm-ui/frontend/src/views/resource-manage/pool/host-list/components/search-box/components/field-config.ts

@@ -82,13 +82,11 @@ export default {
   city: {
     label: t('地域 - 园区'),
     component: 'city',
-    flex: 2,
     type: 'string',
   },
   subzone_ids: {
     label: t('地域 - 园区'),
     component: 'city',
-    flex: 2,
     type: 'array',
   },
   device_class: {

dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/Export.vue

@@ -15,7 +15,7 @@
 
   interface Props {
     data: SummaryModel[];
-    dimension: 'spec' | 'device_class';
+    dimension: string;
   }
 
   const props = defineProps<Props>();
@@ -41,18 +41,18 @@
         return props.data.map((item) => [
           item.for_biz_name,
           item.city,
-          item.spec_type_display,
+          item.specTypeDisplay,
           item.spec_name,
-          item.sub_zone_detail_display,
+          item.subzoneDetailDisplay,
           item.count,
         ]);
       case 'device_class':
         return props.data.map((item) => [
           item.for_biz_name,
           item.city,
-          item.device_display,
+          item.deviceDisplay,
           item.cpu_mem_summary,
-          item.sub_zone_detail_display,
+          item.subzoneDetailDisplay,
           item.count,
         ]);
       default:

dbm-ui/frontend/src/views/resource-manage/pool/summary-view/components/List.vue

@@ -3,11 +3,7 @@
     class="summary-view-list"
     mode="collapse"
     :title="t('分布情况')">
-    <SearchBox
-      ref="searchRef"
-      v-model="dbType"
-      @change="handleChangeDbType"
-      @search="fetchListData" />
+    <SearchBox @search="fetchListData" />
     <div class="opearte-row">
       <DimensionSelect
         v-model="dimension"
@@ -34,15 +30,15 @@
         <template v-if="isSpec">
           <BkTableColumn
             :label="t('规格类型')"
-            prop="spec_type_display" />
+            prop="specTypeDisplay" />
           <BkTableColumn
             :label="t('规格')"
             prop="spec_name" />
         </template>
         <template v-else>
           <BkTableColumn
             :label="t('机型（硬盘）')"
-            prop="device_display" />
+            prop="deviceDisplay" />
           <BkTableColumn
             :label="t('CPU 内存')"
             prop="cpu_mem_summary" />
@@ -92,32 +88,27 @@
   import type SummaryModel from '@services/model/db-resource/summary';
   import { getSummaryList } from '@services/source/dbresourceResource';
 
-  import { useDefaultPagination } from '@hooks';
-
-  import { DBTypes } from '@common/const';
+  import { useDebouncedRef, useDefaultPagination, useUrlSearch } from '@hooks';
 
   import DimensionSelect from './DimensionSelect.vue';
   import Export from './Export.vue';
-  import type { DbSelectValue } from './search-box/components/Db.vue';
   import SearchBox from './search-box/Index.vue';
 
   const { t } = useI18n();
   const router = useRouter();
+  const { getSearchParams } = useUrlSearch();
 
-  const searchRef = ref<InstanceType<typeof SearchBox>>();
   const loadingRef = ref();
-  const dbType = ref<DbSelectValue>(DBTypes.REDIS);
-  const dimension = ref<'spec' | 'device_class'>('spec');
+  const dimension = ref('spec');
   const pagination = ref(useDefaultPagination());
   const isAnomalies = ref(false);
   const allTableData = shallowRef<SummaryModel[]>([]);
 
   const isSpec = computed(() => dimension.value === 'spec');
+  const searchParams = useDebouncedRef(getSearchParams());
   const tableData = computed(() => {
     const { current, limit } = pagination.value;
-    // 计算起始索引
     const startIndex = (current - 1) * limit;
-    // 计算结束索引
     const endIndex = startIndex + limit;
     return allTableData.value.slice(startIndex, endIndex);
   });
@@ -136,20 +127,15 @@
     },
   });
 
-  const fetchListData = async () => {
-    const params = await searchRef.value?.getValue();
+  const fetchListData = () => {
     fetchData({
       group_by: dimension.value,
-      ...params,
+      ...getSearchParams(),
     } as ServiceParameters<typeof getSummaryList>);
   };
 
-  const handleChangeDbType = (value: DbSelectValue) => {
-    dbType.value = value;
-  };
-
   const handleChangeDimension = (value: string) => {
-    dimension.value = value as 'spec' | 'device_class';
+    dimension.value = value;
     fetchListData();
   };
 
@@ -165,23 +151,21 @@
   const handleClick = (row: SummaryModel, subzoneId?: number) => {
     const params = {
       for_biz: row.dedicated_biz,
-      resource_type: dbType.value,
+      resource_type: searchParams.value.dbType,
       city: row.city,
       subzone_ids: subzoneId,
       spec_id: row.spec_id,
     };
     router.push({
       name: 'resourcePool',
+      params: {
+        page: 'host-list',
+      },
       query: {
-        tab: 'host-list',
         ...params,
       },
     });
   };
-
-  onMounted(() => {
-    fetchListData();
-  });
 </script>
 
 <style lang="less" scoped>