[Discover] Add responsive layout #8

andreadelrio · 2020-09-28T00:41:55Z

Summary

Added a flyout which shows the content of the sidebar in mobile
Added Fields button to trigger flyout
Added EuiAccordions for Available Fields and Selected Fields (@kertal can you please double check that the implementation is correct, it seems like they do something a bit more complex in Lens).

Notes:

@kertal need your help with making the selected field counter in the Fields button work. Note that if there are no fields selected it should say 0. Thanks :)
The file discover_sidebar_mobile.tsx could likely be simplified and cleaned up.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
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
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

src/plugins/discover/public/application/components/discover.tsx

andreadelrio · 2020-09-29T04:03:52Z

@kertal Added some improvements for the Expanded Document flyout on mobile (still room for more improvements). It'd be great to change that table to use EuiTable at some point, not a priority but good to keep it in mind.

kertal · 2020-09-29T10:43:44Z

@kertal Added some improvements for the Expanded Document flyout on mobile (still room for more improvements). It'd be great to change that table to use EuiTable at some point, not a priority but good to keep it in mind.

Nice, yes, so the actions are already visible, and users don't need to 'discover' them. Wonder if it makes sense to do this by default? it was handled that way in older Kibana versions.

However it's more a question of taste. +1 for EuiTable here in a later step

kertal · 2020-09-29T10:50:32Z

src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx

+                    <EuiAccordion
+                      id="dscSelectedFields"
+                      initialIsOpen={true}
+                      buttonContent={
+                        <EuiText size="xs">
+                          <strong>
+                            <FormattedMessage
+                              id="discover.fieldChooser.filter.selectedFieldsTitle"
+                              defaultMessage="Selected fields"
+                            />
+                          </strong>
+                        </EuiText>
+                      }


Heavy +1 for removing this legacy stuff and moving to EuiAccordion
I think badges like in Lens displaying how much fields are available / selected would be useful for the user:

@kertal I added the badges, not sure how we would handle the case where there's Filters by type on? In Lens they show the badge with the accent color if there are filters on. Would we want to do something similar in Discover? if so, how do we implement that?

See
https://github.com/elastic/kibana/blob/9a9a8b0c32fa808b83f891a2cd7f98b80c2bd57b/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx#L105

sounds good, I'll have a look at lens

I think we should adapt the lens behavior
easiest way to find out whether a filter is active or not would be using lodash isEqual like this:

const filterChanged = isEqual(fieldFilterState, getDefaultFieldFilter());

src/plugins/discover/public/application/components/discover.tsx

andreadelrio · 2020-09-29T17:13:52Z

@kertal Added some improvements for the Expanded Document flyout on mobile (still room for more improvements). It'd be great to change that table to use EuiTable at some point, not a priority but good to keep it in mind.

Nice, yes, so the actions are already visible, and users don't need to 'discover' them. Wonder if it makes sense to do this by default? it was handled that way in older Kibana versions.

However it's more a question of taste. +1 for EuiTable here in a later step

We usually avoid showing repetitive icons in multiple rows (e.g. table) in order not to overcrowd the UI. In mobile we make them visible at all times because there's no hovering. It's the same reasoning why we only show the add/remove icons in the sidebar upon hovering (on desktop).

kertal · 2020-09-30T15:48:16Z

We usually avoid showing repetitive icons in multiple rows (e.g. table) in order not to overcrowd the UI. In mobile we make them visible at all times because there's no hovering. It's the same reasoning why we only show the add/remove icons in the sidebar upon hovering (on desktop).

@andreadelrio thx for the context!

kertal · 2020-09-30T16:35:39Z

I've playing around with this PR, and it works pretty well 👍 . One thing that breaks and that's no surprise is the legacy grid view, sidebar doesn't show fields at certain dimensions (we could fix that in a follow up). So I wonder, do you think, also the legacy grid would work in this layout, it's now a react component with angular under the hood, so it can be used like datagrid in the new responsive layout? and could be solve the collapsing/uncollapsing of the sidebar like it is solved today?

button to expand / unfold:

https://github.com/elastic/kibana/blob/a21a8325423fb9aafcf04c7d1f64df079aeb21d1/src/plugins/discover/public/application/components/discover_legacy.tsx#L194

state:

https://github.com/elastic/kibana/blob/a21a8325423fb9aafcf04c7d1f64df079aeb21d1/src/plugins/discover/public/application/components/discover_legacy.tsx#L122

