[v10.2.x] Field: Fix perf regression in getUniqueFieldName() (#81417)

* Field: Fix perf regression in getUniqueFieldName() (#81323) Co-authored-by: nmarrs <nathanielmarrs@gmail.com> (cherry picked from commit 0530021396) * Chore: Fix some Explore deprecations (#80076) * lint --------- Co-authored-by: Leon Sorokin <leeoniya@gmail.com> Co-authored-by: Giordano Ricci <me@giordanoricci.com>
2024-01-26 17:41:33 -06:00
parent 602fc141d7
commit 6288bb1479
22 changed files with 45 additions and 48 deletions
@@ -1,5 +1,3 @@
-import { isEqual } from 'lodash';
-
 import { DataFrame, Field, TIME_SERIES_VALUE_FIELD_NAME, FieldType, TIME_SERIES_TIME_FIELD_NAME } from '../types';
 import { formatLabels } from '../utils/labels';

@@ -167,7 +165,7 @@ export function getUniqueFieldName(field: Field, frame?: DataFrame) {
    for (let i = 0; i < frame.fields.length; i++) {
      const otherField = frame.fields[i];

-      if (isEqual(field, otherField)) {
+      if (field === otherField) {
        foundSelf = true;

        if (dupeCount > 0) {
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';

-import { CoreApp, LoadingState, TimeZone } from '@grafana/data';
+import { CoreApp, LoadingState } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime/src';
-import { defaultTimeZone } from '@grafana/schema';
+import { defaultTimeZone, TimeZone } from '@grafana/schema';
 import { TabbedContainer, TabConfig } from '@grafana/ui';
 import { ExploreDrawer } from 'app/features/explore/ExploreDrawer';
 import { InspectDataTab } from 'app/features/inspector/InspectDataTab';
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';

-import { TimeRange, TimeZone, RawTimeRange, dateTimeForTimeZone, dateMath } from '@grafana/data';
+import { TimeRange, RawTimeRange, dateTimeForTimeZone, dateMath } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
+import { TimeZone } from '@grafana/schema';
 import { TimePickerWithHistory } from 'app/core/components/TimePicker/TimePickerWithHistory';
 import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker';

@@ -12,7 +12,6 @@ import {
  getFrameDisplayName,
  LoadingState,
  SplitOpen,
-  TimeZone,
  ThresholdsConfig,
  DashboardCursorSync,
  EventBus,
@@ -24,6 +23,7 @@ import {
  TooltipDisplayMode,
  SortOrder,
  GraphThresholdsStyleConfig,
+  TimeZone,
 } from '@grafana/schema';
 import { PanelContext, PanelContextProvider, SeriesVisibilityChangeMode, useTheme2 } from '@grafana/ui';
 import { GraphFieldConfig } from 'app/plugins/panel/graph/types';
@@ -2,7 +2,8 @@ import { css, cx } from '@emotion/css';
 import React, { PureComponent } from 'react';
 import tinycolor from 'tinycolor2';

-import { LogRowModel, TimeZone, dateTimeFormat, GrafanaTheme2, LogsSortOrder } from '@grafana/data';
+import { LogRowModel, dateTimeFormat, GrafanaTheme2, LogsSortOrder } from '@grafana/data';
+import { TimeZone } from '@grafana/schema';
 import { Button, Themeable2, withTheme2 } from '@grafana/ui';

 import { LogMessageAnsi } from '../../logs/components/LogMessageAnsi';
@@ -10,9 +10,9 @@ import {
  LoadingState,
  LogLevel,
  LogRowModel,
-  MutableDataFrame,
  standardTransformersRegistry,
  toUtc,
+  createDataFrame,
 } from '@grafana/data';
 import { organizeFieldsTransformer } from '@grafana/data/src/transformations/transformers/organize';
 import { config } from '@grafana/runtime';
@@ -498,7 +498,7 @@ const makeLog = (overrides: Partial<LogRowModel>): LogRowModel => {
    uid,
    entryFieldIndex: 0,
    rowIndex: 0,
-    dataFrame: new MutableDataFrame(),
+    dataFrame: createDataFrame({ fields: [] }),
    logLevel: LogLevel.debug,
    entry,
    hasAnsi: false,
@@ -30,11 +30,10 @@ import {
  serializeStateToUrlParam,
  SplitOpen,
  TimeRange,
-  TimeZone,
  urlUtil,
 } from '@grafana/data';
 import { config, reportInteraction } from '@grafana/runtime';
-import { DataQuery } from '@grafana/schema';
+import { DataQuery, TimeZone } from '@grafana/schema';
 import {
  Button,
  FeatureBadge,
@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import { isEqual } from 'lodash';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';

-import { AbsoluteTimeRange, GrafanaTheme2, LogsSortOrder, TimeZone } from '@grafana/data';
+import { AbsoluteTimeRange, GrafanaTheme2, LogsSortOrder } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { DataQuery } from '@grafana/schema';
+import { DataQuery, TimeZone } from '@grafana/schema';
 import { Button, Icon, Spinner, useTheme2 } from '@grafana/ui';
 import { TOP_BAR_LEVEL_HEIGHT } from 'app/core/components/AppChrome/types';

@@ -1,7 +1,8 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';

-import { dateTimeFormat, systemDateFormats, TimeZone, GrafanaTheme2 } from '@grafana/data';
+import { dateTimeFormat, systemDateFormats, GrafanaTheme2 } from '@grafana/data';
+import { TimeZone } from '@grafana/schema';
 import { CustomScrollbar, Spinner, useTheme2, clearButtonStyles } from '@grafana/ui';

 import { LogsPage } from './LogsNavigation';
@@ -2,15 +2,8 @@ import { css } from '@emotion/css';
 import { identity } from 'lodash';
 import React from 'react';

-import {
-  AbsoluteTimeRange,
-  DataQueryResponse,
-  LoadingState,
-  SplitOpen,
-  TimeZone,
-  EventBus,
-  GrafanaTheme2,
-} from '@grafana/data';
+import { AbsoluteTimeRange, DataQueryResponse, LoadingState, SplitOpen, EventBus, GrafanaTheme2 } from '@grafana/data';
+import { TimeZone } from '@grafana/schema';
 import { Icon, Tooltip, TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui';

 import { getLogsVolumeDataSourceInfo, isLogsVolumeLimited } from '../../logs/utils';
@@ -2,8 +2,9 @@ import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';

-import { applyFieldOverrides, DataFrame, SelectableValue, SplitOpen, TimeZone } from '@grafana/data';
+import { applyFieldOverrides, DataFrame, SelectableValue, SplitOpen } from '@grafana/data';
 import { getTemplateSrv, reportInteraction } from '@grafana/runtime';
+import { TimeZone } from '@grafana/schema';
 import { RadioButtonGroup, Table, AdHocFilterItem, PanelChrome } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { PANEL_BORDER } from 'app/core/constants';
@@ -2,8 +2,9 @@ import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';

-import { applyFieldOverrides, TimeZone, SplitOpen, DataFrame, LoadingState, FieldType } from '@grafana/data';
+import { applyFieldOverrides, SplitOpen, DataFrame, LoadingState, FieldType } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
+import { TimeZone } from '@grafana/schema';
 import { Table, AdHocFilterItem, PanelChrome, withTheme2, Themeable2 } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { t } from 'app/core/internationalization';
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';

 import { DataFrame, SplitOpen } from '@grafana/data';
-import { PanelChrome } from '@grafana/ui/src/components/PanelChrome/PanelChrome';
+import { PanelChrome } from '@grafana/ui';
 import { StoreState, useSelector } from 'app/types';

 import { TraceView } from './TraceView';
@@ -17,8 +17,9 @@ import { SpanStatusCode } from '@opentelemetry/api';
 import cx from 'classnames';
 import React from 'react';

-import { DataFrame, dateTimeFormat, GrafanaTheme2, IconName, LinkModel, TimeZone } from '@grafana/data';
+import { DataFrame, dateTimeFormat, GrafanaTheme2, IconName, LinkModel } from '@grafana/data';
 import { config, locationService, reportInteraction } from '@grafana/runtime';
+import { TimeZone } from '@grafana/schema';
 import { DataLinkButton, Icon, TextArea, useStyles2 } from '@grafana/ui';
 import { TraceToProfilesOptions } from 'app/core/components/TraceToProfiles/TraceToProfilesSettings';
 import { RelatedProfilesTitle } from 'app/plugins/datasource/tempo/resultTransformer';
@@ -16,7 +16,8 @@ import { css } from '@emotion/css';
 import classNames from 'classnames';
 import React from 'react';

-import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
+import { GrafanaTheme2, LinkModel } from '@grafana/data';
+import { TimeZone } from '@grafana/schema';
 import { Button, clearButtonStyles, stylesFactory, withTheme2 } from '@grafana/ui';
 import { TraceToProfilesOptions } from 'app/core/components/TraceToProfiles/TraceToProfilesSettings';

@@ -18,8 +18,9 @@ import memoizeOne from 'memoize-one';
 import * as React from 'react';
 import { RefObject } from 'react';

-import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
+import { GrafanaTheme2, LinkModel } from '@grafana/data';
 import { config, reportInteraction } from '@grafana/runtime';
+import { TimeZone } from '@grafana/schema';
 import { stylesFactory, withTheme2, ToolbarButton } from '@grafana/ui';
 import { TraceToProfilesOptions } from 'app/core/components/TraceToProfiles/TraceToProfilesSettings';

@@ -15,8 +15,9 @@
 import { css } from '@emotion/css';
 import React, { RefObject } from 'react';

-import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
+import { GrafanaTheme2, LinkModel } from '@grafana/data';
 import { config, reportInteraction } from '@grafana/runtime';
+import { TimeZone } from '@grafana/schema';
 import { stylesFactory, withTheme2 } from '@grafana/ui';
 import { TraceToProfilesOptions } from 'app/core/components/TraceToProfiles/TraceToProfilesSettings';

@@ -1,4 +1,4 @@
-import { MutableDataFrame, LogLevel, LogRowModel, LogsSortOrder } from '@grafana/data';
+import { createDataFrame, LogLevel, LogRowModel, LogsSortOrder } from '@grafana/data';
 import { sortLogRows } from 'app/features/logs/utils';
 export const makeLogs = (numberOfLogsToCreate: number, overrides?: Partial<LogRowModel>): LogRowModel[] => {
  const array: LogRowModel[] = [];
@@ -12,7 +12,7 @@ export const makeLogs = (numberOfLogsToCreate: number, overrides?: Partial<LogRo
      uid: uuid,
      entryFieldIndex: 0,
      rowIndex: 0,
-      dataFrame: new MutableDataFrame(),
+      dataFrame: createDataFrame({ fields: [] }),
      logLevel: LogLevel.debug,
      entry,
      hasAnsi: false,
@@ -1,9 +1,9 @@
 import { from, Observable } from 'rxjs';

-import { ArrayDataFrame, DataQueryResponse, FieldType } from '@grafana/data';
+import { arrayToDataFrame, DataQueryResponse, FieldType } from '@grafana/data';

 export function makeLogsQueryResponse(marker = ''): Observable<DataQueryResponse> {
-  const df = new ArrayDataFrame([{ ts: Date.now(), line: `custom log line ${marker}` }]);
+  const df = arrayToDataFrame([{ ts: Date.now(), line: `custom log line ${marker}` }]);
  df.meta = {
    preferredVisualisationType: 'logs',
  };
@@ -12,7 +12,7 @@ export function makeLogsQueryResponse(marker = ''): Observable<DataQueryResponse
 }

 export function makeMetricsQueryResponse(): Observable<DataQueryResponse> {
-  const df = new ArrayDataFrame([{ ts: Date.now(), val: 1 }]);
+  const df = arrayToDataFrame([{ ts: Date.now(), val: 1 }]);
  df.fields[0].type = FieldType.time;
  return from([{ data: [df] }]);
 }
@@ -1,7 +1,8 @@
 import React from 'react';

-import { DataQuery, EventBusSrv, serializeStateToUrlParam } from '@grafana/data';
+import { EventBusSrv, serializeStateToUrlParam } from '@grafana/data';
 import { config } from '@grafana/runtime';
+import { DataQuery } from '@grafana/schema';

 import { silenceConsoleOutput } from '../../../../test/core/utils/silenceConsoleOutput';

@@ -1,4 +1,5 @@
-import { DefaultTimeZone, TimeRange, toUtc, SupplementaryQueryType } from '@grafana/data';
+import { TimeRange, toUtc, SupplementaryQueryType } from '@grafana/data';
+import { defaultTimeZone } from '@grafana/schema';

 export const createDefaultInitialState = () => {
  const t = toUtc();
@@ -14,7 +15,7 @@ export const createDefaultInitialState = () => {
  const defaultInitialState = {
    user: {
      orgId: '1',
-      timeZone: DefaultTimeZone,
+      timeZone: defaultTimeZone,
    },
    explore: {
      panes: {
@@ -38,9 +38,8 @@ export function getDisplayValuesAndLinks(
  sortOrder?: SortOrder,
  mode?: TooltipDisplayMode | null
 ) {
-  const fields = data.fields.map((f, idx) => {
-    return { ...f, hovered: idx === columnIndex };
-  });
+  const fields = data.fields;
+  const hoveredField = columnIndex != null ? fields[columnIndex] : null;

  const visibleFields = fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.tooltip));
  const traceIDField = visibleFields.find((field) => field.name === 'traceID') || fields[0];
@@ -60,7 +59,7 @@ export function getDisplayValuesAndLinks(
  const linkLookup = new Set<string>();

  for (const field of orderedVisibleFields) {
-    if (mode === TooltipDisplayMode.Single && columnIndex != null && !field.hovered) {
+    if (mode === TooltipDisplayMode.Single && field !== hoveredField) {
      continue;
    }

@@ -77,14 +76,11 @@ export function getDisplayValuesAndLinks(
      });
    }

-    // Sanitize field by removing hovered property to fix unique display name issue
-    const { hovered, ...sanitizedField } = field;
-
    displayValues.push({
-      name: getFieldDisplayName(sanitizedField, data),
+      name: getFieldDisplayName(field, data),
      value,
      valueString: formattedValueToString(fieldDisplay),
-      highlight: field.hovered,
+      highlight: field === hoveredField,
    });
  }