-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Register alerts card with analytics workspace use case (#1064)
* added recent alerts card Signed-off-by: Amardeepsingh Siglani <[email protected]> * fixed overflow in card Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated badge text; fixed integ test Signed-off-by: Amardeepsingh Siglani <[email protected]> --------- Signed-off-by: Amardeepsingh Siglani <[email protected]>
- Loading branch information
Showing
18 changed files
with
288 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
144 changes: 144 additions & 0 deletions
144
public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import React, { useCallback, useEffect, useState } from "react"; | ||
| import { EuiBadge, EuiDescriptionList, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiLoadingContent, EuiPanel, EuiSmallButtonEmpty, EuiText, EuiTitle } from "@elastic/eui"; | ||
| import { DataSourceManagementPluginSetup, DataSourceOption } from "../../../../../src/plugins/data_source_management/public"; | ||
| import { getApplication, getClient, getNotifications, getSavedObjectsClient } from "../../services"; | ||
| import { dataSourceFilterFn, getSeverityColor, getSeverityBadgeText, getTruncatedText } from "../../utils/helpers"; | ||
| import { renderTime } from "../../pages/Dashboard/utils/tableUtils"; | ||
| import { ALERTS_NAV_ID } from "../../../utils/constants"; | ||
| import { DEFAULT_EMPTY_DATA } from "../../utils/constants"; | ||
|
|
||
| export interface DataSourceAlertsCardProps { | ||
| getDataSourceMenu: DataSourceManagementPluginSetup['ui']['getDataSourceMenu']; | ||
| } | ||
|
|
||
| export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> = ({ getDataSourceMenu }) => { | ||
| const DataSourceSelector = getDataSourceMenu(); | ||
| const [loading, setLoading] = useState(false); | ||
| const [dataSource, setDataSource] = useState<DataSourceOption>({ | ||
| label: 'Local cluster', | ||
| id: '', | ||
| }); | ||
| const [alerts, setAlerts] = useState<any[]>([]); | ||
|
|
||
| useEffect(() => { | ||
| setLoading(true); | ||
| getClient().get('../api/alerting/alerts', { | ||
| query: { | ||
| size: 25, | ||
| sortField: 'start_time', | ||
| dataSourceId: dataSource?.id || '', | ||
| sortDirection: 'desc' | ||
| } | ||
| }).then(res => { | ||
| if (res.ok) { | ||
| setAlerts(res.alerts); | ||
| } | ||
| setLoading(false); | ||
| }).catch(() => { | ||
| setLoading(false); | ||
| }) | ||
| }, [dataSource]); | ||
|
|
||
| const onDataSourceSelected = useCallback((options: any[]) => { | ||
| if (dataSource?.id !== undefined && dataSource?.id !== options[0]?.id) { | ||
| setDataSource(options[0]); | ||
| } | ||
| }, [dataSource]); | ||
|
|
||
| const createAlertDetailsHeader = useCallback((alert) => { | ||
| const severityColor = getSeverityColor(alert.severity); | ||
| const triggerName = alert.trigger_name ?? DEFAULT_EMPTY_DATA; | ||
|
|
||
| return ( | ||
| <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center"> | ||
| <EuiFlexItem grow={false}> | ||
| <div> | ||
| <EuiBadge color={severityColor?.background} style={{ padding: '1px 4px', color: severityColor?.text }}>{getSeverityBadgeText(alert.severity)}</EuiBadge> | ||
| | ||
| <span style={{ color: "#006BB4" }} className="eui-textTruncate">{getTruncatedText(triggerName)}</span> | ||
| </div> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false} > | ||
| <EuiText color="subdued" size="s">{renderTime(alert.start_time, { showFromNow: true })}</EuiText> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ) | ||
| }, []); | ||
|
|
||
| const createAlertDetailsDescription = useCallback((alert) => { | ||
| const monitorName = alert.monitor_name ?? DEFAULT_EMPTY_DATA; | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText size="s" color="subdued">Monitor:</EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false} > | ||
| <EuiText size="m">{getTruncatedText(monitorName)}</EuiText> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| <EuiHorizontalRule margin="xs" /> | ||
| </> | ||
| ) | ||
| }, []); | ||
|
|
||
| const alertsListItems = alerts.map((alert) => { | ||
| return { | ||
| title: createAlertDetailsHeader(alert), | ||
| description: createAlertDetailsDescription(alert) | ||
| } | ||
| }); | ||
|
|
||
| return ( | ||
| <EuiPanel hasBorder={false} hasShadow={false}> | ||
| <EuiFlexGroup style={{ height: '100%' }} direction="column" justifyContent="spaceBetween" alignItems="flexStart" gutterSize="xs"> | ||
| <EuiFlexItem grow={false} style={{ width: '100%', height: '90%' }}> | ||
| <EuiFlexGroup direction="column" style={{ height: '100%' }}> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiTitle size="s"> | ||
| <h3> | ||
| Recent alerts | ||
| </h3> | ||
| </EuiTitle> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <DataSourceSelector | ||
| componentType={"DataSourceSelectable"} | ||
| componentConfig={{ | ||
| savedObjects: getSavedObjectsClient(), | ||
| notifications: getNotifications(), | ||
| onSelectedDataSources: onDataSourceSelected, | ||
| fullWidth: false, | ||
| dataSourceFilter: dataSourceFilterFn, | ||
| activeOption: dataSource ? [{ id: dataSource.id }] : undefined | ||
| }} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem style={{ overflow: 'scroll' }}> | ||
| {loading ? ( | ||
| <EuiLoadingContent /> | ||
| ) : ( | ||
| <EuiDescriptionList | ||
| listItems={alertsListItems} | ||
| /> | ||
| )} | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dasboard' })} target="_blank"><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiPanel> | ||
| ) | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.