主被调 自测问题修复

bkmonitor/webpack/src/monitor-ui/chart-plugins/components/chart-title/chart-title.tsx

@@ -364,7 +364,7 @@ export default class ChartTitle extends tsc<IChartTitleProps, IChartTitleEvent>
                 interactive: this.showTitleIcon,
               }}
             >
-              {this.title}
+              {(this.$scopedSlots as any)?.title ? (this.$scopedSlots as any)?.title?.() : this.title}
             </div>
             {this.inited && [
               (this.showTitleIcon && this.showMetricAlarm && this.metricTitleData?.collect_interval) ||

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-service-caller-callee/apm-service-caller-callee.tsx

@@ -112,7 +112,7 @@ export default class ApmServiceCallerCallee extends tsc<IApmServiceCallerCalleeP
       }
     }
     console.info('routeCallOptions', routeCallOptions);
-    this.callType = getRecordCallOptionKind(this.viewOptions.filters) || routeCallOptions.kind || EKind.callee;
+    this.callType = routeCallOptions.kind || getRecordCallOptionKind(this.viewOptions.filters) || EKind.callee;
     const groupBy = this.groupByKindReset(this.callType, routeCallOptions.group_by || []);
     this.callOptions = {
       // panel 传递过来的一些变量

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-service-caller-callee/components/multi-view-table.scss

@@ -294,7 +294,6 @@
     }
 
     .multi-tips {
-      padding-left: 24px;
       margin-bottom: 8px;
       font-size: 12px;
       color: #979ba5;

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/apm-service-caller-callee/components/multi-view-table.tsx

@@ -443,7 +443,7 @@ export default class MultiViewTable extends tsc<IMultiViewTableProps, IMultiView
   }
 
   /** 字段操作 */
