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>

public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx

@@ -15,6 +15,7 @@ import { VizWrapper } from './VizWrapper';
 import { isExpressionQuery } from 'app/features/expressions/guards';
 import { TABLE, TIMESERIES } from '../../utils/constants';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
+import { SupportedPanelPlugins } from '../PanelPluginsButtonGroup';
 
 interface Props {
   data: PanelData;
@@ -30,8 +31,6 @@ interface Props {
   index: number;
 }
 
-export type SupportedPanelPlugins = 'timeseries' | 'table' | 'stat';
-
 export const QueryWrapper: FC<Props> = ({
   data,
   dsSettings,

public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx

@@ -2,12 +2,11 @@ import React, { FC, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { css } from '@emotion/css';
 import { GrafanaTheme2, PanelData } from '@grafana/data';
-import { config, PanelRenderer } from '@grafana/runtime';
-import { RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { PanelRenderer } from '@grafana/runtime';
+import { useStyles2 } from '@grafana/ui';
 import { PanelOptions } from 'app/plugins/panel/table/models.gen';
-import { SupportedPanelPlugins } from './QueryWrapper';
 import { useVizHeight } from '../../hooks/useVizHeight';
-import { STAT, TABLE, TIMESERIES } from '../../utils/constants';
+import { SupportedPanelPlugins, PanelPluginsButtonGroup } from '../PanelPluginsButtonGroup';
 
 interface Props {
   data: PanelData;
@@ -20,7 +19,6 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
     frameIndex: 0,
     showHeader: true,
   });
-  const panels = getSupportedPanels();
   const vizHeight = useVizHeight(data, currentPanel, options.frameIndex);
   const styles = useStyles2(getStyles(vizHeight));
 
@@ -31,7 +29,7 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.buttonGroup}>
-        <RadioButtonGroup options={panels} value={currentPanel} onChange={changePanel} />
+        <PanelPluginsButtonGroup onChange={changePanel} value={currentPanel} />
       </div>
       <AutoSizer>
         {({ width }) => {
@@ -57,21 +55,11 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
   );
 };
 
-const getSupportedPanels = () => {
-  return Object.values(config.panels)
-    .filter((p) => p.id === TIMESERIES || p.id === TABLE || p.id === STAT)
-    .map((panel) => ({ value: panel.id, label: panel.name, imgUrl: panel.info.logos.small }));
-};
-
 const getStyles = (visHeight: number) => (theme: GrafanaTheme2) => ({
   wrapper: css`
     padding: 0 ${theme.spacing(2)};
     height: ${visHeight + theme.spacing.gridSize * 4}px;
   `,
-  autoSizerWrapper: css`
-    width: 100%;
-    height: 200px;
-  `,
   buttonGroup: css`
     display: flex;
     justify-content: flex-end;