From 133bf3b6645d62fc199418ae34144e25e2bd8492 Mon Sep 17 00:00:00 2001 From: Nelson Kopliku Date: Mon, 16 Jan 2023 09:10:54 +0100 Subject: [PATCH 1/4] Expose a getCheckRemediation function from checks utils --- assets/js/components/ChecksResults/checksUtils.js | 5 +++++ assets/js/components/ChecksResults/checksUtils.test.js | 8 ++++++++ assets/js/components/ChecksResults/index.js | 2 ++ 3 files changed, 15 insertions(+) diff --git a/assets/js/components/ChecksResults/checksUtils.js b/assets/js/components/ChecksResults/checksUtils.js index 1a9873a0e8..feea287c0f 100644 --- a/assets/js/components/ChecksResults/checksUtils.js +++ b/assets/js/components/ChecksResults/checksUtils.js @@ -109,3 +109,8 @@ export const getCheckDescription = (catalog, checkID) => { } return null; }; + +export const getCheckRemediation = (catalog, checkID) => { + const check = findCheck(catalog, checkID); + return check?.remediation; +}; diff --git a/assets/js/components/ChecksResults/checksUtils.test.js b/assets/js/components/ChecksResults/checksUtils.test.js index 70e9394513..fb77318db0 100644 --- a/assets/js/components/ChecksResults/checksUtils.test.js +++ b/assets/js/components/ChecksResults/checksUtils.test.js @@ -14,6 +14,7 @@ import { import { getCheckDescription, + getCheckRemediation, getCheckResults, getChecks, getCheckHealthByAgent, @@ -71,6 +72,13 @@ describe('checksUtils', () => { expect(getCheckDescription(catalog, id)).toBe(description); }); + it('getCheckRemediation should return a check remediation', () => { + const catalog = catalogCheckFactory.buildList(2); + const [{ id, remediation }] = catalog; + + expect(getCheckRemediation(catalog, id)).toBe(remediation); + }); + describe('getCheckHealthByAgent', () => { it('should return an empty map when check results are empty', () => { expect( diff --git a/assets/js/components/ChecksResults/index.js b/assets/js/components/ChecksResults/index.js index 29bf726cd0..93c3b7d363 100644 --- a/assets/js/components/ChecksResults/index.js +++ b/assets/js/components/ChecksResults/index.js @@ -8,6 +8,7 @@ import { getCheckHealthByAgent, getCheckResults, getCheckDescription, + getCheckRemediation, } from './checksUtils'; export { @@ -19,6 +20,7 @@ export { getCheckHealthByAgent, getCheckResults, getCheckDescription, + getCheckRemediation, }; export default ChecksResults; From eeabd3a836fd13bdb05e335e6fce944bbec65ee6 Mon Sep 17 00:00:00 2001 From: Nelson Kopliku Date: Mon, 16 Jan 2023 09:11:13 +0100 Subject: [PATCH 2/4] Add Check Remediation dialog in Executions results --- .../ExecutionResults/ExecutionResults.jsx | 3 ++- .../ExecutionResults.test.jsx | 19 +++++++++++++++++-- assets/js/components/Modal/Modal.jsx | 7 +++++-- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/assets/js/components/ExecutionResults/ExecutionResults.jsx b/assets/js/components/ExecutionResults/ExecutionResults.jsx index 207ed0854a..d503857f5c 100644 --- a/assets/js/components/ExecutionResults/ExecutionResults.jsx +++ b/assets/js/components/ExecutionResults/ExecutionResults.jsx @@ -16,6 +16,7 @@ import { getCheckHealthByAgent, getCheckResults, getCheckDescription, + getCheckRemediation, } from '@components/ChecksResults'; import ChecksResultFilters from '@components/ChecksResults/ChecksResultFilters'; import { UNKNOWN_PROVIDER } from '@components/ClusterDetails/ClusterSettings'; @@ -95,7 +96,7 @@ function ExecutionResults({ onClose={() => setModalOpen(false)} > - {getCheckDescription(catalog, selectedCheck)} + {getCheckRemediation(catalog, selectedCheck)} diff --git a/assets/js/components/ExecutionResults/ExecutionResults.test.jsx b/assets/js/components/ExecutionResults/ExecutionResults.test.jsx index 99e700642a..5e0cc275d3 100644 --- a/assets/js/components/ExecutionResults/ExecutionResults.test.jsx +++ b/assets/js/components/ExecutionResults/ExecutionResults.test.jsx @@ -1,11 +1,14 @@ import React from 'react'; import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + import { faker } from '@faker-js/faker'; import { renderWithRouter } from '@lib/test-utils'; import { catalogFactory, + catalogCheckFactory, hostnameFactory, addCriticalExpectation, addPassingExpectation, @@ -69,8 +72,8 @@ const prepareStateData = (checkExecutionStatus) => { const { loading, catalog, error } = catalogFactory.build({ loading: false, catalog: [ - catalogFactory.build({ id: checkID1 }), - catalogFactory.build({ id: checkID2 }), + catalogCheckFactory.build({ id: checkID1 }), + catalogCheckFactory.build({ id: checkID2 }), ], error: null, }); @@ -108,6 +111,13 @@ const prepareStateData = (checkExecutionStatus) => { describe('ExecutionResults', () => { it('should render ExecutionResults with successfully fetched results', async () => { + window.IntersectionObserver = jest.fn().mockImplementation(() => ({ + observe: () => null, + disconnect: () => null, + })); + + const user = userEvent.setup(); + const { clusterID, hostnames, @@ -145,6 +155,11 @@ describe('ExecutionResults', () => { expect(screen.getAllByText(checkID2)).toHaveLength(2); expect(screen.getAllByText('2/2 expectations passed')).toBeTruthy(); expect(screen.getAllByText('1/2 expectations failed')).toBeTruthy(); + + const [{ remediation }] = catalog; + expect(screen.queryByText(remediation)).not.toBeInTheDocument(); + await user.click(screen.getAllByText(checkID1)[0]); + expect(screen.getByText(remediation)).toBeVisible(); }); it('should render ExecutionResults with running state', async () => { diff --git a/assets/js/components/Modal/Modal.jsx b/assets/js/components/Modal/Modal.jsx index 66c6779254..71c822ff8e 100644 --- a/assets/js/components/Modal/Modal.jsx +++ b/assets/js/components/Modal/Modal.jsx @@ -1,15 +1,18 @@ -import React, { Fragment } from 'react'; +import React, { Fragment, useRef } from 'react'; import { Dialog, Transition } from '@headlessui/react'; function Modal({ children, open, onClose, title }) { + const refContent = useRef(null); + return ( -
+
Date: Mon, 16 Jan 2023 10:26:17 +0100 Subject: [PATCH 3/4] Uniform getCheckRemediation function to return null --- assets/js/components/ChecksResults/checksUtils.js | 5 ++++- assets/js/components/ChecksResults/checksUtils.test.js | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/assets/js/components/ChecksResults/checksUtils.js b/assets/js/components/ChecksResults/checksUtils.js index feea287c0f..e4d99b43a9 100644 --- a/assets/js/components/ChecksResults/checksUtils.js +++ b/assets/js/components/ChecksResults/checksUtils.js @@ -112,5 +112,8 @@ export const getCheckDescription = (catalog, checkID) => { export const getCheckRemediation = (catalog, checkID) => { const check = findCheck(catalog, checkID); - return check?.remediation; + if (check) { + return check.remediation; + } + return null; }; diff --git a/assets/js/components/ChecksResults/checksUtils.test.js b/assets/js/components/ChecksResults/checksUtils.test.js index fb77318db0..3c140524b7 100644 --- a/assets/js/components/ChecksResults/checksUtils.test.js +++ b/assets/js/components/ChecksResults/checksUtils.test.js @@ -77,6 +77,7 @@ describe('checksUtils', () => { const [{ id, remediation }] = catalog; expect(getCheckRemediation(catalog, id)).toBe(remediation); + expect(getCheckRemediation(catalog, 'wont-be-found')).toBe(null); }); describe('getCheckHealthByAgent', () => { From b4708ce60c946f90f80710d28d676ffdba2329d8 Mon Sep 17 00:00:00 2001 From: Nelson Kopliku Date: Mon, 16 Jan 2023 10:26:35 +0100 Subject: [PATCH 4/4] Make Dialog title a markdown as well --- .../ExecutionResults/ExecutionResults.jsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/assets/js/components/ExecutionResults/ExecutionResults.jsx b/assets/js/components/ExecutionResults/ExecutionResults.jsx index d503857f5c..3b6635fae9 100644 --- a/assets/js/components/ExecutionResults/ExecutionResults.jsx +++ b/assets/js/components/ExecutionResults/ExecutionResults.jsx @@ -42,6 +42,14 @@ const getLabel = (status, health, error, expectations, failedExpectations) => { return `${failedExpectations}/${expectations} expectations failed`; }; +function asMarkdownContent(content) { + return ( + + {content} + + ); +} + function ExecutionResults({ clusterID, clusterName, @@ -91,13 +99,11 @@ function ExecutionResults({ return (
setModalOpen(false)} > - - {getCheckRemediation(catalog, selectedCheck)} - + {asMarkdownContent(getCheckRemediation(catalog, selectedCheck))} Back to Cluster Details