Fix alerts card in all-use case overview page (#1073)

* check for multi data source enabled Signed-off-by: Amardeepsingh Siglani <[email protected]> * added empty state Signed-off-by: Amardeepsingh Siglani <[email protected]> --------- Signed-off-by: Amardeepsingh Siglani <[email protected]>
opensearch-project · Sep 5, 2024 · 4edcf05 · 4edcf05
1 parent 0a32d05
commit 4edcf05
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 23 deletions.
diff --git a/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
@@ -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',
@@ -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>

diff --git a/public/services/services.ts b/public/services/services.ts
@@ -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);
 
@@ -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');

diff --git a/public/services/utils/helper.ts b/public/services/utils/helper.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { Get, Set } from '../../../../../src/plugins/opensearch_dashboards_utils/common';
 import {
   ChannelItemType,
   // NotificationItem,
@@ -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,

diff --git a/public/utils/helpers.js b/public/utils/helpers.js
@@ -206,7 +206,7 @@ export function registerAlertsCard() {
       order: 10,
       render: () => (
         <DataSourceAlertsCard
-          getDataSourceMenu={getDataSourceManagementPlugin().ui.getDataSourceMenu}
+          getDataSourceMenu={getDataSourceManagementPlugin()?.ui.getDataSourceMenu}
         />
       ),
     }),