[OBX-UX-MNGMT][BUG]APM creation rules flyout is broken when it's accessed from Stack Management #186970

fkanout · 2024-06-26T10:53:54Z

Summary

It fixes #186969 by migrating to emotions from styled-component

…agement

obltmachine · 2024-06-26T10:54: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!)

fkanout · 2024-06-26T10:54:55Z

x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx

@@ -110,7 +110,7 @@ export function Controls() {
  );

  const [zoom, setZoom] = useState((cy && cy.zoom()) || 1);
-  const duration = parseInt(theme.eui.euiAnimSpeedFast, 10);
+  const duration = parseInt(String(theme.animation.fast), 10);


I'm not sure about this one.

fkanout · 2024-06-26T10:55:18Z

...ck/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts

+export const getAnimationOptions = (
+  theme: UseEuiThemeWithColorsVis
+): cytoscape.AnimationOptions => ({
+  duration: parseInt(String(theme.animation.normal), 10),


elasticmachine · 2024-06-26T10:56:24Z

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

kpatticha

@fkanout why is failing in alerts management page but it work as expected for APM?

elasticmachine · 2024-06-26T15:02:40Z

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

fkanout · 2024-06-27T08:43:49Z

@fkanout why is failing in alerts management page but it work as expected for APM?

@kpatticha, there is an initiative/requirement to move from the styled-component to emotion for all Kibana. And I think due to an update the styled-component context is no longer available in the context of the alert management.
BTW, we had similar issue under observability for some component #186248

kpatticha

code LGTM I didn't test it locally though

maryam-saeidi · 2024-07-02T07:23:59Z

x-pack/plugins/observability_solution/apm/public/hooks/use_theme.tsx

+    ),
+  };
+  return {
+    ...euiTheme,


@fkanout Was there any challenge in returning the same data shape as before? (i.e., EuiTheme from '@kbn/kibana-react-plugin/common')

I am wondering, for fixing types, whether it would be better to find a way and make returning EuiTheme work or change the places that uses useTheme to follow the new structure.

@maryam-saeidi, good question! When I started working on the refactoring, I thought I had only to replace the imports from styled-components and use the equivalents from emotion. After asking the eui-team, it appeared that it was more than just that.
As you can see from the updates in the hook the data are coming from different objects with different structure and types. e.g., there is no euiColorVis anymore in emotion (only an array of values called euiPaletteColorBlind) that I mapped back to old names. Also some value changed regarding the duration (as I commented initially).

So, to sum up, I'm using the same name of the last element, e.g. euiColorVis5, euiColorVis9BehindText, to confirm this is the replacement of the old one. But the object, the structure, and the object path to reach that is different. With that hybrid solution, I think we get a good balance as we still know what we are using by keeping the old names, and at the same time, we know it's the new structure from emotion

kibana-ci · 2024-07-02T14:20:05Z

⏳ Build in-progress, with failures

Buildkite Build
Commit: cfbc907
Interpreting CI Failures
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-186970-cfbc907940d8

Failed CI Steps

Test Failures

[job] [logs] Jest Tests #7 / AllCasesListGeneric Actions Assignees should show the assignees column on platinum license
[job] [logs] FTR Configs #63 / APM specs correlations latency correlations space with no features disabled sets the timePicker to return data
[job] [logs] FTR Configs #78 / Journey[apm_service_inventory] Navigate to Service Inventory Page
[job] [logs] FTR Configs #78 / Journey[apm_service_inventory] Navigate to Service Inventory Page

History

💔 Build #218711 failed a21e4a0
💔 Build #218503 failed 310c422

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

cc @fkanout @maryam-saeidi

elasticmachine · 2024-07-02T15:53:42Z

⏳ Build in-progress, with failures

Buildkite Build
Commit: eb92427
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-186970-eb924278b42f
Observability Deployment

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #100 / @skipInServerless endpoint @ess @serverless For each artifact list under management When on the Event Filters entries list should be able to add a new Event Filters entry
[job] [logs] Jest Tests #5 / Timeline TimelineAxisContainer should render with data
[job] [logs] Jest Tests #5 / Timeline TimelineAxisContainer should render with data
[job] [logs] Jest Tests #5 / Timeline VerticalLinesContainer should render with data
[job] [logs] Jest Tests #5 / Timeline VerticalLinesContainer should render with data
[job] [logs] Jest Tests #5 / useCytoscapeEventHandlers when data is received runs the layout
[job] [logs] Jest Tests #5 / useCytoscapeEventHandlers when data is received runs the layout
[job] [logs] Jest Tests #5 / useCytoscapeEventHandlers when data is received with a service name sets the primary class
[job] [logs] Jest Tests #5 / useCytoscapeEventHandlers when data is received with a service name sets the primary class

History

cc @fkanout

maryam-saeidi · 2024-07-22T11:59:40Z

We created a separate PR to fix this issue and possibly backport it to v8.14.

We can revisit the changes in this PR later in order to migrate from styled-component to emotion and remove the related provider that was added in the above fix.

APM creation rules flyout is broken when it's accessed from Stack Man…

b29c21e

…agement

fkanout added bug Fixes for quality problems that affect the customer experience Feature:Alerting Team:obs-ux-management Observability Management User Experience Team v8.15.0 labels Jun 26, 2024

fkanout self-assigned this Jun 26, 2024

fkanout commented Jun 26, 2024

View reviewed changes

fkanout changed the title ~~APM creation rules flyout is broken when it's accessed from Stack Management~~ [OBX-UX-MNGMT][BUG]APM creation rules flyout is broken when it's accessed from Stack Management Jun 26, 2024

fkanout marked this pull request as ready for review June 26, 2024 10:56

fkanout requested a review from a team as a code owner June 26, 2024 10:56

fkanout added the release_note:skip Skip the PR/issue when compiling release notes label Jun 26, 2024

smith added the apm:review label Jun 26, 2024

kpatticha reviewed Jun 26, 2024

View reviewed changes

botelastic bot added ci:project-deploy-observability Create an Observability project Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team labels Jun 26, 2024

kpatticha approved these changes Jun 28, 2024

View reviewed changes

maryam-saeidi self-assigned this Jun 28, 2024

Merge branch 'main' into 186969-apm-rules-migrate-emotions

310c422

maryam-saeidi enabled auto-merge (squash) June 28, 2024 15:21

maryam-saeidi disabled auto-merge June 28, 2024 16:25

Merge branch 'main' into 186969-apm-rules-migrate-emotions

a21e4a0

maryam-saeidi reviewed Jul 2, 2024

View reviewed changes

Merge branch 'main' into 186969-apm-rules-migrate-emotions

cfbc907

Fix types

eb92427

maryam-saeidi removed their assignment Jul 2, 2024

maryam-saeidi mentioned this pull request Jul 12, 2024

Unable to add Latency threshold alert rule due to error #187455

Closed

maryam-saeidi self-assigned this Jul 18, 2024

maryam-saeidi mentioned this pull request Aug 9, 2024

Migrate styles from styled-components to emotion #190245

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[OBX-UX-MNGMT][BUG]APM creation rules flyout is broken when it's accessed from Stack Management #186970

[OBX-UX-MNGMT][BUG]APM creation rules flyout is broken when it's accessed from Stack Management #186970

fkanout commented Jun 26, 2024

obltmachine commented Jun 26, 2024

fkanout Jun 26, 2024

fkanout Jun 26, 2024

elasticmachine commented Jun 26, 2024

kpatticha left a comment

elasticmachine commented Jun 26, 2024

fkanout commented Jun 27, 2024

kpatticha left a comment

maryam-saeidi Jul 2, 2024

fkanout Jul 2, 2024

kibana-ci commented Jul 2, 2024 •

edited

Loading

elasticmachine commented Jul 2, 2024 •

edited

Loading

maryam-saeidi commented Jul 22, 2024

[OBX-UX-MNGMT][BUG]APM creation rules flyout is broken when it's accessed from Stack Management #186970

Are you sure you want to change the base?

[OBX-UX-MNGMT][BUG]APM creation rules flyout is broken when it's accessed from Stack Management #186970

Conversation

fkanout commented Jun 26, 2024

Summary

obltmachine commented Jun 26, 2024

🤖 GitHub comments

fkanout Jun 26, 2024

Choose a reason for hiding this comment

fkanout Jun 26, 2024

Choose a reason for hiding this comment

elasticmachine commented Jun 26, 2024

kpatticha left a comment

Choose a reason for hiding this comment

elasticmachine commented Jun 26, 2024

fkanout commented Jun 27, 2024

kpatticha left a comment

Choose a reason for hiding this comment

maryam-saeidi Jul 2, 2024

Choose a reason for hiding this comment

fkanout Jul 2, 2024

Choose a reason for hiding this comment

kibana-ci commented Jul 2, 2024 • edited Loading

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

History

elasticmachine commented Jul 2, 2024 • edited Loading

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

History

maryam-saeidi commented Jul 22, 2024

kibana-ci commented Jul 2, 2024 •

edited

Loading

elasticmachine commented Jul 2, 2024 •

edited

Loading