Monitoring UI view for ATM

Signed-off-by: Mykhailo Semenchenko <mykhailo.semenchenko@logz.io>

packages/jaeger-ui/jest.global-setup.js

@@ -0,0 +1,3 @@
+module.exports = async () => {
+  process.env.TZ = 'UTC';
+};

packages/jaeger-ui/package.json

@@ -116,6 +116,7 @@
     "test": "CI=1 react-app-rewired test --env=jsdom --color"
   },
   "jest": {
+    "globalSetup": "./jest.global-setup.js",
     "collectCoverageFrom": [
       "!src/setup*.js",
       "!src/utils/DraggableManager/demo/*.tsx",

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

@@ -15,6 +15,23 @@
 import { createAction } from 'redux-actions';
 import JaegerAPI from '../api/jaeger';
 
+const metricType = {
+  latencies: 'latencies',
+  calls: 'calls',
+  errors: 'errors',
+};
+
+// export for tests
+export function allSettled(promises) {
+  const wrappedPromises = promises.map(p =>
+    Promise.resolve(p).then(
+      val => ({ status: 'fulfilled', value: val }),
+      err => ({ status: 'rejected', reason: err })
+    )
+  );
+  return Promise.all(wrappedPromises);
+}
+
 export const fetchTrace = createAction(
   '@JAEGER_API/FETCH_TRACE',
   id => JaegerAPI.fetchTrace(id),
@@ -62,3 +79,28 @@ export const fetchDeepDependencyGraph = createAction(
 export const fetchDependencies = createAction('@JAEGER_API/FETCH_DEPENDENCIES', () =>
   JaegerAPI.fetchDependencies()
 );
+
+export const fetchAllServiceMetrics = createAction(
+  '@JAEGER_API/FETCH_ALL_SERVICE_METRICS',
+  (serviceName, query) => {
+    return allSettled([
+      JaegerAPI.fetchMetrics(metricType.latencies, [serviceName], { ...query, quantile: 0.5 }),
+      JaegerAPI.fetchMetrics(metricType.latencies, [serviceName], { ...query, quantile: 0.75 }),
+      JaegerAPI.fetchMetrics(metricType.latencies, [serviceName], query),
+      JaegerAPI.fetchMetrics(metricType.calls, [serviceName], query),
+      JaegerAPI.fetchMetrics(metricType.errors, [serviceName], query),
+    ]);
+  }
+);
+
+export const fetchAggregatedServiceMetrics = createAction(
+  '@JAEGER_API/FETCH_AGGREGATED_SERVICE_METRICS',
+  (serviceName, queryParams) => {
+    const query = { ...queryParams, groupByOperation: true };
+    return allSettled([
+      JaegerAPI.fetchMetrics(metricType.latencies, [serviceName], query),
+      JaegerAPI.fetchMetrics(metricType.calls, [serviceName], query),
+      JaegerAPI.fetchMetrics(metricType.errors, [serviceName], query),
+    ]);
+  }
+);

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

@@ -149,4 +149,49 @@ describe('actions/jaeger-api', () => {
     jaegerApiActions.fetchDependencies();
     expect(called.verify()).toBeTruthy();
   });
+
+  it('@JAEGER_API/FETCH_ALL_SERVICE_METRICS should return the promise', () => {
+    const { payload } = jaegerApiActions.fetchAllServiceMetrics('serviceName', query);
+    expect(isPromise(payload)).toBeTruthy();
+  });
+
+  it('@JAEGER_API/FETCH_ALL_SERVICE_METRICS should fetch service metrics by name', () => {
+    mock.expects('fetchMetrics');
+    mock.expects('fetchMetrics');
+    mock.expects('fetchMetrics');
+    mock.expects('fetchMetrics');
+    mock.expects('fetchMetrics');
+    jaegerApiActions.fetchAllServiceMetrics('serviceName', query);
+    expect(() => mock.verify()).not.toThrow();
+  });
+
+  it('@JAEGER_API/FETCH_AGGREGATED_SERVICE_METRICS should return the promise', () => {
+    const { payload } = jaegerApiActions.fetchAggregatedServiceMetrics('serviceName', query);
+    expect(isPromise(payload)).toBeTruthy();
+  });
+
+  it('@JAEGER_API/FETCH_AGGREGATED_SERVICE_METRICS should fetch service metrics by name', () => {
+    mock.expects('fetchMetrics');
+    mock.expects('fetchMetrics');
+    mock.expects('fetchMetrics');
+    jaegerApiActions.fetchAggregatedServiceMetrics('serviceName', query);
+    expect(() => mock.verify()).not.toThrow();
+  });
+});
+
+describe('allSettled', () => {
+  it('validate responses', async () => {
+    const res = await jaegerApiActions.allSettled([
+      Promise.resolve(1),
+      // eslint-disable-next-line prefer-promise-reject-errors
+      Promise.reject(2),
+      Promise.resolve(3),
+    ]);
+
+    expect(res).toEqual([
+      { status: 'fulfilled', value: 1 },
+      { status: 'rejected', reason: 2 },
+      { status: 'fulfilled', value: 3 },
+    ]);
+  });
 });

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

@@ -36,7 +36,12 @@ export function getMessageFromError(errData, status) {
 function getJSON(url, options = {}) {
   const { query = null, ...init } = options;
   init.credentials = 'same-origin';
-  const queryStr = query ? `?${queryString.stringify(query)}` : '';
+  let queryStr = '';
+
+  if (query) {
+    queryStr = `?${typeof query === 'string' ? query : queryString.stringify(query)}`;
+  }
+
   return fetch(`${url}${queryStr}`, init).then(response => {
     if (response.status < 400) {
       return response.json();
@@ -112,6 +117,13 @@ const JaegerAPI = {
   searchTraces(query) {
     return getJSON(`${this.apiRoot}traces`, { query });
   },
+  fetchMetrics(metricType, serviceNameList, query) {
+    const servicesName = serviceNameList.map(serviceName => `service=${serviceName}`).join(',');
+
+    return getJSON(`${this.apiRoot}metrics/${metricType}`, {
+      query: `${servicesName}&${queryString.stringify(query)}`,
+    }).then(d => ({ ...d, quantile: query.quantile }));
+  },
 };
 
 export default JaegerAPI;

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

@@ -201,3 +201,44 @@ describe('getMessageFromError()', () => {
     });
   });
 });
+
+describe('fetchMetrics', () => {
+  it('GETs metrics query', () => {
+    fetchMock.mockReset();
+    const metricsType = 'latencies';
+    const serviceName = ['serviceName'];
+    const query = {
+      quantile: 95,
+    };
+    fetchMock.mockReturnValue(
+      Promise.resolve({
+        status: 200,
+        json: () => Promise.resolve({ someObj: {} }),
+      })
+    );
+
+    JaegerAPI.fetchMetrics(metricsType, serviceName, query);
+    expect(fetchMock).toHaveBeenLastCalledWith(
+      `${DEFAULT_API_ROOT}metrics/${metricsType}?service=${serviceName}&${queryString.stringify(query)}`,
+      defaultOptions
+    );
+  });
+
+  it('fetchMetrics() should add quantile to response', async () => {
+    const metricsType = 'latencies';
+    const serviceName = ['serviceName'];
+    const query = {
+      quantile: 95,
+    };
+
+    fetchMock.mockReturnValue(
+      Promise.resolve({
+        status: 200,
+        json: () => Promise.resolve({ someObj: {} }),
+      })
+    );
+
+    const resp = await JaegerAPI.fetchMetrics(metricsType, serviceName, query);
+    expect(resp.quantile).toBe(query.quantile);
+  });
+});

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

@@ -24,6 +24,7 @@ import * as deepDependencies from '../DeepDependencies/url';
 import * as qualityMetrics from '../QualityMetrics/url';
 import * as searchUrl from '../SearchTracePage/url';
 import * as diffUrl from '../TraceDiff/url';
+import * as monitoringATMUrl from '../Monitoring/url';
 import { ReduxState } from '../../types';
 import { ConfigMenuItem, ConfigMenuGroup } from '../../types/config';
 import { getConfigValue } from '../../utils/config/get-config';
@@ -68,13 +69,22 @@ if (getConfigValue('qualityMetrics.menuEnabled')) {
   });
 }
 
+if (getConfigValue('monitoring.menuEnabled')) {
+  NAV_LINKS.push({
+    to: monitoringATMUrl.getUrl(),
+    matches: monitoringATMUrl.matches,
+    text: 'Monitoring',
+  });
+}
+
 function getItem(item: ConfigMenuItem) {
   const { label, anchorTarget, url } = item;
   const link = (
     <a href={url} target={anchorTarget || '_blank'} rel="noopener noreferrer">
       {label}
     </a>
   );
+
   return (
     <Menu.Item key={label} disabled={!url}>
       {url ? link : label}

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

@@ -60,6 +60,10 @@ exports[`JaegerUIApp does not explode 1`] = `
           component={[Function]}
           path="/quality-metrics"
         />
+        <Route
+          component={[Function]}
+          path="/monitoring"
+        />
         <Redirect
           exact={true}
           path="/"

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

@@ -32,6 +32,8 @@ import TraceDiff from '../TraceDiff';
 import { ROUTE_PATH as traceDiffPath } from '../TraceDiff/url';
 import TracePage from '../TracePage';
 import { ROUTE_PATH as tracePath } from '../TracePage/url';
+import MonitoringATMPage from '../Monitoring';
+import { ROUTE_PATH as monitoringATMPath } from '../Monitoring/url';
 import JaegerAPI, { DEFAULT_API_ROOT } from '../../api/jaeger';
 import configureStore from '../../utils/configure-store';
 import processScripts from '../../utils/config/process-scripts';
@@ -63,6 +65,7 @@ export default class JaegerUIApp extends Component {
               <Route path={dependenciesPath} component={DependencyGraph} />
               <Route path={deepDependenciesPath} component={DeepDependencies} />
               <Route path={qualityMetricsPath} component={QualityMetrics} />
+              <Route path={monitoringATMPath} component={MonitoringATMPage} />
 
               <Redirect exact path="/" to={searchPath} />
               <Redirect exact path={prefixUrl()} to={searchPath} />

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

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MonitoringATMEmptyState> ATM snapshot test 1`] = `
+<Row
+  gutter={0}
+  justify="center"
+>
+  <Col
+    className="center-empty-state"
+    offset={6}
+    span={12}
+  >
+    <List
+      bordered={false}
+      dataSource={
+        Array [
+          Object {
+            "status": false,
+            "text": "Configured",
+          },
+          Object {
+            "status": false,
+            "text": "Sent data",
+          },
+        ]
+      }
+      footer={
+        <Button
+          block={false}
+          ghost={false}
+          href="https://www.jaegertracing.io/docs/latest/frontend-ui/"
+          loading={false}
+          prefixCls="ant-btn"
+          style={
+            Object {
+              "backgroundColor": "#199",
+              "color": "#fff",
+            }
+          }
+          target="_blank"
+        >
+          Go to documentation
+        </Button>
+      }
+      header={
+        <h2
+          className="ub-m0"
+        >
+          Get started with Services Monitoring
+        </h2>
+      }
+      itemLayout="vertical"
+      loading={false}
+      pagination={false}
+      prefixCls="ant-list"
+      renderItem={[Function]}
+      rowKey="-"
+      size="small"
+      split={false}
+    />
+  </Col>
+</Row>
+`;
+
+exports[`<MonitoringATMEmptyState> ATM snapshot test 2`] = `
+<Row
+  gutter={0}
+  justify="center"
+>
+  <Col
+    className="center-empty-state"
+    offset={6}
+    span={12}
+  >
+    <List
+      bordered={false}
+      dataSource={
+        Array [
+          Object {
+            "status": false,
+            "text": "Configured",
+          },
+          Object {
+            "status": false,
+            "text": "Sent data",
+          },
+        ]
+      }
+      footer={
+        <Button
+          block={false}
+          ghost={false}
+          href="https://www.jaegertracing.io/docs/latest/frontend-ui/"
+          loading={false}
+          prefixCls="ant-btn"
+          style={
+            Object {
+              "backgroundColor": "#199",
+              "color": "#fff",
+            }
+          }
+          target="_blank"
+        >
+          Go to documentation
+        </Button>
+      }
+      header={
+        <h2
+          className="ub-m0"
+        >
+          Get started with Services Monitoring
+        </h2>
+      }
+      itemLayout="vertical"
+      loading={false}
+      pagination={false}
+      prefixCls="ant-list"
+      renderItem={[Function]}
+      rowKey="-"
+      size="small"
+      split={false}
+    />
+  </Col>
+</Row>
+`;

packages/jaeger-ui/src/components/Monitoring/EmptyState/index.css

@@ -0,0 +1,20 @@
+/*
+Copyright (c) 2021 The Jaeger Authors.
+
+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.
+*/
+
+.center-empty-state {
+  text-align: center;
+  margin-top: calc(100vh / 3.5);
+}