Fix span order and additional fields for Jaeger

CHANGELOG.md

@@ -22,6 +22,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#109](https://github.com/kobsio/kobs/pull/109): Fix tooltip position in Prometheus charts.
 - [#110](https://github.com/kobsio/kobs/pull/110): Fix Dashboard tabs showing wrong variables.
 - [#111](https://github.com/kobsio/kobs/pull/111): Fix usage of `memo` in Dashboards and fix resources table for CRDs when a value is undefined.
+- [#114](https://github.com/kobsio/kobs/pull/114): Fix span order and additional fields for Jaeger plugin.
 
 ### Changed
 

plugins/core/src/components/misc/Options.tsx

@@ -142,6 +142,21 @@ export const Options: React.FunctionComponent<IOptionsProps> = ({
   // change the start and end time to the new values. If the string couldn't be parsed, the user will see an error below
   // the corresponding input field.
   const apply = (): void => {
+    // If the time wasn't changed by the user, we keep the selected time interval and only refresh the time for the
+    // selected interval and change the additional fields. This allows a user to adjust an additional field without
+    // switching to a custom time interval.
+    if (customTimeEnd === formatTime(timeEnd) && customTimeStart === formatTime(timeStart) && time !== 'custom') {
+      setOptions(
+        false,
+        additionalFields,
+        time,
+        Math.floor(Date.now() / 1000),
+        Math.floor(Date.now() / 1000) - times[time].seconds,
+      );
+      setShow(false);
+      return;
+    }
+
     // Get a new date object for the users current timezone. This allows us to ignore the timezone, while parsing the
     // provided time string. The parsed date object will be in UTC, to transform the parsed date into the users timezone
     // we have to add the minutes between UTC and the users timezon (getTimezoneOffset()).

plugins/jaeger/src/components/page/TraceCompare.tsx

@@ -54,7 +54,6 @@ const TraceCompare: React.FunctionComponent<ITraceCompareProps> = ({ name, trace
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   if (isLoading) {

plugins/jaeger/src/components/page/Traces.tsx

@@ -10,8 +10,8 @@ import { Link, useHistory, useLocation } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
 
 import { IOptions } from '../../utils/interfaces';
-import PageToolbar from './TracesToolbar';
 import TracesPanel from '../panel/Traces';
+import TracesToolbar from './TracesToolbar';
 import { getOptionsFromSearch } from '../../utils/helpers';
 
 interface ITracesProps {
@@ -55,7 +55,7 @@ const Traces: React.FunctionComponent<ITracesProps> = ({ name, displayName, desc
           </span>
         </Title>
         <p>{description}</p>
-        <PageToolbar
+        <TracesToolbar
           name={name}
           limit={options.limit}
           maxDuration={options.maxDuration}

plugins/jaeger/src/components/page/TracesToolbar.tsx

@@ -16,12 +16,12 @@ import { IOptions } from '../../utils/interfaces';
 import TracesToolbarOperations from './TracesToolbarOperations';
 import TracesToolbarServices from './TracesToolbarServices';
 
-interface IPageToolbarProps extends IOptions {
+interface ITracesToolbarProps extends IOptions {
   name: string;
   setOptions: (data: IOptions) => void;
 }
 
-const PageToolbar: React.FunctionComponent<IPageToolbarProps> = ({
+const TracesToolbar: React.FunctionComponent<ITracesToolbarProps> = ({
   name,
   limit,
   maxDuration,
@@ -31,7 +31,7 @@ const PageToolbar: React.FunctionComponent<IPageToolbarProps> = ({
   tags,
   times,
   setOptions,
-}: IPageToolbarProps) => {
+}: ITracesToolbarProps) => {
   const [data, setData] = useState<IOptions>({
     limit: limit,
     maxDuration: maxDuration,
@@ -64,6 +64,9 @@ const PageToolbar: React.FunctionComponent<IPageToolbarProps> = ({
 
       setData({
         ...tmpData,
+        limit: additionalFields[0].value,
+        maxDuration: additionalFields[1].value,
+        minDuration: additionalFields[2].value,
         times: { time: time, timeEnd: timeEnd, timeStart: timeStart },
       });
     }
@@ -141,4 +144,4 @@ const PageToolbar: React.FunctionComponent<IPageToolbarProps> = ({
   );
 };
 
-export default PageToolbar;
+export default TracesToolbar;

plugins/jaeger/src/components/page/TracesToolbarOperations.tsx

@@ -29,7 +29,7 @@ const TracesToolbarOperations: React.FunctionComponent<ITracesToolbarOperationsP
         const json = await response.json();
 
         if (response.status >= 200 && response.status < 300) {
-          return ['All Operations', ...json.data.map((operation: IOperation) => operation.name)];
+          return ['All Operations', ...json.data.map((operation: IOperation) => operation.name).sort()];
         } else {
           if (json.error) {
             throw new Error(json.error);

plugins/jaeger/src/components/page/TracesToolbarServices.tsx

@@ -23,7 +23,7 @@ const TracesToolbarServices: React.FunctionComponent<ITracesToolbarServicesProps
       const json = await response.json();
 
       if (response.status >= 200 && response.status < 300) {
-        return json.data;
+        return json.data.sort();
       } else {
         if (json.error) {
           throw new Error(json.error);

plugins/jaeger/src/components/panel/Traces.tsx

@@ -58,7 +58,6 @@ const Traces: React.FunctionComponent<ITracesProps> = ({
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   return (

plugins/jaeger/src/components/panel/details/Spans.tsx

@@ -2,7 +2,7 @@ import { Accordion, Card, CardBody } from '@patternfly/react-core';
 import React from 'react';
 
 import { ISpan, ITrace } from '../../../utils/interfaces';
-import { createSpansTree, getDuration } from '../../../utils/helpers';
+import { createSpansTree, getDuration, getRootSpan } from '../../../utils/helpers';
 import Span from './Span';
 import SpansChart from './SpansChart';
 
@@ -12,8 +12,13 @@ export interface ISpansProps {
 }
 
 const Spans: React.FunctionComponent<ISpansProps> = ({ name, trace }: ISpansProps) => {
+  const rootSpan = trace.spans.length > 0 ? getRootSpan(trace.spans) : undefined;
+  if (!rootSpan) {
+    return null;
+  }
+
   const duration = getDuration(trace.spans);
-  const spans: ISpan[] = createSpansTree(trace.spans, trace.spans[0].startTime, duration);
+  const spans: ISpan[] = createSpansTree(trace.spans, rootSpan.startTime, duration);
 
   return (
     <React.Fragment>

plugins/jaeger/src/utils/helpers.ts

@@ -174,6 +174,14 @@ export const createSpansTree = (spans: ISpan[], traceStartTime: number, duration
   const map: IMap = {};
   const roots: ISpan[] = [];
 
+  spans.sort((a, b) => {
+    if (a.startTime < b.startTime) {
+      return -1;
+    }
+
+    return 1;
+  });
+
   for (let i = 0; i < spans.length; i++) {
     map[spans[i].spanID] = i;
     spans[i].childs = [];

plugins/opsgenie/src/components/panel/Alerts.tsx

@@ -37,7 +37,6 @@ const Alerts: React.FunctionComponent<IAlertsProps> = ({ name, query, times, set
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   if (isLoading) {

plugins/opsgenie/src/components/panel/Incidents.tsx

@@ -37,7 +37,6 @@ const Incidents: React.FunctionComponent<IIncidentsProps> = ({ name, query, time
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   if (isLoading) {

plugins/opsgenie/src/components/panel/details/Logs.tsx

@@ -43,7 +43,6 @@ const Logs: React.FunctionComponent<ILogsProps> = ({ name, id, type }: ILogsProp
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   if (isLoading) {

plugins/opsgenie/src/components/panel/details/Notes.tsx

@@ -43,7 +43,6 @@ const Notes: React.FunctionComponent<INotesProps> = ({ name, id, type }: INotesP
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   if (isLoading) {

plugins/opsgenie/src/components/panel/details/alert/Details.tsx

@@ -43,7 +43,6 @@ const Details: React.FunctionComponent<IDetailsProps> = ({ name, id }: IDetailsP
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   if (isLoading) {

plugins/opsgenie/src/components/panel/details/incident/Timeline.tsx

@@ -42,7 +42,6 @@ const Details: React.FunctionComponent<IDetailsProps> = ({ name, id }: IDetailsP
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   if (isLoading) {

plugins/rss/src/components/panel/Feed.tsx

@@ -36,7 +36,6 @@ const Alerts: React.FunctionComponent<IFeedProps> = ({ urls, sortBy, setDetails
         throw err;
       }
     },
-    { keepPreviousData: true },
   );
 
   if (isLoading) {