DEV-48338 Silences alert not eval right away in grafana 10 (#108)

Author: copyhold

public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx

@@ -1,9 +1,13 @@
+// LOGZ.IO CHANGES :: DEV-48338 , file taken from https://github.com/grafana/grafana/pull/87320
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { useState } from 'react';
+import { useDebounce, useDeepCompareEffect } from 'react-use';
 
 import { dateTime, GrafanaTheme2 } from '@grafana/data';
 import { Alert, Badge, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
-import { AlertmanagerAlert, Matcher } from 'app/plugins/datasource/alertmanager/types';
+import { MatcherFieldValue } from 'app/features/alerting/unified/types/silence-form';
+import { matcherFieldToMatcher } from 'app/features/alerting/unified/utils/alertmanager';
+import { AlertmanagerAlert, Matcher, MatcherOperator } from 'app/plugins/datasource/alertmanager/types';
 
 import { alertmanagerApi } from '../../api/alertmanagerApi';
 import { isNullDate } from '../../utils/time';
@@ -12,27 +16,52 @@ import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '..
 
 import { AmAlertStateTag } from './AmAlertStateTag';
 
+const MATCHER_ALERT_RULE_UID = '__alert_rule_uid__';
 interface Props {
   amSourceName: string;
-  matchers: Matcher[];
+  matchers: MatcherFieldValue[];
+  ruleUid?: string;
 }
 
-export const SilencedInstancesPreview = ({ amSourceName, matchers }: Props) => {
-  const { useGetAlertmanagerAlertsQuery } = alertmanagerApi;
+/**
+ * Performs a deep equality check on the dependencies, and debounces the callback
+ */
+const useDebouncedDeepCompare = (cb: () => void, debounceMs: number, dependencies: unknown[]) => {
+  const [state, setState] = useState<unknown[]>();
+
+  useDebounce(cb, debounceMs, [state]);
+
+  useDeepCompareEffect(() => {
+    setState(dependencies);
+  }, [dependencies]);
+};
+
+export const SilencedInstancesPreview = ({ amSourceName, matchers: inputMatchers, ruleUid }: Props) => {
+  const matchers: Matcher[] = [
+    ...(ruleUid ? [{ name: MATCHER_ALERT_RULE_UID, value: ruleUid, operator: MatcherOperator.equal }] : []),
+    ...inputMatchers,
+  ].map(matcherFieldToMatcher);
+  const useLazyQuery = alertmanagerApi.endpoints.getAlertmanagerAlerts.useLazyQuery;
   const styles = useStyles2(getStyles);
   const columns = useColumns();
 
   // By default the form contains an empty matcher - with empty name and value and = operator
   // We don't want to fetch previews for empty matchers as it results in all alerts returned
-  const hasValidMatchers = matchers.some((matcher) => matcher.value && matcher.name);
-
-  const {
-    currentData: alerts = [],
-    isFetching,
-    isError,
-  } = useGetAlertmanagerAlertsQuery(
-    { amSourceName, filter: { matchers } },
-    { skip: !hasValidMatchers, refetchOnMountOrArgChange: true }
+  const hasValidMatchers = ruleUid || inputMatchers.some((matcher) => matcher.value && matcher.name);
+
+  const [getAlertmanagerAlerts, { currentData: alerts = [], isFetching, isError }] = useLazyQuery();
+
+  // We need to deep compare the matchers, as otherwise the preview API call is triggered on every render
+  // of the component. This is because between react-hook-form's useFieldArray, and our parsing of the matchers,
+  // we end up otherwise triggering the call too frequently
+  useDebouncedDeepCompare(
+    () => {
+      if (hasValidMatchers) {
+        getAlertmanagerAlerts({ amSourceName, filter: { matchers } });
+      }
+    },
+    500,
+    [amSourceName, matchers]
   );
 
   const tableItemAlerts = alerts.map<DynamicTableItemProps<AlertmanagerAlert>>((alert) => ({
@@ -43,18 +72,18 @@ export const SilencedInstancesPreview = ({ amSourceName, matchers }: Props) => {
   return (
     <div>
       <h4 className={styles.title}>
-        Affected alert instances
+        Affected alert rule instances
         {tableItemAlerts.length > 0 ? (
           <Badge className={styles.badge} color="blue" text={tableItemAlerts.length} />
         ) : null}
       </h4>
       {!hasValidMatchers && <span>Add a valid matcher to see affected alerts</span>}
       {isError && (
         <Alert title="Preview not available" severity="error">
-          Error occured when generating affected alerts preview. Are you matchers valid?
+          Error occured when generating preview of affected alerts. Are your matchers valid?
         </Alert>
       )}
-      {isFetching && <LoadingPlaceholder text="Loading..." />}
+      {isFetching && <LoadingPlaceholder text="Loading affected alert rule instances..." />}
       {!isFetching && !isError && hasValidMatchers && (
         <div className={styles.table}>
           {tableItemAlerts.length > 0 ? (
@@ -65,7 +94,7 @@ export const SilencedInstancesPreview = ({ amSourceName, matchers }: Props) => {
               pagination={{ itemsPerPage: 10 }}
             />
           ) : (
-            <span>No matching alert instances found</span>
+            <span>No firing alert instances found</span>
           )}
         </div>
       )}
@@ -106,21 +135,21 @@ function useColumns(): Array<DynamicTableColumnProps<AlertmanagerAlert>> {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  table: css`
-    max-width: ${theme.breakpoints.values.lg}px;
-  `,
-  moreMatches: css`
-    margin-top: ${theme.spacing(1)};
-  `,
-  title: css`
-    display: flex;
-    align-items: center;
-  `,
-  badge: css`
-    margin-left: ${theme.spacing(1)};
-  `,
-  stateColumn: css`
-    display: flex;
-    align-items: center;
-  `,
+  table: css({
+    maxWidth: `${theme.breakpoints.values.lg}px`,
+  }),
+  moreMatches: css({
+    marginTop: theme.spacing(1),
+  }),
+  title: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  badge: css({
+    marginLeft: theme.spacing(1),
+  }),
+  stateColumn: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
 });

public/app/features/alerting/unified/components/silences/SilencesEditor.tsx

@@ -183,6 +183,7 @@ export const SilencesEditor = ({ silence, alertManagerSourceName }: Props) => {
 
   const userLogged = Boolean(config.bootData.user.isSignedIn && config.bootData.user.name);
 
+// LOGZ.IO CHANGES :: DEV-48338 , line 242
   return (
     <FormProvider {...formAPI}>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -238,7 +239,7 @@ export const SilencesEditor = ({ silence, alertManagerSourceName }: Props) => {
               />
             </Field>
           )}
-          <SilencedInstancesPreview amSourceName={alertManagerSourceName} matchers={matchersForPreview} />
+          <SilencedInstancesPreview amSourceName={alertManagerSourceName} matchers={matcherFields} />
         </FieldSet>
         <div className={styles.flexRow}>
           {loading && (