experiments

x-pack/plugins/observability/public/pages/rules/index.tsx

@@ -5,18 +5,12 @@
  * 2.0.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
-import moment from 'moment';
+import React from 'react';
 import {
-  EuiBasicTable,
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonEmpty,
   EuiText,
-  EuiBadge,
-  EuiPopover,
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
   EuiHorizontalRule,
   EuiAutoRefreshButton,
 } from '@elastic/eui';
@@ -27,90 +21,9 @@ import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 
 import { useKibana } from '../../utils/kibana_react';
 
-const DEFAULT_SEARCH_PAGE_SIZE: number = 25;
-
-interface RuleState {
-  data: [];
-  totalItemsCount: number;
-}
-
-interface Pagination {
-  index: number;
-  size: number;
-}
-
 export function RulesPage() {
-  const { core, ObservabilityPageTemplate } = usePluginContext();
+  const { ObservabilityPageTemplate } = usePluginContext();
   const { docLinks } = useKibana().services;
-  const {
-    http,
-    notifications: { toasts },
-  } = core;
-  const [rules, setRules] = useState<RuleState>({ data: [], totalItemsCount: 0 });
-  const [page, setPage] = useState<Pagination>({ index: 0, size: DEFAULT_SEARCH_PAGE_SIZE });
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-  async function loadObservabilityRules() {
-    const { loadRules } = await import('../../../../triggers_actions_ui/public');
-    try {
-      const response = await loadRules({
-        http,
-        page: { index: 0, size: DEFAULT_SEARCH_PAGE_SIZE },
-        typesFilter: [
-          'xpack.uptime.alerts.monitorStatus',
-          'xpack.uptime.alerts.tls',
-          'xpack.uptime.alerts.tlsCertificate',
-          'xpack.uptime.alerts.durationAnomaly',
-          'apm.error_rate',
-          'apm.transaction_error_rate',
-          'apm.transaction_duration',
-          'apm.transaction_duration_anomaly',
-          'metrics.alert.inventory.threshold',
-          'metrics.alert.threshold',
-          'logs.alert.document.count',
-        ],
-      });
-      setRules({
-        data: response.data as any,
-        totalItemsCount: response.total,
-      });
-    } catch (_e) {
-      toasts.addDanger({
-        title: i18n.translate('xpack.observability.rules.loadError', {
-          defaultMessage: 'Unable to load rules',
-        }),
-      });
-    }
-  }
-
-  enum RuleStatus {
-    enabled = 'enabled',
-    disabled = 'disabled',
-  }
-
-  const statuses = Object.values(RuleStatus);
-  const togglePopover = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]);
-  const popOverButton = (
-    <EuiBadge
-      iconType="arrowDown"
-      iconSide="right"
-      onClick={togglePopover}
-      onClickAriaLabel="Change status"
-    >
-      Enabled
-    </EuiBadge>
-  );
-
-  const panelItems = statuses.map((status) => (
-    <EuiContextMenuItem>
-      <EuiBadge>{status}</EuiBadge>
-    </EuiContextMenuItem>
-  ));
-
-  useEffect(() => {
-    loadObservabilityRules();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   useBreadcrumbs([
     {
@@ -120,76 +33,6 @@ export function RulesPage() {
     },
   ]);
 
-  const rulesTableColumns = [
-    {
-      field: 'name',
-      name: i18n.translate('xpack.observability.rules.rulesTable.columns.nameTitle', {
-        defaultMessage: 'Rule Name',
-      }),
-    },
-    {
-      field: 'executionStatus.lastExecutionDate',
-      name: i18n.translate('xpack.observability.rules.rulesTable.columns.lastRunTitle', {
-        defaultMessage: 'Last run',
-      }),
-      render: (date: Date) => {
-        if (date) {
-          return (
-            <>
-              <EuiFlexGroup direction="column" gutterSize="none">
-                <EuiFlexItem grow={false}>
-                  <EuiText color="subdued" size="xs">
-                    {moment(date).fromNow()}
-                  </EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </>
-          );
-        }
-      },
-    },
-    {
-      field: 'executionStatus.status',
-      name: i18n.translate('xpack.observability.rules.rulesTable.columns.lastResponseTitle', {
-        defaultMessage: 'Last response',
-      }),
-    },
-    {
-      field: 'enabled',
-      name: i18n.translate('xpack.observability.rules.rulesTable.columns.statusTitle', {
-        defaultMessage: 'Status',
-      }),
-      render: (_enabled: boolean) => {
-        return (
-          <EuiPopover
-            button={popOverButton}
-            anchorPosition="downLeft"
-            isOpen={isPopoverOpen}
-            panelPaddingSize="none"
-          >
-            <EuiContextMenuPanel items={panelItems} />
-          </EuiPopover>
-        );
-      },
-    },
-    {
-      field: '*',
-      name: i18n.translate('xpack.observability.rules.rulesTable.columns.actionsTitle', {
-        defaultMessage: 'Actions',
-      }),
-      actions: [
-        {
-          name: 'Edit',
-          isPrimary: true,
-          description: 'Edit this rule',
-          icon: 'pencil',
-          type: 'icon',
-          onClick: () => {},
-          'data-test-subj': 'action-edit',
-        },
-      ],
-    },
-  ];
   return (
     <ObservabilityPageTemplate
       pageHeader={{
@@ -213,16 +56,7 @@ export function RulesPage() {
     >
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
-          <EuiText size="s" color="subdued" data-test-subj="totalAlertsCount">
-            <FormattedMessage
-              id="xpack.observability.rules.totalItemsCountDescription"
-              defaultMessage="Showing: {pageSize} of {totalItemCount} Rules"
-              values={{
-                totalItemCount: rules.totalItemsCount,
-                pageSize: rules.data.length,
-              }}
-            />
-          </EuiText>
+          <EuiText size="s" color="subdued" data-test-subj="totalAlertsCount" />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiAutoRefreshButton
@@ -235,26 +69,7 @@ export function RulesPage() {
       </EuiFlexGroup>
       <EuiHorizontalRule margin="xs" />
       <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <EuiBasicTable
-            items={rules.data}
-            hasActions={true}
-            columns={rulesTableColumns}
-            isSelectable={true}
-            pagination={{
-              pageIndex: page.index,
-              pageSize: page.size,
-              totalItemCount: rules.totalItemsCount,
-            }}
-            onChange={({ page: changedPage }: { page: Pagination }) => {
-              setPage(changedPage);
-            }}
-            selection={{
-              selectable: () => true,
-              onSelectionChange: (selectedItems) => {},
-            }}
-          />
-        </EuiFlexItem>
+        <EuiFlexItem />
       </EuiFlexGroup>
     </ObservabilityPageTemplate>
   );

x-pack/plugins/observability/public/plugin.ts

@@ -46,7 +46,6 @@ import { createNavigationRegistry, NavigationEntry } from './services/navigation
 import { updateGlobalNavigation } from './update_global_navigation';
 import { getExploratoryViewEmbeddable } from './components/shared/exploratory_view/embeddable';
 import { createExploratoryViewUrl } from './components/shared/exploratory_view/configurations/utils';
-import { createUseRulesLink } from './hooks/create_use_rules_link';
 
 export type ObservabilityPublicSetup = ReturnType<Plugin['setup']>;
 
@@ -125,10 +124,11 @@ export class Plugin
     this.initializerContext = initializerContext;
   }
 
-  public setup(
+  public async setup(
     coreSetup: CoreSetup<ObservabilityPublicPluginsStart, ObservabilityPublicStart>,
     pluginsSetup: ObservabilityPublicPluginsSetup
   ) {
+    const { createUseRulesLink } = await import('./hooks/create_use_rules_link');
     const category = DEFAULT_APP_CATEGORIES.observability;
     const euiIconType = 'logoObservability';
     const config = this.initializerContext.config.get();
@@ -256,9 +256,9 @@ export class Plugin
     };
   }
 
-  public start(coreStart: CoreStart, pluginsStart: ObservabilityPublicPluginsStart) {
+  public async start(coreStart: CoreStart, pluginsStart: ObservabilityPublicPluginsStart) {
     const { application } = coreStart;
-
+    const { createUseRulesLink } = await import('./hooks/create_use_rules_link');
     const config = this.initializerContext.config.get();
 
     updateGlobalNavigation({