mirror of https://github.com/grafana/grafana
Explore Metrics: Introduce augurs sorting options in breakdown view (#91189)
* refactor breakdown scene * refactor BreakdownScene along with LayoutSwitcher * rename * don't pass default layout * better type handling * betterer * add @bsull/augurs * implement LabelBreakdownScene * integrate SortByScene in LabelBreakdownScene * move to new directory * introduce BreakdownSearchScene * integrate searchScene * cleaning * initialize @bsull/augurs * add interaction * use new breakdown scene * resolve merge conflicts * ugrade @bsull/augurs * update import * update css * update tooltip text * refine sorting * fix unit test * fix * implement outlier detector * support wasm * jest testing fix * localization fix * use unknown instead of any * update i18n * update betterer * fix locales * update test * fix tests maybe * prettier * chore: update jest config * chore: create mock for @bsull/augurs (#92156) chore: create mock for bsull/augurs @bsull/augurs assumes it will be running as an ESM, not a CommonJS module, so can't be loaded by Jest (specifically because it contains a reference to import.meta.url). This PR provides a mock implementation which gets tests passing again. Ideally we'd be able to load the actual @bsull/augurs module in tests so this is just a stopgap really, until a better solution appears. * fix unit tests * remove unused BreakdownScene.tsx * set outliers as undefined if an error occurs * Add labels * betterer * reset event implemented * fix controls positioning * update augurs * betterer * i18n * conflict fixes * update texts --------- Co-authored-by: Matias Chomicki <matyax@gmail.com> Co-authored-by: Ben Sully <ben.sully@grafana.com>pull/95781/head
ismail simsek
8 months ago
committed by
GitHub
parent
297ccfc52c
commit
bcdcb1f74b
@ -0,0 +1,109 @@ |
||||
import { css } from '@emotion/css'; |
||||
|
||||
import { BusEventBase, GrafanaTheme2, SelectableValue } from '@grafana/data'; |
||||
import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes'; |
||||
import { IconButton, Select } from '@grafana/ui'; |
||||
import { Field, useStyles2 } from '@grafana/ui/'; |
||||
|
||||
import { Trans } from '../../../core/internationalization'; |
||||
import { getSortByPreference, setSortByPreference } from '../services/store'; |
||||
|
||||
export interface SortBySceneState extends SceneObjectState { |
||||
target: 'fields' | 'labels'; |
||||
sortBy: string; |
||||
} |
||||
|
||||
export class SortCriteriaChanged extends BusEventBase { |
||||
constructor( |
||||
public target: 'fields' | 'labels', |
||||
public sortBy: string |
||||
) { |
||||
super(); |
||||
} |
||||
|
||||
public static type = 'sort-criteria-changed'; |
||||
} |
||||
|
||||
export class SortByScene extends SceneObjectBase<SortBySceneState> { |
||||
public sortingOptions = [ |
||||
{ |
||||
label: '', |
||||
options: [ |
||||
{ |
||||
value: 'outliers', |
||||
label: 'Outlying Values', |
||||
description: 'Prioritizes values that show distinct behavior from others within the same label', |
||||
}, |
||||
{ |
||||
value: 'alphabetical', |
||||
label: 'Name [A-Z]', |
||||
description: 'Alphabetical order', |
||||
}, |
||||
{ |
||||
value: 'alphabetical-reversed', |
||||
label: 'Name [Z-A]', |
||||
description: 'Reversed alphabetical order', |
||||
}, |
||||
], |
||||
}, |
||||
]; |
||||
|
||||
constructor(state: Pick<SortBySceneState, 'target'>) { |
||||
const { sortBy } = getSortByPreference(state.target, 'outliers'); |
||||
super({ |
||||
target: state.target, |
||||
sortBy, |
||||
}); |
||||
} |
||||
|
||||
public onCriteriaChange = (criteria: SelectableValue<string>) => { |
||||
if (!criteria.value) { |
||||
return; |
||||
} |
||||
this.setState({ sortBy: criteria.value }); |
||||
setSortByPreference(this.state.target, criteria.value); |
||||
this.publishEvent(new SortCriteriaChanged(this.state.target, criteria.value), true); |
||||
}; |
||||
|
||||
public static Component = ({ model }: SceneComponentProps<SortByScene>) => { |
||||
const styles = useStyles2(getStyles); |
||||
const { sortBy } = model.useState(); |
||||
const group = model.sortingOptions.find((group) => group.options.find((option) => option.value === sortBy)); |
||||
const value = group?.options.find((option) => option.value === sortBy); |
||||
return ( |
||||
<Field |
||||
htmlFor="sort-by-criteria" |
||||
label={ |
||||
<div className={styles.sortByTooltip}> |
||||
<Trans i18nKey="explore-metrics.breakdown.sortBy">Sort by</Trans> |
||||
<IconButton |
||||
name={'info-circle'} |
||||
size="sm" |
||||
variant={'secondary'} |
||||
tooltip="Sorts values using standard or smart time series calculations." |
||||
/> |
||||
</div> |
||||
} |
||||
> |
||||
<Select |
||||
value={value} |
||||
width={20} |
||||
isSearchable={true} |
||||
options={model.sortingOptions} |
||||
placeholder={'Choose criteria'} |
||||
onChange={model.onCriteriaChange} |
||||
inputId="sort-by-criteria" |
||||
/> |
||||
</Field> |
||||
); |
||||
}; |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
sortByTooltip: css({ |
||||
display: 'flex', |
||||
gap: theme.spacing(1), |
||||
}), |
||||
}; |
||||
} |
||||
@ -0,0 +1,74 @@ |
||||
import { toDataFrame, FieldType, ReducerID } from '@grafana/data'; |
||||
|
||||
import { sortSeries } from './sorting'; |
||||
|
||||
const frameA = toDataFrame({ |
||||
fields: [ |
||||
{ name: 'Time', type: FieldType.time, values: [0] }, |
||||
{ |
||||
name: 'Value', |
||||
type: FieldType.number, |
||||
values: [0, 1, 0], |
||||
labels: { |
||||
test: 'C', |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
const frameB = toDataFrame({ |
||||
fields: [ |
||||
{ name: 'Time', type: FieldType.time, values: [0] }, |
||||
{ |
||||
name: 'Value', |
||||
type: FieldType.number, |
||||
values: [1, 1, 1], |
||||
labels: { |
||||
test: 'A', |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
const frameC = toDataFrame({ |
||||
fields: [ |
||||
{ name: 'Time', type: FieldType.time, values: [0] }, |
||||
{ |
||||
name: 'Value', |
||||
type: FieldType.number, |
||||
values: [100, 9999, 100], |
||||
labels: { |
||||
test: 'B', |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
describe('sortSeries', () => { |
||||
test('Sorts series by standard deviation, descending', () => { |
||||
const series = [frameA, frameB, frameC]; |
||||
const sortedSeries = [frameC, frameA, frameB]; |
||||
|
||||
const result = sortSeries(series, ReducerID.stdDev, 'desc'); |
||||
expect(result).toEqual(sortedSeries); |
||||
}); |
||||
test('Sorts series by standard deviation, ascending', () => { |
||||
const series = [frameA, frameB, frameC]; |
||||
const sortedSeries = [frameB, frameA, frameC]; |
||||
|
||||
const result = sortSeries(series, ReducerID.stdDev, 'asc'); |
||||
expect(result).toEqual(sortedSeries); |
||||
}); |
||||
test('Sorts series alphabetically, ascending', () => { |
||||
const series = [frameA, frameB, frameC]; |
||||
const sortedSeries = [frameB, frameC, frameA]; |
||||
|
||||
const result = sortSeries(series, 'alphabetical', 'asc'); |
||||
expect(result).toEqual(sortedSeries); |
||||
}); |
||||
test('Sorts series alphabetically, descending', () => { |
||||
const series = [frameA, frameB, frameC]; |
||||
const sortedSeries = [frameB, frameC, frameA]; |
||||
|
||||
const result = sortSeries(series, 'alphabetical', 'desc'); |
||||
expect(result).toEqual(sortedSeries); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,138 @@ |
||||
import { OutlierDetector, OutlierOutput } from '@bsull/augurs'; |
||||
import { memoize } from 'lodash'; |
||||
|
||||
import { DataFrame, doStandardCalcs, fieldReducers, FieldType, outerJoinDataFrames, ReducerID } from '@grafana/data'; |
||||
|
||||
import { reportExploreMetrics } from '../interactions'; |
||||
|
||||
import { getLabelValueFromDataFrame } from './levels'; |
||||
|
||||
export const sortSeries = memoize( |
||||
(series: DataFrame[], sortBy: string, direction = 'asc') => { |
||||
if (sortBy === 'alphabetical') { |
||||
return sortSeriesByName(series, 'asc'); |
||||
} |
||||
|
||||
if (sortBy === 'alphabetical-reversed') { |
||||
return sortSeriesByName(series, 'desc'); |
||||
} |
||||
|
||||
if (sortBy === 'outliers') { |
||||
initOutlierDetector(series); |
||||
} |
||||
|
||||
const reducer = (dataFrame: DataFrame) => { |
||||
try { |
||||
if (sortBy === 'outliers') { |
||||
return calculateOutlierValue(series, dataFrame); |
||||
} |
||||
} catch (e) { |
||||
console.error(e); |
||||
// ML sorting panicked, fallback to stdDev
|
||||
sortBy = ReducerID.stdDev; |
||||
} |
||||
const fieldReducer = fieldReducers.get(sortBy); |
||||
const value = |
||||
fieldReducer.reduce?.(dataFrame.fields[1], true, true) ?? doStandardCalcs(dataFrame.fields[1], true, true); |
||||
return value[sortBy] ?? 0; |
||||
}; |
||||
|
||||
const seriesCalcs = series.map((dataFrame) => ({ |
||||
value: reducer(dataFrame), |
||||
dataFrame: dataFrame, |
||||
})); |
||||
|
||||
seriesCalcs.sort((a, b) => { |
||||
if (a.value !== undefined && b.value !== undefined) { |
||||
return b.value - a.value; |
||||
} |
||||
return 0; |
||||
}); |
||||
|
||||
if (direction === 'asc') { |
||||
seriesCalcs.reverse(); |
||||
} |
||||
|
||||
return seriesCalcs.map(({ dataFrame }) => dataFrame); |
||||
}, |
||||
(series: DataFrame[], sortBy: string, direction = 'asc') => { |
||||
const firstTimestamp = series.length > 0 ? series[0].fields[0].values[0] : 0; |
||||
const lastTimestamp = |
||||
series.length > 0 |
||||
? series[series.length - 1].fields[0].values[series[series.length - 1].fields[0].values.length - 1] |
||||
: 0; |
||||
const firstValue = series.length > 0 ? getLabelValueFromDataFrame(series[0]) : ''; |
||||
const lastValue = series.length > 0 ? getLabelValueFromDataFrame(series[series.length - 1]) : ''; |
||||
const key = `${firstValue}_${lastValue}_${firstTimestamp}_${lastTimestamp}_${series.length}_${sortBy}_${direction}`; |
||||
return key; |
||||
} |
||||
); |
||||
|
||||
const initOutlierDetector = (series: DataFrame[]) => { |
||||
if (!wasmSupported()) { |
||||
return; |
||||
} |
||||
|
||||
// Combine all frames into one by joining on time.
|
||||
const joined = outerJoinDataFrames({ frames: series }); |
||||
if (!joined) { |
||||
return; |
||||
} |
||||
|
||||
// Get number fields: these are our series.
|
||||
const joinedSeries = joined.fields.filter((f) => f.type === FieldType.number); |
||||
const nTimestamps = joinedSeries[0].values.length; |
||||
const points = new Float64Array(joinedSeries.flatMap((series) => series.values as number[])); |
||||
|
||||
try { |
||||
const detector = OutlierDetector.dbscan({ sensitivity: 0.4 }).preprocess(points, nTimestamps); |
||||
outliers = detector.detect(); |
||||
} catch (e) { |
||||
console.error(e); |
||||
outliers = undefined; |
||||
} |
||||
}; |
||||
|
||||
let outliers: OutlierOutput | undefined = undefined; |
||||
|
||||
export const calculateOutlierValue = (series: DataFrame[], data: DataFrame): number => { |
||||
if (!wasmSupported()) { |
||||
throw new Error('WASM not supported, fall back to stdDev'); |
||||
} |
||||
if (!outliers) { |
||||
throw new Error('Initialize outlier detector first'); |
||||
} |
||||
|
||||
const index = series.indexOf(data); |
||||
if (outliers.seriesResults[index].isOutlier) { |
||||
return outliers.seriesResults[index].outlierIntervals.length; |
||||
} |
||||
|
||||
return 0; |
||||
}; |
||||
|
||||
export const sortSeriesByName = (series: DataFrame[], direction: string) => { |
||||
const sortedSeries = [...series]; |
||||
sortedSeries.sort((a, b) => { |
||||
const valueA = getLabelValueFromDataFrame(a); |
||||
const valueB = getLabelValueFromDataFrame(b); |
||||
if (!valueA || !valueB) { |
||||
return 0; |
||||
} |
||||
return valueA?.localeCompare(valueB) ?? 0; |
||||
}); |
||||
if (direction === 'desc') { |
||||
sortedSeries.reverse(); |
||||
} |
||||
return sortedSeries; |
||||
}; |
||||
|
||||
export const wasmSupported = () => { |
||||
const support = typeof WebAssembly === 'object'; |
||||
|
||||
if (!support) { |
||||
reportExploreMetrics('wasm_not_supported', {}); |
||||
} |
||||
|
||||
return support; |
||||
}; |
||||
@ -0,0 +1,32 @@ |
||||
import type { |
||||
LoadedOutlierDetector as AugursLoadedOutlierDetector, |
||||
OutlierDetector as AugursOutlierDetector, |
||||
OutlierDetectorOptions, |
||||
OutlierOutput, |
||||
} from '@bsull/augurs'; |
||||
|
||||
export default function init() {} |
||||
|
||||
const dummyOutliers: OutlierOutput = { |
||||
outlyingSeries: [], |
||||
clusterBand: { min: [], max: [] }, |
||||
seriesResults: [], |
||||
}; |
||||
|
||||
export class OutlierDetector implements AugursOutlierDetector { |
||||
free(): void {} |
||||
detect(): OutlierOutput { |
||||
return dummyOutliers; |
||||
} |
||||
preprocess(y: Float64Array, nTimestamps: number): AugursLoadedOutlierDetector { |
||||
return new LoadedOutlierDetector(); |
||||
} |
||||
} |
||||
|
||||
export class LoadedOutlierDetector implements AugursLoadedOutlierDetector { |
||||
detect(): OutlierOutput { |
||||
return dummyOutliers; |
||||
} |
||||
free(): void {} |
||||
updateDetector(options: OutlierDetectorOptions): void {} |
||||
} |
||||
Loading…
Reference in new issue