[APM] Query bar - Update default input placeholder to indicate use-case and examples

[formgeist]

Summary

We want to indicate to the user which types of documents are available for searching; transactions and errors. Additionally the user will benefit from having an example of use.

Design example

Tasks

• Update placeholder input default to; Search transactions or errors… (i.e. transaction.duration.us => 100000)

[elasticmachine]

Pinging @elastic/apm-ui

[makwarth]

@formgeist Any reason for APM UI to have a different query bar input/button design compared to Discover? (Not that they have to be identical, but curious on your thoughts)

[formgeist]

In the above example, I used the Eui component styling (because it's like that in Sketch), which has yet to be updated in Discover. We currently haven't updated much to Eui, besides the buttons and popovers, we can leave it the old style until we convert more components over. I'm happy with leaving as is, just why my screenshot looks different.

[makwarth]

As is doesn't look like Discover? Up to you. I mainly want to make sure that we have the final design ready for Søren, when he gets back.

[formgeist]

I think we should leave it as is for now and just replace the placeholder texts. We'll go over and replace all our components soon enough and convert to Eui, but the time is not now.