"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.DifferentialTopNFunctionsView = DifferentialTopNFunctionsView; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _eui = require("@elastic/eui"); var _react = _interopRequireWildcard(require("react")); var _async_component = require("../../../components/async_component"); var _use_profiling_dependencies = require("../../../components/contexts/profiling_dependencies/use_profiling_dependencies"); var _normalization_menu = require("../../../components/normalization_menu"); var _primary_and_comparison_search_bar = require("../../../components/primary_and_comparison_search_bar"); var _topn_functions = require("../../../components/topn_functions"); var _topn_functions_summary = require("../../../components/topn_functions_summary"); var _use_async = require("../../../hooks/use_async"); var _use_profiling_params = require("../../../hooks/use_profiling_params"); var _use_profiling_router = require("../../../hooks/use_profiling_router"); var _use_profiling_route_path = require("../../../hooks/use_profiling_route_path"); var _use_time_range = require("../../../hooks/use_time_range"); var _use_time_range_async = require("../../../hooks/use_time_range_async"); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ function DifferentialTopNFunctionsView() { const baseGridRef = (0, _react.useRef)(null); const comparisonGridRef = (0, _react.useRef)(null); const { query } = (0, _use_profiling_params.useProfilingParams)('/functions/differential'); const { rangeFrom, rangeTo, kuery, sortDirection, sortField, comparisonKuery, normalizationMode, comparisonRangeFrom, comparisonRangeTo, baseline = 1, comparison = 1, pageIndex = 0 } = query; const timeRange = (0, _use_time_range.useTimeRange)({ rangeFrom, rangeTo }); const comparisonTimeRange = (0, _use_time_range.useTimeRange)({ rangeFrom: comparisonRangeFrom, rangeTo: comparisonRangeTo, optional: true }); const totalSeconds = timeRange.inSeconds.end - timeRange.inSeconds.start; const totalComparisonSeconds = (new Date(comparisonTimeRange.end).getTime() - new Date(comparisonTimeRange.start).getTime()) / 1000; const comparisonTime = totalSeconds / totalComparisonSeconds; const baselineTime = 1; const normalizationOptions = { baselineScale: baseline, baselineTime, comparisonScale: comparison, comparisonTime }; const { services: { fetchTopNFunctions } } = (0, _use_profiling_dependencies.useProfilingDependencies)(); const state = (0, _use_time_range_async.useTimeRangeAsync)(({ http }) => { return fetchTopNFunctions({ http, timeFrom: timeRange.inSeconds.start, timeTo: timeRange.inSeconds.end, startIndex: 0, endIndex: 100000, kuery }); }, [timeRange.inSeconds.start, timeRange.inSeconds.end, kuery, fetchTopNFunctions]); const comparisonState = (0, _use_time_range_async.useTimeRangeAsync)(({ http }) => { if (!comparisonTimeRange.inSeconds.start || !comparisonTimeRange.inSeconds.end) { return undefined; } return fetchTopNFunctions({ http, timeFrom: comparisonTimeRange.inSeconds.start, timeTo: comparisonTimeRange.inSeconds.end, startIndex: 0, endIndex: 100000, kuery: comparisonKuery }); }, [comparisonTimeRange.inSeconds.start, comparisonTimeRange.inSeconds.end, comparisonKuery, fetchTopNFunctions]); const routePath = (0, _use_profiling_route_path.useProfilingRoutePath)(); const profilingRouter = (0, _use_profiling_router.useProfilingRouter)(); function onChangeNormalizationMode(nextNormalizationMode, options) { profilingRouter.push(routePath, { path: routePath, query: nextNormalizationMode === _normalization_menu.NormalizationMode.Scale ? { ...query, baseline: options.baselineScale, comparison: options.comparisonScale, normalizationMode: nextNormalizationMode } : { ...query, normalizationMode: nextNormalizationMode } }); } const isNormalizedByTime = normalizationMode === _normalization_menu.NormalizationMode.Time; function handleOnFrameClick(functionName) { profilingRouter.push('/flamegraphs/flamegraph', { path: {}, query: { ...query, searchText: functionName } }); } function handleBaseGridScroll(scroll) { var _comparisonGridRef$cu; if (comparisonGridRef !== null && comparisonGridRef !== void 0 && (_comparisonGridRef$cu = comparisonGridRef.current) !== null && _comparisonGridRef$cu !== void 0 && _comparisonGridRef$cu.scrollTo) { comparisonGridRef.current.scrollTo({ scrollTop: scroll.scrollTop }); } } function handleComparisonGridScroll(scroll) { var _baseGridRef$current; if (baseGridRef !== null && baseGridRef !== void 0 && (_baseGridRef$current = baseGridRef.current) !== null && _baseGridRef$current !== void 0 && _baseGridRef$current.scrollTo) { baseGridRef.current.scrollTo({ scrollTop: scroll.scrollTop }); } } function handlePageChange(nextPage) { profilingRouter.push('/functions/differential', { path: {}, query: { ...query, pageIndex: nextPage } }); } function handleSortChange(sorting) { profilingRouter.push('/functions/differential', { path: {}, query: { ...query, sortField: sorting.id, sortDirection: sorting.direction } }); } return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, { direction: "column" }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, { grow: false }, /*#__PURE__*/_react.default.createElement(_eui.EuiPanel, { hasShadow: false, color: "subdued" }, /*#__PURE__*/_react.default.createElement(_primary_and_comparison_search_bar.PrimaryAndComparisonSearchBar, null), /*#__PURE__*/_react.default.createElement(_eui.EuiHorizontalRule, null), /*#__PURE__*/_react.default.createElement(_normalization_menu.NormalizationMenu, { mode: normalizationMode, options: normalizationOptions, onChange: onChangeNormalizationMode }), /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, null), /*#__PURE__*/_react.default.createElement(_topn_functions_summary.TopNFunctionsSummary, { baselineTopNFunctions: state.data, comparisonTopNFunctions: comparisonState.data, baselineScaleFactor: isNormalizedByTime ? baselineTime : baseline, comparisonScaleFactor: isNormalizedByTime ? comparisonTime : comparison, isLoading: state.status === _use_async.AsyncStatus.Loading || comparisonState.status === _use_async.AsyncStatus.Loading, baselineDuration: totalSeconds, comparisonDuration: totalComparisonSeconds }))), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, { grow: false }), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, { direction: "row", gutterSize: "s" }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_async_component.AsyncComponent, (0, _extends2.default)({}, state, { size: "xl", alignTop: true }), /*#__PURE__*/_react.default.createElement(_topn_functions.TopNFunctionsGrid, { ref: baseGridRef, topNFunctions: state.data, totalSeconds: timeRange.inSeconds.end - timeRange.inSeconds.start, isDifferentialView: true, onFrameClick: handleOnFrameClick, baselineScaleFactor: isNormalizedByTime ? baselineTime : baseline, onScroll: handleBaseGridScroll, pageIndex: pageIndex, onChangePage: handlePageChange, sortField: sortField, sortDirection: sortDirection, onChangeSort: handleSortChange }))), comparisonTimeRange.inSeconds.start && comparisonTimeRange.inSeconds.end ? /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_async_component.AsyncComponent, (0, _extends2.default)({}, comparisonState, { size: "xl", alignTop: true }), /*#__PURE__*/_react.default.createElement(_topn_functions.TopNFunctionsGrid, { ref: comparisonGridRef, topNFunctions: comparisonState.data, baselineScaleFactor: isNormalizedByTime ? comparisonTime : comparison, comparisonTopNFunctions: state.data, comparisonScaleFactor: isNormalizedByTime ? baselineTime : baseline, totalSeconds: totalSeconds, isDifferentialView: true, onFrameClick: handleOnFrameClick, onScroll: handleComparisonGridScroll, showDiffColumn: true, pageIndex: pageIndex, onChangePage: handlePageChange, sortField: sortField, sortDirection: sortDirection, onChangeSort: handleSortChange, dataTestSubj: "TopNFunctionsComparisonGrid" }))) : null)))); }