mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Tracing: Feedback button (#67398)
* Feedback button * Hide button * Make gen-cue
This commit is contained in:
parent
d8da6c75e5
commit
7448427739
@ -1,21 +1,30 @@
|
|||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
import { CoreApp, DataFrame } from '@grafana/data';
|
import { GrafanaTheme2, CoreApp, DataFrame } from '@grafana/data';
|
||||||
import { reportInteraction } from '@grafana/runtime';
|
import { reportInteraction } from '@grafana/runtime';
|
||||||
import { useStyles2 } from '@grafana/ui';
|
import { Icon, useTheme2 } from '@grafana/ui';
|
||||||
|
|
||||||
import { config } from '../../../../../../core/config';
|
import { config } from '../../../../../../core/config';
|
||||||
import { downloadTraceAsJson } from '../../../../../inspector/utils/download';
|
import { downloadTraceAsJson } from '../../../../../inspector/utils/download';
|
||||||
|
|
||||||
import ActionButton from './ActionButton';
|
import ActionButton from './ActionButton';
|
||||||
|
|
||||||
export const getStyles = () => {
|
export const getStyles = (theme: GrafanaTheme2) => {
|
||||||
return {
|
return {
|
||||||
TracePageActions: css`
|
TracePageActions: css`
|
||||||
label: TracePageActions;
|
label: TracePageActions;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
margin-top: 2px;
|
||||||
|
`,
|
||||||
|
feedback: css`
|
||||||
|
margin: 6px;
|
||||||
|
color: ${theme.colors.text.secondary};
|
||||||
|
font-size: ${theme.typography.bodySmall.fontSize};
|
||||||
|
&:hover {
|
||||||
|
color: ${theme.colors.text.link};
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
@ -28,7 +37,8 @@ export type TracePageActionsProps = {
|
|||||||
|
|
||||||
export default function TracePageActions(props: TracePageActionsProps) {
|
export default function TracePageActions(props: TracePageActionsProps) {
|
||||||
const { traceId, data, app } = props;
|
const { traceId, data, app } = props;
|
||||||
const styles = useStyles2(getStyles);
|
const theme = useTheme2();
|
||||||
|
const styles = getStyles(theme);
|
||||||
const [copyTraceIdClicked, setCopyTraceIdClicked] = useState(false);
|
const [copyTraceIdClicked, setCopyTraceIdClicked] = useState(false);
|
||||||
|
|
||||||
const copyTraceId = () => {
|
const copyTraceId = () => {
|
||||||
@ -51,6 +61,16 @@ export default function TracePageActions(props: TracePageActionsProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.TracePageActions}>
|
<div className={styles.TracePageActions}>
|
||||||
|
<a
|
||||||
|
href="https://forms.gle/RZDEx8ScyZNguDoC8"
|
||||||
|
className={styles.feedback}
|
||||||
|
title="Share your thoughts about tracing in Grafana."
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
>
|
||||||
|
<Icon name="comment-alt-message" /> Give feedback
|
||||||
|
</a>
|
||||||
|
|
||||||
<ActionButton
|
<ActionButton
|
||||||
onClick={copyTraceId}
|
onClick={copyTraceId}
|
||||||
ariaLabel={'Copy Trace ID'}
|
ariaLabel={'Copy Trace ID'}
|
||||||
|
@ -162,7 +162,7 @@ const getNewStyles = (theme: GrafanaTheme2) => {
|
|||||||
z-index: 5;
|
z-index: 5;
|
||||||
`,
|
`,
|
||||||
titleRow: css`
|
titleRow: css`
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
`,
|
`,
|
||||||
@ -193,6 +193,7 @@ const getNewStyles = (theme: GrafanaTheme2) => {
|
|||||||
`,
|
`,
|
||||||
url: css`
|
url: css`
|
||||||
margin: -2.5px 0.3em;
|
margin: -2.5px 0.3em;
|
||||||
|
height: 15px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
Loading…
Reference in New Issue
Block a user