Merge pull request #86 from grafana/joey/cleanup-improvements

Cleanup files: move/update actions, remove unnecessary files, tidy functions etc

src/components/AppConfig/AppConfig.tsx

@@ -3,7 +3,6 @@ import { Button, Field, Input, useStyles2, FieldSet, SecretInput } from '@grafan
 import { PluginConfigPageProps, AppPluginMeta, PluginMeta, GrafanaTheme2 } from '@grafana/data';
 import { FetchResponse, getBackendSrv, locationService } from '@grafana/runtime';
 import { css } from '@emotion/css';
-import { testIds } from '../testIds';
 import { lastValueFrom, Observable } from 'rxjs';
 
 export type JsonData = {
@@ -182,6 +181,16 @@ const updatePluginAndReload = async (pluginId: string, data: Partial<PluginMeta<
   }
 };
 
+const testIds = {
+  appConfig: {
+    container: 'data-testid ac-container',
+    apiKey: 'data-testid ac-api-key',
+    apiUrl: 'data-testid ac-api-url',
+    submit: 'data-testid ac-submit-form',
+  },
+};
+
+
 export const updatePlugin = async (pluginId: string, data: Partial<PluginMeta>) => {
   const response = getBackendSrv().fetch({
     url: `/api/plugins/${pluginId}/settings`,

src/components/Explore/ByFrameRepeater.tsx

@@ -18,7 +18,6 @@ import { LoadingStateScene } from 'components/states/LoadingState/LoadingStateSc
 import { GRID_TEMPLATE_COLUMNS } from 'pages/Explore/SelectStartingPointScene';
 import { ErrorStateScene } from 'components/states/ErrorState/ErrorStateScene';
 import { debounce } from 'lodash';
-import { groupSeriesBy } from '../../utils/panels';
 import { Search } from 'pages/Explore/Search';
 import { getGroupByVariable } from 'utils/utils';
 
@@ -130,12 +129,35 @@ export class ByFrameRepeater extends SceneObjectBase<ByFrameRepeaterState> {
     }
   }, 250);
 
+  private groupSeriesBy(data: PanelData, groupBy: string) {
+    const groupedData = data.series.reduce((acc, series) => {
+      const key = series.fields.find((f) => f.type === FieldType.number)?.labels?.[groupBy];
+      if (!key) {
+        return acc;
+      }
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(series);
+      return acc;
+    }, {} as Record<string, DataFrame[]>);
+
+    const newSeries = [];
+    for (const key in groupedData) {
+      const frames = groupedData[key].sort((a, b) => a.name?.localeCompare(b.name!) || 0);
+      const mainFrame = frames[0];
+      frames.slice(1, frames.length).forEach((frame) => mainFrame.fields.push(frame.fields[1]));
+      newSeries.push(mainFrame);
+    }
+    return newSeries;
+  }
+
   private performRepeat(data: PanelData) {
     const newChildren: SceneFlexItem[] = [];
     let frames = data.series;
 
     if (this.state.groupBy) {
-      frames = groupSeriesBy(data, getGroupByVariable(this).getValueText());
+      frames = this.groupSeriesBy(data, getGroupByVariable(this).getValueText());
     }
 
     for (let frameIndex = 0; frameIndex < frames.length; frameIndex++) {

src/components/Explore/GroupBySelector.tsx

@@ -4,8 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { Select, RadioButtonGroup, useStyles2, useTheme2, measureText, Field } from '@grafana/ui';
-import { ALL, RESOURCE_ATTR, SPAN_ATTR } from '../../constants';
-import { ignoredAttributes } from 'utils/shared';
+import { ALL, ignoredAttributes, RESOURCE_ATTR, SPAN_ATTR } from 'utils/shared';
 
 type Props = {
   options: Array<SelectableValue<string>>;

src/components/Explore/TracesByService/Tabs/Breakdown/AttributesBreakdownScene.tsx

@@ -14,18 +14,20 @@ import { Field, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 
 import { GroupBySelector } from '../../../GroupBySelector';
 import {
+  RESOURCE,
+  RESOURCE_ATTR,
+  SPAN,
+  SPAN_ATTR,
   VAR_FILTERS,
   VAR_METRIC,
   radioAttributesResource,
   radioAttributesSpan,
-  getAttributesAsOptions,
 } from '../../../../../utils/shared';
 
 import { LayoutSwitcher } from '../../../LayoutSwitcher';
 import { AddToFiltersAction } from '../../../actions/AddToFiltersAction';
-import { RESOURCE, RESOURCE_ATTR, SPAN, SPAN_ATTR } from '../../../../../constants';
 import { buildNormalLayout } from '../../../layouts/attributeBreakdown';
-import { getGroupByVariable, getTraceByServiceScene } from 'utils/utils';
+import { getAttributesAsOptions, getGroupByVariable, getTraceByServiceScene } from 'utils/utils';
 
 export interface AttributesBreakdownSceneState extends SceneObjectState {
   body?: SceneObject;

src/components/Explore/TracesByService/Tabs/Breakdown/AttributesComparisonScene.tsx

@@ -16,18 +16,17 @@ import {
 import { Icon, useStyles2 } from '@grafana/ui';
 
 import { GroupBySelector } from '../../../GroupBySelector';
-import { VAR_FILTERS, explorationDS, VAR_FILTERS_EXPR, getAttributesAsOptions } from '../../../../../utils/shared';
+import { VAR_FILTERS, explorationDS, VAR_FILTERS_EXPR, ALL } from '../../../../../utils/shared';
 
 import { LayoutSwitcher } from '../../../LayoutSwitcher';
 import { AddToFiltersAction } from '../../../actions/AddToFiltersAction';
-import { ALL } from '../../../../../constants';
 import { map, Observable } from 'rxjs';
 import { BaselineColor, buildAllComparisonLayout, SelectionColor } from '../../../layouts/allComparison';
 // eslint-disable-next-line no-restricted-imports
 import { duration } from 'moment';
 import { comparisonQuery } from '../../../queries/comparisonQuery';
 import { buildAttributeComparison } from '../../../layouts/attributeComparison';
-import { getGroupByVariable, getTraceByServiceScene } from 'utils/utils';
+import { getAttributesAsOptions, getGroupByVariable, getTraceByServiceScene } from 'utils/utils';
 import { InspectAttributeAction } from 'components/Explore/actions/InspectAttributeAction';
 
 export interface AttributesComparisonSceneState extends SceneObjectState {

src/components/Explore/TracesByService/Tabs/TabsBarScene.tsx

@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2, Box, Stack, TabsBar, Tab } from '@grafana/ui';
 import React from 'react';
 import { getTraceExplorationScene, getTraceByServiceScene } from 'utils/utils';
-import { ShareExplorationButton } from '../ShareExplorationButton';
+import { ShareExplorationAction } from '../../actions/ShareExplorationAction';
 import { buildSpansScene } from './Spans/SpansScene';
 import { buildStructureScene } from './Structure/StructureScene';
 import { buildBreakdownScene } from './Breakdown/BreakdownScene';
@@ -35,7 +35,7 @@ export class TabsBarScene extends SceneObjectBase<TabsBarSceneState> {
       <Box paddingY={1}>
         <div className={styles.actions}>
           <Stack gap={2}>
-            <ShareExplorationButton exploration={exploration} />
+            <ShareExplorationAction exploration={exploration} />
           </Stack>
         </div>
 

src/components/Explore/TracesByService/TracesByServiceScene.tsx

@@ -23,13 +23,13 @@ import {
   VAR_DATASOURCE_EXPR,
   MetricFunction,
   ComparisonSelection,
+  ALL,
 } from '../../../utils/shared';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { ActionViewType, TabsBarScene, actionViewsDefinitions } from './Tabs/TabsBarScene';
 import { HistogramPanel } from './HistogramPanel';
 import { isEqual } from 'lodash';
 import { getGroupByVariable, getTraceExplorationScene } from 'utils/utils';
-import { ALL } from '../../../constants';
 
 export interface TraceSceneState extends SceneObjectState {
   body: SceneFlexLayout;

src/components/Explore/actions/AddToFiltersAction.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 
 import { DataFrame } from '@grafana/data';
-import { SceneObjectState, SceneObjectBase, SceneComponentProps } from '@grafana/scenes';
+import { SceneObjectState, SceneObjectBase, SceneComponentProps, AdHocFiltersVariable } from '@grafana/scenes';
 import { Button } from '@grafana/ui';
 import { getFiltersVariable, getLabelValue } from '../../../utils/utils';
-import { addToFilters } from './addToFilters';
 
 export interface AddToFiltersActionState extends SceneObjectState {
   frame: DataFrame;
@@ -39,3 +38,20 @@ export class AddToFiltersAction extends SceneObjectBase<AddToFiltersActionState>
     );
   };
 }
+
+export const addToFilters = (variable: AdHocFiltersVariable, label: string, value: string) => {
+  // ensure we set the new filter with latest value
+  // and remove any existing filter for the same key
+  const filtersWithoutNew = variable.state.filters.filter((f) => f.key !== label);
+
+  variable.setState({
+    filters: [
+      ...filtersWithoutNew,
+      {
+        key: label,
+        operator: '=',
+        value: value,
+      },
+    ],
+  });
+};

src/components/Explore/panels/CloseTraceViewPanelAction.tsx → src/components/Explore/actions/CloseTraceViewAction.tsx

@@ -6,12 +6,12 @@ import { Button, useStyles2 } from '@grafana/ui';
 import { DetailsSceneUpdated } from 'utils/shared';
 import { css } from '@emotion/css';
 
-export class CloseTraceViewPanelAction extends SceneObjectBase {
+export class CloseTraceViewAction extends SceneObjectBase {
   public onClick = () => {
     this.publishEvent(new DetailsSceneUpdated({ showDetails: false }), true);
   };
 
-  public static Component = ({ model }: SceneComponentProps<CloseTraceViewPanelAction>) => {
+  public static Component = ({ model }: SceneComponentProps<CloseTraceViewAction>) => {
     const styles = useStyles2(getStyles);
     return (
       <div className={styles.button}>

src/components/Explore/TracesByService/ShareExplorationButton.tsx → src/components/Explore/actions/ShareExplorationAction.tsx

@@ -6,11 +6,11 @@ import { ToolbarButton } from '@grafana/ui';
 import { TraceExploration } from '../../../pages/Explore';
 import { getUrlForExploration } from '../../../utils/utils';
 
-interface ShareExplorationButtonState {
+interface ShareExplorationActionState {
   exploration: TraceExploration;
 }
 
-export const ShareExplorationButton = ({ exploration }: ShareExplorationButtonState) => {
+export const ShareExplorationAction = ({ exploration }: ShareExplorationActionState) => {
   const { origin } = useLocation();
   const [tooltip, setTooltip] = useState('Copy url');
 

src/components/Explore/filters/FilterRenderer.tsx

@@ -5,8 +5,7 @@ import { AdHocVariableFilter, GrafanaTheme2, SelectableValue, toOption } from '@
 import { Button, Select, SelectBaseProps, useStyles2 } from '@grafana/ui';
 
 import { FilterByVariable } from './FilterByVariable';
-import { ignoredAttributes } from 'utils/shared';
-import { RESOURCE_ATTR, SPAN_ATTR } from '../../../constants';
+import { ignoredAttributes, RESOURCE_ATTR, SPAN_ATTR } from 'utils/shared';
 
 interface Props {
   filter: AdHocVariableFilter;

src/components/Explore/layouts/HighestDifferencePanel.tsx

@@ -4,7 +4,7 @@ import { Button, Stack, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import React from 'react';
 import { getFiltersVariable } from '../../../utils/utils';
-import { addToFilters } from '../actions/addToFilters';
+import { addToFilters } from '../actions/AddToFiltersAction';
 
 export interface HighestDifferencePanelState extends SceneObjectState {
   frame: DataFrame;

src/components/Explore/panels/TraceViewPanelScene.tsx

@@ -16,7 +16,7 @@ import { LoadingStateScene } from 'components/states/LoadingState/LoadingStateSc
 import { css } from '@emotion/css';
 import Skeleton from 'react-loading-skeleton';
 import { useStyles2 } from '@grafana/ui';
-import { CloseTraceViewPanelAction } from './CloseTraceViewPanelAction';
+import { CloseTraceViewAction } from '../actions/CloseTraceViewAction';
 
 export interface TracePanelState extends SceneObjectState {
   panel?: SceneFlexLayout;
@@ -46,7 +46,7 @@ export class TraceViewPanelScene extends SceneObjectBase<TracePanelState> {
                   new SceneFlexItem({
                     body: PanelBuilders.traces()
                       .setTitle('Trace')
-                      .setHeaderActions(new CloseTraceViewPanelAction({}))
+                      .setHeaderActions(new CloseTraceViewAction({}))
                       .build(),
                   }),
                 ],

src/components/Routes/Routes.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { PLUGIN_BASE_URL, ROUTES } from '../../constants';
 import { TraceExplorationPage } from '../../pages/Explore';
+import { PLUGIN_BASE_URL, ROUTES } from 'utils/shared';
 
 export const Routes = () => {
   return (

src/pages/Explore/SelectStartingPointScene.tsx

@@ -12,11 +12,10 @@ import {
   VAR_METRIC,
   StartingPointSelectedEvent,
   radioAttributesResource,
-  getAttributesAsOptions,
+  RESOURCE_ATTR,
 } from '../../utils/shared';
-import { getLabelValue, getGroupByVariable, getTraceExplorationScene } from '../../utils/utils';
+import { getLabelValue, getGroupByVariable, getTraceExplorationScene, getAttributesAsOptions } from '../../utils/utils';
 import { getDataSourceSrv } from '@grafana/runtime';
-import { RESOURCE_ATTR } from '../../constants';
 import { buildNormalLayout } from '../../components/Explore/layouts/attributeBreakdown';
 import { LayoutSwitcher } from '../../components/Explore/LayoutSwitcher';
 import { AddToFiltersAction } from '../../components/Explore/actions/AddToFiltersAction';

src/utils/shared.ts

@@ -1,7 +1,12 @@
 import { BusEventBase, BusEventWithPayload } from '@grafana/data';
+import pluginJson from '../plugin.json';
 
 export type MetricFunction = 'rate' | 'errors' | 'duration';
+export enum ROUTES {
+  Explore = 'explore',
+}
 
+export const PLUGIN_BASE_URL = `/a/${pluginJson.id}`;
 export const EXPLORATIONS_ROUTE = '/a/grafana-exploretraces-app/explore';
 export const DATASOURCE_LS_KEY = 'grafana.explore.traces.datasource';
 
@@ -11,9 +16,14 @@ export const VAR_FILTERS = 'filters';
 export const VAR_FILTERS_EXPR = '${filters}';
 export const VAR_GROUPBY = 'groupBy';
 export const VAR_METRIC = 'metric';
-
 export const explorationDS = { uid: VAR_DATASOURCE_EXPR };
 
+export const ALL = 'All';
+export const RESOURCE = 'Resource';
+export const SPAN = 'Span';
+export const RESOURCE_ATTR = 'resource.';
+export const SPAN_ATTR = 'span.';
+
 export const radioAttributesResource = ['resource.service.name', 'resource.cluster', 'resource.environment', 'resource.namespace'];
 export const radioAttributesSpan = ['name', 'kind', 'rootName', 'rootServiceName', 'status', 'statusMessage', 'span.http.status_code'];
 export const ignoredAttributes = ['duration', 'event:name', 'nestedSetLeft', 'nestedSetParent', 'nestedSetRight', 'span:id', 'trace:id', 'traceDuration'];
@@ -37,7 +47,3 @@ export interface DetailsSceneUpdatedPayload {
 export class DetailsSceneUpdated extends BusEventWithPayload<DetailsSceneUpdatedPayload> {
   public static type = 'details-scene-updated';
 }
-
-export function getAttributesAsOptions(attributes: string[]) {
-  return attributes.map((attribute) => ({ label: attribute, value: attribute }));
-}