-  handleFieldOperations(opt: any, row: IDataItem, canClick = true, intersection = '') {
+  handleFieldOperations(opt: any, row: IDataItem, canClick = true, intersection = '', service = '') {
     const type = opt.value;
     if (!canClick) {
       return;
@@ -467,7 +467,7 @@ export default class MultiViewTable extends tsc<IMultiViewTableProps, IMultiView
       window.open(
         location.href.replace(
           location.hash,
-          `#/apm/service?filter-app_name=${app_name}&filter-service_name=${service_name}&dashboardId=service-default-caller_callee&callOptions=${JSON.stringify(callOptions)}`
+          `#/apm/service?filter-app_name=${app_name}&filter-service_name=${service}&dashboardId=service-default-caller_callee&callOptions=${JSON.stringify(callOptions)}`
         )
       );
       return;
@@ -639,7 +639,9 @@ export default class MultiViewTable extends tsc<IMultiViewTableProps, IMultiView
                                   content: this.$t('服务未接入'),
                                   disabled: item.isClick,
                                 }}
-                                onClick={() => this.handleFieldOperations(opt, row, item.isClick, intersection[0])}
+                                onClick={() =>
+                                  this.handleFieldOperations(opt, row, item.isClick, intersection[0], item.value)
+                                }
                               >
                                 {item.value}
                               </div>

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/caller-bar-chart/caller-bar-chart.scss

@@ -33,13 +33,10 @@
   }
 }
 .caller-pie-chart-tooltips {
-  .tooltips-header {
-    word-break: break-all;
-    padding-right: 5px;
-    height: 20px;
+  .tooltips-span {
+    color: rgb(99, 101, 110) !important;
+    margin: 0px 0px 2px 6px;
     font-size: 12px;
-    font-weight: normal;
-    color: rgb(99, 101, 110);
-    line-height: 20px;
+    text-align: left;
   }
 }

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/caller-bar-chart/caller-bar-chart.tsx

@@ -93,13 +93,13 @@ class CallerBarChart extends CommonSimpleChart {
       formatter: p => {
         const data = p[0].data;
         return `<div class="monitor-chart-tooltips">
-          <p class="tooltips-header">
+          <p class="tooltips-span">
           ${data.name}
           </p>
-          <p class="tooltips-header">
+          <p class="tooltips-span">
           ${data.metricCalTypeName}：${data.value}
           </p>
-          <p class="tooltips-header">
+          <p class="tooltips-span">
           ${this.$t('占比')}：${data.proportion}%
           </p>
           </div>`;

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/caller-line-chart/caller-line-chart.scss

@@ -6,6 +6,14 @@
   width: 100%;
   height: 100%;
   background-color: transparent;
+  .enable-select {
+    width: 90px;
+    .bk-select-name {
+      font-size: 14px;
+      font-weight: 400;
+      color: #313238;
+    }
+  }
 
   .time-series-header {
     display: flex;

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/caller-line-chart/caller-line-chart.tsx

@@ -137,6 +137,7 @@ class CallerLineChart extends CommonSimpleChart {
   drillDownOptions: IMenuChildItem[] = [];
   hasSetEvent = false;
   collectIntervalDisplay = '1m';
+  panelsSelector = 'timeout_rate';
 
   // 是否展示复位按钮
   showRestore = false;
@@ -162,6 +163,22 @@ class CallerLineChart extends CommonSimpleChart {
     return !!this.panel.options?.is_support_group_by;
   }
 
+  // title是否需要展示下拉框
+  get enablePanelsSelector() {
+    return !!this.panel.options?.enable_panels_selector;
+  }
+
+  get curSelectPanel() {
+    return (this.childPanelsSelectorVariables || []).find(item => this.panelsSelector === item.id);
+  }
+
+  get curTitle() {
+    return this.enablePanelsSelector ? this.curSelectPanel?.title : this.panel.title;
+  }
+
+  get childPanelsSelectorVariables() {
+    return this.panel.options?.child_panels_selector_variables || [];
+  }
   get menuList() {
     return ['save', 'more', 'fullscreen', 'explore', 'area', 'drill-down', 'relate-alert'];
   }
@@ -176,6 +193,9 @@ class CallerLineChart extends CommonSimpleChart {
     this.getPanelData();
   }
 
+  handlePanelsSelector() {
+    this.getPanelData();
+  }
   /**
    * @description: 获取图表数据
    * @param {*}
@@ -226,9 +246,14 @@ class CallerLineChart extends CommonSimpleChart {
           callOptions[key] = this.callOptions[key];
         }
       }
+      let selectPanelParams = {};
+      if (this.enablePanelsSelector) {
+        selectPanelParams = this.curSelectPanel.variables;
+      }
       const variablesService = new VariablesService({
         ...this.viewOptions,
         ...callOptions,
+        ...selectPanelParams,
       });
       for (const time_shift of timeShiftList) {
         const noTransformVariables = this.panel?.options?.time_series?.noTransformVariables;
@@ -282,7 +307,6 @@ class CallerLineChart extends CommonSimpleChart {
               down_sample_range,
             },
           });
-          // console.log(newParams, this.panel.title);
           return (this as any).$api[item.apiModule]
             [item.apiFunc](...paramsArr, {
               cancelToken: new CancelToken((cb: () => void) => this.cancelTokens.push(cb)),
@@ -298,7 +322,7 @@ class CallerLineChart extends CommonSimpleChart {
                       this.handleSeriesName(item, set) || set.target
                     }`;
                     this.legendSorts.push({
-                      name,
+                      name: this.enablePanelsSelector ? this.curTitle : name,
                       timeShift: time_shift,
                     });
                     return {
@@ -330,6 +354,7 @@ class CallerLineChart extends CommonSimpleChart {
           .filter(item => ['extra_info', '_result_'].includes(item.alias))
           .map(item => ({
             ...item,
+            name: this.enablePanelsSelector ? this.curTitle : item.name,
             datapoints: item.datapoints.map(point => [JSON.parse(point[0])?.anomaly_score ?? point[0], point[1]]),
           }));
         let seriesList = this.handleTransformSeries(
@@ -452,7 +477,6 @@ class CallerLineChart extends CommonSimpleChart {
       console.error(e);
       this.empty = true;
       this.emptyText = window.i18n.tc('出错了');
-      console.error(e);
     }
     this.cancelTokens = [];
     this.handleLoadingChange(false);
@@ -778,7 +802,7 @@ class CallerLineChart extends CommonSimpleChart {
         break;
       case 'screenshot': // 保存到本地
         setTimeout(() => {
-          this.handleStoreImage(this.panel.title || '测试');
+          this.handleStoreImage(this.curTitle || '测试');
         }, 300);
         break;
       case 'fullscreen': {
@@ -797,6 +821,7 @@ class CallerLineChart extends CommonSimpleChart {
       case 'explore': {
         // 跳转数据检索
         const copyPanel = this.getCopyPanel();
+        console.log('copyPanel', copyPanel);
         this.handleExplore(copyPanel as any, {});
         break;
       }
@@ -827,7 +852,7 @@ class CallerLineChart extends CommonSimpleChart {
         if (data.child.id === 'screenshot') {
           /** 截图 */
           setTimeout(() => {
-            this.handleStoreImage(this.panel.title);
+            this.handleStoreImage(this.curTitle);
           }, 300);
         } else if (data.child.id === 'export-csv') {
           /** 导出csv */
@@ -881,7 +906,7 @@ class CallerLineChart extends CommonSimpleChart {
     if (this.series?.length) {
       const { tableThArr, tableTdArr } = transformSrcData(this.series);
       const csvString = transformTableDataToCsvStr(tableThArr, tableTdArr);
-      downCsvFile(csvString, this.panel.title);
+      downCsvFile(csvString, this.curTitle);
     }
   }
 
@@ -893,10 +918,12 @@ class CallerLineChart extends CommonSimpleChart {
   handleAllMetricClick() {
     const configs = this.panel.toStrategy(null);
     if (configs) {
+      console.log('this.panel', this.panel);
       this.handleAddStrategy(this.panel, null, {});
       return;
     }
     const copyPanel = this.getCopyPanel();
+    console.log('copyPanel-all', copyPanel);
     this.handleAddStrategy(copyPanel as any, null, {}, true);
   }
 
@@ -958,6 +985,7 @@ class CallerLineChart extends CommonSimpleChart {
       <div class='apm-caller-line-chart'>
         <ChartHeader
           collectIntervalDisplay={this.collectIntervalDisplay}
+          customArea={true}
           descrition={this.panel.descrition}
           draging={this.panel.draging}
           isInstant={this.panel.instant}
@@ -966,12 +994,37 @@ class CallerLineChart extends CommonSimpleChart {
           needMoreMenu={true}
           showMore={true}
           subtitle={this.panel.subTitle || ''}
-          title={this.panel.title}
+          title={this.curTitle}
           onAllMetricClick={this.handleAllMetricClick}
           onMenuClick={this.handleMenuToolsSelect}
           onMetricClick={this.handleMetricClick}
           onSelectChild={this.handleSelectChildMenu}
-        />
+        >
+          <div slot='title'>
+            {this.enablePanelsSelector ? (
+              <div>
+                <bk-select
+                  class='enable-select'
+                  v-model={this.panelsSelector}
+                  behavior='simplicity'
+                  clearable={false}
+                  size='small'
+                  onChange={this.handlePanelsSelector}
+                >
+                  {(this.childPanelsSelectorVariables || []).map(option => (
+                    <bk-option
+                      id={option.id}
+                      key={option.id}
+                      name={option.title}
+                    />
+                  ))}
+                </bk-select>
+              </div>
+            ) : (
+              <span>{this.panel.title}</span>
+            )}
+          </div>
+        </ChartHeader>
         {!this.empty ? (
           <div class={'time-series-content'}>
             <div

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/caller-pie-chart/caller-pie-chart.scss

@@ -26,25 +26,10 @@
   }
 }
 .caller-pie-chart-tooltips {
-  // border-color: transparent !important;
-  // background-color: rgba(54, 58, 67, 0.8) !important;
-  // box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
-  // color: #fff;
-  // padding: 10px;
-  // font-size: 12px;
-  // line-height: 20px;
-  // display: flex;
-  // flex-direction: column;
-  // border-radius: 4px;
-  // border-radius: 10px;
-  .tooltips-header {
-    // white-space: nowrap;
-    word-break: break-all;
-    padding-right: 5px;
-    height: 20px;
+  .tooltips-span {
+    color: rgb(99, 101, 110) !important;
+    margin: 0px 0px 2px 6px;
     font-size: 12px;
-    font-weight: normal;
-    color: rgb(99, 101, 110);
-    line-height: 20px;
+    text-align: left;
   }
 }

bkmonitor/webpack/src/monitor-ui/chart-plugins/plugins/caller-pie-chart/caller-pie-chart.tsx

@@ -174,13 +174,13 @@ class CallerPieChart extends CommonSimpleChart {
           formatter: p => {
             const data = p.data;
             return `<div class="monitor-chart-tooltips">
-              <p class="tooltips-header">
+              <p class="tooltips-span">
               ${data.name}
               </p>
-              <p class="tooltips-header">
+              <p class="tooltips-span">
               ${this.dimensionChartOpt.metric_cal_type_name}：${data.value}
               </p>
-              <p class="tooltips-header">
+              <p class="tooltips-span">
               ${this.$t('占比')}：${data.proportion}%
               </p>
               </div>`;

bkmonitor/webpack/src/monitor-ui/chart-plugins/typings/dashboard-panel.ts

@@ -416,6 +416,11 @@ export type PanelOption = {
   unit?: string; // 单位
   is_support_compare: boolean;
   is_support_group_by: boolean;
+  enable_panels_selector?: boolean;
+  child_panels_selector_variables?: {
+    id?: string;
+    title?: string;
+  };
   need_zr_click_event?: boolean; // 是否需要zrender click 事件
   header?: {
     tips: string; // 提示