add error callout on watch details page

[alisonelizabeth]

Changes in this PR include:

• update tables to use pagination constant
• add error callout on watch detail page when any of the actions contain errors.
• fixed some missing validation checks with jira action type

Note: I switched to the callout instead of a modal, since EUI docs seem to discourage using a modal for this type of usage. Let me know if you have any feedback regarding this.

Testing:

1. Go to the dev console and create a watch with an invalid action.

For example, this watch adds an email watch without the to property (Email action attributes).

PUT _xpack/watcher/watch/my_test_watch
{
  "trigger": {
    "schedule": {
      "interval": "1h"
    }
  },
  "input": {
    "simple": {}
  },
  "actions": {
    "my_email_action": {
      "email": {
      }
    }
  }
}

2. Go back to the watch list table and select the newly created watch.

Screenshots:

w/ changes:

old UI (for reference):

[elasticmachine]

Pinging @elastic/es-ui

[cjcenizal]

Code looks great, tested locally and had a few UX suggestions.

[cjcenizal]

I can imagine a user getting frustrated if they fix json.jira.fields only to be yelled at for not having json.jira.fields.project, and then fix json.jira.fields.project only to be yelled at for not having json.jira.fields.project.key. I think it might be a better UX if we just check for get(json, 'actionJson.jira.fields.project.key') and then tell them they need json.jira.fields.project.key. WDYT?

This comment applies to the issuetype validation below, too.

[alisonelizabeth]

Good point :) Fixed!

[cjcenizal]

Nice call! I think this is a big improvement over the modal. Is it possible for there to be a lot of actions, and they could all have errors? In this case, the callout would become very tall, and it would be difficult to correlate an error in the callout with a row in the actions table.

If you agree, then I think a more usable solution would be to make each "Config error" status a link which, when clicked, opens a flyout containing a danger callout like this one, except it only contains the errors for that specific action.

[alisonelizabeth]

Yeah, I thought of that as well. That's a good point.

Latest changes:

[cjcenizal]

If we go with the flyout solution, we can put this content in the title of the callout.

You could even add logic to wrap the error message in a <p> if there's only one error, or to use a list if there's more than one. This would avoid the strange appearance of a single bullet.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cjcenizal]

Tested locally, code LGTM