Trace: trace to logs design update (#30637)

* Add new icon to custom icons

* Show button in span detail

packages/grafana-ui/src/components/Icon/custom/index.tsx

@@ -65,6 +65,18 @@ const InterpolationStepAfter: FC<SvgProps> = ({ size, ...rest }) => {
   );
 };
 
+export const Logs: FC<SvgProps> = ({ size, ...rest }) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" width={30} height={size} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.36906 14.2144H8.68657C8.89601 14.2144 9.09687 14.2976 9.24496 14.4457C9.39306 14.5938 9.47626 14.7946 9.47626 15.0041C9.47626 15.2135 9.39306 15.4144 9.24496 15.5625C9.09687 15.7106 8.89601 15.7938 8.68657 15.7938H2.36906C1.74075 15.7938 1.13817 15.5442 0.693883 15.0999C0.249597 14.6556 0 14.053 0 13.4247V2.36906C0 1.74075 0.249597 1.13817 0.693883 0.693883C1.13817 0.249597 1.74075 0 2.36906 0H7.15457L7.37569 0.0789687H7.44676C7.52795 0.116938 7.60259 0.167585 7.66787 0.229009L12.406 4.96714C12.5156 5.07819 12.5898 5.2192 12.6193 5.37239C12.6488 5.52559 12.6323 5.68409 12.5718 5.8279C12.5126 5.97211 12.412 6.09556 12.2827 6.18269C12.1534 6.26982 12.0012 6.31673 11.8453 6.3175H8.68657C8.05825 6.3175 7.45567 6.06791 7.01139 5.62362C6.5671 5.17934 6.3175 4.57675 6.3175 3.94844V1.57938H2.36906C2.15963 1.57938 1.95877 1.66258 1.81067 1.81067C1.66258 1.95877 1.57938 2.15963 1.57938 2.36906V13.4247C1.57938 13.6341 1.66258 13.835 1.81067 13.9831C1.95877 14.1312 2.15963 14.2144 2.36906 14.2144ZM9.94217 4.73813L7.89688 2.69284V3.94844C7.89688 4.15788 7.98008 4.35874 8.12817 4.50683C8.27627 4.65493 8.47713 4.73813 8.68657 4.73813H9.94217ZM3.34761 12.2739C3.31241 12.1914 3.29137 12.1041 3.2854 12.0158L3.2854 8.36528C3.28184 8.18607 3.34961 8.01561 3.47382 7.89141C3.59802 7.76721 3.76848 7.69943 3.94769 7.70299C4.1269 7.70655 4.30019 7.78116 4.42943 7.9104C4.55867 8.03964 4.63327 8.21293 4.63683 8.39214L4.63684 11.2969L5.92266 11.2969C6.01149 11.2983 6.12471 11.3282 6.20753 11.3636C6.27155 11.391 6.31643 11.4391 6.3631 11.4892L6.36311 11.4892C6.37681 11.5039 6.39066 11.5187 6.4052 11.5332C6.46926 11.5973 6.52051 11.6729 6.55597 11.7557C6.59143 11.8386 6.61041 11.9269 6.61181 12.0158C6.61394 12.1046 6.59846 12.1923 6.56626 12.2738C6.53407 12.3553 6.48579 12.4289 6.42422 12.4905C6.36265 12.552 6.289 12.6003 6.20753 12.6325C6.12605 12.6647 6.01151 12.707 5.92266 12.7049H3.97454C3.8858 12.7025 3.79782 12.6813 3.71644 12.6427C3.55164 12.5712 3.41911 12.4387 3.34761 12.2739ZM8.70634 12.793C9.98203 12.793 11.0162 11.6439 11.0162 10.2265C11.0162 8.80904 9.98203 7.65998 8.70634 7.65998C7.43065 7.65998 6.3965 8.80904 6.3965 10.2265C6.3965 11.6439 7.43065 12.793 8.70634 12.793ZM8.73597 11.5453C9.37381 11.5453 9.89089 10.9407 9.89089 10.1949C9.89089 9.44911 9.37381 8.84453 8.73597 8.84453C8.09813 8.84453 7.58105 9.44911 7.58105 10.1949C7.58105 10.9407 8.09813 11.5453 8.73597 11.5453ZM11.3715 10.2265C11.3715 8.80904 12.4056 7.65998 13.6813 7.65998C14.1833 7.65998 14.7779 7.9067 15.0267 8.14005C15.1561 8.2614 15.3112 8.44705 15.3397 8.63063C15.366 8.80006 15.2757 8.96772 15.162 9.08144C15.0708 9.17262 14.938 9.2579 14.8066 9.25912C14.5968 9.26106 14.3907 9.13001 14.3646 9.08144C14.1787 8.93199 13.9535 8.84451 13.7109 8.84451C13.0731 8.84451 12.556 9.44909 12.556 10.1949C12.556 10.9407 13.0731 11.5452 13.7109 11.5452C14.0485 11.5452 14.3522 11.3759 14.5634 11.106L14.6882 10.8582H14.2144C14.1414 10.8571 14.0483 10.8326 13.9802 10.8034C13.9276 10.7809 13.8907 10.7413 13.8523 10.7002C13.8411 10.6882 13.8297 10.676 13.8177 10.664C13.7651 10.6113 13.723 10.5492 13.6938 10.4811C13.6647 10.413 13.6491 10.3404 13.6479 10.2674C13.6462 10.1943 13.6589 10.1222 13.6853 10.0553C13.7118 9.9883 13.7515 9.92777 13.8021 9.87716C13.8527 9.82654 13.9132 9.78686 13.9802 9.7604C14.0472 9.73393 14.1414 9.69913 14.2144 9.70088H15.4247C15.4977 9.70283 15.57 9.72026 15.6369 9.75202C15.7723 9.8108 15.8813 9.91973 15.94 10.0552C15.94 10.0552 15.9629 10.1198 15.9912 10.266C16.0154 10.3912 15.9852 10.5411 15.9549 10.6909C15.9499 10.7159 15.9448 10.741 15.94 10.7659C15.717 11.9243 14.7905 12.793 13.6813 12.793C12.4056 12.793 11.3715 11.6439 11.3715 10.2265Z"
+      />
+    </svg>
+  );
+};
+
 const IconNotFound: FC<SvgProps> = ({ size, ...rest }) => {
   return <svg width={size} height={size} {...rest} />;
 };
