mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
427f75d9b0
* Add expand all button for rule list group view * filter out recording rules by default * Create rule type filter * Add placeholder text for inputs * WIP move Silences to use DynamicTable * Use dynamic table for silences page * hide expand all for state list view * Add placeholders for inputs * Update selector in receivers test * Fix strict error for ruleType * remove redundant placeholder text and cleanup hooks * add fixed width for schedule * Rebase with dynamic table for silences * only show expand/collapse when filters are active
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import { GrafanaTheme } from '@grafana/data';
|
|
import { LoadingPlaceholder, useStyles } from '@grafana/ui';
|
|
import React, { FC } from 'react';
|
|
import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
|
|
import { RulesGroup } from './RulesGroup';
|
|
import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
|
|
import { CombinedRuleNamespace } from 'app/types/unified-alerting';
|
|
import { initialAsyncRequestState } from '../../utils/redux';
|
|
|
|
interface Props {
|
|
namespaces: CombinedRuleNamespace[];
|
|
expandAll: boolean;
|
|
}
|
|
|
|
export const GrafanaRules: FC<Props> = ({ namespaces, expandAll }) => {
|
|
const styles = useStyles(getStyles);
|
|
const { loading } = useUnifiedAlertingSelector(
|
|
(state) => state.promRules[GRAFANA_RULES_SOURCE_NAME] || initialAsyncRequestState
|
|
);
|
|
|
|
return (
|
|
<section className={styles.wrapper}>
|
|
<div className={styles.sectionHeader}>
|
|
<h5>Grafana</h5>
|
|
{loading ? <LoadingPlaceholder className={styles.loader} text="Loading..." /> : <div />}
|
|
</div>
|
|
|
|
{namespaces?.map((namespace) =>
|
|
namespace.groups.map((group) => (
|
|
<RulesGroup
|
|
group={group}
|
|
key={`${namespace.name}-${group.name}`}
|
|
namespace={namespace}
|
|
expandAll={expandAll}
|
|
/>
|
|
))
|
|
)}
|
|
{namespaces?.length === 0 && <p>No rules found.</p>}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme) => ({
|
|
loader: css`
|
|
margin-bottom: 0;
|
|
`,
|
|
sectionHeader: css`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
`,
|
|
wrapper: css`
|
|
margin-bottom: ${theme.spacing.xl};
|
|
`,
|
|
});
|