Na}{

File Content: `RuleList.tsx`

import { css } from '@emotion/css';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useAsyncFn, useInterval } from 'react-use';

import { GrafanaTheme2, urlUtil } from '@grafana/data';
import { Button, LinkButton, useStyles2, withErrorBoundary } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { useDispatch } from 'app/types';

import { CombinedRuleNamespace } from '../../../types/unified-alerting';

import { LogMessages, logInfo, trackRuleListNavigation } from './Analytics';
import { AlertingPageWrapper } from './components/AlertingPageWrapper';
import { NoRulesSplash } from './components/rules/NoRulesCTA';
import { INSTANCES_DISPLAY_LIMIT } from './components/rules/RuleDetails';
import { RuleListErrors } from './components/rules/RuleListErrors';
import { RuleListGroupView } from './components/rules/RuleListGroupView';
import { RuleListStateView } from './components/rules/RuleListStateView';
import { RuleStats } from './components/rules/RuleStats';
import RulesFilter from './components/rules/RulesFilter';
import { AlertingAction, useAlertingAbility } from './hooks/useAbilities';
import { useCombinedRuleNamespaces } from './hooks/useCombinedRuleNamespaces';
import { useFilteredRules, useRulesFilter } from './hooks/useFilteredRules';
import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector';
import { fetchAllPromAndRulerRulesAction } from './state/actions';
import { RULE_LIST_POLL_INTERVAL_MS } from './utils/constants';
import { getAllRulesSourceNames } from './utils/datasource';

const VIEWS = {
  groups: RuleListGroupView,
  state: RuleListStateView,
};

// make sure we ask for 1 more so we show the "show x more" button
const LIMIT_ALERTS = INSTANCES_DISPLAY_LIMIT + 1;

const RuleList = withErrorBoundary(
  () => {
    const dispatch = useDispatch();
    const styles = useStyles2(getStyles);
    const rulesDataSourceNames = useMemo(getAllRulesSourceNames, []);
    const [expandAll, setExpandAll] = useState(false);

    const onFilterCleared = useCallback(() => setExpandAll(false), []);

    const [queryParams] = useQueryParams();
    const { filterState, hasActiveFilters } = useRulesFilter();

    const view = VIEWS[queryParams['view'] as keyof typeof VIEWS]
      ? (queryParams['view'] as keyof typeof VIEWS)
      : 'groups';

    const ViewComponent = VIEWS[view];

    const promRuleRequests = useUnifiedAlertingSelector((state) => state.promRules);
    const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules);

    const loading = rulesDataSourceNames.some(
      (name) => promRuleRequests[name]?.loading || rulerRuleRequests[name]?.loading
    );

    const promRequests = Object.entries(promRuleRequests);
    const rulerRequests = Object.entries(rulerRuleRequests);

    const allPromLoaded = promRequests.every(
      ([_, state]) => state.dispatched && (state?.result !== undefined || state?.error !== undefined)
    );
    const allRulerLoaded = rulerRequests.every(
      ([_, state]) => state.dispatched && (state?.result !== undefined || state?.error !== undefined)
    );

    const allPromEmpty = promRequests.every(([_, state]) => state.dispatched && state?.result?.length === 0);

    const allRulerEmpty = rulerRequests.every(([_, state]) => {
      const rulerRules = Object.entries(state?.result ?? {});
      const noRules = rulerRules.every(([_, result]) => result?.length === 0);
      return noRules && state.dispatched;
    });

    const limitAlerts = hasActiveFilters ? undefined : LIMIT_ALERTS;
    // Trigger data refresh only when the RULE_LIST_POLL_INTERVAL_MS elapsed since the previous load FINISHED
    const [_, fetchRules] = useAsyncFn(async () => {
      if (!loading) {
        await dispatch(fetchAllPromAndRulerRulesAction(false, { limitAlerts }));
      }
    }, [loading, limitAlerts, dispatch]);

    useEffect(() => {
      trackRuleListNavigation().catch(() => {});
    }, []);

    // fetch rules, then poll every RULE_LIST_POLL_INTERVAL_MS
    useEffect(() => {
      dispatch(fetchAllPromAndRulerRulesAction(false, { limitAlerts }));
    }, [dispatch, limitAlerts]);
    useInterval(fetchRules, RULE_LIST_POLL_INTERVAL_MS);

    // Show splash only when we loaded all of the data sources and none of them has alerts
    const hasNoAlertRulesCreatedYet =
      allPromLoaded && allPromEmpty && promRequests.length > 0 && allRulerEmpty && allRulerLoaded;
    const hasAlertRulesCreated = !hasNoAlertRulesCreatedYet;

    const combinedNamespaces: CombinedRuleNamespace[] = useCombinedRuleNamespaces();
    const filteredNamespaces = useFilteredRules(combinedNamespaces, filterState);

    return (
      // We don't want to show the Loading... indicator for the whole page.
      // We show separate indicators for Grafana-managed and Cloud rules
      <AlertingPageWrapper navId="alert-list" isLoading={false} actions={hasAlertRulesCreated && <CreateAlertButton />}>
        <RuleListErrors />
        <RulesFilter onFilterCleared={onFilterCleared} />
        {hasAlertRulesCreated && (
          <>
            <div className={styles.break} />
            <div className={styles.buttonsContainer}>
              <div className={styles.statsContainer}>
                {view === 'groups' && hasActiveFilters && (
                  <Button
                    className={styles.expandAllButton}
                    icon={expandAll ? 'angle-double-up' : 'angle-double-down'}
                    variant="secondary"
                    onClick={() => setExpandAll(!expandAll)}
                  >
                    {expandAll ? 'Collapse all' : 'Expand all'}
                  </Button>
                )}
                <RuleStats namespaces={filteredNamespaces} />
              </div>
            </div>
          </>
        )}
        {hasNoAlertRulesCreatedYet && <NoRulesSplash />}
        {hasAlertRulesCreated && <ViewComponent expandAll={expandAll} namespaces={filteredNamespaces} />}
      </AlertingPageWrapper>
    );
  },
  { style: 'page' }
);

