Tracing: Feedback button (#67398)

* Feedback button

* Hide button

* Make gen-cue
This commit is contained in:
Joey 2023-04-28 16:27:07 +01:00 committed by GitHub
parent d8da6c75e5
commit 7448427739
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 5 deletions

View File

@ -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'}

View File

@ -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;