[Synthetics] Overview card incorrect status and flyout improvements

[awahab07]

Kibana version: v8.6.0

Elasticsearch version: v8.6.0

Describe the bug:
Overview cards may not be displaying the correct status, especially for a monitor which has never run. The following observations have been noted on Overview page (and flyout):

1. For a monitor which has never run (no summary/result document is available), the Overview card is shown in green whereas the status on the flyout is gray with Pending status.
2. If there are two locations A and B associated with a monitor, such that a monitor has ever run only on one of the location A, the location dropdown will not show the location B. And if the flyout is opened for a card for location B, it will not show location B as option in the Locations dropdown if location is switched.
3. The Go to monitor button on the footer of the flyout doesn't respect the currently selected location while navigating. (It should append the locationId search param in the url. Edit: In a separate test, it is found that it uses custom_hearbeat_id to navigate to the details page, which breaks Test Runs section, and stays broken until reload. See Video 2.
4. The Enabled/Disabled status is out of sync between flyout's enable/disable dropdown menu and enable/disable switch on the flyout. Consult the attached video (Video 1) and peek the time between 00:30 - 00:40.

Steps to reproduce:

1. Setup Kibana so that you are able to either create or push synthetics monitors.
2. Enable the new Synthetics App from Advanced Settings.
3. Create or push a monitor with two or more locations such that monitor should only run for one of the locations. (Monitors weren't running for the location "US Central QA" during the reported case).
4. Test the described scenario and try to reproduce it, also consult the attached screenshot.

Expected behavior:

1. The status on the cards and flyout should always be in sync and showing a monitor which has never run as green may not be a valid user experience.
2. Monitor's enabled/disabled status should be reflected correctly among monitor's card, flyout's dropdown and flyout's Enabled switch.
3. Go to monitor button should use the same url as the "Go to monitor" menu option in flyout's header.
4. Update UI as per updated design, see screenshot 2.

Screenshots (if relevant): (Screenshot 1)

(Screenshot 2)

Inconsistency between Enabling/Disabling (Video 1)

Out-of-sync-enable-disable-dropdown-menu-and-switch.mov

(Video 2)

Go-to-monitor-button-breaks-monitor-details-page.mov

Errors in browser console (if relevant):
No relevant errors spotted in browser console.

Any additional context:
While using the dev synthetics service, the following monitor (yaml) was used for testing:

heartbeat.monitors:
- type: http
  enabled: true
  id: amazon-http-mon
  name: Amazon PASS Http Mon
  urls: ["https://amazon.com"]
  schedule: "@every 15m"
  locations: ["us_central","us_central_qa"]
  timeout: 16s
  check.request:
    method: GET
    headers:
      'content-encoding': 'gzip'
  check.response:
    status: [200]

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)