Merge pull request #355 from ExpediaDotCom/service-graph-updates

Service graph enhancements to include it in usb. Fix the missing root node issue due to circular dependencies. Remove unused trendsRowServiceGraphContainer.jsx.

Author: Jason Bulicek

public/assets.json

@@ -1 +1 @@
-{"app":{"css":"/bundles/style/app.css","js":"/bundles/js/app.js"},"commons":{"js":"/bundles/js/commons.js"},"serviceGraph":{"js":"/bundles/js/serviceGraph.js"},"serviceGraphContainer":{"js":"/bundles/js/serviceGraphContainer.js"},"servicePerformance":{"css":"/bundles/style/servicePerformance.css","js":"/bundles/js/servicePerformance.js"},"vendors~servicePerformance":{"js":"/bundles/js/vendors~servicePerformance.js"},"vendors~vis":{"js":"/bundles/js/vendors~vis.js"}}
+{"app":{"css":"/bundles/style/app.css","js":"/bundles/js/app.js"},"commons":{"js":"/bundles/js/commons.js"},"serviceGraph":{"js":"/bundles/js/serviceGraph.js"},"serviceGraphContainer":{"js":"/bundles/js/serviceGraphContainer.js"},"servicePerformance":{"css":"/bundles/style/servicePerformance.css","js":"/bundles/js/servicePerformance.js"},"vendors~serviceGraph~serviceGraphContainer":{"js":"/bundles/js/vendors~serviceGraph~serviceGraphContainer.js"},"vendors~servicePerformance":{"js":"/bundles/js/vendors~servicePerformance.js"},"vendors~vis":{"js":"/bundles/js/vendors~vis.js"}}

server/connectors/serviceGraph/haystack/serviceGraphConnector.js

@@ -24,15 +24,13 @@ const trendsFetcher = fetcher('serviceGraph');
 
 const connector = {};
 const serviceGraphUrl = config.connectors.serviceGraph.serviceGraphUrl;
-const WINDOW_SIZE_IN_SECS = config.connectors.serviceGraph.windowSizeInSecs;
 
 function fetchServiceGraph(from, to) {
     return trendsFetcher
         .fetch(`${serviceGraphUrl}?from=${from}&to=${to}`)
         .then(data => extractor.extractGraphs(data));
 }
 
-connector.getServiceGraph = () => Q.fcall(() => fetchServiceGraph(Date.now() - (WINDOW_SIZE_IN_SECS * 1000), Date.now()));
 connector.getServiceGraphForTimeLine = (from, to) => Q.fcall(() => fetchServiceGraph(from, to));
 
 module.exports = connector;

server/connectors/serviceGraph/stub/serviceGraphConnector.js

@@ -158,8 +158,6 @@ const serviceGraph = {
     ]
 };
 
-connector.getServiceGraph = () => Q.fcall(() => extractor.extractGraphs(serviceGraph));
-
 /* eslint-disable-next-line no-unused-vars */
 connector.getServiceGraphForTimeLine = (from, to) => Q.fcall(() => extractor.extractGraphs(serviceGraph));
 

server/routes/serviceGraphApi.js

@@ -24,12 +24,8 @@ const router = express.Router();
 
 router.get('/serviceGraph', (req, res, next) => {
     handleResponsePromise(res, next, 'svc_graph_SVC')(
-        () => {
-            if (req.query.from && req.query.to) {
-                return serviceGraphConnector.getServiceGraphForTimeLine(req.query.from, req.query.to);
-            }
-            return serviceGraphConnector.getServiceGraph();
-        }
+        () => serviceGraphConnector.getServiceGraphForTimeLine(req.query.from, req.query.to)
+
     );
 });
 

src/components/serviceGraph/serviceGraph.jsx

@@ -16,20 +16,14 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-
-import serviceGraphStore from './stores/serviceGraphStore';
 import ServiceGraphContainer from './serviceGraphContainer';
 import './serviceGraph.less';
+import serviceGraphStore from './stores/serviceGraphStore';
 
