[Uptime] Add Custom Fleet Integration UI

[dominiqueclarke]

Summary

Fixes #91062

Running this PR

This PR can be run through "Run my Kibana PR" in the edge environment, or locally.

As of 4/12, the edge environment is down preventing running through Run my Kibana PR

Step 1: Run Kibana Locally

• Clone this repo and pull down this PR
• Update kibana.dev.yaml to include the following fields:

xpack.fleet.enabled: true
xpack.fleet.registryUrl: "https://epr-staging.elastic.co"
xpack.fleet.agents.enabled: true
xpack.fleet.agents.fleet_server.hosts: []
xpack.fleet.agents.tlsCheckDisabled: true
xpack.fleet.agents.fleetServerEnabled: true
xpack.encryptedSavedObjects.encryptionKey: "12345678901234567890123456789012"

• run es with command yarn es snapshot -E xpack.security.authc.api_key.enabled=true --license trial
• run kibana with command yarn kbn bootstrap && yarn start --no-base-path
• Log into Kibana UI
• Navigate to fleet
• Click on the agents tab
• You should see the Fleet Server UI. Click add agent where it should complain about not having a fleet server url.
• Click fleet settings and add the fleet server url as localhost:8220

Step 2: add an agent locally

• Navigate to the artifacts url to find the agent download for your system (may need to change version if you need 8.0.0, for example). https://artifacts-api.elastic.co/v1/search/7.13-SNAPSHOT/elastic-agent
• Follow the instructions for in Kibana on the agents for setting up fleet server. You'll need to generate a service token in the UI, which will then give you a command to run in your agent.

Step 3: Create integration

• Click the integrations tab
• Search for Synthetics
• Click add integration on the synthetics page
• Make sure to change the policy from Default Agent Policy to Default Fleet Server Policy

Testing criteria

• Add basic HTTP monitor, add an agent, ensure you can see monitor status in Uptime after
• Add basic TCP monitor, add an agent, ensure you can see monitor status in Uptime
• Add basic ICMP monitor, add an agent, ensure you can see monitor status in Uptime
• Edit basic HTTP monitor, ensure Uptime is updated
• Edit basic TCP monitor, ensure Uptime is updated
• Edit basic IMCP monitor, ensure Uptime is updated
• Add advanced HTTP monitor, experimenting with request configuration and response configuration, including headers, response body, username, password, etc.
• Add advanced TCP monitor, experimenting with request configuration and response configuration

Video: https://drive.google.com/file/d/1FTExU0AFyHeiTFuKsS6Q8txK3rJ26I0J/view?usp=drivesdk

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[dominiqueclarke]

PR is in draft state, all text will need translating.

[dominiqueclarke]

Create and Edit Lazy Components may need to be wrapped in some type of permissions logic.

[dominiqueclarke]

@elasticmachine merge upstream

[shahzad31]

This is a huge component, would have made sense to separate it into multiple for better maintenance and readability

[dominiqueclarke]

it allows saving http option, if you have empty headers or if there is only value and no key for header, is that expected? i guess we aren't doing validations on headers atm.

We are validating that the header does not contain a space, but we are not doing extra validation beyond that. If the user enters a header without a key, it will omit the header in the policy. If they add a header with a value, it'll add it.

[dominiqueclarke]

We should specify min value 1 for EuiNumberField

Updated, but it'll still allow the user to enter 0, which will trigger our own validation.

[dominiqueclarke]

While editing it doesn't allows you to edit URL, it reset after you type something

Screen.Recording.2021-04-13.at.09.37.50.mov

This is resolved.

[dominiqueclarke]

When you land on the page, it shows URL and name already invalid, i guess it makes sense for name, but not probably for url to show as invalid without touching? though i submission might get tricky. This is just a thought, i don't expect an action necessarily on this.

I agree that typically the Elastic pattern is to only show validation after the field is dirty. Unfortunately, with the programatic change of the name field, the fleet field is now considered "dirty". For this reason, I wanted to match the styling with the other fields for consistency. I brought this up with Paul and Drew and I believe they were both okay with this.

[dominiqueclarke]

Something weird going on with Tags component when you land on the page

Can you provide more details on recreating this? I'm not seeing anything weird pop up.

[dominiqueclarke]

While Editing, if you have some advanced settings configured, does it make sense to expand it by default?

This is one of the feedback items I received, but was running out of time to address. It's certainly doable, but a bit tricky and would take just bit of time. You can find the explanation here under the Andrew section #91062

[dominiqueclarke]

@elasticmachine merge upstream

[shahzad31]

@dominiqueclarke will you be able to check why sudden increase in async bundle size? almost 400kb, some very expensive dependency got added

[shahzad31]

LGTM, Great work again, i see nothing as blocker !!

[nchaulet]

Fleet changes 👍 maybe worth testing uptime package when this land #96063

[dominiqueclarke]

@elasticmachine merge upstream

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 055c750
• Storybooks Preview
• Documentation Changes

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
uptime	709	741	+32

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
uptime	945.0KB	1.2MB	⚠️ +286.5KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
uptime	18.4KB	19.4KB	+993.0B

Unknown metric groups

async chunk count

id	before	after	diff
uptime	10	13	+3

History

• 💚 Build #120729 succeeded 055c750
• 💚 Build #120367 succeeded 72a9ba4
• 💔 Build #120360 failed 775835f
• 💚 Build #120067 succeeded 8da9919
• 💚 Build #119343 succeeded 129dca6

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream