grafana/public/app/plugins/datasource/azuremonitor/components/LogsQueryBuilder/LogsQueryBuilder.tsx

import React, { useMemo, useState, useCallback } from 'react';

import { SelectableValue, TimeRange } from '@grafana/data';
import { t } from '@grafana/i18n';
import { EditorRows } from '@grafana/plugin-ui';
import { Alert } from '@grafana/ui';

import {
  BuilderQueryEditorExpressionType,
  BuilderQueryEditorPropertyType,
  BuilderQueryEditorReduceExpression,
  BuilderQueryEditorWhereExpression,
  BuilderQueryEditorGroupByExpression,
  BuilderQueryEditorOrderByExpression,
  BuilderQueryEditorPropertyExpression,
  BuilderQueryExpression,
} from '../../dataquery.gen';
import Datasource from '../../datasource';
import { selectors } from '../../e2e/selectors';
import { AzureLogAnalyticsMetadataTable, AzureLogAnalyticsMetadataColumn } from '../../types/logAnalyticsMetadata';
import { AzureMonitorQuery } from '../../types/query';
import { EngineSchema } from '../../types/types';

import { AggregateSection } from './AggregationSection';
import { AzureMonitorKustoQueryBuilder } from './AzureMonitorKustoQueryBuilder';
import { FilterSection } from './FilterSection';
import { FuzzySearch } from './FuzzySearch';
import { GroupBySection } from './GroupBySection';
import KQLPreview from './KQLPreview';
import { LimitSection } from './LimitSection';
import { OrderBySection } from './OrderBySection';
import { TableSection } from './TableSection';
import { DEFAULT_LOGS_BUILDER_QUERY } from './utils';

interface LogsQueryBuilderProps {
  query: AzureMonitorQuery;
  basicLogsEnabled: boolean;
  onQueryChange: (newQuery: AzureMonitorQuery) => void;
  schema: EngineSchema;
  templateVariableOptions: SelectableValue<string>;
  datasource: Datasource;
  timeRange?: TimeRange;
  isLoadingSchema: boolean;
}

export const LogsQueryBuilder: React.FC<LogsQueryBuilderProps> = (props) => {
  const { query, onQueryChange, schema, datasource, timeRange, isLoadingSchema } = props;
  const [isKQLPreviewHidden, setIsKQLPreviewHidden] = useState<boolean>(true);

  const tables: AzureLogAnalyticsMetadataTable[] = useMemo(() => {
    return schema?.database?.tables || [];
  }, [schema?.database]);

  const builderQuery: BuilderQueryExpression = query.azureLogAnalytics?.builderQuery || DEFAULT_LOGS_BUILDER_QUERY;

  const allColumns: AzureLogAnalyticsMetadataColumn[] = useMemo(() => {
    const tableName = builderQuery.from?.property.name;
    const selectedTable = tables.find((table) => table.name === tableName);
    return selectedTable?.columns || [];
  }, [builderQuery, tables]);

  const buildAndUpdateQuery = useCallback(
    ({
      limit,
      reduce,
      where,
      fuzzySearch,
      groupBy,
      orderBy,
      columns,
      from,
      basicLogsQuery,
    }: {
      limit?: number;
      reduce?: BuilderQueryEditorReduceExpression[];
      where?: BuilderQueryEditorWhereExpression[];
      fuzzySearch?: BuilderQueryEditorWhereExpression[];
      groupBy?: BuilderQueryEditorGroupByExpression[];
      orderBy?: BuilderQueryEditorOrderByExpression[];
      columns?: string[];
      from?: BuilderQueryEditorPropertyExpression;
      basicLogsQuery?: boolean;
    }) => {
      const datetimeColumn = allColumns.find((col) => col.type === 'datetime')?.name || 'TimeGenerated';

      const timeFilterExpression: BuilderQueryEditorWhereExpression = {
        type: BuilderQueryEditorExpressionType.Or,
        expressions: [
          {
            type: BuilderQueryEditorExpressionType.Operator,
            operator: { name: '$__timeFilter', value: datetimeColumn },
            property: { name: datetimeColumn, type: BuilderQueryEditorPropertyType.Datetime },
          },
        ],
      };

      const updatedBuilderQuery: BuilderQueryExpression = {
        ...builderQuery,
        ...(limit !== undefined ? { limit } : {}),
        ...(reduce !== undefined
          ? { reduce: { expressions: reduce, type: BuilderQueryEditorExpressionType.Reduce } }
          : {}),
        ...(where !== undefined ? { where: { expressions: where, type: BuilderQueryEditorExpressionType.And } } : {}),
        ...(fuzzySearch !== undefined
          ? { fuzzySearch: { expressions: fuzzySearch, type: BuilderQueryEditorExpressionType.And } }
          : {}),
        ...(groupBy !== undefined
          ? { groupBy: { expressions: groupBy, type: BuilderQueryEditorExpressionType.Group_by } }
          : {}),
        ...(orderBy !== undefined
          ? { orderBy: { expressions: orderBy, type: BuilderQueryEditorExpressionType.Order_by } }
          : {}),
        ...(columns !== undefined ? { columns: { columns, type: BuilderQueryEditorExpressionType.Property } } : {}),
        ...(from !== undefined ? { from } : {}),
        timeFilter: { expressions: [timeFilterExpression], type: BuilderQueryEditorExpressionType.And },
      };

      const updatedQueryString = AzureMonitorKustoQueryBuilder.toQuery(updatedBuilderQuery);

      onQueryChange({
        ...query,
        azureLogAnalytics: {
          ...query.azureLogAnalytics,
          builderQuery: updatedBuilderQuery,
          query: updatedQueryString,
          basicLogsQuery: from ? basicLogsQuery : query.azureLogAnalytics?.basicLogsQuery,
        },
      });
    },
    [query, builderQuery, onQueryChange, allColumns]
  );

  return (
    <span data-testid={selectors.components.queryEditor.logsQueryBuilder.container.input}>
      <EditorRows>
        {schema && tables.length === 0 && (
          <Alert
            severity="warning"
            title={t(
              'components.logs-query-builder.title-no-tables',
              'Resource loaded successfully but without any tables'
            )}
          />
        )}
        <TableSection
          {...props}
          tables={tables}
          allColumns={allColumns}
          buildAndUpdateQuery={buildAndUpdateQuery}
          isLoadingSchema={isLoadingSchema}
        />
        <FilterSection
          {...props}
          allColumns={allColumns}
          buildAndUpdateQuery={buildAndUpdateQuery}
          datasource={datasource}
          timeRange={timeRange}
        />
        <AggregateSection {...props} allColumns={allColumns} buildAndUpdateQuery={buildAndUpdateQuery} />
        <GroupBySection {...props} allColumns={allColumns} buildAndUpdateQuery={buildAndUpdateQuery} />
        <OrderBySection {...props} allColumns={allColumns} buildAndUpdateQuery={buildAndUpdateQuery} />
        <FuzzySearch {...props} allColumns={allColumns} buildAndUpdateQuery={buildAndUpdateQuery} />
        <LimitSection {...props} buildAndUpdateQuery={buildAndUpdateQuery} />
        <KQLPreview
          query={query.azureLogAnalytics?.query || ''}
          hidden={isKQLPreviewHidden}
          setHidden={setIsKQLPreviewHidden}
        />
      </EditorRows>
    </span>
  );
};