## [Observability RAC] Alerts table post-`EuiDataGrid` style updates
This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](https://github.com/elastic/kibana/pull/106199), and [this PR](https://github.com/elastic/kibana/pull/105446), which improved the alerts table columns.
- The `Reason` column uses up the remaining width, a follow-up task from https://github.com/elastic/kibana/pull/105446
- This task was originally tracked by https://github.com/elastic/kibana/issues/105227
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- ~Removed the `Status` column~ (EDIT: we won't remove this, per a discussion w/ UX)
- Increased the width of the `Triggered` column
- ~Renamed the `Duration` column to `Alert duration`~ (EDIT: we won't rename this, per a discussion w/ UX)
- Eliminated the gap between actions
- Added truncation to the `Reason` column
### Before
### After
<img width="1280" alt="after" src="https://user-images.githubusercontent.com/4459398/126716690-be310fdf-3760-4014-998b-3c89099c2564.png">
### Desk testing
- To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`:
```
xpack.observability.unsafe.cases.enabled: true
xpack.observability.unsafe.alertingExperience.enabled: true
xpack.ruleRegistry.write.enabled: true
```
cc @mdefazio
* right align duration on alerts observability table
* reason column takes up the remaining width
* add horizontal scrollbar to the table
* add actions label temp solution
* use abbreviated format for duration
* Internationalization for actions
* remove horizontal scroll and bring back initial width
* remove unused import
* remove data as dependency
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Add an `EuiThemeProviderDecorator` to kibanaReact which uses the Storybook globals to set the EUI theme.
Add global decorators to the APM and Observability plugins so all stories are wrapped in the `EuiThemeProviderDecorator`, and they don't need to specify it in the stories.
Add [jest setup helpers recommended by @storybook/testing-react](https://github.com/storybookjs/testing-react#global-config).
Closes#98611
## Summary
Add alerts table in Observability =>
### Risk Matrix
Delete this section if it is not applicable to this PR.
Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.
When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:
| Risk | Probability | Severity | Mitigation/Notes |
|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. |
| Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. |
| Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. |
| [See more potential risk examples](https://github.com/elastic/kibana/blob/master/RISK_MATRIX.mdx) |
### For maintainers
- [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
* Adding feature flag for auth
* Hiding SOs and adding consumer field
* First pass at adding security changes
* Consumer as the app's plugin ID
* Create addConsumerToSO migration helper
* Fix mapping's SO consumer
* Add test for CasesActions
* Declare hidden types on SO client
* Restructure integration tests
* Init spaces_only integration tests
* Implementing the cases security string
* Adding security plugin tests for cases
* Rough concept for authorization class
* Adding comments
* Fix merge
* Get requiredPrivileges for classes
* Check privillages
* Ensure that all classes are available
* Success if hasAllRequested is true
* Failure if hasAllRequested is false
* Adding schema updates for feature plugin
* Seperate basic from trial
* Enable SIR on integration tests
* Starting the plumbing for authorization in plugin
* Unit tests working
* Move find route logic to case client
* Create integration test helper functions
* Adding auth to create call
* Create getClassFilter helper
* Add class attribute to find request
* Create getFindAuthorizationFilter
* Ensure savedObject is authorized in find method
* Include fields for authorization
* Combine authorization filter with cases & subcases filter
* Fix isAuthorized flag
* Fix merge issue
* Create/delete spaces & users before and after tests
* Add more user and roles
* [Cases] Convert filters from strings to KueryNode (#95288)
* [Cases] RBAC: Rename class to scope (#95535)
* [Cases][RBAC] Rename scope to owner (#96035)
* [Cases] RBAC: Create & Find integration tests (#95511)
* [Cases] Cases client enchantment (#95923)
* [Cases] Authorization and Client Audit Logger (#95477)
* Starting audit logger
* Finishing auth audit logger
* Fixing tests and types
* Adding audit event creator
* Renaming class to scope
* Adding audit logger messages to create and find
* Adding comments and fixing import issue
* Fixing type errors
* Fixing tests and adding username to message
* Addressing PR feedback
* Removing unneccessary log and generating id
* Fixing module issue and remove expect.anything
* [Cases] Migrate sub cases routes to a client (#96461)
* Adding sub cases client
* Move sub case routes to case client
* Throw when attempting to access the sub cases client
* Fixing throw and removing user ans soclients
* [Cases] RBAC: Migrate routes' unit tests to integration tests (#96374)
Co-authored-by: Jonathan Buttner <jonathan.buttner@elastic.co>
* [Cases] Move remaining HTTP functionality to client (#96507)
* Moving deletes and find for attachments
* Moving rest of comment apis
* Migrating configuration routes to client
* Finished moving routes, starting utils refactor
* Refactoring utilites and fixing integration tests
* Addressing PR feedback
* Fixing mocks and types
* Fixing integration tests
* Renaming status_stats
* Fixing test type errors
* Adding plugins to kibana.json
* Adding cases to required plugin
* [Cases] Refactoring authorization (#97483)
* Refactoring authorization
* Wrapping auth calls in helper for try catch
* Reverting name change
* Hardcoding the saved object types
* Switching ensure to owner array
* [Cases] Add authorization to configuration & cases routes (#97228)
* [Cases] Attachments RBAC (#97756)
* Starting rbac for comments
* Adding authorization to rest of comment apis
* Starting the comment rbac tests
* Fixing some of the rbac tests
* Adding some integration tests
* Starting patch tests
* Working tests for comments
* Working tests
* Fixing some tests
* Fixing type issues from pulling in master
* Fixing connector tests that only work in trial license
* Attempting to fix cypress
* Mock return of array for configure
* Fixing cypress test
* Cleaning up
* Addressing PR comments
* Reducing operations
* [Cases] Add RBAC to remaining Cases APIs (#98762)
* Starting rbac for comments
* Adding authorization to rest of comment apis
* Starting the comment rbac tests
* Fixing some of the rbac tests
* Adding some integration tests
* Starting patch tests
* Working tests for comments
* Working tests
* Fixing some tests
* Fixing type issues from pulling in master
* Fixing connector tests that only work in trial license
* Attempting to fix cypress
* Mock return of array for configure
* Fixing cypress test
* Cleaning up
* Working case update tests
* Addressing PR comments
* Reducing operations
* Working rbac push case tests
* Starting stats apis
* Working status tests
* User action tests and fixing migration errors
* Fixing type errors
* including error in message
* Addressing pr feedback
* Fixing some type errors
* [Cases] Add space only tests (#99409)
* Starting spaces tests
* Finishing space only tests
* Refactoring createCaseWithConnector
* Fixing spelling
* Addressing PR feedback and creating alert tests
* Fixing mocks
* [Cases] Add security only tests (#99679)
* Starting spaces tests
* Finishing space only tests
* Refactoring createCaseWithConnector
* Fixing spelling
* Addressing PR feedback and creating alert tests
* Fixing mocks
* Starting security only tests
* Adding remainder security only tests
* Using helper objects
* Fixing type error for null space
* Renaming utility variables
* Refactoring users and roles for security only tests
* Adding sub feature
* [Cases] Cleaning up the services and TODOs (#99723)
* Cleaning up the service intialization
* Fixing type errors
* Adding comments for the api
* Working test for cases client
* Fix type error
* Adding generated docs
* Adding more docs and cleaning up types
* Cleaning up readme
* More clean up and links
* Changing some file names
* Renaming docs
* Integration tests for cases privs and fixes (#100038)
* [Cases] RBAC on UI (#99478)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* Fixing case ids by alert id route call
* [Cases] Fixing UI feature permissions and adding UI tests (#100074)
* Integration tests for cases privs and fixes
* Fixing ui cases permissions and adding tests
* Adding test for collection failure and fixing jest
* Renaming variables
* Fixing type error
* Adding some comments
* Validate cases features
* Fix new schema
* Adding owner param for the status stats
* Fix get case status tests
* Adjusting permissions text and fixing status
* Address PR feedback
* Adding top level feature back
* Fixing feature privileges
* Renaming
* Removing uneeded else
* Fixing tests and adding cases merge tests
* [Cases][Security Solution] Basic license security solution API tests (#100925)
* Cleaning up the fixture plugins
* Adding basic feature test
* renaming to unsecuredSavedObjectsClient (#101215)
* [Cases] RBAC Refactoring audit logging (#100952)
* Refactoring audit logging
* Adding unit tests for authorization classes
* Addressing feedback and adding util tests
* return undefined on empty array
* fixing eslint
* conditional rendering the recently created cases
* Remove unnecessary Array.from
* Cleaning up overview page for permissions
* Fixing log message for attachments
* hiding add to cases button
* Disable the Cases app from the global nav
* Hide the add to cases button from detections
* Fixing merge
* Making progress on removing icons
* Hding edit icons on detail view
* Trying to get connector error msg tests working
* Removing test
* Disable error callouts
* Fixing spacing and removing cases tab one no read
* Adding read only badge
* Cleaning up and adding badge
* Wrapping in use effect
* Default toasting permissions errors
* Removing actions icon on comments
* Addressing feedback
* Fixing type
Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Previously the observability plugin set the page title and breadcrumbs in the main app rendering component based on the `breadcrumb` property of the current route.
In addition, there's a `useBreadcrumb` hook used by the UX app, exploratory view, and cases.
The conflict between these was creating situations where neither would work and the breadcrumbs would just show "Kibana".
Remove the breadcrumb properties from the routes and the main app breadcrumb handling and just use `useBreadcrumb` on all pages.
Fixes#102131.
Call `setHeaderActionMenu(undefined)` when the HeaderMenuPortal is unmounted.
Found this line in the docs:
> Calling the handler with `undefined` will unmount the current mount point.
Which we weren't doing before.
Previous behavior:
* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a weird toast error message and the header menu is gone forever
Now:
* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a working header menu
Fixes#97140
Make it so `xpack.observability.unsafe.alertingExperience.enabled` only shows and hides the Alerts page, and `xpack.observability.unsafe.cases.enabled` show and hides the Cases page.
* Make the flyout `s` instead of `m` size
* Remove flyout tabs
* Make flyout description list `compressed`
* Make spacer before description list `s` size
* Use `EuiPageTemplate` on alerts and cases pages.
* Remove alerting feature flag from advanced settings
Make it so the alerting UI in Observability can only be turned on and off in kibana.yml with `xpack.observability.enableAlertingExperience`.
We no longer:
* Allow turning this on and off for the current space in the advanced settings in Kibana
* Allow turning this on on cloud
* Send telemetry on whether or not the flag is enabled
Add some docs in READMEs as well.
* Set up Observability rule APIs
* Populate alerts table with data from API
* Move field map types/utils to common
* Format reason/link in alert type
* Format reason/link in alert type
* Fix issues with tsconfigs
* Storybook cleanup for example alerts
* Use `MemoryRouter` in the stories and `useHistory` in the component to get the history
* Replace examples with ones from "real" data
* Use `() => {}` instead of `jest.fn()` in mock registry data
* Store/display evaluations, add active/recovered badge
* Some more story fixes
* Decode rule data with type from owning registry
* Use transaction type/environment in link to app
* Fix type issues
* Fix API tests
* Undo changes in task_runner.ts
* Remove Mutable<> wrappers for field map
* Remove logger.debug calls in alerting es client
* Add API test for recovery of alerts
* Revert changes to src/core/server/http/router
* Use type imports where possible
* Update limits
* Set limit to 100kb
Co-authored-by: Nathan L Smith <smith@nlsmith.com>
In elastic/eui#4649 the `betaBadgeLabel` and related props have been removed from `EuiPanel` and it's now recommended to use an `EuiCard` instead.
Replace these in APM and Observability plugins and update stories so examples can be viewed.
* [Metrics UI] Observability Overview Host Summary
* Adding UI elements
* Adding logos
* Changing the size of the request
* Change to new ECS fields for network traffic
* Adding logos to HostLink component
* Round seconds
* fixing data handler test
* Fixing test for metrics_overview_fetchers
* Adding types for SVG to observability
* Adding i18n support to table labels
* removing unused translations
* move back to host.network.(in,out).bytes
* Adding changes to source from #95334
* Fixing source type
* Removing unintentional change.
* Maybe, fixing types
* removing svg typings
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* Rename alerts plugin to alerting
* Deprecate old config values
* Few more renames
* Update plugin list
* Rename xpack.alerts -> xpack.alerting
* Fix some ESLint rules
* Fix typecheck
* Fix some test failures
* Some more renames
* Fix ESLint
* Fix some test failures
* Fix failing jest test
* Undo exclusive test
* Fix APM deps
* Fix docs
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* Add code to display/hide UX section when appropriate.
* Suppress errors with link to dedicated issue.
* Fix typo in call to action.
* Remove type error suppression.
* using kibana persisted date when available to set the date time
* fixing types
* adding setTime when changin the dates in the url
* renaming
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Upgrade to Storybook 6 and attempt to use the declarative configuration.
The goals of this PR (as part of Kibana's Storybook roadmap, are:
Upgrade to Storybook 6
Still allow running Storybooks with yarn storybook plugin_name
Use the declarative configuration to (hopefully) make the configuration simpler to use an easier to understand, as well as avoiding deprecation warnings and loss of future compatibility
The ways in which what I have so far differs from how we do things today are:
In the alias configuration it takes a path to a storybook configuration directory instead of the storybook.js file from before
Each plugin (it doesn't have to be a plugin; can be any directory) has a .storybook/main.js (the aliases file in @kbn/storybook specifies these locations) where they can define their Storybook configuration. You can require('@kbn/storybook').defaultConfig to get defaults and override them
@kbn/storybook has a preset that can provide Webpack and Babel configuration and Storybook parameters and decorators
Instead of dynamically creating the list of stories to import, we define them in the globs of the stories property in .storybook/main.js.
Do not build a DLL. We are using @kbn/ui-shared-deps as externals. Startup time is not quite as fast but still acceptable.
Other things done in this PR:
Allow default exports in .stories. to allow for Common Story Format CSF stories
Add guard in Webpack configuration needed for overriding CSS rules
Update filename casing check to allow for files with required names in Storybook
Clean up observability stories
Rename *.examples.tsx and *.story.tsx to *.stories.tsx
In APM:
* Fix stories crashing with errors
* Hide some additional prop tables
* Fix node severites story to show correct node severites
* Fix Service Map Popover story
* Use knobs on sync badge story
In Observability:
* Remove an extra stray paren in decorators
There's additional refactoring and fixes that can be done but this just gets everything in working order.
