The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
grafana/public/app/features/alerting/unified/RuleEditor.tsx

87 lines
3.1 KiB

import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { Alert, LinkButton, LoadingPlaceholder, useStyles2, withErrorBoundary } from '@grafana/ui';
import Page from 'app/core/components/Page/Page';
import { contextSrv } from 'app/core/services/context_srv';
import { useCleanup } from 'app/core/hooks/useCleanup';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { RuleIdentifier } from 'app/types/unified-alerting';
import React, { FC, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { AlertRuleForm } from './components/rule-editor/AlertRuleForm';
import { useIsRuleEditable } from './hooks/useIsRuleEditable';
import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector';
Alerting: view to display alert rule and its underlying data. (#35546) * add page and basic things * quick annotations * added so we can run queries on the view rule page. * wip. * merge * cleaned up the combined rule hook. * readd queries * fixing so you can run queries. * renamed variable. * fix rerenders and visualizing * minor fixes. * work in progress. * wip * a working version that can be tested. * changing check if we have data. * removed unused styling. * removed unused dep. * removed another dep. * Update public/app/features/alerting/unified/hooks/useCombinedRule.ts Co-authored-by: Domas <domas.lapinskas@grafana.com> * Update public/app/features/alerting/unified/hooks/useCombinedRule.ts Co-authored-by: Domas <domas.lapinskas@grafana.com> * refactored and changed UI according to figma. * resseting menu item. * removing unused external link. * refactor according to feedback. * changed so we always fetch the rule. * fixing so datasource only is displayed once. Also changed so we only navigate to alert list when rule has been deleted. * removed unused dep. * Will display query as json if we can't find data source. * changed to a function instead of the React.FC. * refactoring of id generation and added support to generate ids for native prometheus alerts without ruler. * set max width on page content * added page where you can easily link to a rule in grafana. * listing rules with same name. * fixing error cases. * updates after pr feedback * more pr feedback * use 1h-now as timerange * remove unused import * start on test * add test for cloud case * add ruleview render test * add render tests for grafana and cloud alerts * add mock for backendsrv * add rendering test for the find route * check if cards are rendered Co-authored-by: Peter Holmberg <peter.hlmbrg@gmail.com> Co-authored-by: Domas <domas.lapinskas@grafana.com>
4 years ago
import { fetchEditableRuleAction } from './state/actions';
import * as ruleId from './utils/rule-id';
interface ExistingRuleEditorProps {
identifier: RuleIdentifier;
}
const ExistingRuleEditor: FC<ExistingRuleEditorProps> = ({ identifier }) => {
useCleanup((state) => state.unifiedAlerting.ruleForm.existingRule);
const { loading, result, error, dispatched } = useUnifiedAlertingSelector((state) => state.ruleForm.existingRule);
const dispatch = useDispatch();
const { isEditable } = useIsRuleEditable(ruleId.ruleIdentifierToRuleSourceName(identifier), result?.rule);
useEffect(() => {
if (!dispatched) {
Alerting: view to display alert rule and its underlying data. (#35546) * add page and basic things * quick annotations * added so we can run queries on the view rule page. * wip. * merge * cleaned up the combined rule hook. * readd queries * fixing so you can run queries. * renamed variable. * fix rerenders and visualizing * minor fixes. * work in progress. * wip * a working version that can be tested. * changing check if we have data. * removed unused styling. * removed unused dep. * removed another dep. * Update public/app/features/alerting/unified/hooks/useCombinedRule.ts Co-authored-by: Domas <domas.lapinskas@grafana.com> * Update public/app/features/alerting/unified/hooks/useCombinedRule.ts Co-authored-by: Domas <domas.lapinskas@grafana.com> * refactored and changed UI according to figma. * resseting menu item. * removing unused external link. * refactor according to feedback. * changed so we always fetch the rule. * fixing so datasource only is displayed once. Also changed so we only navigate to alert list when rule has been deleted. * removed unused dep. * Will display query as json if we can't find data source. * changed to a function instead of the React.FC. * refactoring of id generation and added support to generate ids for native prometheus alerts without ruler. * set max width on page content * added page where you can easily link to a rule in grafana. * listing rules with same name. * fixing error cases. * updates after pr feedback * more pr feedback * use 1h-now as timerange * remove unused import * start on test * add test for cloud case * add ruleview render test * add render tests for grafana and cloud alerts * add mock for backendsrv * add rendering test for the find route * check if cards are rendered Co-authored-by: Peter Holmberg <peter.hlmbrg@gmail.com> Co-authored-by: Domas <domas.lapinskas@grafana.com>
4 years ago
dispatch(fetchEditableRuleAction(identifier));
}
}, [dispatched, dispatch, identifier]);
if (loading || isEditable === undefined) {
return (
<Page.Contents>
<LoadingPlaceholder text="Loading rule..." />
</Page.Contents>
);
}
if (error) {
return (
<Page.Contents>
<Alert severity="error" title="Failed to load rule">
{error.message}
</Alert>
</Page.Contents>
);
}
if (!result) {
return <AlertWarning title="Rule not found">Sorry! This rule does not exist.</AlertWarning>;
}
if (isEditable === false) {
return <AlertWarning title="Cannot edit rule">Sorry! You do not have permission to edit this rule.</AlertWarning>;
}
return <AlertRuleForm existing={result} />;
};
type RuleEditorProps = GrafanaRouteComponentProps<{ id?: string }>;
const RuleEditor: FC<RuleEditorProps> = ({ match }) => {
Alerting: view to display alert rule and its underlying data. (#35546) * add page and basic things * quick annotations * added so we can run queries on the view rule page. * wip. * merge * cleaned up the combined rule hook. * readd queries * fixing so you can run queries. * renamed variable. * fix rerenders and visualizing * minor fixes. * work in progress. * wip * a working version that can be tested. * changing check if we have data. * removed unused styling. * removed unused dep. * removed another dep. * Update public/app/features/alerting/unified/hooks/useCombinedRule.ts Co-authored-by: Domas <domas.lapinskas@grafana.com> * Update public/app/features/alerting/unified/hooks/useCombinedRule.ts Co-authored-by: Domas <domas.lapinskas@grafana.com> * refactored and changed UI according to figma. * resseting menu item. * removing unused external link. * refactor according to feedback. * changed so we always fetch the rule. * fixing so datasource only is displayed once. Also changed so we only navigate to alert list when rule has been deleted. * removed unused dep. * Will display query as json if we can't find data source. * changed to a function instead of the React.FC. * refactoring of id generation and added support to generate ids for native prometheus alerts without ruler. * set max width on page content * added page where you can easily link to a rule in grafana. * listing rules with same name. * fixing error cases. * updates after pr feedback * more pr feedback * use 1h-now as timerange * remove unused import * start on test * add test for cloud case * add ruleview render test * add render tests for grafana and cloud alerts * add mock for backendsrv * add rendering test for the find route * check if cards are rendered Co-authored-by: Peter Holmberg <peter.hlmbrg@gmail.com> Co-authored-by: Domas <domas.lapinskas@grafana.com>
4 years ago
const { id } = match.params;
const identifier = ruleId.tryParse(id, true);
if (identifier) {
return <ExistingRuleEditor key={id} identifier={identifier} />;
}
if (!(contextSrv.hasEditPermissionInFolders || contextSrv.isEditor)) {
return <AlertWarning title="Cannot create rules">Sorry! You are not allowed to create rules.</AlertWarning>;
}
return <AlertRuleForm />;
};
const AlertWarning: FC<{ title: string }> = ({ title, children }) => (
<Alert className={useStyles2(warningStyles).warning} severity="warning" title={title}>
<p>{children}</p>
<LinkButton href="alerting/list">To rule list</LinkButton>
</Alert>
);
const warningStyles = (theme: GrafanaTheme2) => ({
warning: css`
margin: ${theme.spacing(4)};
`,
});
export default withErrorBoundary(RuleEditor, { style: 'page' });