Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Dynamic Coloring Design Tweaks #7

Conversation

MichaelMarcialis
Copy link

This is a PR to address a handful of design-oriented issues discovered during the dynamic coloring feature review. Notable changes include:

  • Changing "Color palette" label to "Color" to match designs.
  • Corrected center vertical alignment for "Color" field contents.
  • Changed "Value type" field to use a EuiIconTip and removed extraneous markup.
  • Changed "Reverse color" from EuiButtonEmpty to EuiLink to better fit the space.
  • Removed extraneous EuiFlexGroup wrapping the "Add color stop" button.
  • Applied center vertical alignment to each color stop item.
  • Applied a prop of compressed the "Color continuity"
  • Changed nested EuiFormRow components that were wrapping each color stop item to be EuiFlexItem components.

Regarding the last bullet above, you'll notice two outstanding areas in color_stops.tsx marked with TODO comments. These reference commented out code pertaining to the invalid hex color error messaging. I'm thinking we should remove this commented out code for two reasons:

  1. The individual color stops are no longer using an EuiFormRow component.
  2. I don't think such error message are needed, as the EuiColorPicker dropdown already has the hex field displaying a similar error in the case of an invalid hex value.

Instead of having a redundant error message, can we instead change the current behavior so that if an invalid hex value remains on blur of the EuiColorPicker component, we simply revert to last known good hex value?

Otherwise, please feel free to merge if it looks good to you. Thanks!

image

image

@dej611 dej611 merged commit 1576a61 into dej611:lens/dynamic-coloring-table May 17, 2021
@MichaelMarcialis MichaelMarcialis deleted the lens/dynamic-coloring-table-mm branch May 17, 2021 13:22
dej611 pushed a commit that referenced this pull request Sep 6, 2024
fixes
[#8](elastic/observability-accessibility#8)
fixes
[#7](elastic/observability-accessibility#7)
 
## Summary

Fixes APM breadcrumbs on serverless

| Serverless  |  Stateful  |
|---|---|
| <img width="700px" alt="image"
src="https://github.com/user-attachments/assets/944a7d58-7de3-4a7f-be02-3c8c1110a0e2">
|<img width="800px" alt="image"
src="https://github.com/user-attachments/assets/450664b1-ddfc-4395-9fa3-a7b941affb3b">|
|<img width="500px" alt="image"
src="https://github.com/user-attachments/assets/944a7d58-7de3-4a7f-be02-3c8c1110a0e2">
|<img width="500px" alt="image"
src="https://github.com/user-attachments/assets/450664b1-ddfc-4395-9fa3-a7b941affb3b">|
| <img width="500px" alt="image"
src="https://github.com/user-attachments/assets/944a7d58-7de3-4a7f-be02-3c8c1110a0e2">
|<img width="500px" alt="image"
src="https://github.com/user-attachments/assets/cb8a39e2-ca33-4cf9-a8ac-4c84566d092d">|
|<img width="500px" alt="image"
src="https://github.com/user-attachments/assets/151a3a9c-c81e-4558-9d00-e695e3d1d79c">|<img
width="500px" alt="image"
src="https://github.com/user-attachments/assets/2562e96f-d5e4-4aa4-a221-6721f8995883">|
|<img width="500px" alt="image"
src="https://github.com/user-attachments/assets/8d877d11-8c3f-4ac5-8146-6a11125eae7c">|<img
width="500px" alt="image"
src="https://github.com/user-attachments/assets/36e588cb-4c18-4d66-a2c6-f0e66392f708">|
|<img width="500px" alt="image"
src="https://github.com/user-attachments/assets/14253196-06de-4343-811f-61aa31ea0d1e">|<img
width="500px" alt="image"
src="https://github.com/user-attachments/assets/0cdfc83f-6545-433f-8c14-5bbf2a581175">|
|<img width="500px" alt="image"
src="https://github.com/user-attachments/assets/89a58e2b-2cef-4188-b2be-f359ba6890db">|<img
width="500px" alt="image"
src="https://github.com/user-attachments/assets/f15e767f-5b60-4485-ac71-7b6fd850ec50">|
|<img width="500px" alt="image"
src="https://github.com/user-attachments/assets/a0f7bfae-bfda-4f49-b92a-e736d80fea4c">|<img
width="500px" alt="image"
src="https://github.com/user-attachments/assets/680db8ab-58b8-454b-a0d7-6e1681dbe616">|


### How to test
#### Serverless
- Start a local ES serverless instance: `yarn es serverless
--projectType=oblt --ssl -k/--insecure`
- Start a local Kibana serverless instance: ` yarn start
--serverless=oblt --no-ssl`
- Run some synthtrace scenarios
- `NODE_TLS_REJECT_UNAUTHORIZED=0 node scripts/synthtrace mobile.ts
--live --target=https://elastic_serverless:changeme@127.0.0.1:9200
--kibana=http://elastic_serverless:changeme@0.0.0.0:5601`
- `NODE_TLS_REJECT_UNAUTHORIZED=0 node scripts/synthtrace service_map.ts
--live --target=https://elastic_serverless:changeme@127.0.0.1:9200
--kibana=http://elastic_serverless:changeme@0.0.0.0:5601`
- Navigate to Applications and click through the links

### Stateful
- Start a local ES and Kibana instance
- Run the some synthtrace scenarios:
  -  `node scripts/synthtrace mobile.ts --live`
  -  `node scripts/synthtrace service_map.ts --live`
- Navigate to Applications and click through the links

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants