Skip to content

Commit

Permalink
Fix alerts card in all-use case overview page (#1073) (#1077)
Browse files Browse the repository at this point in the history
* check for multi data source enabled



* added empty state



---------


(cherry picked from commit 4edcf05)

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent 04aaee2 commit b1df272
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 23 deletions.
51 changes: 31 additions & 20 deletions public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@
*/

import React, { useCallback, useEffect, useState } from "react";
import { EuiBadge, EuiDescriptionList, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiLoadingContent, EuiPanel, EuiSmallButtonEmpty, EuiText, EuiTitle } from "@elastic/eui";
import { EuiBadge, EuiDescriptionList, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiLoadingContent, EuiPanel, 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";
import { ALERTS_NAV_ID, MONITORS_NAV_ID } from "../../../utils/constants";
import { APP_PATH, DEFAULT_EMPTY_DATA } from "../../utils/constants";

export interface DataSourceAlertsCardProps {
getDataSourceMenu: DataSourceManagementPluginSetup['ui']['getDataSourceMenu'];
getDataSourceMenu?: DataSourceManagementPluginSetup['ui']['getDataSourceMenu'];
}

export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> = ({ getDataSourceMenu }) => {
const DataSourceSelector = getDataSourceMenu();
const DataSourceSelector = getDataSourceMenu?.();
const [loading, setLoading] = useState(false);
const [dataSource, setDataSource] = useState<DataSourceOption>({
label: 'Local cluster',
Expand Down Expand Up @@ -109,34 +109,45 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> = ({ get
</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>
{DataSourceSelector && (
<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 />
) : (
) : alertsListItems.length > 0 ? (
<EuiDescriptionList
listItems={alertsListItems}
/>
) : (
<EuiEmptyPrompt
body={(
<EuiText>
<div>There are no existing alerts.</div>
<EuiLink target="_blank" href={`${MONITORS_NAV_ID}#${APP_PATH.CREATE_MONITOR}`}>Create</EuiLink> a monitor to add triggers and actions.
</EuiText>
)}
/>
)}
</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>
<EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })} target="_blank"><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
Expand Down
4 changes: 2 additions & 2 deletions public/services/services.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
import { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
import { ContentManagementPluginStart } from '../../../../src/plugins/content_management/public';
import { createNullableGetterSetter } from './utils/helper';

const ServicesContext = createContext<BrowserServices | null>(null);

Expand Down Expand Up @@ -41,8 +42,7 @@ export const [getQueryService, setQueryService] = createGetterSetter<
export const [getSavedObjectsClient, setSavedObjectsClient] =
createGetterSetter<CoreStart['savedObjects']['client']>('SavedObjectsClient');

export const [getDataSourceManagementPlugin, setDataSourceManagementPlugin] =
createGetterSetter<DataSourceManagementPluginSetup>('DataSourceManagement');
export const [getDataSourceManagementPlugin, setDataSourceManagementPlugin] = createNullableGetterSetter<DataSourceManagementPluginSetup>();

export const [getDataSourceEnabled, setDataSourceEnabled] =
createGetterSetter<DataSourceEnabled>('DataSourceEnabled');
Expand Down
15 changes: 15 additions & 0 deletions public/services/utils/helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { Get, Set } from '../../../../../src/plugins/opensearch_dashboards_utils/common';
import {
ChannelItemType,
// NotificationItem,
Expand All @@ -23,6 +24,20 @@ export const configListToChannels = (configs: any[]): ChannelItemType[] => {
return configs?.map((config) => configToChannel(config)) || [];
};

export function createNullableGetterSetter<T>(): [Get<T | undefined>, Set<T>] {
let value: T;

const get = () => {
return value;
};

const set = (newValue: T) => {
value = newValue;
};

return [get, set];
}

// export const configToSender = (config: any): SenderItemType => {
// return {
// name: config.config.name,
Expand Down
2 changes: 1 addition & 1 deletion public/utils/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ export function registerAlertsCard() {
order: 10,
render: () => (
<DataSourceAlertsCard
getDataSourceMenu={getDataSourceManagementPlugin().ui.getDataSourceMenu}
getDataSourceMenu={getDataSourceManagementPlugin()?.ui.getDataSourceMenu}
/>
),
}),
Expand Down

0 comments on commit b1df272

Please sign in to comment.