Module: Split it up + heavy refactor

.github/workflows/is-compatible.yml

@@ -35,4 +35,4 @@ jobs:
       - name: Build plugin
         run: npm run build
       - name: Compatibility check
-        run: npx @grafana/levitate@latest is-compatible --path src/module.ts --target @grafana/data,@grafana/ui,@grafana/runtime
+        run: npx @grafana/levitate@latest is-compatible --path src/module.tsx --target @grafana/data,@grafana/ui,@grafana/runtime

package.json

@@ -73,6 +73,7 @@
     "tsconfig-paths": "^4.2.0",
     "typescript": "4.8.4",
     "webpack": "^5.86.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-livereload-plugin": "^3.0.2"
   },

src/Components/App.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import { AppRootProps } from '@grafana/data';
-import { LogExplorationView } from './LogExplorationPage';
+const LogExplorationView = lazy(() => import('./LogExplorationPage'));
 
 const PluginPropsContext = React.createContext<AppRootProps | null>(null);
 
-export class App extends React.PureComponent<AppRootProps> {
+class App extends React.PureComponent<AppRootProps> {
   render() {
     return (
       <PluginPropsContext.Provider value={this.props}>
@@ -13,3 +13,5 @@ export class App extends React.PureComponent<AppRootProps> {
     );
   }
 }
+
+export default App;

src/Components/IndexScene/IndexScene.tsx

@@ -22,10 +22,6 @@ import {
 } from '@grafana/scenes';
 import {
   EXPLORATION_DS,
-  getFieldsVariable,
-  getLevelsVariable,
-  getPatternsVariable,
-  getUrlParamNameForVariable,
   MIXED_FORMAT_EXPR,
   VAR_DATASOURCE,
   VAR_FIELDS,
@@ -52,6 +48,12 @@ import {
 } from 'services/query';
 import { VariableHide } from '@grafana/schema';
 import { CustomConstantVariable } from '../../services/CustomConstantVariable';
+import {
+  getFieldsVariable,
+  getLevelsVariable,
+  getPatternsVariable,
+  getUrlParamNameForVariable,
+} from '../../services/variableGetters';
 
 export interface AppliedPattern {
   pattern: string;

src/Components/LogExplorationPage.tsx

@@ -11,7 +11,7 @@ const getSceneApp = () =>
     pages: [makeIndexPage(), makeRedirectPage()],
   });
 
-export function LogExplorationView() {
+function LogExplorationView() {
   const [isInitialized, setIsInitialized] = React.useState(false);
 
   initializeMetadataService();
@@ -37,3 +37,5 @@ export function LogExplorationView() {
 
   return <scene.Component model={scene} />;
 }
+
+export default LogExplorationView;

src/Components/ServiceScene/ActionBarScene.tsx

@@ -4,13 +4,14 @@ import { getExplorationFor } from '../../services/scenes';
 import { getDrilldownSlug, getDrilldownValueSlug, PageSlugs, ValueSlugs } from '../../services/routing';
 import { GoToExploreButton } from './GoToExploreButton';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '../../services/analytics';
-import { getLabelsVariable, SERVICE_NAME } from '../../services/variables';
+import { SERVICE_NAME } from '../../services/variables';
 import { navigateToDrilldownPage, navigateToIndex } from '../../services/navigate';
 import React from 'react';
 import { ServiceScene, ServiceSceneState } from './ServiceScene';
 import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 import { BreakdownViewDefinition, breakdownViewsDefinitions } from './BreakdownViews';
+import { getLabelsVariable } from '../../services/variableGetters';
 
 export interface ActionBarSceneState extends SceneObjectState {}
 

src/Components/ServiceScene/Breakdowns/AddToFiltersButton.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { addAdHocFilter, addToFilters, AddToFiltersButton, FieldValue, FilterType } from './AddToFiltersButton';
+import { addAdHocFilter, addToFilters, AddToFiltersButton, FilterType } from './AddToFiltersButton';
 import { BusEvent, createDataFrame, Field, FieldType, LoadingState, PanelData } from '@grafana/data';
 import userEvent from '@testing-library/user-event';
 import { AdHocFiltersVariable, sceneGraph, SceneObject, SceneQueryRunner } from '@grafana/scenes';
-import { LEVEL_VARIABLE_VALUE, VAR_FIELDS, VAR_LABELS, VAR_LEVELS } from 'services/variables';
+import { FieldValue, LEVEL_VARIABLE_VALUE, VAR_FIELDS, VAR_LABELS, VAR_LEVELS } from 'services/variables';
 import { ServiceScene, ServiceSceneState } from '../ServiceScene';
 
 const scene = { publishEvent(event: BusEvent, bubble?: boolean) {} } as SceneObject;

src/Components/ServiceScene/Breakdowns/AddToFiltersButton.tsx

@@ -4,19 +4,12 @@ import { AdHocVariableFilter, BusEventBase, DataFrame } from '@grafana/data';
 import { SceneComponentProps, SceneObject, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 import { VariableHide } from '@grafana/schema';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
-import {
-  getAdHocFiltersVariable,
-  getValueFromAdHocVariableFilter,
-  LEVEL_VARIABLE_VALUE,
-  ParserType,
-  VAR_FIELDS,
-  VAR_LABELS,
-  VAR_LEVELS,
-} from 'services/variables';
+import { LEVEL_VARIABLE_VALUE, VAR_FIELDS, VAR_LABELS, VAR_LEVELS } from 'services/variables';
 import { FilterButton } from 'Components/FilterButton';
 import { FilterOp } from 'services/filters';
 import { getDetectedLabelsFrame } from '../ServiceScene';
 import { getParserForField } from '../../../services/fields';
+import { getAdHocFiltersVariable, getValueFromAdHocVariableFilter } from '../../../services/variableGetters';
 
 export interface AddToFiltersButtonState extends SceneObjectState {
   frame: DataFrame;
@@ -43,16 +36,6 @@ export function addAdHocFilter(filter: AdHocVariableFilter, scene: SceneObject,
   addToFilters(filter.key, filter.value, type, scene, variableType);
 }
 
-export interface FieldValue {
-  value: string;
-  parser: ParserType;
-}
-
-export interface AdHocFieldValue {
-  value?: string;
-  parser?: ParserType;
-}
-
 export type VariableFilterType = typeof VAR_LABELS | typeof VAR_FIELDS | typeof VAR_LEVELS;
 
 export function addToFilters(

src/Components/ServiceScene/Breakdowns/FieldValuesBreakdownScene.tsx

@@ -11,7 +11,7 @@ import {
   SceneObjectState,
   SceneReactObject,
 } from '@grafana/scenes';
-import { buildDataQuery, LokiQuery } from '../../../services/query';
+import { buildDataQuery } from '../../../services/query';
 import { getSortByPreference } from '../../../services/store';
 import { DataQueryError, LoadingState } from '@grafana/data';
 import { LayoutSwitcher } from './LayoutSwitcher';
@@ -20,14 +20,16 @@ import { ByFrameRepeater } from './ByFrameRepeater';
 import { Alert, DrawStyle, LoadingPlaceholder } from '@grafana/ui';
 import { buildFieldsQueryString, getFilterBreakdownValueScene } from '../../../services/fields';
 import { getLabelValue } from './SortByScene';
-import { getFieldGroupByVariable, getFieldsVariable, VAR_FIELDS } from '../../../services/variables';
+import { VAR_FIELDS } from '../../../services/variables';
 import React from 'react';
 import { FIELDS_BREAKDOWN_GRID_TEMPLATE_COLUMNS, FieldsBreakdownScene } from './FieldsBreakdownScene';
 import { AddFilterEvent } from './AddToFiltersButton';
 import { navigateToDrilldownPage } from '../../../services/navigate';
 import { PageSlugs } from '../../../services/routing';
 import { getDetectedFieldsFrame, ServiceScene } from '../ServiceScene';
 import { DEFAULT_SORT_BY } from '../../../services/sorting';
+import { getFieldGroupByVariable, getFieldsVariable } from '../../../services/variableGetters';
+import { LokiQuery } from '../../../services/lokiQuery';
 
 export interface FieldValuesBreakdownSceneState extends SceneObjectState {
   body?: LayoutSwitcher | SceneReactObject;

src/Components/ServiceScene/Breakdowns/FieldsAggregatedBreakdownScene.tsx

@@ -10,7 +10,7 @@ import {
   SceneObjectState,
   VizPanel,
 } from '@grafana/scenes';
-import { ALL_VARIABLE_VALUE, getFieldGroupByVariable, getFieldsVariable } from '../../../services/variables';
+import { ALL_VARIABLE_VALUE } from '../../../services/variables';
 import { buildDataQuery } from '../../../services/query';
 import { getQueryRunner, setLevelColorOverrides } from '../../../services/panel';
 import { DrawStyle, LoadingPlaceholder, StackingMode } from '@grafana/ui';
@@ -30,6 +30,7 @@ import { DataFrame, LoadingState } from '@grafana/data';
 import { limitMaxNumberOfSeriesForPanel, MAX_NUMBER_OF_TIME_SERIES } from './TimeSeriesLimitSeriesTitleItem';
 import { map, Observable } from 'rxjs';
 import { buildFieldsQueryString, isAvgField } from '../../../services/fields';
+import { getFieldGroupByVariable, getFieldsVariable } from '../../../services/variableGetters';
 
 export interface FieldsAggregatedBreakdownSceneState extends SceneObjectState {
   body?: LayoutSwitcher;

src/Components/ServiceScene/Breakdowns/FieldsBreakdownScene.tsx

@@ -19,14 +19,7 @@ import {
 import { Alert, Button, useStyles2 } from '@grafana/ui';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { getSortByPreference } from 'services/store';
-import {
-  ALL_VARIABLE_VALUE,
-  getFieldGroupByVariable,
-  getLabelsVariable,
-  SERVICE_NAME,
-  VAR_FIELD_GROUP_BY,
-  VAR_LABELS,
-} from 'services/variables';
+import { ALL_VARIABLE_VALUE, SERVICE_NAME, VAR_FIELD_GROUP_BY, VAR_LABELS } from 'services/variables';
 import { areArraysEqual } from '../../../services/comparison';
 import { CustomConstantVariable, CustomConstantVariableState } from '../../../services/CustomConstantVariable';
 import { navigateToValueBreakdown } from '../../../services/navigate';
@@ -45,6 +38,7 @@ import { SortByScene, SortCriteriaChanged } from './SortByScene';
 import { StatusWrapper } from './StatusWrapper';
 import { getFieldOptions } from 'services/filters';
 import { EmptyLayoutScene } from './EmptyLayoutScene';
+import { getFieldGroupByVariable, getLabelsVariable } from '../../../services/variableGetters';
 
 export const averageFields = ['duration', 'count', 'total', 'bytes'];
 export const FIELDS_BREAKDOWN_GRID_TEMPLATE_COLUMNS = 'repeat(auto-fit, minmax(400px, 1fr))';

src/Components/ServiceScene/Breakdowns/LabelBreakdownScene.tsx

@@ -17,14 +17,7 @@ import {
 import { Alert, useStyles2 } from '@grafana/ui';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { ValueSlugs } from 'services/routing';
-import {
-  ALL_VARIABLE_VALUE,
-  getLabelGroupByVariable,
-  getLabelsVariable,
-  SERVICE_NAME,
-  VAR_LABEL_GROUP_BY,
-  VAR_LABELS,
-} from 'services/variables';
+import { ALL_VARIABLE_VALUE, SERVICE_NAME, VAR_LABEL_GROUP_BY, VAR_LABELS } from 'services/variables';
 import { ByFrameRepeater } from './ByFrameRepeater';
 import { FieldSelector } from './FieldSelector';
 import { StatusWrapper } from './StatusWrapper';
@@ -40,6 +33,7 @@ import { LabelValuesBreakdownScene } from './LabelValuesBreakdownScene';
 import { LabelsAggregatedBreakdownScene } from './LabelsAggregatedBreakdownScene';
 import { DEFAULT_SORT_BY } from '../../../services/sorting';
 import { EmptyLayoutScene } from './EmptyLayoutScene';
+import { getLabelGroupByVariable, getLabelsVariable } from '../../../services/variableGetters';
 
 export interface LabelBreakdownSceneState extends SceneObjectState {
   body?: SceneObject;

src/Components/ServiceScene/Breakdowns/LabelValuesBreakdownScene.tsx

@@ -19,12 +19,7 @@ import { getSortByPreference } from '../../../services/store';
 import { LoadingState } from '@grafana/data';
 import { ByFrameRepeater } from './ByFrameRepeater';
 import { getFilterBreakdownValueScene } from '../../../services/fields';
-import {
-  ALL_VARIABLE_VALUE,
-  getLabelGroupByVariable,
-  VAR_LABEL_GROUP_BY_EXPR,
-  VAR_LABELS,
-} from '../../../services/variables';
+import { ALL_VARIABLE_VALUE, VAR_LABEL_GROUP_BY_EXPR, VAR_LABELS } from '../../../services/variables';
 import React from 'react';
 import { LabelBreakdownScene } from './LabelBreakdownScene';
 import { navigateToDrilldownPage } from '../../../services/navigate';
@@ -33,6 +28,7 @@ import { ServiceScene } from '../ServiceScene';
 import { AddFilterEvent } from './AddToFiltersButton';
 import { DEFAULT_SORT_BY } from '../../../services/sorting';
 import { buildLabelsQuery, LABEL_BREAKDOWN_GRID_TEMPLATE_COLUMNS } from '../../../services/labels';
+import { getLabelGroupByVariable } from '../../../services/variableGetters';
 
 export interface LabelValueBreakdownSceneState extends SceneObjectState {
   body?: LayoutSwitcher;

src/Components/ServiceScene/Breakdowns/LabelsAggregatedBreakdownScene.tsx

@@ -15,20 +15,16 @@ import {
 import { LayoutSwitcher } from './LayoutSwitcher';
 import { DrawStyle, LoadingPlaceholder, StackingMode } from '@grafana/ui';
 import { getQueryRunner, setLevelColorOverrides } from '../../../services/panel';
-import {
-  ALL_VARIABLE_VALUE,
-  getFieldsVariable,
-  getLabelGroupByVariable,
-  LEVEL_VARIABLE_VALUE,
-} from '../../../services/variables';
+import { ALL_VARIABLE_VALUE, LEVEL_VARIABLE_VALUE } from '../../../services/variables';
 import React from 'react';
 import { LabelBreakdownScene } from './LabelBreakdownScene';
 import { SelectLabelActionScene } from './SelectLabelActionScene';
 import { ValueSlugs } from '../../../services/routing';
 import { limitMaxNumberOfSeriesForPanel, MAX_NUMBER_OF_TIME_SERIES } from './TimeSeriesLimitSeriesTitleItem';
 import { limitFramesTransformation } from './FieldsAggregatedBreakdownScene';
-import { LokiQuery } from '../../../services/query';
 import { buildLabelsQuery, LABEL_BREAKDOWN_GRID_TEMPLATE_COLUMNS } from '../../../services/labels';
+import { getFieldsVariable, getLabelGroupByVariable } from '../../../services/variableGetters';
+import { LokiQuery } from '../../../services/lokiQuery';
 import { ServiceScene } from '../ServiceScene';
 import { DataFrame, LoadingState } from '@grafana/data';
 

src/Components/ServiceScene/Breakdowns/Patterns/PatternNameLabel.tsx

@@ -3,12 +3,12 @@ import { AdHocFiltersVariable, sceneGraph } from '@grafana/scenes';
 import { Spinner, Toggletip, useStyles2 } from '@grafana/ui';
 import { getLokiDatasource } from 'services/scenes';
 import { IndexScene } from 'Components/IndexScene/IndexScene';
-import { getLabelsVariable } from 'services/variables';
 import { buildDataQuery } from 'services/query';
 import { PatternFieldLabelStats } from './PatternFieldLabelStats';
 import { GrafanaTheme2, LoadingState, LogLabelStatsModel, TimeRange } from '@grafana/data';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { css } from '@emotion/css';
+import { getLabelsVariable } from '../../../../services/variableGetters';
 
 interface PatternNameLabelProps {
   exploration: IndexScene;

src/Components/ServiceScene/Breakdowns/Patterns/PatternsLogsSampleScene.tsx

@@ -15,18 +15,17 @@ import React from 'react';
 import { LoadingState } from '@grafana/data';
 import { Alert, Button } from '@grafana/ui';
 import {
-  getFieldsVariable,
-  getLevelsVariable,
-  getLineFilterVariable,
   LOG_STREAM_SELECTOR_EXPR,
   PATTERNS_SAMPLE_SELECTOR_EXPR,
   VAR_PATTERNS_EXPR,
 } from '../../../../services/variables';
-import { buildDataQuery, LokiQuery, renderPatternFilters } from '../../../../services/query';
+import { buildDataQuery, renderPatternFilters } from '../../../../services/query';
 import { getQueryRunner } from '../../../../services/panel';
 import { AppliedPattern } from '../../../IndexScene/IndexScene';
 import { PatternsViewTableScene } from './PatternsViewTableScene';
 import { emptyStateStyles } from '../FieldsBreakdownScene';
+import { getFieldsVariable, getLevelsVariable, getLineFilterVariable } from '../../../../services/variableGetters';
+import { LokiQuery } from '../../../../services/lokiQuery';
 
 interface PatternsLogsSampleSceneState extends SceneObjectState {
   pattern: string;

src/Components/ServiceScene/Breakdowns/PatternsLogsSampleScene.tsx

@@ -12,11 +12,8 @@ import {
 } from '@grafana/scenes';
 import React from 'react';
 import { getQueryRunner } from '../../../services/panel';
-import { buildDataQuery, LokiQuery, renderPatternFilters } from '../../../services/query';
+import { buildDataQuery, renderPatternFilters } from '../../../services/query';
 import {
-  getFieldsVariable,
-  getLevelsVariable,
-  getLineFilterVariable,
   LOG_STREAM_SELECTOR_EXPR,
   PATTERNS_SAMPLE_SELECTOR_EXPR,
   VAR_PATTERNS_EXPR,
@@ -26,6 +23,8 @@ import { LoadingState } from '@grafana/data';
 import { Alert, Button } from '@grafana/ui';
 import { PatternsViewTableScene } from './Patterns/PatternsViewTableScene';
 import { emptyStateStyles } from './FieldsBreakdownScene';
+import { getFieldsVariable, getLevelsVariable, getLineFilterVariable } from '../../../services/variableGetters';
+import { LokiQuery } from '../../../services/lokiQuery';
 
 interface PatternsLogsSampleSceneState extends SceneObjectState {
   pattern: string;

src/Components/ServiceScene/Breakdowns/SelectLabelActionScene.tsx

@@ -13,17 +13,15 @@ import { Button } from '@grafana/ui';
 import React from 'react';
 import { addToFilters, VariableFilterType } from './AddToFiltersButton';
 import { FilterButton } from '../../FilterButton';
+import { EMPTY_VARIABLE_VALUE, LEVEL_VARIABLE_VALUE, SERVICE_NAME } from '../../../services/variables';
+import { AdHocVariableFilter, Field, Labels, LoadingState } from '@grafana/data';
+import { FilterOp } from '../../../services/filters';
 import {
-  EMPTY_VARIABLE_VALUE,
   getFieldsVariable,
   getLabelsVariable,
   getLevelsVariable,
   getValueFromAdHocVariableFilter,
-  LEVEL_VARIABLE_VALUE,
-  SERVICE_NAME,
-} from '../../../services/variables';
-import { AdHocVariableFilter, Field, Labels, LoadingState } from '@grafana/data';
-import { FilterOp } from '../../../services/filters';
+} from '../../../services/variableGetters';
 
 interface SelectLabelActionSceneState extends SceneObjectState {
   labelName: string;

src/Components/ServiceScene/LineFilterScene.tsx

@@ -3,11 +3,11 @@ import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana
 import { Field } from '@grafana/ui';
 import { debounce, escapeRegExp } from 'lodash';
 import React, { ChangeEvent } from 'react';
-import { getLineFilterVariable } from 'services/variables';
 import { testIds } from 'services/testIds';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { SearchInput } from './Breakdowns/SearchInput';
 import { LineFilterIcon } from './LineFilterIcon';
+import { getLineFilterVariable } from '../../services/variableGetters';
 
 interface LineFilterState extends SceneObjectState {
   lineFilter: string;

src/Components/ServiceScene/LogsPanelScene.tsx

@@ -14,9 +14,11 @@ import React from 'react';
 import { LogsListScene } from './LogsListScene';
 import { LoadingPlaceholder } from '@grafana/ui';
 import { addToFilters, FilterType } from './Breakdowns/AddToFiltersButton';
-import { getFilterTypeFromLabelType, getLabelTypeFromFrame, LabelType } from '../../services/fields';
-import { getAdHocFiltersVariable, SERVICE_NAME, VAR_FIELDS, VAR_LABELS, VAR_LEVELS } from '../../services/variables';
+import { getFilterTypeFromLabelType, getLabelTypeFromFrame } from '../../services/fields';
+import { SERVICE_NAME, VAR_FIELDS, VAR_LABELS, VAR_LEVELS } from '../../services/variables';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '../../services/analytics';
+import { getAdHocFiltersVariable } from '../../services/variableGetters';
+import { LabelType } from '../../services/fieldsTypes';
 
 interface LogsPanelSceneState extends SceneObjectState {
   body?: VizPanel;

src/Components/ServiceScene/LogsTableScene.tsx

@@ -9,7 +9,8 @@ import { css } from '@emotion/css';
 import { addAdHocFilter } from './Breakdowns/AddToFiltersButton';
 import { areArraysEqual } from '../../services/comparison';
 import { getLogsPanelFrame } from './ServiceScene';
-import { getFilterTypeFromLabelType, getLabelTypeFromFrame, LabelType } from '../../services/fields';
+import { getFilterTypeFromLabelType, getLabelTypeFromFrame } from '../../services/fields';
+import { LabelType } from '../../services/fieldsTypes';
 
 export class LogsTableScene extends SceneObjectBase {
   public static Component = ({ model }: SceneComponentProps<LogsTableScene>) => {