[RAM] Add shareable rules list

x-pack/plugins/triggers_actions_ui/common/experimental_features.ts

@@ -14,9 +14,9 @@ export type ExperimentalFeatures = typeof allowedExperimentalValues;
 export const allowedExperimentalValues = Object.freeze({
   rulesListDatagrid: true,
   internalAlertsTable: false,
-  internalShareableComponentsSandbox: false,
-  ruleTagFilter: false,
-  ruleStatusFilter: false,
+  internalShareableComponentsSandbox: true,
+  ruleTagFilter: true,
+  ruleStatusFilter: true,
   rulesDetailLogs: true,
 });
 

x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_aggregations.ts

@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { useState, useCallback } from 'react';
+import { RuleExecutionStatusValues } from '@kbn/alerting-plugin/common';
+import { loadRuleAggregations, LoadRuleAggregationsProps } from '../lib/rule_api';
+import { useKibana } from '../../common/lib/kibana';
+
+type UseLoadRuleAggregationsProps = Omit<LoadRuleAggregationsProps, 'http'> & {
+  onError: (message: string) => void;
+};
+
+export function useLoadRuleAggregations({
+  searchText,
+  typesFilter,
+  actionTypesFilter,
+  ruleExecutionStatusesFilter,
+  ruleStatusesFilter,
+  tagsFilter,
+  onError,
+}: UseLoadRuleAggregationsProps) {
+  const { http } = useKibana().services;
+
+  const [rulesStatusesTotal, setRulesStatusesTotal] = useState<Record<string, number>>(
+    RuleExecutionStatusValues.reduce(
+      (prev: Record<string, number>, status: string) =>
+        ({
+          ...prev,
+          [status]: 0,
+        } as Record<string, number>),
+      {}
+    )
+  );
+
+  const internalLoadRuleAggregations = useCallback(async () => {
+    try {
+      const rulesAggs = await loadRuleAggregations({
+        http,
+        searchText,
+        typesFilter,
+        actionTypesFilter,
+        ruleExecutionStatusesFilter,
+        ruleStatusesFilter,
+        tagsFilter,
+      });
+      if (rulesAggs?.ruleExecutionStatus) {
+        setRulesStatusesTotal(rulesAggs.ruleExecutionStatus);
+      }
+    } catch (e) {
+      onError(
+        i18n.translate(
+          'xpack.triggersActionsUI.sections.rulesList.unableToLoadRuleStatusInfoMessage',
+          {
+            defaultMessage: 'Unable to load rule status info',
+          }
+        )
+      );
+    }
+  }, [
+    http,
+    searchText,
+    typesFilter,
+    actionTypesFilter,
+    ruleExecutionStatusesFilter,
+    ruleStatusesFilter,
+    tagsFilter,
+    onError,
+    setRulesStatusesTotal,
+  ]);
+
+  return {
+    loadRuleAggregations: internalLoadRuleAggregations,
+    rulesStatusesTotal,
+    setRulesStatusesTotal,
+  };
+}

x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_rules.ts