const getStyles = (theme: GrafanaTheme2) => ({
  break: css`
    width: 100%;
    height: 0;
    margin-bottom: ${theme.spacing(2)};
    border-bottom: solid 1px ${theme.colors.border.medium};
  `,
  buttonsContainer: css`
    margin-bottom: ${theme.spacing(2)};
    display: flex;
    justify-content: space-between;
  `,
  statsContainer: css`
    display: flex;
    flex-direction: row;
    align-items: center;
  `,
  expandAllButton: css`
    margin-right: ${theme.spacing(1)};
  `,
});

export default RuleList;

export function CreateAlertButton() {
  const [createRuleSupported, createRuleAllowed] = useAlertingAbility(AlertingAction.CreateAlertRule);
  const [createCloudRuleSupported, createCloudRuleAllowed] = useAlertingAbility(AlertingAction.CreateExternalAlertRule);

  const location = useLocation();

  const canCreateCloudRules = createCloudRuleSupported && createCloudRuleAllowed;

  const canCreateGrafanaRules = createRuleSupported && createRuleAllowed;

  if (canCreateGrafanaRules || canCreateCloudRules) {
    return (
      <LinkButton
        href={urlUtil.renderUrl('alerting/new/alerting', { returnTo: location.pathname + location.search })}
        icon="plus"
        onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
      >
        New alert rule
      </LinkButton>
    );
  }
  return null;
}

Name	Size	Permission
__mocks__	---	0755
__snapshots__	---	0755
api	---	0755
components	---	0755
home	---	0755
hooks	---	0755
insights	---	0755
integration	---	0755
mocks	---	0755
search	---	0755
state	---	0755
styles	---	0755
testSetup	---	0755
types	---	0755
utils	---	0755
Admin.tsx	950 bytes	0644
AlertGroups.test.tsx	7318 bytes	0644
AlertGroups.tsx	4151 bytes	0644
AlertWarning.tsx	643 bytes	0644
AlertsFolderView.test.tsx	5384 bytes	0644
AlertsFolderView.tsx	6841 bytes	0644
Analytics.test.ts	1283 bytes	0644
Analytics.ts	6136 bytes	0644
CloneRuleEditor.test.tsx	13662 bytes	0644
CloneRuleEditor.tsx	2563 bytes	0644
ExistingRuleEditor.tsx	2070 bytes	0644
GrafanaRuleQueryViewer.test.tsx	2163 bytes	0644
GrafanaRuleQueryViewer.tsx	15211 bytes	0644
MuteTimings.test.tsx	8845 bytes	0644
MuteTimings.tsx	3375 bytes	0644
NotificationPolicies.test.tsx	28082 bytes	0644
NotificationPolicies.tsx	14112 bytes	0644
PanelAlertTab.tsx	634 bytes	0644
PanelAlertTabContent.test.tsx	10087 bytes	0644
PanelAlertTabContent.tsx	2915 bytes	0644
Receivers.tsx	2183 bytes	0644
RedirectToRuleViewer.test.tsx	6476 bytes	0644
RedirectToRuleViewer.tsx	5092 bytes	0644
RuleEditor.tsx	3860 bytes	0644
RuleEditorCloudOnlyAllowed.test.tsx	7164 bytes	0644
RuleEditorCloudRules.test.tsx	7118 bytes	0644
RuleEditorExisting.test.tsx	8764 bytes	0644
RuleEditorGrafanaRules.test.tsx	8187 bytes	0644
RuleEditorRecordingRule.test.tsx	7031 bytes	0644
RuleList.test.tsx	30652 bytes	0644
RuleList.tsx	7456 bytes	0644
RuleViewer.tsx	2939 bytes	0644
Silences.test.tsx	14125 bytes	0644
Silences.tsx	4613 bytes	0644
TESTING.md	1445 bytes	0644
TODO.md	1411 bytes	0644
createRouteGroupsMatcherWorker.ts	296 bytes	0644
initAlerting.tsx	1151 bytes	0644
mockApi.ts	13689 bytes	0644
mockGrafanaNotifiers.ts	66886 bytes	0644
mocks.ts	18877 bytes	0644
routeGroupsMatcher.ts	2098 bytes	0644
routeGroupsMatcher.worker.ts	338 bytes	0644
useRouteGroupsMatcher.test.tsx	1384 bytes	0644
useRouteGroupsMatcher.ts	3343 bytes	0644

File Content: RuleList.tsx

File Content: `RuleList.tsx`