Added tooltip when hovered on header column of TraceStatistics view

packages/jaeger-ui/src/components/TracePage/TraceStatistics/index.test.js

@@ -89,4 +89,12 @@ describe('<TraceTagOverview>', () => {
     expect(instance.state.popupContent).toBe('select *');
     expect(instance.state.showPopup).toBe(false);
   });
+
+  it('check toggleToolTip', () => {
+    const instance = wrapper.instance();
+    wrapper.find({ 'data-testid': 'Name' }).simulate('mouseover');
+    expect(instance.state.showSorterTooltip).toBe(false);
+    wrapper.find({ 'data-testid': 'Name' }).simulate('mouseleave');
+    expect(instance.state.showSorterTooltip).toBe(true);
+  });
 });

packages/jaeger-ui/src/components/TracePage/TraceStatistics/index.tsx

@@ -14,7 +14,7 @@
 
 import React, { Component } from 'react';
 import './index.css';
-import { Table } from 'antd';
+import { Table, Tooltip } from 'antd';
 import { ColumnProps } from 'antd/es/table';
 import { Trace } from '../../../types/trace';
 import TraceStatisticsHeader from './TraceStatisticsHeader';
@@ -33,6 +33,7 @@ type State = {
   sortIndex: number;
   sortAsc: boolean;
   showPopup: boolean;
+  showSorterTooltip: boolean;
   popupContent: string;
   wholeTable: ITableSpan[];
   valueNameSelector1: string;
@@ -44,56 +45,68 @@ const columnsArray: any[] = [
     title: 'Name',
     attribute: 'name',
     suffix: '',
+    titleDescription: 'Service Name of a span',
   },
   {
     title: 'Count',
     attribute: 'count',
     suffix: '',
+    titleDescription: 'Number of spans',
   },
   {
     title: 'Total',
     attribute: 'total',
     suffix: 'ms',
+    titleDescription: 'Total duaration of all spans',
   },
   {
     title: 'Avg',
     attribute: 'avg',
     suffix: 'ms',
+    titleDescription: 'Average duaration of all spans',
   },
   {
     title: 'Min',
     attribute: 'min',
     suffix: 'ms',
+    titleDescription: 'Minimum duaration from the duaration of all spans',
   },
   {
     title: 'Max',
     attribute: 'max',
     suffix: 'ms',
+    titleDescription: 'Maximum duaration from the duaration of all spans',
   },
   {
     title: 'ST Total',
     attribute: 'selfTotal',
     suffix: 'ms',
+    titleDescription:
+      'Sum of Self time(Total time spent in a span when it was not waiting on children.) of all spans',
   },
   {
     title: 'ST Avg',
     attribute: 'selfAvg',
     suffix: 'ms',
+    titleDescription: 'Average value of self time of all spans',
   },
   {
     title: 'ST Min',
     attribute: 'selfMin',
     suffix: 'ms',
+    titleDescription: 'Minimum value from self time of all spans',
   },
   {
     title: 'ST Max',
     attribute: 'selfMax',
     suffix: 'ms',
+    titleDescription: 'Maximum value from self time of all spans',
   },
   {
     title: 'ST in Duration',
     attribute: 'percent',
     suffix: '%',
+    titleDescription: 'Percentage of self time in the total duration of all spans',
   },
 ];
 
@@ -109,6 +122,7 @@ export default class TraceStatistics extends Component<Props, State> {
       sortIndex: 1,
       sortAsc: false,
       showPopup: false,
+      showSorterTooltip: true,
       popupContent: '',
       wholeTable: [],
       valueNameSelector1: 'Service Name',
@@ -179,6 +193,10 @@ export default class TraceStatistics extends Component<Props, State> {
     });
   }
 
+  toogleToolTip(a: boolean) {
+    this.setState(prevState => ({ ...prevState, showSorterTooltip: a }));
+  }
+
   /**
    * Colors found entries in the table.
    * @param uiFindVertexKeys Set of found spans
@@ -296,11 +314,22 @@ export default class TraceStatistics extends Component<Props, State> {
         return `${cell}${val.suffix}`;
       };
       const ele = {
-        title: val.title,
+        title: (
+          <Tooltip title={<span>{val.titleDescription}</span>}>
+            <span
+              data-testid={val.title}
+              onMouseOver={() => this.toogleToolTip(false)}
+              onMouseLeave={() => this.toogleToolTip(true)}
+            >
+              {val.title}
+            </span>
+          </Tooltip>
+        ),
         dataIndex: val.attribute,
         sorter: sorterFunction(val.attribute),
         render: renderFunction,
         onCell: onCellFunction,
+        showSorterTooltip: this.state.showSorterTooltip,
       };
       return val.attribute === 'count' ? { ...ele, defaultSortOrder: 'ascend' } : ele;
     });