-const ServiceGraph = props => (
+const ServiceGraph =  () => (
     <section className="service-graph-panel container">
-        <ServiceGraphContainer store={serviceGraphStore} history={props.history}/>
+        <ServiceGraphContainer graphStore={serviceGraphStore} isUniversalSearch={false}/>
     </section>
 );
 
-ServiceGraph.propTypes = {
-    history: PropTypes.object.isRequired
-};
-
 export default ServiceGraph;

src/components/serviceGraph/serviceGraphContainer.jsx

@@ -16,21 +16,29 @@
  */
 
 import React from 'react';
-import { observer } from 'mobx-react';
+import {observer} from 'mobx-react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Loading from '../common/loading';
 import ServiceGraphResults from './serviceGraphResults';
 import Error from '../common/error';
+import Graph from './util/graph';
+import timeWindow from '../../utils/timeWindow';
 
 @observer
 export default class ServiceGraphContainer extends React.Component {
     static propTypes = {
-        store: PropTypes.object.isRequired,
-        history: PropTypes.object.isRequired,
-        isUniversalSearch: PropTypes.bool.isRequired
+        isUniversalSearch: PropTypes.bool,
+        search: PropTypes.object,
+        graphStore: PropTypes.object.isRequired
     };
 
+    static defaultProps = {
+        isUniversalSearch: false,
+        search: {},
+        serviceName: undefined
+    }
+
     /**
      *
      * @param graph
@@ -40,12 +48,17 @@ export default class ServiceGraphContainer extends React.Component {
      */
     static findRootNode(graph) {
         const dest = _.map(graph, edge => edge.destination.name);
-        const rootNodes = [];
+        let rootNodes = [];
         _.forEach(graph, (edge) => {
             if (!_.includes(dest, edge.source.name)) {
                 rootNodes.push(edge.source.name);
             }
         });
+        // No node found with outgoing connections only. Find the node with the most outgoing traffic as a root node.
+        if (_.isEmpty(rootNodes)) {
+            rootNodes = dest;
+        }
+
         const uniqRoots = _.uniq(rootNodes);
         const sortedRoots = _.sortBy(uniqRoots, (node) => {
             const outgoingEdges = _.filter(graph, edge => edge.source.name === node);
@@ -61,12 +74,34 @@ export default class ServiceGraphContainer extends React.Component {
             tabSelected: 1
         };
         this.toggleTab = this.toggleTab.bind(this);
-        this.props.store.fetchServiceGraph();
+    }
+
+    componentDidMount() {
+        this.fetchServiceGraphFromStore();
     }
 
     toggleTab(tabIndex) {
-        this.props.store.fetchServiceGraph();
         this.setState({tabSelected: tabIndex});
+        this.fetchServiceGraphFromStore();
+    }
+
+    fetchServiceGraphFromStore() {
+        const time = this.props.search.time;
+        const isCustomTimeRange = !!(time && time.from && time.to);
+        let activeWindow;
+
+        if (isCustomTimeRange) {
+            activeWindow = timeWindow.toCustomTimeRange(time.from, time.to);
+        } else {
+            activeWindow =  (time && time.preset) ? timeWindow.findMatchingPresetByShortName(time.preset) : timeWindow.defaultPreset;
+        }
+
+        const activeWindowTimeRange = timeWindow.toTimeRange(activeWindow.value);
+        const filterQuery = {
+            from: activeWindowTimeRange.from,
+            to: activeWindowTimeRange.until
+        };
+        this.props.graphStore.fetchServiceGraph(filterQuery);
     }
 
     render() {
@@ -80,31 +115,55 @@ export default class ServiceGraphContainer extends React.Component {
                                 <span className="h6">(will show list of partial graphs if missing data from services)</span>
                             </div>)
                     }
+                    {!this.props.search.serviceName &&
                     <div className="serviceGraph__tabs pull-right">
                         <ul className="nav nav-tabs">
                             {
-                                this.props.store.graphs.map(
+                                this.props.graphStore.graphs.map(
                                     (graph, index) => (
-                                        <li className={this.state.tabSelected === (index + 1) ? 'active ' : ''}>
-                                            <a role="button" className="serviceGraph__tab-link" tabIndex="-1" onClick={() => this.toggleTab(index + 1)} >{ServiceGraphContainer.findRootNode(graph)}</a>
+                                        <li className={this.state.tabSelected === (index + 1) ? 'active ' : ''} key={index.toString()}>
+                                            <a role="button" className="serviceGraph__tab-link" tabIndex="-1" onClick={() => this.toggleTab(index + 1)}>{ServiceGraphContainer.findRootNode(graph)}</a>
                                         </li>
                                     )
                                 )
                             }
                         </ul>
                     </div>
+                    }
                 </div>
                 <div>
-                { this.props.store.promiseState && this.props.store.promiseState.case({
-                    pending: () => <Loading className="serviceGraph__loading"/>,
-                    rejected: () => <Error />,
-                    fulfilled: () => ((this.props.store.graphs && this.props.store.graphs.length)
-                        ? <ServiceGraphResults serviceGraph={this.props.store.graphs[this.state.tabSelected - 1]} history={this.props.history} />
-                        : <Error />)
-                })
-                }
+                    {this.props.graphStore.promiseState && this.props.graphStore.promiseState.case({
+                        pending: () => <Loading className="serviceGraph__loading"/>,
+                        rejected: () => <Error/>,
+                        fulfilled: () => ((this.props.graphStore.graphs && this.props.graphStore.graphs.length)
+                            ? <FilteredServiceGraphResults graphs={this.props.graphStore.graphs} serviceName={this.props.search.serviceName} tabSelected={this.state.tabSelected}/>
+                            : <Error/>)
+                    })
+                    }
                 </div>
-            </section>
-        );
+            </section>);
     }
 }
+
+function FilteredServiceGraphResults(props) {
+    if (!props.serviceName) {
+        return (<ServiceGraphResults serviceGraph={props.graphs[props.tabSelected - 1]}/>);
+    }
+    const result = _.find(props.graphs, g => _.includes(Graph.buildGraph(g).allNodes(), props.serviceName));
+    if (typeof result !== 'undefined') {
+        const filtered = _.filter(result, edge => edge.source.name === props.serviceName || edge.destination.name === props.serviceName);
+        return (<ServiceGraphResults serviceGraph={filtered}/>);
+    }
+    return (<Error errorMessage="ServiceGraph data not found for the given time frame."/>);
+}
+
+FilteredServiceGraphResults.propTypes = {
+    graphs: PropTypes.object.isRequired,
+    serviceName: PropTypes.string,
+    tabSelected: PropTypes.number
+};
+
+FilteredServiceGraphResults.defaultProps = {
+    serviceName: undefined,
+    tabSelected: 0
+};

src/components/serviceGraph/serviceGraphResults.jsx

@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import {PropTypes as MobxPropTypes} from 'mobx-react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Vizceral from 'vizceral-react';
@@ -27,7 +28,10 @@ import './serviceGraph.less';
 
 export default class ServiceGraphResults extends React.Component {
     static propTypes = {
-        serviceGraph: PropTypes.object.isRequired
+        serviceGraph: PropTypes.oneOfType([
+            MobxPropTypes.observableArray.isRequired,
+            PropTypes.array
+        ]).isRequired
     };
 
     static getNodeDisplayDetails(errorRate) {

src/components/serviceGraph/stores/serviceGraphStore.js

@@ -21,31 +21,16 @@ import {ErrorHandlingStore} from '../../../stores/errorHandlingStore';
 
 export class ServiceGraphStore extends ErrorHandlingStore {
     @observable graphs = [];
-    @observable promiseState = null ;
+    @observable promiseState = null;
+    @observable filterQuery = null;
 
-    @observable filteredGraphs  = [];
-    @observable filterQuery = {};
-
-    @action fetchServiceGraph() {
+    @action fetchServiceGraph(filterQuery) {
         this.promiseState = fromPromise(
-            axios
-                .get('/api/serviceGraph')
-                .then((result) => {
-                    this.graphs = result.data;
-                })
-                .catch((result) => {
-                    ServiceGraphStore.handleError(result);
-                })
-        );
-    }
-
-    @action fetchServiceGraphForTimeline(filterQuery) {
-        this.filteredGraphPromiseState = fromPromise(
             axios
                 .get(`/api/serviceGraph?from=${filterQuery.from}&to=${filterQuery.to}`)
                 .then((result) => {
                     this.filterQuery = filterQuery;
-                    this.filteredGraphs = result.data;
+                    this.graphs = result.data;
                 })
                 .catch((result) => {
                     ServiceGraphStore.handleError(result);

src/components/serviceGraph/trendsRowServiceGraphContainer.jsx

@@ -20,12 +20,10 @@ import {observer} from 'mobx-react';
 import CountGraph from './countGraph';
 import DurationGraph from './durationGraph';
 import SuccessGraph from './successGraph';
-import TrendsRowServiceGraphContainer from '../../../serviceGraph/trendsRowServiceGraphContainer';
 @observer
 export default class GraphContainer extends React.Component {
     static propTypes = {
-        trendsStore: PropTypes.object.isRequired,
-        serviceName: PropTypes.string.isRequired
+        trendsStore: PropTypes.object.isRequired
     };
     render() {
         const {
@@ -47,7 +45,6 @@ export default class GraphContainer extends React.Component {
                 <CountGraph countPoints={count} successPoints={successCount} failurePoints={failureCount} from={from} until={until}/>
                 <DurationGraph meanPoints={meanDuration} tp95Points={tp95Duration} tp99Points={tp99Duration} from={from} until={until} />
                 <SuccessGraph successCount={successCount} failureCount={failureCount} from={from} until={until} />
-                <TrendsRowServiceGraphContainer serviceName={this.props.serviceName} from={from} to={until} />
             </div>
         );
     }