Allow UI elements to be injected with context

Signed-off-by: Andrej Ocenas <mr.ocenas@gmail.com>

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.tsx

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import React from 'react';
-import { Popover } from 'antd';
 import _groupBy from 'lodash/groupBy';
 import { onlyUpdateForKeys, compose, withState, withProps } from 'recompose';
 
@@ -22,6 +21,7 @@ import AccordianLogs from './SpanDetail/AccordianLogs';
 import { ViewedBoundsFunctionType } from './utils';
 import { TNil } from '../../../types';
 import { Span } from '../../../types/trace';
+import { UIPopover } from '../uiElementsContext';
 
 import './SpanBar.css';
 
@@ -102,7 +102,7 @@ function SpanBar(props: TInnerProps) {
       </div>
       <div>
         {Object.keys(logGroups).map(positionKey => (
-          <Popover
+          <UIPopover
             key={positionKey}
             arrowPointAtCenter
             overlayClassName="SpanBar--logHint"
@@ -117,7 +117,7 @@ function SpanBar(props: TInnerProps) {
             }
           >
             <div className="SpanBar--logMarker" style={{ left: positionKey }} />
-          </Popover>
+          </UIPopover>
         ))}
       </div>
       {rpc && (

packages/jaeger-ui/src/components/TracePage/index.tsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Input } from 'antd';
+import { Input, Popover } from 'antd';
 import { Location, History as RouterHistory } from 'history';
 import _clamp from 'lodash/clamp';
 import _get from 'lodash/get';
@@ -55,6 +55,7 @@ import { TraceArchive } from '../../types/archive';
 import { EmbeddedState } from '../../types/embedded';
 import filterSpans from '../../utils/filter-spans';
 import updateUiFind from '../../utils/update-ui-find';
+import UIElementsContext from './uiElementsContext';
 
 import './index.css';
 
@@ -395,15 +396,17 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
             </section>
           ) : (
             <section style={{ paddingTop: headerHeight }}>
-              <TraceTimelineViewer
-                registerAccessors={this._scrollManager.setAccessors}
-                scrollToFirstVisibleSpan={this._scrollManager.scrollToFirstVisibleSpan}
-                findMatchesIDs={spanFindMatches}
-                trace={data}
-                updateNextViewRangeTime={this.updateNextViewRangeTime}
-                updateViewRangeTime={this.updateViewRangeTime}
-                viewRange={viewRange}
-              />
+              <UIElementsContext.Provider value={{ Popover }}>
+                <TraceTimelineViewer
+                  registerAccessors={this._scrollManager.setAccessors}
+                  scrollToFirstVisibleSpan={this._scrollManager.scrollToFirstVisibleSpan}
+                  findMatchesIDs={spanFindMatches}
+                  trace={data}
+                  updateNextViewRangeTime={this.updateNextViewRangeTime}
+                  updateViewRangeTime={this.updateViewRangeTime}
+                  viewRange={viewRange}
+                />
+              </UIElementsContext.Provider>
             </section>
           ))}
       </div>

packages/jaeger-ui/src/components/TracePage/uiElementsContext.tsx

@@ -0,0 +1,82 @@
+// 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';
+
+type TooltipPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'rightTop'
+  | 'rightBottom';
+type PopoverInterface = React.ComponentClass<
+  {
+    content?: React.ReactNode;
+    arrowPointAtCenter?: boolean;
+    overlayClassName?: string;
+    placement?: TooltipPlacement;
+    children?: React.ReactNode;
+  },
+  {}
+>;
+type Elements = {
+  Popover: PopoverInterface;
+};
+
+/**
+ * Allows for injecting custom UI elements that will be used. Mainly for styling and removing dependency on
+ * any specific UI library but can also inject specific behaviour.
+ */
+const UIElementsContext = React.createContext<Elements | undefined>(undefined);
+UIElementsContext.displayName = 'UIElementsContext';
+export default UIElementsContext;
+
+type GetElementsContextProps = {
+  children: (elements: Elements) => React.ReactNode;
+};
+
+/**
+ * Convenience render prop style component to handle error state when elements are not defined.
+ */
+export function GetElementsContext(props: GetElementsContextProps) {
+  return (
+    <UIElementsContext.Consumer>
+      {(value: Elements | undefined) => {
+        if (!value) {
+          throw new Error(
+            'Elements context is required. You probably forget to use UIElementsContext.Provider'
+          );
+        }
+        return props.children(value);
+      }}
+    </UIElementsContext.Consumer>
+  );
+}
+
+export function UIPopover(props: React.ComponentProps<PopoverInterface>) {
+  return (
+    <GetElementsContext>
+      {(elements: Elements) => {
+        return <elements.Popover {...props} />;
+      }}
+    </GetElementsContext>
+  );
+}