From 000b70c000ec1c8ce9d2ccda6faf60247116a263 Mon Sep 17 00:00:00 2001 From: jennypavlova Date: Fri, 6 Oct 2023 14:01:19 +0200 Subject: [PATCH] [Infra UI] Fix process charts after refactoring (#168159) Closes #168156 ## Summary This PR fixes process charts error: ![image](https://github.com/elastic/kibana/assets/14139027/4d907c77-07a3-40da-96fd-2340bce2efc8) I assume that after the merge of the refactoring PR, those files were recreated by another PR or most likely when `main` was merged to [the refactoring PR](https://github.com/elastic/kibana/pull/166965) with them as resolved conflicts. Deleting the files again fixed the issue. ## Testing I found the issue on serverless but it probably can be reproduced on on-prem as well On Serverless: - Start a local es instance: `yarn es serverless --kill --clean --license trial --ssl` - Enable infra in the `serverless.oblt.dev.yml` file: - `xpack.infra.enabled: true` - Start a local kibana instance: `yarn serverless-oblt --ssl` and see if the side nav contains the Infrastructure item - Navigate to https://0.0.0.0:5601/ftw/app/hosts and open Asset details flyout or page - Click on the process tab and expand one of the processes - The charts (CPU and Memory) should be visible --- .../tabs/processes/processes.tsx | 6 +- .../inventory_view/hooks/use_process_list.ts | 79 ------------------- .../hooks/use_process_list_row_chart.ts | 55 ------------- 3 files changed, 1 insertion(+), 139 deletions(-) delete mode 100644 x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_process_list.ts delete mode 100644 x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_process_list_row_chart.ts diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx index 52bad6238c103..973ff681ab570 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx @@ -23,11 +23,7 @@ import { parseSearchString } from './parse_search_string'; import { ProcessesTable } from './processes_table'; import { STATE_NAMES } from './states'; import { SummaryTable } from './summary_table'; -import { - SortBy, - useProcessList, - ProcessListContextProvider, -} from '../../../../pages/metrics/inventory_view/hooks/use_process_list'; +import { SortBy, useProcessList, ProcessListContextProvider } from '../../hooks/use_process_list'; import { getFieldByType } from '../../../../../common/inventory_models'; import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props'; import { useDateRangeProviderContext } from '../../hooks/use_date_range'; diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_process_list.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_process_list.ts deleted file mode 100644 index 532195ba32cc0..0000000000000 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_process_list.ts +++ /dev/null @@ -1,79 +0,0 @@ -/* - * 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. - */ - -import createContainter from 'constate'; -import { fold } from 'fp-ts/lib/Either'; -import { identity } from 'fp-ts/lib/function'; -import { pipe } from 'fp-ts/lib/pipeable'; -import { useEffect } from 'react'; -import { ProcessListAPIResponse, ProcessListAPIResponseRT } from '../../../../../common/http_api'; -import { throwErrors, createPlainError } from '../../../../../common/runtime_types'; -import { useHTTPRequest } from '../../../../hooks/use_http_request'; -import { useSourceContext } from '../../../../containers/metrics_source'; - -export interface SortBy { - name: string; - isAscending: boolean; -} - -export function useProcessList( - hostTerm: Record, - to: number, - sortBy: SortBy, - searchFilter: object -) { - const { createDerivedIndexPattern } = useSourceContext(); - const indexPattern = createDerivedIndexPattern().title; - - const decodeResponse = (response: any) => { - return pipe( - ProcessListAPIResponseRT.decode(response), - fold(throwErrors(createPlainError), identity) - ); - }; - - const parsedSortBy = - sortBy.name === 'runtimeLength' - ? { - ...sortBy, - name: 'startTime', - } - : sortBy; - - const { error, loading, response, makeRequest } = useHTTPRequest( - '/api/metrics/process_list', - 'POST', - JSON.stringify({ - hostTerm, - indexPattern, - to, - sortBy: parsedSortBy, - searchFilter, - }), - decodeResponse - ); - - useEffect(() => { - makeRequest(); - }, [makeRequest]); - - return { - error: (error && error.message) || null, - loading, - response, - makeRequest, - }; -} - -function useProcessListParams(props: { hostTerm: Record; to: number }) { - const { hostTerm, to } = props; - const { createDerivedIndexPattern } = useSourceContext(); - const indexPattern = createDerivedIndexPattern().title; - return { hostTerm, indexPattern, to }; -} -const ProcessListContext = createContainter(useProcessListParams); -export const [ProcessListContextProvider, useProcessListContext] = ProcessListContext; diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_process_list_row_chart.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_process_list_row_chart.ts deleted file mode 100644 index 0d718ffbe210c..0000000000000 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_process_list_row_chart.ts +++ /dev/null @@ -1,55 +0,0 @@ -/* - * 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. - */ - -import { fold } from 'fp-ts/lib/Either'; -import { identity } from 'fp-ts/lib/function'; -import { pipe } from 'fp-ts/lib/pipeable'; -import { useEffect, useState } from 'react'; -import { - ProcessListAPIChartResponse, - ProcessListAPIChartResponseRT, -} from '../../../../../common/http_api'; -import { throwErrors, createPlainError } from '../../../../../common/runtime_types'; -import { useHTTPRequest } from '../../../../hooks/use_http_request'; -import { useProcessListContext } from './use_process_list'; - -export function useProcessListRowChart(command: string) { - const [inErrorState, setInErrorState] = useState(false); - const decodeResponse = (response: any) => { - return pipe( - ProcessListAPIChartResponseRT.decode(response), - fold(throwErrors(createPlainError), identity) - ); - }; - const { hostTerm, indexPattern, to } = useProcessListContext(); - - const { error, loading, response, makeRequest } = useHTTPRequest( - '/api/metrics/process_list/chart', - 'POST', - JSON.stringify({ - hostTerm, - indexPattern, - to, - command, - }), - decodeResponse - ); - - useEffect(() => setInErrorState(true), [error]); - useEffect(() => setInErrorState(false), [loading]); - - useEffect(() => { - makeRequest(); - }, [makeRequest]); - - return { - error: inErrorState, - loading, - response, - makeRequest, - }; -}