From cf64adf15642901794fa293beba157a7f4d154c2 Mon Sep 17 00:00:00 2001
From: Domas <domasx2@gmail.com>
Date: Fri, 23 Apr 2021 09:22:41 +0300
Subject: [PATCH] Alerting: hide private labels, collapse query json by default
 (#33284)

---
 .../alerting/unified/components/AlertLabels.tsx   |  7 +++++--
 .../unified/components/rules/RuleDetails.tsx      |  8 ++++++--
 .../unified/components/rules/RuleQuery.tsx        | 15 +++++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/public/app/features/alerting/unified/components/AlertLabels.tsx b/public/app/features/alerting/unified/components/AlertLabels.tsx
index dce7f7cb489..c85203cab1a 100644
--- a/public/app/features/alerting/unified/components/AlertLabels.tsx
+++ b/public/app/features/alerting/unified/components/AlertLabels.tsx
@@ -11,10 +11,13 @@ interface Props {
 export const AlertLabels: FC<Props> = ({ labels }) => {
   const styles = useStyles(getStyles);
 
+  // transform to array of key value pairs and filter out "private" labels that start and end with double underscore
+  const pairs = Object.entries(labels).filter(([key]) => !(key.startsWith('__') && key.endsWith('__')));
+
   return (
     <div className={styles.wrapper}>
-      {Object.entries(labels).map(([k, v]) => (
-        <AlertLabel key={`${k}-${v}`} labelKey={k} value={v} />
+      {pairs.map(([key, value]) => (
+        <AlertLabel key={`${key}-${value}`} labelKey={key} value={value} />
       ))}
     </div>
   );
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
index 6ee1835d3fd..3e2aacaece3 100644
--- a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
@@ -4,7 +4,7 @@ import { useStyles } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { isAlertingRule } from '../../utils/rules';
-import { isCloudRulesSource } from '../../utils/datasource';
+import { isCloudRulesSource, isGrafanaRulesSource } from '../../utils/datasource';
 import { Annotation } from '../Annotation';
 import { AlertLabels } from '../AlertLabels';
 import { AlertInstancesTable } from './AlertInstancesTable';
@@ -50,7 +50,11 @@ export const RuleDetails: FC<Props> = ({ rule, rulesSource }) => {
               <AlertLabels labels={rule.labels} />
             </DetailsField>
           )}
-          <DetailsField label="Expression" className={cx({ [styles.exprRow]: !!annotations.length })} horizontal={true}>
+          <DetailsField
+            label={isGrafanaRulesSource(rulesSource) ? 'Query' : 'Expression'}
+            className={cx({ [styles.exprRow]: !!annotations.length })}
+            horizontal={true}
+          >
             <RuleQuery rule={rule} rulesSource={rulesSource} />
           </DetailsField>
           {annotations.map(([key, value]) => (
diff --git a/public/app/features/alerting/unified/components/rules/RuleQuery.tsx b/public/app/features/alerting/unified/components/rules/RuleQuery.tsx
index 85727485da0..63c6bd8179c 100644
--- a/public/app/features/alerting/unified/components/rules/RuleQuery.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleQuery.tsx
@@ -1,5 +1,6 @@
+import { useTheme2 } from '@grafana/ui';
 import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
 import { isGrafanaRulerRule } from '../../utils/rules';
 import { Expression } from '../Expression';
@@ -11,12 +12,22 @@ interface Props {
 
 export const RuleQuery: FC<Props> = ({ rule, rulesSource }) => {
   const { rulerRule } = rule;
+  const theme = useTheme2();
+
+  const [isHidden, setIsHidden] = useState(true);
 
   if (rulesSource !== GRAFANA_RULES_SOURCE_NAME) {
     return <Expression expression={rule.query} rulesSource={rulesSource} />;
   }
   if (rulerRule && isGrafanaRulerRule(rulerRule)) {
-    // @TODO: better grafana queries vizualization
+    // @TODO: better grafana queries vizualization read-only
+    if (isHidden) {
+      return (
+        <a style={{ color: theme.colors.text.link }} onClick={() => setIsHidden(false)}>
+          Show raw query JSON
+        </a>
+      );
+    }
     return <pre>{JSON.stringify(rulerRule.grafana_alert.data, null, 2)}</pre>;
   }
   return <pre>@TODO: handle grafana prom rule case</pre>;