Development: Related Traces Feature (#354)

* duplicated trends tab in trace details

* changed names of duplicated tab

* server configuration file

* created proof of concept tab for traces related by trace id

* implemented filter by time, visitor id, & new logic to prevent relation by fields that are not part of the trace

* small fix for traceId not appearing to be searchable

* adapted to serviceName to universal search in relatedTraces

* minor change

* fixed bug where the value of x-ha- tags where not included in related traces query, plus additional features

* changed error throwing mechanism, fixed unselected option

* removed searchableKeysStore dependency from traceDetailsStore, removed uiState dependency from relatedTraces components

* migrated trace details config to base file, adapted minor fixes

* hides relatedTraces tab when it isn't configured in base.js

* implemented suggested features from virtual meeting

* moved trace details tests into own describe, fixed proptypes issue in tests

* fixed react modal issue and universal search warning

* fixed react-ga warning in traces test

* mocked backend service to resolve all warning messages in universal test

* added timeline route in mockadapter to resolve test warnings

* wrote most coverage for related traces feature

* added full test coverage to related traces components

* added relatedTraces stub and traceDetailsStore tests

* cleaning stuff

* small commit for cleaning purposes

* changed small documentation comment

* changed more comments

Author: jeriscc

server/config/base.js

@@ -130,6 +130,14 @@ module.exports = {
             longName: '30 days',
             value: 30 * 24 * 60 * 60 * 1000
         }
+    ],
+
+    relatedTracesOptions: [
+        {
+            fieldTag: 'url2',
+            propertyToMatch: 'url2',
+            fieldDescription: 'test trait'
+        }
     ]
 
     // use if you need SAML back SSO auth

server/routes/index.js

