[POC] Jaeger Integration

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@kiali/kiali-ui",
   "version": "0.12.0",
+  "proxy": "https://kiali-istio-system.127.0.0.1.nip.io",
   "description": "React UI for [Kiali](https://github.com/kiali/kiali).",
   "keywords": [
     "istio service mesh",
@@ -69,6 +70,7 @@
     "deep-freeze": "0.0.1",
     "js-yaml": "3.12.0",
     "lodash": "4.17.11",
+    "logfmt": "^1.2.1",
     "patternfly": "3.48.3",
     "patternfly-react": "2.20.3",
     "react": "16.5.2",

src/actions/HelpDropdownThunkActions.ts

@@ -2,6 +2,7 @@ import { ThunkDispatch } from 'redux-thunk';
 import { KialiAppState } from '../store/Store';
 import { MessageType } from '../types/MessageCenter';
 import { HelpDropdownActions } from './HelpDropdownActions';
+import { JaegerActions } from './JaegerActions';
 import { KialiAppAction } from './KialiAppAction';
 import { MessageCenterActions } from './MessageCenterActions';
 import * as API from '../services/Api';
@@ -18,6 +19,13 @@ const HelpDropdownThunkActions = {
               status['data']['warningMessages']
             )
           );
+
+          // Get the jaeger URL
+          const hasJaeger = status['data']['externalServices'].filter(item => item['name'] === 'Jaeger');
+          if (hasJaeger.length === 1) {
+            dispatch(JaegerActions.setUrl(hasJaeger[0]['url']));
+          }
+
           status['data']['warningMessages'].forEach(wMsg => {
             dispatch(MessageCenterActions.addMessage(wMsg, 'systemErrors', MessageType.WARNING));
           });

src/actions/JaegerActions.ts

@@ -0,0 +1,62 @@
+import { ActionType, createAction, createStandardAction } from 'typesafe-actions';
+
+enum JaegerActionKeys {
+  SET_URL = 'SET_URL',
+  SERVICE_REQUEST_STARTED = 'SERVICE_REQUEST_STARTED',
+  SERVICE_SUCCESS = 'SERVICE_SUCCESS',
+  SERVICE_FAILED = 'SERVICE_FAILED',
+  SET_SERVICE = 'SET_SERVICE',
+  SET_NAMESPACE = 'SET_NAMESPACE',
+  SET_LOOKBACK = 'SET_LOOKBACK',
+  SET_LOOKBACK_CUSTOM = 'SET_LOOKBACK_CUSTOM',
+  SET_SEARCH_REQUEST = 'SET_SEARCH_REQUEST',
+  SET_TAGS = 'SET_TAGS',
+  SET_LIMIT = 'SET_LIMIT',
+  SET_DURATIONS = 'SET_DURATIONS',
+
+  // RESULTS VISUALZIATION OPTIONS
+  SET_SEARCH_GRAPH_TO_HIDE = 'SET_SEARCH_GRAPH_TO_HIDE',
+
+  // TRACE VISUALIZATION OPTIONS
+  SET_TRACE_MINIMAP_TO_SHOW = 'SET_TRACE_MINIMAP_TO_SHOW',
+  SET_TRACE_DETAILS_TO_SHOW = 'SET_TRACE_DETAILS_TO_SHOW'
+}
+
+// synchronous action creators
+export const JaegerActions = {
+  setUrl: createAction(JaegerActionKeys.SET_URL, resolve => (url: string) =>
+    resolve({
+      url: 'http://localhost:3001'
+    })
+  ),
+  requestStarted: createAction(JaegerActionKeys.SERVICE_REQUEST_STARTED),
+  requestFailed: createAction(JaegerActionKeys.SERVICE_FAILED),
+  receiveList: createAction(JaegerActionKeys.SERVICE_SUCCESS, resolve => (newList: string[]) =>
+    resolve({
+      list: newList
+    })
+  ),
+  setService: createStandardAction(JaegerActionKeys.SET_SERVICE)<string>(),
+  setNamespace: createStandardAction(JaegerActionKeys.SET_NAMESPACE)<string>(),
+  setLookback: createStandardAction(JaegerActionKeys.SET_LOOKBACK)<string>(),
+  setTags: createStandardAction(JaegerActionKeys.SET_TAGS)<string>(),
+  setLimit: createStandardAction(JaegerActionKeys.SET_LIMIT)<number>(),
+  setSearchRequest: createStandardAction(JaegerActionKeys.SET_SEARCH_REQUEST)<string>(),
+  setSearchGraphToHide: createStandardAction(JaegerActionKeys.SET_SEARCH_GRAPH_TO_HIDE)<boolean>(),
+  setMinimapToShow: createStandardAction(JaegerActionKeys.SET_TRACE_MINIMAP_TO_SHOW)<boolean>(),
+  setDetailsToShow: createStandardAction(JaegerActionKeys.SET_TRACE_DETAILS_TO_SHOW)<boolean>(),
+  setCustomLookback: createAction(JaegerActionKeys.SET_LOOKBACK_CUSTOM, resolve => (start: string, end: string) =>
+    resolve({
+      start: start,
+      end: end
+    })
+  ),
+  setDurations: createAction(JaegerActionKeys.SET_DURATIONS, resolve => (min: string, max: string) =>
+    resolve({
+      min: min,
+      max: max
+    })
+  )
+};
+
+export type JaegerAction = ActionType<typeof JaegerActions>;

