Log explorer: split filters into separate simple and advanced components
What does this MR do?
Logs Filtered search (including time ranges) will only be available when the environment can support it with elasticsearch. When elasticsearch is enabled, the user will be able to filter by date, search text, and an aggregate of all pods.
This means the UI has to support 2 "modes", this MR makes this separation explicit, by having different 2 filters components, these components have access to the store so they can directly change filters.
UX changes
Moving forward the "Advanced" mode will be implemented by having a filtered search, while the "simple" mode will not change anymore.
The simple mode is "simplified" by removing the permanently disabled elements altogether as it doesn't make sense clutter the UX with them.
Technical Info
While this MR started as a pure refactor, I found I could remove some HTML and CSS which involved some layout changes, which are hope are for the better.
Old forms (form-group) layouts based on columns are removed in favor of using display: flex;, so that the UI can accept different "modes" more flexibly. This has the added benefit of improving the support of mobiles and tables.
Screenshots
Before
| device | Desktop | Tablet/mobile |
|---|---|---|
| Advanced (es is available) |  |
 |
| Simple (es is not available) |  |
 |
After
| device | Desktop | Tablet/mobile |
|---|---|---|
| Advanced (es is available) |  |
 |
| Simple (es is not available) |  |
 |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Closes #207912 (closed)