@@ -46,7 +46,8 @@ router.get('*', (req, res) => {
         tracesTimePresetOptions: config.connectors.traces.timePresetOptions,
         timeWindowPresetOptions: config.timeWindowPresetOptions,
         tracesTTL: config.connectors.traces.ttl,
-        trendsTTL: config.connectors.trends.ttl
+        trendsTTL: config.connectors.trends.ttl,
+        relatedTracesOptions: config.relatedTracesOptions
     });
 
     onFinished(res, () => {

server/views/index.pug

@@ -27,7 +27,8 @@ html
             tracesTimePresetOptions: !{JSON.stringify(tracesTimePresetOptions || ['5m', '15m', '1h', '4h', '12h', '24h', '3d'])},
             timeWindowPresetOptions: !{JSON.stringify(timeWindowPresetOptions || [{shortName: '5m', longName: '5 minutes', value: 5 * 60 * 1000}, {shortName: '15m', longName: '15 minutes', value: 15 * 60 * 1000}, {shortName: '1h', longName: '1 hour', value: 60 * 60 * 1000}, {shortName: '6h', longName: '6 hours', value: 6 * 60 * 60 * 1000}, {shortName: '12h', longName: '12 hours', value: 12 * 60 * 60 * 1000}, {shortName: '24h', longName: '24 hours', value: 24 * 60 * 60 * 1000}, {shortName: '3d', longName: '3 days', value: 3 * 24 * 60 * 60 * 1000}, {shortName: '7d', longName: '7 days', value: 7 * 24 * 60 * 60 * 1000}, {shortName: '30d', longName: '30 days', value: 30 * 24 * 60 * 60 * 1000}])},
             tracesTTL: !{JSON.stringify(tracesTTL || -1)},
-            trendsTTL: !{JSON.stringify(trendsTTL || -1)}
+            trendsTTL: !{JSON.stringify(trendsTTL || -1)},
+            relatedTracesOptions: !{JSON.stringify(relatedTracesOptions || [])}
         }
     script(async, defer, src = bundleCommonsJsPath)
     script(async, defer, src = bundleAppJsPath)

src/components/common/modal.jsx

@@ -38,7 +38,7 @@ const modalStyles = {
 };
 
 const ModalView = ({serviceName, title, isOpen, closeModal, children}) => (
-    <Modal isOpen={isOpen} onRequestClose={closeModal} style={modalStyles} closeTimeoutMS={200} contentLabel={'Modal'}>
+    <Modal isOpen={isOpen} onRequestClose={closeModal} style={modalStyles} closeTimeoutMS={200} contentLabel={'Modal'} ariaHideApp={false}>
         <header className="clearfix">
             <div className="pull-left">
                 <div>{serviceName && (<span className={`service-spans label ${colorMapper.toBackgroundClass(serviceName)}`}>{serviceName}</span>)}</div>

src/components/traces/details/relatedTraces/relatedTracesRow.jsx

@@ -0,0 +1,117 @@
+/*
+ * Copyright 2018 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 from 'react';
+import PropTypes from 'prop-types';
+import {PropTypes as MobxPropTypes} from 'mobx-react';
+
+import colorMapper from '../../../../utils/serviceColorMapper';
+import linkBuilder from '../../../../utils/linkBuilder';
+import formatters from '../../../../utils/formatters';
+
+export default class RelatedTracesRow extends React.Component {
+    static propTypes = {
+        traceId: PropTypes.string.isRequired,
+        serviceName: PropTypes.string.isRequired,
+        operationName: PropTypes.string.isRequired,
+        spanCount: PropTypes.number.isRequired,
+        startTime: PropTypes.number.isRequired,
+        rootError: PropTypes.bool.isRequired,
+        services: MobxPropTypes.observableArray, // eslint-disable-line react/require-default-props
+        duration: PropTypes.number.isRequired,
+        isUniversalSearch: PropTypes.bool.isRequired
+    };
+
+    static openTrendDetailInNewTab(traceId, serviceName, operationName, isUniversalSearch) {
+        let traceUrl = '';
+        if (isUniversalSearch) {
+            const search = {traceId}; // TODO add specific time for trace
+            traceUrl = linkBuilder.withAbsoluteUrl(linkBuilder.universalSearchTracesLink(search));
+        } else {
+            traceUrl = linkBuilder.withAbsoluteUrl(linkBuilder.createTracesLink({
+                serviceName,
+                operationName,
+                traceId
+            }));
+        }
+
+        const tab = window.open(traceUrl, '_blank');
+        tab.focus();
+    }
+
+    // Formatters copied from trace ResultsTable.jsx and then refactored into jsx.
+    // START TIME
+    static timeColumnFormatter(startTime) {
+        return (<div>
+                    <div className="table__primary">{formatters.toTimeago(startTime)}</div>
+                    <div className="table__secondary">{formatters.toTimestring(startTime)}</div>
+                </div>);
+    }
+    // ROOT SUCCESS
+    static errorFormatter(cell) {
+        const status = cell ? 'error' : 'success';
+        return (<div className="table__status">
+            <img src={`/images/${status}.svg`} alt={status} height="24" width="24" />
+        </div>);
+    }
+    // TOTAL DURATION
+    static totalDurationColumnFormatter(duration) {
+        return <div className="table__primary-duration text-right">{formatters.toDurationString(duration)}</div>;
+    }
+    // SPAN COUNT
+    static handleServiceList(services) {
+        const serviceList = services.slice(0, 2).map(svc =>
+            <span key={svc.name} className={'service-spans label ' + colorMapper.toBackgroundClass(svc.name)}>{svc.name +' x' + svc.spanCount}</span> // eslint-disable-line
+        );
+
+        if (services.length > 2) {
+            serviceList.push(<span key="extra">...</span>);
+        }
+        return serviceList;
+    }
+    static spanColumnFormatter(spanCount, services) {
+        return (<div>
+                    <div className="table__primary">{spanCount}</div>
+                    <div>{RelatedTracesRow.handleServiceList(services)}</div>
+                </div>);
+    }
+
+
+    render() {
+        const {traceId, serviceName, operationName, spanCount, services, startTime, rootError, duration, isUniversalSearch} = this.props;
+
+        return (
+            <tr onClick={() => RelatedTracesRow.openTrendDetailInNewTab(traceId, serviceName, operationName, isUniversalSearch)}>
+                <td className="trace-trend-table_cell">
+                    {RelatedTracesRow.timeColumnFormatter(startTime)}
+                </td>
+                <td className="trace-trend-table_cell">
+                <div className={`service-spans label label-default ${colorMapper.toBackgroundClass(serviceName)}`}>{serviceName}</div>
+                    <div className="trace-trend-table_op-name">{operationName}</div>
+                </td>
+                <td className="trace-trend-table_cell">
+                    {RelatedTracesRow.errorFormatter(rootError)}
+                </td>
+                <td className="trace-trend-table_cell">
+                    {RelatedTracesRow.spanColumnFormatter(spanCount, services)}
+                </td>
+                <td className="trace-trend-table_cell">
+                    {RelatedTracesRow.totalDurationColumnFormatter(duration)}
+                </td>
+            </tr>
+        );
+    }
+}

src/components/traces/details/relatedTraces/relatedTracesTab.jsx

@@ -0,0 +1,86 @@
+/* eslint-disable react/prefer-stateless-function */
+/*
+ * Copyright 2018 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 from 'react';
+import PropTypes from 'prop-types';
+import {PropTypes as MobxPropTypes} from 'mobx-react';
+
+import RelatedTracesRow from './relatedTracesRow';
+import linkBuilder from '../../../../utils/linkBuilder';
+
+export default class relatedTracesTab extends React.Component {
+    static propTypes = {
+        searchQuery: PropTypes.object.isRequired,
+        relatedTraces: MobxPropTypes.observableArray, // eslint-disable-line react/require-default-props
+        isUniversalSearch: PropTypes.bool.isRequired
+    };
+
+    constructor(props) {
+        super(props);
+        const numDisplayedTraces = 5;
+        this.state = {
+            numDisplayedTraces // compute the fields of the original trace
+        };
+
+        this.showMoreTraces = this.showMoreTraces.bind(this);
+    }
+
+    showMoreTraces() {
+        const traceUrl = linkBuilder.withAbsoluteUrl(linkBuilder.universalSearchTracesLink(this.props.searchQuery));
+
+        const tab = window.open(traceUrl, '_blank');
+        tab.focus();
+    }
+
+    render() {
+        const {relatedTraces, isUniversalSearch} = this.props;
+        const {numDisplayedTraces} = this.state;
+
+        const relatedTracesList = relatedTraces.slice(0, numDisplayedTraces);
+
+        return (
+            <article>
+                <table className="trace-trend-table">
+                    <thead className="trace-trend-table_header">
+                        <tr>
+                            <th width="20" className="trace-trend-table_cell">Start Time</th>
+                            <th width="30" className="trace-trend-table_cell">Root</th>
+                            <th width="20" className="trace-trend-table_cell">Root Success</th>
+                            <th width="60" className="trace-trend-table_cell">Span Count</th>
+                            <th width="20" className="trace-trend-table_cell text-right">Total Duration</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    {
+                        relatedTracesList.map(relatedTrace => (
+                            <RelatedTracesRow
+                                key={relatedTrace.traceId}
+                                {...relatedTrace}
+                                isUniversalSearch={isUniversalSearch}
+                            />
+                        ))
+                    }
+                    </tbody>
+                </table>
+                <span style={{position: 'absolute', marginLeft: '10px', marginTop: '5px'}}> {relatedTraces.length > numDisplayedTraces ? `5 of ${relatedTraces.length} Results` : 'End of Results'}</span>
+                <div style={{textAlign: 'center', marginTop: '15px'}}>
+                    <a role="button" className="btn btn-default" onClick={this.showMoreTraces} tabIndex="-1">{relatedTraces.length > numDisplayedTraces ? `Show All(${relatedTraces.length}) in Universal` : 'View in Universal Search' }</a>
+                </div>
+            </article>
+        );
+    }
+}

src/components/traces/details/relatedTraces/relatedTracesTabContainer.jsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright 2018 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 from 'react';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+
+import Loading from '../../../common/loading';
+import Error from '../../../common/error';
+import RelatedTracesTab from './relatedTracesTab';
+import { toPresetDisplayText } from '../../utils/presets';
+
+@observer
+export default class RelatedTracesTabContainer extends React.Component {
+    static propTypes = {
+        traceId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+        store: PropTypes.object.isRequired,
+        isUniversalSearch: PropTypes.bool.isRequired
+    };
+
+    static timePresetOptions = (window.haystackUiConfig && window.haystackUiConfig.tracesTimePresetOptions);
+
+    static fieldOptions = (window.haystackUiConfig && window.haystackUiConfig.relatedTracesOptions);
+
+    constructor(props) {
+        super(props);
+        const selectedFieldIndex = null;
+        const selectedTimeIndex = 2; // The default time preset is the third
+        this.state = {
+            selectedFieldIndex,
+            selectedTimeIndex,
+            /** 
+             * The following computes a dictionary tags of all spans of this trace
+             * This computation relies that the spans have already been calculated in the traceDetailsStore, which happens
+             * when the Timeline View (which is default) is viewed, and fetchTraceDetails has complete.
+             */
+            tags: this.props.store.tags
+        };
+
+        this.handleTimeChange = this.handleTimeChange.bind(this);
+        this.handleFieldChange = this.handleFieldChange.bind(this);
+        this.fetchRelatedTraces = this.fetchRelatedTraces.bind(this);
+    }
+
+    componentWillMount() {
+        this.fetchRelatedTraces(this.state.selectedTimeIndex);
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (this.state.selectedTimeIndex !== prevState.selectedTimeIndex
+            || this.state.selectedFieldIndex !== prevState.selectedFieldIndex) {
+            this.fetchRelatedTraces();
+        }
+    }
+
+    fetchRelatedTraces() {
+        // If the field is unselected
+        if (this.state.selectedFieldIndex === null) {
+            return this.props.store.rejectRelatedTracesPromise('Field is not selected');
+        }
+
+        const chosenField = RelatedTracesTabContainer.fieldOptions[this.state.selectedFieldIndex];
+
+        // Rejects API promise if the trace does not have the chosen field
+        if (!this.state.tags[chosenField.propertyToMatch] && chosenField.propertyToMatch !== 'traceId') {
+            return this.props.store.rejectRelatedTracesPromise('This trace does not have the chosen field');
+        }
+
+        // Builds Query
+        const query =  {
+            serviceName: '',
+            [chosenField.fieldTag]: this.props[chosenField.propertyToMatch] || this.state.tags[chosenField.propertyToMatch],
+            timePreset: RelatedTracesTabContainer.timePresetOptions[this.state.selectedTimeIndex]
+        };
+
+        return this.props.store.fetchRelatedTraces(query);
+    }r
+    
+    handleFieldChange(event) {
+        const selectedFieldIndex = event.target.value;
+        this.setState({
+            selectedFieldIndex
+        });
+    }
+
+    handleTimeChange(event) {
+        const selectedTimeIndex = event.target.value;
+        this.setState({
+            selectedTimeIndex
+        });
+    }
+
+    render() {
+        const { store, isUniversalSearch } = this.props;
+        const { selectedTimeIndex, selectedFieldIndex} = this.state;
+
+        return (
+            <section>
+                <div className="text-left">
+                    <span>Relate Traces by: </span>
+                    <select id="field" className="time-range-selector" value={selectedFieldIndex || ''} onChange={this.handleFieldChange}>
+                            {!selectedFieldIndex ? <option key="empty" value="" /> : null}
+                            {RelatedTracesTabContainer.fieldOptions.map((fieldOp, index) => (
+                                <option
+                                    key={fieldOp.fieldTag}
+                                    value={index}
+                                >{fieldOp.fieldDescription}</option>))}
+                    </select>
+                    <span style={{paddingLeft: '5px'}}>of the </span>
+                    <select id="time" className="time-range-selector" value={selectedTimeIndex} onChange={this.handleTimeChange}>
+                        {RelatedTracesTabContainer.timePresetOptions.map((preset, index) => (
+                            <option
+                                key={preset}
+                                value={index}
+                            >{toPresetDisplayText(preset)}</option>))}
+                    </select>
+                </div>
+                { store.relatedTracesPromiseState && store.relatedTracesPromiseState.case({
+                        pending: () => <Loading />,
+                        rejected: reason => <Error errorMessage={reason}/>,
+                        fulfilled: () => ((store.relatedTraces && store.relatedTraces.length)
+                                ? <RelatedTracesTab searchQuery={store.searchQuery} relatedTraces={store.relatedTraces} isUniversalSearch={isUniversalSearch}/>
+                                : <Error errorMessage="No related traces found"/>)
+                    })
+                }
+            </section>
+        );
+    }
+}