Support upload trace in Zipkin Lens UI

[tacigar]

Related: #2350
History: #2424

[tacigar]

Oh, I forgot to remove traceId component from search bar...

[tacigar]

Removed TraceId component from search bar...
Please refer #2368 🙇

[tacigar]

Search by trace ID

[tacigar]

Upload Trace JSON

[tacigar]

Current component architecture is a bit complex.
I drew the graph.

[codefromthecrypt]

thanks! please add the "how it works" image to the README at the bottom under a markdown section named design or a separate DESIGN.md

[codefromthecrypt]

Looks good. I like the design and I feel this maximizes the UI functionality without clutter.

one small note about error handling.

[codefromthecrypt]

maybe alert the json is malformed? I assume this catch will result in someone uploading an incorrect file (ex just one span) and getting no feedback about it. correct?

[tacigar]

Yes.
Do you think that it is better to display the alert dialog?

[codefromthecrypt]

old UI did something like this..

[tacigar]

OK, Thank you.
I'll do so

[codefromthecrypt]

note: the view trace screen blows up (white screen) if using v1 json

TypeError: "e is undefined"

    getServiceNameColor http://localhost:9411/zipkin/app-d005bdc780c99e8fec7a.min.js:12 value http://localhost:9411/zipkin/app-d005bdc780c99e8fec7a.min.js:88 value http://localhost:9411/zipkin/app-d005bdc780c99e8fec7a.min.js:88 

In the old uploadTrace.js we had something like this. If you import it, please also import the unit tests.

export function ensureV2(trace) {
  if (!Array.isArray(trace) || trace.length === 0) {
    throw new Error('input is not a list');
  }
  const first = trace[0];
  if (!first.traceId || !first.id) {
    throw new Error('List<Span> implies at least traceId and id fields');
  }
  if (first.binaryAnnotations || (!first.localEndpoint && !first.remoteEndpoint && !first.tags)) {
    throw new Error(
      'v1 format is not supported. For help, contact https://gitter.im/openzipkin/zipkin');
  }
}

[codefromthecrypt]

Looks good besides the blowup. I tested uploading a v2 json and also get trace by ID

[tacigar]

note: the view trace screen blows up (white screen) if using v1 json

TypeError: "e is undefined"

    getServiceNameColor http://localhost:9411/zipkin/app-d005bdc780c99e8fec7a.min.js:12 value http://localhost:9411/zipkin/app-d005bdc780c99e8fec7a.min.js:88 value http://localhost:9411/zipkin/app-d005bdc780c99e8fec7a.min.js:88 

In the old uploadTrace.js we had something like this. If you import it, please also import the unit tests.

export function ensureV2(trace) {
  if (!Array.isArray(trace) || trace.length === 0) {
    throw new Error('input is not a list');
  }
  const first = trace[0];
  if (!first.traceId || !first.id) {
    throw new Error('List<Span> implies at least traceId and id fields');
  }
  if (first.binaryAnnotations || (!first.localEndpoint && !first.remoteEndpoint && !first.tags)) {
    throw new Error(
      'v1 format is not supported. For help, contact https://gitter.im/openzipkin/zipkin');
  }
}

I see!
I'll do so

[tacigar]

If uploaded file is not JSON...

If v1 format file is uploaded...

[codefromthecrypt]

goodie!

[shakuzen]

Great work, @tacigar!