Add tab to link to external sites via config

server/config/base.js

@@ -218,18 +218,26 @@ module.exports = {
             propertyToMatch: 'url2',
             fieldDescription: 'test trait'
         }
-    ],
+    ]
 
-    tagValuesTransformMap: {
-        success: {
-            type: 'boolean'
-        },
-        url2: {
-            type: 'link',
-            urlTemplate: 'https://www.google.com/search?q=#{value}',
-            textTemplate: '[Google] #{value}'
-        }
-    }
+    // externalLinking: [
+    //     {
+    //         key: 'serviceName', // Searchable key to add to external link list
+    //         url: 'https://my-splunk-url.com/app/search/search?q=#{key}=#{value}',
+    //         label: 'Splunk-Instance-1'
+    //     },
+    //     {
+    //         key: 'tag',
+    //         tagKey: 'external-link-key', // Tag to create a link from in the span tag list
+    //         url: 'https://my-other-splunk-url.com/app/search/search?q=#{key}=#{value}',
+    //         label: 'Splunk-Instance-2'
+    //     },
+    //     {
+    //         key: 'traceId', // Include traceId to add external link in trace context view
+    //         url: 'https://my-splunk-url.com/app/search/search?q=traceId=#{value}',
+    //         label: 'Splunk-Instance-1'
+    //     }
+    // ]
 
     // use if you need SAML back SSO auth
     //

server/connectors/traces/stub/tracesConnector.js

