fix: 客户端体验优化 (#3149)

* fix: 客户端国际化内容补全 * fix: 调整客户端数据展示单位 * fix: 修复新建服务后指引dialog不会消失
TencentBlueKing · Apr 24, 2024 · 3320328 · 3320328
1 parent 1d8baab
commit 3320328
Show file tree

Hide file tree

Showing 18 changed files with 94 additions and 46 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/api/client.ts b/bcs-services/bcs-bscp/ui/src/api/client.ts
@@ -130,8 +130,8 @@ export const getClientComponentInfoData = (bizId: string, appId: number, query:
  * @param clientId 客户端id
  * @returns
  */
-export const getClientLabelsAndAnnotations = (bizId: string, appId: number) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/clients/labels_and_annotations`);
+export const getClientLabelsAndAnnotations = (bizId: string, appId: number, query: any) =>
+  http.post(`/config/biz/${bizId}/apps/${appId}/clients/labels_and_annotations`, query);
 
 /**
  * 获取客户端拉取失败详细原因

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -722,7 +722,7 @@ export default {
   开始时间: 'Start time',
   结束时间: 'End time',
   配置拉取方式: 'Configure the pull mode',
-  '配置拉取耗时(秒)': 'Configure the pull time (seconds)',
+  配置拉取耗时: 'Configure the pull time',
   配置拉取文件数: 'The number of pull files was set',
   配置拉取文件大小: 'Configure the pull file size',
   配置拉取状态: 'Configure the pull status',
@@ -735,6 +735,7 @@ export default {
   占比: 'Proportion',
   配置版本: 'Configuration version',
   数量: 'Number',
+  客户端配置拉取质量: 'Client configuration pull quality',
   拉取数量趋势: 'Pull quantity trend',
   '近 {n} 天': 'Last {n} days',
   客户端: 'Client',

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -727,7 +727,7 @@ export default {
   开始时间: '开始时间',
   结束时间: '结束时间',
   配置拉取方式: '配置拉取方式',
-  '配置拉取耗时(秒)': '配置拉取耗时(秒)',
+  配置拉取耗时: '配置拉取耗时',
   配置拉取文件数: '配置拉取文件数',
   配置拉取文件大小: '配置拉取文件大小',
   配置拉取状态: '配置拉取状态',

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/components/client-header.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/components/client-header.vue
@@ -38,6 +38,7 @@
         v-model="heartbeatTime"
         class="heartbeat-selector"
         :clearable="false"
+        :filterable="false"
         @change="handleHeartbeatTimeChange">
         <bk-option v-for="item in heartbeatTimeList" :id="item.value" :key="item.value" :name="item.label" />
       </bk-select>

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/components/search-selector.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/components/search-selector.vue
@@ -8,7 +8,10 @@
       placement="bottom"
       theme="light"
       @after-show="handleGetSearchList('recent')">
-      <div class="search-wrap" :data-placeholder="inputPlacehoder">
+      <div
+        class="search-wrap"
+        :data-placeholder="inputPlacehoder"
+        v-bk-tooltips="{ content: inputPlacehoder, disabled: locale === 'zh-cn' || !inputPlacehoder }">
         <div class="search-condition-list">
           <bk-tag
             v-for="(condition, index) in searchConditionList"
@@ -128,7 +131,7 @@
   import { useRoute } from 'vue-router';
   import { useI18n } from 'vue-i18n';
 
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
 
   const clientStore = useClientStore();
   const { searchQuery } = storeToRefs(clientStore);

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/pull-record.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/pull-record.vue
@@ -60,25 +60,29 @@
               </div>
             </template>
           </bk-table-column>
-          <bk-table-column :label="$t('配置拉取方式')" prop="attachment.client_mode" width="104"></bk-table-column>
-          <bk-table-column :label="$t('配置拉取耗时(秒)')" width="128">
+          <bk-table-column :label="$t('配置拉取方式')" prop="attachment.client_mode" width="110"></bk-table-column>
+          <bk-table-column :label="$t('配置拉取耗时')" width="128">
             <template #default="{ row }">
               <span v-if="row.spec">
-                {{ parseInt(row.spec.total_seconds) }}
+                {{
+                  row.spec.total_seconds > 1
+                    ? `${Math.round(row.spec.total_seconds)}s`
+                    : `${Math.round(row.spec.total_seconds * 1000)}ms`
+                }}
               </span>
             </template>
           </bk-table-column>
-          <bk-table-column :label="$t('配置拉取文件数')" width="116">
+          <bk-table-column :label="$t('配置拉取文件数')" width="120">
             <template #default="{ row }">
               <div v-if="row.spec">{{ `${row.spec.download_file_num}/${row.spec.total_file_num}` }}</div>
             </template>
           </bk-table-column>
-          <bk-table-column :label="$t('配置拉取文件大小')" width="128">
+          <bk-table-column :label="$t('配置拉取文件大小')" width="130">
             <template #default="{ row }">
               <div v-if="row.spec">{{ byteUnitConverse(row.spec.download_file_size) }}</div>
             </template>
           </bk-table-column>
-          <bk-table-column :label="$t('配置拉取状态')" width="104">
+          <bk-table-column :label="$t('配置拉取状态')" width="110">
             <template #default="{ row }">
               <div v-if="row.spec" class="release_change_status">
                 <Spinner v-if="row.spec.release_change_status === 'Skip'" class="spinner-icon" fill="#3A84FF" />
@@ -150,12 +154,20 @@
     try {
       loading.value = true;
       isSearchEmpty.value = searchStr.value !== '';
+      let search_value;
+      if (searchStr.value === '成功') {
+        search_value = 'success';
+      } else if (searchStr.value === '失败') {
+        search_value = 'failed';
+      } else {
+        search_value = searchStr.value;
+      }
       const params = {
         start: pagination.value.limit * (pagination.value.current - 1),
         limit: pagination.value.limit,
         start_time: initDateTime.value[0],
         end_time: initDateTime.value[1],
-        search_value: searchStr.value,
+        search_value,
       };
       const resp = await getClientPullRecord(props.bkBizId, props.appId, props.id, params);
       pagination.value.count = resp.data.count;

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/search/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/search/index.vue
@@ -319,7 +319,6 @@
   };
 
   const handleFilter = ({ checked, index }: any) => {
-    console.log(checked, index);
     if (index === 4) {
       // 调整最近一次拉取配置筛选条件
       clientStore.$patch((state) => {

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/statistics/section/component-info/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/statistics/section/component-info/index.vue
@@ -36,7 +36,7 @@
         <div class="resource-info">
           <span v-if="item.value">
             <span class="time">{{ item.key.includes('cpu') ? item.value : Math.round(item.value) }}</span>
-            <span class="unit">{{ item.key.includes('cpu') ? t('核') : 'MB' }}</span>
+            <span class="unit">{{ item.unit }}</span>
           </span>
           <span v-else class="empty">{{ t('暂无数据') }}</span>
         </div>
@@ -162,9 +162,20 @@
       const res = await getClientComponentInfoData(props.bkBizId, props.appId, params);
       data.value = res.version_distribution;
       sunburstData.value.children = convertToTree(res.version_distribution);
-      Object.entries(res.resource_usage).map(
-        ([key, value]) => (resourceData.value.find((item) => item.key === key)!.value = value as number),
-      );
+      Object.entries(res.resource_usage).forEach(([key, value]) => {
+        const item = resourceData.value.find((item) => item.key === key) as IInfoCard;
+        item!.value = value as number;
+        if (!item.key.includes('cpu')) {
+          item.unit = 'MB';
+        } else {
+          if (item.value > 1) {
+            item.unit = t('核');
+          } else {
+            item.value = item.value * 1000;
+            item.unit = 'mCPUs';
+          }
+        }
+      });
     } catch (error) {
       console.error(error);
     } finally {

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/statistics/section/component-info/pie.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/statistics/section/component-info/pie.vue
@@ -42,7 +42,7 @@
       data: props.data,
       colorField: 'name',
       label: {
-        content: ({ data }) => `${data.percent.toFixed(1)}%`,
+        content: ({ data }) => `${(data.percent * 100).toFixed(0)}%`,
         style: {
           fontSize: 14,
           textAlign: 'center',
@@ -76,5 +76,4 @@
   };
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/...bcs-bscp/ui/src/views/space/client/statistics/section/label-and-annotations/chart/pie.vue b/...bcs-bscp/ui/src/views/space/client/statistics/section/label-and-annotations/chart/pie.vue
@@ -59,7 +59,6 @@
         container: tooltipRef.value?.getDom(),
         enterable: true,
         customItems: (originalItems: any[]) => {
-          console.log(originalItems);
           originalItems[0].name = t('客户端数量');
           originalItems[1].name = t('占比');
           originalItems[1].value = `${(originalItems[1].value * 100).toFixed(0)}%`;

diff --git a/...ces/bcs-bscp/ui/src/views/space/client/statistics/section/label-and-annotations/index.vue b/...ces/bcs-bscp/ui/src/views/space/client/statistics/section/label-and-annotations/index.vue
@@ -6,8 +6,8 @@
           v-model="selectedLabel"
           :popover-options="{ theme: 'light bk-select-popover add-chart-wrap' }"
           :popover-min-width="240"
-          multiple
-          filterable>
+          :filterable="false"
+          multiple>
           <template #trigger>
             <div class="add-chart-wrap">
               <Plus class="add-icon" />
@@ -138,7 +138,9 @@
 
   const getAddChartDate = async () => {
     try {
-      const res = await getClientLabelsAndAnnotations(props.bkBizId, props.appId);
+      const res = await getClientLabelsAndAnnotations(props.bkBizId, props.appId, {
+        last_heartbeat_time: searchQuery.value.last_heartbeat_time,
+      });
       addChartData.value = res.data;
       selectedLabel.value = addChartData.value?.labels.slice(0, 2) || addChartData.value?.labels.slice(0, 1) || [];
     } catch (e) {

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/statistics/section/pull-mass/pull-count.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/statistics/section/pull-mass/pull-count.vue
@@ -9,7 +9,7 @@
             @toggle-full-screen="isOpenFullScreen = !isOpenFullScreen" />
         </template>
         <template #head-suffix>
-          <bk-select v-model="selectTime" class="time-selector" :clearable="false">
+          <bk-select v-model="selectTime" class="time-selector" :filterable="false" :clearable="false">
             <bk-option v-for="item in selectorTimeList" :id="item.value" :key="item.value" :name="item.label" />
           </bk-select>
         </template>
@@ -201,7 +201,7 @@
                 item.name = t('主机插件客户端');
                 break;
               case 'command':
-                item.name = 'CLI';
+                item.name = `CLI ${t('客户端')}`;
                 break;
               default:
                 item.name = t('总量');

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/statistics/section/pull-mass/pull-error.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/statistics/section/pull-mass/pull-error.vue
@@ -167,9 +167,16 @@
       loading.value = true;
       const res = await getClientPullStatusData(props.bkBizId, props.appId, params);
       data.value = res.failed_reason;
-      Object.entries(res.time_consuming).map(
-        ([key, value]) => (pullTime.value.find((item) => item.key === key)!.value = value as number),
-      );
+      Object.entries(res.time_consuming).forEach(([key, value]) => {
+        const item = pullTime.value.find((item) => item.key === key) as IInfoCard;
+        item.value = value as number;
+        if (item.value > 1) {
+          item.unit = 's';
+        } else {
+          item.value = item.value * 1000;
+          item.unit = 'ms';
+        }
+      });
     } catch (error) {
       console.error(error);
     } finally {
@@ -290,10 +297,15 @@
   };
 
   const refresh = async () => {
-    isShowSpecificReason.value = false;
-    await loadChartData();
-    if (data.value.length) {
-      initChart();
+    if (!isShowSpecificReason.value) {
+      loadChartData();
+    } else {
+      isShowSpecificReason.value = false;
+      await loadChartData();
+      if (data.value.length) {
+        initChart();
+        initialWidth.value = canvasRef.value!.offsetWidth;
+      }
     }
   };
 </script>

diff --git a/...services/bcs-bscp/ui/src/views/space/client/statistics/section/pull-mass/pull-success.vue b/...services/bcs-bscp/ui/src/views/space/client/statistics/section/pull-mass/pull-success.vue
@@ -129,7 +129,7 @@
       angleField: 'count',
       colorField: 'release_change_status',
       color: ({ release_change_status }) => {
-        return release_change_status === '拉取成功' ? '#85CCA8' : '#F5876C';
+        return release_change_status === t('拉取成功') ? '#85CCA8' : '#F5876C';
       },
       radius: 0.9,
       label: {
@@ -153,7 +153,7 @@
         container: tooltipRef.value?.getDom(),
         enterable: true,
         customItems: (originalItems: any[]) => {
-          jumpStatus.value = originalItems[0].data.release_change_status;
+          jumpStatus.value = originalItems[0].data.release_change_status === t('拉取成功') ? 'Success' : 'Failed';
           originalItems[0].name = t('客户端数量');
           originalItems[1].name = t('占比');
           originalItems[1].value = `${(parseFloat(originalItems[1].value) * 100).toFixed(1)}%`;

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue
@@ -13,6 +13,7 @@
             :input-search="false"
             :disabled="rule.type === 'del'"
             :placeholder="t('请选择服务')"
+            :search-placeholder="$t('请输入')"
             @change="handleSelectApp(index)">
             <bk-option v-for="app in appList" :id="app" :key="app.id" :name="app.spec.name" />
           </bk-select>

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/credentials/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/credentials/index.vue
@@ -24,6 +24,7 @@
             class="search-group-input"
             :placeholder="t('密钥名称/说明/关联规则/更新人')"
             :clearable="true"
+            v-bk-tooltips="{ content: t('密钥名称/说明/关联规则/更新人'), disabled: locale === 'zh-cn' || searchStr }"
             @clear="refreshListWithLoading()"
             @input="handleSearchInputChange">
             <template #suffix>
@@ -129,7 +130,7 @@
                   v-if="row.credential_scopes.length > 3"
                   class="toggle-button"
                   @click="toggleRulesExpanded(row.id)">
-                  {{ row.isExpandedRules ? '收起' : '展开' }}
+                  {{ row.isExpandedRules ? t('收起') : t('展开') }}
                 </span>
               </div>
               <span v-else>--</span>

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/create-service.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/create-service.vue
@@ -16,10 +16,12 @@
     </div>
   </bk-sideslider>
   <bk-dialog
+    ref="dialog"
     ext-cls="confirm-dialog"
     :is-show="isShowConfirmDialog"
     :show-mask="true"
     :quick-close="false"
+    :multi-instance="false"
     @closed="isShowConfirmDialog = false">
     <div class="title-icon"><Done fill="#42C06A" /></div>
     <div class="title-info">{{ t('服务新建成功') }}</div>
@@ -117,13 +119,17 @@
   };
 
   const handleGoCreateConfig = () => {
-    router.push({
-      name: 'service-config',
-      params: {
-        spaceId: spaceId.value,
-        appId: appId.value,
-      },
-    });
+    isShowConfirmDialog.value = false;
+    // 目前组件库dialog关闭自带250ms的延迟，所以这里延时300ms
+    setTimeout(() => {
+      router.push({
+        name: 'service-config',
+        params: {
+          spaceId: spaceId.value,
+          appId: appId.value,
+        },
+      });
+    }, 300);
   };
 
   const close = () => {
@@ -148,8 +154,8 @@
     }
   }
 
-  .confirm-dialog {
-    :deep(.bk-modal-body) {
+  :deep(.confirm-dialog) {
+    .bk-modal-body {
       width: 400px;
       padding: 0;
       .bk-modal-header {

diff --git a/bcs-services/bcs-bscp/ui/types/client.ts b/bcs-services/bcs-bscp/ui/types/client.ts
@@ -94,6 +94,7 @@ export interface IInfoCard {
   value: number;
   name: string;
   key: string;
+  unit?: string;
 }
 
 export interface IPullErrorReason {