{
)}
- {query.queryType === 'serviceMap' && }
+ {query.queryType === 'serviceMap' && (
+
+ )}
);
}
}
-function ServiceGraphSection({ graphDatasourceUid }: { graphDatasourceUid?: string }) {
- const dsState = useAsync(() => getDS(graphDatasourceUid), [graphDatasourceUid]);
- if (dsState.loading) {
- return null;
- }
-
- const ds = dsState.value as LokiDatasource;
-
- if (!graphDatasourceUid) {
- return Please set up a service graph datasource in the datasource settings.
;
- }
-
- if (graphDatasourceUid && !ds) {
- return (
-
- Service graph datasource is configured but the data source no longer exists. Please configure existing data
- source to use the service graph functionality.
-
- );
- }
-
- return null;
-}
-
interface SearchSectionProps {
linkedDatasourceUid?: string;
onChange: (value: LokiQuery) => void;
@@ -264,18 +244,4 @@ function SearchSection({ linkedDatasourceUid, onChange, onRunQuery, query }: Sea
return null;
}
-async function getDS(uid?: string): Promise {
- if (!uid) {
- return undefined;
- }
-
- const dsSrv = getDataSourceSrv();
- try {
- return await dsSrv.get(uid);
- } catch (error) {
- console.error('Failed to load data source', error);
- return undefined;
- }
-}
-
export const TempoQueryField = withTheme2(TempoQueryFieldComponent);
diff --git a/public/app/plugins/datasource/tempo/QueryEditor/ServiceGraphSection.tsx b/public/app/plugins/datasource/tempo/QueryEditor/ServiceGraphSection.tsx
new file mode 100644
index 00000000000..6b9884e15ab
--- /dev/null
+++ b/public/app/plugins/datasource/tempo/QueryEditor/ServiceGraphSection.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import { getDS } from './utils';
+import { InlineField, InlineFieldRow } from '@grafana/ui';
+import { AdHocVariableFilter } from '../../../../features/variables/types';
+import { TempoQuery } from '../datasource';
+import { AdHocFilter } from '../../../../features/variables/adhoc/picker/AdHocFilter';
+import { PrometheusDatasource } from '../../prometheus/datasource';
+
+export function ServiceGraphSection({
+ graphDatasourceUid,
+ query,
+ onChange,
+}: {
+ graphDatasourceUid?: string;
+ query: TempoQuery;
+ onChange: (value: TempoQuery) => void;
+}) {
+ const dsState = useAsync(() => getDS(graphDatasourceUid), [graphDatasourceUid]);
+ if (dsState.loading) {
+ return null;
+ }
+
+ const ds = dsState.value as PrometheusDatasource;
+
+ if (!graphDatasourceUid) {
+ return Please set up a service graph datasource in the datasource settings.
;
+ }
+
+ if (graphDatasourceUid && !ds) {
+ return (
+
+ Service graph datasource is configured but the data source no longer exists. Please configure existing data
+ source to use the service graph functionality.
+
+ );
+ }
+ const filters = queryToFilter(query.serviceMapQuery || '');
+
+ return (
+
+
+
+ {
+ onChange({
+ ...query,
+ serviceMapQuery: filtersToQuery([...filters, filter]),
+ });
+ }}
+ removeFilter={(index: number) => {
+ const newFilters = [...filters];
+ newFilters.splice(index, 1);
+ onChange({ ...query, serviceMapQuery: filtersToQuery(newFilters) });
+ }}
+ changeFilter={(index: number, filter: AdHocVariableFilter) => {
+ const newFilters = [...filters];
+ newFilters.splice(index, 1, filter);
+ onChange({ ...query, serviceMapQuery: filtersToQuery(newFilters) });
+ }}
+ />
+
+
+