Add to filters in homepage and rate+errors graphs

grafana · Apr 26, 2024 · 2e51e47 · 2e51e47
1 parent d502d81
commit 2e51e47
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 20 deletions.
diff --git a/src/components/Explore/AddToFiltersGraphAction.tsx b/src/components/Explore/AddToFiltersGraphAction.tsx
@@ -9,41 +9,49 @@ import {
   AdHocFiltersVariable,
 } from '@grafana/scenes';
 import { Button } from '@grafana/ui';
+import { getLabelValue } from '../../utils/utils';
 
 export interface AddToFiltersGraphActionState extends SceneObjectState {
   frame: DataFrame;
   variableName: string;
+  labelKey?: string;
 }
 
 export class AddToFiltersGraphAction extends SceneObjectBase<AddToFiltersGraphActionState> {
   public onClick = () => {
     const variable = sceneGraph.lookupVariable(this.state.variableName, this);
     if (!(variable instanceof AdHocFiltersVariable)) {
-      return;
+      throw new Error(`${this.state.variableName} variable not found`);
     }
 
-    const labels = this.state.frame.fields[1]?.labels ?? {};
-    if (Object.keys(labels).length !== 1) {
-      return;
+    const labels = this.state.frame.fields.find((f) => f.labels)?.labels ?? {};
+    if (this.state.labelKey) {
+      if (!labels[this.state.labelKey]) {
+        return;
+      }
+    } else {
+      if (Object.keys(labels).length !== 1) {
+        return;
+      }
     }
 
-    const labelName = Object.keys(labels)[0];
+    const labelName = this.state.labelKey ?? Object.keys(labels)[0];
 
     variable.setState({
       filters: [
         ...variable.state.filters,
         {
           key: labelName,
           operator: '=',
-          value: labels[labelName],
+          value: getLabelValue(this.state.frame, this.state.labelKey),
         },
       ],
     });
   };
 
   public static Component = ({ model }: SceneComponentProps<AddToFiltersGraphAction>) => {
     return (
-      <Button variant="primary" size="sm" fill="text" onClick={model.onClick}>
+      <Button variant="primary" size="sm" fill="text" onClick={model.onClick} icon={'search-plus'}>
         Add to filters
       </Button>
     );

diff --git a/src/components/Explore/layouts/allAttributes.ts b/src/components/Explore/layouts/allAttributes.ts
@@ -7,7 +7,7 @@ import {
   VizPanelState,
 } from '@grafana/scenes';
 import { explorationDS, VAR_FILTERS_EXPR } from '../../../utils/shared';
-import { TooltipDisplayMode } from '@grafana/ui';
+import { AxisPlacement, DrawStyle, StackingMode, TooltipDisplayMode } from '@grafana/ui';
 import { LayoutSwitcher } from '../LayoutSwitcher';
 
 const MAX_PANELS_IN_ALL_ATTRIBUTES_BREAKDOWN = 100;
@@ -30,10 +30,33 @@ export function buildAllLayout(attributes: string[], actionsFn: (attribute: stri
           queries: [buildQuery(attribute)],
         })
       )
-      .setCustomFieldConfig('axisLabel', 'Errors')
+      .setOption('legend', { showLegend: false })
+      .setCustomFieldConfig('drawStyle', DrawStyle.Bars)
+      .setCustomFieldConfig('stacking', { mode: StackingMode.Normal })
+      .setCustomFieldConfig('fillOpacity', 100)
+      .setCustomFieldConfig('lineWidth', 0)
+      .setCustomFieldConfig('pointSize', 0)
+      .setCustomFieldConfig('axisLabel', 'Rate')
+      .setOverrides((overrides) => {
+        overrides
+          .matchFieldsWithNameByRegex('.*status="error".*')
+          .overrideColor({
+            mode: 'fixed',
+            fixedColor: 'semi-dark-red',
+          })
+          .overrideCustomFieldConfig('axisPlacement', AxisPlacement.Right)
+          .overrideCustomFieldConfig('axisLabel', 'Errors');
+        overrides.matchFieldsWithNameByRegex('.*status="unset".*').overrideColor({
+          mode: 'fixed',
+          fixedColor: 'green',
+        });
+        overrides.matchFieldsWithNameByRegex('.*status="ok".*').overrideColor({
+          mode: 'fixed',
+          fixedColor: 'dark-green',
+        });
+      })
       .setHeaderActions(actionsFn(attribute))
       .setOption('tooltip', { mode: TooltipDisplayMode.Multi })
-      .setOption('legend', { showLegend: false })
       .build();
 
     children.push(
@@ -67,7 +90,7 @@ export function buildAllLayout(attributes: string[], actionsFn: (attribute: stri
 }
 
 function getExpr(attr: string) {
-  return `{${VAR_FILTERS_EXPR} && status = error} | rate() by(${attr})`;
+  return `{${VAR_FILTERS_EXPR}} | rate() by(${attr}, status)`;
 }
 
 function buildQuery(tagKey: string) {

diff --git a/src/pages/Explore/InvestigateAttributeWithValueAction.tsx b/src/pages/Explore/InvestigateAttributeWithValueAction.tsx
@@ -10,8 +10,7 @@ import {
 } from '@grafana/scenes';
 import { Button } from '@grafana/ui';
 
-import { StartingPointSelectedEvent } from '../../utils/shared';
-import { VAR_GROUPBY } from './SelectStartingPointScene';
+import { StartingPointSelectedEvent, VAR_GROUPBY } from '../../utils/shared';
 
 export interface InvestigateAttributeWithValueActionState extends SceneObjectState {
   value: string;
@@ -21,7 +20,7 @@ export class InvestigateAttributeWithValueAction extends SceneObjectBase<Investi
   public onClick = () => {
     const variable = sceneGraph.lookupVariable('filters', this);
     if (!(variable instanceof AdHocFiltersVariable)) {
-      return;
+      throw new Error('Filters variable not found');
     }
 
     if (!this.state.value) {
@@ -30,7 +29,7 @@ export class InvestigateAttributeWithValueAction extends SceneObjectBase<Investi
 
     const groupByVariable = sceneGraph.lookupVariable(VAR_GROUPBY, this);
     if (!(groupByVariable instanceof CustomVariable)) {
-      return;
+      throw new Error('Group by variable not found');
     }
 
     let newFilters = variable.state.filters;

diff --git a/src/pages/Explore/SelectStartingPointScene.tsx b/src/pages/Explore/SelectStartingPointScene.tsx
@@ -92,11 +92,10 @@ export class SelectStartingPointScene extends SceneObjectBase<TraceSelectSceneSt
               this.state.attributes ?? [],
               (attribute) => new SelectAttributeAction({ attribute: attribute })
             )
-          : buildNormalLayout(
-              variable,
-              (frame: DataFrame) =>
-                new InvestigateAttributeWithValueAction({ value: getLabelValue(frame, variable.getValueText()) })
-            ),
+          : buildNormalLayout(variable, (frame: DataFrame) => [
+              new AddToFiltersGraphAction({ frame, variableName: VAR_FILTERS, labelKey: variable.getValueText() }),
+              new InvestigateAttributeWithValueAction({ value: getLabelValue(frame, variable.getValueText()) }),
+            ]),
     });
   }