feat: 【专项】APM 接入优化(应用配置存储状态联调)

TencentBlueKing · Sep 25, 2024 · cda19f4 · cda19f4
1 parent e853d4c
commit cda19f4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 44 deletions.
diff --git a/bkmonitor/webpack/src/apm/pages/application/app-configuration/configuration.tsx b/bkmonitor/webpack/src/apm/pages/application/app-configuration/configuration.tsx
@@ -310,7 +310,6 @@ export default class ApplicationConfiguration extends Mixins(authorityMixinCreat
       case 'storageState': // 存储状态
         return (
           <StorageState
-            appId={this.appId}
             clusterList={this.clusterList}
             data={this.appInfo}
             on-change={this.getAppBaseInfo}

diff --git a/bkmonitor/webpack/src/apm/pages/application/app-configuration/data-status.tsx b/bkmonitor/webpack/src/apm/pages/application/app-configuration/data-status.tsx
@@ -33,31 +33,12 @@ import { getDefaultTimezone, updateTimezone } from 'monitor-pc/i18n/dayjs';
 
 import Metric from './dataStatus/metric';
 import TabList from './tabList';
+import { ETelemetryDataType } from './type';
 
 import type { IViewOptions } from 'monitor-ui/chart-plugins/typings';
 
 import './data-status.scss';
 
-const TAB_LIST = [
-  {
-    name: 'metric',
-    label: '指标',
-  },
-  {
-    name: 'log',
-    label: '日志',
-  },
-
-  {
-    name: 'trace',
-    label: '调用链',
-  },
-  {
-    name: 'performance',
-    label: '性能分析',
-  },
-];
-
 @Component
 export default class DataStatus extends tsc<object> {
   pickerTimeRange: string[] = [
@@ -66,7 +47,25 @@ export default class DataStatus extends tsc<object> {
   ];
 
   /** 选择的tab*/
-  activeTab = 'metric';
+  tabList = [
+    {
+      name: ETelemetryDataType.metric,
+      label: window.i18n.tc('指标'),
+    },
+    {
+      name: ETelemetryDataType.log,
+      label: window.i18n.tc('日志'),
+    },
+    {
+      name: ETelemetryDataType.tracing,
+      label: window.i18n.tc('调用链'),
+    },
+    {
+      name: ETelemetryDataType.profiling,
+      label: window.i18n.tc('性能分析'),
+    },
+  ];
+  activeTab = ETelemetryDataType.metric;
   strategyLoading = false;
 
   // 派发到子孙组件内的视图配置变量
@@ -101,23 +100,23 @@ export default class DataStatus extends tsc<object> {
   }
 
   /** tab切换时 */
-  handleChangeActiveTab(active: string) {
+  handleChangeActiveTab(active: ETelemetryDataType) {
     this.activeTab = active;
-    switch (active) {
-      case 'log':
-        // this.getIndicesList();
-        break;
-      case 'metric':
-        // this.getStoreList();
-        break;
-      case 'trace':
-        // this.getMetaConfigInfo();
-        // this.getIndicesList();
-        // this.getFieldList();
-        break;
-      default: {
-      }
-    }
+    // switch (active) {
+    //   case ETelemetryDataType.log:
+    //     // this.getIndicesList();
+    //     break;
+    //   case ETelemetryDataType.metric:
+    //     // this.getStoreList();
+    //     break;
+    //   case ETelemetryDataType.tracing:
+    //     // this.getMetaConfigInfo();
+    //     // this.getIndicesList();
+    //     // this.getFieldList();
+    //     break;
+    //   default:
+    //     break;
+    // }
   }
 
   /** 获取选择的tab组件 */
@@ -131,7 +130,7 @@ export default class DataStatus extends tsc<object> {
         <div class='data-status-tab-wrap'>
           <TabList
             activeTab={this.activeTab}
-            tabList={TAB_LIST}
+            tabList={this.tabList}
             onChange={this.handleChangeActiveTab}
           />
           <TimeRange

diff --git a/bkmonitor/webpack/src/apm/pages/application/app-configuration/dataStatus/metric.tsx b/bkmonitor/webpack/src/apm/pages/application/app-configuration/dataStatus/metric.tsx
@@ -43,19 +43,19 @@ import { PanelModel } from 'monitor-ui/chart-plugins/typings';
 
 import PanelItem from '../../../../components/panel-item/panel-item';
 
-import type { IStrategyData } from '../type';
+import type { ETelemetryDataType, IStrategyData } from '../type';
 import type { TimeRangeType } from 'monitor-pc/components/time-range/time-range';
 
 import 'vue-json-pretty/lib/styles.css';
 import './metric.scss';
 
 interface IProps {
-  activeTab: string;
+  activeTab: ETelemetryDataType;
 }
 
 @Component
 export default class DataStatusMetric extends tsc<IProps> {
-  @Prop({ default: '', type: String }) activeTab: string;
+  @Prop({ default: '', type: String }) activeTab: ETelemetryDataType;
 
   pickerTimeRange: string[] = [
     dayjs(new Date()).add(-1, 'd').format('YYYY-MM-DD'),
@@ -133,17 +133,25 @@ export default class DataStatusMetric extends tsc<IProps> {
       application_id: this.appId,
       start_time: Date.parse(this.pickerTimeRange[0]) / 1000,
       end_time: Date.parse(this.pickerTimeRange[1]) / 1000,
+      telemetry_data_type: this.activeTab,
     };
     const data = await noDataStrategyInfo(params).catch(() => {});
     Object.assign(this.strategyInfo, data);
-    this.apdexChartPanel = new PanelModel(this.strategyInfo.alert_graph);
+    if (this.strategyInfo.alert_graph) {
+      this.apdexChartPanel = new PanelModel(this.strategyInfo.alert_graph);
+    } else {
+      this.apdexChartPanel = null;
+    }
     this.strategyLoading = false;
   }
   /**
    * @desc 获取图表数据
    */
   async getDataView() {
-    this.dashboardPanels = await dataViewConfig(this.appId).catch(() => []);
+    const data = await dataViewConfig(this.appId, {
+      telemetry_data_type: this.activeTab,
+    }).catch(() => []);
+    this.dashboardPanels = data.map(item => new PanelModel(item));
   }
   /**
    * @desc 获取采样数据