this may be out of scope of this PR, just wonder if could continue in a direction to have one layout with 2 different grids , lot's of legacy removed , goodbye bootstrap!

andreadelrio · 2020-10-01T00:47:51Z

I've playing around with this PR, and it works pretty well 👍 . One thing that breaks and that's no surprise is the legacy grid view, sidebar doesn't show fields at certain dimensions (we could fix that in a follow up). So I wonder, do you think, also the legacy grid would work in this layout, it's now a react component with angular under the hood, so it can be used like datagrid in the new responsive layout? and could be solve the collapsing/uncollapsing of the sidebar like it is solved today?

button to expand / unfold:

https://github.com/elastic/kibana/blob/a21a8325423fb9aafcf04c7d1f64df079aeb21d1/src/plugins/discover/public/application/components/discover_legacy.tsx#L194

state:

https://github.com/elastic/kibana/blob/a21a8325423fb9aafcf04c7d1f64df079aeb21d1/src/plugins/discover/public/application/components/discover_legacy.tsx#L122

this may be out of scope of this PR, just wonder if could continue in a direction to have one layout with 2 different grids , lot's of legacy removed , goodbye bootstrap!

@kertal did some cleanup of the legacy file to remove Bootstrap and reuse what we have in the datagrid version. The collapse button works 👍, don't want to spend too much time on it because it will be replaced by the features coming to EuiResizableContainer anyways. One thing, the flyout is not opening in mobile legacy, would you mind taking a look?

kertal · 2020-10-01T12:13:07Z

@kertal did some cleanup of the legacy file to remove Bootstrap and reuse what we have in the datagrid version. The collapse button works 👍, don't want to spend too much time on it because it will be replaced by the features coming to EuiResizableContainer anyways. One thing, the flyout is not opening in mobile legacy, would you mind taking a look?

Excellent work! I just wanted to ask if it's possible. Will have a look!

kertal · 2020-10-01T12:18:09Z

src/plugins/discover/public/application/components/discover_legacy.tsx