@@ -0,0 +1,121 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { i18n } from '@kbn/i18n';
+import { useState, useCallback } from 'react';
+import { isEmpty } from 'lodash';
+import { Rule, Pagination } from '../../types';
+import { loadRules, LoadRulesProps } from '../lib/rule_api';
+import { useKibana } from '../../common/lib/kibana';
+
+interface RuleState {
+  isLoading: boolean;
+  data: Rule[];
+  totalItemCount: number;
+}
+
+type UseLoadRulesProps = Omit<LoadRulesProps, 'http'> & {
+  hasAnyAuthorizedRuleType: boolean;
+  onPage: (pagination: Pagination) => void;
+  onError: (message: string) => void;
+};
+
+export function useLoadRules({
+  page,
+  searchText,
+  typesFilter,
+  actionTypesFilter,
+  ruleExecutionStatusesFilter,
+  ruleStatusesFilter,
+  tagsFilter,
+  sort,
+  hasAnyAuthorizedRuleType,
+  onPage,
+  onError,
+}: UseLoadRulesProps) {
+  const { http } = useKibana().services;
+
+  const [rulesState, setRulesState] = useState<RuleState>({
+    isLoading: false,
+    data: [],
+    totalItemCount: 0,
+  });
+
+  const [noData, setNoData] = useState<boolean>(true);
+  const [initialLoad, setInitialLoad] = useState<boolean>(true);
+
+  const internalLoadRules = useCallback(async () => {
+    if (!hasAnyAuthorizedRuleType) {
+      return;
+    }
+    setRulesState((prevRuleState) => ({ ...prevRuleState, isLoading: true }));
+    try {
+      const rulesResponse = await loadRules({
+        http,
+        page,
+        searchText,
+        typesFilter,
+        actionTypesFilter,
+        ruleExecutionStatusesFilter,
+        ruleStatusesFilter,
+        tagsFilter,
+        sort,
+      });
+      setRulesState({
+        isLoading: false,
+        data: rulesResponse.data,
+        totalItemCount: rulesResponse.total,
+      });
+
+      if (!rulesResponse.data?.length && page.index > 0) {
+        onPage({ ...page, index: 0 });
+      }
+
+      const isFilterApplied = !(
+        isEmpty(searchText) &&
+        isEmpty(typesFilter) &&
+        isEmpty(actionTypesFilter) &&
+        isEmpty(ruleExecutionStatusesFilter) &&
+        isEmpty(ruleStatusesFilter) &&
+        isEmpty(tagsFilter)
+      );
+
+      setNoData(rulesResponse.data.length === 0 && !isFilterApplied);
+    } catch (e) {
+      onError(
+        i18n.translate('xpack.triggersActionsUI.sections.rulesList.unableToLoadRulesMessage', {
+          defaultMessage: 'Unable to load rules',
+        })
+      );
+      setRulesState((prevRuleState) => ({ ...prevRuleState, isLoading: false }));
+    }
+    setInitialLoad(false);
+  }, [
+    http,
+    page,
+    searchText,
+    typesFilter,
+    actionTypesFilter,
+    ruleExecutionStatusesFilter,
+    ruleStatusesFilter,
+    tagsFilter,
+    sort,
+    hasAnyAuthorizedRuleType,
+    setRulesState,
+    setNoData,
+    setInitialLoad,
+    onPage,
+    onError,
+  ]);
+
+  return {
+    rulesState,
+    setRulesState,
+    loadRules: internalLoadRules,
+    noData,
+    initialLoad,
+  };
+}

x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_tags.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { useState, useCallback } from 'react';
+import { loadRuleTags } from '../lib/rule_api';
+import { useKibana } from '../../common/lib/kibana';
+
+interface UseLoadTagsProps {
+  onError: (message: string) => void;
+}
+
+export function useLoadTags(props: UseLoadTagsProps) {
+  const { onError } = props;
+  const { http } = useKibana().services;
+  const [tags, setTags] = useState<string[]>([]);
+
+  const internalLoadTags = useCallback(async () => {
+    try {
+      const ruleTagsAggs = await loadRuleTags({ http });
+      if (ruleTagsAggs?.ruleTags) {
+        setTags(ruleTagsAggs.ruleTags);
+      }
+    } catch (e) {
+      onError(
+        i18n.translate('xpack.triggersActionsUI.sections.rulesList.unableToLoadRuleTags', {
+          defaultMessage: 'Unable to load rule tags',
+        })
+      );
+    }
+  }, [http, setTags, onError]);
+
+  return {
+    loadTags: internalLoadTags,
+    tags,
+    setTags,
+  };
+}

x-pack/plugins/triggers_actions_ui/public/application/internal/shareable_components_sandbox/rule_event_log_list_sandbox.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import React from 'react';
 import { getRuleEventLogListLazy } from '../../../common/get_rule_event_log_list';
 
 export const RuleEventLogListSandbox = () => {
@@ -39,5 +40,5 @@ export const RuleEventLogListSandbox = () => {
     }),
   };
 
-  return getRuleEventLogListLazy(props);
+  return <div style={{ height: '400px' }}>{getRuleEventLogListLazy(props)}</div>;
 };

x-pack/plugins/triggers_actions_ui/public/application/internal/shareable_components_sandbox/rules_list_sandbox.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { getRulesListLazy } from '../../../common/get_rules_list';
+
+const style = {
+  flex: 1,
+};
+
+export const RulesListSandbox = () => {
+  return <div style={style}>{getRulesListLazy()}</div>;
+};

x-pack/plugins/triggers_actions_ui/public/application/internal/shareable_components_sandbox/shareable_components_sandbox.tsx

@@ -11,6 +11,7 @@ import { RuleTagFilterSandbox } from './rule_tag_filter_sandbox';
 import { RuleStatusFilterSandbox } from './rule_status_filter_sandbox';
 import { RuleTagBadgeSandbox } from './rule_tag_badge_sandbox';
 import { RuleEventLogListSandbox } from './rule_event_log_list_sandbox';
