Fix span order and additional fields for Jaeger (#114)

The Jaeger plugin had two bugs, where spans were not shown in the
correct order, because we didn't use the start time of the root span,
but the start time of the first span in a trace and we didn't sorted the
spans by there start date before we build the our span tree. These two
bugs are fixed now.

We also fixed a bug, where the additional fields from the options modal
on the Jaeger page, where not used to get the list of traces, because we
didn't changed the additional fields data in the toolbar component.

We also improved the loading indication for several plugins by not
keeping the previous data. This feature is now only used for the
dashboard variables and the Prometheus plugin, where we show the spinner
in the panel header when new data is loaded.

Last but not least we improved the time handling in the Options
component of the core package, so that we keep the selected time range
when a user only changes an additional field.

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) {