feat: Profiling datasource插件开发

# Reviewed, transaction id: 26091
TencentBlueKing · Dec 6, 2024 · 9b51eef · 9b51eef
1 parent e608493
commit 9b51eef
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 36 deletions.
diff --git a/src/profiling/src/components/condition-input.tsx b/src/profiling/src/components/condition-input.tsx
@@ -34,7 +34,7 @@ import { map, merge, type Observable } from 'rxjs';
 
 import type { ProfilingQuery } from '../typings/datasource';
 import { CONDITION, type ICommonItem, type IConditionItem, STRING_CONDITION_METHOD_LIST } from '../typings/metric';
-import { DIM_NULL_ID } from '../typings/profile';
+// import { DIM_NULL_ID } from '../typings/profile';
 import { t } from 'common/utils/utils';
 
 import type DataSource from '../datasource/datasource';
@@ -121,7 +121,7 @@ const ConditionInput: React.FC<IProps> = ({ datasource, filterList, keyList, onC
             ...item,
             key: v,
             method: getMethodList()[0].id,
-            value: [],
+            value: '',
             ...(i > 0 ? { condition: 'and' } : {}),
           };
         }
@@ -139,7 +139,7 @@ const ConditionInput: React.FC<IProps> = ({ datasource, filterList, keyList, onC
     handleCommonChange(index, 'method', v);
   };
 
-  const handleValueChange = (v: string[], index: number) => {
+  const handleValueChange = (v: string, index: number) => {
     const param = filterList.map((item, i) => {
       if (i === index) {
         return {
@@ -231,6 +231,7 @@ const ConditionInput: React.FC<IProps> = ({ datasource, filterList, keyList, onC
               }
               autoFocus={true}
               className={`condition-input-key-${index}`}
+              style={{ marginLeft: '-1px' }}
               defaultOpen={item.key === '' && !!keyList.length}
               defaultValue={item.key || undefined}
               dropdownMatchSelectWidth={140}
@@ -290,21 +291,21 @@ const ConditionInput: React.FC<IProps> = ({ datasource, filterList, keyList, onC
                 className='condition-input-value'
                 defaultValue={item.value}
                 dropdownMatchSelectWidth={true}
-                mode='tags'
                 placeholder={t('请输入')}
                 showArrow={false}
                 tokenSeparators={[',', '|', '\n', ' ', '\r\n', '\r']}
                 onChange={v => handleValueChange(v, index)}
                 onInputKeyDown={v => handleValueConditionKeyDown(v)}
+                showSearch={true}
               >
-                {needNUll(item.key) && (
+                {/* {needNUll(item.key) && (
                   <Option
                     key={DIM_NULL_ID}
                     value={DIM_NULL_ID}
                   >
                     {t('- 空 -')}
                   </Option>
-                )}
+                )} */}
                 {dimensionValueMap[item.key]?.map?.(dim => (
                   <Option
                     key={dim.id}

diff --git a/src/profiling/src/components/query-editor.tsx b/src/profiling/src/components/query-editor.tsx
@@ -210,7 +210,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
               datasource={datasource}
               filterList={query.filter_labels?.length ? query.filter_labels : [{}]}
               keyList={labels}
-              serviceName={query.app_name}
+              serviceName={query.service_name}
               onChange={(v, needQuery = true) => {
                 onChange({ ...query, filter_labels: v });
                 needQuery && onRunQuery();

diff --git a/src/profiling/src/datasource/datasource.ts b/src/profiling/src/datasource/datasource.ts
@@ -88,7 +88,13 @@ export default class DashboardDatasource extends DataSourceApi<ProfilingQuery, Q
       streams.push(
         new Observable(subscriber => {
           this.queryProfilingGraph(filterTarget, target)
-            .then(events => subscriber.next({ data: [toDataFrame(events)] }))
+            .then(events => {
+              if (Object.keys(events || {}).length === 0) {
+                subscriber.next({ data: [toDataFrame([])] });
+                return;
+              }
+              subscriber.next({ data: [toDataFrame(events)] });
+            })
             .catch(err => subscriber.error(err))
             .finally(() => subscriber.complete());
         }),
@@ -97,42 +103,46 @@ export default class DashboardDatasource extends DataSourceApi<ProfilingQuery, Q
     return merge(...streams);
   }
   async queryProfilingGraph(options: DataQueryRequest, target: ProfilingQuery) {
-    const filterLabel: Record<string, string[]> = {};
+    const filterLabel: Record<string, string> = {};
     for (const item of target?.filter_labels || []) {
       if (!item.value?.length || !item.key) {
         continue;
       }
-      const values: string[] = [];
-      for (const value of item.value) {
-        const result = getTemplateSrv().replace(value, options.scopedVars);
-        if (Array.isArray(result)) {
-          values.push(...result);
-          continue;
-        }
-        values.push(result);
-      }
-      filterLabel[item.key] = Array.from(new Set(values));
+      // 多选逻辑 暂时关闭
+      // const values: string[] = [];
+      // for (const value of item.value) {
+      //   const result = getTemplateSrv().replace(value, options.scopedVars);
+      //   if (Array.isArray(result)) {
+      //     values.push(...result);
+      //     continue;
+      //   }
+      //   values.push(result);
+      // }
+      // filterLabel[item.key] = Array.from(new Set(values));
+      filterLabel[item.key] = item.value;
     }
     return await lastValueFrom(
       this.request<BackendDataSourceResponse>(QueryUrl.query_graph_profile, {
         data: {
           bk_biz_id: this.bizId,
-          start: options.range.from.valueOf() * 1000,
-          end: options.range.to.valueOf() * 1000,
           app_name: target.app_name,
           service_name: target.service_name,
           data_type: target.profile_type,
           profile_id: target.profile_id,
           offset: target.offset,
           filter_labels: filterLabel,
           diagram_types: ['grafana_flame'],
+          ...this.getTimeRange('ns'),
         },
         method: 'POST',
       }),
     );
   }
-  getTimeRange(): { start_time: number; end_time: number } {
+  getTimeRange(type: 's' | 'ns' = 's'): Partial<{ start_time: number; end_time: number; start: number; end: number }> {
     const range = (getTemplateSrv() as any).timeRange;
+    if (type === 'ns') {
+      return { start: range.from.valueOf() * 1000, end: range.to.valueOf() * 1000 };
+    }
     return {
       start_time: range.from.unix(),
       end_time: range.to.unix(),
@@ -213,7 +223,9 @@ export default class DashboardDatasource extends DataSourceApi<ProfilingQuery, Q
       params: {
         bk_biz_id: this.bizId,
         ...params,
-        ...this.getTimeRange(),
+        ...this.getTimeRange('ns'),
+        offset: 0,
+        rows: 1000,
       },
       method: 'GET',
     }).pipe(

diff --git a/src/profiling/src/typings/metric.ts b/src/profiling/src/typings/metric.ts
@@ -78,7 +78,7 @@ export type IConditionItem = {
   condition?: string; // 判断条件
   key?: string; // 维度
   method?: string; // 方法
-  value?: string[]; // 值
+  value?: string; // 值
 };
 
 // 监控条件列表item

diff --git a/src/trace/src/datasource.ts b/src/trace/src/datasource.ts
@@ -78,14 +78,6 @@ export default class TraceDatasource extends DataSourceApi<TraceQuery, QueryOpti
       ),
     );
   }
-  /**
-   *
-   * @param query 查询参数
-   * @description 是否符合查询条件
-   */
-  isSearchFormValid(query: TraceQuery): boolean {
-    return !!query.app_name;
-  }
 
   query(options: DataQueryRequest<TraceQuery>): Observable<DataQueryResponse> {
     // At this moment we expect only one target. In case we somehow change the UI to be able to show multiple
@@ -95,13 +87,14 @@ export default class TraceDatasource extends DataSourceApi<TraceQuery, QueryOpti
     if (!target?.app_name) {
       return of({ data: [emptyTraceDataFrame] });
     }
-    if (target.queryType === 'search' && !this.isSearchFormValid(target)) {
-      return of({ error: { message: 'You must select a app.' }, data: [] });
+    const app_name = getTemplateSrv().replace(target.app_name || '', options.scopedVars);
+    if (!target.app_name || !app_name) {
+      return of({ data: [] });
     }
     if (target.queryType !== 'search' && target.query) {
       return this.request(QueryUrl.get_trace_detail, {
         data: {
-          app_name: getTemplateSrv().replace(target.app_name, options.scopedVars),
+          app_name,
           trace_id: getTemplateSrv().replace(target.query, options.scopedVars),
           ...this.getTimeRange(),
           bk_biz_id: this.bizId,
@@ -152,7 +145,7 @@ export default class TraceDatasource extends DataSourceApi<TraceQuery, QueryOpti
     }).pipe(
       map(data => {
         return {
-          data: [createTableFrame(target.app_name!, data?.data || [], this.instanceSettings)],
+          data: [createTableFrame(target.app_name, data?.data || [], this.instanceSettings)],
         };
       }),
     );