@@ -224,7 +224,12 @@ const trace = () => {
             startTime: 1504784384000 + 2560000 + 105000,
             duration: 105000,
             logs: [],
-            tags: []
+            tags: [
+                {
+                    key: 'external-link-key',
+                    value: 'external-link-value'
+                }
+            ]
         },
         {
             traceId,

server/routes/index.js

@@ -53,7 +53,7 @@ router.get('*', (req, res) => {
         tracesTTL: config.connectors.traces && config.connectors.traces.ttl,
         trendsTTL: config.connectors.trends && config.connectors.trends.ttl,
         relatedTracesOptions: config.relatedTracesOptions,
-        tagValuesTransformMap: config.tagValuesTransformMap,
+        externalLinking: config.externalLinking,
         usingZipkinConnector: config.connectors.traces && config.connectors.traces.connectorName === 'zipkin',
         enableBlobs: config.connectors.blobs && config.connectors.blobs.enableBlobs,
         blobsUrl: config.connectors.blobs && config.connectors.blobs.blobsUrl

server/views/index.pug

@@ -29,7 +29,7 @@ html
             tracesTTL: !{JSON.stringify(tracesTTL || -1)},
             trendsTTL: !{JSON.stringify(trendsTTL || -1)},
             relatedTracesOptions: !{JSON.stringify(relatedTracesOptions || [])},
-            tagValuesTransformMap: !{JSON.stringify(tagValuesTransformMap || {})},
+            externalLinking: !{JSON.stringify(externalLinking || [])},
             usingZipkinConnector: !{JSON.stringify(usingZipkinConnector || false)},
             enableBlobs: !{JSON.stringify(enableBlobs || false)},
             blobsUrl: !{JSON.stringify(blobsUrl || '')},

src/components/traces/details/timeline/tagsTable.jsx

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import blobUtil from '../../../../utils/blobUtil';
-import transform from '../../../../utils/tagValuesTransformer';
+import {tagTransformer} from '../../../../utils/externalLinkFormatter';
 
 const TagsTable = ({tags}) => {
     const sortedTags = _.sortBy(tags, [(tag) => tag.key.toLowerCase()]);
@@ -43,7 +43,7 @@ const TagsTable = ({tags}) => {
                                         <span className="ti-new-window" /> <span>{blobUtil.formatBlobTagValue(tag.value, blobsUrl)}</span>
                                     </a>
                                 ) : (
-                                    <span>{transform(tag)}</span>
+                                    <span>{tagTransformer(tag)}</span>
                                 )}
                             </td>
                         </tr>

src/components/traces/details/traceDetails.jsx

@@ -15,7 +15,7 @@
  *
  */
 
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
 import {observer} from 'mobx-react';
 import Clipboard from 'react-copy-to-clipboard';
@@ -26,6 +26,7 @@ import LatencyCostTabContainer from './latency/latencyCostTabContainer';
 import TrendsTabContainer from './trends/trendsTabContainer';
 import RelatedTracesTabContainer from './relatedTraces/relatedTracesTabContainer';
 
+import { constructExternalLinksList } from '../../../utils/externalLinkFormatter';
 import rawTraceStore from '../stores/rawTraceStore';
 import latencyCostStore from '../stores/latencyCostStore';
 import linkBuilder from '../../../utils/linkBuilder';
@@ -64,13 +65,32 @@ const TraceDetails = observer(({traceId, traceDetailsStore}) => {
         setTabSelected(tabIndex);
     };
 
+    const linkWrapperRef = useRef(null);
+    const [linksListOpen, setLinksListOpen] = useState(false);
+
+    const handleOutsideClick = (e) => {
+        if (linkWrapperRef.current && !linkWrapperRef.current.contains(e.target)) {
+            document.removeEventListener('mousedown', handleOutsideClick);
+            setLinksListOpen(false);
+        }
+    };
+
+    const handleTabSelection = () => {
+        if (!linksListOpen) {
+            document.addEventListener('mousedown', handleOutsideClick);
+            setLinksListOpen(true);
+        }
+    };
+
     const search = {query_1: {traceId}}; // TODO add specific time for trace
     const traceUrl = linkBuilder.withAbsoluteUrl(linkBuilder.universalSearchTracesLink(search));
     const rawTraceDataLink = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(traceDetailsStore.spans))}`;
     const handleCopy = () => {
         setShowCopied(true);
         setTimeout(() => setShowCopied(false), 2000);
     };
+    const externalLinks = constructExternalLinksList('traceId', traceId);
+
 
     return (
         <section className="table-row-details">
@@ -112,6 +132,18 @@ const TraceDetails = observer(({traceId, traceDetailsStore}) => {
                             <li className={tabSelected === 4 ? 'active' : ''}>
                                 <a role="button" id="related-view" tabIndex="-1" onClick={() => toggleTab(4)} >Related Traces</a>
                             </li>) : null }
+                        { externalLinks && externalLinks.length > 0 ? (
+                            <li>
+                                <a role="button" tabIndex="-1" onClick={() => handleTabSelection()}>
+                                    <span className="usb-tab-icon ti-new-window" />
+                                    <span>External Links</span> <span className="caret" />
+                                </a>
+                                <div ref={linkWrapperRef} className={linksListOpen ? 'dropdown open' : 'dropdown'}>
+                                    <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
+                                        {externalLinks}
+                                    </ul>
+                                </div>
+                            </li>) : null }
                     </ul>
                 </div>
             </div>

src/components/traces/details/traceDetails.less

@@ -184,4 +184,8 @@
 
 .btn:disabled {
   opacity: 1;
-}
+}
+
+.tag-link {
+  padding-left: @spacing-xs
+}

src/components/universalSearch/tabs/externalLinksList.jsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2020 Expedia, Inc.
+ *
+ *         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, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { constructExternalLinksList } from '../../../utils/externalLinkFormatter';
+
+function constructLinks(kvPairs) {
+    const externalLinks = (window.haystackUiConfig && window.haystackUiConfig.externalLinking) ? window.haystackUiConfig.externalLinking.map(link => link.key) : [];
+    const matches = externalLinks.filter(key => (Object.keys(kvPairs).includes(key)));
+    return matches.map(key => constructExternalLinksList(key, kvPairs[key]));
+}
+
+const ExternalLinksList = ({search}) => {
+    const filteredSearchKeys = Object.keys(search).filter(key => key !== 'time');
+
+    const searchKeyValuePairs = filteredSearchKeys.length && Object.assign(
+        ...filteredSearchKeys.map(query => (search[query])).flat()
+    );
+
+    const constructedLinks = constructLinks(searchKeyValuePairs);
+    const wrapperRef = useRef(null);
+    const [linksListOpen, setLinksListOpen] = useState(false);
+
+    const handleOutsideClick = (e) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+            document.removeEventListener('mousedown', handleOutsideClick);
+            setLinksListOpen(false);
+        }
+    };
+
+    const handleTabSelection = () => {
+        if (!linksListOpen) {
+            document.addEventListener('mousedown', handleOutsideClick);
+            setLinksListOpen(true);
+        }
+    };
+
+    if (constructedLinks && constructedLinks.length) {
+        return (
+            <li>
+                <a role="button" className="universal-search-bar-tabs__nav-text" tabIndex="-1" onClick={() => handleTabSelection()}>
+                    <span className="usb-tab-icon ti-new-window" />
+                    <span>External Links</span> <span className="caret" />
+                </a>
+                <div ref={wrapperRef} className={linksListOpen ? 'dropdown open' : 'dropdown'}>
+                    <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
+                        {constructedLinks}
+                    </ul>
+                </div>
+            </li>
+        );
+    }
+    return null;
+};
+
+ExternalLinksList.propTypes = {
+    search: PropTypes.object.isRequired
+};
+
+export default ExternalLinksList;

src/components/universalSearch/tabs/tabs.jsx

@@ -32,6 +32,7 @@ import serviceGraphState from './tabStores/serviceGraphStateStore';
 import servicePerformanceState from './tabStores/servicePerformanceStateStore';
 import serviceInsightsTabStateStore from './tabStores/serviceInsightsTabStateStore';
 import AlertCounter from '../../alerts/alertCounter';
+import ExternalLinksList from './externalLinksList';
 
 @observer
 export default class Tabs extends React.Component {
@@ -166,7 +167,12 @@ export default class Tabs extends React.Component {
             <article>
                 <section className="container">
                     <nav>
-                        <ul className="nav nav-tabs">{Tabs.tabs.map((tab) => TabSelector(tab))}</ul>
+                        <ul className="nav nav-tabs">
+                            {Tabs.tabs.map((tab) => TabSelector(tab))}
+                            <ExternalLinksList
+                                search={search}
+                            />
+                        </ul>
                     </nav>
                 </section>
                 <section className="universal-search-tab__content">

src/utils/externalLinkFormatter.jsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2020 Expedia Group
+ *
+ *         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 validUrl from './validUrl';
+
+const externalLinks = (window.haystackUiConfig && window.haystackUiConfig.externalLinking);
+
+export function constructExternalLinksList(linkType, linkValue) {
+    return externalLinks
+        .filter(link => link.key === linkType)
+        .map(link => {
+            const url = link.url.replace('#{key}', linkType).replace('#{value}', linkValue);
+
+            return (<li>
+                <a href={url} target="_blank">
+                    <span className="ti-new-window"/> <span>{link.label || 'No Label Provided'} <code>{linkType}: {linkValue}</code></span>
+                </a>
+            </li>);
+        });
+}
+
+/**
+ * The following transform functions take the tag object (from the span data) and
+ * transform configuration (from haystackUiConfig) as input and return jsx as output.
+ */
+
+/**
+ * Default Transform:
+ *
+ * Returns either a hyperlink of the tag value or just a normal tag value in a <span>,
+ * depending on whether the value is a valid url.
+ */
+
+function defaultTransform(tag) {
+    const value = tag.value;
+    return validUrl.isUrl(value) ?
+        (<a href={value} target="_blank">
+            <span className="ti-new-window"/> <span>{value}</span>
+        </a>) :
+        (<span>{`${value}`}</span>);
+}
+
+/**
+ * Returns either a hyperlink where the url is the pattern with '!{temp}'
+ * is replaced with the tag value.
+ */
+function linkTransform(tag, link) {
+    const value = tag.value;
+    const key = tag.key;
+    const url = link.url.replace('#{value}', value).replace('#{key}', key);
+    const label = link.label ? link.label.replace('#{tagKey}', tag.key) : value;
+
+    return (<span> {value}
+        <a className="tag-link" href={url} target="_blank">
+            <span className="ti-new-window"/> {label}
+        </a>
+    </span>);
+}
+
+const tagLinks = externalLinks ? externalLinks.filter(link => link.key === 'tag') : [];
+
+export function tagTransformer(tag) {
+    const tagLink = tagLinks.find(link => link.tagKey === tag.key);
+    if (tagLink) {
+        return linkTransform(tag, tagLink);
+    }
+    return defaultTransform(tag);
+}