feat: 监控trace datasource插件开发

# Reviewed, transaction id: 25591

Author: liangling0628

Dockerfile

@@ -16,9 +16,11 @@ RUN pnpm i \
 && mkdir -p build/alert \
 && mkdir -p build/event \
 && mkdir -p build/timeseries \
+&& mkdir -p build/trace \
 && mv src/alert/dist/* build/alert \
 && mv src/event/dist/* build/event \
-&& mv src/timeseries/dist/* build/timeseries
+&& mv src/timeseries/dist/* build/timeseries \
+&& mv src/trace/dist/* build/trace
 
 RUN tar -czvf frontend.tar.gz  build
 

src/trace/LICENSE

@@ -1,11 +1,9 @@
 import { css } from '@emotion/css';
-import { type QueryEditorProps, type SelectableValue } from '@grafana/data';
+import type { QueryEditorProps, SelectableValue } from '@grafana/data';
 import {
-  FileDropzone,
   HorizontalGroup,
   InlineField,
   InlineFieldRow,
-  Modal,
   QueryField,
   RadioButtonGroup,
   Select,
@@ -23,11 +21,9 @@ import { getTemplateSrv } from '@grafana/runtime';
 type Props = QueryEditorProps<TraceDatasource, TraceQuery>;
 
 export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props) {
-  const [uploadModalOpen, setUploadModalOpen] = useState(false);
   const [appLoading, setAppLoading] = useState(false);
   const [appOptions, setAppOptions] = useState<Array<SelectableValue<string>>>();
 
-  const theme = useTheme2();
   const styles = useStyles2(getStyles);
 
   useEffect(() => {
@@ -60,11 +56,11 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
       },
     });
   }, [datasource]);
+  // trace_id查询图表
   const onChangeQuery = (value: string) => {
     const nextQuery: TraceQuery = { ...query, query: value };
     onChange(nextQuery);
   };
-
   const renderEditorBody = () => {
     switch (query.queryType) {
       case 'search':
@@ -100,26 +96,6 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
 
   return (
     <>
-      <Modal
-        isOpen={uploadModalOpen}
-        title={'Upload trace'}
-        onDismiss={() => setUploadModalOpen(false)}
-      >
-        <div className={css({ padding: theme.spacing(2) })}>
-          <FileDropzone
-            options={{ multiple: false }}
-            onLoad={result => {
-              datasource.uploadedJson = result;
-              onChange({
-                ...query,
-                queryType: 'upload',
-              });
-              setUploadModalOpen(false);
-              onRunQuery();
-            }}
-          />
-        </div>
-      </Modal>
       <div className={styles.container}>
         <InlineFieldRow>
           <InlineField
@@ -146,15 +122,6 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
                   })
                 }
               />
-              {/* <Button
-                size='sm'
-                variant='secondary'
-                onClick={() => {
-                  setUploadModalOpen(true);
-                }}
-              >
-                Import trace
-              </Button> */}
             </HorizontalGroup>
           </InlineField>
         </InlineFieldRow>
@@ -177,7 +144,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
               onChange={v => {
                 onChange({
                   ...query,
-                  app_name: v?.value!,
+                  app_name: v?.value,
                   service: query.app_name !== v?.value ? [] : query.service,
                   spans: query.app_name !== v?.value ? [] : query.spans,
                 });

src/trace/src/CheatSheet.tsx

@@ -1,16 +1,13 @@
 import { css } from '@emotion/css';
-import { type SelectableValue, toOption } from '@grafana/data';
-import { getTemplateSrv } from '@grafana/runtime';
+import type { SelectableValue } from '@grafana/data';
 import { fuzzyMatch, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
-// import { notifyApp } from 'grafana/app/core/actions';
-// import { createErrorNotification } from 'grafana/app/core/copy/appNotification';
-// import { dispatch } from 'grafana/app/store/store';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import type TraceDatasource from '../datasource';
 import type { TraceQuery } from '../types';
 import { transformToLogfmt } from '../util';
 import { t } from 'common/utils/utils';
+import { getTemplateSrv } from '@grafana/runtime';
 
 const durationPlaceholder = 'e.g. 1.2s, 100ms, 500us';
 
@@ -40,16 +37,15 @@ export function SearchForm({ datasource, query, onChange }: Props) {
       setIsLoading(prevValue => ({ ...prevValue, [loaderOfType]: true }));
 
       try {
-        const values = await datasource.loadOptions(query.app_name!, field);
+        if (!query.app_name) return [];
+        const values = await datasource.loadOptions(query.app_name, field);
         if (!values?.length) {
           return [{ label: `No ${loaderOfType} found`, value: `No ${loaderOfType} found` }];
         }
-
         const options: SelectableValue[] = values.sort().map(option => ({
           label: option.text,
           value: option.value,
         }));
-
         const filteredOptions = options.filter(item => (item.value ? fuzzyMatch(item.value, keyword).found : false));
         return filteredOptions;
       } catch (error) {
@@ -65,28 +61,26 @@ export function SearchForm({ datasource, query, onChange }: Props) {
   );
 
   useEffect(() => {
-    const getOperations = async () => {
+    const getSpans = async () => {
       const spansOptions = await loadOptions('spans', 'span_name');
-      // if (query.spans && getTemplateSrv().containsTemplate(query.spans)) {
-      //   spans.push(toOption(query.spans));
-      // }
       setOperationOptions([...spansOptions]);
     };
-    if (query.app_name) {
-      getOperations();
-    }
+    query.app_name && getSpans();
   }, [datasource, query.app_name, loadOptions]);
   useEffect(() => {
     const getServices = async () => {
       const serviceOptions = await loadOptions('services', 'resource.service.name');
-      // if (query.service && getTemplateSrv().containsTemplate(query.service)) {
-      //   spans.push(toOption(query.service));
-      // }
+      if (query.service?.length && getTemplateSrv().containsTemplate()) {
+        for (const service of query.service) {
+          serviceOptions.push({
+            label: service,
+            value: service,
+          });
+        }
+      }
       setServiceOptions([...serviceOptions]);
     };
-    if (query.app_name) {
-      getServices();
-    }
+    query.app_name && getServices();
   }, [datasource, query.app_name, loadOptions]);
   return (
     <div className={css({ maxWidth: '500px' })}>
@@ -210,14 +204,15 @@ export function SearchForm({ datasource, query, onChange }: Props) {
         <InlineField
           label='Limit'
           labelWidth={14}
-          tooltip='Maximum number of returned results'
+          tooltip='Maximum number of returned results, default is 10'
           grow
         >
           <Input
             id='limit'
             name='limit'
             type='number'
             value={query.limit || ''}
+            placeholder='e.g. 10'
             onChange={v =>
               onChange({
                 ...query,