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.

Sign up for GitHub

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

Jump to bottom

[Actionable Observability] Expose ObservabalityAlertSearchBar from observability plugin #146286

Closed
Tracked by #145990
, #146290
...
maryam-saeidi opened this issue Nov 24, 2022 · 1 comment · Fixed by #146401
Closed
Tracked by #145990
, #146290
...

[Actionable Observability] Expose ObservabalityAlertSearchBar from observability plugin #146286

maryam-saeidi opened this issue Nov 24, 2022 · 1 comment · Fixed by #146401
Assignees
@maryam-saeidi
Labels
Feature:Alerting Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" v8.7.0

Comments

@maryam-saeidi
Copy link
Member

📝 Summary

In order to be able to use the same Alert Search Bar in different observability apps, we need to expose this component from the observability plugin.

✅ Acceptance Criteria

  • Expose ObservabilityAlertSearchBar component from observability plugin
@maryam-saeidi maryam-saeidi added Feature:Alerting Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" v8.7.0 labels Nov 24, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/actionable-observability (Team: Actionable Observability)

This was referenced Nov 24, 2022
Closed
Closed
@maryam-saeidi maryam-saeidi changed the title [Actionable Observability] Export ObservabalityAlertSearchBar from observability plugin [Actionable Observability] Expose ObservabalityAlertSearchBar from observability plugin Nov 24, 2022
@maryam-saeidi maryam-saeidi self-assigned this Nov 28, 2022
@maryam-saeidi maryam-saeidi mentioned this issue Nov 28, 2022
Merged
maryam-saeidi added a commit that referenced this issue Dec 7, 2022
@maryam-saeidi
[Actionable Observability] Expose ObservabilityAlertSearchBar from Ob…
9b828e3 
…servability plugin (#146401)

Resolves #146286

## 📝 Summary

In this PR, I exposed ObservabilityAlertSearchBar from the Observability
plugin to be used in other plugins such as APM.
I've added `ObservabilityAlertSearchBarProvider` in order for other
plugins to provide Kibana dependencies to the shared component.

## 🧪 How to test

For testing the implementation, I imported this component in the APM
plugin and used it in the alerts tab, you can do the same locally by
following these steps:
1. Import `ObservabilityAlertSearchBar` in
[APM](https://github.com/elastic/kibana/blob/main/x-pack/plugins/apm/public/components/app/alerts_overview/index.tsx)
and define related hook:
```
import {
  ObservabilityAlertSearchBar,
  ObservabilityAlertSearchBarProvider,
} from '@kbn/observability-plugin/public';

export const useToasts = () =>
  useKibana<ApmPluginStartDeps>().services.notifications!.toasts;
```

2. Replace
[AlertsTableStatusFilter](https://github.com/elastic/kibana/blob/main/x-pack/plugins/apm/public/components/app/alerts_overview/index.tsx#L74)
with the `ObservabilityAlertSearchBar` component:
```
<ObservabilityAlertSearchBarProvider
  {...services}
  useToasts={useToasts}
>
  <ObservabilityAlertSearchBar
    appName={'apmApp'}
    kuery={''}
    onRangeFromChange={(input) => console.log(input)}
    onRangeToChange={(input) => console.log(input)}
    onKueryChange={(input) => console.log(input)}
    onStatusChange={(input) => console.log(input)}
    onEsQueryChange={(input) => console.log(input)}
    rangeTo={'now'}
    rangeFrom={'now-15m'}
    status={'all'}
  />
</ObservabilityAlertSearchBarProvider>
```
You should see the new search bar in APM alerts tab:


![image](https://user-images.githubusercontent.com/12370520/204302146-c0ff4658-67ab-4639-a955-b75a647f57da.png)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@maryam-saeidi maryam-saeidi

Labels
Feature:Alerting Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" v8.7.0
Projects
None yet
Milestone
No milestone
2 participants
@maryam-saeidi @elasticmachine