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

VizTooltips: Show data links without anchoring (#83638)

Browse Source
This commit is contained in:
Leon Sorokin
2024-02-28 17:06:05 -06:00
committed by GitHub
parent 6e75584505
commit 5eb7e09351
6 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx
View File

@@ -6,14 +6,14 @@ import { Field, GrafanaTheme2, LinkModel } from '@grafana/data';
import { Button, ButtonProps, DataLinkButton, HorizontalGroup } from '..'; import { Button, ButtonProps, DataLinkButton, HorizontalGroup } from '..';
import { useStyles2 } from '../../themes'; import { useStyles2 } from '../../themes';
interface Props { interface VizTooltipFooterProps {
dataLinks: Array<LinkModel<Field>>; dataLinks: Array<LinkModel<Field>>;
annotate?: () => void; annotate?: () => void;
} }
export const ADD_ANNOTATION_ID = 'add-annotation-button'; export const ADD_ANNOTATION_ID = 'add-annotation-button';
export const VizTooltipFooter = ({ dataLinks, annotate }: Props) => { export const VizTooltipFooter = ({ dataLinks, annotate }: VizTooltipFooterProps) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const renderDataLinks = () => { const renderDataLinks = () => {
@@ -33,7 +33,7 @@ export const VizTooltipFooter = ({ dataLinks, annotate }: Props) => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
{dataLinks.length > 0 && <div className={styles.dataLinks}>{renderDataLinks()}</div>} {dataLinks.length > 0 && <div className={styles.dataLinks}>{renderDataLinks()}</div>}
{annotate && ( {annotate != null && (
<div className={styles.addAnnotations}> <div className={styles.addAnnotations}>
<Button icon="comment-alt" variant="secondary" size="sm" id={ADD_ANNOTATION_ID} onClick={annotate}> <Button icon="comment-alt" variant="secondary" size="sm" id={ADD_ANNOTATION_ID} onClick={annotate}>
Add annotation Add annotation

4
public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
View File

@@ -377,7 +377,9 @@ const HeatmapHoverCell = ({
</div> </div>
))} ))}
</VizTooltipContent> </VizTooltipContent>
{isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />} {(links.length > 0 || isPinned) && (
<VizTooltipFooter dataLinks={links} annotate={isPinned ? annotate : undefined} />
)}
</div> </div>
); );
}; };

4
public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
View File

@@ -83,7 +83,9 @@ export const StateTimelineTooltip2 = ({
<div className={styles.wrapper}> <div className={styles.wrapper}>
<VizTooltipHeader item={headerItem} isPinned={isPinned} /> <VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} /> <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
{isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />} {(links.length > 0 || isPinned) && (
<VizTooltipFooter dataLinks={links} annotate={isPinned ? annotate : undefined} />
)}
</div> </div>
</div> </div>
); );

6
public/app/plugins/panel/status-history/utils.ts
View File

@@ -1,13 +1,13 @@
import { Field, LinkModel } from '@grafana/data'; import { Field, LinkModel } from '@grafana/data';
export const getDataLinks = (field: Field, datapointIdx: number) => { export const getDataLinks = (field: Field, rowIdx: number) => {
const links: Array<LinkModel<Field>> = []; const links: Array<LinkModel<Field>> = [];
const linkLookup = new Set<string>(); const linkLookup = new Set<string>();
if (field.getLinks) { if (field.getLinks) {
const v = field.values[datapointIdx]; const v = field.values[rowIdx];
const disp = field.display ? field.display(v) : { text: `${v}`, numeric: +v }; const disp = field.display ? field.display(v) : { text: `${v}`, numeric: +v };
field.getLinks({ calculatedValue: disp, valueRowIndex: datapointIdx }).forEach((link) => { field.getLinks({ calculatedValue: disp, valueRowIndex: rowIdx }).forEach((link) => {
const key = `${link.title}/${link.href}`; const key = `${link.title}/${link.href}`;
if (!linkLookup.has(key)) { if (!linkLookup.has(key)) {
links.push(link); links.push(link);

4
public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
View File

@@ -77,7 +77,9 @@ export const TimeSeriesTooltip = ({
<div className={styles.wrapper}> <div className={styles.wrapper}>
<VizTooltipHeader item={headerItem} isPinned={isPinned} /> <VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} /> <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
{isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />} {(links.length > 0 || isPinned) && (
<VizTooltipFooter dataLinks={links} annotate={isPinned ? annotate : undefined} />
)}
</div> </div>
</div> </div>
); );

22
public/app/plugins/panel/xychart/XYChartTooltip.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import { DataFrame, Field, getFieldDisplayName, LinkModel } from '@grafana/data'; import { DataFrame, Field, getFieldDisplayName } from '@grafana/data';
import { alpha } from '@grafana/data/src/themes/colorManipulator'; import { alpha } from '@grafana/data/src/themes/colorManipulator';
import { useStyles2 } from '@grafana/ui'; import { useStyles2 } from '@grafana/ui';
import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent'; import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter'; import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader'; import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
import { ColorIndicator, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types'; import { ColorIndicator, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
import { getTitleFromHref } from 'app/features/explore/utils/links';
import { getDataLinks } from '../status-history/utils';
import { getStyles } from '../timeseries/TimeSeriesTooltip'; import { getStyles } from '../timeseries/TimeSeriesTooltip';
import { Options } from './panelcfg.gen'; import { Options } from './panelcfg.gen';
@@ -83,27 +83,13 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
}); });
} }
const getLinks = (): Array<LinkModel<Field>> => { const links = getDataLinks(yField, rowIndex);
let links: Array<LinkModel<Field>> = [];
if (yField.getLinks) {
const v = yField.values[rowIndex];
const disp = yField.display ? yField.display(v) : { text: `${v}`, numeric: +v };
links = yField.getLinks({ calculatedValue: disp, valueRowIndex: rowIndex }).map((linkModel) => {
if (!linkModel.title) {
linkModel.title = getTitleFromHref(linkModel.href);
}
return linkModel;
});
}
return links;
};
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<VizTooltipHeader item={headerItem} isPinned={isPinned} /> <VizTooltipHeader item={headerItem} isPinned={isPinned} />
<VizTooltipContent items={contentItems} isPinned={isPinned} /> <VizTooltipContent items={contentItems} isPinned={isPinned} />
{isPinned && <VizTooltipFooter dataLinks={getLinks()} />} {(links.length > 0 || isPinned) && <VizTooltipFooter dataLinks={links} />}
</div> </div>
); );
}; };