[Synthetics] Add missing monitorType and tag info in cards !! #188824

shahzad31 · 2024-07-22T09:59:58Z

Summary

Add missing monitorType and tag info in cards !!

Testing

Easiest way to test is connect to an oblt cluster and go to synthetics UI to create few monitors

After

Before

Highlighted change

obltmachine · 2024-07-22T10:00:11Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

shahzad31 · 2024-07-22T10:04:24Z

/ci

…s-to-card

elasticmachine · 2024-07-22T12:16:36Z

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

maryam-saeidi · 2024-07-22T13:05:18Z

@shahzad31 Can you please highlight what has changed in the before and after images? It feels like a find the difference game :D Also, would you please share how should we test this PR?

dominiqueclarke

When there are many tags and they are uncollapsed, the UI appears broken.

Also, the monitor type tag is not keyboard accessible, and needs to be since it can be used to apply a filter to the page.

See how the tags themselves are keyboard accessible since they are kickable.

https://www.loom.com/share/d37ebaaf53dd4c3783d9d2f7659e481b?sid=e0b330bb-4976-4479-af02-8aafc0995382

…s-to-card

…into add-tags-to-card

kibana-ci · 2024-07-22T20:47:13Z

💚 Build Succeeded

Buildkite Build
Commit: b7bbff8
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-188824-b7bbff8f62e6
Observability Deployment

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`synthetics`	973	974	+1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`observabilityShared`	350	351	+1

Async chunks

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

id	before	after	diff
`observabilityShared`	54.9KB	54.9KB	+22.0B
`synthetics`	847.8KB	847.1KB	-735.0B
total			-713.0B

Unknown metric groups

API count

id	before	after	diff
`observabilityShared`	355	356	+1

History

💛 Build #222898 was flaky ae5a621
💔 Build #222855 failed 22fe82f

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

cauemarcondes

LGTM, just some nits

cauemarcondes · 2024-07-23T09:54:47Z

...lution/synthetics/public/apps/synthetics/components/common/components/monitor_type_badge.tsx

