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

Tempo: Fix issue with button click area being too large (#81500)

Browse Source 
Fix issue with button click area being too large
This commit is contained in:
Joey 2024-02-01 09:48:18 +00:00 committed by GitHub
parent 1606095a5c
commit fd54d25496
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx
View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import { defaults } from 'lodash'; import { defaults } from 'lodash';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { QueryEditorProps } from '@grafana/data'; import { GrafanaTheme2, QueryEditorProps } from '@grafana/data';
import { config, reportInteraction } from '@grafana/runtime'; import { config, reportInteraction } from '@grafana/runtime';
import { Button, InlineLabel, useStyles2 } from '@grafana/ui'; import { Button, InlineLabel, useStyles2 } from '@grafana/ui';
@ -46,32 +46,30 @@ export function QueryEditor(props: Props) {
</a> </a>
</InlineLabel> </InlineLabel>
{!showCopyFromSearchButton && ( {!showCopyFromSearchButton && (
<InlineLabel> <div className={styles.copyContainer}>
<div> <span>Continue editing the query from the Search tab?</span>
Continue editing the query from the Search tab? <Button
<Button variant="secondary"
variant="secondary" size="sm"
size="sm" onClick={() => {
onClick={() => { reportInteraction('grafana_traces_copy_to_traceql_clicked', {
reportInteraction('grafana_traces_copy_to_traceql_clicked', { app: props.app ?? '',
app: props.app ?? '', grafana_version: config.buildInfo.version,
grafana_version: config.buildInfo.version, location: 'traceql_tab',
location: 'traceql_tab', });
});
props.onClearResults(); props.onClearResults();
props.onChange({ props.onChange({
...query, ...query,
query: generateQueryFromFilters(query.filters || []), query: generateQueryFromFilters(query.filters || []),
}); });
setShowCopyFromSearchButton(true); setShowCopyFromSearchButton(true);
}} }}
style={{ marginLeft: '10px' }} style={{ marginLeft: '10px' }}
> >
Copy query from Search Copy query from Search
</Button> </Button>
</div> </div>
</InlineLabel>
)} )}
<TraceQLEditor <TraceQLEditor
placeholder="Enter a TraceQL query or trace ID (run with Shift+Enter)" placeholder="Enter a TraceQL query or trace ID (run with Shift+Enter)"
@ -87,8 +85,13 @@ export function QueryEditor(props: Props) {
); );
} }
const getStyles = () => ({ const getStyles = (theme: GrafanaTheme2) => ({
optionsContainer: css({ optionsContainer: css({
marginTop: '10px', marginTop: '10px',
}), }),
copyContainer: css({
backgroundColor: theme.colors.background.secondary,
padding: theme.spacing(0.5, 1),
fontSize: theme.typography.body.fontSize,
}),
}); });