@@ -74,5 +86,6 @@ export const customIcons: Record<string, ComponentType<SvgProps>> = {
   'gf-interpolation-smooth': InterpolationSmooth,
   'gf-interpolation-step-before': InterpolationStepBefore,
   'gf-interpolation-step-after': InterpolationStepAfter,
+  'gf-logs': Logs,
   notFoundDummy: IconNotFound,
 };

packages/grafana-ui/src/components/Logs/FieldLink.tsx

 import { Field, LinkModel } from '@grafana/data';
 import React from 'react';
-import { Button } from '..';
+import { ButtonProps, Button } from '../Button';
 
 type FieldLinkProps = {
   link: LinkModel<Field>;
+  buttonProps?: ButtonProps;
 };
 
-export function FieldLink({ link }: FieldLinkProps) {
+export function FieldLink({ link, buttonProps }: FieldLinkProps) {
   return (
     <a
       href={link.href}
@@ -23,7 +24,9 @@ export function FieldLink({ link }: FieldLinkProps) {
           : undefined
       }
     >
-      <Button icon="external-link-alt">{link.title}</Button>
+      <Button icon="external-link-alt" {...buttonProps}>
+        {link.title}
+      </Button>
     </a>
   );
 }

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',
 ];

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 (
     <div>
-      <div className={cx(ubFlex, ubItemsCenter)}>
+      <div className={cx(ubFlex, ubItemsCenter, ubMb1)}>
         <h2 className={cx(ubFlexAuto, ubM0)}>{operationName}</h2>
         <LabeledList className={ubTxRightAlign} dividerClassName={styles.divider} items={overviewItems} />
       </div>
+      {link ? (
+        <FieldLink link={{ ...link, title: 'Logs for this span' } as any} buttonProps={{ icon: 'gf-logs' }} />
+      ) : null}
       <UIDivider className={cx(styles.divider, styles.dividerVertical, ubMy1)} />
       <div>
         <div>

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<SpanDetailRowProps> {
@@ -116,6 +118,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProp
       addHoverIndentGuideId,
       removeHoverIndentGuideId,
       theme,
+      createSpanLink,
     } = this.props;
     const styles = getStyles(theme);
     return (
@@ -154,6 +157,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProp
               tagsToggle={tagsToggle}
               traceStartTime={traceStartTime}
               focusSpan={focusSpan}
+              createSpanLink={createSpanLink}
             />
           </div>
         </TimelineRow.Cell>

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<VirtualizedTra
       removeHoverIndentGuideId,
       linksGetter,
       theme,
+      createSpanLink,
     } = this.props;
     const detailState = detailStates.get(spanID);
     if (!trace || !detailState) {
@@ -439,6 +439,7 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
           hoverIndentGuideIds={hoverIndentGuideIds}
           addHoverIndentGuideId={addHoverIndentGuideId}
           removeHoverIndentGuideId={removeHoverIndentGuideId}
+          createSpanLink={createSpanLink}
         />
       </div>
     );

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;
+};

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: <Icon name="file-alt" title="Show logs" />,
+      content: <Icon name="gf-logs" title="Explore the logs for this in split view" />,
     };
   };
 }