+    <EuiBadge
+      onClick={onClick}
+      onClickAriaLabel={getFilterTitle(monitorType)}
+      title={ariaLabel}
+      aria-label={ariaLabel}
+      iconType={getMonitorTypeBadgeIcon(monitorType)}
+      onMouseDown={(e: MouseEvent) => {
+        // Prevents the click event from being propagated to the @elastic/chart metric
+        e.stopPropagation();
+      }}
+    >
+      {getMonitorTypeBadgeTitle(monitorType)}
+    </EuiBadge>
  ) : (
-    badge
+    <EuiBadge
+      title={ariaLabel}
+      aria-label={ariaLabel}
+      iconType={getMonitorTypeBadgeIcon(monitorType)}
+      onMouseDown={(e: MouseEvent) => {
+        // Prevents the click event from being propagated to the @elastic/chart metric
+        e.stopPropagation();
+      }}
+    >
+      {getMonitorTypeBadgeTitle(monitorType)}
+    </EuiBadge>


You don't need to check if onClick is defined and have two variants for this component. If onClick is undefined it'll pass undefined to the EuiBadge component.

i tried it doesn't work with onClickAriaLabel being present always. it's kinda weird.

cauemarcondes · 2024-07-23T09:56:18Z

.../apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_body.tsx

+  const tags = monitor.tags;
+  const history = useHistory();
+
+  return (
+    <>
+      <EuiSpacer size="xs" />
+      <EuiFlexGroup gutterSize="xs">
+        <EuiFlexItem grow={false}>
+          <MonitorTypeBadge
+            monitorType={monitor[ConfigKey.MONITOR_TYPE]}
+            ariaLabel={labels.getFilterForTypeMessage(monitor[ConfigKey.MONITOR_TYPE])}
+            onClick={() => {
+              history.push({
+                search: `monitorTypes=${encodeURIComponent(
+                  JSON.stringify([monitor[ConfigKey.MONITOR_TYPE]])
+                )}`,
+              });
+            }}
+          />
+        </EuiFlexItem>
+        {(tags ?? []).length > 0 && (


Suggested change

const tags = monitor.tags;

const history = useHistory();

return (

<>

<EuiSpacer size="xs" />

<EuiFlexGroup gutterSize="xs">

<EuiFlexItem grow={false}>

<MonitorTypeBadge

monitorType={monitor[ConfigKey.MONITOR_TYPE]}

ariaLabel={labels.getFilterForTypeMessage(monitor[ConfigKey.MONITOR_TYPE])}

onClick={() => {

history.push({

search: `monitorTypes=${encodeURIComponent(

JSON.stringify([monitor[ConfigKey.MONITOR_TYPE]])

)}`,

});

}}

/>

</EuiFlexItem>

{(tags ?? []).length > 0 && (

const tags = monitor.tags ?? [];

const history = useHistory();

return (

<>

<EuiSpacer size="xs" />

<EuiFlexGroup gutterSize="xs">

<EuiFlexItem grow={false}>

<MonitorTypeBadge

monitorType={monitor[ConfigKey.MONITOR_TYPE]}

ariaLabel={labels.getFilterForTypeMessage(monitor[ConfigKey.MONITOR_TYPE])}

onClick={() => {

history.push({

search: `monitorTypes=${encodeURIComponent(

JSON.stringify([monitor[ConfigKey.MONITOR_TYPE]])

)}`,

});

}}

/>

</EuiFlexItem>

{tags.length > 0 && (

.../apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_body.tsx

dominiqueclarke

LGTM

* master: (3487 commits) `BedrockChat` & `GeminiChat` (elastic#186809) [ResponseOps] log error when ES Query rules find docs out of time range (elastic#186332) skip flaky suite (elastic#188997) [Security solution][Alert Details] Enable preview feature flag and cypress tests (elastic#188580) [EuiProviders] Warn Developer if EuiProvider is missing (elastic#184608) [Security Solution ] Fixes Timeline infinite loading bug (elastic#188943) Improve SearchSource SearchRequest type (elastic#186862) Deprecate Search Sessions config (elastic#188037) [Synthetics] Add missing monitorType and tag info in cards !! (elastic#188824) [Console Monaco] Resolve uncaught error from tokenizer (elastic#188746) [Data Forge] Add `service.logs` dataset as a data stream (elastic#188786) [Console] Fix failing bulk requests (elastic#188552) Update dependency terser to ^5.31.2 (main) (elastic#188528) [APM][ECO] Telemetry (elastic#188627) [Fleet] Fix uninstall package validation accross space (elastic#188749) Update warning on `xpack.fleet.enableExperimental` (elastic#188917) [DOCS][Cases] Automate more screenshots for cases (elastic#188697) [Fleet] Fix get one agent when feature flag disabled (elastic#188953) chore(investigate): Add investigate-app plugin from poc (elastic#188122) [Monaco Editor] Add Search functionality (elastic#188337) ...

* master: (2400 commits) `BedrockChat` & `GeminiChat` (elastic#186809) [ResponseOps] log error when ES Query rules find docs out of time range (elastic#186332) skip flaky suite (elastic#188997) [Security solution][Alert Details] Enable preview feature flag and cypress tests (elastic#188580) [EuiProviders] Warn Developer if EuiProvider is missing (elastic#184608) [Security Solution ] Fixes Timeline infinite loading bug (elastic#188943) Improve SearchSource SearchRequest type (elastic#186862) Deprecate Search Sessions config (elastic#188037) [Synthetics] Add missing monitorType and tag info in cards !! (elastic#188824) [Console Monaco] Resolve uncaught error from tokenizer (elastic#188746) [Data Forge] Add `service.logs` dataset as a data stream (elastic#188786) [Console] Fix failing bulk requests (elastic#188552) Update dependency terser to ^5.31.2 (main) (elastic#188528) [APM][ECO] Telemetry (elastic#188627) [Fleet] Fix uninstall package validation accross space (elastic#188749) Update warning on `xpack.fleet.enableExperimental` (elastic#188917) [DOCS][Cases] Automate more screenshots for cases (elastic#188697) [Fleet] Fix get one agent when feature flag disabled (elastic#188953) chore(investigate): Add investigate-app plugin from poc (elastic#188122) [Monaco Editor] Add Search functionality (elastic#188337) ...

shahzad31 added 3 commits July 22, 2024 11:10

added important missing info

fb31806

fix types

7896454

fix types

22fe82f

shahzad31 added the release_note:skip Skip the PR/issue when compiling release notes label Jul 22, 2024

shahzad31 added 3 commits July 22, 2024 12:25

handle clicking

0e81061

Merge branch 'main' of https://github.com/elastic/kibana into add-tag…

09836b6

…s-to-card

fix i18n

7fd07d9

shahzad31 marked this pull request as ready for review July 22, 2024 12:16

shahzad31 requested a review from a team as a code owner July 22, 2024 12:16

Merge branch 'main' into add-tags-to-card

ae5a621

botelastic bot added ci:project-deploy-observability Create an Observability project Team:obs-ux-management Observability Management User Experience Team labels Jul 22, 2024

dominiqueclarke requested changes Jul 22, 2024

View reviewed changes

shahzad31 added 4 commits July 22, 2024 20:52

Merge branch 'main' of https://github.com/elastic/kibana into add-tag…

185a6c8

…s-to-card

disable tag expand

1c28817

handle accessibility

08765b5

Merge branch 'add-tags-to-card' of https://github.com/shahzad31/kibana …

b7bbff8

…into add-tags-to-card

shahzad31 requested a review from a team as a code owner July 22, 2024 19:53

shahzad31 requested a review from dominiqueclarke July 22, 2024 19:54

cauemarcondes approved these changes Jul 23, 2024

View reviewed changes

dominiqueclarke approved these changes Jul 23, 2024

View reviewed changes

shahzad31 merged commit 1d08044 into elastic:main Jul 23, 2024
24 checks passed

shahzad31 deleted the add-tags-to-card branch July 23, 2024 18:15

kibanamachine added v8.16.0 backport:skip This commit does not require backporting labels Jul 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Synthetics] Add missing monitorType and tag info in cards !! #188824

[Synthetics] Add missing monitorType and tag info in cards !! #188824

shahzad31 commented Jul 22, 2024 •

edited

Loading

obltmachine commented Jul 22, 2024

shahzad31 commented Jul 22, 2024

elasticmachine commented Jul 22, 2024

maryam-saeidi commented Jul 22, 2024

dominiqueclarke left a comment

kibana-ci commented Jul 22, 2024 •

edited

Loading

API count

cauemarcondes left a comment

cauemarcondes Jul 23, 2024

shahzad31 Jul 23, 2024

cauemarcondes Jul 23, 2024

dominiqueclarke left a comment

[Synthetics] Add missing monitorType and tag info in cards !! #188824

[Synthetics] Add missing monitorType and tag info in cards !! #188824

Conversation

shahzad31 commented Jul 22, 2024 • edited Loading

Summary

Testing

After

Before

Highlighted change

obltmachine commented Jul 22, 2024

🤖 GitHub comments

shahzad31 commented Jul 22, 2024

elasticmachine commented Jul 22, 2024

maryam-saeidi commented Jul 22, 2024

dominiqueclarke left a comment

Choose a reason for hiding this comment

kibana-ci commented Jul 22, 2024 • edited Loading

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

API count

History

cauemarcondes left a comment

Choose a reason for hiding this comment

cauemarcondes Jul 23, 2024

Choose a reason for hiding this comment

shahzad31 Jul 23, 2024

Choose a reason for hiding this comment

cauemarcondes Jul 23, 2024

Choose a reason for hiding this comment

dominiqueclarke left a comment

Choose a reason for hiding this comment

shahzad31 commented Jul 22, 2024 •

edited

Loading

kibana-ci commented Jul 22, 2024 •

edited

Loading