IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Pyroscope: Simplify and update query options to include max nodes in summary (#76942)

Browse Source 
Simplify and update query options to include max nodes
This commit is contained in:
Joey 2023-11-01 08:47:01 +00:00 committed by GitHub
parent f5cbd4f9d0
commit 266b3fd41b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx
View File

@ -1,10 +1,10 @@
import { css, cx } from '@emotion/css';
import { css } from '@emotion/css';
import React from 'react';
import { useToggle } from 'react-use';
import { CoreApp, GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Icon, useStyles2, RadioButtonGroup, MultiSelect, Input, clearButtonStyles, Button } from '@grafana/ui';
import { useStyles2, RadioButtonGroup, MultiSelect, Input } from '@grafana/ui';
import { QueryOptionGroup } from '../../prometheus/querybuilder/shared/QueryOptionGroup';
import { Query } from '../types';
import { EditorField } from './EditorField';
@ -34,7 +34,6 @@ function getTypeOptions(app?: CoreApp) {
* Base on QueryOptionGroup component from grafana/ui but that is not available yet.
*/
export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
const [isOpen, toggleOpen] = useToggle(false);
const styles = useStyles2(getStyles);
const typeOptions = getTypeOptions(app);
const groupByOptions = labels
@ -43,26 +42,18 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
value: l,
}))
: [];
const buttonStyles = useStyles2(clearButtonStyles);
let collapsedInfo = [`Type: ${query.queryType}`];
if (query.groupBy?.length) {
collapsedInfo.push(`Group by: ${query.groupBy.join(', ')}`);
}
if (query.maxNodes) {
collapsedInfo.push(`Max nodes: ${query.maxNodes}`);
}
return (
<Stack gap={0} direction="column">
<Button className={cx(styles.header, buttonStyles)} onClick={toggleOpen} title="Click to edit options">
<div className={styles.toggle}>
<Icon name={isOpen ? 'angle-down' : 'angle-right'} />
</div>
<h6 className={styles.title}>Options</h6>
{!isOpen && (
<div className={styles.description}>
{[`Type: ${query.queryType}`, query.groupBy?.length ? `Group by: ${query.groupBy.join(', ')}` : undefined]
.filter((v) => v)
.map((v, i) => (
<span key={i}>{v}</span>
))}
</div>
)}
</Button>
{isOpen && (
<QueryOptionGroup title="Options" collapsedInfo={collapsedInfo}>
<div className={styles.body}>
<EditorField label={'Query Type'}>
<RadioButtonGroup
@ -105,7 +96,7 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
/>
</EditorField>
</div>
)}
</QueryOptionGroup>
</Stack>
);
}
@ -120,38 +111,11 @@ const getStyles = (theme: GrafanaTheme2) => {
color: theme.colors.text.primary,
},
}),
header: css({
display: 'flex',
cursor: 'pointer',
alignItems: 'baseline',
color: theme.colors.text.primary,
'&:hover': {
background: theme.colors.emphasize(theme.colors.background.primary, 0.03),
},
}),
title: css({
flexGrow: 1,
overflow: 'hidden',
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.fontWeightMedium,
margin: 0,
}),
description: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.bodySmall.fontSize,
paddingLeft: theme.spacing(2),
gap: theme.spacing(2),
display: 'flex',
}),
body: css({
display: 'flex',
paddingTop: theme.spacing(2),
gap: theme.spacing(2),
flexWrap: 'wrap',
}),
toggle: css({
color: theme.colors.text.secondary,
marginRight: `${theme.spacing(1)}`,
}),
};
};