Explore: Reorganized data viz components (#68510)

* Move logs-related files to its own folder; update ownership paths

* Fix failing tests

* Put Flame graph and Node graph related files into separate folders

* Put RawPrometheus related files into a separate folder

* Put Table related files into a separate folder

* Add owners to three visualization categories

* observability-logs team owns everything under logs

* Move logs utils to their separate folder under Logs

.betterer.results

@@ -2559,11 +2559,11 @@ exports[`better eslint`] = {
     "public/app/features/explore/ExploreQueryInspector.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/features/explore/Logs.tsx:5381": [
+    "public/app/features/explore/Logs/Logs.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/features/explore/LogsMetaRow.tsx:5381": [
+    "public/app/features/explore/Logs/LogsMetaRow.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/features/explore/QueryRows.test.tsx:5381": [

.github/CODEOWNERS

@@ -443,9 +443,12 @@ lerna.json @grafana/frontend-ops
 /public/testdata/ @grafana/grafana-frontend-platform
 /public/views/ @grafana/grafana-frontend-platform
 
-/public/app/features/explore/Logs.tsx @grafana/observability-logs
-/public/app/features/explore/LogsContainer.tsx @grafana/observability-logs
+/public/app/features/explore/Logs/ @grafana/observability-logs
 
+/public/app/features/explore/RawPrometheus/ @grafana/observability-metrics
+
+/public/app/features/explore/NodeGraph/ @grafana/observability-traces-and-profiling
+/public/app/features/explore/FlameGraph/ @grafana/observability-traces-and-profiling
 /public/app/features/explore/TraceView/ @grafana/observability-traces-and-profiling
 
 /public/api-merged.json @grafana/backend-platform

public/app/features/explore/Explore.tsx

@@ -42,19 +42,19 @@ import { getTimeZone } from '../profile/state/selectors';
 
 import ExploreQueryInspector from './ExploreQueryInspector';
 import { ExploreToolbar } from './ExploreToolbar';
-import { FlameGraphExploreContainer } from './FlameGraphExploreContainer';
+import { FlameGraphExploreContainer } from './FlameGraph/FlameGraphExploreContainer';
 import { GraphContainer } from './Graph/GraphContainer';
-import LogsContainer from './LogsContainer';
-import { LogsSamplePanel } from './LogsSamplePanel';
+import LogsContainer from './Logs/LogsContainer';
+import { LogsSamplePanel } from './Logs/LogsSamplePanel';
 import { NoData } from './NoData';
 import { NoDataSourceCallToAction } from './NoDataSourceCallToAction';
-import { NodeGraphContainer } from './NodeGraphContainer';
+import { NodeGraphContainer } from './NodeGraph/NodeGraphContainer';
 import { QueryRows } from './QueryRows';
-import RawPrometheusContainer from './RawPrometheusContainer';
+import RawPrometheusContainer from './RawPrometheus/RawPrometheusContainer';
 import { ResponseErrorContainer } from './ResponseErrorContainer';
 import RichHistoryContainer from './RichHistory/RichHistoryContainer';
 import { SecondaryActions } from './SecondaryActions';
-import TableContainer from './TableContainer';
+import TableContainer from './Table/TableContainer';
 import { TraceViewContainer } from './TraceView/TraceViewContainer';
 import { changeSize } from './state/explorePane';
 import { splitOpen } from './state/main';

public/app/features/explore/Logs/LiveLogs.test.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 
 import { LogRowModel } from '@grafana/data';
 
+import { makeLogs } from '../__mocks__/makeLogs';
+
 import { LiveLogsWithTheme } from './LiveLogs';
-import { makeLogs } from './__mocks__/makeLogs';
 
 const setup = (rows: LogRowModel[]) =>
   render(

public/app/features/explore/Logs/LiveLogs.tsx

@@ -5,12 +5,11 @@ import tinycolor from 'tinycolor2';
 import { LogRowModel, TimeZone, dateTimeFormat, GrafanaTheme2, LogsSortOrder } from '@grafana/data';
 import { Button, Themeable2, withTheme2 } from '@grafana/ui';
 
-import { LogMessageAnsi } from '../logs/components/LogMessageAnsi';
-import { getLogRowStyles } from '../logs/components/getLogRowStyles';
-import { sortLogRows } from '../logs/utils';
-
-import { ElapsedTime } from './ElapsedTime';
-import { filterLogRowsByIndex } from './state/utils';
+import { LogMessageAnsi } from '../../logs/components/LogMessageAnsi';
+import { getLogRowStyles } from '../../logs/components/getLogRowStyles';
+import { sortLogRows } from '../../logs/utils';
+import { ElapsedTime } from '../ElapsedTime';
+import { filterLogRowsByIndex } from '../state/utils';
 
 const getStyles = (theme: GrafanaTheme2) => ({
   logsRowsLive: css`

public/app/features/explore/Logs/Logs.tsx

@@ -43,8 +43,8 @@ import { dedupLogRows, filterLogLevels } from 'app/core/logsModel';
 import store from 'app/core/store';
 import { ExploreId } from 'app/types/explore';
 
-import { LogRows } from '../logs/components/LogRows';
-import { LogRowContextModal } from '../logs/components/log-context/LogRowContextModal';
+import { LogRows } from '../../logs/components/LogRows';
+import { LogRowContextModal } from '../../logs/components/log-context/LogRowContextModal';
 
 import { LogsMetaRow } from './LogsMetaRow';
 import LogsNavigation from './LogsNavigation';

public/app/features/explore/Logs/LogsContainer.tsx

@@ -23,15 +23,20 @@ import { Collapse } from '@grafana/ui';
 import { StoreState } from 'app/types';
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 
-import { getTimeZone } from '../profile/state/selectors';
+import { getTimeZone } from '../../profile/state/selectors';
+import {
+  addResultsToCache,
+  clearCache,
+  loadSupplementaryQueryData,
+  setSupplementaryQueryEnabled,
+} from '../state/query';
+import { updateTimeRange } from '../state/time';
+import { LiveTailControls } from '../useLiveTailControls';
+import { getFieldLinksForExplore } from '../utils/links';
 
 import { LiveLogsWithTheme } from './LiveLogs';
 import { Logs } from './Logs';
-import { addResultsToCache, clearCache, loadSupplementaryQueryData, setSupplementaryQueryEnabled } from './state/query';
-import { updateTimeRange } from './state/time';
-import { LiveTailControls } from './useLiveTailControls';
 import { LogsCrossFadeTransition } from './utils/LogsCrossFadeTransition';
-import { getFieldLinksForExplore } from './utils/links';
 
 interface LogsContainerProps extends PropsFromRedux {
   width: number;

public/app/features/explore/Logs/LogsMetaRow.test.tsx

@@ -5,8 +5,8 @@ import React, { ComponentProps } from 'react';
 
 import { LogLevel, LogsDedupStrategy, MutableDataFrame } from '@grafana/data';
 
-import { MAX_CHARACTERS } from '../logs/components/LogRowMessage';
-import { logRowsToReadableJson } from '../logs/utils';
+import { MAX_CHARACTERS } from '../../logs/components/LogRowMessage';
+import { logRowsToReadableJson } from '../../logs/utils';
 
 import { LogsMetaRow } from './LogsMetaRow';
 

public/app/features/explore/Logs/LogsMetaRow.tsx

@@ -6,12 +6,11 @@ import { LogsDedupStrategy, LogsMetaItem, LogsMetaKind, LogRowModel, CoreApp, da
 import { reportInteraction } from '@grafana/runtime';
 import { Button, Dropdown, Menu, ToolbarButton, Tooltip, useStyles2 } from '@grafana/ui';
 
-import { downloadLogsModelAsTxt } from '../inspector/utils/download';
-import { LogLabels } from '../logs/components/LogLabels';
-import { MAX_CHARACTERS } from '../logs/components/LogRowMessage';
-import { logRowsToReadableJson } from '../logs/utils';
-
-import { MetaInfoText, MetaItemProps } from './MetaInfoText';
+import { downloadLogsModelAsTxt } from '../../inspector/utils/download';
+import { LogLabels } from '../../logs/components/LogLabels';
+import { MAX_CHARACTERS } from '../../logs/components/LogRowMessage';
+import { logRowsToReadableJson } from '../../logs/utils';
+import { MetaInfoText, MetaItemProps } from '../MetaInfoText';
 
 const getStyles = () => ({
   metaContainer: css`

public/app/features/explore/Logs/LogsSamplePanel.tsx

@@ -17,9 +17,9 @@ import { Button, Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';
 import { dataFrameToLogsModel } from 'app/core/logsModel';
 import store from 'app/core/store';
 
-import { LogRows } from '../logs/components/LogRows';
+import { LogRows } from '../../logs/components/LogRows';
+import { SupplementaryResultError } from '../SupplementaryResultError';
 
-import { SupplementaryResultError } from './SupplementaryResultError';
 import { SETTINGS_KEYS } from './utils/logs';
 
 type Props = {

public/app/features/explore/Logs/LogsVolumePanel.test.tsx

@@ -5,7 +5,7 @@ import { DataQueryResponse, LoadingState, EventBusSrv } from '@grafana/data';
 
 import { LogsVolumePanel } from './LogsVolumePanel';
 
-jest.mock('./Graph/ExploreGraph', () => {
+jest.mock('../Graph/ExploreGraph', () => {
   const ExploreGraph = () => <span>ExploreGraph</span>;
   return {
     ExploreGraph,

public/app/features/explore/Logs/LogsVolumePanel.tsx

@@ -13,9 +13,8 @@ import {
 } from '@grafana/data';
 import { Icon, Tooltip, TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui';
 
-import { getLogsVolumeDataSourceInfo, isLogsVolumeLimited } from '../logs/utils';
-
-import { ExploreGraph } from './Graph/ExploreGraph';
+import { getLogsVolumeDataSourceInfo, isLogsVolumeLimited } from '../../logs/utils';
+import { ExploreGraph } from '../Graph/ExploreGraph';
 
 type Props = {
   logsVolumeData: DataQueryResponse | undefined;

public/app/features/explore/Logs/LogsVolumePanelList.test.tsx

@@ -6,7 +6,7 @@ import { DataQueryResponse, LoadingState, EventBusSrv } from '@grafana/data';
 
 import { LogsVolumePanelList } from './LogsVolumePanelList';
 
-jest.mock('./Graph/ExploreGraph', () => {
+jest.mock('../Graph/ExploreGraph', () => {
   const ExploreGraph = () => <span>ExploreGraph</span>;
   return {
     ExploreGraph,

public/app/features/explore/Logs/LogsVolumePanelList.tsx

@@ -14,10 +14,10 @@ import {
 } from '@grafana/data';
 import { Button, InlineField, useStyles2 } from '@grafana/ui';
 
-import { mergeLogsVolumeDataFrames, isLogsVolumeLimited, getLogsVolumeMaximumRange } from '../logs/utils';
+import { mergeLogsVolumeDataFrames, isLogsVolumeLimited, getLogsVolumeMaximumRange } from '../../logs/utils';
+import { SupplementaryResultError } from '../SupplementaryResultError';
 
 import { LogsVolumePanel } from './LogsVolumePanel';
-import { SupplementaryResultError } from './SupplementaryResultError';
 import { isTimeoutErrorResponse } from './utils/logsVolumeResponse';
 
 type Props = {

public/app/features/explore/NodeGraph/NodeGraphContainer.tsx

@@ -7,11 +7,10 @@ import { applyFieldOverrides, DataFrame, GrafanaTheme2, SplitOpen } from '@grafa
 import { config, reportInteraction } from '@grafana/runtime';
 import { Collapse, useStyles2, useTheme2 } from '@grafana/ui';
 
-import { NodeGraph } from '../../plugins/panel/nodeGraph';
-import { useCategorizeFrames } from '../../plugins/panel/nodeGraph/useCategorizeFrames';
-import { ExploreId, StoreState } from '../../types';
-
-import { useLinks } from './utils/links';
+import { NodeGraph } from '../../../plugins/panel/nodeGraph';
+import { useCategorizeFrames } from '../../../plugins/panel/nodeGraph/useCategorizeFrames';
+import { ExploreId, StoreState } from '../../../types';
+import { useLinks } from '../utils/links';
 
 const getStyles = (theme: GrafanaTheme2) => ({
   warningText: css`

public/app/features/explore/RawPrometheus/RawPrometheusContainer.tsx

@@ -10,9 +10,9 @@ import { PANEL_BORDER } from 'app/core/constants';
 import { StoreState, TABLE_RESULTS_STYLE } from 'app/types';
 import { ExploreId, ExploreItemState, TABLE_RESULTS_STYLES, TableResultsStyle } from 'app/types/explore';
 
-import { MetaInfoText } from './MetaInfoText';
-import RawListContainer from './PrometheusListView/RawListContainer';
-import { getFieldLinksForExplore } from './utils/links';
+import { MetaInfoText } from '../MetaInfoText';
+import RawListContainer from '../PrometheusListView/RawListContainer';
+import { getFieldLinksForExplore } from '../utils/links';
 
 interface RawPrometheusContainerProps {
   ariaLabel?: string;

public/app/features/explore/Table/TableContainer.tsx

@@ -7,8 +7,8 @@ import { config } from 'app/core/config';
 import { StoreState } from 'app/types';
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 
-import { MetaInfoText } from './MetaInfoText';
-import { getFieldLinksForExplore } from './utils/links';
+import { MetaInfoText } from '../MetaInfoText';
+import { getFieldLinksForExplore } from '../utils/links';
 
 interface TableContainerProps {
   ariaLabel?: string;

public/app/features/logs/components/log-context/LogRowContextModal.tsx

@@ -20,8 +20,8 @@ import { DataQuery, TimeZone } from '@grafana/schema';
 import { Icon, Button, LoadingBar, Modal, useTheme2 } from '@grafana/ui';
 import { dataFrameToLogsModel } from 'app/core/logsModel';
 import store from 'app/core/store';
+import { SETTINGS_KEYS } from 'app/features/explore/Logs/utils/logs';
 import { splitOpen } from 'app/features/explore/state/main';
-import { SETTINGS_KEYS } from 'app/features/explore/utils/logs';
 import { useDispatch } from 'app/types';
 
 import { sortLogRows } from '../../utils';