Sort span tags in alphabetical order

[nabam]

Which problem is this PR solving?

Resolves #218
Expanding a span on the UI shows collapsed list of tags which can be expanded again. When there are many tags it's hard to find the one a person is looking for

Short description of the changes

• Trace span tags are getting sorted after deduplication in reducer
• New option topTagPrefixes?: string[] introduced in UI configuration file. Tags with keys matching this prefixes will be displayed at the top preserving order of prefixes.

[codecov]

Codecov Report

Merging #489 into master will increase coverage by 0.02%.
The diff coverage is 94.73%.

@@            Coverage Diff             @@
##           master     #489      +/-   ##
==========================================
+ Coverage   92.71%   92.74%   +0.02%     
==========================================
  Files         193      193              
  Lines        4655     4672      +17     
  Branches     1121     1126       +5     
==========================================
+ Hits         4316     4333      +17     
  Misses        299      299              
  Partials       40       40

Impacted Files	Coverage Δ
...kages/jaeger-ui/src/model/transform-trace-data.tsx	88.09% <94.73%> (+3.02%)	⬆️

---

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 36ab156...129d8ac. Read the comment docs.

[nabam]

I'm not very familiar with javascript, react and redux. Please let me know if I'm doing something bizarre.

[yurishkuro]

the priority sorting feels contrary to the intention of this PR. Is it really necessary?

[nabam]

Sorting by itself makes it much easier to find relevant information in a trace compare to experience with tags in the random order. At least the tag one is trying to follow is at the same position in every span.

I was trying to find a way to access tags that that are more relevant than others faster. Issue #218 mentions that and in my installation I have a similar problem

Without priority sorting I would have to name tags the way they are alphabetically in order of importance to get most relevant ones in that view.

Though I bet there are more elegant solutions for that UX problem than priority sorting. I think it's quite a standard approach to have many tags some of which are used rarely for things like troubleshooting corner cases and others are crucial for most of the usage scenarios.

[everett980]

I like the priority sorting as a config option, but I wouldn't add a default value.

[everett980]

Thanks for the diff @nabam! I left some small change requests, but otherwise it looks good to me.

[everett980]

I think this should be case insensitive, so below this I would add:

const aKey = a.key.toLowerCase();
const bKey = b.key.toLowerCase();

and then use aKey and bKey in place of a.key and b.key

and above tree.walk on line 111 I would add:

const prefixes = getConfigValue('topTagPrefixes');
const topTagPrefixes = prefixes && prefixes.map(p => p.toLowerCase())`;

[nabam]

I think that toLowerCase mapping can be done inside orderTags. It's a bit of performance loss but makes code more testable.

[everett980]

I like the priority sorting as a config option, but I wouldn't add a default value.

[everett980]

Thanks again @nabam. I will merge once automatic checks run and pass.