DDG service operation selectors (jaegertracing#406)

DDG service operation selectors
Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>

.eslintrc.js

@@ -78,6 +78,7 @@ module.exports = {
           'state',
           'propTypes',
           'static-methods',
+          'instance-variables',
           'constructor',
           'lifecycle',
           'everything-else',

packages/jaeger-ui/package.json

@@ -16,6 +16,8 @@
     ]
   },
   "devDependencies": {
+    "@types/match-sorter": "^2.3.0",
+    "@types/react-window": "^1.8.0",
     "babel-plugin-import": "1.11.0",
     "bluebird": "^3.5.0",
     "customize-cra": "0.2.9",
@@ -67,6 +69,7 @@
     "lodash": "^4.17.4",
     "logfmt": "^1.2.0",
     "lru-memoize": "^1.1.0",
+    "match-sorter": "^3.1.1",
     "memoize-one": "^5.0.0",
     "moment": "^2.18.1",
     "prop-types": "^15.5.10",
@@ -85,6 +88,7 @@
     "react-virtualized-select": "^3.1.0",
     "react-vis": "^1.7.2",
     "react-vis-force": "^0.3.1",
+    "react-window": "^1.8.3",
     "recompose": "^0.25.0",
     "redux": "^3.7.2",
     "redux-actions": "^2.2.1",
@@ -93,14 +97,15 @@
     "redux-promise-middleware": "^4.3.0",
     "reselect": "^3.0.1",
     "store": "^2.0.12",
+    "ts-key-enum": "^2.0.0",
     "tween-functions": "^1.2.0",
     "typescript": "^3.3.3333",
     "u-basscss": "2.0.0"
   },
   "scripts": {
     "analyze": "source-map-explorer build/static/js/main.*",
     "build": "REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) react-app-rewired build",
-    "coverage": "yarn run test -- --coverage",
+    "coverage": "yarn run test --coverage",
     "start:ga-debug": "REACT_APP_GA_DEBUG=1 REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) react-app-rewired start",
     "start": "react-app-rewired start",
     "test-dev": "react-app-rewired test --env=jsdom",

packages/jaeger-ui/src/components/DeepDependencyGraph/Header/NameSelector.css

@@ -0,0 +1,76 @@
+/*
+Copyright (c) 2019 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.
+*/
+
+.NameSelector {
+  border-bottom: 1px solid transparent;
+  color: var(--tx-color-muted);
+  cursor: pointer;
+  font-size: 1.5em;
+  margin: 0 1.3em 0 0;
+  outline: 4px solid transparent;
+}
+
+.NameSelector.is-invalid {
+  background: #fff2e888;
+  border-color: #ffbb96;
+  outline-color: #fff2e888;
+}
+
+.NameSelector.is-invalid:hover {
+  background: #fff2e8;
+  border-color: #ff9c6e;
+  outline-color: #fff2e8;
+}
+
+.NameSelector:hover {
+  background: #f4f4f4;
+  border-color: #ccc;
+  color: var(--tx-color-body);
+  outline-color: #f4f4f4;
+}
+
+.NameSelector.is-active {
+  background: #ddd;
+  border-color: #bbb;
+  color: var(--tx-color-body);
+  outline-color: #ddd;
+}
+
+.NameSelector--label {
+  font-weight: 400;
+  padding-right: 0.5em;
+}
+
+.NameSelector--value {
+  color: var(--tx-color-title);
+}
+
+.NameSelector--chevron {
+  font-size: 0.6em;
+  margin-left: 0.8em;
+  position: relative;
+}
+
+.NameSelector--overlay .ant-popover-arrow {
+  border: 1px solid #999;
+  z-index: -1;
+  background: #bbb;
+}
+
+.NameSelector--overlay .ant-popover-inner {
+  border: 1px solid #ccc;
+  overflow: hidden;
+}

packages/jaeger-ui/src/components/DeepDependencyGraph/Header/NameSelector.test.js

@@ -0,0 +1,105 @@
+// Copyright (c) 2019 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 { Popover } from 'antd';
+import { shallow } from 'enzyme';
+
+import BreakableText from '../../common/BreakableText';
+import NameSelector, { DEFAULT_PLACEHOLDER } from './NameSelector';
+
+describe('<NameSelector>', () => {
+  const placeholder = 'This is the placeholder';
+  let props;
+  let wrapper;
+
+  beforeEach(() => {
+    props = {
+      placeholder,
+      label: 'a-label',
+      options: ['a', 'b', 'c'],
+      value: null,
+      required: true,
+      setValue: jest.fn(),
+    };
+    wrapper = shallow(<NameSelector {...props} />);
+  });
+
+  it('renders without exploding', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders with is-invalid when required and without a value', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders without is-invalid when not required and without a value', () => {
+    wrapper.setProps({ required: false });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('placeholder prop', () => {
+    it('renders the placeholder when it is a string and value == null', () => {
+      wrapper.setProps({ placeholder, value: null });
+      expect(wrapper.find(BreakableText).prop('text')).toBe(placeholder);
+    });
+
+    it('renders the default placeholder when the prop is true and value == null', () => {
+      wrapper.setProps({ placeholder: true, value: null });
+      expect(wrapper.find(BreakableText).prop('text')).toBe(DEFAULT_PLACEHOLDER);
+    });
+
+    it('does not render a placeholder if there is a value', () => {
+      const value = 'some-value';
+      wrapper.setProps({ placeholder, value });
+      expect(wrapper.find(BreakableText).prop('text')).toBe(value);
+      wrapper.setProps({ placeholder: true, value });
+      expect(wrapper.find(BreakableText).prop('text')).toBe(value);
+    });
+  });
+
+  it('allows the filtered list to set values', () => {
+    const v = 'test-value';
+    const popover = wrapper.find(Popover);
+    const list = popover.prop('content');
+    list.props.setValue(v);
+    expect(props.setValue.mock.calls).toEqual([[v]]);
+  });
+
+  it('hides the popover when the filter calls cancel', () => {
+    wrapper.setState({ popoverVisible: true });
+    const popover = wrapper.find(Popover);
+    const list = popover.prop('content');
+    list.props.cancel();
+    expect(wrapper.state('popoverVisible')).toBe(false);
+  });
+
+  it('controls the visibility of the popover', () => {
+    expect(wrapper.state('popoverVisible')).toBe(false);
+    const popover = wrapper.find(Popover);
+    popover.prop('onVisibleChange')(true);
+    expect(wrapper.state('popoverVisible')).toBe(true);
+  });
+
+  it('attempts to focus the filter input when the component updates', () => {
+    const fn = jest.fn();
+    wrapper.instance().listRef = {
+      current: {
+        focusInput: fn,
+      },
+    };
+    wrapper.setProps({ required: false });
+    expect(fn.mock.calls.length).toBe(1);
+  });
+});