src/actions/JaegerThunkActions.ts

@@ -0,0 +1,155 @@
+import { JaegerActions } from './JaegerActions';
+
+import * as Api from '../services/Api';
+
+import { ServiceOverview } from '../types/ServiceList';
+import { KialiAppState } from '../store/Store';
+import { ThunkDispatch } from 'redux-thunk';
+import { KialiAppAction } from './KialiAppAction';
+import { JAEGER_QUERY } from '../config';
+import logfmtParser from 'logfmt/lib/logfmt_parser';
+import moment from 'moment';
+import { HTTP_VERBS } from '../types/Common';
+import { converToTimestamp } from '../reducers/JaegerState';
+
+export const convTagsLogfmt = (tags: string) => {
+  if (!tags) {
+    return null;
+  }
+  const data = logfmtParser.parse(tags);
+  Object.keys(data).forEach(key => {
+    const value = data[key];
+    // make sure all values are strings
+    // https://github.com/jaegertracing/jaeger/issues/550#issuecomment-352850811
+    if (typeof value !== 'string') {
+      data[key] = String(value);
+    }
+  });
+  return JSON.stringify(data);
+};
+
+class JaegerURLSearch {
+  url: string;
+
+  constructor(url: string) {
+    this.url = `${url}${JAEGER_QUERY().PATH}?${JAEGER_QUERY().EMBED.UI_EMBED}=${JAEGER_QUERY().EMBED.VERSION}`;
+  }
+
+  addQueryParam(param: string, value: string | number) {
+    this.url += `&${param}=${value}`;
+  }
+
+  addParam(param: string) {
+    this.url += `&${param}`;
+  }
+}
+
+const getUnixTimeStampInMSFromForm = (
+  startDate: string,
+  startDateTime: string,
+  endDate: string,
+  endDateTime: string
+) => {
+  const start = `${startDate} ${startDateTime}`;
+  const end = `${endDate} ${endDateTime}`;
+  return {
+    start: `${moment(start, 'YYYY-MM-DD HH:mm').valueOf()}000`,
+    end: `${moment(end, 'YYYY-MM-DD HH:mm').valueOf()}000`
+  };
+};
+
+export const JaegerThunkActions = {
+  asyncFetchServices: (ns: string) => {
+    return (dispatch: ThunkDispatch<KialiAppState, void, KialiAppAction>, getState: () => KialiAppState) => {
+      if (getState()['authentication']['token'] === undefined) {
+        return Promise.resolve();
+      }
+      /** Get the token storage in redux-store */
+      const token = getState().authentication.token!.token;
+      /** generate Token */
+      const auth = `Bearer ${token}`;
+
+      // Dispatch a thunk from thunk!
+      dispatch(JaegerActions.requestStarted());
+      return Api.getServices(auth, ns)
+        .then(response => response['data'])
+        .then(data => {
+          let serviceList: string[] = [];
+          data['services'].forEach((aService: ServiceOverview) => {
+            serviceList.push(aService.name);
+          });
+          dispatch(JaegerActions.receiveList(serviceList));
+        })
+        .catch(() => dispatch(JaegerActions.requestFailed()));
+    };
+  },
+  getSearchURL: () => {
+    return (dispatch: ThunkDispatch<KialiAppState, void, KialiAppAction>, getState: () => KialiAppState) => {
+      const searchOptions = getState().jaegerState.search;
+      const jaegerOptions = JAEGER_QUERY().OPTIONS;
+      let urlRequest = new JaegerURLSearch(getState().jaegerState.jaegerURL);
+
+      // Search options
+      urlRequest.addQueryParam(jaegerOptions.START_TIME, searchOptions.start);
+      urlRequest.addQueryParam(jaegerOptions.END_TIME, searchOptions.end);
+      urlRequest.addQueryParam(jaegerOptions.LIMIT_TRACES, searchOptions.limit);
+      urlRequest.addQueryParam(jaegerOptions.LOOKBACK, searchOptions.lookback);
+      urlRequest.addQueryParam(jaegerOptions.MAX_DURATION, searchOptions.maxDuration);
+      urlRequest.addQueryParam(jaegerOptions.MIN_DURATION, searchOptions.minDuration);
+      urlRequest.addQueryParam(jaegerOptions.SERVICE_SELECTOR, searchOptions.serviceSelected);
+      const logfmtTags = convTagsLogfmt(searchOptions.tags);
+      if (logfmtTags) {
+        urlRequest.addQueryParam(jaegerOptions.TAGS, logfmtTags);
+      }
+
+      // Embed Options
+      const traceOptions = getState().jaegerState.trace;
+
+      // Rename query params for 1.9 Jaeger
+      urlRequest.addQueryParam(JAEGER_QUERY().EMBED.UI_TRACE_HIDE_MINIMAP, traceOptions.hideMinimap ? '1' : '0');
+      urlRequest.addQueryParam(JAEGER_QUERY().EMBED.UI_SEARCH_HIDE_GRAPH, searchOptions.hideGraph ? '1' : '0');
+      urlRequest.addQueryParam(JAEGER_QUERY().EMBED.UI_TRACE_HIDE_SUMMARY, traceOptions.hideSummary ? '1' : '0');
+
+      /*
+      if (!traceOptions.showMinimap) {
+        urlRequest.addParam(JAEGER_QUERY().EMBED.UI_TRACE_HIDE_MINIMAP);
+      }
+
+      if (searchOptions.hideGraph) {
+        urlRequest.addParam(JAEGER_QUERY().EMBED.UI_SEARCH_HIDE_GRAPH);
+      }
+
+      if (traceOptions.showDetails) {
+        urlRequest.addParam(JAEGER_QUERY().EMBED.UI_TRACE_SHOW_DETAILS);
+      }
+      */
+      return dispatch(JaegerActions.setSearchRequest(urlRequest.url));
+    };
+  },
+  setCustomLookback: (startDate: string, startTime: string, endDate: string, endTime: string) => {
+    return (dispatch: ThunkDispatch<KialiAppState, void, KialiAppAction>, getState: () => KialiAppState) => {
+      if (getState().jaegerState.search.lookback === 'custom') {
+        const toTimestamp = getUnixTimeStampInMSFromForm(startDate, startTime, endDate, endTime);
+        dispatch(JaegerActions.setCustomLookback(toTimestamp.start, toTimestamp.end));
+      }
+    };
+  },
+  getErrorTraces: (service: string) => {
+    return (dispatch: ThunkDispatch<KialiAppState, void, KialiAppAction>, getState: () => KialiAppState) => {
+      const nowTime = Date.now() * 1000;
+      const endTime = `${nowTime}`;
+      const startTime = `${nowTime - converToTimestamp('1h')}`;
+      let url =
+        `${getState().jaegerState.jaegerURL}/api/traces?` +
+        `service=${service}&` +
+        `end=${endTime}&start=${startTime}&` +
+        `tags=%7B"error"%3A"true"%7D`;
+
+      Api.newRequest(HTTP_VERBS.GET, url, {}, {})
+        .then(response => {
+          console.log(response);
+        })
+        .catch(() => dispatch(JaegerActions.requestFailed()));
+    };
+  }
+};

src/actions/KialiAppAction.ts

@@ -8,6 +8,7 @@ import { LoginAction } from './LoginActions';
 import { MessageCenterAction } from './MessageCenterActions';
 import { NamespaceAction } from './NamespaceAction';
 import { UserSettingsAction } from './UserSettingsActions';
+import { JaegerAction } from './JaegerActions';
 
 export type KialiAppAction =
   | GlobalAction
@@ -19,4 +20,5 @@ export type KialiAppAction =
   | LoginAction
   | MessageCenterAction
   | NamespaceAction
-  | UserSettingsAction;
+  | UserSettingsAction
+  | JaegerAction;