Directed graph layout and presentation (#212)

* Prep the repo for separately developed components

Signed-off-by: Joe Farro <joef@uber.com>

* WIP - Very rough graph layout functionality

Signed-off-by: Joe Farro <joef@uber.com>

* Graph layout functionality is in solid shape

Outstanding:
* tests
* calculate edges via several workers when there are many edges

Signed-off-by: Joe Farro <joef@uber.com>

* Fix minor misc issues with plexus layout

Signed-off-by: Joe Farro <joef@uber.com>

* Fix uberinternal yarn.lock issues

Signed-off-by: Joe Farro <joef@uber.com>

* Fix uberinternal yarn.lock issues

Signed-off-by: Joe Farro <joef@uber.com>

* Upgrade react to 16.3.2

Signed-off-by: Joe Farro <joef@uber.com>

* Upgrade flow to 0.71.0

Signed-off-by: Joe Farro <joef@uber.com>

* Very rough React graph component

Signed-off-by: Joe Farro <joef@uber.com>

* Enable custom props for graph elements

Signed-off-by: Joe Farro <joef@uber.com>

* The graph refreshes when it gets new data

Signed-off-by: Joe Farro <joef@uber.com>

* Make the jaeger-ui package private

Signed-off-by: Joe Farro <joef@uber.com>

* Misc cleanup for plexus package.json

Signed-off-by: Joe Farro <joef@uber.com>

* Fix issues with plexus package.json

Signed-off-by: Joe Farro <joef@uber.com>

* Don't output a CSS file for plexus

Signed-off-by: Joe Farro <joef@uber.com>

* Increase plexus node spacing for neato layouts

Signed-off-by: Joe Farro <joef@uber.com>

* Update plexus to 0.0.1-dev.2

Signed-off-by: Joe Farro <joef@uber.com>

* Adding new issue and pull request template (#219)

Signed-off-by: Prakriti <prakritibansal98@gmail.com>

* plexus readme, remove `LayoutManager.dispose()`

Signed-off-by: Joe Farro <joef@uber.com>

* remove unecessary package

Signed-off-by: Joe Farro <joef@uber.com>

* Add more complex graphs to plexus demo

Signed-off-by: Joe Farro <joef@uber.com>

* Start the worker ID at 0

Signed-off-by: Joe Farro <joef@uber.com>

.flowconfig

@@ -3,6 +3,7 @@
 .*/node_modules/redux-form/.*
 .*/node_modules/react-motion/.*
 .*/node_modules/draft-js/.*
+.*/node_modules/nwb/.*
 
 [include]
 
@@ -12,4 +13,4 @@
 [options]
 
 [version]
-0.64.0
+0.71.0

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,18 @@
+<!--
+We appreciate your contribution to the Jaeger project! 👋🎉
+
+Before creating a pull request, please make sure:
+- Your PR is solving one problem
+- You have read the guide for contributing
+  - See https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
+- You signed all your commits (otherwise we won't be able to merge the PR)
+  - See https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md#sign-your-work
+- You added unit tests for the new functionality
+- You mention in the PR description which issue it is addressing, e.g. "Resolves #123"
+-->
+
+## Which problem is this PR solving?
+-
+
+## Short description of the changes
+-

.github/issue_template.md

@@ -1,39 +1,28 @@
 <!--
-If you are reporting a new issue, please make sure that we do not have any
-duplicates already open. You can ensure this by searching the issue list for
-this repository. If there is a duplicate, please close your issue and add a
-comment to the existing issue instead.
-
-If you suspect your issue is a bug, please edit your issue description to
-include the BUG REPORT INFORMATION shown below. If you fail to provide this
-information within 7 days, we cannot debug your issue and will close it. We
-will, however, reopen it if you later provide the information.
-
----------------------------------------------------
-BUG REPORT INFORMATION
----------------------------------------------------
-Use the commands below to provide key information from your environment:
-You do NOT have to include this information if this is a FEATURE REQUEST
+Welcome to the Jaeger project! 👋🎉
+
+- Please search for existing issues to avoid creating duplicate bugs/feature requests.
+- Please be respectful and considerate of others when commenting on issues.
+- Please provide as much information as possible so we all understand the issue.
+- If you only have a question, you may get a faster response by asking in
+    - our chat room https://gitter.im/jaegertracing/Lobby, or
+    - the forum https://groups.google.com/d/forum/jaeger-tracing
+    (but please don't double post)
 -->
 
-**Description**
+## Requirement - what kind of business use case are you trying to solve?
 
-<!--
-Briefly describe the problem you are having in a few paragraphs.
--->
-
-**Steps to reproduce the issue:**
-1.
-2.
-3.
-
-**Describe the results you received:**
+<!-- required section -->
 
+## Problem - what in Jaeger blocks you from solving the requirement?
 
-**Describe the results you expected:**
+<!-- required section -->
+<!-- If possible, describe the impact of the problem. -->
 
+## Proposal - what do you suggest to solve the problem or improve the existing situation?
 
-**Additional information you deem important (e.g. issue happens only occasionally):**
+<!-- It's ok if you don't have one. -->
 
+## Any open questions to address
 
-**Additional environment details (Browser, etc.):**
+<!-- Questions that should be answered before proceeding with implementation. -->

package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "license": "Apache-2.0",
   "devDependencies": {
     "babel-eslint": "^7.2.3",
     "eslint": "^4.5.0",
@@ -10,6 +11,7 @@
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.2.1",
+    "flow-bin": "^0.71.0",
     "glow": "^1.2.2",
     "husky": "^0.14.3",
     "lerna": "^2.10.2",
@@ -26,7 +28,7 @@
     "lint": "npm run eslint && npm run prettier && npm run flow && npm run check-license",
     "precommit": "lint-staged",
     "prettier":
-      "prettier --write '{.,scripts}/*.{js,json,md}' 'packages/*/src/**/*.{css,js,json,md}' 'packages/*/*.{css,js,json,md}'",
+      "prettier --write '{.,scripts}/*.{js,json,md}' 'packages/*/{src,demo/src}/**/*.{css,js,json,md}' 'packages/*/*.{css,js,json,md}'",
     "test": "lerna run test"
   },
   "prettier": {

packages/jaeger-ui/package.json

@@ -1,8 +1,9 @@
 {
+  "private": true,
   "name": "jaeger-ui",
   "version": "0.0.1",
   "main": "src/index.js",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "proxy": {
     "/api": {
       "target": "http://localhost:16686",
@@ -37,7 +38,6 @@
     "d3-scale": "^1.0.6",
     "dagre": "^0.7.4",
     "deep-freeze": "^0.0.1",
-    "flow-bin": "^0.64.0",
     "fuzzy": "^0.1.3",
     "global": "^4.3.2",
     "history": "^4.6.3",
@@ -51,9 +51,9 @@
     "prop-types": "^15.5.10",
     "query-string": "^5.0.0",
     "raven-js": "^3.22.1",
-    "react": "^16.3.0",
+    "react": "^16.3.2",
     "react-dimensions": "^1.3.0",
-    "react-dom": "^16.3.0",
+    "react-dom": "^16.3.2",
     "react-ga": "^2.4.1",
     "react-helmet": "^5.1.3",
     "react-icons": "^2.2.7",

packages/jaeger-ui/src/components/App/TopNav.js

@@ -72,14 +72,16 @@ export default function TopNav(props: TopNavProps) {
   return (
     <div>
       <Menu theme="dark" mode="horizontal" selectable={false} className="ub-right" selectedKeys={[activeKey]}>
-        {menuItems.map(item => {
-          if (item.items) {
+        {menuItems.map(m => {
+          if (m.items != null) {
+            const group = ((m: any): ConfigMenuGroup);
             return (
-              <Menu.Item key={item.label}>
-                <CustomNavDropdown key={item.label} {...item} />
+              <Menu.Item key={group.label}>
+                <CustomNavDropdown key={group.label} {...group} />
               </Menu.Item>
             );
           }
+          const item = ((m: any): ConfigMenuItem);
           return (
             <Menu.Item key={item.label}>
               <a href={item.url} target="_blank" rel="noopener noreferrer">

packages/plexus/.gitignore

@@ -0,0 +1,4 @@
+demo/dist
+es
+lib
+umd

packages/plexus/README.md

@@ -0,0 +1,13 @@
+# plexus
+
+plexus is a React component for rendering directed graphs.
+
+## Why?
+
+To support directed graphs in Jaeger-UI, we surveyed the JavaScript libraries and utilities available for rendering directed graphs. The landscape is impressive, but we concluded the venerable [GraphViz](https://graphviz.gitlab.io/) ([alt](https://www.graphviz.org/)) is the right tool for us.
+
+GraphViz is awesome, but the output formats don't fit our needs. We've elected to use GraphViz to generate the layouts (node positioning, edge routing) and React for rendering.
+
+## viz.js
+
+The excellent [viz.js](https://github.com/mdaines/viz.js) is used, in a WebWorker, to generate GraphViz as plain-text output which is then parsed and provided to a React component which does the rendering.

packages/plexus/demo/src/data-dag.js

@@ -0,0 +1,98 @@
+const paths = `
+packages
+packages/jaeger-ui
+packages/jaeger-ui/build
+packages/jaeger-ui/build/static
+packages/jaeger-ui/build/static/css
+packages/jaeger-ui/build/static/js
+packages/jaeger-ui/build/static/media
+packages/jaeger-ui/node_modules
+packages/jaeger-ui/node_modules/.bin
+packages/jaeger-ui/node_modules/bluebird
+packages/jaeger-ui/node_modules/bluebird/js
+packages/jaeger-ui/node_modules/bluebird/js/browser
+packages/jaeger-ui/node_modules/bluebird/js/release
+packages/jaeger-ui/node_modules/moment
+packages/jaeger-ui/node_modules/moment/locale
+packages/jaeger-ui/node_modules/moment/min
+packages/jaeger-ui/node_modules/moment/src
+packages/jaeger-ui/node_modules/moment/src/lib
+packages/jaeger-ui/node_modules/moment/src/lib/create
+packages/jaeger-ui/node_modules/moment/src/lib/duration
+packages/jaeger-ui/node_modules/moment/src/lib/format
+packages/jaeger-ui/node_modules/moment/src/lib/locale
+packages/jaeger-ui/node_modules/moment/src/lib/moment
+packages/jaeger-ui/node_modules/moment/src/lib/parse
+packages/jaeger-ui/node_modules/moment/src/lib/units
+packages/jaeger-ui/node_modules/moment/src/lib/utils
+packages/jaeger-ui/node_modules/moment/src/locale
+packages/jaeger-ui/public
+packages/jaeger-ui/src
+packages/jaeger-ui/src/actions
+packages/jaeger-ui/src/api
+packages/jaeger-ui/src/components
+packages/jaeger-ui/src/components/App
+packages/jaeger-ui/src/components/DependencyGraph
+packages/jaeger-ui/src/components/SearchTracePage
+packages/jaeger-ui/src/components/SearchTracePage/SearchResults
+packages/jaeger-ui/src/components/TracePage
+packages/jaeger-ui/src/components/TracePage/ArchiveNotifier
+packages/jaeger-ui/src/components/TracePage/SpanGraph
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/__snapshots__
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail
+packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow
+packages/jaeger-ui/src/components/common
+packages/jaeger-ui/src/constants
+packages/jaeger-ui/src/demo
+packages/jaeger-ui/src/img
+packages/jaeger-ui/src/middlewares
+packages/jaeger-ui/src/model
+packages/jaeger-ui/src/propTypes
+packages/jaeger-ui/src/reducers
+packages/jaeger-ui/src/selectors
+packages/jaeger-ui/src/types
+packages/jaeger-ui/src/utils
+packages/jaeger-ui/src/utils/DraggableManager
+packages/jaeger-ui/src/utils/DraggableManager/demo
+packages/jaeger-ui/src/utils/config
+packages/jaeger-ui/src/utils/test
+packages/jaeger-ui/src/utils/tracking
+packages/plexus
+packages/plexus/demo
+packages/plexus/demo/dist
+packages/plexus/demo/src
+packages/plexus/lib
+packages/plexus/lib/DirectedGraph
+packages/plexus/lib/DirectedGraph/builtins
+packages/plexus/lib/LayoutManager
+packages/plexus/lib/LayoutManager/dot
+packages/plexus/lib/types
+packages/plexus/node_modules
+packages/plexus/node_modules/.bin
+packages/plexus/node_modules/.cache
+packages/plexus/node_modules/.cache/babel-loader
+packages/plexus/src
+packages/plexus/src/DirectedGraph
+packages/plexus/src/DirectedGraph/builtins
+packages/plexus/src/LayoutManager
+packages/plexus/src/LayoutManager/dot
+packages/plexus/src/types
+packages/plexus/umd
+packages/plexus/umd/@jaegertracing
+`;
+
+export const vertices = [];
+export const edges = [];
+
+paths
+  .trim()
+  .split('\n')
+  .forEach(line => {
+    const folders = line.split('/');
+    vertices.push({ key: line, label: folders.slice(-1)[0] });
+    if (folders.length > 1) {
+      edges.push({ from: folders.slice(0, -1).join('/'), to: line });
+    }
+  });