+import { RulesListSandbox } from './rules_list_sandbox';
 
 export const InternalShareableComponentsSandbox: React.FC<{}> = () => {
   return (
@@ -19,6 +20,7 @@ export const InternalShareableComponentsSandbox: React.FC<{}> = () => {
       <RuleTagFilterSandbox />
       <RuleStatusFilterSandbox />
       <RuleTagBadgeSandbox />
+      <RulesListSandbox />
       <RuleEventLogListSandbox />
     </>
   );

x-pack/plugins/triggers_actions_ui/public/application/lib/rule_api/aggregate.ts

@@ -44,6 +44,16 @@ export async function loadRuleTags({ http }: { http: HttpSetup }): Promise<RuleT
   return rewriteTagsBodyRes(res);
 }
 
+export interface LoadRuleAggregationsProps {
+  http: HttpSetup;
+  searchText?: string;
+  typesFilter?: string[];
+  actionTypesFilter?: string[];
+  ruleExecutionStatusesFilter?: string[];
+  ruleStatusesFilter?: RuleStatus[];
+  tagsFilter?: string[];
+}
+
 export async function loadRuleAggregations({
   http,
   searchText,
@@ -52,15 +62,7 @@ export async function loadRuleAggregations({
   ruleExecutionStatusesFilter,
   ruleStatusesFilter,
   tagsFilter,
-}: {
-  http: HttpSetup;
-  searchText?: string;
-  typesFilter?: string[];
-  actionTypesFilter?: string[];
-  ruleExecutionStatusesFilter?: string[];
-  ruleStatusesFilter?: RuleStatus[];
-  tagsFilter?: string[];
-}): Promise<RuleAggregations> {
+}: LoadRuleAggregationsProps): Promise<RuleAggregations> {
   const filters = mapFiltersToKql({
     typesFilter,
     actionTypesFilter,

x-pack/plugins/triggers_actions_ui/public/application/lib/rule_api/index.ts

@@ -7,7 +7,7 @@
 
 export { alertingFrameworkHealth } from './health';
 export { mapFiltersToKql } from './map_filters_to_kql';
-export { loadRuleAggregations, loadRuleTags } from './aggregate';
+export { loadRuleAggregations, loadRuleTags, LoadRuleAggregationsProps } from './aggregate';
 export { createRule } from './create';
 export { deleteRules } from './delete';
 export { disableRule, disableRules } from './disable';
@@ -17,7 +17,7 @@ export { loadRuleSummary } from './rule_summary';
 export { muteAlertInstance } from './mute_alert';
 export { muteRule, muteRules } from './mute';
 export { loadRuleTypes } from './rule_types';
-export { loadRules } from './rules';
+export { loadRules, LoadRulesProps } from './rules';
 export { loadRuleState } from './state';
 export type { LoadExecutionLogAggregationsProps } from './load_execution_log_aggregations';
 export { loadExecutionLogAggregations } from './load_execution_log_aggregations';

x-pack/plugins/triggers_actions_ui/public/application/lib/rule_api/rules.ts

@@ -11,6 +11,18 @@ import { Rule, Pagination, Sorting, RuleStatus } from '../../../types';
 import { mapFiltersToKql } from './map_filters_to_kql';
 import { transformRule } from './common_transformations';
 
+export interface LoadRulesProps {
+  http: HttpSetup;
+  page: Pagination;
+  searchText?: string;
+  typesFilter?: string[];
+  actionTypesFilter?: string[];
+  tagsFilter?: string[];
+  ruleExecutionStatusesFilter?: string[];
+  ruleStatusesFilter?: RuleStatus[];
+  sort?: Sorting;
+}
+
 const rewriteResponseRes = (results: Array<AsApiContract<Rule>>): Rule[] => {
   return results.map((item) => transformRule(item));
 };
@@ -25,17 +37,7 @@ export async function loadRules({
   ruleStatusesFilter,
   tagsFilter,
   sort = { field: 'name', direction: 'asc' },
-}: {
-  http: HttpSetup;
-  page: Pagination;
-  searchText?: string;
-  typesFilter?: string[];
-  actionTypesFilter?: string[];
-  tagsFilter?: string[];
-  ruleExecutionStatusesFilter?: string[];
-  ruleStatusesFilter?: RuleStatus[];
-  sort?: Sorting;
-}): Promise<{
+}: LoadRulesProps): Promise<{
   page: number;
   perPage: number;
   total: number;