Skip to content

Commit

Permalink
Checks results grouped by category (#1397)
Browse files Browse the repository at this point in the history
* Group all check results in ExecutionResults view

* Add unit tests and update exisitng test

* Update the ExecutionResults story

* Add gray color to ChecksResultOutline
  • Loading branch information
EMaksy authored May 15, 2023
1 parent 5df8eb7 commit 2e40964
Show file tree
Hide file tree
Showing 7 changed files with 313 additions and 47 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function CheckResultOutline({
);

return (
<div className="p-5">
<div className="p-5 bg-gray-50">
<div className="table w-full bg-white rounded shadow">
<div className="table-header-group bg-gray-50 border-b border-gray">
<div className="table-row">
Expand Down
44 changes: 32 additions & 12 deletions assets/js/components/ExecutionResults/ExecutionResults.jsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import React, { useState } from 'react';
import Table from '@components/Table';

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import Modal from '@components/Modal';

import { getHostID } from '@state/selectors/cluster';
import PremiumPill from '@components/PremiumPill';
import Accordion from '@components/Accordion';
import HealthIcon from '@components/Health';

import Modal from '@components/Modal';
import PremiumPill from '@components/PremiumPill';
import Table from '@components/Table';
import {
getCatalogCategoryList,
getCheckResults,
getCheckDescription,
getCheckRemediation,
getCheckExpectations,
getCheckGroup,
isPremium,
} from './checksUtils';

Expand All @@ -29,7 +29,7 @@ const resultsTableConfig = {
title: 'Id',
key: 'checkID',
fontSize: 'text-base',
className: 'bg-gray-50 border-b',
className: 'bg-gray-50 border-b w-1/6 h-auto',
render: (checkID, { onClick, premium }) => (
<div className="flex whitespace-nowrap text-jungle-green-500 justify-between">
<span
Expand All @@ -50,7 +50,7 @@ const resultsTableConfig = {
title: 'Description',
key: 'description',
fontSize: 'text-base',
className: 'bg-gray-50 border-b',
className: 'bg-gray-50 border-b h-auto',
render: (description) => (
<ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
{description}
Expand All @@ -61,7 +61,7 @@ const resultsTableConfig = {
title: 'Result',
key: 'result',
fontSize: 'text-base',
className: 'bg-gray-50 border-b',
className: 'bg-gray-50 border-b w-1/6 h-auto',
render: (_, { result }) => <HealthIcon health={result} />,
},
],
Expand Down Expand Up @@ -116,7 +116,9 @@ function ExecutionResults({
}
};

const tableData = getCheckResults(executionData)
const checksResults = getCheckResults(executionData);
const catalogCategoryList = getCatalogCategoryList(catalog, checksResults);
const tableData = checksResults
.filter((check) => {
if (predicates.length === 0) {
return true;
Expand All @@ -135,6 +137,7 @@ function ExecutionResults({
checkID,
result,
clusterName,
category: getCheckGroup(catalog, checkID),
executionState: executionData?.status,
description: getCheckDescription(catalog, checkID),
expectations: getCheckExpectations(catalog, checkID),
Expand All @@ -147,6 +150,11 @@ function ExecutionResults({
},
})
);
const filterAndSortData = (data, item) =>
data
.filter((obj) => obj.category === item)
.sort((a, b) => a.description.localeCompare(b.description));

return (
<ExecutionContainer
catalogLoading={catalogLoading}
Expand Down Expand Up @@ -174,7 +182,20 @@ function ExecutionResults({
onContentRefresh={onContentRefresh}
onStartExecution={onStartExecution}
>
<Table config={resultsTableConfig} data={tableData} />
{catalogCategoryList.map((item) => (
<Accordion
defaultOpen
className="check-group mb-4"
header={item}
key={item}
>
<Table
config={resultsTableConfig}
data={filterAndSortData(tableData, item)}
withPadding={false}
/>
</Accordion>
))}
</ResultsContainer>
<Modal
open={modalOpen}
Expand All @@ -192,5 +213,4 @@ function ExecutionResults({
</ExecutionContainer>
);
}

export default ExecutionResults;
223 changes: 208 additions & 15 deletions assets/js/components/ExecutionResults/ExecutionResults.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,33 @@ import { hostFactory, clusterFactory } from '@lib/test-utils/factories';
import ExecutionResults from '.';

const executionID = '9fbcaec6-e65e-4adc-9cac-fc542c66717b';
const agentID = '22248a4c-216f-45d8-90ff-904d27900efc';
const agentID = [
'8a2a4977-357d-4b76-b3c0-9b6a0e334d9d',
'e1b2fc0e-8eae-42bb-81a7-6ddc8d13e05b',
'3f9675e9-2c59-4f0e-a1e8-7ebd4df3d90c',
'b1dc32a5-9466-4e2d-bd4f-9a462c153c36',
];
const checkID = ['DC5429', 'FB0E0D', '68626E', '15F7A8'];
const checkNames = [
'SBD_PACEMAKER',
'corosync running 2 ring configuration',
'SBD msgwait timeout',
'Check Corosync token_retransmits_before_loss_const during runtime',
];
const checkResults = ['passing', 'warning', 'critical', 'unknown'];
const checkIsPremium = [true, false];
const checkGroup = ['Corosync', 'SBD'];
const checkDescription = [
'Corosync `token` timeout is set to expected value\n',
'Corosync is running with consensus timeout set to the recommended value',
'SBD msgwait timeout value is at least two times the watchdog timeout',
'Corosync is running with `token_retransmits_before_loss_const` set to the recommended value',
];
const checkRemediation = [
'Additional remediation instructions',
'Abstract the value of the Corosync `token` timeout is not set as recommended',
];

const groupID = '02acea9d-9658-4902-9806-0eef2bfbbf5d';
const cloudProvider = 'azure';

Expand All @@ -16,7 +42,7 @@ const { name: clusterName, type: clusterScenario } = clusterFactory.build({

const clusterHosts = [
hostFactory.build({
id: agentID,
id: agentID[0],
hostname: 'carbonarahost01',
cluster_id: groupID,
}),
Expand All @@ -41,25 +67,90 @@ const completedExecution = {
{
agents_check_results: [
{
agent_id: agentID,
agent_id: agentID[0],
expectation_evaluations: [
{
name: 'expectation_example',
name: checkNames[0],
return_value: 123,
type: 'expect',
},
],
facts: [
{ check_id: '156F64', name: 'lol_this_is_a_fact', value: 123 },
{ check_id: checkID[0], name: 'lol_this_is_a_fact', value: 123 },
],
values: [],
},
],
check_id: checkID[0],
expectation_results: [
{ name: checkNames[0], result: true, type: 'expect' },
],
result: checkResults[0],
},

{
agents_check_results: [
{
agent_id: agentID[1],
expectation_evaluations: [
{
name: checkNames[1],
return_value: 456,
type: 'expect',
},
],
facts: [{ check_id: checkID[1], name: 'new_fact', value: 456 }],
values: [],
},
],
check_id: checkID[1],
expectation_results: [
{ name: checkNames[1], result: true, type: 'expect' },
],
result: checkResults[1],
},

{
agents_check_results: [
{
agent_id: agentID[2],
expectation_evaluations: [
{
name: checkNames[2],
return_value: 456,
type: 'expect',
},
],
facts: [{ check_id: checkID[2], name: 'new_fact', value: 456 }],
values: [],
},
],
check_id: '156F64',
check_id: checkID[2],
expectation_results: [
{ name: 'expectation_example', result: true, type: 'expect' },
{ name: checkNames[2], result: true, type: 'expect' },
],
result: 'passing',
result: checkResults[2],
},
{
agents_check_results: [
{
agent_id: agentID[3],
expectation_evaluations: [
{
name: checkNames[3],
return_value: 456,
type: 'expect',
},
],
facts: [{ check_id: checkID[3], name: 'new_fact', value: 456 }],
values: [],
},
],
check_id: checkID[3],
expectation_results: [
{ name: checkNames[3], result: true, type: 'expect' },
],
result: checkResults[3],
},
],
completed_at: '2022-11-09T17:02:20.629366Z',
Expand All @@ -76,7 +167,7 @@ const catalogData = {
data: {
items: [
{
description: 'Corosync `token` timeout is set to expected value\n',
description: checkDescription[0],
expectations: [
{
expression:
Expand All @@ -92,12 +183,11 @@ const catalogData = {
name: 'corosync_token_timeout',
},
],
group: 'Corosync',
id: '156F64',
name: 'Corosync configuration file',
remediation:
'## Abstract\nThe value of the Corosync `token` timeout is not set as recommended.\n## Remediation\n...\n',
severity: 'critical',
group: checkGroup[0],
premium: checkIsPremium[1],
id: checkID[0],
name: checkNames[0],
remediation: checkRemediation[1],
values: [
{
conditions: [
Expand All @@ -112,6 +202,109 @@ const catalogData = {
},
],
},
{
id: checkID[1],
description: checkDescription[1],
expectations: [
{
expression: 'additional_expression',
name: 'additional_expectation',
type: 'expect',
},
],
facts: [
{
argument: 'additional_argument',
gatherer: 'additional_gatherer',
name: 'additional_fact',
},
],
group: checkGroup[0],
premium: checkIsPremium[0],
name: checkNames[1],
remediation: checkRemediation[0],
values: [
{
conditions: [
{
expression: 'additional_condition_expression',
value: 'additional_condition_value',
},
],
default: 'additional_default_value',
name: 'additional_value',
},
],
},
{
id: checkID[2],
description: checkDescription[2],
expectations: [
{
expression: 'additional_expression',
name: 'additional_expectation',
type: 'expect',
},
],
facts: [
{
argument: 'additional_argument',
gatherer: 'additional_gatherer',
name: 'additional_fact',
},
],
group: checkGroup[1],
premium: checkIsPremium[0],
name: checkNames[2],
remediation: checkRemediation[0],
values: [
{
conditions: [
{
expression: 'additional_condition_expression',
value: 'additional_condition_value',
},
],
default: 'additional_default_value',
name: 'additional_value',
},
],
},
{
id: checkID[3],
description: checkDescription[3],
expectations: [
{
expression: 'additional_expression',
name: 'additional_expectation',
type: 'expect',
},
],
facts: [
{
argument: 'additional_argument',
gatherer: 'additional_gatherer',
name: 'additional_fact',
},
],
group: checkGroup[0],
premium: checkIsPremium[1],
name: checkNames[3],
remediation: checkRemediation[0],

values: [
{
conditions: [
{
expression: 'additional_condition_expression',
value: 'additional_condition_value',
},
],
default: 'additional_default_value',
name: 'additional_value',
},
],
},
],
},
};
Expand Down
Loading

0 comments on commit 2e40964

Please sign in to comment.