diff --git a/packages/grafana-ui/src/components/Icon/custom/index.tsx b/packages/grafana-ui/src/components/Icon/custom/index.tsx index 7a3637e0094..a7ac22dd718 100644 --- a/packages/grafana-ui/src/components/Icon/custom/index.tsx +++ b/packages/grafana-ui/src/components/Icon/custom/index.tsx @@ -65,6 +65,18 @@ const InterpolationStepAfter: FC = ({ size, ...rest }) => { ); }; +export const Logs: FC = ({ size, ...rest }) => { + return ( + + + + ); +}; + const IconNotFound: FC = ({ size, ...rest }) => { return ; }; @@ -74,5 +86,6 @@ export const customIcons: Record> = { 'gf-interpolation-smooth': InterpolationSmooth, 'gf-interpolation-step-before': InterpolationStepBefore, 'gf-interpolation-step-after': InterpolationStepAfter, + 'gf-logs': Logs, notFoundDummy: IconNotFound, }; diff --git a/packages/grafana-ui/src/components/Logs/FieldLink.tsx b/packages/grafana-ui/src/components/Logs/FieldLink.tsx index b5c65440c11..116f2de2aa4 100644 --- a/packages/grafana-ui/src/components/Logs/FieldLink.tsx +++ b/packages/grafana-ui/src/components/Logs/FieldLink.tsx @@ -1,12 +1,13 @@ import { Field, LinkModel } from '@grafana/data'; import React from 'react'; -import { Button } from '..'; +import { ButtonProps, Button } from '../Button'; type FieldLinkProps = { link: LinkModel; + buttonProps?: ButtonProps; }; -export function FieldLink({ link }: FieldLinkProps) { +export function FieldLink({ link, buttonProps }: FieldLinkProps) { return ( - + ); } diff --git a/packages/grafana-ui/src/types/icon.ts b/packages/grafana-ui/src/types/icon.ts index b9e4d1bf469..72eead3f81c 100644 --- a/packages/grafana-ui/src/types/icon.ts +++ b/packages/grafana-ui/src/types/icon.ts @@ -125,7 +125,8 @@ export type IconName = | 'gf-interpolation-linear' | 'gf-interpolation-smooth' | 'gf-interpolation-step-before' - | 'gf-interpolation-step-after'; + | 'gf-interpolation-step-after' + | 'gf-logs'; export const getAvailableIcons = (): IconName[] => [ 'fa fa-spinner', @@ -249,4 +250,5 @@ export const getAvailableIcons = (): IconName[] => [ 'gf-interpolation-smooth', 'gf-interpolation-step-before', 'gf-interpolation-step-after', + 'gf-logs', ]; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx index 0619c226f35..f17bc030b43 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx @@ -30,7 +30,8 @@ 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 { TextArea } from '@grafana/ui'; +import { FieldLink, TextArea } from '@grafana/ui'; +import { CreateSpanLink } from '../types'; const getStyles = createStyle((theme: Theme) => { return { @@ -115,6 +116,7 @@ type SpanDetailProps = { stackTracesToggle: (spanID: string) => void; referencesToggle: (spanID: string) => void; focusSpan: (uiFind: string) => void; + createSpanLink?: CreateSpanLink; }; export default function SpanDetail(props: SpanDetailProps) { @@ -131,6 +133,7 @@ export default function SpanDetail(props: SpanDetailProps) { stackTracesToggle, referencesToggle, focusSpan, + createSpanLink, } = props; const { isTagsOpen, @@ -171,13 +174,17 @@ export default function SpanDetail(props: SpanDetailProps) { ]; const deepLinkCopyText = `${window.location.origin}${window.location.pathname}?uiFind=${spanID}`; const styles = getStyles(useTheme()); + const link = createSpanLink?.(span); return (
-
+

{operationName}

+ {link ? ( + + ) : null}
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx index 7d4b2b7df79..05656198976 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx @@ -22,6 +22,7 @@ import TimelineRow from './TimelineRow'; import { autoColor, createStyle, Theme, withTheme } from '../Theme'; import { TraceLog, TraceSpan, TraceKeyValuePair, TraceLink } from '@grafana/data'; +import { CreateSpanLink } from './types'; const getStyles = createStyle((theme: Theme) => { return { @@ -85,6 +86,7 @@ type SpanDetailRowProps = { addHoverIndentGuideId: (spanID: string) => void; removeHoverIndentGuideId: (spanID: string) => void; theme: Theme; + createSpanLink?: CreateSpanLink; }; export class UnthemedSpanDetailRow extends React.PureComponent { @@ -116,6 +118,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx index 6e2e0b94f47..0104e3a4bd8 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx @@ -33,6 +33,7 @@ import { TraceLog, TraceSpan, Trace, TraceKeyValuePair, TraceLink } from '@grafa import TTraceTimeline from '../types/TTraceTimeline'; import { createStyle, Theme, withTheme } from '../Theme'; +import { CreateSpanLink } from './types'; type TExtractUiFindFromStateReturn = { uiFind: string | undefined; @@ -79,9 +80,7 @@ type TVirtualizedTraceViewOwnProps = { addHoverIndentGuideId: (spanID: string) => void; removeHoverIndentGuideId: (spanID: string) => void; theme: Theme; - createSpanLink?: ( - span: TraceSpan - ) => { href: string; onClick?: (e: React.MouseEvent) => void; content: React.ReactNode }; + createSpanLink?: CreateSpanLink; scrollElement?: Element; }; @@ -411,6 +410,7 @@ export class UnthemedVirtualizedTraceView extends React.Component
); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/types.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/types.tsx index c427b0ecd3d..f7854cd275f 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/types.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/types.tsx @@ -12,6 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. +import { TraceSpan } from '@grafana/data'; import { TNil } from '../types'; interface TimeCursorUpdate { @@ -51,3 +52,11 @@ export interface ViewRangeTime { export interface ViewRange { time: ViewRangeTime; } + +export type CreateSpanLink = ( + span: TraceSpan +) => { + href: string; + onClick?: (e: React.MouseEvent) => void; + content: React.ReactNode; +}; diff --git a/public/app/features/explore/TraceView/createSpanLink.tsx b/public/app/features/explore/TraceView/createSpanLink.tsx index b9d91b5c7ff..46133f20c35 100644 --- a/public/app/features/explore/TraceView/createSpanLink.tsx +++ b/public/app/features/explore/TraceView/createSpanLink.tsx @@ -56,7 +56,7 @@ export function createSpanLinkFactory(splitOpenFn: SplitOpen, traceToLogsOptions return { href: link.href, onClick: link.onClick, - content: , + content: , }; }; }