+ <>
{tags.map((tag, index) => {
return
;
})}
@@ -56,16 +56,12 @@ export function TagsSection({ tags, state }: Props) {
/>
)}
{state.paused &&
}
-
+ >
);
}
function getStyles(theme: GrafanaTheme2) {
return {
- container: css`
- display: flex;
- flex-direction: row;
- `,
button: css`
margin-right: ${theme.spacing(0.5)};
`,
diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx
index 337c0356f87..ac8173b5462 100644
--- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx
@@ -26,7 +26,7 @@ import {
import { FormatAsSection } from './FormatAsSection';
import { DEFAULT_RESULT_FORMAT } from '../constants';
import { getNewSelectPartOptions, getNewGroupByPartOptions, makePartList } from './partListUtils';
-import { Section, SectionLabel } from '@grafana/ui';
+import { SegmentSection, SegmentSectionLabel } from '@grafana/ui';
type Props = {
query: InfluxQuery;
@@ -103,7 +103,7 @@ export const Editor = (props: Props): JSX.Element => {
return (
-
+
{
}
onChange={handleFromSectionChange}
/>
-
+
{
withTemplateVariableOptions(getTagValues(key, measurement, policy, query.tags ?? [], datasource))
}
/>
-
+
{selectLists.map((sel, index) => (
-
+
Promise.resolve(getNewSelectPartOptions())}
@@ -141,9 +141,9 @@ export const Editor = (props: Props): JSX.Element => {
onAppliedChange(removeSelectPart(query, partIndex, index));
}}
/>
-
+
))}
-
+
getNewGroupByPartOptions(query, getTagKeys)}
@@ -158,8 +158,8 @@ export const Editor = (props: Props): JSX.Element => {
onAppliedChange(removeGroupByPart(query, partIndex));
}}
/>
-
-
+
+
{
onAppliedChange({ ...query, tz });
}}
/>
-
+
{
onAppliedChange({ ...query, orderByTime: v });
}}
/>
-
+
{/* query.fill is ignored in the query-editor, and it is deleted whenever
query-editor changes. the influx_query_model still handles it, but the new
approach seem to be to handle "fill" inside query.groupBy. so, if you
have a panel where in the json you have query.fill, it will be applied,
as long as you do not edit that query. */}
-
+
{
onAppliedChange({ ...query, limit });
}}
/>
-
+
{
onAppliedChange({ ...query, slimit });
}}
/>
-
-
+
+
{
@@ -206,7 +206,7 @@ export const Editor = (props: Props): JSX.Element => {
/>
{query.resultFormat !== 'table' && (
<>
-
+
{
/>
>
)}
-
+
);
};