Add help page

package.json

@@ -38,6 +38,7 @@
     "fuzzy": "^0.1.3",
     "global": "^4.3.2",
     "history": "^4.6.3",
+    "html-loader": "^0.5.1",
     "is-promise": "^2.1.0",
     "isomorphic-fetch": "^2.2.1",
     "jest": "^21.2.1",
@@ -64,6 +65,8 @@
     "redux-async-middleware": "^0.0.0",
     "redux-form": "^7.0.3",
     "redux-promise-middleware": "^4.3.0",
+    "remark-webpack-loader": "^0.0.1",
+    "remark-webpack-loader-preset-xtend": "^0.0.1",
     "reselect": "^3.0.1",
     "semantic-ui-css": "^2.2.12",
     "semantic-ui-react": "^0.71.4",
@@ -75,7 +78,7 @@
     "start:docs": "REACT_APP_DEMO=true react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
-    "test": "CI=1 react-scripts test --env=jsdom --color",
+    "test": "CI=1 react-scripts test --env=jsdom --color '--moduleNameMapper={\"^!html-loader!remark-webpack.*\": \"<rootDir>/src/utils/test/jest-md-stub.js\"}'",
     "test-dev": "react-scripts test --env=jsdom",
     "coverage": "npm run test -- --coverage",
     "lint": "npm run eslint && npm run prettier && npm run flow && npm run check-license",
@@ -86,7 +89,7 @@
     "precommit": "lint-staged"
   },
   "jest": {
-    "collectCoverageFrom": ["src/**/*.js", "!src/utils/DraggableManager/demo/*.js"]
+    "collectCoverageFrom": ["src/**/*.js", "!src/utils/DraggableManager/demo/*.js", "!src/demo/*.js"]
   },
   "lint-staged": {
     "*.js": [

src/components/App/TopNav.js

@@ -66,6 +66,11 @@ const NAV_LINKS = [
     to: prefixUrl('/search'),
     text: 'Search',
   },
+  {
+    key: 'help',
+    to: prefixUrl('/help'),
+    text: 'Help',
+  },
 ];
 
 export default function TopNav(props: TopNavProps) {

src/components/App/index.js

@@ -23,6 +23,7 @@ import 'semantic-ui-css/semantic.min.css';
 import NotFound from './NotFound';
 import Page from './Page';
 import { ConnectedDependencyGraphPage } from '../DependencyGraph';
+import Help from '../Help';
 import { ConnectedSearchTracePage } from '../SearchTracePage';
 import { ConnectedTracePage } from '../TracePage';
 import JaegerAPI, { DEFAULT_API_ROOT } from '../../api/jaeger';
@@ -46,6 +47,7 @@ export default class JaegerUIApp extends Component {
         <ConnectedRouter history={history}>
           <Page>
             <Switch>
+              <Route path={prefixUrl('/help')} component={Help} />
               <Route path={prefixUrl('/search')} component={ConnectedSearchTracePage} />
               <Route path={prefixUrl('/trace/:id')} component={ConnectedTracePage} />
               <Route path={prefixUrl('/dependencies')} component={ConnectedDependencyGraphPage} />

src/components/Help/Help.css

@@ -0,0 +1,40 @@
+/*
+Copyright (c) 2017 Uber Technologies, 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.
+*/
+
+.Help {
+  margin: 1.5em;
+}
+
+.Help code {
+  background: #f5f5f5;
+  color: #000;
+  border: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 0.25em 0.3em;
+  font-size: 0.91em;
+}
+
+.Help th {
+  padding: 0.85em 0.5em;
+  text-align: left;
+  background: #f6f6f6;
+  border-bottom: 1px solid #e3e3e3;
+}
+
+.Help td {
+  padding: 1em 0.5em;
+  border-bottom: 1px solid #e9e9e9;
+}

src/components/Help/Help.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2017 Uber Technologies, 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 * as React from 'react';
+
+// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
+import html from '!html-loader!remark-webpack-loader?preset=xtend!./help.md';
+
+import './Help.css';
+
+export default function Help() {
+  return <div className="Help" dangerouslySetInnerHTML={{ __html: html }} />;
+}

src/components/Help/Help.test.js

@@ -0,0 +1,22 @@
+// Copyright (c) 2017 Uber Technologies, 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 { shallow } from 'enzyme';
+
+import Help from './Help';
+
+it('Help does not explode', () => {
+  shallow(<Help />);
+});

src/components/Help/help.md

@@ -0,0 +1,43 @@
+# Jaeger UI Help
+
+
+## Work In Progress
+
+This document is a work in progress. To request additional documentation of the Jaeger UI, please create a [documentation ticket](https://github.com/jaegertracing/jaeger-ui/issues/new?labels=documentation).
+
+
+## Keyboard Shortcuts
+
+Keyboard shortcuts to affect scrolling and panning have been added to the Trace timeline view.
+
+| Key(s)        | Description |
+| ------------- |-------------|
+| `w` | Scroll up |
+| `s` | Scroll down |
+| `a` | Pan left |
+| `d` | Pan right |
+| `f` | Scroll to the next visible span |
+| `b` | Scroll to the previous visible span |
+| `up` | Zoom in |
+| `shift` + `up` | Zoom in — Large |
+| `down` | Zoom out |
+| `shift` + `down` | Zoom out — Large |
+| `left` | Pan left |
+| `shift` + `left` | Pan left — Large |
+| `right` | Pan right |
+| `shift` + `right` | Pan right — Large |
+
+
+## Find An Issue?
+
+If you find an issue, please [file a ticket](https://github.com/jaegertracing/jaeger-ui/issues/new).
+
+
+## Other Resources
+
+- [Jaeger UI GitHub repo](https://github.com/jaegertracing/jaeger-ui)
+- [Jaeger on GitHub](https://github.com/jaegertracing)
+- [Jaeger Documentation](http://jaeger.readthedocs.io/en/latest/)
+- [Jaeger on Twitter](https://twitter.com/JaegerTracing)
+- [Jaeger on Gitter.im](https://gitter.im/jaegertracing/Lobby)
+- [Jaeger Discussion Group](https://groups.google.com/forum/#!forum/jaeger-tracing)

src/components/Help/index.js

@@ -0,0 +1,15 @@
+// Copyright (c) 2017 Uber Technologies, 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.
+
+export { default } from './Help';

src/utils/test/jest-md-stub.js

@@ -0,0 +1 @@
+export default '';