Merge branch 'master' into Issue-467

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx

@@ -34,8 +34,10 @@ import { getTraceName } from '../../../model/trace-viewer';
 import { TNil } from '../../../types';
 import { Trace } from '../../../types/trace';
 import { formatDatetime, formatDuration } from '../../../utils/date';
+import { getTraceLinks } from '../../../model/link-patterns';
 
 import './TracePageHeader.css';
+import ExternalLinks from '../../common/ExternalLinks';
 
 type TracePageHeaderEmbedProps = {
   canCollapse: boolean;
@@ -136,6 +138,8 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
     return null;
   }
 
+  const links = getTraceLinks(trace);
+
   const summaryItems =
     !hideSummary &&
     !slimView &&
@@ -159,6 +163,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
             <IoAndroidArrowBack />
           </Link>
         )}
+        {links && links.length > 0 && <ExternalLinks links={links} />}
         {canCollapse ? (
           <a
             className="TracePageHeader--titleLink"

packages/jaeger-ui/src/components/common/ExternalLinks.test.js

@@ -0,0 +1,54 @@
+// Copyright (c) 2019 The Jaeger Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Menu, Dropdown } from 'antd';
+
+import ExternalLinks from './ExternalLinks';
+
+describe('<ExternalLinks>', () => {
+  describe('render  links links', () => {
+    it('renders dropdown with multiple links', () => {
+      const links = [
+        { url: 'http://nowhere/', text: 'some text' },
+        { url: 'http://other/', text: 'other text' },
+        { url: 'http://link/', text: 'link text' },
+      ];
+
+      const wrapper = shallow(<ExternalLinks links={links} />);
+      const dropdown = wrapper.find(Dropdown);
+      expect(dropdown.length).toBe(1);
+      const linkValues = shallow(dropdown.first().props().overlay);
+      const submenuItems = linkValues.find(Menu.Item);
+      expect(submenuItems.length).toBe(links.length);
+      submenuItems.forEach((subMenu, i) => {
+        const linkValue = subMenu.find('LinkValue');
+        expect(linkValue.props().href).toBe(links[i].url);
+        expect(linkValue.props().children).toBe(links[i].text);
+      });
+    });
+
+    it('renders one link', () => {
+      const links = [{ url: 'http://nowhere/', text: 'some text' }];
+      const wrapper = shallow(<ExternalLinks links={links} />);
+      const dropdown = wrapper.find(Dropdown);
+      expect(dropdown.length).toBe(0);
+      const linkValues = wrapper.find('LinkValue');
+      expect(linkValues.length).toBe(1);
+      expect(linkValues.prop('href')).toBe(links[0].url);
+      expect(linkValues.prop('title')).toBe(links[0].text);
+    });
+  });
+});

packages/jaeger-ui/src/components/common/ExternalLinks.tsx

@@ -0,0 +1,66 @@
+// Copyright (c) 2019 The Jaeger Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Dropdown, Menu } from 'antd';
+import * as React from 'react';
+import { Link } from '../../types/trace';
+import NewWindowIcon from './NewWindowIcon';
+
+type ExternalLinksProps = {
+  links: Link[];
+};
+
+const LinkValue = (props: {
+  href: string;
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+}) => (
+  <a
+    href={props.href}
+    title={props.title}
+    target="_blank"
+    rel="noopener noreferrer"
+    className={props.className}
+  >
+    {props.children} <NewWindowIcon />
+  </a>
+);
+
+// export for testing
+export const linkValueList = (links: Link[]) => (
+  <Menu>
+    {links.map(({ text, url }, index) => (
+      // `index` is necessary in the key because url can repeat
+      // eslint-disable-next-line react/no-array-index-key
+      <Menu.Item key={`${url}-${index}`}>
+        <LinkValue href={url}>{text}</LinkValue>
+      </Menu.Item>
+    ))}
+  </Menu>
+);
+
+export default function ExternalLinks(props: ExternalLinksProps) {
+  const { links } = props;
+  if (links.length === 1) {
+    return <LinkValue href={links[0].url} title={links[0].text} className="TracePageHeader--back" />;
+  }
+  return (
+    <Dropdown overlay={linkValueList(links)} placement="bottomRight" trigger={['click']}>
+      <a className="TracePageHeader--back">
+        <NewWindowIcon isLarge />
+      </a>
+    </Dropdown>
+  );
+}

packages/jaeger-ui/src/model/link-patterns.test.js

@@ -20,6 +20,7 @@ import {
   processLinkPattern,
   computeLinks,
   createGetLinks,
+  computeTraceLink,
 } from './link-patterns';
 
 describe('processTemplate()', () => {
@@ -305,6 +306,40 @@ describe('getParameterInAncestor()', () => {
   });
 });
 
+describe('computeTraceLink()', () => {
+  const linkPatterns = [
+    {
+      type: 'traces',
+      url: 'http://example.com/?myKey=#{traceID}',
+      text: 'first link (#{traceID})',
+    },
+    {
+      type: 'traces',
+      url: 'http://example.com/?myKey=#{traceID}&myKey=#{myKey}',
+      text: 'second link (#{myKey})',
+    },
+  ].map(processLinkPattern);
+
+  const trace = {
+    processes: [],
+    traceID: 'trc1',
+    spans: [],
+    startTime: 1000,
+    endTime: 2000,
+    duration: 1000,
+    services: [],
+  };
+
+  it('correctly computes links', () => {
+    expect(computeTraceLink(linkPatterns, trace)).toEqual([
+      {
+        url: 'http://example.com/?myKey=trc1',
+        text: 'first link (trc1)',
+      },
+    ]);
+  });
+});
+
 describe('computeLinks()', () => {
   const linkPatterns = [
     {

packages/jaeger-ui/src/model/link-patterns.tsx

@@ -13,10 +13,11 @@
 // limitations under the License.
 
 import _uniq from 'lodash/uniq';
+import memoize from 'lru-memoize';
 import { getConfigValue } from '../utils/config/get-config';
 import { getParent } from './span';
 import { TNil } from '../types';
-import { Span, Link, KeyValuePair } from '../types/trace';
+import { Span, Link, KeyValuePair, Trace } from '../types/trace';
 
 const parameterRegExp = /#\{([^{}]*)\}/g;
 
@@ -35,6 +36,8 @@ type ProcessedLinkPattern = {
   parameters: string[];
 };
 
+type TLinksRV = { url: string; text: string }[];
+
 function getParamNames(str: string) {
   const names = new Set<string>();
   str.replace(parameterRegExp, (match, name) => {
@@ -139,6 +142,37 @@ function callTemplate(template: ProcessedTemplate, data: any) {
   return template.template(data);
 }
 
+export function computeTraceLink(linkPatterns: ProcessedLinkPattern[], trace: Trace) {
+  const result: TLinksRV = [];
+  const validKeys = (Object.keys(trace) as (keyof Trace)[]).filter(
+    key => typeof trace[key] === 'string' || trace[key] === 'number'
+  );
+
+  linkPatterns
+    .filter(pattern => pattern.type('traces'))
+    .forEach(pattern => {
+      const parameterValues: Record<string, any> = {};
+      const allParameters = pattern.parameters.every(parameter => {
+        const key = parameter as keyof Trace;
+        if (validKeys.includes(key)) {
+          // At this point is safe to access to trace object using parameter variable because
+          // we validated parameter against validKeys, this implies that parameter a keyof Trace.
+          parameterValues[parameter] = trace[key];
+          return true;
+        }
+        return false;
+      });
+      if (allParameters) {
+        result.push({
+          url: callTemplate(pattern.url, parameterValues),
+          text: callTemplate(pattern.text, parameterValues),
+        });
+      }
+    });
+
+  return result;
+}
+
 export function computeLinks(
   linkPatterns: ProcessedLinkPattern[],
   span: Span,
@@ -203,7 +237,16 @@ export function createGetLinks(linkPatterns: ProcessedLinkPattern[], cache: Weak
   };
 }
 
-export default createGetLinks(
-  (getConfigValue('linkPatterns') || []).map(processLinkPattern).filter(Boolean),
-  new WeakMap()
+const processedLinks: ProcessedLinkPattern[] = (getConfigValue('linkPatterns') || [])
+  .map(processLinkPattern)
+  .filter(Boolean);
+
+export const getTraceLinks: (trace: Trace | undefined) => TLinksRV = memoize(10)(
+  (trace: Trace | undefined) => {
+    const result: TLinksRV = [];
+    if (!trace) return result;
+    return computeTraceLink(processedLinks, trace);
+  }
 );
+
+export default createGetLinks(processedLinks, new WeakMap());

packages/jaeger-ui/src/model/transform-trace-data.test.js

@@ -0,0 +1,55 @@
+// Copyright (c) 2019 The Jaeger Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { orderTags, deduplicateTags } from './transform-trace-data';
+
+describe('orderTags()', () => {
+  it('correctly orders tags', () => {
+    const orderedTags = orderTags(
+      [
+        { key: 'b.ip', value: '8.8.4.4' },
+        { key: 'http.Status_code', value: '200' },
+        { key: 'z.ip', value: '8.8.8.16' },
+        { key: 'a.ip', value: '8.8.8.8' },
+        { key: 'http.message', value: 'ok' },
+      ],
+      ['z.', 'a.', 'HTTP.']
+    );
+    expect(orderedTags).toEqual([
+      { key: 'z.ip', value: '8.8.8.16' },
+      { key: 'a.ip', value: '8.8.8.8' },
+      { key: 'http.message', value: 'ok' },
+      { key: 'http.Status_code', value: '200' },
+      { key: 'b.ip', value: '8.8.4.4' },
+    ]);
+  });
+});
+
+describe('deduplicateTags()', () => {
+  it('deduplicates tags', () => {
+    const tagsInfo = deduplicateTags([
+      { key: 'b.ip', value: '8.8.4.4' },
+      { key: 'b.ip', value: '8.8.8.8' },
+      { key: 'b.ip', value: '8.8.4.4' },
+      { key: 'a.ip', value: '8.8.8.8' },
+    ]);
+
+    expect(tagsInfo.tags).toEqual([
+      { key: 'b.ip', value: '8.8.4.4' },
+      { key: 'b.ip', value: '8.8.8.8' },
+      { key: 'a.ip', value: '8.8.8.8' },
+    ]);
+    expect(tagsInfo.warnings).toEqual(['Duplicate tag "b.ip:8.8.4.4"']);
+  });
+});

packages/jaeger-ui/src/model/transform-trace-data.tsx

@@ -15,12 +15,14 @@
 import _isEqual from 'lodash/isEqual';
 
 import { getTraceSpanIdsAsTree } from '../selectors/trace';
+import { getConfigValue } from '../utils/config/get-config';
 import { KeyValuePair, Span, SpanData, Trace, TraceData } from '../types/trace';
 import TreeNode from '../utils/TreeNode';
 
-function deduplicateTags(spanTags: Array<KeyValuePair>) {
+// exported for tests
+export function deduplicateTags(spanTags: KeyValuePair[]) {
   const warningsHash: Map<string, string> = new Map<string, string>();
-  const tags: Array<KeyValuePair> = spanTags.reduce<Array<KeyValuePair>>((uniqueTags, tag) => {
+  const tags: KeyValuePair[] = spanTags.reduce<KeyValuePair[]>((uniqueTags, tag) => {
     if (!uniqueTags.some(t => t.key === tag.key && t.value === tag.value)) {
       uniqueTags.push(tag);
     } else {
@@ -32,6 +34,37 @@ function deduplicateTags(spanTags: Array<KeyValuePair>) {
   return { tags, warnings };
 }
 
+// exported for tests
+export function orderTags(spanTags: KeyValuePair[], topPrefixes?: string[]) {
+  const orderedTags: KeyValuePair[] = spanTags.slice();
+  const tp = (topPrefixes || []).map((p: string) => p.toLowerCase());
+
+  orderedTags.sort((a, b) => {
+    const aKey = a.key.toLowerCase();
+    const bKey = b.key.toLowerCase();
+
+    for (let i = 0; i < tp.length; i++) {
+      const p = tp[i];
+      if (aKey.startsWith(p) && !bKey.startsWith(p)) {
+        return -1;
+      }
+      if (!aKey.startsWith(p) && bKey.startsWith(p)) {
+        return 1;
+      }
+    }
+
+    if (aKey > bKey) {
+      return 1;
+    }
+    if (aKey < bKey) {
+      return -1;
+    }
+    return 0;
+  });
+
+  return orderedTags;
+}
+
 /**
  * NOTE: Mutates `data` - Transform the HTTP response data into the form the app
  * generally requires.
@@ -109,7 +142,7 @@ export default function transformTraceData(data: TraceData & { spans: SpanData[]
     span.tags = span.tags || [];
     span.references = span.references || [];
     const tagsInfo = deduplicateTags(span.tags);
-    span.tags = tagsInfo.tags;
+    span.tags = orderTags(tagsInfo.tags, getConfigValue('topTagPrefixes'));
     span.warnings = span.warnings.concat(tagsInfo.warnings);
     span.references.forEach((ref, index) => {
       const refSpan = spanMap.get(ref.spanID) as Span;