Make detailscard table columns filterable

packages/jaeger-ui/src/api/jaeger.js

@@ -80,9 +80,6 @@ const JaegerAPI = {
   archiveTrace(id) {
     return getJSON(`${this.apiRoot}archive/${id}`, { method: 'POST' });
   },
-  fetchQualityMetrics(service, lookback) {
-    return getJSON(`/qualitymetrics-v2`, { query: { service, lookback } });
-  },
   fetchDecoration(url) {
     return getJSON(url);
   },
@@ -92,6 +89,9 @@ const JaegerAPI = {
   fetchDependencies(endTs = new Date().getTime(), lookback = DEFAULT_DEPENDENCY_LOOKBACK) {
     return getJSON(`${this.apiRoot}dependencies`, { query: { endTs, lookback } });
   },
+  fetchQualityMetrics(service, lookback) {
+    return getJSON(`/qualitymetrics-v2`, { query: { service, lookback } });
+  },
   fetchServiceOperations(serviceName) {
     return getJSON(`${this.apiRoot}services/${encodeURIComponent(serviceName)}/operations`);
   },

packages/jaeger-ui/src/api/jaeger.test.js

@@ -48,6 +48,14 @@ describe('archiveTrace', () => {
   });
 });
 
+describe('fetchDecoration', () => {
+  it('GETs the specified url', () => {
+    const url = 'foo.bar.baz';
+    JaegerAPI.fetchDecoration(url);
+    expect(fetchMock).toHaveBeenLastCalledWith(url, defaultOptions);
+  });
+});
+
 describe('fetchDeepDependencyGraph', () => {
   it('GETs the specified query', () => {
     const query = { service: 'serviceName', start: 400, end: 800 };
@@ -81,6 +89,18 @@ describe('fetchDependencies', () => {
   });
 });
 
+describe('fetchQualityMetrics', () => {
+  it('GETs the specified service and lookback', () => {
+    const lookback = '3h';
+    const service = 'test-service';
+    JaegerAPI.fetchQualityMetrics(service, lookback);
+    expect(fetchMock).toHaveBeenLastCalledWith(
+      `/qualitymetrics-v2?${queryString.stringify({ service, lookback })}`,
+      defaultOptions
+    );
+  });
+});
+
 describe('fetchServiceServerOps', () => {
   it('GETs the specified query', () => {
     const service = 'serviceName';

packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JaegerUIApp does not explode 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(observable): [Function],
+    }
+  }
+>
+  <ConnectedRouter
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <withRouter(Connect(PageImpl))>
+      <Switch>
+        <Route
+          component={[Function]}
+          path="/search"
+        />
+        <Route
+          component={[Function]}
+          path="/trace/:a?\\\\.\\\\.\\\\.:b?"
+        />
+        <Route
+          component={[Function]}
+          path="/trace/:id"
+        />
+        <Route
+          component={[Function]}
+          path="/dependencies"
+        />
+        <Route
+          component={[Function]}
+          path="/deep-dependencies"
+        />
+        <Route
+          component={[Function]}
+          path="/quality-metrics"
+        />
+        <Redirect
+          exact={true}
+          path="/"
+          push={false}
+          to="/search"
+        />
+        <Redirect
+          exact={true}
+          path=""
+          push={false}
+          to="/search"
+        />
+        <Redirect
+          exact={true}
+          path="/"
+          push={false}
+          to="/search"
+        />
+        <Route
+          component={[Function]}
+        />
+      </Switch>
+    </withRouter(Connect(PageImpl))>
+  </ConnectedRouter>
+</Provider>
+`;

packages/jaeger-ui/src/components/App/index.test.js

@@ -17,6 +17,9 @@ import { shallow } from 'enzyme';
 
 import JaegerUIApp from './index';
 
-it('JaegerUIApp does not explode', () => {
-  shallow(<JaegerUIApp />);
+describe('JaegerUIApp', () => {
+  it('does not explode', () => {
+    const wrapper = shallow(<JaegerUIApp />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap

@@ -1372,7 +1372,6 @@ exports[`<DdgNodeContent> renders the number of operations if there are multiple
         <Popover
           content={
             <FilteredList
-              cancel={[Function]}
               options={
                 Array [
                   "op0",

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx

@@ -296,14 +296,7 @@ export class UnconnectedDdgNodeContent extends React.PureComponent<TProps, TStat
               >
                 {Array.isArray(operation) ? (
                   <Popover
-                    content={
-                      <FilteredList
-                        cancel={() => {}}
-                        options={operation}
-                        value={null}
-                        setValue={this.setOperation}
-                      />
-                    }
+                    content={<FilteredList options={operation} value={null} setValue={this.setOperation} />}
                     placement="bottom"
                     title="Select Operation to Filter Graph"
                   >