Alerting: Central alert history part4 (grafana#90088)

* Implement EventDetails for expanded rows and pagination on the events list

* Add test for getPanelDataForRule function

* prettier

* refactor EventState component

* create interfaces for props

* Add missing translations

* Update some comments

* Add plus button in alertrulename , to add it into the filter

* Add plus button to add filters from the list labels and alert name

* Add clear labels filter button

* run prettier

* fix RBAC checks

* Update AlertLabels onLabelClick functionality

* add limit=0 in useCombinedRule call

* Add filter by state

* remove plus button in labels

* Fix state filter

* Add filter by previous state

* fix some errors after solving conflicts

* Add comments and remove some type assertions

* Update the number of transitions calculation to be for each instance

* Add tests for state filters

* remove type assertion

* Address review comments

* Update returnTo prop in alert list view url

* Update translations

* address review comments

* prettier

* update cursor to pointer

* Address Deyan review comments

* address review pr comments from Deyan

* fix label styles

* Visualize expanded row as a state graph and address some pr review comments

* Add warning when limit of events is reached and rename onClickLabel

* Update texts

* Fix translations

* Update some Labels in the expanded states visualization

* move getPanelDataForRule to a separate file

* Add header to the list of events

* Move HistoryErrorMessage to a separate file

* remove getPanelDataForRule function and test

* add comment

* fitler by instance label results shown inthe state chart

* remove defaults.ini changes

* fix having single event on time state chart

---------

Co-authored-by: Gilles De Mey <[email protected]>

Author: soniaAguilarPeiron

pkg/services/navtree/navtreeimpl/navtree.go

@@ -409,13 +409,15 @@ func (s *ServiceImpl) buildAlertNavLinks(c *contextmodel.ReqContext) *navtree.Na
 	}
 
 	if s.features.IsEnabled(c.Req.Context(), featuremgmt.FlagAlertingCentralAlertHistory) {
-		alertChildNavs = append(alertChildNavs, &navtree.NavLink{
-			Text:     "History",
-			SubTitle: "History of events that were generated by your Grafana-managed alert rules. Silences and Mute timings are ignored.",
-			Id:       "alerts-history",
-			Url:      s.cfg.AppSubURL + "/alerting/history",
-			Icon:     "history",
-		})
+		if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingRuleRead))) {
+			alertChildNavs = append(alertChildNavs, &navtree.NavLink{
+				Text:     "History",
+				SubTitle: "View a history of all alert events generated by your Grafana-managed alert rules. All alert events are displayed regardless of whether silences or mute timings are set.",
+				Id:       "alerts-history",
+				Url:      s.cfg.AppSubURL + "/alerting/history",
+				Icon:     "history",
+			})
+		}
 	}
 
 	if c.SignedInUser.GetOrgRole() == org.RoleAdmin {

public/app/features/alerting/routes.tsx

@@ -168,10 +168,7 @@ export function getAlertingRoutes(cfg = config): RouteDescriptor[] {
     },
     {
       path: '/alerting/history/',
-      roles: evaluateAccess([
-        AccessControlAction.AlertingInstanceRead,
-        AccessControlAction.AlertingInstancesExternalRead,
-      ]),
+      roles: evaluateAccess([AccessControlAction.AlertingRuleRead]),
       component: importAlertingComponent(
         () =>
           import(

public/app/features/alerting/unified/components/AlertLabels.tsx

@@ -15,9 +15,10 @@ interface Props {
   labels: Record<string, string>;
   commonLabels?: Record<string, string>;
   size?: LabelSize;
+  onClick?: (label: string, value: string) => void;
 }
 
-export const AlertLabels = ({ labels, commonLabels = {}, size }: Props) => {
+export const AlertLabels = ({ labels, commonLabels = {}, size, onClick }: Props) => {
   const styles = useStyles2(getStyles, size);
   const [showCommonLabels, setShowCommonLabels] = useState(false);
 
@@ -33,9 +34,19 @@ export const AlertLabels = ({ labels, commonLabels = {}, size }: Props) => {
 
   return (
     <div className={styles.wrapper} role="list" aria-label="Labels">
-      {labelsToShow.map(([label, value]) => (
-        <Label key={label + value} size={size} label={label} value={value} color={getLabelColor(label)} />
-      ))}
+      {labelsToShow.map(([label, value]) => {
+        return (
+          <Label
+            key={label + value}
+            size={size}
+            label={label}
+            value={value}
+            color={getLabelColor(label)}
+            onClick={onClick}
+          />
+        );
+      })}
+
       {!showCommonLabels && hasCommonLabels && (
         <Button
           variant="secondary"
@@ -67,12 +78,14 @@ function getLabelColor(input: string): string {
   return getTagColorsFromName(input).color;
 }
 
-const getStyles = (theme: GrafanaTheme2, size?: LabelSize) => ({
-  wrapper: css({
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
+const getStyles = (theme: GrafanaTheme2, size?: LabelSize) => {
+  return {
+    wrapper: css({
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
 
-    gap: size === 'md' ? theme.spacing() : theme.spacing(0.5),
-  }),
-});
+      gap: size === 'md' ? theme.spacing() : theme.spacing(0.5),
+    }),
+  };
+};

public/app/features/alerting/unified/components/Label.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, useMemo } from 'react';
 import tinycolor2 from 'tinycolor2';
 
 import { GrafanaTheme2, IconName } from '@grafana/data';
@@ -13,15 +13,18 @@ interface Props {
   value: ReactNode;
   color?: string;
   size?: LabelSize;
+  onClick?: (label: string, value: string) => void;
 }
 
 // TODO allow customization with color prop
-const Label = ({ label, value, icon, color, size = 'md' }: Props) => {
+const Label = ({ label, value, icon, color, size = 'md', onClick }: Props) => {
   const styles = useStyles2(getStyles, color, size);
   const ariaLabel = `${label}: ${value}`;
+  const labelStr = label?.toString() ?? '';
+  const valueStr = value?.toString() ?? '';
 
-  return (
-    <div className={styles.wrapper} role="listitem" aria-label={ariaLabel} data-testid="label-value">
+  const innerLabel = useMemo(
+    () => (
       <Stack direction="row" gap={0} alignItems="stretch">
         <div className={styles.label}>
           <Stack direction="row" gap={0.5} alignItems="center">
@@ -37,6 +40,32 @@ const Label = ({ label, value, icon, color, size = 'md' }: Props) => {
           {value ?? '-'}
         </div>
       </Stack>
+    ),
+    [icon, label, value, styles]
+  );
+
+  return (
+    <div className={styles.wrapper} role="listitem" aria-label={ariaLabel} data-testid="label-value">
+      {onClick ? (
+        <div
+          className={styles.clickable}
+          role="button" // role="button" and tabIndex={0} is needed for keyboard navigation
+          tabIndex={0} // Make it focusable
+          key={labelStr + valueStr}
+          onClick={() => onClick(labelStr, valueStr)}
+          onKeyDown={(e) => {
+            // needed for accessiblity: handle keyboard navigation
+            if (e.key === 'Enter') {
+              onClick(labelStr, valueStr);
+              e.preventDefault();
+            }
+          }}
+        >
+          {innerLabel}
+        </div>
+      ) : (
+        innerLabel
+      )}
     </div>
   );
 };
@@ -94,6 +123,12 @@ const getStyles = (theme: GrafanaTheme2, color?: string, size?: string) => {
       borderTopLeftRadius: theme.shape.borderRadius(2),
       borderBottomLeftRadius: theme.shape.borderRadius(2),
     }),
+    clickable: css({
+      '&:hover': {
+        opacity: 0.8,
+        cursor: 'pointer',
+      },
+    }),
     value: css({
       color: 'inherit',
       padding: padding,

public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistoryScene.tsx

@@ -1,6 +1,8 @@
 import { css } from '@emotion/css';
 
+import { GrafanaTheme2, VariableHide } from '@grafana/data';
 import {
+  CustomVariable,
   EmbeddedScene,
   PanelBuilders,
   SceneControlsSpacer,
@@ -18,12 +20,14 @@ import {
 } from '@grafana/scenes';
 import { GraphDrawStyle, VisibilityMode } from '@grafana/schema/dist/esm/index';
 import {
+  Button,
   GraphGradientMode,
   Icon,
   LegendDisplayMode,
   LineInterpolation,
   ScaleDistribution,
   StackingMode,
+  Text,
   Tooltip,
   TooltipDisplayMode,
   useStyles2,
@@ -35,7 +39,9 @@ import { DataSourceInformation } from '../../../home/Insights';
 import { alertStateHistoryDatasource, useRegisterHistoryRuntimeDataSource } from './CentralHistoryRuntimeDataSource';
 import { HistoryEventsListObject } from './EventListSceneObject';
 
-export const LABELS_FILTER = 'filter';
+export const LABELS_FILTER = 'labelsFilter';
+export const STATE_FILTER_TO = 'stateFilterTo';
+export const STATE_FILTER_FROM = 'stateFilterFrom';
 /**
  *
  * This scene shows the history of the alert state changes.
@@ -46,20 +52,56 @@ export const LABELS_FILTER = 'filter';
  * Both share time range and filter variable from the parent scene.
  */
 
+export const StateFilterValues = {
+  all: 'all',
+  firing: 'Alerting',
+  normal: 'Normal',
+  pending: 'Pending',
+} as const;
+
 export const CentralAlertHistoryScene = () => {
-  const filterVariable = new TextBoxVariable({
+  // create the variables for the filters
+  // textbox variable for filtering by labels
+  const labelsFilterVariable = new TextBoxVariable({
     name: LABELS_FILTER,
-    label: 'Filter by labels: ',
+    label: 'Labels: ',
+  });
+  //custom variable for filtering by the current state
+  const transitionsToFilterVariable = new CustomVariable({
+    name: STATE_FILTER_TO,
+    value: StateFilterValues.all,
+    label: 'End state:',
+    hide: VariableHide.dontHide,
+    query: `All : ${StateFilterValues.all}, To Firing : ${StateFilterValues.firing},To Normal : ${StateFilterValues.normal},To Pending : ${StateFilterValues.pending}`,
+  });
+  //custom variable for filtering by the previous state
+  const transitionsFromFilterVariable = new CustomVariable({
+    name: STATE_FILTER_FROM,
+    value: StateFilterValues.all,
+    label: 'Start state:',
+    hide: VariableHide.dontHide,
+    query: `All : ${StateFilterValues.all}, From Firing : ${StateFilterValues.firing},From Normal : ${StateFilterValues.normal},From Pending : ${StateFilterValues.pending}`,
   });
 
   useRegisterHistoryRuntimeDataSource(); // register the runtime datasource for the history api.
 
   const scene = new EmbeddedScene({
     controls: [
+      new SceneReactObject({
+        component: LabelFilter,
+      }),
       new SceneReactObject({
         component: FilterInfo,
       }),
       new VariableValueSelectors({}),
+      new SceneReactObject({
+        component: ClearFilterButton,
+        props: {
+          labelsFilterVariable,
+          transitionsToFilterVariable,
+          transitionsFromFilterVariable,
+        },
+      }),
       new SceneControlsSpacer(),
       new SceneTimePicker({}),
       new SceneRefreshPicker({}),
@@ -71,7 +113,7 @@ export const CentralAlertHistoryScene = () => {
       to: 'now',
     }),
     $variables: new SceneVariableSet({
-      variables: [filterVariable],
+      variables: [labelsFilterVariable, transitionsFromFilterVariable, transitionsToFilterVariable],
     }),
     body: new SceneFlexLayout({
       direction: 'column',
@@ -144,8 +186,10 @@ export function getEventsScenesFlexItem(datasource: DataSourceInformation) {
   return new SceneFlexItem({
     minHeight: 300,
     body: PanelBuilders.timeseries()
-      .setTitle('Events')
-      .setDescription('Alert events during the period of time.')
+      .setTitle('Alert Events')
+      .setDescription(
+        'Each alert event represents an alert instance that changed its state at a particular point in time. The history of the data is displayed over a period of time.'
+      )
       .setData(getSceneQuery(datasource))
       .setColor({ mode: 'continuous-BlPu' })
       .setCustomFieldConfig('fillOpacity', 100)
@@ -167,11 +211,66 @@ export function getEventsScenesFlexItem(datasource: DataSourceInformation) {
       .build(),
   });
 }
+/*
+ * This component shows a button to clear the filters.
+ * It is shown when the filters are active.
+ * props:
+ * labelsFilterVariable: the textbox variable for filtering by labels
+ * transitionsToFilterVariable: the custom variable for filtering by the current state
+ * transitionsFromFilterVariable: the custom variable for filtering by the previous state
+ */
 
-export const FilterInfo = () => {
+function ClearFilterButton({
+  labelsFilterVariable,
+  transitionsToFilterVariable,
+  transitionsFromFilterVariable,
+}: {
+  labelsFilterVariable: TextBoxVariable;
+  transitionsToFilterVariable: CustomVariable;
+  transitionsFromFilterVariable: CustomVariable;
+}) {
+  // get the current values of the filters
+  const valueInLabelsFilter = labelsFilterVariable.getValue();
+  //todo: use parsePromQLStyleMatcherLooseSafe to validate the label filter and check the lenghtof the result
+  const valueInTransitionsFilter = transitionsToFilterVariable.getValue();
+  const valueInTransitionsFromFilter = transitionsFromFilterVariable.getValue();
+  // if no filter is active, return null
+  if (
+    !valueInLabelsFilter &&
+    valueInTransitionsFilter === StateFilterValues.all &&
+    valueInTransitionsFromFilter === StateFilterValues.all
+  ) {
+    return null;
+  }
+  const onClearFilter = () => {
+    labelsFilterVariable.setValue('');
+    transitionsToFilterVariable.changeValueTo(StateFilterValues.all);
+    transitionsFromFilterVariable.changeValueTo(StateFilterValues.all);
+  };
+  return (
+    <Tooltip content="Clear filter">
+      <Button variant={'secondary'} icon="times" onClick={onClearFilter}>
+        <Trans i18nKey="alerting.central-alert-history.filter.clear">Clear filters</Trans>
+      </Button>
+    </Tooltip>
+  );
+}
+
+const LabelFilter = () => {
   const styles = useStyles2(getStyles);
   return (
-    <div className={styles.container}>
+    <div className={styles.filterLabelContainer}>
+      <Text variant="body" weight="light" color="secondary">
+        <Trans i18nKey="alerting.central-alert-history.filterBy">Filter by:</Trans>
+      </Text>
+    </div>
+  );
+};
+
+const FilterInfo = () => {
+  const styles = useStyles2(getStyles);
+  return (
+    <div className={styles.filterInfoContainer}>
       <Tooltip
         content={
           <div>
@@ -180,7 +279,7 @@ export const FilterInfo = () => {
             </Trans>
             <pre>{`{severity="critical", instance=~"cluster-us-.+"}`}</pre>
             <Trans i18nKey="alerting.central-alert-history.filter.info.label2">Invalid use of spaces:</Trans>
-            <pre>{`{severity= "alerting.critical"}`}</pre>
+            <pre>{`{severity= "critical"}`}</pre>
             <pre>{`{severity ="critical"}`}</pre>
             <Trans i18nKey="alerting.central-alert-history.filter.info.label3">Valid use of spaces:</Trans>
             <pre>{`{severity=" critical"}`}</pre>
@@ -197,9 +296,16 @@ export const FilterInfo = () => {
   );
 };
 
-const getStyles = () => ({
-  container: css({
-    padding: '0',
-    alignSelf: 'center',
-  }),
-});
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    filterInfoContainer: css({
+      padding: '0',
+      alignSelf: 'center',
+      marginRight: theme.spacing(-1),
+    }),
+    filterLabelContainer: css({
+      padding: '0',
+      alignSelf: 'center',
+    }),
+  };
+};