Use Ant Design instead of Semantic UI

[tiffon]

Fix #165. Fix #164. Fix #69.

Note: The blue highlights in the search form in some of the screenshots are outdated. Please refer to the screenshots marked with "†"

Screenshot of the search page showing the custom menu dropdown.

† Service and operation dropdowns now use react react-virtualized-select and are able to show the full list of options.

Hint for tags input.

Hint for start date and time input.

† No results.

Result list, with a hovered item.

Trace detail view.

Trace name is clickable to collapse the mini-map and overview information.

Collapsed view.

Keyboard shortcut info.

Parent spans can be collapsed.

A collapsed parent span.

A span detail row.

Various details expanded.

The force directed graph of the services.

The DAG.

[codecov]

Codecov Report

Merging #169 into master will decrease coverage by 1.79%.
The diff coverage is 68.38%.

@@            Coverage Diff            @@
##           master     #169     +/-   ##
=========================================
- Coverage   92.67%   90.88%   -1.8%     
=========================================
  Files          85       93      +8     
  Lines        1884     1930     +46     
  Branches      368      383     +15     
=========================================
+ Hits         1746     1754      +8     
- Misses        125      153     +28     
- Partials       13       23     +10

Impacted Files	Coverage Δ
src/components/App/index.js	100% <ø> (ø)	⬆️
...nents/TracePage/TraceTimelineViewer/TimelineRow.js	100% <ø> (ø)	⬆️
src/components/TracePage/SpanGraph/index.js	76.92% <ø> (ø)	⬆️
...e/TraceTimelineViewer/SpanDetail/KeyValuesTable.js	77.77% <ø> (ø)	⬆️
src/components/App/NotFound.js	0% <ø> (ø)	⬆️
src/utils/sort.js	100% <ø> (ø)	⬆️
...onents/TracePage/TraceTimelineViewer/SpanBarRow.js	80% <ø> (ø)	⬆️
...nts/TracePage/TraceTimelineViewer/SpanDetailRow.js	100% <ø> (ø)	⬆️
...ge/TraceTimelineViewer/SpanDetail/AccordianLogs.js	100% <ø> (ø)	⬆️
.../components/TracePage/TraceTimelineViewer/index.js	50% <ø> (ø)	⬆️
... and 40 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update da464e5...d02bbe4. Read the comment docs.

[saminzadeh]

Should we change the light blue colors (eg on the dropdown, out of buttons) to the turquoise that is used throughout the page?

[ekelleyv]

Caveat that my comments are entirely based on the screenshots posted, but just wanted to share a couple of thoughts. Let me know if this is worth discussing somewhere else rather than this PR.

It may be helpful to test some of these designs with applications that have many internal spans. The hot rod application doesn't have too many levels of indentation and uses several different "application tracers" resulting in spans that are more visually legible. Here is a short segment from a trace in our infra::

Since everything is in the same service and there are several levels of indentation, it is very hard to see what elements are children of the others.

A couple suggestions:

1. Add guidelines down each indentation level like code editors do for whitespace
   

2. When a parent is hovered, every element that is a child of that element should have some sort of hover state. At the very least, the first and last child should have some marker. I would suggest just extending that hover state down to cover its children (mockup based on posted screenshots):
   

Aside from that, the screenshots posted here look great.

[tiffon]

@ekelleyv Thanks for the feedback and suggestion! We've discussed guidelines, internally, but have yet to create a ticket for it. I'll add one now. (Edit: The ticket: #172)

@saminzadeh The color change sounds good to me. 👍

[tiffon]

@saminzadeh The color change is done:

https://user-images.githubusercontent.com/2304337/35190241-d0654810-fe2a-11e7-8b2a-2582d3c30512.png

https://user-images.githubusercontent.com/2304337/35190239-c8e045a4-fe2a-11e7-9e79-d3de208b9e9a.png

[saminzadeh]

Overall looks good to me given the changes are mostly style and AntD components. Made some small comments about BassCSS.

Also, as mentioned in [previous discussions] (#104), is it worth starting to version the UI. This seems to be pretty big theme change

[saminzadeh]

Curious what u-space does? Is it a utility?

I notice that we removed Basscss. IMO, I think we should use basscss as a CSS utility library since its small (~2kb), low on side effects and documented.

[saminzadeh]

See common above, should we use Basscss? Believe it will help with developer productivity since its OSS.

[tiffon]

@saminzadeh Thanks for the suggestion re basscss. I prefer the util css class names to be prepended with u-*, so I forked basscss ((u-basscss)[https://github.com/tiffon/u-basscss]). I also made it so sub-sets of the package can be imported, instead of only the full package.