mirror of https://github.com/grafana/grafana
Transformations: Selectively apply transformation to queries (#61735)
Ryan McKinley
2 years ago
committed by
GitHub
parent
e7bfc4e749
commit
bba80b6c7a
@ -0,0 +1,171 @@ |
||||
{ |
||||
"annotations": { |
||||
"list": [ |
||||
{ |
||||
"builtIn": 1, |
||||
"datasource": { |
||||
"type": "grafana", |
||||
"uid": "-- Grafana --" |
||||
}, |
||||
"enable": true, |
||||
"hide": true, |
||||
"iconColor": "rgba(0, 211, 255, 1)", |
||||
"name": "Annotations & Alerts", |
||||
"target": { |
||||
"limit": 100, |
||||
"matchAny": false, |
||||
"tags": [], |
||||
"type": "dashboard" |
||||
}, |
||||
"type": "dashboard" |
||||
} |
||||
] |
||||
}, |
||||
"editable": true, |
||||
"fiscalYearStartMonth": 0, |
||||
"graphTooltip": 0, |
||||
"id": 1394, |
||||
"links": [], |
||||
"liveNow": false, |
||||
"panels": [ |
||||
{ |
||||
"datasource": { |
||||
"uid": "PD8C576611E62080A", |
||||
"type": "testdata" |
||||
}, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"custom": { |
||||
"align": "auto", |
||||
"cellOptions": { |
||||
"type": "auto" |
||||
}, |
||||
"inspect": false |
||||
}, |
||||
"mappings": [], |
||||
"thresholds": { |
||||
"mode": "absolute", |
||||
"steps": [ |
||||
{ |
||||
"color": "green" |
||||
}, |
||||
{ |
||||
"color": "red", |
||||
"value": 80 |
||||
} |
||||
] |
||||
}, |
||||
"color": { |
||||
"mode": "thresholds" |
||||
} |
||||
}, |
||||
"overrides": [] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 12, |
||||
"x": 0, |
||||
"y": 0 |
||||
}, |
||||
"id": 2, |
||||
"targets": [ |
||||
{ |
||||
"scenarioId": "csv_content", |
||||
"refId": "A", |
||||
"datasource": { |
||||
"uid": "PD8C576611E62080A", |
||||
"type": "testdata" |
||||
}, |
||||
"csvContent": "AAA\n1\n2\n3\n4" |
||||
}, |
||||
{ |
||||
"scenarioId": "csv_content", |
||||
"refId": "B", |
||||
"datasource": { |
||||
"uid": "PD8C576611E62080A", |
||||
"type": "testdata" |
||||
}, |
||||
"csvContent": "BBB\n1\n2\n3\n4\n", |
||||
"hide": false |
||||
} |
||||
], |
||||
"title": "Transformer query filters", |
||||
"type": "table", |
||||
"transformations": [ |
||||
{ |
||||
"id": "reduce", |
||||
"options": { |
||||
"reducers": [ |
||||
"min" |
||||
], |
||||
"mode": "reduceFields", |
||||
"includeTimeField": false |
||||
}, |
||||
"filter": { |
||||
"id": "byRefId", |
||||
"options": "A" |
||||
} |
||||
}, |
||||
{ |
||||
"id": "reduce", |
||||
"options": { |
||||
"reducers": [ |
||||
"max" |
||||
], |
||||
"mode": "reduceFields", |
||||
"includeTimeField": false |
||||
}, |
||||
"filter": { |
||||
"id": "byRefId", |
||||
"options": "B" |
||||
} |
||||
}, |
||||
{ |
||||
"id": "concatenate", |
||||
"options": {} |
||||
}, |
||||
{ |
||||
"id": "organize", |
||||
"options": { |
||||
"excludeByName": {}, |
||||
"indexByName": {}, |
||||
"renameByName": { |
||||
"AAA": "Min from Query A", |
||||
"BBB": "Max from Query B" |
||||
} |
||||
} |
||||
} |
||||
], |
||||
"options": { |
||||
"showHeader": true, |
||||
"footer": { |
||||
"show": false, |
||||
"reducer": [ |
||||
"sum" |
||||
], |
||||
"countRows": false, |
||||
"fields": "" |
||||
}, |
||||
"frameIndex": 0 |
||||
}, |
||||
"pluginVersion": "9.4.0-pre" |
||||
} |
||||
], |
||||
"schemaVersion": 37, |
||||
"style": "dark", |
||||
"tags": [ |
||||
"gdev", |
||||
"transform" |
||||
], |
||||
"templating": { |
||||
"list": [] |
||||
}, |
||||
"time": { |
||||
"from": "now-6h", |
||||
"to": "now" |
||||
}, |
||||
"timepicker": {}, |
||||
"timezone": "", |
||||
"title": "Transforms - Filters", |
||||
"uid": "fGWBVW4k" |
||||
} |
||||
@ -0,0 +1,55 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { useMemo } from 'react'; |
||||
|
||||
import { |
||||
DataFrame, |
||||
DataTransformerConfig, |
||||
GrafanaTheme2, |
||||
StandardEditorContext, |
||||
StandardEditorsRegistryItem, |
||||
} from '@grafana/data'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
import { FrameSelectionEditor } from 'app/plugins/panel/geomap/editor/FrameSelectionEditor'; |
||||
|
||||
interface TransformationFilterProps { |
||||
index: number; |
||||
config: DataTransformerConfig; |
||||
data: DataFrame[]; |
||||
onChange: (index: number, config: DataTransformerConfig) => void; |
||||
} |
||||
|
||||
export const TransformationFilter = ({ index, data, config, onChange }: TransformationFilterProps) => { |
||||
const styles = useStyles2(getStyles); |
||||
const context = useMemo(() => { |
||||
// eslint-disable-next-line
|
||||
return { data } as StandardEditorContext<unknown>; |
||||
}, [data]); |
||||
|
||||
return ( |
||||
<div className={styles.wrapper}> |
||||
<h5>Apply tranformation to</h5> |
||||
<FrameSelectionEditor |
||||
value={config.filter!} |
||||
context={context} |
||||
// eslint-disable-next-line
|
||||
item={{} as StandardEditorsRegistryItem} |
||||
onChange={(filter) => onChange(index, { ...config, filter })} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
const borderRadius = theme.shape.borderRadius(); |
||||
|
||||
return { |
||||
wrapper: css` |
||||
padding: ${theme.spacing(2)}; |
||||
border: 2px solid ${theme.colors.background.secondary}; |
||||
border-top: none; |
||||
border-radius: 0 0 ${borderRadius} ${borderRadius}; |
||||
position: relative; |
||||
top: -4px; |
||||
`,
|
||||
}; |
||||
}; |
||||
Loading…
Reference in new issue