+  let flyout;
+
+  if (isFlyoutVisible) {
+    flyout = (


I think it's not displayed, because the flyout variable isn't used here, just assigned. Btw, would be neat to have a separate flyout react component, to deduplicate code ... but could also be done later

andreadelrio · 2020-10-02T22:35:44Z

Updated loading screens

Mobile

Desktop - legacy

Desktop - data grid

kertal · 2020-10-05T05:01:36Z

@andreadelrio looks very nice, is it ready for final review/merge? thx

andreadelrio · 2020-10-05T05:17:50Z

@andreadelrio looks very nice, is it ready for final review/merge? thx

@kertal, yes! should be ready to go. Thanks!

kertal · 2020-10-05T11:55:44Z

there's a problem with the legacy layout sidebar, it scales to the height of the main content, which doesn't work well when this section is low, second problem is the no results section. tried to solve it but didn't find a good solution so far

andreadelrio · 2020-10-05T18:02:45Z

there's a problem with the legacy layout sidebar, it scales to the height of the main content, which doesn't work well when this section is low, second problem is the no results section. tried to solve it but didn't find a good solution so far

This should be fixed now

kertal · 2020-10-06T15:46:51Z

Thx for making those changes 👍
So, the new layout is perfect! But in legacy layout there are still issues (that's why it's called legacy ... another word for issue)

There is an "infinite scroll" functionality in legacy table, which renders the rows in batches, so when you scroll down, more and more rows are rendered. It takes the window height and scrollTop to determine how much to render. since now the height of the window (more the document, but it's labeled $window in angular) doesn't change. this functionality is broken (it should render 500 docs if the available doc count is >= 500, currently just a part of it are rendered). So my question is, if there's a way to change CSS to ? if not, I'm sure I can adapt this rusty old angular directive to work with a scrollable div element

Second thing that I've noticed is related to vertical sizing when there are just few table rows:

I think the histogram in legacy world shouldn't be sticky, although it looks nice. Because users already complain about it's screen size and how to remove it, and are happy when we tell them, that we're working on it

sorry that legacy world is so hostile

andreadelrio · 2020-10-06T20:08:28Z

sorry that legacy world is so hostile

Agreed haha.

So I fixed the vertical sizing one but the infinite scrolling is not working yet :/

kertal · 2020-10-07T10:44:45Z

So I fixed the vertical sizing one but the infinite scrolling is not working yet :/

this is a deep dive into legacy code with Angular 🐟 and jQuery 🐠 involved so I'm 🎣

kertal · 2020-10-07T13:56:07Z

fixed the infinite scrolling (now there are 2 elements scrollable, depending on screen size, looking forward to remove all this)

then I've solved this, just in safari

adapted it to the new layout, histogram is now also removeable

could you have a final look? thx

kertal

Code LGTM, many thanks for taking care of this 🐰 hole!

* Updated EUI to version 67.1.2. Updated instaces of ButtonColor from EUI to EuiButtonColor. * Updated to EuiCard instances that utilize the betaBadgeProps object to return an empty string instead of undefined when the label is unavailable * Removed two instances of the deprecated internetExplorerOnly() mixin * Updated two instances of the ButtonColor import to EuiButtonColor as is was renamed in PR elastic#6150 * Updated snapshots in Jest Test Suite #1 to account for EuiButton and EuiCard Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiToolTipAnchor component that replaced the tooltip anchor styles * Updated snapshots in Jest Test Suite #2 to account forEuiButton, EuiDescriptionList, EuiButtonIcon, and EuiBadge Emotion conversions. * Updated snapshots in Jest Test Suite #3 to account for EuiDescriptionList, EuiButton, and EuiBadge Emotion conversions. Updated snapshots for EuiTooltip as if now contains the new EuiTooltipAnchor component that replaced the tooltop anchor styles * Updated snapshots in Jest Test Suite #4 to account for EuiButton Emotion conversion. * Updated snapshots in Jest Test Suite #5 to account for EuiButton Emotion conversion. * Updated snapshots in Jest Test Suite #8 to account for EuiButtonIcon and EuiButton Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. * Updated snapshots in Jest Test Suite #9 to account for EuiFlyout and EuiButton Emotion conversions. * Updated snapshots in Jest Test Suite #10 to account for EuiButton, EuiBadge, EuiButtonIcon, and EuiCard Emotion conversions. Updated snapshots for EuiToolTtip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles * Updated instances of EuiButtonIconColor to use EuiButtonIconProps['color'] as it was removed in PR elastic#6150 * Updated tests that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * Updated snapshots in Jest Test Suite #1 to account for EuiButton and EuiCard Emotion conversions * Added the EuiFlyout mixins and variables to Lens Sass file as EuiFlyout has been converted to Emotion and the Sass styles are no longer available in EUI * Added the EuiCallOutTypes variable to Step Progress Sass file as EuiCallOut has been converted to Emotion and the Sass styles are no longer available in EUI * Updated snapshots in Jest Test Suite #2 to account for recent Emotion conversions. Updated snapshots in server_status.test.tsx to render EuiBadge before checking the snapshots to reduce the snapshot churn caused by Emotion. Updated tests that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Added imports for the added flyout mixin. Removed references to EuiCallOut mixin as the component has been converted to Emotion and is no longer available for use. * Updated unit tests and snapshots in Jest Test Suite #10. Updated snaphshots to account for EuiBadge, EuiDescriptionList, EuiFlyout, and EuiCard Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. Updated tests that target EuiButton to simulate click events to target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #11 that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * Updated unit tests in Jest Test Suite #12 by updating tests that target EuiButton to simulate click events. Instead, these tests now target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #1 by updating tests that target EuiButton to simulate click events. Instead, these tests now target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #2 by updating tests that use EuiButton to simulate click events. Instead, these test have been updated to target a button element to prevent undefined click event errors. * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Updated reference to mixins Sass file. Updated snapshots for Jest Test Suite #5 to account for EuiButton Emotion conversion. Updated unit tests that target EuiButton to simulate click events. These tests have been updated to target a button element to prevent undefined click event errors * Updated unit tests in Jest Test Suites 3, 7, 8, 13, and 14. Updated snapshot to account for EuiButton Emotion conversion. Updated tests that target EuiButton to simulate click events. These tests now target a generic button element to prevent undefined click event errors. Updated a few snapshots by adding .render() before checking the snapshot. This will prevent large snapshots coming from recent Emotion conversions * Updated snapshots in Jest Test Suite #10 to account for the recent EuiButton Emotion conversion * Updated unit tests in Jest Test Suite #2 by editing tests that target EuiButton to simulate click events. These tests now target a button element in order to prevent undefinde click event errors * Updated snapshots in Jest Test Suite #10 to account for EuiButton and EuiDescriptionList Emotion conversions * Updated test cases in Jest Test Suites 3, 7, and 8. Updated snapshots to account for EuiButton and EuiPagination Emotion conversions. Updated tests that target EuiButton to simulate click events. These tests now target a button element to prevent undefined click errors * Updated test cases in Jest Test Suite 14. Updated snapshots to account for EuiButton Emotion conversion. Opted to use .render() when updating a few snapshots to reduce the large length of snapshots caused by Emotion * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Revised a change to betaBadgeProps to ensure that the label is available. If not, the value for the badge with be set to undefined. * Resolved two linting errors * Resolved two linting errors * Updated Jest unit tests in various suites. Updated snapshots to account for EuiButton Emotion conversion. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. * Updated EuiFlyout in query_flyout.tsx to remove the onClick function from maskProps as it is no longer available. Updated this flyout to use ownFocus and not to close when the overlay mask is clicked. * Removed the use of EuiButtonIconColor in favor of EuiButtonIconProps['color'] * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Updated Cypress test looking for strict equality on EuiPaginationButton class names to match a substring of the Emotion generated class name * Removed unneeded debugging code. Updated snapshots for various test suites to account for the recent EuiButton Emotion conversion * Updated a few EuiButton, EuiButtonEmpty, and EuiText components that set the color as ghost. The ghost color mode has been deprecated as of PR elastic#6150. These components now are wrapped in EuiThemeProvider with a dark colorMode to create the previous ghost color. * Resolved TS error with EuiCard betaBadgeProps * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Remove references to now-removed EuiFlyout CSS classes/vars * Remove now-removed euiBadge className references - Convert directly to EuiBadge instead of using CSS - Remove confusing and now-possibly-irrelevant CSS badge overrides - left/right icons are now set via JSX and not via flex-direction * Pre-emptively fix various euiOverlayMask CSS overrides - this data attr isn't technically in yet but will be once elastic/eui#6289 merges - at the very least this isn't breaking any more than it currently already is! * Update to v67.1.3 * v67.1.4 * Resolved test failing test case in Security/Manage/Blocklist. The test did not remove focus from the last combo box in the form, which didn't allow the disbaled attribute to be removed from the flyout submit button. I've updated the mock file for Blocklist to return focus to the first form element in the flyout to allow the disabled attribute to be removed. * Updated snapshots to account for the recent EuiText Emotion conversion * Fix Log's custom tooltips relying on EuiTooltip classNames that no longer exist * Fix Vega vis custom tooltips relying on EuiTooltip classNames that no longer exist - this one is trickier than Log's as it's not using React, so we need to use Emotion's Global to set a static className * Convert remaining vega_vis.scss to Emotion - as an example of how other global + non global styles could be handled in the future * Fix references to removed `euiPaginationButton-isActive` className - use aria-current attribute instead * Added missing EuiFlyoutAnimation keyframes for EuiFlyout. This resolved test that failed because they used onAnimationEnd because the FlyoutAnimation could not be found. * Reolved Jest Tests in suites 1 and 5. Updated snapshots to account for the recent EuiButton Emotion conversion. Updated snapshots for EuiToolTip as it now contains the new EuiToolTipAnchor component that replaced the tooltip anchor styles. * iterate on rules_list.test.tsx * bump eui to v67.1.5 * Updatde snapshots for jest test suites to account for the recent EuiButton, EuiOverlayMask, EuiTooltip, and EuiBadge Emotion conversions * Resolved failing security test by updating the target element for CONNECTOR_TITLE. EuiCard has recently been converted to Emotion and the card title is no longer wrapper in a span. * Resolved failing test case in Runtime Fields. The modify runtime field test was failing because the combobox responsbible for adding and updating scripts was not appearing. The textbox did not appear because the shared setFieldScript function targets and toggles the script textbox when opening the flyout. When a runtime field is being modified, the toggle is already active and using the shared function will trigger the toggle again (losing access to the script textbox). Also resolved an issue that prevented the warning EuiCallout to appear when changing the type of a runtime field from its original type. Resolved this by adding an enter keypress at the end of setFieldType function to confirm the type selection, thus triggering the EuiCallout * Resolved two tests that were failing in Lens. These test were failing because they were checking for equality in class names that no longer exist within EuiButtonGroup as it was recently converted to Emotion. These tests were updated to check for a substring of the new and longer class name * Quick fix in test case failing because of misspelling in data-test-sub * Updated snapshot for Jest test case as EuiButton as recently been converted to Emotion * Removed console.log statement. Oops! * Resolved a failing test case in Lens. They were failing because they were checking for equality in class names that no longer exist within EuiButtonGroup as it was recently converted to Emotion. These tests were updated to check for a substring of the new and longer class name. Updated a Security test case by giving a target button the data-test-subj attribute for easier querying * Removed reference to EuiFlyout mixin as it has been converted to Emotion. Updated the reference to an interal copy of EuiFlyout styles * Corrected spelling error in EuiFlyout animation in Lens app * Update EUI with latest backport * Update button snapshots * fix another button snapshot * More snapshot fixes * [EuiButton][Security] Fix button relying on now-removed `euiButton__text` CSS - replace removed CSS with `eui-textTruncate` util instead - combine/DRY out unnecessary span - was affecting min-width of truncation util + increase screenshot diff limit - this was smaller than updating the actual baseline screenshots for whatever reason (likely render diff between local and CI) * Fix remaining Jest tests affected by Emotion conversions - because Emotion creates its own wrapper, `.first()` can no longer be used - prefer `.last()` instead * Fix Jest test affected by EuiButton Emotion conversion + removed modifier class - targeting the native DOM node + filtering by disabled true/false gets us back to the 'correct' lengths * Fix + improve flyout test - `.last()` changes to account for EuiButton Emotion conversion is needed, but the last onClose assertion still fails due to us having modified inputs, and the confirm modal being displayed - split test into two separate tests - one testing the onClose call, and the other testing the confirm modal * derpin * Skip rules_list Jest suite * Update new EuiButton snapshot * Upgraded EUI version to 67.1.7 * [EuiCard] Update snapshots * [EuiPopover] Update snapshots * [QA] Fix missing Vega warn/error message colors ;_; * [CI] Auto-commit changed files from 'node scripts/generate codeowners' * Fix Lens kbnToolbarButton regressions - Caused by flattening of EUI button CSS specificity - background-color was previously relying on isDisabled CSS specificity to override its #fff color - `text` color modifier & `!important` is no longer needed and overrides Emotion CSS flatly - isDisabled class is no longer needed - euiButton no longer sets `pointer-events: none` on disabled buttons (fixes tooltip bug in webkit as well) * Backport EUI 67.1.8 fixes * Update EuiCard snapshots * Fix EuiModal form wrapper causing overflow issues - see https://elastic.github.io/eui/#/layout/modal#forms-in-a-modal * Workaround for `.kbnOverlayMountWrapper` mount point causing overflow issues - not sure what all is using this modal service to be honest, but the wrapper is causing issues with the modal layout, this fixes overflow issues but will not fix any mask-image issues as a result * more snapshot updates * EuiButton - added textProps to EuiButton to prevent very long button names from spilling over outside of the container * EuiButton - Update EuiButton related snapshots. Updated tests that target EuiButton directly to use a data-telementary-id for more specific element querying required by Emotion * QA - Removed unnecessary comment in code * Temporary fix for EuiCard[selectable][layout=horizontal] instances on security solutions' rule page * Temporary fix for EuiCard[selectable][layout=horizontal] instances on osquery live query and canvas's datasource selector * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Fix CSS specificity, where canvas's solutionToolbarButton's background-color now takes precedence over EuiButton's primary styles * Removed update to search_marker_tooltip that removed the euiTooltip styles and replaced then with Emotion styling. Added EuiTooltip Sass styles for the component to rely on to test for a styling bug that is causing the tooltip and the tooltip arrow to be out of sync with each other. * Lint Sass file * Lint Sass file * Removed overflow:hidden style from .vgaVis_view as it was causing euiScrollStyles not to present the scroll bars in Vega Vis * Remove typo from EuiButton textProps object. 'className' should not have been included in the actual class name * Revert tooltip Sass This reverts commit 20e6ead, a5cd2de, and c605cbd * Fix Emotion tooltip arrows Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Constance Chen <constance.chen@elastic.co> Co-authored-by: Chandler Prall <chandler.prall@elastic.co>

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>

andreadelrio and others added 9 commits September 14, 2020 16:51

temporarily remove EuiResizableContainer

4df03eb

need to move button to the right section

760b84a

working on Fields mobile button

39cb3b2

improve Fields button in mobile

df9a482

didn't really need an extra component

997c00f

available fields accordion

9e74d0c

lots of cleanup

38acb01

i18n for fields

0f8bc2f

Merge master / fix conflicts

b2ad20d

kertal reviewed Sep 28, 2020

View reviewed changes

src/plugins/discover/public/application/components/discover.tsx Outdated Show resolved Hide resolved

andreadelrio force-pushed the responsive-discover branch from 6f9d1b0 to 4d91d7d Compare September 28, 2020 21:44

fix No Results screen on mobile

8793fb4

andreadelrio force-pushed the responsive-discover branch from 4d91d7d to 8793fb4 Compare September 28, 2020 21:45

improve Expanded Document flyout in mobile

ee40566

andreadelrio force-pushed the responsive-discover branch from 9737b45 to ee40566 Compare September 29, 2020 00:26

give tokens color

709afd9

kertal reviewed Sep 29, 2020

View reviewed changes

src/plugins/discover/public/application/components/discover.tsx Outdated Show resolved Hide resolved

andreadelrio added 2 commits September 29, 2020 15:19

add NotificationBadge to accordions

8830406

add EuiShowFor and EuiHideFor

e629524

andreadelrio added 3 commits September 30, 2020 10:18

make NotificationBadges in sidebar consider filters

aae3b7e

update Filter button on sidebar

e4f3e89

removed some boostrap and did some cleanup in legacy

2e30b1e

kertal reviewed Oct 1, 2020

View reviewed changes

andreadelrio and others added 3 commits October 1, 2020 16:43

show the flyout in legacy

567b6f2

Shared state refactoring

03af0ce

Fix flyover not showing icons permanetly

789e469

update loading screens

b6d3a93

fix empty state

8127b20

remove fixed height

4ad36d9

Fix infinite scrolling

88cb1d2

Adapt infinite scrolling, allow user to hide chart in legacy

429e4a4

andreadelrio added 2 commits October 7, 2020 08:28

couple of tiny styling fixes

fd5fe4f

revert

9a29cfb

kertal self-requested a review October 7, 2020 15:49

kertal approved these changes Oct 7, 2020

View reviewed changes

andreadelrio merged commit fbd920a into kertal:kertal-pr-2020-04-25-discover-data-grid Oct 7, 2020

kertal pushed a commit that referenced this pull request Jun 23, 2023

- previews the prompt context before sending it (#8)

41d7233

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Add responsive layout #8

[Discover] Add responsive layout #8

andreadelrio commented Sep 28, 2020 •

edited

Loading

andreadelrio commented Sep 29, 2020

kertal commented Sep 29, 2020

kertal Sep 29, 2020

andreadelrio Sep 29, 2020

kertal Sep 30, 2020

kertal Sep 30, 2020

andreadelrio commented Sep 29, 2020

kertal commented Sep 30, 2020

kertal commented Sep 30, 2020 •

edited

Loading

andreadelrio commented Oct 1, 2020

kertal commented Oct 1, 2020

kertal Oct 1, 2020

andreadelrio commented Oct 2, 2020

kertal commented Oct 5, 2020

andreadelrio commented Oct 5, 2020

kertal commented Oct 5, 2020

andreadelrio commented Oct 5, 2020

kertal commented Oct 6, 2020

andreadelrio commented Oct 6, 2020

kertal commented Oct 7, 2020 •

edited

Loading

kertal commented Oct 7, 2020

kertal left a comment

[Discover] Add responsive layout #8

[Discover] Add responsive layout #8

Conversation

andreadelrio commented Sep 28, 2020 • edited Loading

Summary

Checklist

For maintainers

andreadelrio commented Sep 29, 2020

kertal commented Sep 29, 2020

kertal Sep 29, 2020

Choose a reason for hiding this comment

andreadelrio Sep 29, 2020

Choose a reason for hiding this comment

kertal Sep 30, 2020

Choose a reason for hiding this comment

kertal Sep 30, 2020

Choose a reason for hiding this comment

andreadelrio commented Sep 29, 2020

kertal commented Sep 30, 2020

kertal commented Sep 30, 2020 • edited Loading

andreadelrio commented Oct 1, 2020

kertal commented Oct 1, 2020

kertal Oct 1, 2020

Choose a reason for hiding this comment

andreadelrio commented Oct 2, 2020

kertal commented Oct 5, 2020

andreadelrio commented Oct 5, 2020

kertal commented Oct 5, 2020

andreadelrio commented Oct 5, 2020

kertal commented Oct 6, 2020

andreadelrio commented Oct 6, 2020

kertal commented Oct 7, 2020 • edited Loading

kertal commented Oct 7, 2020

kertal left a comment

Choose a reason for hiding this comment

andreadelrio commented Sep 28, 2020 •

edited

Loading

kertal commented Sep 30, 2020 •

edited

Loading

kertal commented Oct 7, 2020 •

edited

Loading