Skip to content

N
nexpie-grafana-theme
Commit cc463f30 by Zoltán Bedi Committed by GitHub
Options

Exemplars: Change CTA style (#30880) 

* Exemplars: Change CTA style

* Address review feedbacks

* Fix table column aligning

* Minor alignments + uncontrolled component warning fix
parent e0448513
Showing with 106 additions and 28 deletions
packages/grafana-data/src/types/dataLink.ts
......@@ -33,7 +33,7 @@ export interface DataLink<T extends DataQuery = any> {
onClick?: (event: DataLinkClickEvent) => void;
// If dataLink represents internal link this has to be filled. Internal link is defined as a query in a particular
// datas ource that we want to show to the user. Usually this results in a link to explore but can also lead to
// data source that we want to show to the user. Usually this results in a link to explore but can also lead to
// more custom onClick behaviour if needed.
// @internal and subject to change in future releases
internal?: InternalDataLink<T>;
......
packages/grafana-ui/src/components/Logs/FieldLink.tsx → packages/grafana-ui/src/components/DataLinks/DataLinkButton.tsx
......@@ -2,16 +2,19 @@ import { Field, LinkModel } from '@grafana/data';
import React from 'react';
import { ButtonProps, Button } from '../Button';
type FieldLinkProps = {
type DataLinkButtonProps = {
link: LinkModel<Field>;
buttonProps?: ButtonProps;
};
export function FieldLink({ link, buttonProps }: FieldLinkProps) {
/**
* @internal
*/
export function DataLinkButton({ link, buttonProps }: DataLinkButtonProps) {
return (
<a
href={link.href}
target="_blank"
target={link.target}
rel="noreferrer"
onClick={
link.onClick
......@@ -24,7 +27,7 @@ export function FieldLink({ link, buttonProps }: FieldLinkProps) {
: undefined
}
>
<Button icon="external-link-alt" {...buttonProps}>
<Button icon="external-link-alt" variant="primary" size="sm" {...buttonProps}>
{link.title}
</Button>
</a>
......
packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx 0 → 100644
import { Field, GrafanaTheme, LinkModel } from '@grafana/data';
import { css } from 'emotion';
import React from 'react';
import { useStyles } from '../../themes';
import { Icon } from '../Icon/Icon';
import { DataLinkButton } from './DataLinkButton';
type Props = {
links: Array<LinkModel<Field>>;
};
/**
* @internal
*/
export function FieldLinkList({ links }: Props) {
const styles = useStyles(getStyles);
if (links.length === 1) {
return <DataLinkButton link={links[0]} />;
}
const externalLinks = links.filter((link) => link.target === '_blank');
const internalLinks = links.filter((link) => link.target === '_self');
return (
<>
{internalLinks.map((link, i) => {
return <DataLinkButton key={i} link={link} />;
})}
<div className={styles.wrapper}>
<p className={styles.externalLinksHeading}>External links</p>
{externalLinks.map((link, i) => (
<a key={i} href={link.href} target={link.target} className={styles.externalLink}>
<Icon name="external-link-alt" />
{link.title}
</a>
))}
</div>
</>
);
}
const getStyles = (theme: GrafanaTheme) => ({
wrapper: css`
flex-basis: 150px;
width: 100px;
margin-top: ${theme.spacing.sm};
`,
externalLinksHeading: css`
color: ${theme.colors.textWeak};
font-weight: ${theme.typography.weight.regular};
font-size: ${theme.typography.size.sm};
margin: 0;
`,
externalLink: css`
color: ${theme.colors.linkExternal};
font-weight: ${theme.typography.weight.regular};
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
text-decoration: underline;
}
div {
margin-right: ${theme.spacing.sm};
}
`,
});
packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
......@@ -10,7 +10,7 @@ import { stylesFactory } from '../../themes/stylesFactory';
//Components
import { LogLabelStats } from './LogLabelStats';
import { IconButton } from '../IconButton/IconButton';
import { FieldLink } from './FieldLink';
import { DataLinkButton } from '../DataLinks/DataLinkButton';
export interface Props extends Themeable {
parsedValue: string;
......@@ -158,7 +158,7 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
return (
<>
&nbsp;
<FieldLink link={link} />
<DataLinkButton link={link} />
</>
);
})}
......
packages/grafana-ui/src/components/index.ts
......@@ -87,7 +87,8 @@ export { LogLabels } from './Logs/LogLabels';
export { LogMessageAnsi } from './Logs/LogMessageAnsi';
export { LogRows } from './Logs/LogRows';
export { getLogRowStyles } from './Logs/getLogRowStyles';
export { FieldLink } from './Logs/FieldLink';
export { DataLinkButton } from './DataLinks/DataLinkButton';
export { FieldLinkList } from './DataLinks/FieldLinkList';
export { ToggleButtonGroup, ToggleButton } from './ToggleButtonGroup/ToggleButtonGroup';
// Panel editors
export { FullWidthButtonContainer } from './Button/FullWidthButtonContainer';
......
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
......@@ -30,7 +30,7 @@ import AccordianReferences from './AccordianReferences';
import { autoColor, createStyle, Theme, useTheme } from '../../Theme';
import { UIDivider } from '../../uiElementsContext';
import { ubFlex, ubFlexAuto, ubItemsCenter, ubM0, ubMb1, ubMy1, ubTxRightAlign } from '../../uberUtilityStyles';
import { FieldLink, TextArea } from '@grafana/ui';
import { DataLinkButton, TextArea } from '@grafana/ui';
import { CreateSpanLink } from '../types';
const getStyles = createStyle((theme: Theme) => {
......@@ -183,7 +183,7 @@ export default function SpanDetail(props: SpanDetailProps) {
<LabeledList className={ubTxRightAlign} dividerClassName={styles.divider} items={overviewItems} />
</div>
{link ? (
<FieldLink link={{ ...link, title: 'Logs for this span' } as any} buttonProps={{ icon: 'gf-logs' }} />
<DataLinkButton link={{ ...link, title: 'Logs for this span' } as any} buttonProps={{ icon: 'gf-logs' }} />
) : null}
<UIDivider className={cx(styles.divider, styles.dividerVertical, ubMy1)} />
<div>
......
public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx
......@@ -15,7 +15,7 @@ const onExemplarsChange = ({ query, onChange }: Props) => (e: React.ChangeEvent<
export function PromExemplarField(props: Props) {
return (
<InlineField label="Exemplars" labelWidth="auto">
<InlineSwitch label="Exemplars" value={props.query.exemplar} onChange={onExemplarsChange(props)} />
<InlineSwitch label="Exemplars" value={!!props.query.exemplar} onChange={onExemplarsChange(props)} />
</InlineField>
);
}
public/app/plugins/datasource/prometheus/result_transformer.ts
......@@ -165,8 +165,9 @@ function getDataLinks(options: ExemplarTraceIdDestination): DataLink[] {
if (options.url) {
dataLinks.push({
title: 'Open link',
title: `Go to ${options.url}`,
url: options.url,
targetBlank: true,
});
}
return dataLinks;
......
public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
......@@ -8,7 +8,7 @@ import {
systemDateFormats,
TimeZone,
} from '@grafana/data';
import { FieldLink, Portal, TooltipContainer, useStyles } from '@grafana/ui';
import { FieldLinkList, Portal, TooltipContainer, useStyles } from '@grafana/ui';
import { css, cx } from 'emotion';
import React, { useCallback, useRef, useState } from 'react';
......@@ -78,17 +78,12 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({ timeZone, dataFr
const links = field.config.links?.length ? getFieldLinks(field, index) : undefined;
return (
<tr key={i}>
<td>{field.name}</td>
<td className={styles.valueWrapper}>
{field.type === FieldType.time ? timeFormatter(value) : value}{' '}
{links &&
links.map((link, i) => {
return (
<div key={i} className={styles.link}>
<FieldLink link={link} />
</div>
);
})}
<td valign="top">{field.name}</td>
<td>
<div className={styles.valueWrapper}>
<span>{field.type === FieldType.time ? timeFormatter(value) : value}</span>
{links && <FieldLinkList links={links} />}
</div>
</td>
</tr>
);
......@@ -179,7 +174,17 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
valueWrapper: css`
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
column-gap: ${theme.spacing.sm};
> span {
flex-grow: 0;
}
> * {
flex: 1 1;
align-self: center;
}
`,
tooltip: css`
background: none;
......@@ -203,9 +208,6 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
padding: ${theme.spacing.sm};
font-weight: ${theme.typography.weight.semibold};
`,
link: css`
margin: 0 ${theme.spacing.sm};
`,
marble,
activeMarble,
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment