mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Pyroscope: Simplify and update query options to include max nodes in summary (#76942)
Simplify and update query options to include max nodes
This commit is contained in:
parent
f5cbd4f9d0
commit
266b3fd41b
@ -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)}`,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user